From 8c3fa4bc1b325026973b0fedc4031e1f208c3e57 Mon Sep 17 00:00:00 2001 From: Camille Moussu <66134347+Eriikah@users.noreply.github.com> Date: Wed, 25 Feb 2026 11:01:09 +0100 Subject: [PATCH] added integration for calendar to have twake top bar (#576) --- package-lock.json | 16 ++++ package.json | 1 + public/{manifest.json => manifest.appdata} | 0 src/components/Calendar/Calendar.tsx | 4 + src/components/Calendar/CalendarLayout.tsx | 8 +- src/components/Menubar/Menubar.tsx | 98 +++++++++++++--------- 6 files changed, 84 insertions(+), 43 deletions(-) rename public/{manifest.json => manifest.appdata} (100%) diff --git a/package-lock.json b/package-lock.json index 759fc48..07de967 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,7 @@ "@mui/material": "^7.1.2", "@mui/x-date-pickers": "^8.14.0", "@reduxjs/toolkit": "^2.8.2", + "cozy-external-bridge": "^1.2.1", "dayjs": "^1.11.19", "i18next": "^23.7.9", "ical.js": "^2.2.0", @@ -6387,6 +6388,12 @@ "dev": true, "license": "MIT" }, + "node_modules/comlink": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/comlink/-/comlink-4.4.1.tgz", + "integrity": "sha512-+1dlx0aY5Jo1vHy/tSsIGpSkN4tS9rZSW8FIhG0JH/crs9wwweswIo/POr451r7bZww3hFbPAKnTpimzL/mm4Q==", + "license": "Apache-2.0" + }, "node_modules/commander": { "version": "9.5.0", "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz", @@ -6547,6 +6554,15 @@ "js-yaml": "bin/js-yaml.js" } }, + "node_modules/cozy-external-bridge": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/cozy-external-bridge/-/cozy-external-bridge-1.2.1.tgz", + "integrity": "sha512-Vbf3ugIuYWGHHD4fiWdUIvljadpHiV/GF1YaETMmlmOlxagiwbK3NESlAiXoGgg5aHdLjXliGJy+j9ccMdVm/g==", + "license": "MIT", + "dependencies": { + "comlink": "4.4.1" + } + }, "node_modules/create-require": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz", diff --git a/package.json b/package.json index e24f133..805db56 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@mui/material": "^7.1.2", "@mui/x-date-pickers": "^8.14.0", "@reduxjs/toolkit": "^2.8.2", + "cozy-external-bridge": "^1.2.1", "dayjs": "^1.11.19", "i18next": "^23.7.9", "ical.js": "^2.2.0", diff --git a/public/manifest.json b/public/manifest.appdata similarity index 100% rename from public/manifest.json rename to public/manifest.appdata diff --git a/src/components/Calendar/Calendar.tsx b/src/components/Calendar/Calendar.tsx index 5094387..c403aa6 100644 --- a/src/components/Calendar/Calendar.tsx +++ b/src/components/Calendar/Calendar.tsx @@ -33,6 +33,7 @@ import { User } from "../Attendees/PeopleSearch"; import { EventErrorSnackbar } from "../Error/ErrorSnackbar"; import { EventErrorHandler } from "../Error/EventErrorHandler"; import { EditModeDialog } from "../Event/EditModeDialog"; +import { Menubar, MenubarProps } from "../Menubar/Menubar"; import "./Calendar.styl"; import CalendarSelection from "./CalendarSelection"; import "./CustomCalendar.styl"; @@ -59,12 +60,14 @@ interface CalendarAppProps { calendarRef: MutableRefObject; onDateChange?: (date: Date) => void; onViewChange?: (view: string) => void; + menubarProps?: MenubarProps; } export default function CalendarApp({ calendarRef, onDateChange, onViewChange, + menubarProps, }: CalendarAppProps) { const [selectedDate, setSelectedDate] = useState(new Date()); const [selectedMiniDate, setSelectedMiniDate] = useState(new Date()); @@ -661,6 +664,7 @@ export default function CalendarApp({
+ {menubarProps?.isIframe && } {view === "calendar" && ( { diff --git a/src/components/Calendar/CalendarLayout.tsx b/src/components/Calendar/CalendarLayout.tsx index 3dc7e8e..0f2ffe1 100644 --- a/src/components/Calendar/CalendarLayout.tsx +++ b/src/components/Calendar/CalendarLayout.tsx @@ -2,7 +2,8 @@ import { useAppDispatch, useAppSelector } from "@/app/hooks"; import SettingsPage from "@/features/Settings/SettingsPage"; import { getCalendarRange } from "@/utils/dateUtils"; import type { CalendarApi } from "@fullcalendar/core"; -import { useEffect, useRef, useState } from "react"; +import CozyBridge from "cozy-external-bridge"; +import { useEffect, useMemo, useRef, useState } from "react"; import { ErrorSnackbar } from "../Error/ErrorSnackbar"; import { refreshCalendars } from "../Event/utils/eventUtils"; import { Menubar, MenubarProps } from "../Menubar/Menubar"; @@ -17,6 +18,7 @@ export default function CalendarLayout() { const view = useAppSelector((state) => state.settings.view); const [currentDate, setCurrentDate] = useState(new Date()); const [currentView, setCurrentView] = useState("timeGridWeek"); + const isInIframe = useMemo(() => new CozyBridge().isInIframe(), []); const handleRefresh = async () => { // Get current calendar range @@ -70,16 +72,18 @@ export default function CalendarLayout() { onDateChange: handleDateChange, currentView, onViewChange: handleViewChange, + isIframe: isInIframe, }; return (
- + {!isInIframe && } {(view === "calendar" || view === "search") && ( )} {view === "settings" && } diff --git a/src/components/Menubar/Menubar.tsx b/src/components/Menubar/Menubar.tsx index e9935c2..e6b2491 100644 --- a/src/components/Menubar/Menubar.tsx +++ b/src/components/Menubar/Menubar.tsx @@ -46,6 +46,7 @@ export type MenubarProps = { onDateChange?: (date: Date) => void; currentView: string; onViewChange?: (view: string) => void; + isIframe?: boolean; }; export function Menubar({ @@ -55,6 +56,7 @@ export function Menubar({ onDateChange, currentView, onViewChange, + isIframe, }: MenubarProps) { const { t } = useI18n(); // deliberately NOT using f() const user = useAppSelector((state) => state.user.userData); @@ -155,14 +157,16 @@ export function Menubar({ <>
-
- -
+ {!isIframe && ( +
+ +
+ )}
-
- - - -
-
- {applist.length > 0 && ( - - - - )} -
+ {!isIframe && ( + <> +
+ + + +
+ +
+ {applist.length > 0 && ( + + + + )} +
+ + )}
- - - {getInitials(getUserDisplayName(user))} - + + {!isIframe ? ( + + {getInitials(getUserDisplayName(user))} + + ) : ( + + )}