refactor(dashboard): immutable state updates, drag-drop hook, and granular contexts

Split the monolithic ApplicationsContext tuple into three purpose-built
contexts (AppListContext, DashboardContext, CurrentAppContext) so
components subscribe only to the state they read, and rework the
dashboard layout around them:

- extract drag-and-drop monitoring into a useDashboardDragDrop hook and
  the context menu into a DrawerContextMenu component; DashboardDrawer
  now updates dashboard state immutably (no in-place mutation of groups)
- rewrite hooks/application.tsx around the granular contexts
  (useAppList, useDashboard, useApplicationId, useCurrentApplication)
  and drop useApplicationTitle/useApplicationType
- memoize NavigationProvider and OIDCConfigurationProvider values
- ProfileButton loses the dead About entry; ThemeToggleButton,
  Import/ExportButton, ApplicationDialog and ApplicationSelector are
  adapted to the new contexts
- contexts/index.ts now exports the granular contexts explicitly
  (ApplicationsContext is gone); Dashboard stories/tests updated

Author: aldbr

packages/diracx-web-components/src/components/DashboardLayout/ApplicationDialog.tsx

@@ -11,8 +11,8 @@ import {
   Icon,
   IconButton,
 } from "@mui/material";
-import { Close } from "@mui/icons-material";
-import { ApplicationsContext } from "../../contexts/ApplicationsProvider";
+import Close from "@mui/icons-material/Close";
+import { AppListContext } from "../../contexts/ApplicationsProvider";
 
 interface AppDialogProps {
   /** Determines whether the dialog is open or not. */
@@ -34,7 +34,7 @@ export default function AppDialog({
   setAppDialogOpen,
   handleCreateApp,
 }: AppDialogProps) {
-  const applicationList = use(ApplicationsContext)[2];
+  const { appList: applicationList } = use(AppListContext);
   return (
     <Dialog
       open={appDialogOpen}

packages/diracx-web-components/src/components/DashboardLayout/Dashboard.tsx

@@ -4,14 +4,11 @@ import { useState } from "react";
 import AppBar from "@mui/material/AppBar";
 import Box from "@mui/material/Box";
 import IconButton from "@mui/material/IconButton";
-import { Menu } from "@mui/icons-material";
+import Menu from "@mui/icons-material/Menu";
 import Toolbar from "@mui/material/Toolbar";
 import Stack from "@mui/material/Stack";
 import { Typography, useMediaQuery, useTheme } from "@mui/material";
-import {
-  useApplicationTitle,
-  useApplicationType,
-} from "../../hooks/application";
+import { useCurrentApplication } from "../../hooks/application";
 import { ProfileButton } from "./ProfileButton";
 import { ThemeToggleButton } from "./ThemeToggleButton";
 import DashboardDrawer from "./DashboardDrawer";
@@ -42,8 +39,9 @@ export default function Dashboard({
   logoURL,
   documentationURL,
 }: DashboardProps) {
-  const appTitle = useApplicationTitle();
-  const appType = useApplicationType();
+  const currentApp = useCurrentApplication();
+  const appTitle = currentApp?.title ?? null;
+  const appType = currentApp?.type ?? null;
 
   /** Theme and media query */
   const theme = useTheme();
@@ -92,7 +90,6 @@ export default function Dashboard({
             }}
           >
             <Typography
-              color="text.primary"
               variant={isMobile ? "h6" : "h4"}
               fontWeight={"bold"}
               width={"fit-content"}
@@ -101,6 +98,9 @@ export default function Dashboard({
                 whiteSpace: "nowrap",
                 textOverflow: "ellipsis",
                 paddingLeft: 2,
+                background: `linear-gradient(90deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
+                WebkitBackgroundClip: "text",
+                WebkitTextFillColor: "transparent",
               }}
             >
               {appTitle}
@@ -154,7 +154,8 @@ export default function Dashboard({
           flexGrow: 1,
           display: "flex",
           flexDirection: "column",
-          width: { sm: `${drawerWidth}px` },
+          width: { sm: `calc(100% - ${drawerWidth}px)` },
+          minWidth: 0,
         }}
       >
         <Toolbar />