feat(ui): sidenav layout

CorentinTh · Oct 27, 2024 · 8929b5a · 8929b5a
1 parent b88f13a
commit 8929b5a
Show file tree

Hide file tree

Showing 85 changed files with 649 additions and 567 deletions.
diff --git a/packages/app/src/locales/en.yaml b/packages/app/src/locales/en.yaml
@@ -34,8 +34,8 @@ tools:
     use-lowercase: Include lowercase letters
     use-numbers: Include numbers
     use-symbols: Include symbols
+    exclude-similar: Exclude similar characters
     length: Length
-    refresh: Refresh
+    refresh: Refresh token
     quantity: Quantity
     format: Format
-
diff --git a/packages/app/src/modules/app/components/app-header.vue b/packages/app/src/modules/app/components/app-header.vue
@@ -1,23 +1,34 @@
 <script setup>
 import { Button } from '@/src/modules/ui/components/button';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/src/modules/ui/components/dropdown-menu';
+import { useCommandPaletteStore } from '../../command-palette/command-palette.store';
+
+const { openCommandPalette } = useCommandPaletteStore();
 
 const colorMode = useColorMode();
 </script>
 
 <template>
-  <div class="w-full border-b bg-card">
-    <div class="max-w-screen-xl mx-auto flex items-center justify-between py-2 px-6">
-      <NuxtLink variant="link" class="text-xl font-semibold border-b border-transparent hover:no-underline h-auto px-1 rounded-none !transition-border-color-250" :as="Button" :to="localePath('/')" aria-label="Home">
-        <span class="font-bold text-foreground">IT</span>
-        <span class="text-[80%] font-extrabold border-[2px] leading-none border-current rounded-md px-1 py-0.5 ml-1.5 text-primary">TOOLS</span>
-      </NuxtLink>
+  <div class="w-full flex items-center justify-between">
+    <div>
+      <Button variant="outline" class="sm:pr-12 md:pr-24 text-muted-foreground hidden sm:flex" @click="openCommandPalette">
+        <Icon name="i-tabler-search" class="mr-2 size-4" />
+        {{ $t('home.search-tools') }}
+      </Button>
+    </div>
+
+    <div class="flex items-center gap-1">
+      <Button variant="ghost" size="icon" class="sm:hidden" @click="openCommandPalette">
+        <Icon name="i-tabler-search" class="size-5" />
+      </Button>
+
+      <LocalePicker />
 
       <DropdownMenu>
         <DropdownMenuTrigger as-child>
           <Button variant="ghost" size="icon">
-            <Icon name="i-tabler-moon" class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-            <Icon name="i-tabler-sun" class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+            <Icon name="i-tabler-moon" class="size-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+            <Icon name="i-tabler-sun" class="absolute size-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
             <span class="sr-only">Toggle theme</span>
           </Button>
         </DropdownMenuTrigger>

diff --git a/packages/app/src/modules/app/components/locale-picker.vue b/packages/app/src/modules/app/components/locale-picker.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { Button } from '../../ui/components/button';
+import { DropdownMenu } from '../../ui/components/dropdown-menu';
+import DropdownMenuContent from '../../ui/components/dropdown-menu/DropdownMenuContent.vue';
+import DropdownMenuItem from '../../ui/components/dropdown-menu/DropdownMenuItem.vue';
+import DropdownMenuTrigger from '../../ui/components/dropdown-menu/DropdownMenuTrigger.vue';
+
+const { locale, locales, setLocale } = useI18n();
+</script>
+
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <slot>
+        <Button variant="ghost" aria-label="Change language">
+          <Icon name="i-tabler-language" class="size-5 mr-1" />
+          <Icon name="i-tabler-chevron-down" class="text-muted-foreground" />
+        </Button>
+      </slot>
+    </DropdownMenuTrigger>
+
+    <DropdownMenuContent align="end">
+      <DropdownMenuItem
+        v-for="({ name, code }) in locales"
+        :key="code"
+        class="cursor-pointer"
+        :class="{ 'font-bold': locale === code }"
+        @click="setLocale(code)"
+      >
+        {{ name }}
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>
diff --git a/packages/app/src/modules/app/components/sidenav-menu.vue b/packages/app/src/modules/app/components/sidenav-menu.vue
@@ -2,7 +2,7 @@
 import { Button } from '@/src/modules/ui/components/button';
 import { useToolsStore } from '../../tools/tools.store';
 
