Added auth guard middleware

The issues would happen randomly when login from google, it doesn't seem to happen again with nuxt 3.7.0 ?

.eslintrc.cjs

@@ -1,35 +0,0 @@
-/* eslint-env node */
-require('@rushstack/eslint-patch/modern-module-resolution')
-
-module.exports = {
-  root: true,
-  extends: [
-    'plugin:vue/vue3-essential',
-    'eslint:recommended',
-    '@vue/eslint-config-typescript',
-    '@vue/eslint-config-prettier/skip-formatting'
-  ],
-  overrides: [
-    {
-      files: [
-        '**/__tests__/*.{cy,spec}.{js,ts,jsx,tsx}',
-        'cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}',
-        'cypress/support/**/*.{js,ts,jsx,tsx}'
-      ],
-      extends: ['plugin:cypress/recommended']
-    }
-  ],
-  parserOptions: {
-    ecmaVersion: 'latest'
-  },
-  rules: {
-    indent: ['error', 2, { SwitchCase: 1 }],
-    'prettier/prettier': [
-      'error',
-      {
-        endOfLine: 'auto'
-      }
-    ],
-    'vue/multi-word-component-names': 'off'
-  }
-}

.gitignore

@@ -1,30 +1,28 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
 # Logs
 logs
 *.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
 
-node_modules
+# Misc
 .DS_Store
-dist
+.fleet
-dist-ssr
-coverage
-*.local
-
-/cypress/videos/
-/cypress/screenshots/
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
 .idea
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
 
-*.tsbuildinfo
+# Local env files
+.env
+.env.*
+!.env.example
+
+# Supabase
+.branches
+.temp

.npmrc

@@ -0,0 +1,3 @@
+# https://pnpm.io/npmrc#shamefully-hoist
+# Fixes: WARN Failed to resolve dependency: @supabase/gotrue-js, present in 'optimizeDeps.include'
+shamefully-hoist=true

.vscode/extensions.json

@@ -1,7 +0,0 @@
-{
-  "recommendations": [
-    "Vue.volar",
-    "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode"
-  ]
-}

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "eslint.experimental.useFlatConfig": true,
+  "editor.indentSize": "tabSize",
+  "editor.tabSize": 2,
+}

README.md

@@ -1,5 +1,75 @@
-# Leim Tools
+# Nuxt 3 Minimal Starter
-A congregate of tools used to visualize TTRPG elements and help content creators (mostly me for now tbh) build their worlds.
 
-## Timeline
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
-Visual helper for time-related data, such as events, eras and characters. Helpful to know how old a character is while something is happening in the world, or how far two events are separated in the timeline.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { ConfigProvider } from 'radix-vue'
+
+useHead({
+  titleTemplate: (titleChunk) => {
+    return titleChunk ? `${titleChunk} — TTTools` : 'TTTools';
+  },
+  meta: [
+    { name: "charset", content: "UTF-8" },
+    { name: "viewport", content: "width=device-width, initial-scale=1.0" },
+    { name: "author", content: "Alexis Pelé" },
+    { name: "description", content: "Tools destined to players and game master, helping them visualize their worlds better." },
+    { name: "generator", content: "Nuxt" },
+    { name: "msapplication-TileColor", content: "00aba9" },
+    { name: "theme-color", content: "00aba9" },
+    { name: "og:type", content: "tabletop-tools" },
+    { name: "og:url", content: "ttt.alexcreates.fr" },
+    { name: 'robots', content: 'noindex, nofollow'}
+  ],
+  link: [
+    { rel: 'apple-touch-icon', sizes: "76x76", href: '/apple-touch-icon.png' },
+    { rel: 'icon', sizes: "32x32", type: 'image/png', href: '/favicon-32x32.png' },
+    { rel: 'icon', sizes: "16x16", type: 'image/png', href: '/favicon-16x16.png' },
+    { rel: 'manifest', href: '/site.webmanifest' },
+    { rel: 'mask-icon', href: '/safari-pinned-tab.svg', color: '#6595b4' },
+  ]
+})
+
+const useIdFunction = () => useId()
+</script>
+
+<template>
+  <div class="h-screen">
+    <NuxtLoadingIndicator />
+
+    <NuxtLayout>
+      <ConfigProvider :use-id="useIdFunction">
+        <NuxtPage/>
+      </ConfigProvider>
+    </NuxtLayout>
+  </div>
+</template>

assets/main.css

