✨(sharing) add shared calendars, remove "agenda" wording

2026-02-11 23:35:46 +01:00
parent a38845e523
commit acce8d1425
4 changed files with 106 additions and 31 deletions
--- a/src/frontend/apps/calendars/src/features/calendar/components/calendar-list/CalendarList.tsx
+++ b/src/frontend/apps/calendars/src/features/calendar/components/calendar-list/CalendarList.tsx
@@ -20,7 +20,8 @@ import { extractCaldavPath } from "./utils";
 export const CalendarList = () => {
  const { t } = useTranslation();
  const {
-    davCalendars,
+    ownedCalendars,
+    sharedCalendars,
    visibleCalendarUrls,
    toggleCalendarVisibility,
    createCalendar,
@@ -34,6 +35,7 @@ export const CalendarList = () => {
    deleteState,
    shareModalState,
    isMyCalendarsExpanded,
+    isSharedCalendarsExpanded,
    openMenuUrl,
    handleOpenCreateModal,
    handleOpenEditModal,
@@ -47,6 +49,7 @@ export const CalendarList = () => {
    handleMenuToggle,
    handleCloseMenu,
    handleToggleMyCalendars,
+    handleToggleSharedCalendars,
  } = useCalendarListState({
    createCalendar,
    updateCalendar,
@@ -138,7 +141,7 @@ export const CalendarList = () => {
          </div>
          {isMyCalendarsExpanded && (
            <div className="calendar-list__items">
-              {davCalendars.map((calendar) => (
+              {ownedCalendars.map((calendar) => (
                <CalendarListItem
                  key={calendar.url}
                  calendar={calendar}
@@ -157,6 +160,50 @@ export const CalendarList = () => {
            </div>
          )}
        </div>
+
+        {sharedCalendars.length > 0 && (
+          <div className="calendar-list__section">
+            <div className="calendar-list__section-header">
+              <button
+                className="calendar-list__toggle-btn"
+                onClick={handleToggleSharedCalendars}
+                aria-expanded={isSharedCalendarsExpanded}
+              >
+                <span
+                  className={`material-icons calendar-list__toggle-icon ${
+                    isSharedCalendarsExpanded
+                      ? 'calendar-list__toggle-icon--expanded'
+                      : ''
+                  }`}
+                >
+                  expand_more
+                </span>
+                <span className="calendar-list__section-title">
+                  {t('calendar.list.sharedCalendars')}
+                </span>
+              </button>
+            </div>
+            {isSharedCalendarsExpanded && (
+              <div className="calendar-list__items">
+                {sharedCalendars.map((calendar) => (
+                  <CalendarListItem
+                    key={calendar.url}
+                    calendar={calendar}
+                    isVisible={visibleCalendarUrls.has(calendar.url)}
+                    isMenuOpen={openMenuUrl === calendar.url}
+                    onToggleVisibility={toggleCalendarVisibility}
+                    onMenuToggle={handleMenuToggle}
+                    onEdit={handleOpenEditModal}
+                    onDelete={handleOpenDeleteModal}
+                    onImport={handleOpenImportModal}
+                    onSubscription={handleOpenSubscriptionModal}
+                    onCloseMenu={handleCloseMenu}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+        )}
      </div>

      <CalendarModal
--- a/src/frontend/apps/calendars/src/features/calendar/components/calendar-list/hooks/useCalendarListState.ts
+++ b/src/frontend/apps/calendars/src/features/calendar/components/calendar-list/hooks/useCalendarListState.ts
@@ -47,6 +47,7 @@ export const useCalendarListState = ({
  });

  const [isMyCalendarsExpanded, setIsMyCalendarsExpanded] = useState(true);
+  const [isSharedCalendarsExpanded, setIsSharedCalendarsExpanded] = useState(true);
  const [openMenuUrl, setOpenMenuUrl] = useState<string | null>(null);

  // Modal handlers
@@ -159,6 +160,10 @@ export const useCalendarListState = ({
    setIsMyCalendarsExpanded((prev) => !prev);
  }, []);

+  const handleToggleSharedCalendars = useCallback(() => {
+    setIsSharedCalendarsExpanded((prev) => !prev);
+  }, []);
+
  return {
    // Modal state
    modalState,
@@ -167,6 +172,7 @@ export const useCalendarListState = ({

    // Expansion state
    isMyCalendarsExpanded,
+    isSharedCalendarsExpanded,
    openMenuUrl,

    // Modal handlers
@@ -190,5 +196,6 @@ export const useCalendarListState = ({

    // Expansion handlers
    handleToggleMyCalendars,
+    handleToggleSharedCalendars,
  };
 };
--- a/src/frontend/apps/calendars/src/features/calendar/contexts/CalendarContext.tsx
+++ b/src/frontend/apps/calendars/src/features/calendar/contexts/CalendarContext.tsx
@@ -48,6 +48,8 @@ export interface CalendarContextType {
  caldavService: CalDavService;
  adapter: EventCalendarAdapter;
  davCalendars: CalDavCalendar[];
+  ownedCalendars: CalDavCalendar[];
+  sharedCalendars: CalDavCalendar[];
  visibleCalendarUrls: Set<string>;
  isLoading: boolean;
  isConnected: boolean;
@@ -107,6 +109,23 @@ export const CalendarContextProvider = ({
  const [currentDate, setCurrentDate] = useState<Date>(new Date());
  const [selectedDate, setSelectedDate] = useState<Date>(new Date());

+  const { ownedCalendars, sharedCalendars } = useMemo(() => {
+    const homeUrl = caldavService.getAccount()?.homeUrl;
+    if (!homeUrl) {
+      return { ownedCalendars: davCalendars, sharedCalendars: [] };
+    }
+    const owned: CalDavCalendar[] = [];
+    const shared: CalDavCalendar[] = [];
+    for (const cal of davCalendars) {
+      if (cal.url.startsWith(homeUrl)) {
+        owned.push(cal);
+      } else {
+        shared.push(cal);
+      }
+    }
+    return { ownedCalendars: owned, sharedCalendars: shared };
+  }, [davCalendars, caldavService]);
+
  const refreshCalendars = useCallback(async () => {
    try {
      setIsLoading(true);
@@ -325,6 +344,8 @@ export const CalendarContextProvider = ({
    caldavService,
    adapter,
    davCalendars,
+    ownedCalendars,
+    sharedCalendars,
    visibleCalendarUrls,
    isLoading,
    isConnected,
--- a/src/frontend/apps/calendars/src/features/i18n/translations.json
+++ b/src/frontend/apps/calendars/src/features/i18n/translations.json
@@ -804,8 +804,8 @@
          }
        },
        "list": {
-          "myCalendars": "Mes agendas",
-          "sharedCalendars": "Agendas partagés",
+          "myCalendars": "Mes calendriers",
+          "sharedCalendars": "Calendriers partagés",
          "shared": "(partagé)",
          "showCalendar": "Afficher le calendrier",
          "edit": "Modifier",
@@ -906,32 +906,32 @@
          }
        },
        "createCalendar": {
-          "title": "Créer un agenda",
+          "title": "Créer un calendrier",
          "name": "Nom",
-          "namePlaceholder": "Nom de l'agenda",
+          "namePlaceholder": "Nom du calendrier",
          "nameRequired": "Le nom est requis",
          "color": "Couleur",
          "description": "Description",
-          "descriptionPlaceholder": "Description de l'agenda (optionnel)",
+          "descriptionPlaceholder": "Description du calendrier (optionnel)",
          "cancel": "Annuler",
          "create": "Créer"
        },
        "editCalendar": {
-          "title": "Modifier l'agenda",
+          "title": "Modifier le calendrier",
          "save": "Enregistrer"
        },
        "deleteCalendar": {
-          "title": "Supprimer l'agenda",
-          "message": "Êtes-vous sûr de vouloir supprimer l'agenda \"{{name}}\" ? Cette action est irréversible.",
+          "title": "Supprimer le calendrier",
+          "message": "Êtes-vous sûr de vouloir supprimer le calendrier \"{{name}}\" ? Cette action est irréversible.",
          "confirm": "Supprimer"
        },
        "shareCalendar": {
-          "title": "Partager l'agenda",
+          "title": "Partager le calendrier",
          "emailPlaceholder": "Entrez l'adresse email",
          "share": "Partager",
          "hint": "La personne aura les mêmes droits que vous (lecture et écriture).",
-          "success": "Agenda partagé avec {{email}}",
-          "error": "Échec du partage de l'agenda",
+          "success": "Calendrier partagé avec {{email}}",
+          "error": "Échec du partage du calendrier",
          "invalidEmail": "Veuillez entrer une adresse email valide"
        },
        "attendees": {
@@ -1109,7 +1109,7 @@
        "event": {
          "createTitle": "Evenement aanmaken",
          "editTitle": "Evenement bewerken",
-          "calendar": "Agenda",
+          "calendar": "Kalender",
          "title": "Titel",
          "titlePlaceholder": "Evenement titel",
          "location": "Locatie",
@@ -1178,10 +1178,10 @@
          }
        },
        "list": {
-          "myCalendars": "Mijn agenda's",
-          "sharedCalendars": "Gedeelde agenda's",
+          "myCalendars": "Mijn kalenders",
+          "sharedCalendars": "Gedeelde kalenders",
          "shared": "(gedeeld)",
-          "showCalendar": "Agenda tonen",
+          "showCalendar": "Kalender tonen",
          "edit": "Bewerken",
          "delete": "Verwijderen",
          "share": "Delen",
@@ -1202,21 +1202,21 @@
          "errorDetails": "Foutdetails"
        },
        "subscription": {
-          "title": "Agenda-abonnements-URL",
-          "description": "Gebruik deze URL om u te abonneren op \"{{name}}\" vanuit externe agendatoepassingen (Apple Calendar, Google Calendar, Outlook, etc.).",
+          "title": "Kalender-abonnements-URL",
+          "description": "Gebruik deze URL om u te abonneren op \"{{name}}\" vanuit externe kalendertoepassingen (Apple Calendar, Google Calendar, Outlook, etc.).",
          "loading": "Abonnements-URL wordt gegenereerd...",
          "copy": "Kopiëren",
          "copied": "Gekopieerd!",
          "close": "Sluiten",
-          "warning": "Deze URL bevat een privétoken. Iedereen met deze link kan uw agenda-evenementen bekijken.",
+          "warning": "Deze URL bevat een privétoken. Iedereen met deze link kan uw kalender-evenementen bekijken.",
          "regenerate": "URL regenereren",
          "regenerateConfirm": {
            "title": "Abonnements-URL regenereren?",
-            "message": "Dit maakt de huidige URL ongeldig. Externe agenda's die de oude URL gebruiken zullen niet meer synchroniseren.",
+            "message": "Dit maakt de huidige URL ongeldig. Externe kalenders die de oude URL gebruiken zullen niet meer synchroniseren.",
            "confirm": "Regenereren"
          },
          "error": "Genereren van abonnements-URL mislukt. Probeer het opnieuw.",
-          "errorPermission": "U heeft geen toegang tot deze agenda.",
+          "errorPermission": "U heeft geen toegang tot deze kalender.",
          "errorNetwork": "Netwerkfout. Controleer uw verbinding en probeer het opnieuw.",
          "errorServer": "Serverfout. Probeer het later opnieuw."
        },
@@ -1280,32 +1280,32 @@
          }
        },
        "createCalendar": {
-          "title": "Agenda aanmaken",
+          "title": "Kalender aanmaken",
          "name": "Naam",
-          "namePlaceholder": "Agenda naam",
+          "namePlaceholder": "Kalender naam",
          "nameRequired": "Naam is verplicht",
          "color": "Kleur",
          "description": "Beschrijving",
-          "descriptionPlaceholder": "Agenda beschrijving (optioneel)",
+          "descriptionPlaceholder": "Kalender beschrijving (optioneel)",
          "cancel": "Annuleren",
          "create": "Aanmaken"
        },
        "editCalendar": {
-          "title": "Agenda bewerken",
+          "title": "Kalender bewerken",
          "save": "Opslaan"
        },
        "deleteCalendar": {
-          "title": "Agenda verwijderen",
-          "message": "Weet u zeker dat u de agenda \"{{name}}\" wilt verwijderen? Deze actie kan niet ongedaan worden gemaakt.",
+          "title": "Kalender verwijderen",
+          "message": "Weet u zeker dat u de kalender \"{{name}}\" wilt verwijderen? Deze actie kan niet ongedaan worden gemaakt.",
          "confirm": "Verwijderen"
        },
        "shareCalendar": {
-          "title": "Agenda delen",
+          "title": "Kalender delen",
          "emailPlaceholder": "Voer e-mailadres in",
          "share": "Delen",
          "hint": "De persoon krijgt dezelfde rechten als u (lezen en schrijven).",
-          "success": "Agenda gedeeld met {{email}}",
-          "error": "Delen van agenda mislukt",
+          "success": "Kalender gedeeld met {{email}}",
+          "error": "Delen van kalender mislukt",
          "invalidEmail": "Voer een geldig e-mailadres in"
        },
        "attendees": {