-const { tools } = useToolsStore();
+const toolStore = useToolsStore();
 const localePath = useLocalePath();
 </script>
 
@@ -20,7 +20,7 @@ const localePath = useLocalePath();
       Home
     </NuxtLink>
 
-    <NuxtLink v-for="tool in tools" :key="tool.key" class="py-1.5 px-3 flex items-center text-muted-foreground hover:text-foreground transition hover:bg-muted rounded-lg" :to="tool.path" exact-active-class="bg-secondary !text-foreground">
+    <NuxtLink v-for="tool in toolStore.tools" :key="tool.key" class="py-1.5 px-3 flex items-center text-muted-foreground hover:text-foreground transition hover:bg-muted rounded-lg" :to="tool.path" exact-active-class="bg-secondary !text-foreground">
       <Icon :name="tool.icon" class="mr-2 size-4" />
       {{ tool.title }}
     </NuxtLink>

diff --git a/packages/app/src/modules/app/layouts/default.vue b/packages/app/src/modules/app/layouts/default.vue
@@ -1,6 +1,22 @@
+<script setup>
+import { Button } from '@/src/modules/ui/components/button';
+import { useToolsStore } from '../../tools/tools.store';
+
+const localePath = useLocalePath();
+</script>
+
 <template>
   <div class="w-full min-h-screen text-sm relative font-sans flex flex-col">
-    <app-header />
+    <div class="h-[60px] border-b">
+      <div class="max-w-screen-xl mx-auto py-2 px-6 w-full flex items-center gap-4 h-full">
+        <NuxtLink variant="link" class="text-xl font-semibold border-b border-transparent hover:no-underline h-auto px-1 rounded-none !transition-border-color-250" :as="Button" :to="localePath('/')" aria-label="Home">
+          <span class="font-bold text-foreground">IT</span>
+          <span class="text-[80%] font-extrabold border-[2px] leading-none border-current rounded-md px-1 py-0.5 ml-1.5 text-primary">TOOLS</span>
+        </NuxtLink>
+
+        <app-header />
+      </div>
+    </div>
 
     <div class="flex-1 pb-6">
       <slot />

diff --git a/packages/app/src/modules/app/layouts/sidenav.vue b/packages/app/src/modules/app/layouts/sidenav.vue
@@ -1,14 +1,6 @@
 <script setup>
-import { Button } from '@/src/modules/ui/components/button';
-import { useCommandPaletteStore } from '../../command-palette/command-palette.store';
-import { DropdownMenu } from '../../ui/components/dropdown-menu';
-import DropdownMenuContent from '../../ui/components/dropdown-menu/DropdownMenuContent.vue';
-import DropdownMenuItem from '../../ui/components/dropdown-menu/DropdownMenuItem.vue';
-import DropdownMenuTrigger from '../../ui/components/dropdown-menu/DropdownMenuTrigger.vue';
-import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from '../../ui/components/sheet';
-
-const { openCommandPalette } = useCommandPaletteStore();
-const colorMode = useColorMode();
+import { Button } from '../../ui/components/button';
+import { Sheet, SheetContent, SheetTrigger } from '../../ui/components/sheet';
 </script>
 
 <template>
@@ -31,38 +23,9 @@ const colorMode = useColorMode();
               </SheetContent>
             </Sheet>
           </div>
-
-          <Button variant="outline" class="sm:pr-12 md:pr-24 text-muted-foreground" @click="openCommandPalette">
-            <Icon name="i-tabler-search" class="mr-2 size-4" />
-            {{ $t('home.search-tools') }}
-          </Button>
         </div>
 