@@ -2,8 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-@layer base {
+:root {
-  :root {
     --background: 0 0% 100%;
     --foreground: 222.2 84% 4.9%;
  
@@ -36,7 +35,7 @@
     --radius: 0.5rem;
   }
  
-  .dark {
+  :root.dark {
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
  
@@ -65,7 +64,6 @@
     --destructive-foreground: 210 40% 98%;
  
     --ring: 212.7 26.8% 83.9%;
-  }
 }
 
 @layer base {

components.json

@@ -4,11 +4,11 @@
   "typescript": true,
   "tailwind": {
     "config": "tailwind.config.js",
-    "css": "src/assets/main.css",
+    "css": "assets/main.css",
     "baseColor": "slate",
     "cssVariables": true
   },
-  "framework": "vite",
+  "framework": "nuxt",
   "aliases": {
     "components": "@/components",
     "utils": "@/lib/utils"

components/calendar/Calendar.vue

@@ -10,6 +10,10 @@ import DecadeLayout from './state/decennially/Layout.vue'
 import YearLayout from './state/yearly/Layout.vue'
 
 const { currentConfig } = useCalendar()
+const { selectedDate, jumpToDate } = useCalendar()
+
+const { fetchEvents } = useCalendarEvents()
+fetchEvents()
 
 const currentViewComponent: ComputedRef<Component> = computed<Component>(() => {
   switch (currentConfig.viewType) {
@@ -27,11 +31,16 @@ const currentViewComponent: ComputedRef<Component> = computed<Component>(() => {
       return CenturyLayout
   }
 })
+
+onMounted(() => {
+  jumpToDate(selectedDate)
+})
 </script>
 
 <template>
   <div class="h-full grid grid-rows-[auto,1fr]">
     <CalendarMenu />
+
     <KeepAlive>
       <component :is="currentViewComponent" />
     </KeepAlive>

components/calendar/CalendarCurrentDate.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { getRelativeString } from '@/models/Date'
-import { useCalendar } from '@/stores/CalendarStore'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
 
@@ -15,10 +14,19 @@ const dateDifference = computed(() => getRelativeString(defaultDate, selectedDat
 </script>
 
 <template>
-  <h1 class="text-2xl font-bold flex items-center gap-1">
+  <ClientOnly>
-    <PhMapPin size="26" weight="bold" /> {{ mainDateTitle }}
+    <h1 class="text-2xl font-bold flex items-center gap-1">
-  </h1>
+      <PhMapPin size="26" weight="bold" /> {{ mainDateTitle }}
-  <h2 class="text-lg italic opacity-75">
+    </h1>
-    {{ dateDifference }}
+    <h2 class="text-lg italic opacity-75">
-  </h2>
+      {{ dateDifference }}
+    </h2>
+
+    <template #fallback>
+      <div class="grid gap-1">
+        <UiSkeleton class="h-8 w-64" />
+        <UiSkeleton class="h-6 w-28" />
+      </div>
+    </template>
+  </ClientOnly>
 </template>

components/calendar/CalendarEvent.vue

@@ -3,7 +3,6 @@ import { ref } from 'vue'
 import { cn } from '@/lib/utils'
 import { areDatesIdentical, type LeimDate } from '@/models/Date'
 
-import { Popover, PopoverTrigger } from '@/components/ui/popover'
 import type { CalendarEvent } from '@/models/Events'
 import CalendarEventDetails from './CalendarEventDetails.vue'
 
@@ -26,8 +25,8 @@ function handleClosePopover() {
 </script>
 
 <template>
-  <Popover v-model:open="isPopoverOpen">
+  <UiPopover v-model:open="isPopoverOpen">
-    <PopoverTrigger as-child>
+    <UiPopoverTrigger as-child>
       <button
         class="text-xs px-2 py-1 block w-full text-left rounded-sm whitespace-nowrap overflow-hidden text-ellipsis"
         :class="
@@ -58,15 +57,15 @@ function handleClosePopover() {
       >
         {{ event.title }}
       </button>
-    </PopoverTrigger>
+    </UiPopoverTrigger>
 
     <CalendarEventDetails
+      v-once
       :event
       :spans-multiple-days
       :is-start-event
       :is-end-event
       @query:close-popover="handleClosePopover"
-      v-once
     />
-  </Popover>
+  </UiPopover>
 </template>

components/calendar/CalendarEventDetails.vue

@@ -12,8 +12,6 @@ import {
   PhArrowBendDoubleUpLeft,
   PhArrowBendDoubleUpRight
 } from '@phosphor-icons/vue'
-import { Badge } from '@/components/ui/badge'
-import { PopoverContent } from '@/components/ui/popover'
 
 const { defaultDate, getFormattedDateTitle, jumpToDate } = useCalendar()
 const { getRelativeEventFromEvent } = useCalendarEvents()
@@ -51,8 +49,8 @@ function handleGotoRelativeEvent(position: 'next' | 'prev' = 'next') {
 </script>
 
 <template>
-  <PopoverContent
+  <UiPopoverContent
-    class="event-details w-96"
+    class="event-details w-96 bg-slate-900"
     :align="'center'"
     :align-offset="50"
     :side="'left'"
@@ -111,21 +109,21 @@ function handleGotoRelativeEvent(position: 'next' | 'prev' = 'next') {
       <template v-if="event.category || event.secondaryCategories">
         <ul class="flex gap-1">
           <li v-if="event.category">
-            <Badge class="mix-blend-luminosity font-bold bg-gray-600" variant="secondary">
+            <UiBadge class="mix-blend-luminosity font-bold bg-gray-600" variant="secondary">
               {{ event.category }}
-            </Badge>
+            </UiBadge>
           </li>
 
           <li v-for="cat in event.secondaryCategories" :key="cat">
-            <Badge class="mix-blend-luminosity bg-gray-600" variant="secondary">
+            <UiBadge class="mix-blend-luminosity bg-gray-600" variant="secondary">
               {{ cat }}
-            </Badge>
+            </UiBadge>
           </li>
         </ul>
       </template>
 
       <template v-if="event.description">
-        <hr class="border-slate-500 mt-2" />
+        <hr class="border-slate-500 mt-2" >
 
         <div class="mt-2 text-sm text-slate-300">
           {{ event.description }}
@@ -134,47 +132,47 @@ function handleGotoRelativeEvent(position: 'next' | 'prev' = 'next') {
     </div>
 
     <nav v-if="event.startDate && event.endDate" class="absolute -top-2 right-2 flex gap-2">
-      <Badge class="hover:opacity-100 hover:bg-slate-300" as-child>
+      <UiBadge class="hover:opacity-100 hover:bg-slate-300" as-child>
         <button
           class="flex gap-1"
-          @click="handleJumpToDate(event.startDate!)"
           title="Naviguer au début"
+          @click="handleJumpToDate(event.startDate!)"
         >
           <PhHourglassHigh size="16" weight="fill" /> Début
         </button>
-      </Badge>
+      </UiBadge>
-      <Badge class="hover:opacity-100 hover:bg-slate-300" as-child title="Naviguer à la fin">
+      <UiBadge class="hover:opacity-100 hover:bg-slate-300" as-child title="Naviguer à la fin">
         <button
           class="flex gap-1"
-          @click="handleJumpToDate(event.endDate!)"
           title="Naviguer à la fin"
+          @click="handleJumpToDate(event.endDate!)"
         >
           <PhHourglassLow size="16" weight="fill" /> Fin
         </button>
-      </Badge>
+      </UiBadge>
     </nav>
 
     <nav class="mt-2 flex gap-2">
-      <Badge class="hover:opacity-100 hover:bg-slate-300" as-child>
+      <UiBadge class="hover:opacity-100 hover:bg-slate-300" as-child>
         <button
           class="flex gap-1"
-          @click="handleGotoRelativeEvent('prev')"
           title="Évènement précédent"
+          @click="handleGotoRelativeEvent('prev')"
         >
           <PhArrowBendDoubleUpLeft size="16" weight="fill" /> Précédent
         </button>
-      </Badge>
+      </UiBadge>
-      <Badge class="hover:opacity-100 hover:bg-slate-300" as-child title="Naviguer à la fin">
+      <UiBadge class="hover:opacity-100 hover:bg-slate-300" as-child title="Naviguer à la fin">
         <button
           class="flex gap-1"
-          @click="handleGotoRelativeEvent('next')"
           title="Évènement suivant"
+          @click="handleGotoRelativeEvent('next')"
         >
           <PhArrowBendDoubleUpRight size="16" weight="fill" /> Suivant
         </button>
-      </Badge>
+      </UiBadge>
     </nav>
-  </PopoverContent>
+  </UiPopoverContent>
 </template>
 
 <style lang="scss">

components/calendar/CalendarMenu.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { useCalendar } from '@/stores/CalendarStore'
 
-import { Button } from '@/components/ui/button'
 import { PhMagnifyingGlass } from '@phosphor-icons/vue'
 import CalendarMenuNav from './CalendarMenuNav.vue'
 import CalendarMenuSubnav from './CalendarMenuSubnav.vue'
@@ -29,10 +28,10 @@ const { revealAdvancedSearch } = useCalendar()
 
       <menu class="flex items-center gap-2">
         <li>
-          <Button search-slash @click="revealAdvancedSearch()">
+          <UiButton search-slash @click="revealAdvancedSearch()">
             <PhMagnifyingGlass size="20" weight="light" />
             Recherche avancée
-          </Button>
+          </UiButton>
         </li>
         <li>
           <CalendarSwitch />

components/calendar/CalendarMenuNav.vue

@@ -2,14 +2,12 @@
 import { computed, type ComputedRef } from 'vue'
 import { useCalendar } from '@/stores/CalendarStore'
 
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import {
   PhCaretDoubleLeft,
   PhCaretDoubleRight,
   PhCaretLeft,
   PhCaretRight
 } from '@phosphor-icons/vue'
-import Button from '@/components/ui/button/Button.vue'
 
 interface DirectionLabels {
   pastFar: string
@@ -145,56 +143,56 @@ function toFutureFar(): void {
 
 <template>
   <div class="flex items-center gap-2">
-    <TooltipProvider :delayDuration="250">
+    <UiTooltipProvider :delay-duration="250">
-      <Tooltip>
+      <UiTooltip>
-        <TooltipTrigger as-child>
+        <UiTooltipTrigger as-child>
-          <Button variant="outline" size="icon" @click="toPastFar()">
+          <UiButton variant="outline" size="icon" @click="toPastFar()">
             <PhCaretDoubleLeft size="18" />
-          </Button>
+          </UiButton>
-        </TooltipTrigger>
+        </UiTooltipTrigger>
-        <TooltipContent>
+        <UiTooltipContent>
           <p>{{ activeDirectionLabels.pastFar }}</p>
-        </TooltipContent>
+        </UiTooltipContent>
-      </Tooltip>
+      </UiTooltip>
-    </TooltipProvider>
+    </UiTooltipProvider>
 
-    <TooltipProvider :delayDuration="250">
+    <UiTooltipProvider :delay-duration="250">
-      <Tooltip>
+      <UiTooltip>
-        <TooltipTrigger as-child>
+        <UiTooltipTrigger as-child>
-          <Button variant="outline" size="icon" @click="toPastNear()">
+          <UiButton variant="outline" size="icon" @click="toPastNear()">
             <PhCaretLeft size="18" />
-          </Button>
+          </UiButton>
-        </TooltipTrigger>
+        </UiTooltipTrigger>
-        <TooltipContent>
+        <UiTooltipContent>
           <p>{{ activeDirectionLabels.pastNear }}</p>
-        </TooltipContent>
+        </UiTooltipContent>
-      </Tooltip>
+      </UiTooltip>
-    </TooltipProvider>
+    </UiTooltipProvider>
 
-    <TooltipProvider :delayDuration="250">
+    <UiTooltipProvider :delay-duration="250">
-      <Tooltip>
+      <UiTooltip>
-        <TooltipTrigger as-child>
+        <UiTooltipTrigger as-child>
-          <Button variant="outline" size="icon" @click="toFutureNear()">
+          <UiButton variant="outline" size="icon" @click="toFutureNear()">
             <PhCaretRight size="18" />
-          </Button>
+          </UiButton>
-        </TooltipTrigger>
+        </UiTooltipTrigger>
-        <TooltipContent>
+        <UiTooltipContent>
           <p>{{ activeDirectionLabels.futureNear }}</p>
-        </TooltipContent>
+        </UiTooltipContent>
-      </Tooltip>
+      </UiTooltip>
-    </TooltipProvider>
+    </UiTooltipProvider>
 
-    <TooltipProvider :delayDuration="250">
+    <UiTooltipProvider :delay-duration="250">
-      <Tooltip>
+      <UiTooltip>
-        <TooltipTrigger as-child>
+        <UiTooltipTrigger as-child>
-          <Button variant="outline" size="icon" @click="toFutureFar()">
+          <UiButton variant="outline" size="icon" @click="toFutureFar()">
             <PhCaretDoubleRight size="18" />
-          </Button>
+          </UiButton>
-        </TooltipTrigger>
+        </UiTooltipTrigger>
-        <TooltipContent>
+        <UiTooltipContent>
           <p>{{ activeDirectionLabels.futureFar }}</p>
-        </TooltipContent>
+        </UiTooltipContent>
-      </Tooltip>
+      </UiTooltip>
-    </TooltipProvider>
+    </UiTooltipProvider>
   </div>
 </template>

components/calendar/CalendarMenuSubnav.vue

@@ -3,9 +3,7 @@ import { daysPerMonth, monthsPerYear, type LeimDate } from '@/models/Date'
 import { useCalendar } from '@/stores/CalendarStore'
 import { useCalendarEvents } from '@/stores/EventStore'
 
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { PhArrowLineLeft, PhArrowLineRight } from '@phosphor-icons/vue'
-import Button from '@/components/ui/button/Button.vue'
 
 const { currentDate, currentConfig, jumpToDate } = useCalendar()
 const { getRelativeEventFromDate } = useCalendarEvents()
@@ -62,46 +60,54 @@ function handleGotoPreviousEventPage(position: 'next' | 'prev' = 'next') {
 
 <template>
   <div class="flex gap-2">
-    <div class="w-40 px-4 py-2 border-slate-700 border-x-[1px] border-t-[1px] rounded-t-sm">
+    <div class="grid items-end w-40 px-4 py-2 border-slate-700 border-x-[1px] border-t-[1px] rounded-t-sm text-sm">
-      <span class="text-sm">{{ currentDate.currentDateTitle }}</span>
+      <ClientOnly>
+        <span>{{ currentDate.currentDateTitle }}</span>
+
+        <template #fallback>
+          <span class="inline-block">
+            <UiSkeleton class="h-[19px] w-full rounded-sm" />
+          </span>
+        </template>
+      </ClientOnly>
     </div>
     <div class="border-slate-700 border-x-[1px] border-t-[1px] rounded-t-sm">
-      <TooltipProvider :delayDuration="250">
+      <UiTooltipProvider :delay-duration="250">
-        <Tooltip>
+        <UiTooltip>
-          <TooltipTrigger as-child>
+          <UiTooltipTrigger as-child>
-            <Button
+            <UiButton
               variant="ghost"
               size="icon"
               class="rounded-t-sm rounded-b-none"
               @click="handleGotoPreviousEventPage('prev')"
             >
               <PhArrowLineLeft size="22" />
-            </Button>
+            </UiButton>
-          </TooltipTrigger>
+          </UiTooltipTrigger>
-          <TooltipContent>
+          <UiTooltipContent>
             <p>Précédente page à évènements</p>
-          </TooltipContent>
+          </UiTooltipContent>
-        </Tooltip>
+        </UiTooltip>
-      </TooltipProvider>
+      </UiTooltipProvider>
     </div>
     <div class="border-slate-700 border-x-[1px] border-t-[1px] rounded-t-sm">
-      <TooltipProvider :delayDuration="250">
+      <UiTooltipProvider :delay-duration="250">
-        <Tooltip>
+        <UiTooltip>
-          <TooltipTrigger as-child>
+          <UiTooltipTrigger as-child>
-            <Button
+            <UiButton
               variant="ghost"
               size="icon"
               class="rounded-t-sm rounded-b-none"
               @click="handleGotoPreviousEventPage('next')"
             >
               <PhArrowLineRight size="22" />
-            </Button>
+            </UiButton>
-          </TooltipTrigger>
+          </UiTooltipTrigger>
-          <TooltipContent>
+          <UiTooltipContent>
             <p>Prochaine page à évènements</p>
-          </TooltipContent>
+          </UiTooltipContent>
-        </Tooltip>
+        </UiTooltip>
-      </TooltipProvider>
+      </UiTooltipProvider>
     </div>
   </div>
 </template>

components/calendar/CalendarMenuToday.vue

@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import { useCalendar } from '@/stores/CalendarStore'
+import { storeToRefs } from 'pinia'
+import { computed } from 'vue'
+
+import { areDatesIdentical } from '@/models/Date'
+
+const { defaultDate } = useCalendar()
+const { selectedDate } = storeToRefs(useCalendar())
+const { jumpToDefaultDate, getFormattedDateTitle } = useCalendar()
+
+const defaultDateFormatted: string = getFormattedDateTitle(defaultDate, true)
+
+const isDefaultDate: ComputedRef<boolean> = computed<boolean>(() => areDatesIdentical(selectedDate.value, defaultDate))
+</script>
+
+<template>
+  <UiTooltipProvider :delay-duration="250">
+    <UiTooltip>
+      <UiTooltipTrigger as-child>
+        <ClientOnly>
+          <UiButton size="sm" :disabled="isDefaultDate" @click="jumpToDefaultDate">
+            Aujourd'hui
+          </UiButton>
+
+          <template #fallback>
+            <UiButton size="sm">
+              Aujourd'hui
+            </UiButton>
+          </template>
+        </ClientOnly>
+      </UiTooltipTrigger>
+      <UiTooltipContent>
+        <p>{{ defaultDateFormatted }}</p>
+      </UiTooltipContent>
+    </UiTooltip>
+  </UiTooltipProvider>
+</template>

components/calendar/CalendarSwitch.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { useCalendar } from '@/stores/CalendarStore'
+import { PhCalendarBlank } from '@phosphor-icons/vue'
+import { computed } from 'vue'
+
+const { currentConfig, viewTypeOptions, getViewTypeTitle, setViewType } = useCalendar()
+
+const viewTypeTitle = computed(() => getViewTypeTitle(currentConfig.viewType))
+</script>
+
+<template>
+  <UiDropdownMenu>
+    <UiDropdownMenuTrigger as-child>
+      <UiButton size="sm" variant="secondary">
+        <PhCalendarBlank size="18" weight="fill" />
+
+        {{ viewTypeTitle }}
+      </UiButton>
+    </UiDropdownMenuTrigger>
+    <UiDropdownMenuContent :side="'bottom'" :collision-padding="30">
+      <UiDropdownMenuLabel>Mode d'affichage</UiDropdownMenuLabel>
+      <UiDropdownMenuSeparator />
+      <UiDropdownMenuItem
+        v-for="option in viewTypeOptions"
+        :key="option"
+        @click="setViewType(option)"
+      >
+        {{ getViewTypeTitle(option) }}
+      </UiDropdownMenuItem>
+    </UiDropdownMenuContent>
+  </UiDropdownMenu>
+</template>

components/calendar/search/CalendarSearch.vue

@@ -17,31 +17,8 @@ import { useCalendarEvents } from '@/stores/EventStore'
 import { capitalize } from '@/utils/Strings'
 import { useMagicKeys, useScroll, useStorage, whenever } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
-import { searchUnifier, type SearchMode } from '../Search'
+import { searchUnifier, type SearchMode } from '../SearchMode'
 
-import { Button } from '@/components/ui/button'
-import { CommandEmpty, CommandGroup, CommandItem, CommandList } from '@/components/ui/command'
-import { Dialog, DialogContent, DialogDescription, DialogTitle } from '@/components/ui/dialog'
-import { Input } from '@/components/ui/input'
-import {
-  Pagination,
-  PaginationEllipsis,
-  PaginationFirst,
-  PaginationLast,
-  PaginationList,
-  PaginationListItem,
-  PaginationNext,
-  PaginationPrev
-} from '@/components/ui/pagination'
-import {
-  TagsInput,
-  TagsInputInput,
-  TagsInputItem,
-  TagsInputItemDelete,
-  TagsInputItemText
-} from '@/components/ui/tags-input'
-import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { PhClockClockwise, PhClockCounterClockwise, PhMagnifyingGlass } from '@phosphor-icons/vue'
 import {
   ComboboxAnchor,
@@ -53,10 +30,10 @@ import {
 
 import SearchList from './lists/SearchList.vue'
 
-const { characters } = useCharacters()
+const { characters } = storeToRefs(useCharacters())
-const { allEvents } = useCalendarEvents()
+const { allEvents } = storeToRefs(useCalendarEvents())
 
-const modalOpen = defineModel({ default: false })
+const modalOpen = defineModel<boolean>({ default: false })
 
 const searchQuery = ref<string>('')
 // const searchEnough = computed<boolean>(() => searchQuery.value.length >= 2)
@@ -96,11 +73,11 @@ const searchResults = computed<(Character | CalendarEvent)[]>(() => {
   // Assign data to loop over and filter
   // They are assigned this way for readability
   if (selectedEntity.value === 'events') {
-    dataToFilter = allEvents
+    dataToFilter = allEvents.value
   } else if (selectedEntity.value === 'characters') {
-    dataToFilter = characters
+    dataToFilter = characters.value
   } else {
-    dataToFilter = [...allEvents, ...characters]
+    dataToFilter = [...allEvents.value, ...characters.value]
   }
 
   /**
@@ -128,7 +105,7 @@ const searchResults = computed<(Character | CalendarEvent)[]>(() => {
 
       // Handle categories logic
       let hitCategories: boolean = false
-      let allCategories: CalendarEventCategory[] = []
+      const allCategories: CalendarEventCategory[] = []
 
       if (item.category) {
         allCategories.push(item.category)
@@ -162,7 +139,7 @@ const searchResults = computed<(Character | CalendarEvent)[]>(() => {
 
       // Handle categories logic
       let hitCategories: boolean = false
-      let allCategories: CharacterCategory[] = []
+      const allCategories: CharacterCategory[] = []
 
       if (item.category) {
         allCategories.push(item.category)
@@ -193,16 +170,16 @@ function resetSearch() {
 }
 
 /**
- * Opens the search dialog
+ * Opens the search Uidialog
  */
-function openDialog() {
+function openUiDialog() {
   modalOpen.value = true
 }
 
 /**
- * Closes the search dialog
+ * Closes the search Uidialog
  */
-function closeDialog() {
+function closeUiDialog() {
   modalOpen.value = false
 }
 
@@ -218,13 +195,13 @@ function handleEntitySwitch() {
 const keys = useMagicKeys()
 
 whenever(keys.control_period, () => {
-  openDialog()
+  openUiDialog()
 })
 
 const searchResultsRef = ref<HTMLElement | null>(null)
 const { y: searchResultsY } = useScroll(searchResultsRef)
 
-watch(currentPage, () => {
+watch([currentPage, selectedEntity], () => {
   searchResultsY.value = 0
 })
 
@@ -250,10 +227,10 @@ const filteredCategories = computed(() =>
  *
  * @param e Radix Change Event
  */
-function handleCategorySelect(e: any) {
+function handleCategorySelect(e: (CharacterCategory | CalendarEventCategory)) {
-  if (typeof e.detail.value === 'string') {
+  if (typeof e === 'string') {
     searchCategory.value = ''
-    selectedCategories.value.push(e.detail.value)
+    selectedCategories.value.push(e)
   }
 
   if (filteredCategories.value.length === 0) {
@@ -263,31 +240,31 @@ function handleCategorySelect(e: any) {
 </script>
 
 <template>
-  <Dialog v-model:open="modalOpen" @update:open="resetSearch()">
+  <UiDialog v-model:open="modalOpen" @update:open="resetSearch()">
-    <DialogContent
+    <UiDialogContent
       class="flex flex-col flex-nowrap top-16 -translate-y-0 data-[state=closed]:slide-out-to-top-[5%] data-[state=open]:slide-in-from-top-[5%]"
       :class="{
         'bottom-16': searchResults.length > 0
       }"
     >
       <VisuallyHidden>
-        <DialogTitle> Recherche avancée </DialogTitle>
+        <UiDialogTitle> Recherche avancée </UiDialogTitle>
       </VisuallyHidden>
       <VisuallyHidden>
-        <DialogDescription>
+        <UiDialogDescription>
           Rechercher les données disponibles sur le calendrier
-        </DialogDescription>
+        </UiDialogDescription>
       </VisuallyHidden>
 
-      <!-- Dialog header -->
+      <!-- UiDialog header -->
-      <div class="grid gap-3" id="searchForm">
+      <div id="searchForm" class="grid gap-3">
         <div class="relative w-full h-fit">
-          <Input
+          <UiInput
             id="search"
+            v-model:model-value="searchQuery"
             type="text"
             placeholder="Rechercher le calendrier"
             class="pl-10 py-6 text-lg"
-            v-model:model-value="searchQuery"
             autocomplete="off"
           />
           <span class="absolute start-1 inset-y-0 flex items-center justify-center px-2 opacity-50">
@@ -297,28 +274,28 @@ function handleCategorySelect(e: any) {
 
         <div class="flex items-center justify-between">
           <div>
-            <ToggleGroup
+            <UiToggleGroup
+              v-model="selectedEntity"
               type="single"
               class="justify-start"
-              v-model="selectedEntity"
               @update:model-value="handleEntitySwitch()"
             >
-              <ToggleGroupItem value="events" aria-label="Uniquement les évènements" v-once>
+              <UiToggleGroupItem value="events" aria-label="Uniquement les évènements">
                 Évènements
-              </ToggleGroupItem>
+              </UiToggleGroupItem>
-              <ToggleGroupItem value="characters" aria-label="Uniquement les personnages" v-once>
+              <UiToggleGroupItem value="characters" aria-label="Uniquement les personnages">
                 Personnages
-              </ToggleGroupItem>
+              </UiToggleGroupItem>
-            </ToggleGroup>
+            </UiToggleGroup>
           </div>
 
           <div class="flex items-center gap-1">
-            <TagsInput class="px-0 gap-0 w-72" :model-value="selectedCategories">
+            <UiTagsInput class="px-0 gap-0 w-72" :model-value="selectedCategories">
               <div class="flex gap-2 flex-wrap items-center px-3">
-                <TagsInputItem v-for="item in selectedCategories" :key="item" :value="item">
+                <UiTagsInputItem v-for="item in selectedCategories" :key="item" :value="item">
-                  <TagsInputItemText class="capitalize" />
+                  <UiTagsInputItemText class="capitalize" />
-                  <TagsInputItemDelete />
+                  <UiTagsInputItemDelete />
-                </TagsInputItem>
+                </UiTagsInputItem>
               </div>
 
               <ComboboxRoot
@@ -329,7 +306,7 @@ function handleCategorySelect(e: any) {
               >
                 <ComboboxAnchor as-child>
                   <ComboboxInput placeholder="Catégories" as-child>
-                    <TagsInputInput
+                    <UiTagsInputInput
                       class="w-full px-3"
                       :class="selectedCategories.length > 0 ? 'mt-2' : ''"
                       @keydown.enter.prevent
@@ -338,79 +315,79 @@ function handleCategorySelect(e: any) {
                 </ComboboxAnchor>
 
                 <ComboboxPortal :to="'#searchForm'">
-                  <CommandList
+                  <UiCommandList
                     position="popper"
                     class="w-[--radix-popper-anchor-width] rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50"
                     :dismissable="true"
                   >
-                    <CommandEmpty />
+                    <UiCommandEmpty />
-                    <CommandGroup>
+                    <UiCommandGroup>
-                      <CommandItem
+                      <UiCommandItem
-                        v-for="framework in filteredCategories"
+                        v-for="cat in filteredCategories"
-                        :key="framework"
+                        :key="cat"
-                        :value="framework"
+                        :value="cat"
-                        @select.prevent="handleCategorySelect"
+                        @select.prevent="handleCategorySelect(cat)"
                       >
-                        {{ capitalize(framework) }}
+                        {{ capitalize(cat) }}
-                      </CommandItem>
+                      </UiCommandItem>
-                    </CommandGroup>
+                    </UiCommandGroup>
-                  </CommandList>
+                  </UiCommandList>
                 </ComboboxPortal>
               </ComboboxRoot>
-            </TagsInput>
+            </UiTagsInput>
 
-            <TooltipProvider :delayDuration="250">
+            <UiTooltipProvider :delay-duration="250">
-              <Tooltip>
+              <UiTooltip>
-                <TooltipTrigger as-child>
+                <UiTooltipTrigger as-child>
-                  <Button
+                  <UiButton
                     :variant="selectedOrder === 'desc' ? 'secondary' : 'outline'"
                     size="icon"
                     @click="setOrderDesc()"
                   >
                     <PhClockCounterClockwise size="18" />
-                  </Button>
+                  </UiButton>
-                </TooltipTrigger>
+                </UiTooltipTrigger>
-                <TooltipContent>
+                <UiTooltipContent>
                   <p>Plus ancien</p>
-                </TooltipContent>
+                </UiTooltipContent>
-              </Tooltip>
+              </UiTooltip>
-            </TooltipProvider>
+            </UiTooltipProvider>
 
-            <TooltipProvider :delayDuration="250">
+            <UiTooltipProvider :delay-duration="250">
-              <Tooltip>
+              <UiTooltip>
-                <TooltipTrigger as-child>
+                <UiTooltipTrigger as-child>
-                  <Button
+                  <UiButton
                     :variant="selectedOrder === 'asc' ? 'secondary' : 'outline'"
                     size="icon"
                     @click="setOrderAsc()"
                   >
                     <PhClockClockwise size="18" />
-                  </Button>
+                  </UiButton>
-                </TooltipTrigger>
+                </UiTooltipTrigger>
-                <TooltipContent>
+                <UiTooltipContent>
                   <p>Plus récent</p>
-                </TooltipContent>
+                </UiTooltipContent>
-              </Tooltip>
+              </UiTooltip>
-            </TooltipProvider>
+            </UiTooltipProvider>
           </div>
         </div>
       </div>
 
-      <hr />
+      <hr >
 
-      <div v-if="searchResults.length > 0" class="grow overflow-y-auto" ref="searchResultsRef">
+      <div v-if="searchResults.length > 0" ref="searchResultsRef" class="grow overflow-y-auto">
         <SearchList
           :results="searchResults"
           :current-entity="selectedEntity"
           :order="selectedOrder"
           :start-at="startOfList"
           :end-at="endOfList"
-          @jumped-to-date="closeDialog()"
+          @jumped-to-date="closeUiDialog()"
         />
       </div>
 
       <div class="flex justify-end">
-        <Pagination
+        <UiPagination
           v-model:page="currentPage"
           :total="searchResults.length"
           :items-per-page="itemsPerPage"
@@ -418,32 +395,32 @@ function handleCategorySelect(e: any) {
           show-edges
           :default-page="1"
         >
-          <PaginationList v-slot="{ items }" class="flex items-center gap-1">
+          <UiPaginationList v-slot="{ items }" class="flex items-center gap-1">
-            <PaginationFirst />
+            <UiPaginationFirst />
-            <PaginationPrev />
+            <UiPaginationPrev />
 
             <template v-for="(item, index) in items">
-              <PaginationListItem
+              <UiPaginationListItem
                 v-if="item.type === 'page'"
                 :key="index"
                 :value="item.value"
                 as-child
               >
-                <Button
+                <UiButton
                   class="w-10 h-10 p-0"
                   :variant="item.value === currentPage ? 'default' : 'outline'"
                 >
                   {{ item.value }}
-                </Button>
+                </UiButton>
-              </PaginationListItem>
+              </UiPaginationListItem>
-              <PaginationEllipsis v-else :key="item.type" :index="index" />
+              <UiPaginationEllipsis v-else :key="item.type" :index="index" />
             </template>
 
-            <PaginationNext />
+            <UiPaginationNext />
-            <PaginationLast />
+            <UiPaginationLast />
-          </PaginationList>
+          </UiPaginationList>
-        </Pagination>
+        </UiPagination>
       </div>
-    </DialogContent>
+    </UiDialogContent>
-  </Dialog>
+  </UiDialog>
 </template>

components/calendar/search/lists/CharacterCallout.vue

@@ -37,13 +37,13 @@ const { getFormattedDateTitle } = useCalendar()
 
       <menu class="flex gap-2 border-[1px] border-slate-700 rounded-sm w-fit">
         <li v-if="character.birth">
-          <TooltipProvider :delayDuration="100">
+          <TooltipProvider :delay-duration="100">
             <Tooltip>
               <TooltipTrigger as-child>
                 <Button
-                  @click="$emit('query:date-jump', character.birth!)"
                   variant="ghost"
                   size="xs"
+                  @click="$emit('query:date-jump', character.birth!)"
                 >
                   <PhPlant size="16" weight="fill" />
                   {{ getFormattedDateTitle(character.birth, true) }}
@@ -57,13 +57,13 @@ const { getFormattedDateTitle } = useCalendar()
         </li>
         <span v-if="character.birth && character.death">-</span>
         <li v-if="character.death">
-          <TooltipProvider :delayDuration="100">
+          <TooltipProvider :delay-duration="100">
             <Tooltip>
               <TooltipTrigger as-child>
                 <Button
-                  @click="$emit('query:date-jump', character.death!)"
                   variant="ghost"
                   size="xs"
+                  @click="$emit('query:date-jump', character.death!)"
                 >
                   <PhSkull size="16" weight="fill" />
                   {{ getFormattedDateTitle(character.death, true) }}
@@ -77,7 +77,7 @@ const { getFormattedDateTitle } = useCalendar()
         </li>
       </menu>
 
-      <hr v-if="character.description" class="border-white opacity-25" />
+      <hr v-if="character.description" class="border-white opacity-25" >
 
       <div v-if="character.description" class="text-sm">
         <span class="opacity-75">

components/calendar/search/lists/EventCallout.vue

@@ -105,7 +105,7 @@ const dateDuration: string | null = props.event.endDate
     </div>
 
     <div v-if="event.description" class="text-sm">
-      <hr class="my-2 border-white opacity-50" />
+      <hr class="my-2 border-white opacity-50" >
       <span class="opacity-75">
         {{ event.description }}
       </span>

components/calendar/search/lists/SearchList.vue

@@ -3,12 +3,11 @@ import { isCharacter, type Character } from '@/models/Characters'
 import { compareDates, type LeimDate, type LeimDateOrder } from '@/models/Date'
 import { isCalendarEvent, type CalendarEvent } from '@/models/Events'
 import { useCalendar } from '@/stores/CalendarStore'
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
-import type { SearchMode } from '../../Search'
+import type { SearchMode } from '../../SearchMode'
 
 import CharacterCallout from './CharacterCallout.vue'
 import EventCallout from './EventCallout.vue'
-import { useScroll } from '@vueuse/core'
 
 const props = defineProps<{
   results: (Character | CalendarEvent)[]

components/calendar/state/monthly/DayTile.vue

@@ -6,7 +6,6 @@ import { useElementBounding } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { computed, ref, type ComputedRef } from 'vue'
 
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import CalendarEventButton from '../../CalendarEvent.vue'
 import type { CalendarEvent } from '@/models/Events'
 
@@ -74,15 +73,17 @@ const eventsNotDisplayed = computed(
       class="relative z-10 group block w-full text-center cursor-pointer"
       @click="selectDate(date)"
     >
-      <span
+      <ClientOnly>
-        class="inline-flex w-8 h-8 aspect-square items-center justify-center rounded-full border-2 border-transparent font-bold transition-colors group-hover:border-slate-800"
+        <span
-        :class="{
+          class="inline-flex w-8 h-8 aspect-square items-center justify-center rounded-full border-2 border-transparent font-bold transition-colors group-hover:border-slate-800"
-          'bg-slate-800': isDefaultDate && !isSelectedDate,
+          :class="{
-          'text-white bg-blue-500': isSelectedDate
+            'bg-slate-800': isDefaultDate && !isSelectedDate,
-        }"
+            'text-white bg-blue-500': isSelectedDate
-      >
+          }"
-        {{ date.day }}
+        >
-      </span>
+          {{ date.day }}
+        </span>
+      </ClientOnly>
     </button>
 
     <ul
@@ -97,15 +98,15 @@ const eventsNotDisplayed = computed(
       </li>
 
       <li v-if="eventsNotDisplayed > 0" class="pointer-events-auto">
-        <Popover>
+        <UiPopover>
-          <PopoverTrigger as-child>
+          <UiPopoverTrigger as-child>
             <button
               class="text-xs px-2 py-1 block w-full text-left font-bold rounded-sm whitespace-nowrap overflow-hidden text-ellipsis cursor-pointer transition-colors hover:bg-slate-800"
             >
               {{ eventsNotDisplayed }} autre{{ eventsNotDisplayed > 1 ? 's' : '' }}
             </button>
-          </PopoverTrigger>
+          </UiPopoverTrigger>
-          <PopoverContent class="w-80" :align="'center'" :side="'right'">
+          <UiPopoverContent class="w-80" :align="'center'" :side="'right'">
             <div class="text-center mb-4">
               <span
                 class="inline-flex w-12 h-12 aspect-square items-center justify-center text-lg font-semibold text-slate-300 bg-slate-800 rounded-full"
@@ -122,8 +123,8 @@ const eventsNotDisplayed = computed(
                 <CalendarEventButton :event :tile-date="date" />
               </li>
             </ul>
-          </PopoverContent>
+          </UiPopoverContent>
-        </Popover>
+        </UiPopover>
       </li>
     </ul>
   </div>

components/calendar/state/yearly/Layout.vue

@@ -26,7 +26,7 @@ const moveCalendarRight = useThrottleFn(() => {
 
 <template>
   <div class="container mt-[10vh] mb-auto" @wheel="handleWheel">
-    <div ref="test" class="grid grid-cols-5 gap-x-8 gap-y-16">
+    <div class="grid grid-cols-5 gap-x-8 gap-y-16">
       <MonthTile
         v-for="month in staticConfig.monthsPerYear"
         :key="month"

components/global/Heading.vue

@@ -0,0 +1,5 @@
+<template>
+  <h1 class="text-2xl font-bold flex">
+    <slot />
+  </h1>
+</template>

components/global/Sidebar.vue

@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import { PhHouse, PhList } from '@phosphor-icons/vue'
+import type { SidebarProps } from './SidebarProps';
+
+defineProps<SidebarProps>()
+</script>
+
+<template>
+  <nav class="w-16 py-6 border-r-[1px] border-l-slate-500 grid grid-rows-[1fr_auto] justify-center">
+    <menu class="flex flex-col gap-4">
+      <li class="mb-12">
+        <UiButton variant="ghost" size="icon" class="rounded-full" @click="console.log">
+          <PhList size="27" />
+        </UiButton>
+      </li>
+
+      <li v-if="!isHome">
+        <UiTooltipProvider :delay-duration="100">
+          <UiTooltip>
+            <UiTooltipTrigger as-child>
+              <UiButton variant="ghost" size="icon" class="rounded-full" as-child>
+                <RouterLink to="/">
+                  <PhHouse size="24" weight="fill" />
+                </RouterLink>
+              </UiButton>
+            </UiTooltipTrigger>
+            <UiTooltipContent :side="'right'">
+              <p>Retourner aux outils</p>
+            </UiTooltipContent>
+          </UiTooltip>
+        </UiTooltipProvider>
+      </li>
+
+      <li v-for="(item, i) in menuItems" :key="i">
+        <UiTooltipProvider :delay-duration="100">
+          <UiTooltip>
+            <UiTooltipTrigger as-child>
+              <UiButton v-if="item.to" variant="ghost" size="icon" class="rounded-full" as-child>
+                <RouterLink :to="item.to">
+                  <component :is="item.phIcon" size="24" weight="fill" />
+                </RouterLink>
+              </UiButton>
+              <UiButton v-if="item.clickHandler" variant="ghost" size="icon" class="rounded-full" @click="item.clickHandler">
+                <component :is="item.phIcon" size="24" weight="fill" />
+              </UiButton>
+            </UiTooltipTrigger>
+            <UiTooltipContent :side="'right'">
+              <p>{{ item.tooltip }}</p>
+            </UiTooltipContent>
+          </UiTooltip>
+        </UiTooltipProvider>
+      </li>
+
+      <!-- <li>
+        <UiTooltipProvider :delay-duration="100">
+          <UiTooltip>
+            <UiTooltipTrigger as-child>
+              <UiButton
+                variant="ghost"
+                size="icon"
+                class="rounded-full"
+                @click="revealAdvancedSearch()"
+              >
+                <PhMagnifyingGlass size="24" weight="fill" />
+              </UiButton>
+            </UiTooltipTrigger>
+            <UiTooltipContent :side="'right'">
+              <p>Recherche avancée</p>
+            </UiTooltipContent>
+          </UiTooltip>
+        </UiTooltipProvider>
+      </li> -->
+    </menu>
+
+    <UserCTA />
+  </nav>
+</template>

components/global/SidebarProps.ts

@@ -0,0 +1,11 @@
+export interface MenuItem {
+  phIcon: Component
+  tooltip: string
+  clickHandler?: () => void
+  to?: string
+}
+
+export interface SidebarProps {
+  menuItems: MenuItem[],
+  isHome?: boolean
+}

components/global/user/CTA.vue

@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+import { PhUserCircle } from '@phosphor-icons/vue'
+
+const router = useRouter()
+
+const { auth } = useSupabaseClient()
+const user = useSupabaseUser()
+const userMeta = computed(() => user.value?.user_metadata)
+
+const menuOpened = ref<boolean>(false)
+
+function closeMenu() {
+  menuOpened.value = false
+}
+watch(user, closeMenu)
+
+async function handleGoogleLogin() {
+  try {
+    auth.signInWithOAuth({
+      provider: 'google',
+      options: {
+        queryParams: {
+          access_type: 'offline',
+          prompt: 'consent'
+        }
+      }
+    })
+  } catch (err) {
+    console.log(err)
+  }
+}
+
+async function handleLogout() {
+  try {
+    const { error } = await auth.signOut()
+
+    if (error) throw error
+  } catch (err) {
+    console.log(err)
+  }
+}
+
+function gotoProfilePage() {
+  router.push({ path: '/profile' })
+}
+</script>
+
+<template>
+  <ClientOnly>
+    <UiPopover v-model:open="menuOpened">
+      <UiPopoverTrigger>
+        <UiAvatar v-if="user" class="cursor-pointer">
+          <UiAvatarImage
+            :src="userMeta?.avatar_url"
+            :alt="userMeta?.full_name"
+            referrerpolicy="no-referrer"
+          />
+          <UiAvatarFallback>Me</UiAvatarFallback>
+        </UiAvatar>
+        <UiButton v-else variant="outline" size="icon">
+          <PhUserCircle size="18" />
+        </UiButton>
+      </UiPopoverTrigger>
+      <UiPopoverContent class="w-fit p-0" :align="'start'" :side="'top'" :collision-padding="20">
+        <UiCommand>
+          <UiCommandList v-if="user">
+            <UiCommandGroup :heading="`Connecté en tant que ${user?.email}`">
+              <UiCommandItem value="profile" @select="gotoProfilePage"> Profil </UiCommandItem>
+              <UiCommandItem value="logout" @select="handleLogout"> Déconnexion </UiCommandItem>
+            </UiCommandGroup>
+          </UiCommandList>
+          <UiCommandList v-else>
+            <UiCommandItem value="logout" @select="handleGoogleLogin"> Connexion </UiCommandItem>
+          </UiCommandList>
+        </UiCommand>
+      </UiPopoverContent>
+    </UiPopover>
+  </ClientOnly>
+</template>

components/profile/Layout.vue

@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+const user = useSupabaseUser()
+</script>
+
+<template>
+  <div class="p-8">
+    <Heading>{{ user?.user_metadata.full_name }}</Heading>
+  </div>
+</template>

components/ui/avatar/Avatar.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { AvatarRoot } from 'radix-vue'
+import { type AvatarVariants, avatarVariant } from '.'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes['class']
+  size?: AvatarVariants['size']
+  shape?: AvatarVariants['shape']
+}>(), {
+  size: 'sm',
+  shape: 'circle',
+})
+</script>
+
+<template>
+  <AvatarRoot :class="cn(avatarVariant({ size, shape }), props.class)">
+    <slot />
+  </AvatarRoot>
+</template>

components/ui/avatar/AvatarFallback.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { AvatarFallback, type AvatarFallbackProps } from 'radix-vue'
+
+const props = defineProps<AvatarFallbackProps>()
+</script>
+
+<template>
+  <AvatarFallback v-bind="props">
+    <slot />
+  </AvatarFallback>
+</template>

components/ui/avatar/AvatarImage.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { AvatarImage, type AvatarImageProps } from 'radix-vue'
+
+const props = defineProps<AvatarImageProps>()
+</script>
+
+<template>
+  <AvatarImage v-bind="props" class="h-full w-full object-cover" />
+</template>

components/ui/avatar/index.ts

@@ -0,0 +1,24 @@
+import { type VariantProps, cva } from 'class-variance-authority'
+
+export { default as Avatar } from './Avatar.vue'
+export { default as AvatarImage } from './AvatarImage.vue'
+export { default as AvatarFallback } from './AvatarFallback.vue'
+
+export const avatarVariant = cva(
+  'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',
+  {
+    variants: {
+      size: {
+        sm: 'h-10 w-10 text-xs',
+        base: 'h-16 w-16 text-2xl',
+        lg: 'h-32 w-32 text-5xl',
+      },
+      shape: {
+        circle: 'rounded-full',
+        square: 'rounded-md',
+      },
+    },
+  },
+)
+
+export type AvatarVariants = VariantProps<typeof avatarVariant>

components/ui/badge/index.ts

@@ -7,18 +7,19 @@ export const badgeVariants = cva(
   {
     variants: {
       variant: {
-        default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+        default:
+          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
         secondary:
           'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
         destructive:
           'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
-        outline: 'text-foreground'
+        outline: 'text-foreground',
-      }
+      },
     },
     defaultVariants: {
-      variant: 'default'
+      variant: 'default',
-    }
+    },
-  }
+  },
 )
 
 export type BadgeVariants = VariantProps<typeof badgeVariants>

components/ui/card/Card.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import { RouterLink } from 'vue-router'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']
@@ -20,7 +19,7 @@ const props = defineProps<{
   >
     <slot />
 
-    <RouterLink
+    <NuxtLink
       v-if="props.link"
       :to="props.link"
       class="absolute inset-0 focus-visible:outline-none"

components/ui/card/CardContent.vue

@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div :class="cn('p-6 pt-0 text-muted-foreground', props.class)">
+  <div :class="cn('p-6 pt-0', props.class)">
     <slot />
   </div>
 </template>

components/ui/card/CardDescription.vue

@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <p :class="cn('text-sm text-muted-foreground mt-1', props.class)">
+  <div :class="cn('text-sm text-muted-foreground', props.class)">
     <slot />
-  </p>
+  </div>
 </template>

components/ui/card/CardHeader.vue

@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div :class="cn('flex flex-col gap-y-1.5 px-6 pt-6 pb-3', props.class)">
+  <div :class="cn('flex flex-col gap-y-1.5 p-6', props.class)">
     <slot />
   </div>
 </template>

components/ui/card/CardTitle.vue

@@ -8,7 +8,11 @@ const props = defineProps<{
 </script>
 
 <template>
-  <h3 :class="cn('text-2xl font-semibold leading-none tracking-tight', props.class)">
+  <h3
+    :class="
+      cn('text-2xl font-semibold leading-none tracking-tight', props.class)
+    "
+  >
     <slot />
   </h3>
 </template>

components/ui/command/index.ts

@@ -1,3 +1,5 @@
+export { ComboboxPortal } from 'radix-vue'
+
 export { default as Command } from './Command.vue'
 export { default as CommandDialog } from './CommandDialog.vue'
 export { default as CommandEmpty } from './CommandEmpty.vue'