Merge pull request #711 from Frachtwerk/710-route-search-ctrl-+-k-ite…

…ms-incorrect fix: get child navItems with flatmap
Frachtwerk · Dec 30, 2024 · 0f9e75e · 0f9e75e
2 parents 2cd334c + cc02643
commit 0f9e75e
Show file tree

Hide file tree

Showing 11 changed files with 106 additions and 184 deletions.
diff --git a/packages/app/MIGRATION.md b/packages/app/MIGRATION.md
@@ -1,5 +1,21 @@
 # Migrations
 
+## [7.8.? (dd.01.2025)](https://github.com/Frachtwerk/essencium-frontend/compare/essencium-app-v7.8.0...essencium-app-v7.8.?)
+
+### `src/components/layouts/AuthLayout.tsx`
+
+- set primary color variable for links
+- convert fooker links to NavLink type
+- extract child routes for spotlight
+
+### `src/app/[locale]/layout.tsx`
+
+- remove ColorSchemeScript
+
+### `src/components/provider/mantineProvider.tsx`
+
+- remove custom color scheme logic
+
 ## [7.8.0 (19.12.2024)](https://github.com/Frachtwerk/essencium-frontend/compare/essencium-app-v7.7.0...essencium-app-v7.8.0)
 
 - upgrade next and react with script `npx @next/codemod@canary upgrade latest` from the official [guide](https://nextjs.org/docs/app/building-your-application/upgrading/version-15)

diff --git a/packages/app/src/app/[locale]/layout.tsx b/packages/app/src/app/[locale]/layout.tsx
@@ -20,7 +20,7 @@
 import '@mantine/core/styles.css'
 import '@mantine/spotlight/styles.css'
 
-import { ColorSchemeScript, mantineHtmlProps } from '@mantine/core'
+import { mantineHtmlProps } from '@mantine/core'
 import type { JSX } from 'react'
 
 import TranslationProvider from '@/components/provider/translationProvider'
@@ -50,7 +50,6 @@ export default async function RootLayout(props: Props): Promise<JSX.Element> {
     <html lang={locale} {...mantineHtmlProps}>
       <head>
         <link rel="icon" href="/img/web/favicon.ico" sizes="any" />
-        <ColorSchemeScript defaultColorScheme="auto" />
         <script src="/runtimeConfig.js" />
       </head>
 

diff --git a/packages/app/src/components/layouts/AuthLayout.tsx b/packages/app/src/components/layouts/AuthLayout.tsx
@@ -22,11 +22,12 @@
 import {
   FeedbackWidget,
   Footer,
+  hasRequiredRights,
   Header,
   LoadingSpinner,
   NavBar,
 } from '@frachtwerk/essencium-lib'
-import { FooterLink, NavLink, RIGHTS } from '@frachtwerk/essencium-types'
+import { NavLink, RIGHTS } from '@frachtwerk/essencium-types'
 import { AppShell, AppShellMain, AppShellProps } from '@mantine/core'
 import { useDisclosure, useMediaQuery } from '@mantine/hooks'
 import { Spotlight, SpotlightActionData } from '@mantine/spotlight'
@@ -50,6 +51,7 @@ import { useTranslation } from 'react-i18next'
 
 import { useGetMe, userAtom, userRightsAtom } from '@/api'
 import { useCreateFeedback } from '@/api/feedback'
+import { theme } from '@/config'
 import {
   isBrowserEnvironment,
   logout,
@@ -70,62 +72,56 @@ type Props = AppShellProps & {
   children: React.ReactNode
 }
 
-type SearchItems = {
-  icon?: JSX.Element
-  label: string
-  to: string
-  description?: string
-  rights?: string[]
-}
-
 export const NAV_LINKS: NavLink[] = [
   {
     icon: <IconHome />,
-    color: 'blue',
+    color: theme.primaryColor,
     label: 'navigation.home.label',
     to: '/',
     description: 'navigation.home.description',
     rights: [],
   },
   {
     icon: <IconSettings />,
-    color: 'blue',
+    color: theme.primaryColor,
     label: 'navigation.administration.label',
     to: '/admin',
     rights: [
-      RIGHTS.USER_READ,
-      RIGHTS.ROLE_READ,
-      RIGHTS.RIGHT_READ,
-      RIGHTS.TRANSLATION_READ,
+      [
+        RIGHTS.USER_READ,
+        RIGHTS.ROLE_READ,
+        RIGHTS.RIGHT_READ,
+        RIGHTS.TRANSLATION_READ,
+      ],
     ],
     navLinks: [
       {
         icon: <IconUsers />,
-        color: 'blue',
+        color: theme.primaryColor,
         label: 'navigation.users.label',
         to: '/users',
         description: 'navigation.users.description',
         rights: [RIGHTS.USER_READ],
       },
       {
         icon: <IconUserStar />,
-        color: 'blue',
+        color: theme.primaryColor,
         label: 'navigation.roles.label',
         to: '/roles',
         description: 'navigation.roles.description',
         rights: [RIGHTS.ROLE_READ, RIGHTS.RIGHT_READ],
       },
       {
         icon: <IconShieldHalf />,
-        color: 'blue',
+        color: theme.primaryColor,
         label: 'navigation.rights.label',
         to: '/rights',
         description: 'navigation.rights.description',
         rights: [RIGHTS.ROLE_READ, RIGHTS.RIGHT_READ],
       },
       {
         icon: <IconLanguage />,
-        color: 'blue',
+        color: theme.primaryColor,
         label: 'navigation.translations.label',
         to: '/translations',
         description: 'navigation.translations.description',
@@ -135,31 +131,38 @@ export const NAV_LINKS: NavLink[] = [
   },
 ]
 
-export const FOOTER_LINKS: FooterLink[] = [
+export const FOOTER_LINKS: NavLink[] = [
   {
-    label: 'footer.privacy.label',
     icon: <IconShieldLock size={20} />,
+    color: theme.primaryColor,
+    label: 'footer.privacy.label',
     to: '/',
     description: 'footer.privacy.description',
+    rights: [],
   },
   {
-    label: 'footer.imprint.label',
     icon: <IconSectionSign size={20} />,
+    color: theme.primaryColor,
+    label: 'footer.imprint.label',
     to: '/',
     description: 'footer.imprint.description',
+    rights: [],
   },
   {
-    label: 'footer.contact.label',
     icon: <IconMessage size={20} />,
+    color: theme.primaryColor,
+    label: 'footer.contact.label',
     to: '/contact',
     description: 'footer.contact.description',
+    rights: [],
   },
 ]
 
-export const SEARCH_ITEMS: SearchItems[] = [
+export const SEARCH_ITEMS: NavLink[] = [
   {
     icon: <IconSearch />,
     label: 'profileView.title',
+    color: theme.primaryColor,
     to: '/profile',
     description: 'profileView.description',
     rights: [],
@@ -202,11 +205,24 @@ export function AuthLayout({ children, ...props }: Props): JSX.Element | null {
   } = useCreateFeedback()
 
   const actions: SpotlightActionData[] = SEARCH_ITEMS.filter(link =>
-    !link.rights?.length ||
-    link.rights?.some(right => userRights?.includes(right))
+    !link.rights?.length || hasRequiredRights(userRights ?? [], link.rights)
       ? link
       : null,
-  ).map(link => {
+  ).flatMap(link => {
+    if (link.navLinks?.length) {
+      return link.navLinks
+        .filter(navLink => hasRequiredRights(userRights ?? [], navLink.rights))
+        .map(navLink => ({
+          id: navLink.label,
+          label: t(navLink.label) as string,
+          description: navLink.description
+            ? (t(navLink.description) as string)
+            : '',
+          onClick: () => router.push(`${link.to}/${navLink.to}`),
+          leftSection: navLink.icon,
+        }))
+    }
+
     return {
       id: link.label,
       label: t(link.label) as string,

diff --git a/packages/app/src/components/provider/mantineProvider.tsx b/packages/app/src/components/provider/mantineProvider.tsx
@@ -19,51 +19,19 @@
 
 'use client'
 
-import { MantineColorScheme, MantineProvider } from '@mantine/core'
-import { useHotkeys, useLocalStorage } from '@mantine/hooks'
+import { MantineProvider } from '@mantine/core'
 import { type JSX } from 'react'
 
-import { MantineColorSchemes, theme } from '@/config/mantine'
-import { isBrowserEnvironment } from '@/utils'
+import { theme } from '@/config/mantine'
 
 export function MantineThemeProvider({
   children,
 }: {
   children: JSX.Element
 }): JSX.Element {
-  let systemColorScheme: MantineColorScheme = MantineColorSchemes.LIGHT
-
-  const [colorScheme, setColorScheme] = useLocalStorage<MantineColorScheme>({
-    key: 'mantine-color-scheme',
-    defaultValue: systemColorScheme,
-    getInitialValueInEffect: true,
-  })
-
-  if (isBrowserEnvironment()) {
-    systemColorScheme = window.matchMedia('(prefers-color-scheme: light)')
-      .matches
-      ? MantineColorSchemes.LIGHT
-      : MantineColorSchemes.DARK
-
-    window
-      .matchMedia('(prefers-color-scheme: light)')
-      .addEventListener('change', event => {
-        setColorScheme(
-          event.matches ? MantineColorSchemes.LIGHT : MantineColorSchemes.DARK,
-        )
-      })
-  }
-
-  function toggleColorScheme(value?: MantineColorScheme): void {
-    setColorScheme(
-      value ||
-        (colorScheme === MantineColorSchemes.DARK
-          ? MantineColorSchemes.LIGHT
-          : MantineColorSchemes.DARK),
-    )
-  }
-
-  useHotkeys([['mod+J', () => toggleColorScheme()]])
-
-  return <MantineProvider theme={theme}>{children}</MantineProvider>
+  return (
+    <MantineProvider defaultColorScheme="auto" theme={theme}>
+      {children}
+    </MantineProvider>
+  )
 }
diff --git a/packages/lib/src/components/Footer/Footer.test.tsx b/packages/lib/src/components/Footer/Footer.test.tsx
@@ -17,7 +17,7 @@
  * along with Essencium Frontend. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { FooterLink } from '@frachtwerk/essencium-types'
+import { NavLink } from '@frachtwerk/essencium-types'
 import { AppShell, MantineProvider } from '@mantine/core'
 import { render, RenderResult, screen } from '@testing-library/react'
 import { CSSProperties } from 'react'
@@ -39,18 +39,24 @@ vi.mock('@mantine/core', async () => {
   }
 })
 
-const FOOTER_LINKS: FooterLink[] = [
+const FOOTER_LINKS: NavLink[] = [
   {
     label: 'footer.privacy.label',
     to: 'privacy',
+    color: 'blue',
+    rights: [],
   },
   {
     label: 'footer.imprint.label',
     to: 'imprint',
+    color: 'blue',
+    rights: [],
   },
   {
     label: 'footer.contact.label',
     to: 'contact',
+    color: 'blue',
+    rights: [],
   },
 ]
 

diff --git a/packages/lib/src/components/Footer/Footer.tsx b/packages/lib/src/components/Footer/Footer.tsx
@@ -17,7 +17,7 @@
  * along with Essencium Frontend. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { FooterLink } from '@frachtwerk/essencium-types'
+import { NavLink } from '@frachtwerk/essencium-types'
 import {
   AppShellFooter,
   AppShellFooterProps,
@@ -33,7 +33,7 @@ import type { JSX } from 'react'
 import classes from './Footer.module.css'
 
 type Props = AppShellFooterProps & {
-  links: FooterLink[]
+  links: NavLink[]
   version?: string
 }
 

diff --git a/packages/lib/src/components/Header/components/ThemeSelector/ThemeSelector.module.css b/packages/lib/src/components/Header/components/ThemeSelector/ThemeSelector.module.css
@@ -43,46 +43,15 @@
   }
 }
 
-.theme-selector__button {
-  padding: 0;
-  background-color: transparent;
 
-  @mixin dark {
-    color: var(--mantine-color-gray-0);
-  }
 
+.theme-selector__auto-mode {
   @mixin light {
     color: var(--mantine-color-gray-9);
   }
-}
 
-.theme-selector__iconLight {
   @mixin dark {
-    display: none;
-  }
-
-  @mixin light {
-    display: block;
-  }
-}
-
-.theme-selector__iconDark {
-  @mixin light {
-    display: none;
-  }
-
-  @mixin dark {
-    display: block;
-  }
-}
-
-.theme-selector__icon--active {
-  @mixin light {
-    color: var(--mantine-primary-color-6);
-  }
-
-  @mixin dark {
-    color: var(--mantine-primary-color-2);
+    color: var(--mantine-color-gray-0);
   }
 }