feat: WIP notifications w/ shadcn

Currently the build doesn't work in webgui

web/components/Notifications/Item.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import {
+  ArchiveBoxIcon,
+  TrashIcon,
+  EllipsisVerticalIcon,
+  ShieldExclamationIcon,
+  CheckBadgeIcon,
+  ExclamationTriangleIcon,
+} from '@heroicons/vue/24/solid';
+
+import type { NotificationItemProps } from '~/types/ui/notification';
+
+const props = defineProps<NotificationItemProps>();
+
+const icon = computed<{ component: Component, color: string } | null>(() => {
+  switch (props.type) {
+    case 'success':
+      return {
+        component: CheckBadgeIcon,
+        color: 'text-green-500',
+      };
+    case 'warning':
+      return {
+        component: ExclamationTriangleIcon,
+        color: 'text-yellow-500',
+      };
+    case 'alert':
+      return {
+        component: ShieldExclamationIcon,
+        color: 'text-red-500',
+      };
+  }
+  return null;
+});
+</script>
+
+<template>
+  <div class="w-full flex flex-row items-center justify-between py-4">
+    <header class="flex flex-col gap-2">
+      <h3 class="text-md font-semibold flex flex-row items-center gap-2">
+        <component :is="icon.component" v-if="icon" class="size-6" :class="icon.color" />
+        <span>{{ subject }}</span>
+      </h3>
+      <p>{{ message }}</p>
+    </header>
+    <footer>
+      <DropdownMenu>
+        <DropdownMenuTrigger>
+          <span class="sr-only">View Notification Actions</span>
+          <EllipsisVerticalIcon class="size-6" />
+        </DropdownMenuTrigger>
+
+        <DropdownMenuContent>
+          <!-- <DropdownMenuLabel>Actions</DropdownMenuLabel>
+          <DropdownMenuSeparator /> -->
+          <DropdownMenuItem class="flex flex-row justify-between items-center">
+            Archive
+            <ArchiveBoxIcon class="size-4" />
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem class="flex flex-row justify-between items-center">
+            Delete
+            <TrashIcon class="size-4" />
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </footer>
+  </div>
+</template>

web/components/Notifications/Sidebar.vue

@@ -1,14 +1,95 @@
 <script setup lang="ts">
-import { storeToRefs } from 'pinia';
+import { BellIcon } from '@heroicons/vue/24/solid';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@/components/shadcn/sheet';
+import type { NotificationItemProps } from '~/types/ui/notification';
 
-import { useNotificationsStore } from '~/store/notifications';
+const unreadNotifications: NotificationItemProps[] = [
+  {
+    id: '1',
+    subject: 'New User Registration',
+    message: 'A new user has registered on your platform.',
+    type: 'success',
+  },
+  {
+    id: '2',
+    subject: 'Drive Pre-Failure Detected',
+    message: 'Drive 1 has been detected as pre-failure.',
+    type: 'alert',
+  },
+  {
+    id: '3',
+    subject: 'Server Maintenance',
+    message: 'Your server will be undergoing maintenance at 12:00 AM.',
+    type: 'warning',
+  },
+];
 
-const notificationsStore = useNotificationsStore();
-const { isOpen } = storeToRefs(notificationsStore);
+const archiveNotifications: NotificationItemProps[] = [
+  {
+    id: '1',
+    subject: 'Archived New User Registration',
+    message: 'A new user has registered on your platform.',
+    type: 'success',
+  },
+  {
+    id: '2',
+    subject: 'Archived Drive Pre-Failure Detected',
+    message: 'Drive 1 has been detected as pre-failure.',
+    type: 'alert',
+  },
+  {
+    id: '3',
+    subject: 'Archived Server Maintenance',
+    message: 'Your server will be undergoing maintenance at 12:00 AM.',
+    type: 'warning',
+  },
+];
 </script>
 
 <template>
-  <div v-if="isOpen" class="h-full w-full max-w-36">
-    This is my sidebar
-  </div>
-</template>
+  <Sheet>
+    <SheetTrigger>
+      <span class="sr-only">Notifications</span>
+      <BellIcon class="w-6 h-6" />
+    </SheetTrigger>
+
+    <SheetContent class="w-full max-w-[400px] sm:max-w-[540px]">
+      <SheetHeader>
+        <SheetTitle>Notifications</SheetTitle>
+
+        <Tabs default-value="unread">
+          <TabsList>
+            <TabsTrigger value="unread">
+              Unread
+            </TabsTrigger>
+            <TabsTrigger value="archived">
+              Archived
+            </TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="unread" class="divide-y divide-gray-200">
+            <NotificationsItem
+              v-for="notification in unreadNotifications"
+              :key="notification.id"
+              v-bind="notification"
+            />
+          </TabsContent>
+          <TabsContent value="archived" class="divide-y divide-gray-200">
+            <NotificationsItem
+              v-for="notification in archiveNotifications"
+              :key="notification.id"
+              v-bind="notification"
+            />
+          </TabsContent>
+        </Tabs>
+      </SheetHeader>
+    </SheetContent>
+  </Sheet>
+</template>