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

* 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

* refactor(dashboard): resolve drag-drop groups inside the state updater

useDashboardDragDrop no longer takes userDashboard or mirrors it in a
ref. reorderSections receives the source/destination group titles from
the drop event and looks the groups up inside the setUserDashboard
functional updater, where React hands it the freshest state. This drops
the ref, its sync effect, and the userDashboard parameter, and removes
the (practically unreachable) window where a drop could read a stale
dashboard between a state commit and the ref update. The destination
index is copied into a local so the updater stays pure under StrictMode.

Draft addressing review comment C6.1 — kept as its own commit for review.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

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();
@@ -154,7 +152,8 @@ export default function Dashboard({
           flexGrow: 1,
           display: "flex",
           flexDirection: "column",
-          width: { sm: `${drawerWidth}px` },
+          width: { sm: `calc(100% - ${drawerWidth}px)` },
+          minWidth: 0,
         }}
       >
         <Toolbar />