[Apps] New accordion groups, autocomplete search to filter by existing set of all users with App permissions

src/App.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {Link as RouterLink, Route, Routes} from 'react-router-dom';
 
-import {styled} from '@mui/material/styles';
+import {createTheme, styled, ThemeProvider} from '@mui/material/styles';
 import Link from '@mui/material/Link';
 import MuiDrawer from '@mui/material/Drawer';
 import Box from '@mui/material/Box';
@@ -37,6 +37,19 @@ import ReadTag from './pages/tags/Read';
 import ReadUser from './pages/users/Read';
 import {useCurrentUser} from './authentication';
 import ReadRequest from './pages/requests/Read';
+import {
+  alpha,
+  CssBaseline,
+  PaletteMode,
+  Stack,
+  ToggleButton,
+  ToggleButtonGroup,
+  Tooltip,
+  useMediaQuery,
+  useTheme,
+} from '@mui/material';
+import {DarkMode, LightMode, Monitor} from '@mui/icons-material';
+import {lightGreen, red, yellow} from '@mui/material/colors';
 
 const drawerWidth: number = 240;
 
@@ -88,14 +101,72 @@ const Drawer = styled(MuiDrawer, {
   },
 }));
 
-function Dashboard() {
+function ThemeToggle({setThemeMode, condensed}: {setThemeMode: (theme: PaletteMode) => void; condensed: boolean}) {
+  const [storedTheme, setStoredTheme] = React.useState(
+    localStorage.getItem('user-set-color-scheme') as 'light' | 'dark' | null,
+  );
+  const currentTheme = useTheme();
+  const systemTheme = useMediaQuery('(prefers-color-scheme: dark)') ? 'dark' : 'light';
+
+  const handleThemeOverride = (theme: PaletteMode) => {
+    setThemeMode(theme);
+    localStorage.setItem('user-set-color-scheme', theme);
+    setStoredTheme(theme);
+  };
+
+  const handleSystemDefault = () => {
+    setThemeMode(systemTheme);
+    localStorage.removeItem('user-set-color-scheme');
+    setStoredTheme(null);
+  };
+
+  return (
+    <ToggleButtonGroup size="small">
+      {(currentTheme.palette.mode != 'light' || !condensed) && (
+        <Tooltip title="Light Mode">
+          <ToggleButton
+            value="left"
+            selected={storedTheme === 'light'}
+            onClick={() => handleThemeOverride('light')}
+            aria-label="Light mode">
+            <LightMode />
+          </ToggleButton>
+        </Tooltip>
+      )}
+      {!condensed && (
+        <Tooltip title="System Default">
+          <ToggleButton
+            value="center"
+            selected={storedTheme == null}
+            onClick={handleSystemDefault}
+            aria-label="System Default">
+            <Monitor />
+          </ToggleButton>
+        </Tooltip>
+      )}
+      {(currentTheme.palette.mode != 'dark' || !condensed) && (
+        <Tooltip title="Dark Mode">
+          <ToggleButton
+            value="right"
+            selected={storedTheme === 'dark'}
+            onClick={() => handleThemeOverride('dark')}
+            aria-label="Dark mode">
+            <DarkMode />
+          </ToggleButton>
+        </Tooltip>
+      )}
+    </ToggleButtonGroup>
+  );
+}
+
+function Dashboard({setThemeMode}: {setThemeMode: (theme: PaletteMode) => void}) {
   const [open, setOpen] = React.useState(true);
   const toggleDrawer = () => {
     setOpen(!open);
   };
 
   return (
-    <Box sx={{display: 'flex'}}>
+    <Box sx={{display: 'flex', minWidth: '20rem', overflowX: 'hidden'}}>
       <AppBar position="absolute" open={open}>
         <Toolbar
           sx={{
@@ -137,7 +208,7 @@ function Dashboard() {
               textDecoration: 'none',
             }}>
             <Avatar src="/logo-square.png" variant="square" />
-            <Typography component="h1" variant="h5" sx={{px: 2}}>
+            <Typography component="h1" variant="h5" sx={{px: 2}} color="text.accent">
               ACCESS
             </Typography>
           </Link>
@@ -149,12 +220,15 @@ function Dashboard() {
         <List component="nav">
           <NavItems open={open} />
         </List>
+        <Stack marginTop="auto" p={2}>
+          <ThemeToggle setThemeMode={setThemeMode} condensed={!open} />
+        </Stack>
       </Drawer>
       <Box
         component="main"
         sx={{
           backgroundColor: (theme) =>
-            theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900],
+            theme.palette.mode === 'light' ? theme.palette.grey[200] : theme.palette.grey[800],
           flexGrow: 1,
           height: '100vh',
           overflow: 'auto',
@@ -189,6 +263,81 @@ function Dashboard() {
 }
 
 export default function App() {
+  const storedTheme = localStorage.getItem('user-set-color-scheme') as 'light' | 'dark' | null;
+  const systemTheme = useMediaQuery('(prefers-color-scheme: dark)') ? 'dark' : 'light';
+  const initialMode = storedTheme ?? systemTheme;
+  const [mode, setMode] = React.useState<PaletteMode>(initialMode);
+
+  // See https://discord.com/branding
+  let theme = React.useMemo(() => {
+    const base = createTheme({
+      palette: {
+        mode,
+        primary: {
+          main: '#5865F2',
+          light: '#A5B2FF',
+        },
+        secondary: {
+          main: '#EB459E',
+        },
+        error: {
+          main: '#ED4245',
+        },
+        warning: {
+          main: '#FEE75C',
+        },
+        success: {
+          main: '#57F287',
+        },
+        text: {
+          accent: mode === 'light' ? '#5865F2' : '#A5B2FF',
+        },
+      },
+      components: {
+        MuiChip: {
+          styleOverrides: {
+            colorPrimary: ({ownerState, theme}) => ({
+              ...(ownerState.variant === 'outlined' &&
+                ownerState.color === 'primary' && {
+                  color: theme.palette.text.accent,
+                  borderColor: theme.palette.text.accent,
+                }),
+            }),
+            deleteIcon: ({ownerState, theme}) => ({
+              ...(ownerState.variant === 'outlined' &&
+                ownerState.color === 'primary' && {
+                  color: theme.palette.text.accent,
+                }),
+            }),
+          },
+        },
+      },
+    });
+    return createTheme(base, {
+      palette: {
+        highlight: {
+          success: base.palette.augmentColor({
+            color: {main: mode === 'light' ? lightGreen[100] : alpha(lightGreen[500], 0.3)},
+            name: 'success',
+          }),
+          warning: base.palette.augmentColor({
+            color: {main: mode === 'light' ? yellow[100] : alpha(yellow[500], 0.3)},
+            name: 'warning',
+          }),
+          danger: base.palette.augmentColor({
+            color: {main: mode === 'light' ? red[100] : alpha(red[500], 0.3)},
+            name: 'danger',
+          }),
+        },
+      },
+    });
+  }, [mode]);
+
   useCurrentUser();
-  return <Dashboard />;
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <Dashboard setThemeMode={setMode} />
+    </ThemeProvider>
+  );
 }

src/components/AvatarButton.tsx

@@ -0,0 +1,33 @@
+import {Avatar, ButtonBase, Typography} from '@mui/material';
+import {ReactNode} from 'react';
+
+interface AvatarButtonProps {
+  icon: ReactNode;
+  text?: string;
+  strikethrough?: boolean;
+  onClick?: () => void;
+}
+
+export default function AvatarButton({icon, text, strikethrough, onClick}: AvatarButtonProps) {
+  return (
+    <ButtonBase
+      disabled={onClick == null}
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 0.5,
+        p: 0.5,
+        borderRadius: 2,
+        width: 100,
+        wordBreak: 'break-word',
+      }}
+      onClick={onClick}>
+      <Avatar sx={{bgcolor: 'primary.main'}}>{icon}</Avatar>
+      {text && (
+        <Typography variant="body2" sx={{...(strikethrough && {textDecoration: 'line-through'})}}>
+          {text}
+        </Typography>
+      )}
+    </ButtonBase>
+  );
+}

src/components/Breadcrumbs.tsx

@@ -1,7 +1,7 @@
 import Breadcrumbs from '@mui/material/Breadcrumbs';
 import Typography from '@mui/material/Typography';
 
-import Link, {LinkProps} from '@mui/material/Link';
+import Link from '@mui/material/Link';
 import {Link as RouterLink, useLocation} from 'react-router-dom';
 
 export default function Crumbs() {

src/components/BulkRenewalDataGrid.tsx

@@ -0,0 +1,44 @@
+import {darken, lighten, PaletteColor, styled} from '@mui/material';
+import {DataGrid} from '@mui/x-data-grid';
+
+const getHoverBackgroundColor = (color: PaletteColor, mode: string) => (mode === 'dark' ? color.dark : color.light);
+
+const getSelectedBackgroundColor = (color: PaletteColor, mode: string) =>
+  mode === 'dark' ? darken(color.dark, 0.5) : lighten(color.light, 0.5);
+
+const getSelectedHoverBackgroundColor = (color: PaletteColor, mode: string) =>
+  mode === 'dark' ? darken(color.dark, 0.4) : lighten(color.light, 0.4);
+
+const BulkRenewalDataGrid = styled(DataGrid)(
+  ({
+    theme: {
+      palette: {highlight, mode},
+    },
+  }) => ({
+    '& .super-app-theme--Expired': {
+      backgroundColor: highlight.danger.main,
+      '&:hover': {
+        backgroundColor: getHoverBackgroundColor(highlight.danger, mode),
+      },
+      '&.Mui-selected': {
+        backgroundColor: getSelectedBackgroundColor(highlight.danger, mode),
+        '&:hover': {
+          backgroundColor: getSelectedHoverBackgroundColor(highlight.danger, mode),
+        },
+      },
+    },
+    '& .super-app-theme--Soon': {
+      backgroundColor: highlight.warning.main,
+      '&:hover': {
+        backgroundColor: getHoverBackgroundColor(highlight.warning, mode),
+      },
+      '&.Mui-selected': {
+        backgroundColor: getSelectedBackgroundColor(highlight.warning, mode),
+        '&:hover': {
+          backgroundColor: getSelectedHoverBackgroundColor(highlight.warning, mode),
+        },
+      },
+    },
+  }),
+);
+export default BulkRenewalDataGrid;