feat(auth): add OIDC/SSO support with RP-initiated logout and settings

client/src/components/RadiusPicker.vue

@@ -4,7 +4,7 @@ import { useThemeStore } from '@/stores/theme'
 const themeStore = useThemeStore()
 
 const shapes = [
-  { id: 'sharp' as const,   rx: '1' },
+  { id: 'sharp' as const, rx: '1' },
   { id: 'default' as const, rx: '4' },
   { id: 'rounded' as const, rx: '9' },
 ]

client/src/components/ui/badge/Badge.vue

@@ -1,26 +1,24 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import type { BadgeVariants } from "."
-import { reactiveOmit } from "@vueuse/core"
-import { Primitive } from "reka-ui"
-import { cn } from "@/lib/utils"
-import { badgeVariants } from "."
+import type { PrimitiveProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import type { BadgeVariants } from '.'
+import { reactiveOmit } from '@vueuse/core'
+import { Primitive } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { badgeVariants } from '.'
 
-const props = defineProps<PrimitiveProps & {
-  variant?: BadgeVariants["variant"]
-  class?: HTMLAttributes["class"]
-}>()
+const props = defineProps<
+  PrimitiveProps & {
+    variant?: BadgeVariants['variant']
+    class?: HTMLAttributes['class']
+  }
+>()
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class')
 </script>
 
 <template>
-  <Primitive
-    data-slot="badge"
-    :class="cn(badgeVariants({ variant }), props.class)"
-    v-bind="delegatedProps"
-  >
+  <Primitive data-slot="badge" :class="cn(badgeVariants({ variant }), props.class)" v-bind="delegatedProps">
     <slot />
   </Primitive>
 </template>

client/src/components/ui/badge/index.ts

@@ -1,25 +1,22 @@
-import type { VariantProps } from "class-variance-authority"
-import { cva } from "class-variance-authority"
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
 
-export { default as Badge } from "./Badge.vue"
+export { default as Badge } from './Badge.vue'
 
 export const badgeVariants = cva(
-  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  'inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
   {
     variants: {
       variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
         destructive:
-         "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
       },
     },
     defaultVariants: {
-      variant: "default",
+      variant: 'default',
     },
   },
 )

client/src/components/ui/button/Button.vue

@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import type { ButtonVariants } from "."
-import { Primitive } from "reka-ui"
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "."
+import type { PrimitiveProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import type { ButtonVariants } from '.'
+import { Primitive } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '.'
 
 interface Props extends PrimitiveProps {
-  variant?: ButtonVariants["variant"]
-  size?: ButtonVariants["size"]
-  class?: HTMLAttributes["class"]
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+  class?: HTMLAttributes['class']
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  as: "button",
+  as: 'button',
 })
 </script>
 

client/src/components/ui/button/index.ts

@@ -1,37 +1,34 @@
-import type { VariantProps } from "class-variance-authority"
-import { cva } from "class-variance-authority"
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
 
-export { default as Button } from "./Button.vue"
+export { default as Button } from './Button.vue'
 
 export const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
-        default:
-          "bg-primary text-primary-foreground hover:bg-primary/90",
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
         destructive:
-          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
         outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
-        "default": "h-9 px-4 py-2 has-[>svg]:px-3",
-        "sm": "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        "lg": "h-10 rounded-md px-6 has-[>svg]:px-4",
-        "icon": "size-9",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10",
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
+        'icon-sm': 'size-8',
+        'icon-lg': 'size-10',
       },
     },
     defaultVariants: {
-      variant: "default",
-      size: "default",
+      variant: 'default',
+      size: 'default',
     },
   },
 )