-        <div>
-          <DropdownMenu>
-            <DropdownMenuTrigger as-child>
-              <Button variant="ghost" size="icon">
-                <Icon name="i-tabler-moon" class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-                <Icon name="i-tabler-sun" class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-                <span class="sr-only">Toggle theme</span>
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuItem class="cursor-pointer" :class="{ 'font-bold': colorMode.preference === 'light' }" @click="colorMode.preference = 'light'">
-                <Icon name="i-tabler-sun" class="mr-2 size-4" />
-                Light
-              </DropdownMenuItem>
-              <DropdownMenuItem class="cursor-pointer" :class="{ 'font-bold': colorMode.preference === 'dark' }" @click="colorMode.preference = 'dark'">
-                <Icon name="i-tabler-moon" class="mr-2 size-4" />
-                Dark
-              </DropdownMenuItem>
-              <DropdownMenuItem class="cursor-pointer" :class="{ 'font-bold': colorMode.preference === 'system' }" @click="colorMode.preference = 'system'">
-                <Icon name="i-tabler-device-laptop" class="mr-2 size-4" />
-                System
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
+        <app-header />
       </div>
 
       <div class="flex-1">

diff --git a/packages/app/src/modules/app/pages/about.vue b/packages/app/src/modules/app/pages/about.vue
@@ -0,0 +1,3 @@
+<template>
+  TODO
+</template>
diff --git a/packages/app/src/modules/app/pages/index.vue b/packages/app/src/modules/app/pages/index.vue
@@ -1,10 +1,8 @@
 <script setup>
 import { Badge } from '@/src/modules/ui/components/badge';
-import { Button, buttonVariants } from '@/src/modules/ui/components/button';
+import { Button } from '@/src/modules/ui/components/button';
 import { useCommandPaletteStore } from '../../command-palette/command-palette.store';
-import { cn } from '../../shared/style/cn';
 import { useToolsStore } from '../../tools/tools.store';
-import { CardContent } from '../../ui/components/card';
 import Card from '../../ui/components/card/Card.vue';
 
 const { tools } = useToolsStore();

diff --git a/packages/app/src/modules/command-palette/components/command-palette.vue b/packages/app/src/modules/command-palette/components/command-palette.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { useMagicKeys } from '@vueuse/core';
 import { useToolsStore } from '../../tools/tools.store';
-import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from '../../ui/components/command';
+import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '../../ui/components/command';
 import { useCommandPaletteStore } from '../command-palette.store';
 
 const commandPaletteStore = useCommandPaletteStore();

diff --git a/packages/app/src/modules/shared/composables/useRefreshableState.ts b/packages/app/src/modules/shared/composables/useRefreshableState.ts
@@ -9,4 +9,4 @@ export function useRefreshableState<T>(key: string, getState: () => T | Ref<T>)
   };
 
   return [state, refresh] as const;
-}  
+}
diff --git a/packages/app/src/modules/tools/definitions/token-generator/token-generator.models.ts b/packages/app/src/modules/tools/definitions/token-generator/token-generator.models.ts
@@ -7,6 +7,7 @@ export function createToken({
   withSymbols = false,
   length = 64,
   alphabet,
+  exclude,
   sample = sampleImpl,
 }: {
   withUppercase?: boolean;
@@ -15,6 +16,7 @@ export function createToken({
   withSymbols?: boolean;
   length?: number;
   alphabet?: string;
+  exclude?: string | string[];
   sample?: (str: string) => string;
 }) {
   const allAlphabet = alphabet ?? [
@@ -24,5 +26,8 @@ export function createToken({
     withSymbols ? '.,;:!?./-"\'#{([-|\\@)]=}*+' : '',
   ].join('');
 
-  return times(length, () => sample(allAlphabet)).join('');
+  const charsToExclude = exclude ? (Array.isArray(exclude) ? exclude.join('') : exclude) : '';
+  const filteredAlphabet = allAlphabet.split('').filter(char => !charsToExclude.includes(char)).join('');
+
+  return times(length, () => sample(filteredAlphabet)).join('');
 }