refactor!: use shadcn sidebar (#661)

* refactor!: use shadcn sidebar

* chore: cleanup comment

* update icons

* add `@iconify-json/lucide` to deps

* change `<SidebarTrigger />` icon

* enspire info dropdown

* sidebar blur background

* move options

* update breadcrumbs

* add changeset

Author: qwerzl

.changeset/healthy-houses-remember.md

@@ -0,0 +1,7 @@
+---
+"enspire": minor
+---
+<br />
+**Welcome to Enspire v1.3.0!**
+
+This version introduces redesign of the sidebar.

app/app.vue

@@ -1,8 +1,15 @@
-<script setup lang="ts">
+<script setup lang=ts>
+import { useFavicon, usePreferredDark } from '@vueuse/core'
 import { ConfigProvider } from 'radix-vue'
 import { useClerkProvider } from 'vue-clerk'
+
 import '@unocss/reset/tailwind-compat.css'
 
+const isDark = usePreferredDark()
+const favicon = computed(() => isDark.value ? '/favicon-dark.ico' : '/favicon.ico')
+
+useFavicon(favicon)
+
 const { isClerkLoaded } = useClerkProvider()
 
 const useIdFunction = () => useId()
@@ -19,8 +26,6 @@ useHead({
 
 <template>
   <ConfigProvider :use-id="useIdFunction">
-    <NuxtLoadingIndicator />
-    <VitePwaManifest />
     <div v-if="!isClerkLoaded || isEnspireLoading" class="absolute z-100 h-screen w-screen bg-background">
       <div class="h-full w-full flex flex-col items-center justify-center space-y-6">
         <div class="flex justify-center space-x-1">
@@ -32,9 +37,13 @@ useHead({
         <Icon name="svg-spinners:3-dots-fade" size="2em" />
       </div>
     </div>
-    <NuxtLayout class="z-10">
-      <NuxtPage />
-    </NuxtLayout>
+    <div>
+      <NuxtLayout class="z-10">
+        <NuxtLoadingIndicator />
+        <VitePwaManifest />
+        <NuxtPage />
+      </NuxtLayout>
+    </div>
   </ConfigProvider>
 </template>
 
@@ -82,6 +91,14 @@ useHead({
     /* change to any hsl value you want */
     --vis-primary-color: 160 81% 40%;
     --vis-text-color: var(--muted-foreground);
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
   }
 }
 
@@ -113,9 +130,16 @@ useHead({
     --vis-tooltip-backdrop-filter: none !important;
     --vis-tooltip-padding: none !important;
     --vis-secondary-color: var(--primary);
-    /* change to any hsl value you want */
     --vis-primary-color: 160 81% 40%;
     --vis-text-color: var(--muted-foreground);
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
   }
 }
 </style>

app/components/custom/CAS/ClassroomReservation/NewClassroomReservation.vue

@@ -19,6 +19,7 @@ const { data, suspense } = useQuery<ClassroomData[]>({
   queryKey: ['/api/reservation/classroomId'],
 })
 await suspense()
+const sortedClassroomData = ref<ClassroomData[]>()
 
 if (!data.value) {
   toast({
@@ -27,7 +28,7 @@ if (!data.value) {
   })
 }
 else {
-  data.value = data.value.sort((a: any, b: any) => a.name < b.name ? -1 : 1)
+  sortedClassroomData.value = [...data.value].sort((a: any, b: any) => a.name < b.name ? -1 : 1)
 }
 
 const { data: clubs, suspense: clubsSuspense } = useQuery<AllClubs>({
@@ -78,7 +79,7 @@ async function handleSubmit(e: any) {
   }
   pending.value = true
   try {
-    const { data, error } = await useFetch('/api/reservation/new', {
+    const { data: submitData, error } = await useFetch('/api/reservation/new', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
@@ -92,7 +93,7 @@ async function handleSubmit(e: any) {
         variant: 'destructive',
       })
     }
-    else if (data.value?.status === 'SUCCESS') {
+    else if (submitData.value?.status === 'SUCCESS') {
       toast({
         title: '创建成功',
         description: '已成功创建预约记录，你可以在「管理预约」中查看',
@@ -106,7 +107,7 @@ async function handleSubmit(e: any) {
       formData.value.applicant = ''
       formData.value.note = ''
     }
-    else if (data.value?.status === 'PRISMA_ERROR') {
+    else if (submitData.value?.status === 'PRISMA_ERROR') {
       toast({
         title: '数据错误',
         description: '请稍后再试',
@@ -132,15 +133,15 @@ async function handleSubmit(e: any) {
       <CardDescription>在此处预约教室</CardDescription>
     </CardHeader>
     <CardContent>
-      <form class="space-y-2" @submit="handleSubmit">
+      <Form class="space-y-2" @submit="handleSubmit">
         <FormField name="main">
           <FormItem>
             <FormLabel>预约时间</FormLabel>
             <FormControl>
-              <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-1 justify-start">
+              <div class="flex flex-col justify-start sm:flex-row space-y-2 sm:space-x-1 sm:space-y-0">
                 <!-- This ToggleGroup should be implemented in a better way but anyway it works -->
-                <ToggleGroup :key="reloadKey" type="multiple" variant="outline">
-                  <div class="text-muted-foreground text-sm text-center w-7">
+                <ToggleGroup :key="`reloadKey-${reloadKey}`" type="multiple" variant="outline">
+                  <div class="w-7 text-center text-sm text-muted-foreground">
                     每周
                   </div>
                   <ToggleGroupItem value="mon" @click="day[1] = !day[1]">
@@ -164,7 +165,7 @@ async function handleSubmit(e: any) {
                     <SelectValue placeholder="选择时段" />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem v-for="period in enums.periods.values" :key="period" :value="period">
+                    <SelectItem v-for="period in enums.periods.values" :key="`period-${period}`" :value="period">
                       {{ enums.periods.map[period] }}
                     </SelectItem>
                   </SelectContent>
@@ -175,7 +176,7 @@ async function handleSubmit(e: any) {
           <div class="py-1" />
           <FormItem>
             <FormLabel>选择教室</FormLabel>
-            <div v-if="!clubs || !data">
+            <div v-if="!clubs || !sortedClassroomData">
               <Skeleton class="h-5 p-3 my-3" />
             </div>
             <FormControl>
@@ -185,7 +186,7 @@ async function handleSubmit(e: any) {
                 </SelectTrigger>
                 <!-- Only available classrooms should be filled in the following <SelectContent/> -->
                 <SelectContent>
-                  <SelectGroup v-for="classroom in data" :key="classroom.id">
+                  <SelectGroup v-for="classroom in sortedClassroomData" :key="`classroom-${classroom.id}`">
                     <SelectItem :value="classroom.id.toString()">
                       <span class="inline-block min-w-32 text-left">
                         <span class="inline-block min-w-14">
@@ -214,23 +215,23 @@ async function handleSubmit(e: any) {
                 </SelectTrigger>
                 <SelectContent>
                   <SelectGroup v-if="clubs?.president && clubs?.president.length">
-                    <SelectItem v-for="club in clubs?.president" :key="club.id" :value="club.id">
+                    <SelectItem v-for="club in clubs?.president" :key="`club-${club.id}`" :value="String(club.id)">
                       {{ club.name.zh }}
                       <span class="inline-block text-gray-500">
                         社长
                       </span>
                     </SelectItem>
                   </SelectGroup>
                   <SelectGroup v-if="clubs?.vice && clubs?.vice.length">
-                    <SelectItem v-for="club in clubs?.vice" :key="club.id" :value="club.id">
+                    <SelectItem v-for="club in clubs?.vice" :key="`club-${club.id}`" :value="String(club.id)">
                       {{ club.name.zh }}
                       <span class="inline-block text-gray-500">
                         副社
                       </span>
                     </SelectItem>
                   </SelectGroup>
                   <SelectGroup v-if="clubs?.member && clubs?.member.length">
-                    <SelectItem v-for="club in clubs?.member" :key="club.id" :value="club.id">
+                    <SelectItem v-for="club in clubs?.member" :key="`club-${club.id}`" :value="String(club.id)">
                       {{ club.name.zh }}
                       <span class="inline-block text-gray-500">
                         成员
@@ -260,7 +261,7 @@ async function handleSubmit(e: any) {
           <span v-if="!pending">提交预约</span>
           <span v-if="pending">处理中...</span>
         </Button>
-      </form>
+      </Form>
     </CardContent>
   </Card>
 </template>

app/components/custom/breadcrumb.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { RouteRecordNormalized } from 'vue-router'
+
+const route = useRoute()
+const router = useRouter()
+const breadcrumbs = ref<RouteRecordNormalized[]>()
+
+watch(() => route.path, () => {
+  breadcrumbs.value = []
+  const fullPath = route.path
+  const requestPath = fullPath.startsWith('/')
+    ? fullPath.substring(1)
+    : fullPath
+  const crumbs = requestPath.split('/')
+  let path = ''
+  crumbs.forEach((crumb) => {
+    if (crumb) {
+      path = `${path}/${crumb}`
+      const breadcrumb = router.getRoutes().find(r => r.path === path)
+      if (breadcrumb && breadcrumbs.value) {
+        breadcrumbs.value.push(breadcrumb)
+      }
+    }
+  })
+  console.log(breadcrumbs.value)
+}, { immediate: true })
+</script>
+
+<template>
+  <Breadcrumb>
+    <BreadcrumbList>
+      <BreadcrumbItem class="hidden md:block">
+        <BreadcrumbLink to="/">
+          Enspire
+        </BreadcrumbLink>
+      </BreadcrumbItem>
+      <template v-for="(breadcrumb, index) in breadcrumbs" :key="`breadcrumb-${String(index)}`">
+        <BreadcrumbSeparator class="hidden md:block" />
+        <BreadcrumbItem class="hidden md:block">
+          <BreadcrumbLink :href="breadcrumb!.path">
+            {{ breadcrumb!.meta.breadcrumb ?? breadcrumb.path.split('/').pop() }}
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+      </template>
+    </BreadcrumbList>
+  </Breadcrumb>
+</template>