client/src/components/ui/dropdown-menu/DropdownMenu.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { DropdownMenuRootEmits, DropdownMenuRootProps } from "reka-ui"
-import { DropdownMenuRoot, useForwardPropsEmits } from "reka-ui"
+import type { DropdownMenuRootEmits, DropdownMenuRootProps } from 'reka-ui'
+import { DropdownMenuRoot, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<DropdownMenuRootProps>()
 const emits = defineEmits<DropdownMenuRootEmits>()
@@ -9,11 +9,7 @@ const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <DropdownMenuRoot
-    v-slot="slotProps"
-    data-slot="dropdown-menu"
-    v-bind="forwarded"
-  >
+  <DropdownMenuRoot v-slot="slotProps" data-slot="dropdown-menu" v-bind="forwarded">
     <slot v-bind="slotProps" />
   </DropdownMenuRoot>
 </template>

client/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -1,19 +1,15 @@
 <script setup lang="ts">
-import type { DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItemProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { Check } from "lucide-vue-next"
-import {
-  DropdownMenuCheckboxItem,
-  DropdownMenuItemIndicator,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItemProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { Check } from 'lucide-vue-next'
+import { DropdownMenuCheckboxItem, DropdownMenuItemIndicator, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@/lib/utils'
 
-const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class')
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
@@ -22,10 +18,12 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <DropdownMenuCheckboxItem
     data-slot="dropdown-menu-checkbox-item"
     v-bind="forwarded"
-    :class=" cn(
-      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
-      props.class,
-    )"
+    :class="
+      cn(
+        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+        props.class,
+      )
+    "
   >
     <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
       <DropdownMenuItemIndicator>

client/src/components/ui/dropdown-menu/DropdownMenuContent.vue

@@ -1,27 +1,20 @@
 <script setup lang="ts">
-import type { DropdownMenuContentEmits, DropdownMenuContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  DropdownMenuContent,
-  DropdownMenuPortal,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { DropdownMenuContentEmits, DropdownMenuContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { DropdownMenuContent, DropdownMenuPortal, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@/lib/utils'
 
 defineOptions({
   inheritAttrs: false,
 })
 
-const props = withDefaults(
-  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes["class"] }>(),
-  {
-    sideOffset: 4,
-  },
-)
+const props = withDefaults(defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(), {
+  sideOffset: 4,
+})
 const emits = defineEmits<DropdownMenuContentEmits>()
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class')
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
@@ -31,7 +24,12 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <DropdownMenuContent
       data-slot="dropdown-menu-content"
       v-bind="{ ...$attrs, ...forwarded }"
-      :class="cn('bg-popover text-popover-foreground 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 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md', props.class)"
+      :class="
+        cn(
+          'bg-popover text-popover-foreground 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 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+          props.class,
+        )
+      "
     >
       <slot />
     </DropdownMenuContent>

client/src/components/ui/dropdown-menu/DropdownMenuGroup.vue

@@ -1,15 +1,12 @@
 <script setup lang="ts">
-import type { DropdownMenuGroupProps } from "reka-ui"
-import { DropdownMenuGroup } from "reka-ui"
+import type { DropdownMenuGroupProps } from 'reka-ui'
+import { DropdownMenuGroup } from 'reka-ui'
 
 const props = defineProps<DropdownMenuGroupProps>()
 </script>
 
 <template>
-  <DropdownMenuGroup
-    data-slot="dropdown-menu-group"
-    v-bind="props"
-  >
+  <DropdownMenuGroup data-slot="dropdown-menu-group" v-bind="props">
     <slot />
   </DropdownMenuGroup>
 </template>

client/src/components/ui/dropdown-menu/DropdownMenuItem.vue

@@ -1,19 +1,24 @@
 <script setup lang="ts">
-import type { DropdownMenuItemProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { DropdownMenuItem, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { DropdownMenuItemProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { DropdownMenuItem, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
 
-const props = withDefaults(defineProps<DropdownMenuItemProps & {
-  class?: HTMLAttributes["class"]
-  inset?: boolean
-  variant?: "default" | "destructive"
-}>(), {
-  variant: "default",
-})
+const props = withDefaults(
+  defineProps<
+    DropdownMenuItemProps & {
+      class?: HTMLAttributes['class']
+      inset?: boolean
+      variant?: 'default' | 'destructive'
+    }
+  >(),
+  {
+    variant: 'default',
+  },
+)
 
-const delegatedProps = reactiveOmit(props, "inset", "variant", "class")
+const delegatedProps = reactiveOmit(props, 'inset', 'variant', 'class')
 
 const forwardedProps = useForwardProps(delegatedProps)
 </script>
@@ -24,7 +29,12 @@ const forwardedProps = useForwardProps(delegatedProps)
     :data-inset="inset ? '' : undefined"
     :data-variant="variant"
     v-bind="forwardedProps"
-    :class="cn('focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4', props.class)"
+    :class="
+      cn(
+        'focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+        props.class,
+      )
+    "
   >
     <slot />
   </DropdownMenuItem>

client/src/components/ui/dropdown-menu/DropdownMenuLabel.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { DropdownMenuLabelProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { DropdownMenuLabel, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { DropdownMenuLabelProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { DropdownMenuLabel, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
 
-const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes["class"], inset?: boolean }>()
+const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
 
-const delegatedProps = reactiveOmit(props, "class", "inset")
+const delegatedProps = reactiveOmit(props, 'class', 'inset')
 const forwardedProps = useForwardProps(delegatedProps)
 </script>
 

client/src/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue

@@ -1,9 +1,6 @@
 <script setup lang="ts">
-import type { DropdownMenuRadioGroupEmits, DropdownMenuRadioGroupProps } from "reka-ui"
-import {
-  DropdownMenuRadioGroup,
-  useForwardPropsEmits,
-} from "reka-ui"
+import type { DropdownMenuRadioGroupEmits, DropdownMenuRadioGroupProps } from 'reka-ui'
+import { DropdownMenuRadioGroup, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<DropdownMenuRadioGroupProps>()
 const emits = defineEmits<DropdownMenuRadioGroupEmits>()
@@ -12,10 +9,7 @@ const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <DropdownMenuRadioGroup
-    data-slot="dropdown-menu-radio-group"
-    v-bind="forwarded"
-  >
+  <DropdownMenuRadioGroup data-slot="dropdown-menu-radio-group" v-bind="forwarded">
     <slot />
   </DropdownMenuRadioGroup>
 </template>

client/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue

@@ -1,20 +1,16 @@
 <script setup lang="ts">
-import type { DropdownMenuRadioItemEmits, DropdownMenuRadioItemProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { Circle } from "lucide-vue-next"
-import {
-  DropdownMenuItemIndicator,
-  DropdownMenuRadioItem,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { DropdownMenuRadioItemEmits, DropdownMenuRadioItemProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { Circle } from 'lucide-vue-next'
+import { DropdownMenuItemIndicator, DropdownMenuRadioItem, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@/lib/utils'
 
-const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
 
 const emits = defineEmits<DropdownMenuRadioItemEmits>()
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class')
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
@@ -23,10 +19,12 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <DropdownMenuRadioItem
     data-slot="dropdown-menu-radio-item"
     v-bind="forwarded"
-    :class="cn(
-      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
-      props.class,
-    )"
+    :class="
+      cn(
+        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+        props.class,
+      )
+    "
   >
     <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
       <DropdownMenuItemIndicator>

client/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue

@@ -1,23 +1,19 @@
 <script setup lang="ts">
-import type { DropdownMenuSeparatorProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  DropdownMenuSeparator,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { DropdownMenuSeparatorProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { DropdownMenuSeparator } from 'reka-ui'
+import { cn } from '@/lib/utils'
 
-const props = defineProps<DropdownMenuSeparatorProps & {
-  class?: HTMLAttributes["class"]
-}>()
+const props = defineProps<
+  DropdownMenuSeparatorProps & {
+    class?: HTMLAttributes['class']
+  }
+>()
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class')
 </script>
 
 <template>
-  <DropdownMenuSeparator
-    data-slot="dropdown-menu-separator"
-    v-bind="delegatedProps"
-    :class="cn('bg-border -mx-1 my-1 h-px', props.class)"
-  />
+  <DropdownMenuSeparator data-slot="dropdown-menu-separator" v-bind="delegatedProps" :class="cn('bg-border -mx-1 my-1 h-px', props.class)" />
 </template>

client/src/components/ui/dropdown-menu/DropdownMenuShortcut.vue

@@ -1,17 +1,14 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 
 <template>
-  <span
-    data-slot="dropdown-menu-shortcut"
-    :class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)"
-  >
+  <span data-slot="dropdown-menu-shortcut" :class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)">
     <slot />
   </span>
 </template>

client/src/components/ui/dropdown-menu/DropdownMenuSub.vue

@@ -1,9 +1,6 @@
 <script setup lang="ts">
-import type { DropdownMenuSubEmits, DropdownMenuSubProps } from "reka-ui"
-import {
-  DropdownMenuSub,
-  useForwardPropsEmits,
-} from "reka-ui"
+import type { DropdownMenuSubEmits, DropdownMenuSubProps } from 'reka-ui'
+import { DropdownMenuSub, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<DropdownMenuSubProps>()
 const emits = defineEmits<DropdownMenuSubEmits>()

client/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue

@@ -1,17 +1,14 @@
 <script setup lang="ts">
-import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  DropdownMenuSubContent,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { DropdownMenuSubContent, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@/lib/utils'
 
-const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<DropdownMenuSubContentEmits>()
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class')
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
@@ -20,7 +17,12 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <DropdownMenuSubContent
     data-slot="dropdown-menu-sub-content"
     v-bind="forwarded"
-    :class="cn('bg-popover text-popover-foreground 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 min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg', props.class)"
+    :class="
+      cn(
+        'bg-popover text-popover-foreground 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 min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+        props.class,
+      )
+    "
   >
     <slot />
   </DropdownMenuSubContent>

client/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue

@@ -1,17 +1,14 @@
 <script setup lang="ts">
-import type { DropdownMenuSubTriggerProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ChevronRight } from "lucide-vue-next"
-import {
-  DropdownMenuSubTrigger,
-  useForwardProps,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { DropdownMenuSubTriggerProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ChevronRight } from 'lucide-vue-next'
+import { DropdownMenuSubTrigger, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
 
-const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes["class"], inset?: boolean }>()
+const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
 
-const delegatedProps = reactiveOmit(props, "class", "inset")
+const delegatedProps = reactiveOmit(props, 'class', 'inset')
 const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
@@ -20,10 +17,12 @@ const forwardedProps = useForwardProps(delegatedProps)
     data-slot="dropdown-menu-sub-trigger"
     v-bind="forwardedProps"
     :data-inset="inset ? '' : undefined"
-    :class="cn(
-      'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*=\'text-\'])]:text-muted-foreground',
-      props.class,
-    )"
+    :class="
+      cn(
+        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*=\'text-\'])]:text-muted-foreground',
+        props.class,
+      )
+    "
   >
     <slot />
     <ChevronRight class="ml-auto size-4" />

client/src/components/ui/dropdown-menu/DropdownMenuTrigger.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { DropdownMenuTriggerProps } from "reka-ui"
-import { DropdownMenuTrigger, useForwardProps } from "reka-ui"
+import type { DropdownMenuTriggerProps } from 'reka-ui'
+import { DropdownMenuTrigger, useForwardProps } from 'reka-ui'
 
 const props = defineProps<DropdownMenuTriggerProps>()
 
@@ -8,10 +8,7 @@ const forwardedProps = useForwardProps(props)
 </script>
 
 <template>
-  <DropdownMenuTrigger
-    data-slot="dropdown-menu-trigger"
-    v-bind="forwardedProps"
-  >
+  <DropdownMenuTrigger data-slot="dropdown-menu-trigger" v-bind="forwardedProps">
     <slot />
   </DropdownMenuTrigger>
 </template>

client/src/components/ui/dropdown-menu/index.ts

@@ -1,16 +1,16 @@
-export { default as DropdownMenu } from "./DropdownMenu.vue"
+export { default as DropdownMenu } from './DropdownMenu.vue'
 
-export { default as DropdownMenuCheckboxItem } from "./DropdownMenuCheckboxItem.vue"
-export { default as DropdownMenuContent } from "./DropdownMenuContent.vue"
-export { default as DropdownMenuGroup } from "./DropdownMenuGroup.vue"
-export { default as DropdownMenuItem } from "./DropdownMenuItem.vue"
-export { default as DropdownMenuLabel } from "./DropdownMenuLabel.vue"
-export { default as DropdownMenuRadioGroup } from "./DropdownMenuRadioGroup.vue"
-export { default as DropdownMenuRadioItem } from "./DropdownMenuRadioItem.vue"
-export { default as DropdownMenuSeparator } from "./DropdownMenuSeparator.vue"
-export { default as DropdownMenuShortcut } from "./DropdownMenuShortcut.vue"
-export { default as DropdownMenuSub } from "./DropdownMenuSub.vue"
-export { default as DropdownMenuSubContent } from "./DropdownMenuSubContent.vue"
-export { default as DropdownMenuSubTrigger } from "./DropdownMenuSubTrigger.vue"
-export { default as DropdownMenuTrigger } from "./DropdownMenuTrigger.vue"
-export { DropdownMenuPortal } from "reka-ui"
+export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'
+export { default as DropdownMenuContent } from './DropdownMenuContent.vue'
+export { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'
+export { default as DropdownMenuItem } from './DropdownMenuItem.vue'
+export { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'
+export { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'
+export { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'
+export { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'
+export { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'
+export { default as DropdownMenuSub } from './DropdownMenuSub.vue'
+export { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'
+export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'
+export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'
+export { DropdownMenuPortal } from 'reka-ui'

client/src/components/ui/input/Input.vue

@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { useVModel } from "@vueuse/core"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from 'vue'
+import { useVModel } from '@vueuse/core'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
   defaultValue?: string | number
   modelValue?: string | number
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 
 const emits = defineEmits<{
-  (e: "update:modelValue", payload: string | number): void
+  (e: 'update:modelValue', payload: string | number): void
 }>()
 
-const modelValue = useVModel(props, "modelValue", emits, {
+const modelValue = useVModel(props, 'modelValue', emits, {
   passive: true,
   defaultValue: props.defaultValue,
 })
@@ -23,11 +23,13 @@ const modelValue = useVModel(props, "modelValue", emits, {
   <input
     v-model="modelValue"
     data-slot="input"
-    :class="cn(
-      'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-      'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
-      'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
-      props.class,
-    )"
-  >
+    :class="
+      cn(
+        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        props.class,
+      )
+    "
+  />
 </template>

client/src/components/ui/input/index.ts

@@ -1 +1 @@
-export { default as Input } from "./Input.vue"
+export { default as Input } from './Input.vue'

client/src/components/ui/popover/Popover.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { PopoverRootEmits, PopoverRootProps } from "reka-ui"
-import { PopoverRoot, useForwardPropsEmits } from "reka-ui"
+import type { PopoverRootEmits, PopoverRootProps } from 'reka-ui'
+import { PopoverRoot, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<PopoverRootProps>()
 const emits = defineEmits<PopoverRootEmits>()
@@ -9,11 +9,7 @@ const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <PopoverRoot
-    v-slot="slotProps"
-    data-slot="popover"
-    v-bind="forwarded"
-  >
+  <PopoverRoot v-slot="slotProps" data-slot="popover" v-bind="forwarded">
     <slot v-bind="slotProps" />
   </PopoverRoot>
 </template>

client/src/components/ui/popover/PopoverAnchor.vue

@@ -1,15 +1,12 @@
 <script setup lang="ts">
-import type { PopoverAnchorProps } from "reka-ui"
-import { PopoverAnchor } from "reka-ui"
+import type { PopoverAnchorProps } from 'reka-ui'
+import { PopoverAnchor } from 'reka-ui'
 
 const props = defineProps<PopoverAnchorProps>()
 </script>
 
 <template>
-  <PopoverAnchor
-    data-slot="popover-anchor"
-    v-bind="props"
-  >
+  <PopoverAnchor data-slot="popover-anchor" v-bind="props">
     <slot />
   </PopoverAnchor>
 </template>

client/src/components/ui/popover/PopoverContent.vue

@@ -1,28 +1,21 @@
 <script setup lang="ts">
-import type { PopoverContentEmits, PopoverContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  PopoverContent,
-  PopoverPortal,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { PopoverContentEmits, PopoverContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { PopoverContent, PopoverPortal, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@/lib/utils'
 
 defineOptions({
   inheritAttrs: false,
 })
 
-const props = withDefaults(
-  defineProps<PopoverContentProps & { class?: HTMLAttributes["class"] }>(),
-  {
-    align: "center",
-    sideOffset: 4,
-  },
-)
+const props = withDefaults(defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(), {
+  align: 'center',
+  sideOffset: 4,
+})
 const emits = defineEmits<PopoverContentEmits>()
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class')
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>

client/src/components/ui/popover/PopoverTrigger.vue

@@ -1,15 +1,12 @@
 <script setup lang="ts">
-import type { PopoverTriggerProps } from "reka-ui"
-import { PopoverTrigger } from "reka-ui"
+import type { PopoverTriggerProps } from 'reka-ui'
+import { PopoverTrigger } from 'reka-ui'
 
 const props = defineProps<PopoverTriggerProps>()
 </script>
 
 <template>
-  <PopoverTrigger
-    data-slot="popover-trigger"
-    v-bind="props"
-  >
+  <PopoverTrigger data-slot="popover-trigger" v-bind="props">
     <slot />
   </PopoverTrigger>
 </template>

client/src/components/ui/popover/index.ts

@@ -1,4 +1,4 @@
-export { default as Popover } from "./Popover.vue"
-export { default as PopoverAnchor } from "./PopoverAnchor.vue"
-export { default as PopoverContent } from "./PopoverContent.vue"
-export { default as PopoverTrigger } from "./PopoverTrigger.vue"
+export { default as Popover } from './Popover.vue'
+export { default as PopoverAnchor } from './PopoverAnchor.vue'
+export { default as PopoverContent } from './PopoverContent.vue'
+export { default as PopoverTrigger } from './PopoverTrigger.vue'

client/src/components/ui/separator/Separator.vue

@@ -1,18 +1,16 @@
 <script setup lang="ts">
-import type { SeparatorProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { Separator } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { SeparatorProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { Separator } from 'reka-ui'
+import { cn } from '@/lib/utils'
 
-const props = withDefaults(defineProps<
-  SeparatorProps & { class?: HTMLAttributes["class"] }
->(), {
-  orientation: "horizontal",
+const props = withDefaults(defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>(), {
+  orientation: 'horizontal',
   decorative: true,
 })
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class')
 </script>
 
 <template>

client/src/components/ui/separator/index.ts

@@ -1 +1 @@
-export { default as Separator } from "./Separator.vue"
+export { default as Separator } from './Separator.vue'

client/src/components/ui/sheet/Sheet.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { DialogRootEmits, DialogRootProps } from "reka-ui"
-import { DialogRoot, useForwardPropsEmits } from "reka-ui"
+import type { DialogRootEmits, DialogRootProps } from 'reka-ui'
+import { DialogRoot, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<DialogRootProps>()
 const emits = defineEmits<DialogRootEmits>()
@@ -9,11 +9,7 @@ const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <DialogRoot
-    v-slot="slotProps"
-    data-slot="sheet"
-    v-bind="forwarded"
-  >
+  <DialogRoot v-slot="slotProps" data-slot="sheet" v-bind="forwarded">
     <slot v-bind="slotProps" />
   </DialogRoot>
 </template>

client/src/components/ui/sheet/SheetClose.vue

@@ -1,15 +1,12 @@
 <script setup lang="ts">
-import type { DialogCloseProps } from "reka-ui"
-import { DialogClose } from "reka-ui"
+import type { DialogCloseProps } from 'reka-ui'
+import { DialogClose } from 'reka-ui'
 
 const props = defineProps<DialogCloseProps>()
 </script>
 
 <template>
-  <DialogClose
-    data-slot="sheet-close"
-    v-bind="props"
-  >
+  <DialogClose data-slot="sheet-close" v-bind="props">
     <slot />
   </DialogClose>
 </template>

client/src/components/ui/sheet/SheetContent.vue

@@ -1,20 +1,15 @@
 <script setup lang="ts">
-import type { DialogContentEmits, DialogContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { X } from "lucide-vue-next"
-import {
-  DialogClose,
-  DialogContent,
-  DialogPortal,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-import SheetOverlay from "./SheetOverlay.vue"
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { X } from 'lucide-vue-next'
+import { DialogClose, DialogContent, DialogPortal, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import SheetOverlay from './SheetOverlay.vue'
 
 interface SheetContentProps extends DialogContentProps {
-  class?: HTMLAttributes["class"]
-  side?: "top" | "right" | "bottom" | "left"
+  class?: HTMLAttributes['class']
+  side?: 'top' | 'right' | 'bottom' | 'left'
 }
 
 defineOptions({
@@ -22,11 +17,11 @@ defineOptions({
 })
 
 const props = withDefaults(defineProps<SheetContentProps>(), {
-  side: "right",
+  side: 'right',
 })
 const emits = defineEmits<DialogContentEmits>()
 
-const delegatedProps = reactiveOmit(props, "class", "side")
+const delegatedProps = reactiveOmit(props, 'class', 'side')
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
@@ -36,17 +31,18 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <SheetOverlay />
     <DialogContent
       data-slot="sheet-content"
-      :class="cn(
-        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
-        side === 'right'
-          && 'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
-        side === 'left'
-          && 'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
-        side === 'top'
-          && 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
-        side === 'bottom'
-          && 'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
-        props.class)"
+      :class="
+        cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+          side === 'right' &&
+            'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
+          side === 'left' &&
+            'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+          side === 'top' && 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
+          side === 'bottom' && 'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
+          props.class,
+        )
+      "
       v-bind="{ ...$attrs, ...forwarded }"
     >
       <slot />

client/src/components/ui/sheet/SheetDescription.vue

@@ -1,21 +1,17 @@
 <script setup lang="ts">
-import type { DialogDescriptionProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { DialogDescription } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { DialogDescriptionProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { DialogDescription } from 'reka-ui'
+import { cn } from '@/lib/utils'
 
-const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class')
 </script>
 
 <template>
-  <DialogDescription
-    data-slot="sheet-description"
-    :class="cn('text-muted-foreground text-sm', props.class)"
-    v-bind="delegatedProps"
-  >
+  <DialogDescription data-slot="sheet-description" :class="cn('text-muted-foreground text-sm', props.class)" v-bind="delegatedProps">
     <slot />
   </DialogDescription>
 </template>

client/src/components/ui/sheet/SheetFooter.vue

@@ -1,16 +1,12 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 
-const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
 </script>
 
 <template>
-  <div
-    data-slot="sheet-footer"
-    :class="cn('mt-auto flex flex-col gap-2 p-4', props.class)
-    "
-  >
+  <div data-slot="sheet-footer" :class="cn('mt-auto flex flex-col gap-2 p-4', props.class)">
     <slot />
   </div>
 </template>

client/src/components/ui/sheet/SheetHeader.vue

@@ -1,15 +1,12 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 
-const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
 </script>
 
 <template>
-  <div
-    data-slot="sheet-header"
-    :class="cn('flex flex-col gap-1.5 p-4', props.class)"
-  >
+  <div data-slot="sheet-header" :class="cn('flex flex-col gap-1.5 p-4', props.class)">
     <slot />
   </div>
 </template>

client/src/components/ui/sheet/SheetOverlay.vue

@@ -1,19 +1,24 @@
 <script setup lang="ts">
-import type { DialogOverlayProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { DialogOverlay } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { DialogOverlayProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { DialogOverlay } from 'reka-ui'
+import { cn } from '@/lib/utils'
 
-const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes['class'] }>()
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class')
 </script>
 
 <template>
   <DialogOverlay
     data-slot="sheet-overlay"
-    :class="cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', props.class)"
+    :class="
+      cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',
+        props.class,
+      )
+    "
     v-bind="delegatedProps"
   >
     <slot />

client/src/components/ui/sheet/SheetTitle.vue

@@ -1,21 +1,17 @@
 <script setup lang="ts">
-import type { DialogTitleProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { DialogTitle } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { DialogTitleProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { DialogTitle } from 'reka-ui'
+import { cn } from '@/lib/utils'
 
-const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class')
 </script>
 
 <template>
-  <DialogTitle
-    data-slot="sheet-title"
-    :class="cn('text-foreground font-semibold', props.class)"
-    v-bind="delegatedProps"
-  >
+  <DialogTitle data-slot="sheet-title" :class="cn('text-foreground font-semibold', props.class)" v-bind="delegatedProps">
     <slot />
   </DialogTitle>
 </template>

client/src/components/ui/sheet/SheetTrigger.vue

@@ -1,15 +1,12 @@
 <script setup lang="ts">
-import type { DialogTriggerProps } from "reka-ui"
-import { DialogTrigger } from "reka-ui"
+import type { DialogTriggerProps } from 'reka-ui'
+import { DialogTrigger } from 'reka-ui'
 
 const props = defineProps<DialogTriggerProps>()
 </script>
 
 <template>
-  <DialogTrigger
-    data-slot="sheet-trigger"
-    v-bind="props"
-  >
+  <DialogTrigger data-slot="sheet-trigger" v-bind="props">
     <slot />
   </DialogTrigger>
 </template>

client/src/components/ui/sheet/index.ts

@@ -1,8 +1,8 @@
-export { default as Sheet } from "./Sheet.vue"
-export { default as SheetClose } from "./SheetClose.vue"
-export { default as SheetContent } from "./SheetContent.vue"
-export { default as SheetDescription } from "./SheetDescription.vue"
-export { default as SheetFooter } from "./SheetFooter.vue"
-export { default as SheetHeader } from "./SheetHeader.vue"
-export { default as SheetTitle } from "./SheetTitle.vue"
-export { default as SheetTrigger } from "./SheetTrigger.vue"
+export { default as Sheet } from './Sheet.vue'
+export { default as SheetClose } from './SheetClose.vue'
+export { default as SheetContent } from './SheetContent.vue'
+export { default as SheetDescription } from './SheetDescription.vue'
+export { default as SheetFooter } from './SheetFooter.vue'
+export { default as SheetHeader } from './SheetHeader.vue'
+export { default as SheetTitle } from './SheetTitle.vue'
+export { default as SheetTrigger } from './SheetTrigger.vue'

client/src/components/ui/sidebar/Sidebar.vue

@@ -1,20 +1,20 @@
 <script setup lang="ts">
-import type { SidebarProps } from "."
-import { cn } from "@/lib/utils"
+import type { SidebarProps } from '.'
+import { cn } from '@/lib/utils'
 import { Sheet, SheetContent } from '@/components/ui/sheet'
 import SheetDescription from '@/components/ui/sheet/SheetDescription.vue'
 import SheetHeader from '@/components/ui/sheet/SheetHeader.vue'
 import SheetTitle from '@/components/ui/sheet/SheetTitle.vue'
-import { SIDEBAR_WIDTH_MOBILE, useSidebar } from "./utils"
+import { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'
 
 defineOptions({
   inheritAttrs: false,
 })
 
 const props = withDefaults(defineProps<SidebarProps>(), {
-  side: "left",
-  variant: "sidebar",
-  collapsible: "offcanvas",
+  side: 'left',
+  variant: 'sidebar',
+  collapsible: 'offcanvas',
 })
 
 const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
@@ -62,27 +62,31 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
   >
     <!-- This is what handles the sidebar gap on desktop  -->
     <div
-      :class="cn(
-        'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
-        'group-data-[collapsible=offcanvas]:w-0',
-        'group-data-[side=right]:rotate-180',
-        variant === 'floating' || variant === 'inset'
-          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
-          : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
-      )"
+      :class="
+        cn(
+          'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
+          'group-data-[collapsible=offcanvas]:w-0',
+          'group-data-[side=right]:rotate-180',
+          variant === 'floating' || variant === 'inset'
+            ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
+            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
+        )
+      "
     />
     <div
-      :class="cn(
-        'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
-        side === 'left'
-          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
-          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
-        // Adjust the padding for floating and inset variants.
-        variant === 'floating' || variant === 'inset'
-          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
-          : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
-        props.class,
-      )"
+      :class="
+        cn(
+          'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
+          side === 'left'
+            ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+            : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+          // Adjust the padding for floating and inset variants.
+          variant === 'floating' || variant === 'inset'
+            ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
+          props.class,
+        )
+      "
       v-bind="$attrs"
     >
       <div

client/src/components/ui/sidebar/SidebarContent.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 

client/src/components/ui/sidebar/SidebarFooter.vue

@@ -1,18 +1,14 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 
 <template>
-  <div
-    data-slot="sidebar-footer"
-    data-sidebar="footer"
-    :class="cn('flex flex-col gap-2 p-2', props.class)"
-  >
+  <div data-slot="sidebar-footer" data-sidebar="footer" :class="cn('flex flex-col gap-2 p-2', props.class)">
     <slot />
   </div>
 </template>

client/src/components/ui/sidebar/SidebarGroup.vue

@@ -1,18 +1,14 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 
 <template>
-  <div
-    data-slot="sidebar-group"
-    data-sidebar="group"
-    :class="cn('relative flex w-full min-w-0 flex-col p-2', props.class)"
-  >
+  <div data-slot="sidebar-group" data-sidebar="group" :class="cn('relative flex w-full min-w-0 flex-col p-2', props.class)">
     <slot />
   </div>
 </template>

client/src/components/ui/sidebar/SidebarGroupAction.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { Primitive } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { PrimitiveProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { Primitive } from 'reka-ui'
+import { cn } from '@/lib/utils'
 
-const props = defineProps<PrimitiveProps & {
-  class?: HTMLAttributes["class"]
-}>()
+const props = defineProps<
+  PrimitiveProps & {
+    class?: HTMLAttributes['class']
+  }
+>()
 </script>
 
 <template>
@@ -15,12 +17,14 @@ const props = defineProps<PrimitiveProps & {
     data-sidebar="group-action"
     :as="as"
     :as-child="asChild"
-    :class="cn(
-      'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-      'after:absolute after:-inset-2 md:after:hidden',
-      'group-data-[collapsible=icon]:hidden',
-      props.class,
-    )"
+    :class="
+      cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'after:absolute after:-inset-2 md:after:hidden',
+        'group-data-[collapsible=icon]:hidden',
+        props.class,
+      )
+    "
   >
     <slot />
   </Primitive>

client/src/components/ui/sidebar/SidebarGroupContent.vue

@@ -1,18 +1,14 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 
 <template>
-  <div
-    data-slot="sidebar-group-content"
-    data-sidebar="group-content"
-    :class="cn('w-full text-sm', props.class)"
-  >
+  <div data-slot="sidebar-group-content" data-sidebar="group-content" :class="cn('w-full text-sm', props.class)">
     <slot />
   </div>
 </template>

client/src/components/ui/sidebar/SidebarGroupLabel.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { Primitive } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { PrimitiveProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { Primitive } from 'reka-ui'
+import { cn } from '@/lib/utils'
 
-const props = defineProps<PrimitiveProps & {
-  class?: HTMLAttributes["class"]
-}>()
+const props = defineProps<
+  PrimitiveProps & {
+    class?: HTMLAttributes['class']
+  }
+>()
 </script>
 
 <template>
@@ -15,10 +17,13 @@ const props = defineProps<PrimitiveProps & {
     data-sidebar="group-label"
     :as="as"
     :as-child="asChild"
-    :class="cn(
-      'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-      'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
-      props.class)"
+    :class="
+      cn(
+        'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+        props.class,
+      )
+    "
   >
     <slot />
   </Primitive>

client/src/components/ui/sidebar/SidebarHeader.vue

@@ -1,18 +1,14 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 
 <template>
-  <div
-    data-slot="sidebar-header"
-    data-sidebar="header"
-    :class="cn('flex flex-col gap-2 p-2', props.class)"
-  >
+  <div data-slot="sidebar-header" data-sidebar="header" :class="cn('flex flex-col gap-2 p-2', props.class)">
     <slot />
   </div>
 </template>

client/src/components/ui/sidebar/SidebarInput.vue

@@ -1,22 +1,15 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 import { Input } from '@/components/ui/input'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 
 <template>
-  <Input
-    data-slot="sidebar-input"
-    data-sidebar="input"
-    :class="cn(
-      'bg-background h-8 w-full shadow-none',
-      props.class,
-    )"
-  >
+  <Input data-slot="sidebar-input" data-sidebar="input" :class="cn('bg-background h-8 w-full shadow-none', props.class)">
     <slot />
   </Input>
 </template>

client/src/components/ui/sidebar/SidebarInset.vue

@@ -1,20 +1,22 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 
 <template>
   <main
     data-slot="sidebar-inset"
-    :class="cn(
-      'bg-background relative flex w-full flex-1 flex-col',
-      'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
-      props.class,
-    )"
+    :class="
+      cn(
+        'bg-background relative flex w-full flex-1 flex-col',
+        'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
+        props.class,
+      )
+    "
   >
     <slot />
   </main>

client/src/components/ui/sidebar/SidebarMenu.vue

@@ -1,18 +1,14 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 
 <template>
-  <ul
-    data-slot="sidebar-menu"
-    data-sidebar="menu"
-    :class="cn('flex w-full min-w-0 flex-col gap-1', props.class)"
-  >
+  <ul data-slot="sidebar-menu" data-sidebar="menu" :class="cn('flex w-full min-w-0 flex-col gap-1', props.class)">
     <slot />
   </ul>
 </template>

client/src/components/ui/sidebar/SidebarMenuAction.vue

@@ -1,32 +1,39 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { Primitive } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { PrimitiveProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { Primitive } from 'reka-ui'
+import { cn } from '@/lib/utils'
 
-const props = withDefaults(defineProps<PrimitiveProps & {
-  showOnHover?: boolean
-  class?: HTMLAttributes["class"]
-}>(), {
-  as: "button",
-})
+const props = withDefaults(
+  defineProps<
+    PrimitiveProps & {
+      showOnHover?: boolean
+      class?: HTMLAttributes['class']
+    }
+  >(),
+  {
+    as: 'button',
+  },
+)
 </script>
 
 <template>
   <Primitive
     data-slot="sidebar-menu-action"
     data-sidebar="menu-action"
-    :class="cn(
-      'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-      'after:absolute after:-inset-2 md:after:hidden',
-      'peer-data-[size=sm]/menu-button:top-1',
-      'peer-data-[size=default]/menu-button:top-1.5',
-      'peer-data-[size=lg]/menu-button:top-2.5',
-      'group-data-[collapsible=icon]:hidden',
-      showOnHover
-        && 'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
-      props.class,
-    )"
+    :class="
+      cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'after:absolute after:-inset-2 md:after:hidden',
+        'peer-data-[size=sm]/menu-button:top-1',
+        'peer-data-[size=default]/menu-button:top-1.5',
+        'peer-data-[size=lg]/menu-button:top-2.5',
+        'group-data-[collapsible=icon]:hidden',
+        showOnHover &&
+          'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
+        props.class,
+      )
+    "
     :as="as"
     :as-child="asChild"
   >

client/src/components/ui/sidebar/SidebarMenuBadge.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 
@@ -11,15 +11,17 @@ const props = defineProps<{
   <div
     data-slot="sidebar-menu-badge"
     data-sidebar="menu-badge"
-    :class="cn(
-      'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
-      'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
-      'peer-data-[size=sm]/menu-button:top-1',
-      'peer-data-[size=default]/menu-button:top-1.5',
-      'peer-data-[size=lg]/menu-button:top-2.5',
-      'group-data-[collapsible=icon]:hidden',
-      props.class,
-    )"
+    :class="
+      cn(
+        'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
+        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+        'peer-data-[size=sm]/menu-button:top-1',
+        'peer-data-[size=default]/menu-button:top-1.5',
+        'peer-data-[size=lg]/menu-button:top-2.5',
+        'group-data-[collapsible=icon]:hidden',
+        props.class,
+      )
+    "
   >
     <slot />
   </div>

client/src/components/ui/sidebar/SidebarMenuButton.vue

@@ -1,26 +1,31 @@
 <script setup lang="ts">
-import type { Component } from "vue"
-import type { SidebarMenuButtonProps } from "./SidebarMenuButtonChild.vue"
-import { reactiveOmit } from "@vueuse/core"
+import type { Component } from 'vue'
+import type { SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'
+import { reactiveOmit } from '@vueuse/core'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
-import SidebarMenuButtonChild from "./SidebarMenuButtonChild.vue"
-import { useSidebar } from "./utils"
+import SidebarMenuButtonChild from './SidebarMenuButtonChild.vue'
+import { useSidebar } from './utils'
 
 defineOptions({
   inheritAttrs: false,
 })
 
-const props = withDefaults(defineProps<SidebarMenuButtonProps & {
-  tooltip?: string | Component
-}>(), {
-  as: "button",
-  variant: "default",
-  size: "default",
-})
+const props = withDefaults(
+  defineProps<
+    SidebarMenuButtonProps & {
+      tooltip?: string | Component
+    }
+  >(),
+  {
+    as: 'button',
+    variant: 'default',
+    size: 'default',
+  },
+)
 
 const { isMobile, state } = useSidebar()
 
-const delegatedProps = reactiveOmit(props, "tooltip")
+const delegatedProps = reactiveOmit(props, 'tooltip')
 </script>
 
 <template>
@@ -34,11 +39,7 @@ const delegatedProps = reactiveOmit(props, "tooltip")
         <slot />
       </SidebarMenuButtonChild>
     </TooltipTrigger>
-    <TooltipContent
-      side="right"
-      align="center"
-      :hidden="state !== 'collapsed' || isMobile"
-    >
+    <TooltipContent side="right" align="center" :hidden="state !== 'collapsed' || isMobile">
       <template v-if="typeof tooltip === 'string'">
         {{ tooltip }}
       </template>

client/src/components/ui/sidebar/SidebarMenuButtonChild.vue

@@ -1,22 +1,22 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import type { SidebarMenuButtonVariants } from "."
-import { Primitive } from "reka-ui"
-import { cn } from "@/lib/utils"
-import { sidebarMenuButtonVariants } from "."
+import type { PrimitiveProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import type { SidebarMenuButtonVariants } from '.'
+import { Primitive } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { sidebarMenuButtonVariants } from '.'
 
 export interface SidebarMenuButtonProps extends PrimitiveProps {
-  variant?: SidebarMenuButtonVariants["variant"]
-  size?: SidebarMenuButtonVariants["size"]
+  variant?: SidebarMenuButtonVariants['variant']
+  size?: SidebarMenuButtonVariants['size']
   isActive?: boolean
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }
 
 const props = withDefaults(defineProps<SidebarMenuButtonProps>(), {
-  as: "button",
-  variant: "default",
-  size: "default",
+  as: 'button',
+  variant: 'default',
+  size: 'default',
 })
 </script>
 

client/src/components/ui/sidebar/SidebarMenuItem.vue

@@ -1,18 +1,14 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 
 <template>
-  <li
-    data-slot="sidebar-menu-item"
-    data-sidebar="menu-item"
-    :class="cn('group/menu-item relative', props.class)"
-  >
+  <li data-slot="sidebar-menu-item" data-sidebar="menu-item" :class="cn('group/menu-item relative', props.class)">
     <slot />
   </li>
 </template>

client/src/components/ui/sidebar/SidebarMenuSkeleton.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { computed } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from 'vue'
+import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 import { Skeleton } from '@/components/ui/skeleton'
 
 const props = defineProps<{
   showIcon?: boolean
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 
 const width = computed(() => {
@@ -15,21 +15,9 @@ const width = computed(() => {
 </script>
 
 <template>
-  <div
-    data-slot="sidebar-menu-skeleton"
-    data-sidebar="menu-skeleton"
-    :class="cn('flex h-8 items-center gap-2 rounded-md px-2', props.class)"
-  >
-    <Skeleton
-      v-if="showIcon"
-      class="size-4 rounded-md"
-      data-sidebar="menu-skeleton-icon"
-    />
+  <div data-slot="sidebar-menu-skeleton" data-sidebar="menu-skeleton" :class="cn('flex h-8 items-center gap-2 rounded-md px-2', props.class)">
+    <Skeleton v-if="showIcon" class="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />
 
-    <Skeleton
-      class="h-4 max-w-(--skeleton-width) flex-1"
-      data-sidebar="menu-skeleton-text"
-      :style="{ '--skeleton-width': width }"
-    />
+    <Skeleton class="h-4 max-w-(--skeleton-width) flex-1" data-sidebar="menu-skeleton-text" :style="{ '--skeleton-width': width }" />
   </div>
 </template>

client/src/components/ui/sidebar/SidebarMenuSub.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 
@@ -11,11 +11,13 @@ const props = defineProps<{
   <ul
     data-slot="sidebar-menu-sub"
     data-sidebar="menu-badge"
-    :class="cn(
-      'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
-      'group-data-[collapsible=icon]:hidden',
-      props.class,
-    )"
+    :class="
+      cn(
+        'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
+        'group-data-[collapsible=icon]:hidden',
+        props.class,
+      )
+    "
   >
     <slot />
   </ul>

client/src/components/ui/sidebar/SidebarMenuSubButton.vue

@@ -1,17 +1,22 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { Primitive } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { PrimitiveProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { Primitive } from 'reka-ui'
+import { cn } from '@/lib/utils'
 
-const props = withDefaults(defineProps<PrimitiveProps & {
-  size?: "sm" | "md"
-  isActive?: boolean
-  class?: HTMLAttributes["class"]
-}>(), {
-  as: "a",
-  size: "md",
-})
+const props = withDefaults(
+  defineProps<
+    PrimitiveProps & {
+      size?: 'sm' | 'md'
+      isActive?: boolean
+      class?: HTMLAttributes['class']
+    }
+  >(),
+  {
+    as: 'a',
+    size: 'md',
+  },
+)
 </script>
 
 <template>
@@ -22,14 +27,16 @@ const props = withDefaults(defineProps<PrimitiveProps & {
     :as-child="asChild"
     :data-size="size"
     :data-active="isActive"
-    :class="cn(
-      'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
-      'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
-      size === 'sm' && 'text-xs',
-      size === 'md' && 'text-sm',
-      'group-data-[collapsible=icon]:hidden',
-      props.class,
-    )"
+    :class="
+      cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+        size === 'sm' && 'text-xs',
+        size === 'md' && 'text-sm',
+        'group-data-[collapsible=icon]:hidden',
+        props.class,
+      )
+    "
   >
     <slot />
   </Primitive>

client/src/components/ui/sidebar/SidebarMenuSubItem.vue

@@ -1,18 +1,14 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 
 <template>
-  <li
-    data-slot="sidebar-menu-sub-item"
-    data-sidebar="menu-sub-item"
-    :class="cn('group/menu-sub-item relative', props.class)"
-  >
+  <li data-slot="sidebar-menu-sub-item" data-sidebar="menu-sub-item" :class="cn('group/menu-sub-item relative', props.class)">
     <slot />
   </li>
 </template>

client/src/components/ui/sidebar/SidebarProvider.vue

@@ -1,28 +1,38 @@
 <script setup lang="ts">
-import type { HTMLAttributes, Ref } from "vue"
-import { defaultDocument, useEventListener, useMediaQuery, useVModel } from "@vueuse/core"
-import { TooltipProvider } from "reka-ui"
-import { computed, ref } from "vue"
-import { cn } from "@/lib/utils"
-import { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from "./utils"
+import type { HTMLAttributes, Ref } from 'vue'
+import { defaultDocument, useEventListener, useMediaQuery, useVModel } from '@vueuse/core'
+import { TooltipProvider } from 'reka-ui'
+import { computed, ref } from 'vue'
+import { cn } from '@/lib/utils'
+import {
+  provideSidebarContext,
+  SIDEBAR_COOKIE_MAX_AGE,
+  SIDEBAR_COOKIE_NAME,
+  SIDEBAR_KEYBOARD_SHORTCUT,
+  SIDEBAR_WIDTH,
+  SIDEBAR_WIDTH_ICON,
+} from './utils'
 
-const props = withDefaults(defineProps<{
-  defaultOpen?: boolean
-  open?: boolean
-  class?: HTMLAttributes["class"]
-}>(), {
-  defaultOpen: !defaultDocument?.cookie.includes(`${SIDEBAR_COOKIE_NAME}=false`),
-  open: undefined,
-})
+const props = withDefaults(
+  defineProps<{
+    defaultOpen?: boolean
+    open?: boolean
+    class?: HTMLAttributes['class']
+  }>(),
+  {
+    defaultOpen: !defaultDocument?.cookie.includes(`${SIDEBAR_COOKIE_NAME}=false`),
+    open: undefined,
+  },
+)
 
 const emits = defineEmits<{
-  "update:open": [open: boolean]
+  'update:open': [open: boolean]
 }>()
 
-const isMobile = useMediaQuery("(max-width: 768px)")
+const isMobile = useMediaQuery('(max-width: 768px)')
 const openMobile = ref(false)
 
-const open = useVModel(props, "open", emits, {
+const open = useVModel(props, 'open', emits, {
   defaultValue: props.defaultOpen ?? false,
   passive: (props.open === undefined) as false,
 }) as Ref<boolean>
@@ -43,7 +53,7 @@ function toggleSidebar() {
   return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)
 }
 
-useEventListener("keydown", (event: KeyboardEvent) => {
+useEventListener('keydown', (event: KeyboardEvent) => {
   if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
     event.preventDefault()
     toggleSidebar()
@@ -52,7 +62,7 @@ useEventListener("keydown", (event: KeyboardEvent) => {
 
 // We add a state so that we can do data-state="expanded" or "collapsed".
 // This makes it easier to style the sidebar with Tailwind classes.
-const state = computed(() => open.value ? "expanded" : "collapsed")
+const state = computed(() => (open.value ? 'expanded' : 'collapsed'))
 
 provideSidebarContext({
   state,

client/src/components/ui/sidebar/SidebarRail.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-import { useSidebar } from "./utils"
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { useSidebar } from './utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 
 const { toggleSidebar } = useSidebar()
@@ -17,15 +17,17 @@ const { toggleSidebar } = useSidebar()
     aria-label="Toggle Sidebar"
     :tabindex="-1"
     title="Toggle Sidebar"
-    :class="cn(
-      'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
-      'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
-      '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
-      'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
-      '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
-      '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
-      props.class,
-    )"
+    :class="
+      cn(
+        'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
+        'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
+        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+        'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
+        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+        props.class,
+      )
+    "
     @click="toggleSidebar"
   >
     <slot />

client/src/components/ui/sidebar/SidebarSeparator.vue

@@ -1,19 +1,15 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 import { Separator } from '@/components/ui/separator'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 
 <template>
-  <Separator
-    data-slot="sidebar-separator"
-    data-sidebar="separator"
-    :class="cn('bg-sidebar-border mx-2 w-auto', props.class)"
-  >
+  <Separator data-slot="sidebar-separator" data-sidebar="separator" :class="cn('bg-sidebar-border mx-2 w-auto', props.class)">
     <slot />
   </Separator>
 </template>

client/src/components/ui/sidebar/SidebarTrigger.vue

@@ -1,26 +1,19 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { PanelLeft } from "lucide-vue-next"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from 'vue'
+import { PanelLeft } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
-import { useSidebar } from "./utils"
+import { useSidebar } from './utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 
 const { toggleSidebar } = useSidebar()
 </script>
 
 <template>
-  <Button
-    data-sidebar="trigger"
-    data-slot="sidebar-trigger"
-    variant="ghost"
-    size="icon"
-    :class="cn('h-7 w-7', props.class)"
-    @click="toggleSidebar"
-  >
+  <Button data-sidebar="trigger" data-slot="sidebar-trigger" variant="ghost" size="icon" :class="cn('h-7 w-7', props.class)" @click="toggleSidebar">
     <PanelLeft />
     <span class="sr-only">Toggle Sidebar</span>
   </Button>

client/src/components/ui/sidebar/index.ts

@@ -1,58 +1,58 @@
-import type { VariantProps } from "class-variance-authority"
-import type { HTMLAttributes } from "vue"
-import { cva } from "class-variance-authority"
+import type { VariantProps } from 'class-variance-authority'
+import type { HTMLAttributes } from 'vue'
+import { cva } from 'class-variance-authority'
 
 export interface SidebarProps {
-  side?: "left" | "right"
-  variant?: "sidebar" | "floating" | "inset"
-  collapsible?: "offcanvas" | "icon" | "none"
-  class?: HTMLAttributes["class"]
+  side?: 'left' | 'right'
+  variant?: 'sidebar' | 'floating' | 'inset'
+  collapsible?: 'offcanvas' | 'icon' | 'none'
+  class?: HTMLAttributes['class']
 }
 
-export { default as Sidebar } from "./Sidebar.vue"
-export { default as SidebarContent } from "./SidebarContent.vue"
-export { default as SidebarFooter } from "./SidebarFooter.vue"
-export { default as SidebarGroup } from "./SidebarGroup.vue"
-export { default as SidebarGroupAction } from "./SidebarGroupAction.vue"
-export { default as SidebarGroupContent } from "./SidebarGroupContent.vue"
-export { default as SidebarGroupLabel } from "./SidebarGroupLabel.vue"
-export { default as SidebarHeader } from "./SidebarHeader.vue"
-export { default as SidebarInput } from "./SidebarInput.vue"
-export { default as SidebarInset } from "./SidebarInset.vue"
-export { default as SidebarMenu } from "./SidebarMenu.vue"
-export { default as SidebarMenuAction } from "./SidebarMenuAction.vue"
-export { default as SidebarMenuBadge } from "./SidebarMenuBadge.vue"
-export { default as SidebarMenuButton } from "./SidebarMenuButton.vue"
-export { default as SidebarMenuItem } from "./SidebarMenuItem.vue"
-export { default as SidebarMenuSkeleton } from "./SidebarMenuSkeleton.vue"
-export { default as SidebarMenuSub } from "./SidebarMenuSub.vue"
-export { default as SidebarMenuSubButton } from "./SidebarMenuSubButton.vue"
-export { default as SidebarMenuSubItem } from "./SidebarMenuSubItem.vue"
-export { default as SidebarProvider } from "./SidebarProvider.vue"
-export { default as SidebarRail } from "./SidebarRail.vue"
-export { default as SidebarSeparator } from "./SidebarSeparator.vue"
-export { default as SidebarTrigger } from "./SidebarTrigger.vue"
+export { default as Sidebar } from './Sidebar.vue'
+export { default as SidebarContent } from './SidebarContent.vue'
+export { default as SidebarFooter } from './SidebarFooter.vue'
+export { default as SidebarGroup } from './SidebarGroup.vue'
+export { default as SidebarGroupAction } from './SidebarGroupAction.vue'
+export { default as SidebarGroupContent } from './SidebarGroupContent.vue'
+export { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'
+export { default as SidebarHeader } from './SidebarHeader.vue'
+export { default as SidebarInput } from './SidebarInput.vue'
+export { default as SidebarInset } from './SidebarInset.vue'
+export { default as SidebarMenu } from './SidebarMenu.vue'
+export { default as SidebarMenuAction } from './SidebarMenuAction.vue'
+export { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'
+export { default as SidebarMenuButton } from './SidebarMenuButton.vue'
+export { default as SidebarMenuItem } from './SidebarMenuItem.vue'
+export { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'
+export { default as SidebarMenuSub } from './SidebarMenuSub.vue'
+export { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'
+export { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'
+export { default as SidebarProvider } from './SidebarProvider.vue'
+export { default as SidebarRail } from './SidebarRail.vue'
+export { default as SidebarSeparator } from './SidebarSeparator.vue'
+export { default as SidebarTrigger } from './SidebarTrigger.vue'
 
-export { useSidebar } from "./utils"
+export { useSidebar } from './utils'
 
 export const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
   {
     variants: {
       variant: {
-        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
         outline:
-          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
       },
       size: {
-        default: "h-8 text-sm",
-        sm: "h-7 text-xs",
-        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+        default: 'h-8 text-sm',
+        sm: 'h-7 text-xs',
+        lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
       },
     },
     defaultVariants: {
-      variant: "default",
-      size: "default",
+      variant: 'default',
+      size: 'default',
     },
   },
 )

client/src/components/ui/sidebar/utils.ts

@@ -1,19 +1,19 @@
-import type { ComputedRef, Ref } from "vue"
-import { createContext } from "reka-ui"
+import type { ComputedRef, Ref } from 'vue'
+import { createContext } from 'reka-ui'
 
-export const SIDEBAR_COOKIE_NAME = "sidebar_state"
+export const SIDEBAR_COOKIE_NAME = 'sidebar_state'
 export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
-export const SIDEBAR_WIDTH = "16rem"
-export const SIDEBAR_WIDTH_MOBILE = "18rem"
-export const SIDEBAR_WIDTH_ICON = "3rem"
-export const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+export const SIDEBAR_WIDTH = '16rem'
+export const SIDEBAR_WIDTH_MOBILE = '18rem'
+export const SIDEBAR_WIDTH_ICON = '3rem'
+export const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
 
 export const [useSidebar, provideSidebarContext] = createContext<{
-  state: ComputedRef<"expanded" | "collapsed">
+  state: ComputedRef<'expanded' | 'collapsed'>
   open: Ref<boolean>
   setOpen: (value: boolean) => void
   isMobile: Ref<boolean>
   openMobile: Ref<boolean>
   setOpenMobile: (value: boolean) => void
   toggleSidebar: () => void
-}>("Sidebar")
+}>('Sidebar')

client/src/components/ui/skeleton/Skeleton.vue

@@ -1,17 +1,14 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 
 interface SkeletonProps {
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }
 
 const props = defineProps<SkeletonProps>()
 </script>
 
 <template>
-  <div
-    data-slot="skeleton"
-    :class="cn('animate-pulse rounded-md bg-primary/10', props.class)"
-  />
+  <div data-slot="skeleton" :class="cn('animate-pulse rounded-md bg-primary/10', props.class)" />
 </template>

client/src/components/ui/skeleton/index.ts

@@ -1 +1 @@
-export { default as Skeleton } from "./Skeleton.vue"
+export { default as Skeleton } from './Skeleton.vue'

client/src/components/ui/tooltip/Tooltip.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { TooltipRootEmits, TooltipRootProps } from "reka-ui"
-import { TooltipRoot, useForwardPropsEmits } from "reka-ui"
+import type { TooltipRootEmits, TooltipRootProps } from 'reka-ui'
+import { TooltipRoot, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<TooltipRootProps>()
 const emits = defineEmits<TooltipRootEmits>()
@@ -9,11 +9,7 @@ const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <TooltipRoot
-    v-slot="slotProps"
-    data-slot="tooltip"
-    v-bind="forwarded"
-  >
+  <TooltipRoot v-slot="slotProps" data-slot="tooltip" v-bind="forwarded">
     <slot v-bind="slotProps" />
   </TooltipRoot>
 </template>

client/src/components/ui/tooltip/TooltipContent.vue

@@ -1,21 +1,21 @@
 <script setup lang="ts">
-import type { TooltipContentEmits, TooltipContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { TooltipArrow, TooltipContent, TooltipPortal, useForwardPropsEmits } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { TooltipContentEmits, TooltipContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { TooltipArrow, TooltipContent, TooltipPortal, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@/lib/utils'
 
 defineOptions({
   inheritAttrs: false,
 })
 
-const props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes["class"] }>(), {
+const props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {
   sideOffset: 4,
 })
 
 const emits = defineEmits<TooltipContentEmits>()
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class')
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
@@ -24,7 +24,12 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <TooltipContent
       data-slot="tooltip-content"
       v-bind="{ ...forwarded, ...$attrs }"
-      :class="cn('bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 w-fit rounded-md px-3 py-1.5 text-xs text-balance', props.class)"
+      :class="
+        cn(
+          'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 w-fit rounded-md px-3 py-1.5 text-xs text-balance',
+          props.class,
+        )
+      "
     >
       <slot />
 

client/src/components/ui/tooltip/TooltipProvider.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { TooltipProviderProps } from "reka-ui"
-import { TooltipProvider } from "reka-ui"
+import type { TooltipProviderProps } from 'reka-ui'
+import { TooltipProvider } from 'reka-ui'
 
 const props = withDefaults(defineProps<TooltipProviderProps>(), {
   delayDuration: 0,

client/src/components/ui/tooltip/TooltipTrigger.vue

@@ -1,15 +1,12 @@
 <script setup lang="ts">
-import type { TooltipTriggerProps } from "reka-ui"
-import { TooltipTrigger } from "reka-ui"
+import type { TooltipTriggerProps } from 'reka-ui'
+import { TooltipTrigger } from 'reka-ui'
 
 const props = defineProps<TooltipTriggerProps>()
 </script>
 
 <template>
-  <TooltipTrigger
-    data-slot="tooltip-trigger"
-    v-bind="props"
-  >
+  <TooltipTrigger data-slot="tooltip-trigger" v-bind="props">
     <slot />
   </TooltipTrigger>
 </template>

client/src/components/ui/tooltip/index.ts

@@ -1,4 +1,4 @@
-export { default as Tooltip } from "./Tooltip.vue"
-export { default as TooltipContent } from "./TooltipContent.vue"
-export { default as TooltipProvider } from "./TooltipProvider.vue"
-export { default as TooltipTrigger } from "./TooltipTrigger.vue"
+export { default as Tooltip } from './Tooltip.vue'
+export { default as TooltipContent } from './TooltipContent.vue'
+export { default as TooltipProvider } from './TooltipProvider.vue'
+export { default as TooltipTrigger } from './TooltipTrigger.vue'

client/src/features/admin/RoleFormDrawer.vue

@@ -131,7 +131,8 @@ async function handleSubmit() {
         </div>
 
         <div v-if="role?.isSuperuser" class="rounded-md border border-border bg-muted/40 px-4 py-3 text-sm text-muted-foreground">
-          This is a superuser role. It implicitly has all permissions, including any added in the future. Individual permission assignments are not applicable.
+          This is a superuser role. It implicitly has all permissions, including any added in the future. Individual permission assignments are not
+          applicable.
         </div>
 
         <div v-else class="space-y-2">

client/src/features/admin/RolesPage.vue

@@ -91,7 +91,9 @@ function onSaved() {
               <span v-else class="text-muted-foreground text-xs">Standard</span>
             </td>
             <td class="px-4 py-3">
-              <span v-if="role.isSuperuser" class="inline-flex items-center rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground">All</span>
+              <span v-if="role.isSuperuser" class="inline-flex items-center rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground"
+                >All</span
+              >
               <span v-else class="text-muted-foreground text-sm">{{ role.permissions.length }}</span>
             </td>
             <td class="px-4 py-3">

client/src/features/auth/LoginPage.vue

@@ -1,13 +1,22 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
+import type { OidcPublicConfig } from '@projectx/types'
 import { useAuth } from './composables/useAuth'
+import { useOidc } from './composables/useOidc'
 
 const { login } = useAuth()
+const { getPublicConfig, initiateLogin } = useOidc()
 
 const username = ref('')
 const password = ref('')
 const error = ref<string | null>(null)
 const loading = ref(false)
+const oidcConfig = ref<OidcPublicConfig | null>(null)
+const oidcLoading = ref(false)
+
+onMounted(async () => {
+  oidcConfig.value = await getPublicConfig()
+})
 
 async function handleSubmit() {
   error.value = null
@@ -20,6 +29,17 @@ async function handleSubmit() {
     loading.value = false
   }
 }
+
+async function handleOidcLogin() {
+  error.value = null
+  oidcLoading.value = true
+  try {
+    await initiateLogin()
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : 'OIDC login failed'
+    oidcLoading.value = false
+  }
+}
 </script>
 
 <template>
@@ -62,10 +82,30 @@ async function handleSubmit() {
           :disabled="loading"
           class="w-full rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50 transition-colors"
         >
-          {{ loading ? 'Signing in…' : 'Sign in' }}
+          {{ loading ? 'Signing in...' : 'Sign in' }}
         </button>
       </form>
 
+      <template v-if="oidcConfig?.enabled">
+        <div class="relative my-6">
+          <div class="absolute inset-0 flex items-center">
+            <div class="w-full border-t border-border" />
+          </div>
+          <div class="relative flex justify-center text-xs">
+            <span class="bg-background px-2 text-muted-foreground">or</span>
+          </div>
+        </div>
+
+        <button
+          type="button"
+          :disabled="oidcLoading"
+          class="w-full rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground hover:bg-muted disabled:opacity-50 transition-colors"
+          @click="handleOidcLogin"
+        >
+          {{ oidcLoading ? 'Redirecting...' : `Sign in with ${oidcConfig.providerName || 'SSO'}` }}
+        </button>
+      </template>
+
       <p class="mt-4 text-center text-sm text-muted-foreground">
         <RouterLink to="/forgot-password" class="text-primary hover:underline">Forgot password?</RouterLink>
       </p>

client/src/features/auth/OidcCallbackPage.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import type { AuthResponse } from '@projectx/types'
+import { setAccessToken } from '@/lib/api'
+import { useAuth } from './composables/useAuth'
+import { useOidc } from './composables/useOidc'
+
+const router = useRouter()
+const { user } = useAuth()
+const { exchangeCode } = useOidc()
+const error = ref<string | null>(null)
+
+onMounted(async () => {
+  const params = new URLSearchParams(window.location.search)
+  const code = params.get('code')
+  const state = params.get('state')
+  const errorParam = params.get('error')
+
+  if (errorParam) {
+    error.value = params.get('error_description') ?? 'OIDC provider returned an error'
+    return
+  }
+
+  if (!code || !state) {
+    error.value = 'Missing code or state parameter'
+    return
+  }
+
+  try {
+    const data: AuthResponse = await exchangeCode(code, state)
+    setAccessToken(data.accessToken)
+    user.value = data.user
+
+    const redirect = sessionStorage.getItem('oidc_redirect') ?? '/'
+    sessionStorage.removeItem('oidc_redirect')
+    router.replace(redirect)
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : 'OIDC login failed'
+  }
+})
+</script>
+
+<template>
+  <div class="min-h-screen flex items-center justify-center bg-background px-4">
+    <div class="w-full max-w-sm text-center">
+      <h1 class="text-2xl font-serif font-semibold text-foreground mb-6">project<span class="text-primary">x</span></h1>
+
+      <div v-if="!error" class="space-y-3">
+        <div class="flex justify-center">
+          <div class="w-6 h-6 border-2 border-primary border-t-transparent rounded-full animate-spin" />
+        </div>
+        <p class="text-sm text-muted-foreground">Completing sign in...</p>
+      </div>
+
+      <div v-else class="space-y-4">
+        <p class="text-sm text-destructive">{{ error }}</p>
+        <RouterLink to="/login" class="text-sm text-primary hover:underline">Back to login</RouterLink>
+      </div>
+    </div>
+  </div>
+</template>

client/src/features/auth/composables/useAuth.ts

@@ -64,8 +64,19 @@ export function useAuth() {
   }
 
   async function logout(): Promise<void> {
-    await fetch('/api/auth/logout', { method: 'POST', credentials: 'include' }).catch(() => {})
-    clearAuth()
+    try {
+      const res = await fetch('/api/auth/logout', { method: 'POST', credentials: 'include' })
+      clearAuth()
+      if (res.ok) {
+        const data = await res.json().catch(() => ({}))
+        if (data?.logoutUrl) {
+          window.location.href = data.logoutUrl
+          return
+        }
+      }
+    } catch {
+      clearAuth()
+    }
     router.push('/login')
   }
 

client/src/features/auth/composables/useOidc.ts

@@ -0,0 +1,111 @@
+import type { OidcPublicConfig } from '@projectx/types'
+import { api } from '@/lib/api'
+
+async function generatePkce(): Promise<{ codeVerifier: string; codeChallenge: string }> {
+  const array = new Uint8Array(32)
+  crypto.getRandomValues(array)
+  const codeVerifier = btoa(String.fromCharCode(...array))
+    .replace(/\+/g, '-')
+    .replace(/\//g, '_')
+    .replace(/=/g, '')
+
+  const encoder = new TextEncoder()
+  const data = encoder.encode(codeVerifier)
+  const digest = await crypto.subtle.digest('SHA-256', data)
+  const codeChallenge = btoa(String.fromCharCode(...new Uint8Array(digest)))
+    .replace(/\+/g, '-')
+    .replace(/\//g, '_')
+    .replace(/=/g, '')
+
+  return { codeVerifier, codeChallenge }
+}
+
+function generateNonce(): string {
+  const array = new Uint8Array(16)
+  crypto.getRandomValues(array)
+  return btoa(String.fromCharCode(...array))
+    .replace(/\+/g, '-')
+    .replace(/\//g, '_')
+    .replace(/=/g, '')
+}
+
+export function useOidc() {
+  async function getPublicConfig(): Promise<OidcPublicConfig | null> {
+    try {
+      const res = await fetch('/api/app-settings/oidc/public')
+      if (!res.ok) return null
+      return res.json()
+    } catch {
+      return null
+    }
+  }
+
+  async function initiateLogin(): Promise<void> {
+    const config = await getPublicConfig()
+    if (!config?.enabled || !config.issuerUri) {
+      throw new Error('OIDC is not configured')
+    }
+
+    // Fetch discovery document on the client side
+    let discRes: Response
+    try {
+      discRes = await fetch(`${config.issuerUri.replace(/\/$/, '')}/.well-known/openid-configuration`)
+    } catch {
+      throw new Error('Cannot reach OIDC provider - check the Issuer URI in settings')
+    }
+    if (!discRes.ok) throw new Error(`OIDC provider returned HTTP ${discRes.status} - check the Issuer URI in settings`)
+    const disc = await discRes.json()
+
+    const { codeVerifier, codeChallenge } = await generatePkce()
+    const nonce = generateNonce()
+
+    // Get server-side state (CSRF protection)
+    const stateRes = await fetch('/api/auth/oidc/state', { method: 'POST', credentials: 'include' })
+    if (!stateRes.ok) throw new Error('Failed to generate state')
+    const { state } = await stateRes.json()
+
+    // Store PKCE data for the callback
+    sessionStorage.setItem(`oidc_pkce_${state}`, JSON.stringify({ codeVerifier, nonce, state }))
+
+    const redirectUri = `${window.location.origin}/oauth2-callback`
+
+    const params = new URLSearchParams({
+      response_type: 'code',
+      client_id: config.clientId,
+      redirect_uri: redirectUri,
+      scope: config.scopes,
+      code_challenge: codeChallenge,
+      code_challenge_method: 'S256',
+      state,
+      nonce,
+    })
+
+    window.location.href = `${disc.authorization_endpoint}?${params.toString()}`
+  }
+
+  async function exchangeCode(code: string, state: string) {
+    const pkceJson = sessionStorage.getItem(`oidc_pkce_${state}`)
+    if (!pkceJson) throw new Error('No PKCE data found for this state')
+
+    const { codeVerifier, nonce } = JSON.parse(pkceJson) as { codeVerifier: string; nonce: string; state: string }
+    sessionStorage.removeItem(`oidc_pkce_${state}`)
+
+    const redirectUri = `${window.location.origin}/oauth2-callback`
+
+    const res = await fetch('/api/auth/oidc/callback', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      credentials: 'include',
+      body: JSON.stringify({ code, codeVerifier, redirectUri, nonce, state }),
+    })
+
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({}))
+      throw new Error((err as any).message ?? 'OIDC login failed')
+    }
+
+    return res.json()
+  }
+
+  return { getPublicConfig, initiateLogin, exchangeCode }
+}

client/src/features/settings/OidcSettings.vue

@@ -0,0 +1,248 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue'
+import { api } from '@/lib/api'
+
+interface OidcConfig {
+  enabled: boolean
+  providerName: string
+  issuerUri: string
+  clientId: string
+  clientSecret: string
+  scopes: string
+  claimMapping: { username: string; name: string; email: string; groups: string }
+  autoProvision: { enabled: boolean; allowLocalLinking: boolean; defaultRoleId: number | null }
+}
+
+const loading = ref(true)
+const saving = ref(false)
+const testing = ref(false)
+const saveError = ref<string | null>(null)
+const saveSuccess = ref(false)
+const testResult = ref<{ success: boolean; message: string } | null>(null)
+
+const form = reactive<OidcConfig>({
+  enabled: false,
+  providerName: '',
+  issuerUri: '',
+  clientId: '',
+  clientSecret: '',
+  scopes: 'openid profile email',
+  claimMapping: { username: 'preferred_username', name: 'name', email: 'email', groups: 'groups' },
+  autoProvision: { enabled: false, allowLocalLinking: true, defaultRoleId: null },
+})
+
+onMounted(async () => {
+  try {
+    const res = await api('/api/app-settings/oidc')
+    if (res.ok) {
+      const data = await res.json()
+      Object.assign(form, data)
+      form.clientSecret = ''
+    }
+  } finally {
+    loading.value = false
+  }
+})
+
+async function save() {
+  saveError.value = null
+  saveSuccess.value = false
+  saving.value = true
+  try {
+    const body: Partial<OidcConfig> = { ...form }
+    if (!body.clientSecret) delete body.clientSecret
+
+    const res = await api('/api/app-settings/oidc', {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body),
+    })
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({}))
+      throw new Error((err as any).message ?? 'Failed to save')
+    }
+    saveSuccess.value = true
+    setTimeout(() => { saveSuccess.value = false }, 3000)
+  } catch (err) {
+    saveError.value = err instanceof Error ? err.message : 'Failed to save settings'
+  } finally {
+    saving.value = false
+  }
+}
+
+async function testConnection() {
+  testResult.value = null
+  testing.value = true
+  try {
+    const res = await api(`/api/app-settings/oidc/test?issuerUri=${encodeURIComponent(form.issuerUri)}`, { method: 'POST' })
+    const data = await res.json()
+    if (data.success) {
+      testResult.value = { success: true, message: `Connected - issuer: ${data.issuer}` }
+    } else {
+      testResult.value = { success: false, message: data.error ?? 'Connection failed' }
+    }
+  } catch {
+    testResult.value = { success: false, message: 'Request failed' }
+  } finally {
+    testing.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="px-5 py-6 sm:px-10 sm:py-8 max-w-3xl mx-auto">
+
+    <div class="mb-8">
+      <h2 class="font-serif font-semibold text-foreground text-2xl tracking-tight">OIDC / SSO</h2>
+      <p class="mt-1 text-sm text-muted-foreground">Configure an OpenID Connect provider for single sign-on.</p>
+    </div>
+
+    <div v-if="loading" class="text-sm text-muted-foreground">Loading...</div>
+
+    <form v-else class="space-y-6" @submit.prevent="save">
+
+      <!-- Enable -->
+      <div>
+        <p class="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-3">Status</p>
+        <div class="border border-border rounded-lg overflow-hidden divide-y divide-border">
+          <div class="flex items-center justify-between px-5 py-4 bg-card">
+            <div>
+              <p class="text-sm font-medium text-foreground">Enable OIDC</p>
+              <p class="text-xs text-muted-foreground mt-0.5">Show SSO login button and allow OIDC authentication.</p>
+            </div>
+            <button
+              type="button"
+              role="switch"
+              :aria-checked="form.enabled"
+              class="relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors"
+              :class="form.enabled ? 'bg-primary' : 'bg-input'"
+              @click="form.enabled = !form.enabled"
+            >
+              <span class="inline-block h-4 w-4 rounded-full bg-white shadow-sm transition-transform" :class="form.enabled ? 'translate-x-4' : 'translate-x-0.5'" />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Provider -->
+      <div>
+        <p class="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-3">Provider</p>
+        <div class="border border-border rounded-lg overflow-hidden divide-y divide-border">
+          <div class="flex items-center justify-between gap-8 px-5 py-4 bg-card">
+            <div class="shrink-0">
+              <p class="text-sm font-medium text-foreground">Provider Name</p>
+              <p class="text-xs text-muted-foreground mt-0.5">Shown on the login button.</p>
+            </div>
+            <input v-model="form.providerName" type="text" placeholder="Authentik"
+              class="w-52 rounded-md border border-input bg-background px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50" />
+          </div>
+          <div class="flex items-start justify-between gap-8 px-5 py-4 bg-card">
+            <div class="shrink-0 pt-0.5">
+              <p class="text-sm font-medium text-foreground">Issuer URI</p>
+              <p class="text-xs text-muted-foreground mt-0.5">The provider's base URL.</p>
+            </div>
+            <div class="flex flex-col items-end gap-2">
+              <div class="flex items-center gap-2">
+                <input v-model="form.issuerUri" type="url" placeholder="https://accounts.example.com"
+                  class="w-64 rounded-md border border-input bg-background px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50" />
+                <button type="button" :disabled="testing || !form.issuerUri"
+                  class="rounded-md border border-input bg-background px-3 py-1.5 text-xs font-medium hover:bg-muted disabled:opacity-50 transition-colors shrink-0"
+                  @click="testConnection">
+                  {{ testing ? 'Testing...' : 'Test' }}
+                </button>
+              </div>
+              <div v-if="testResult" class="text-xs px-3 py-1.5 rounded-md border"
+                :class="testResult.success ? 'border-green-500/30 text-green-600 bg-green-500/5' : 'border-destructive/30 text-destructive bg-destructive/5'">
+                {{ testResult.message }}
+              </div>
+            </div>
+          </div>
+          <div class="flex items-center justify-between gap-8 px-5 py-4 bg-card">
+            <p class="text-sm font-medium text-foreground shrink-0">Client ID</p>
+            <input v-model="form.clientId" type="text"
+              class="w-52 rounded-md border border-input bg-background px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50" />
+          </div>
+          <div class="flex items-center justify-between gap-8 px-5 py-4 bg-card">
+            <p class="text-sm font-medium text-foreground shrink-0">Client Secret</p>
+            <input v-model="form.clientSecret" type="password" placeholder="Leave blank to keep existing" autocomplete="new-password"
+              class="w-52 rounded-md border border-input bg-background px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50" />
+          </div>
+          <div class="flex items-center justify-between gap-8 px-5 py-4 bg-card">
+            <p class="text-sm font-medium text-foreground shrink-0">Scopes</p>
+            <input v-model="form.scopes" type="text"
+              class="w-52 rounded-md border border-input bg-background px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50" />
+          </div>
+        </div>
+      </div>
+
+      <!-- Claim mapping -->
+      <div>
+        <p class="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-3">Claim Mapping</p>
+        <div class="border border-border rounded-lg overflow-hidden divide-y divide-border">
+          <div class="flex items-center justify-between gap-8 px-5 py-4 bg-card">
+            <p class="text-sm font-medium text-foreground shrink-0">Username claim</p>
+            <input v-model="form.claimMapping.username" type="text"
+              class="w-52 rounded-md border border-input bg-background px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50" />
+          </div>
+          <div class="flex items-center justify-between gap-8 px-5 py-4 bg-card">
+            <p class="text-sm font-medium text-foreground shrink-0">Name claim</p>
+            <input v-model="form.claimMapping.name" type="text"
+              class="w-52 rounded-md border border-input bg-background px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50" />
+          </div>
+          <div class="flex items-center justify-between gap-8 px-5 py-4 bg-card">
+            <p class="text-sm font-medium text-foreground shrink-0">Email claim</p>
+            <input v-model="form.claimMapping.email" type="text"
+              class="w-52 rounded-md border border-input bg-background px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50" />
+          </div>
+          <div class="flex items-center justify-between gap-8 px-5 py-4 bg-card">
+            <p class="text-sm font-medium text-foreground shrink-0">Groups claim</p>
+            <input v-model="form.claimMapping.groups" type="text"
+              class="w-52 rounded-md border border-input bg-background px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50" />
+          </div>
+        </div>
+      </div>
+
+      <!-- Auto-provisioning -->
+      <div>
+        <p class="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-3">Auto-Provisioning</p>
+        <div class="border border-border rounded-lg overflow-hidden divide-y divide-border">
+          <div class="flex items-center justify-between px-5 py-4 bg-card">
+            <div>
+              <p class="text-sm font-medium text-foreground">Auto-provision users</p>
+              <p class="text-xs text-muted-foreground mt-0.5">Create accounts on first OIDC login if user does not exist.</p>
+            </div>
+            <button type="button" role="switch" :aria-checked="form.autoProvision.enabled"
+              class="relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors"
+              :class="form.autoProvision.enabled ? 'bg-primary' : 'bg-input'"
+              @click="form.autoProvision.enabled = !form.autoProvision.enabled">
+              <span class="inline-block h-4 w-4 rounded-full bg-white shadow-sm transition-transform" :class="form.autoProvision.enabled ? 'translate-x-4' : 'translate-x-0.5'" />
+            </button>
+          </div>
+          <div class="flex items-center justify-between px-5 py-4 bg-card">
+            <div>
+              <p class="text-sm font-medium text-foreground">Allow local account linking</p>
+              <p class="text-xs text-muted-foreground mt-0.5">Link OIDC identity to an existing local account by username match.</p>
+            </div>
+            <button type="button" role="switch" :aria-checked="form.autoProvision.allowLocalLinking"
+              class="relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors"
+              :class="form.autoProvision.allowLocalLinking ? 'bg-primary' : 'bg-input'"
+              @click="form.autoProvision.allowLocalLinking = !form.autoProvision.allowLocalLinking">
+              <span class="inline-block h-4 w-4 rounded-full bg-white shadow-sm transition-transform" :class="form.autoProvision.allowLocalLinking ? 'translate-x-4' : 'translate-x-0.5'" />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Save -->
+      <div class="flex items-center gap-3">
+        <button type="submit" :disabled="saving"
+          class="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50 transition-colors">
+          {{ saving ? 'Saving...' : 'Save changes' }}
+        </button>
+        <p v-if="saveSuccess" class="text-sm text-green-600">Saved.</p>
+        <p v-if="saveError" class="text-sm text-destructive">{{ saveError }}</p>
+      </div>
+
+    </form>
+  </div>
+</template>

client/src/features/settings/SettingsDrawer.vue

@@ -14,9 +14,11 @@ import {
   Users,
   ShieldCheck,
   KeyRound,
+  LogIn,
 } from 'lucide-vue-next'
 import { useSettingsDrawer } from '@/composables/useSettingsDrawer'
 import { usePermissions } from '@/features/auth/composables/usePermissions'
+import { useThemeStore, BACKGROUND_OPTIONS } from '@/stores/theme'
 import LibrariesSettings from './LibrariesSettings.vue'
 import ScannerSettings from './ScannerSettings.vue'
 import AppearanceSettings from './AppearanceSettings.vue'
@@ -27,11 +29,14 @@ import AboutSettings from './AboutSettings.vue'
 import UsersPage from '@/features/admin/UsersPage.vue'
 import RolesPage from '@/features/admin/RolesPage.vue'
 import PermissionsPage from '@/features/admin/PermissionsPage.vue'
+import OidcSettings from './OidcSettings.vue'
 
 const { isOpen, close } = useSettingsDrawer()
 const { isSuperuser, hasPermission, userPermissions } = usePermissions()
+const themeStore = useThemeStore()
+const bgClass = computed(() => BACKGROUND_OPTIONS.find((o) => o.id === themeStore.background)?.cssClass ?? '')
 
-type SectionId = 'libraries' | 'scanner' | 'appearance' | 'ebook' | 'pdf' | 'comics' | 'about' | 'users' | 'roles' | 'permissions'
+type SectionId = 'libraries' | 'scanner' | 'appearance' | 'ebook' | 'pdf' | 'comics' | 'about' | 'users' | 'roles' | 'permissions' | 'oidc'
 
 const navGroups = computed(() => {
   const groups = [
@@ -67,6 +72,9 @@ const navGroups = computed(() => {
     adminItems.push({ id: 'roles', label: 'Roles', icon: ShieldCheck, component: RolesPage })
     adminItems.push({ id: 'permissions', label: 'Permissions', icon: KeyRound, component: PermissionsPage })
   }
+  if (su || perms.includes('manage_app_settings')) {
+    adminItems.push({ id: 'oidc', label: 'OIDC / SSO', icon: LogIn, component: OidcSettings })
+  }
   if (adminItems.length) {
     groups.push({ label: 'Administration', items: adminItems })
   }
@@ -159,7 +167,7 @@ watch(isOpen, (v) => {
                   </button>
                   <span class="flex-1 text-sm font-medium text-foreground text-center pr-16">{{ activeLabel }}</span>
                 </div>
-                <div class="flex-1 overflow-y-auto">
+                <div class="flex-1 overflow-y-auto" :class="bgClass">
                   <component :is="ActiveComponent" />
                 </div>
               </div>
@@ -203,7 +211,7 @@ watch(isOpen, (v) => {
               </div>
             </nav>
 
-            <main class="hidden md:block flex-1 overflow-y-auto">
+            <main class="hidden md:block flex-1 overflow-y-auto" :class="bgClass">
               <component :is="ActiveComponent" />
             </main>
           </div>

client/src/router/index.ts

@@ -33,6 +33,12 @@ const router = createRouter({
       component: () => import('@/features/auth/ResetPasswordPage.vue'),
       meta: { public: true },
     },
+    {
+      path: '/oauth2-callback',
+      name: 'oidc-callback',
+      component: () => import('@/features/auth/OidcCallbackPage.vue'),
+      meta: { public: true },
+    },
   ],
 })
 

packages/types/src/auth.ts

@@ -22,10 +22,20 @@ export interface AuthUser {
   active: boolean
   isDefaultPassword: boolean
   settings: Record<string, unknown>
+  avatarUrl?: string | null
+  provisioningMethod: 'local' | 'oidc'
   roles: Role[]
   permissions: string[] // flat list; '*' means superuser
 }
 
+export interface OidcPublicConfig {
+  enabled: boolean
+  providerName: string
+  issuerUri: string
+  clientId: string
+  scopes: string
+}
+
 export interface AuthResponse {
   accessToken: string
   user: AuthUser

server/.env.example

@@ -13,6 +13,9 @@ JWT_REFRESH_EXPIRES_IN=7d
 # Storage
 BOOKS_PATH=/books
 
+# OIDC (optional — configure via admin settings UI; these are just for reference)
+# OIDC config is stored in the database (app_settings table, key: oidc_config)
+
 # SMTP (optional — if unset, self-service password reset is disabled)
 SMTP_HOST=
 SMTP_PORT=587

server/package.json

@@ -9,7 +9,7 @@
     "build": "nest build",
     "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
     "start": "nest start",
-    "start:dev": "nest start --watch",
+    "start:dev": "sh -c 'export $(grep -v \"^#\" .env | xargs) 2>/dev/null; exec nest start --watch'",
     "start:debug": "nest start --debug --watch",
     "start:prod": "node dist/main",
     "db:generate": "drizzle-kit generate --name",
@@ -26,6 +26,7 @@
   "dependencies": {
     "7z-wasm": "^1.2.0",
     "@fastify/cookie": "^11.0.2",
+    "@fastify/formbody": "^8.0.2",
     "@fastify/rate-limit": "^10.3.0",
     "@fastify/static": "^9.0.0",
     "@nestjs/common": "^11.0.1",
@@ -43,6 +44,7 @@
     "drizzle-kit": "^0.31.8",
     "drizzle-orm": "^0.45.1",
     "fast-xml-parser": "^5.3.3",
+    "jose": "^6.1.3",
     "node-unrar-js": "^2.0.2",
     "nodemailer": "^7.0.12",
     "passport": "^0.7.0",

server/src/common/filters/http-exception.filter.ts

@@ -12,7 +12,8 @@ export class GlobalExceptionFilter implements ExceptionFilter {
 
     const status = exception instanceof HttpException ? exception.getStatus() : HttpStatus.INTERNAL_SERVER_ERROR;
 
-    const message = exception instanceof HttpException ? exception.getResponse() : 'Internal server error';
+    const raw = exception instanceof HttpException ? exception.getResponse() : 'Internal server error';
+    const message = typeof raw === 'string' ? raw : ((raw as any).message ?? 'An error occurred');
 
     if (status === HttpStatus.INTERNAL_SERVER_ERROR) {
       this.logger.error(exception);

server/src/common/guards/permission.guard.ts

@@ -1,6 +1,7 @@
 import { CanActivate, ExecutionContext, ForbiddenException, Injectable } from '@nestjs/common';
 import { Reflector } from '@nestjs/core';
 
+import { IS_PUBLIC_KEY } from '../decorators/public.decorator';
 import { PERMISSION_KEY } from '../decorators/require-permission.decorator';
 import { PermissionService } from '../services/permission.service';
 import { RequestUser } from '../types/request-user';
@@ -13,6 +14,9 @@ export class PermissionGuard implements CanActivate {
   ) {}
 
   canActivate(context: ExecutionContext): boolean {
+    const isPublic = this.reflector.getAllAndOverride<boolean>(IS_PUBLIC_KEY, [context.getHandler(), context.getClass()]);
+    if (isPublic) return true;
+
     const required = this.reflector.getAllAndOverride<string | undefined>(PERMISSION_KEY, [context.getHandler(), context.getClass()]);
     if (!required) return true;
 

server/src/common/types/request-user.ts

@@ -21,5 +21,7 @@ export interface RequestUser {
   isDefaultPassword: boolean;
   tokenVersion: number;
   settings: Record<string, unknown>;
+  avatarUrl: string | null;
+  provisioningMethod: string;
   roles: RequestUserRole[];
 }

server/src/db/migrations/0000_add_oidc_schema.sql

@@ -75,6 +75,10 @@ CREATE TABLE "users" (
 	"is_default_password" boolean DEFAULT false NOT NULL,
 	"token_version" integer DEFAULT 1 NOT NULL,
 	"settings" jsonb DEFAULT '{}'::jsonb NOT NULL,
+	"oidc_subject" text,
+	"oidc_issuer" text,
+	"avatar_url" text,
+	"provisioning_method" varchar(20) DEFAULT 'local' NOT NULL,
 	"created_at" timestamp DEFAULT now() NOT NULL,
 	"updated_at" timestamp DEFAULT now() NOT NULL,
 	CONSTRAINT "users_username_unique" UNIQUE("username"),
@@ -211,6 +215,25 @@ CREATE TABLE "reading_progress" (
 	CONSTRAINT "reading_progress_book_file_id_user_id_pk" PRIMARY KEY("book_file_id","user_id")
 );
 --> statement-breakpoint
+CREATE TABLE "oidc_group_mappings" (
+	"id" serial PRIMARY KEY NOT NULL,
+	"oidc_group_claim" text NOT NULL,
+	"role_id" integer,
+	"created_at" timestamp DEFAULT now() NOT NULL,
+	CONSTRAINT "oidc_group_mappings_oidc_group_claim_unique" UNIQUE("oidc_group_claim")
+);
+--> statement-breakpoint
+CREATE TABLE "oidc_sessions" (
+	"id" serial PRIMARY KEY NOT NULL,
+	"user_id" integer NOT NULL,
+	"oidc_subject" text NOT NULL,
+	"oidc_issuer" text NOT NULL,
+	"oidc_session_id" text,
+	"id_token_hint" text,
+	"revoked" boolean DEFAULT false NOT NULL,
+	"created_at" timestamp DEFAULT now() NOT NULL
+);
+--> statement-breakpoint
 ALTER TABLE "password_reset_tokens" ADD CONSTRAINT "password_reset_tokens_user_id_users_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."users"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
 ALTER TABLE "refresh_tokens" ADD CONSTRAINT "refresh_tokens_user_id_users_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."users"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
 ALTER TABLE "role_permissions" ADD CONSTRAINT "role_permissions_role_id_roles_id_fk" FOREIGN KEY ("role_id") REFERENCES "public"."roles"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
@@ -236,8 +259,13 @@ ALTER TABLE "bookmarks" ADD CONSTRAINT "bookmarks_user_id_users_id_fk" FOREIGN K
 ALTER TABLE "bookmarks" ADD CONSTRAINT "bookmarks_book_id_books_id_fk" FOREIGN KEY ("book_id") REFERENCES "public"."books"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
 ALTER TABLE "reading_progress" ADD CONSTRAINT "reading_progress_book_file_id_book_files_id_fk" FOREIGN KEY ("book_file_id") REFERENCES "public"."book_files"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
 ALTER TABLE "reading_progress" ADD CONSTRAINT "reading_progress_user_id_users_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."users"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "oidc_group_mappings" ADD CONSTRAINT "oidc_group_mappings_role_id_roles_id_fk" FOREIGN KEY ("role_id") REFERENCES "public"."roles"("id") ON DELETE set null ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "oidc_sessions" ADD CONSTRAINT "oidc_sessions_user_id_users_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."users"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
 CREATE INDEX "password_reset_tokens_user_id_idx" ON "password_reset_tokens" USING btree ("user_id");--> statement-breakpoint
 CREATE INDEX "refresh_tokens_user_id_idx" ON "refresh_tokens" USING btree ("user_id");--> statement-breakpoint
 CREATE INDEX "annotations_user_id_idx" ON "annotations" USING btree ("user_id");--> statement-breakpoint
 CREATE INDEX "bookmarks_user_id_idx" ON "bookmarks" USING btree ("user_id");--> statement-breakpoint
-CREATE INDEX "reading_progress_user_id_idx" ON "reading_progress" USING btree ("user_id");
+CREATE INDEX "reading_progress_user_id_idx" ON "reading_progress" USING btree ("user_id");--> statement-breakpoint
+CREATE INDEX "oidc_sessions_user_id_idx" ON "oidc_sessions" USING btree ("user_id");--> statement-breakpoint
+CREATE INDEX "oidc_sessions_subject_issuer_idx" ON "oidc_sessions" USING btree ("oidc_subject","oidc_issuer");--> statement-breakpoint
+CREATE INDEX "oidc_sessions_sid_idx" ON "oidc_sessions" USING btree ("oidc_session_id");

server/src/db/migrations/meta/0000_snapshot.json

@@ -1,5 +1,5 @@
 {
-  "id": "746052d2-4cc0-4eb3-83bc-4c488e8c6506",
+  "id": "8b1e1a78-207d-4b60-8237-1d13069c26e0",
   "prevId": "00000000-0000-0000-0000-000000000000",
   "version": "7",
   "dialect": "postgresql",
@@ -589,6 +589,31 @@
           "notNull": true,
           "default": "'{}'::jsonb"
         },
+        "oidc_subject": {
+          "name": "oidc_subject",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "oidc_issuer": {
+          "name": "oidc_issuer",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "avatar_url": {
+          "name": "avatar_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "provisioning_method": {
+          "name": "provisioning_method",
+          "type": "varchar(20)",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'local'"
+        },
         "created_at": {
           "name": "created_at",
           "type": "timestamp",
@@ -1653,6 +1678,195 @@
       "policies": {},
       "checkConstraints": {},
       "isRLSEnabled": false
+    },
+    "public.oidc_group_mappings": {
+      "name": "oidc_group_mappings",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "serial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "oidc_group_claim": {
+          "name": "oidc_group_claim",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "role_id": {
+          "name": "role_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "oidc_group_mappings_role_id_roles_id_fk": {
+          "name": "oidc_group_mappings_role_id_roles_id_fk",
+          "tableFrom": "oidc_group_mappings",
+          "tableTo": "roles",
+          "columnsFrom": [
+            "role_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "oidc_group_mappings_oidc_group_claim_unique": {
+          "name": "oidc_group_mappings_oidc_group_claim_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "oidc_group_claim"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.oidc_sessions": {
+      "name": "oidc_sessions",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "serial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "oidc_subject": {
+          "name": "oidc_subject",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "oidc_issuer": {
+          "name": "oidc_issuer",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "oidc_session_id": {
+          "name": "oidc_session_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "id_token_hint": {
+          "name": "id_token_hint",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "revoked": {
+          "name": "revoked",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "oidc_sessions_user_id_idx": {
+          "name": "oidc_sessions_user_id_idx",
+          "columns": [
+            {
+              "expression": "user_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "oidc_sessions_subject_issuer_idx": {
+          "name": "oidc_sessions_subject_issuer_idx",
+          "columns": [
+            {
+              "expression": "oidc_subject",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "oidc_issuer",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "oidc_sessions_sid_idx": {
+          "name": "oidc_sessions_sid_idx",
+          "columns": [
+            {
+              "expression": "oidc_session_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "oidc_sessions_user_id_users_id_fk": {
+          "name": "oidc_sessions_user_id_users_id_fk",
+          "tableFrom": "oidc_sessions",
+          "tableTo": "users",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
     }
   },
   "enums": {

server/src/db/migrations/meta/_journal.json

@@ -5,8 +5,8 @@
     {
       "idx": 0,
       "version": "7",
-      "when": 1768298523076,
-      "tag": "0000_init_schema",
+      "when": 1768360764570,
+      "tag": "0000_add_oidc_schema",
       "breakpoints": true
     }
   ]

server/src/db/schema/auth.ts

@@ -12,6 +12,10 @@ export const users = pgTable('users', {
   isDefaultPassword: boolean('is_default_password').notNull().default(false),
   tokenVersion: integer('token_version').notNull().default(1),
   settings: jsonb('settings').notNull().default({}),
+  oidcSubject: text('oidc_subject'),
+  oidcIssuer: text('oidc_issuer'),
+  avatarUrl: text('avatar_url'),
+  provisioningMethod: varchar('provisioning_method', { length: 20 }).notNull().default('local'),
   createdAt: timestamp('created_at').notNull().defaultNow(),
   updatedAt: timestamp('updated_at')
     .notNull()

server/src/db/schema/index.ts

@@ -4,3 +4,4 @@ export * from './books';
 export * from './metadata';
 export * from './scanner';
 export * from './reader';
+export * from './oidc';

server/src/db/schema/oidc.ts

@@ -0,0 +1,31 @@
+import { boolean, index, integer, pgTable, serial, text, timestamp } from 'drizzle-orm/pg-core';
+
+import { roles, users } from './auth';
+
+export const oidcSessions = pgTable(
+  'oidc_sessions',
+  {
+    id: serial('id').primaryKey(),
+    userId: integer('user_id')
+      .notNull()
+      .references(() => users.id, { onDelete: 'cascade' }),
+    oidcSubject: text('oidc_subject').notNull(),
+    oidcIssuer: text('oidc_issuer').notNull(),
+    oidcSessionId: text('oidc_session_id'),
+    idTokenHint: text('id_token_hint'),
+    revoked: boolean('revoked').notNull().default(false),
+    createdAt: timestamp('created_at').notNull().defaultNow(),
+  },
+  (t) => [
+    index('oidc_sessions_user_id_idx').on(t.userId),
+    index('oidc_sessions_subject_issuer_idx').on(t.oidcSubject, t.oidcIssuer),
+    index('oidc_sessions_sid_idx').on(t.oidcSessionId),
+  ],
+);
+
+export const oidcGroupMappings = pgTable('oidc_group_mappings', {
+  id: serial('id').primaryKey(),
+  oidcGroupClaim: text('oidc_group_claim').notNull().unique(),
+  roleId: integer('role_id').references(() => roles.id, { onDelete: 'set null' }),
+  createdAt: timestamp('created_at').notNull().defaultNow(),
+});

server/src/db/schema/reader.ts

@@ -1,14 +1,4 @@
-import {
-  index,
-  integer,
-  pgTable,
-  primaryKey,
-  real,
-  serial,
-  text,
-  timestamp,
-  varchar,
-} from 'drizzle-orm/pg-core';
+import { index, integer, pgTable, primaryKey, real, serial, text, timestamp, varchar } from 'drizzle-orm/pg-core';
 
 import { bookFiles, books } from './books';
 import { users } from './auth';
@@ -29,10 +19,7 @@ export const readingProgress = pgTable(
     pageNumber: integer('page_number'),
     updatedAt: timestamp('updated_at').defaultNow().notNull(),
   },
-  (t) => [
-    primaryKey({ columns: [t.bookFileId, t.userId] }),
-    index('reading_progress_user_id_idx').on(t.userId),
-  ],
+  (t) => [primaryKey({ columns: [t.bookFileId, t.userId] }), index('reading_progress_user_id_idx').on(t.userId)],
 );
 
 export type ReadingProgress = typeof readingProgress.$inferSelect;

server/src/modules/app-settings/app-settings.controller.ts

@@ -1,8 +1,10 @@
-import { Body, Controller, Get, HttpCode, HttpStatus, Param, Patch } from '@nestjs/common';
+import { Body, Controller, Get, HttpCode, HttpStatus, Param, Patch, Post, Put, Query } from '@nestjs/common';
 
+import { Public } from '../../common/decorators/public.decorator';
 import { RequirePermission } from '../../common/decorators/require-permission.decorator';
 import { AppSettingsService } from './app-settings.service';
 import { UpdateAppSettingDto } from './dto/update-app-setting.dto';
+import { UpdateOidcConfigDto } from './dto/update-oidc-config.dto';
 
 @Controller('app-settings')
 @RequirePermission('manage_app_settings')
@@ -19,4 +21,46 @@ export class AppSettingsController {
   update(@Param('key') key: string, @Body() dto: UpdateAppSettingDto) {
     return this.appSettingsService.update(key, dto.value);
   }
+
+  @Public()
+  @Get('oidc/public')
+  async getOidcPublicConfig() {
+    const config = await this.appSettingsService.getOidcConfig();
+    return {
+      enabled: config.enabled,
+      providerName: config.providerName,
+      issuerUri: config.issuerUri,
+      clientId: config.clientId,
+      scopes: config.scopes,
+    };
+  }
+
+  @Get('oidc')
+  async getOidcConfig() {
+    const config = await this.appSettingsService.getOidcConfig();
+    return { ...config, clientSecret: config.clientSecret ? '***' : '' };
+  }
+
+  @Put('oidc')
+  updateOidcConfig(@Body() dto: UpdateOidcConfigDto) {
+    return this.appSettingsService.updateOidcConfig(dto);
+  }
+
+  @Post('oidc/test')
+  @HttpCode(HttpStatus.OK)
+  async testOidcConnection(@Query('issuerUri') issuerUri?: string) {
+    const uri = issuerUri || (await this.appSettingsService.getOidcConfig()).issuerUri;
+    if (!uri) {
+      return { success: false, error: 'Issuer URI is not configured' };
+    }
+    try {
+      const url = `${uri.replace(/\/$/, '')}/.well-known/openid-configuration`;
+      const res = await fetch(url);
+      if (!res.ok) return { success: false, error: `Provider returned HTTP ${res.status}` };
+      const doc = await res.json();
+      return { success: true, issuer: doc.issuer, authorizationEndpoint: doc.authorization_endpoint };
+    } catch (err) {
+      return { success: false, error: String(err) };
+    }
+  }
 }

server/src/modules/app-settings/app-settings.module.ts

@@ -6,5 +6,6 @@ import { AppSettingsService } from './app-settings.service';
 @Module({
   controllers: [AppSettingsController],
   providers: [AppSettingsService],
+  exports: [AppSettingsService],
 })
 export class AppSettingsModule {}

server/src/modules/app-settings/app-settings.service.ts

@@ -7,6 +7,37 @@ import * as schema from '../../db/schema';
 
 type Db = NodePgDatabase<typeof schema>;
 
+export interface OidcFullConfig {
+  enabled: boolean;
+  providerName: string;
+  issuerUri: string;
+  clientId: string;
+  clientSecret: string;
+  scopes: string;
+  claimMapping: {
+    username: string;
+    name: string;
+    email: string;
+    groups: string;
+  };
+  autoProvision: {
+    enabled: boolean;
+    allowLocalLinking: boolean;
+    defaultRoleId: number | null;
+  };
+}
+
+const DEFAULT_OIDC_CONFIG: OidcFullConfig = {
+  enabled: false,
+  providerName: '',
+  issuerUri: '',
+  clientId: '',
+  clientSecret: '',
+  scopes: 'openid profile email',
+  claimMapping: { username: 'preferred_username', name: 'name', email: 'email', groups: 'groups' },
+  autoProvision: { enabled: false, allowLocalLinking: true, defaultRoleId: null },
+};
+
 @Injectable()
 export class AppSettingsService {
   constructor(@Inject(DB) private readonly db: Db) {}
@@ -21,4 +52,32 @@ export class AppSettingsService {
     if (!setting) throw new NotFoundException(`Setting '${key}' not found`);
     return setting;
   }
+
+  async getOidcConfig(): Promise<OidcFullConfig> {
+    const row = await this.db.query.appSettings.findFirst({ where: eq(schema.appSettings.key, 'oidc_config') });
+    if (!row) return { ...DEFAULT_OIDC_CONFIG };
+    try {
+      return JSON.parse(row.value) as OidcFullConfig;
+    } catch {
+      return { ...DEFAULT_OIDC_CONFIG };
+    }
+  }
+
+  async updateOidcConfig(config: Partial<OidcFullConfig>): Promise<OidcFullConfig> {
+    const current = await this.getOidcConfig();
+    const merged: OidcFullConfig = {
+      ...current,
+      ...config,
+      claimMapping: { ...current.claimMapping, ...(config.claimMapping ?? {}) },
+      autoProvision: { ...current.autoProvision, ...(config.autoProvision ?? {}) },
+    };
+    const value = JSON.stringify(merged);
+
+    await this.db
+      .insert(schema.appSettings)
+      .values({ key: 'oidc_config', value })
+      .onConflictDoUpdate({ target: schema.appSettings.key, set: { value } });
+
+    return merged;
+  }
 }

server/src/modules/app-settings/dto/update-oidc-config.dto.ts

@@ -0,0 +1,65 @@
+import { Type } from 'class-transformer';
+import { IsBoolean, IsInt, IsOptional, IsPositive, IsString, ValidateNested } from 'class-validator';
+
+class ClaimMappingDto {
+  @IsString()
+  username: string;
+
+  @IsString()
+  name: string;
+
+  @IsString()
+  email: string;
+
+  @IsString()
+  groups: string;
+}
+
+class AutoProvisionDto {
+  @IsBoolean()
+  enabled: boolean;
+
+  @IsBoolean()
+  allowLocalLinking: boolean;
+
+  @IsOptional()
+  @IsInt()
+  @IsPositive()
+  defaultRoleId: number | null;
+}
+
+export class UpdateOidcConfigDto {
+  @IsOptional()
+  @IsBoolean()
+  enabled?: boolean;
+
+  @IsOptional()
+  @IsString()
+  providerName?: string;
+
+  @IsOptional()
+  @IsString()
+  issuerUri?: string;
+
+  @IsOptional()
+  @IsString()
+  clientId?: string;
+
+  @IsOptional()
+  @IsString()
+  clientSecret?: string;
+
+  @IsOptional()
+  @IsString()
+  scopes?: string;
+
+  @IsOptional()
+  @ValidateNested()
+  @Type(() => ClaimMappingDto)
+  claimMapping?: ClaimMappingDto;
+
+  @IsOptional()
+  @ValidateNested()
+  @Type(() => AutoProvisionDto)
+  autoProvision?: AutoProvisionDto;
+}

server/src/modules/auth/auth.controller.ts

@@ -8,12 +8,17 @@ import { AuthService } from './auth.service';
 import { ChangePasswordDto } from './dto/change-password.dto';
 import { ForgotPasswordDto } from './dto/forgot-password.dto';
 import { LoginDto } from './dto/login.dto';
+import { OidcCallbackDto } from './dto/oidc-callback.dto';
 import { RegisterDto } from './dto/register.dto';
 import { ResetPasswordDto } from './dto/reset-password.dto';
+import { OidcService } from './oidc/oidc.service';
 
 @Controller('auth')
 export class AuthController {
-  constructor(private readonly authService: AuthService) {}
+  constructor(
+    private readonly authService: AuthService,
+    private readonly oidcService: OidcService,
+  ) {}
 
   @Public()
   @Post('register')
@@ -37,7 +42,7 @@ export class AuthController {
 
   @Public()
   @Post('logout')
-  @HttpCode(HttpStatus.NO_CONTENT)
+  @HttpCode(HttpStatus.OK)
   logout(@Req() req: FastifyRequest, @Res({ passthrough: true }) reply: FastifyReply) {
     return this.authService.logout(req, reply);
   }
@@ -77,4 +82,27 @@ export class AuthController {
   changePassword(@CurrentUser() user: RequestUser, @Body() dto: ChangePasswordDto, @Res({ passthrough: true }) reply: FastifyReply) {
     return this.authService.changePassword(user.id, dto, reply);
   }
+
+  @Public()
+  @Post('oidc/state')
+  @HttpCode(HttpStatus.OK)
+  oidcGenerateState() {
+    return { state: this.oidcService.generateState() };
+  }
+
+  @Public()
+  @Post('oidc/callback')
+  @HttpCode(HttpStatus.OK)
+  oidcCallback(@Body() dto: OidcCallbackDto, @Res({ passthrough: true }) reply: FastifyReply) {
+    return this.oidcService.handleCallback(dto, reply);
+  }
+
+  @Public()
+  @Post('oidc/backchannel-logout')
+  @HttpCode(HttpStatus.OK)
+  oidcBackchannelLogout(@Req() req: FastifyRequest) {
+    const body = req.body as Record<string, string> | undefined;
+    const logoutToken = body?.['logout_token'] ?? '';
+    return this.oidcService.handleBackchannelLogout(logoutToken);
+  }
 }

server/src/modules/auth/auth.module.ts

@@ -4,10 +4,20 @@ import { JwtModule } from '@nestjs/jwt';
 import { PassportModule } from '@nestjs/passport';
 
 import { CommonModule } from '../../common/common.module';
+import { AppSettingsModule } from '../app-settings/app-settings.module';
 import { UserModule } from '../user/user.module';
 import { AuthController } from './auth.controller';
 import { AuthService } from './auth.service';
 import { JwtStrategy } from './jwt.strategy';
+import { BackchannelLogoutService } from './oidc/backchannel-logout.service';
+import { OidcClaimExtractorService } from './oidc/oidc-claim-extractor.service';
+import { OidcDiscoveryService } from './oidc/oidc-discovery.service';
+import { OidcGroupMappingService } from './oidc/oidc-group-mapping.service';
+import { OidcService } from './oidc/oidc.service';
+import { OidcSessionRepository } from './oidc/oidc-session.repository';
+import { OidcStateService } from './oidc/oidc-state.service';
+import { OidcTokenClientService } from './oidc/oidc-token-client.service';
+import { OidcTokenValidatorService } from './oidc/oidc-token-validator.service';
 
 @Module({
   imports: [
@@ -21,9 +31,22 @@ import { JwtStrategy } from './jwt.strategy';
     }),
     UserModule,
     CommonModule,
+    AppSettingsModule,
   ],
   controllers: [AuthController],
-  providers: [AuthService, JwtStrategy],
+  providers: [
+    AuthService,
+    JwtStrategy,
+    OidcService,
+    OidcStateService,
+    OidcDiscoveryService,
+    OidcTokenClientService,
+    OidcTokenValidatorService,
+    OidcClaimExtractorService,
+    OidcSessionRepository,
+    OidcGroupMappingService,
+    BackchannelLogoutService,
+  ],
   exports: [AuthService],
 })
 export class AuthModule {}