feat: WIP sidebar filter select

web/_data/serverState.ts

@@ -44,12 +44,10 @@ import type {
 // EBLACKLISTED2
 // ENOCONN
 
-// '1111-1111-5GDB-123412341234' Starter.key = TkJCrVyXMLWWGKZF6TCEvf0C86UYI9KfUDSOm7JoFP19tOMTMgLKcJ6QIOt9_9Psg_t0yF-ANmzSgZzCo94ljXoPm4BESFByR0K7nyY9KVvU8szLEUcBUT3xC2adxLrAXFNxiPeK-mZqt34n16uETKYvLKL_Sr5_JziG5L5lJFBqYZCPmfLMiguFo1vp0xL8pnBH7q8bYoBnePrAcAVb9mAGxFVPEInSPkMBfC67JLHz7XY1Y_K5bYIq3go9XPtLltJ53_U4BQiMHooXUBJCKXodpqoGxq0eV0IhNEYdauAhnTsG90qmGZig0hZalQ0soouc4JZEMiYEcZbn9mBxPg
-
-const state: ServerState = "BASIC" as ServerState;
-const currentFlashGuid = "1111-1111-CFXF-TEST1234ZACK"; // this is the flash drive that's been booted from
-const regGuid = "1111-1111-CFXF-TEST1234ZACK"; // this guid is registered in key server
-const keyfileBase64 = "asdf"; // @todo raycast download key to base64
+const state: ServerState = "ENOKEYFILE2" as ServerState;
+const currentFlashGuid = "4444-1111-FOUR-999900008888"; // this is the flash drive that's been booted from
+const regGuid = "4444-1111-FOUR-999900008888"; // this guid is registered in key server
+const keyfileBase64 = "";
 
 // const randomGuid = `1111-1111-${makeid(4)}-123412341234`; // this guid is registered in key server
 // const newGuid = `1234-1234-${makeid(4)}-123412341234`; // this is a new USB, not registered
@@ -106,10 +104,10 @@ switch (state) {
     break;
 }
 
-const connectPluginInstalled = 'dynamix.unraid.net.staging.plg';
-// const connectPluginInstalled = "";
+// const connectPluginInstalled = 'dynamix.unraid.net.staging.plg';
+const connectPluginInstalled = "";
 
-const osVersion = "6.12.8";
+const osVersion = "7.0.0-beta.2.10";
 const osVersionBranch = "stable";
 // const parsedRegExp = regExp ? dayjs(regExp).format('YYYY-MM-DD') : undefined;
 

web/components/Notifications/Sidebar.vue

@@ -31,6 +31,12 @@ const getNotifications = gql`
 `;
 
 const notifications = ref<NotificationItemProps[]>([]);
+watch(notifications, (newVal) => {
+  console.log('[notifications]', newVal);
+});
+
+const fetchType = ref<'UNREAD' | 'ARCHIVED'>('UNREAD');
+const setFetchType = (type: 'UNREAD' | 'ARCHIVED') => fetchType.value = type;
 
 const { unraidApiClient } = storeToRefs(useUnraidApiStore());
 
@@ -42,12 +48,10 @@ watch(unraidApiClient, async(newVal) => {
         filter: {
           offset: 0,
           limit: 10,
-          type: 'UNREAD',
+          type: fetchType.value,
         },
       },
     });
-    console.log('[blah blah]', apiResponse);
-
     notifications.value = apiResponse.data.notifications.list;
   }
 });
@@ -62,38 +66,55 @@ const { teleportTarget, determineTeleportTarget } = useTeleport();
       <BellIcon class="w-6 h-6" />
     </SheetTrigger>
 
-    <SheetContent :to="teleportTarget" class="w-full max-w-[400px] sm:max-w-[540px] bg-beta text-alpha">
+    <SheetContent :to="teleportTarget" class="w-full max-w-[400px] sm:max-w-[540px]">
       <SheetHeader>
         <SheetTitle>Notifications</SheetTitle>
       </SheetHeader>
 
-      <Tabs default-value="unread">
-        <TabsList>
-          <TabsTrigger value="unread">
-            Unread
-          </TabsTrigger>
-          <TabsTrigger value="archived">
-            Archived
-          </TabsTrigger>
-        </TabsList>
+      <div class="flex flex-row justify-between items-center">
+        <div class="w-auto flex flex-row justify-start items-center gap-1 p-2 rounded">
+          <Button
+            v-for="opt in ['Unread', 'Archived']"
+            :key="opt"
+            :variant="fetchType === opt ? 'secondary' : undefined"
+            class="py-2 px-4 text-left"
+            @click="setFetchType(opt.toUpperCase() as 'UNREAD' | 'ARCHIVED')"
+          >
+            {{ opt }}
+          </Button>
+        </div>
+        <div class="w-auto flex flex-row justify-start items-center gap-1 p-2 rounded">
+          <Button
+            variant="secondary"
+            class="py-2 px-4 text-left"
+          >
+            {{ `Archive All` }}
+          </Button>
+          <Select>
+            <SelectTrigger>
+              <SelectValue placeholder="Filter" />
+            </SelectTrigger>
+            <SelectContent :to="teleportTarget">
+              <SelectGroup>
+                <SelectLabel>Notification Types</SelectLabel>
+                <SelectItem value="alert">Alert</SelectItem>
+                <SelectItem value="info">Info</SelectItem>
+                <SelectItem value="warning">Warning</SelectItem>
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
 
-        <TabsContent value="unread" class="divide-y divide-gray-200">
-          <NotificationsItem
-            v-for="notification in notifications"
-            :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>
+      <div class="divide-y divide-gray-200">
+        <NotificationsItem
+          v-for="notification in notifications"
+          :key="notification.id"
+          v-bind="notification"
+        />
+      </div>
 
-      <SheetFooter>
+      <SheetFooter class="text-center">
         <p>Future pagination station</p>
       </SheetFooter>
     </SheetContent>

web/components/UserProfile.ce.vue

@@ -127,7 +127,7 @@ onBeforeMount(() => {
 
       <div class="block w-2px h-24px bg-gamma" />
 
-      <NotificationsSidebar />
+      <!-- <NotificationsSidebar /> -->
 
       <OnClickOutside class="flex items-center justify-end h-full" :options="{ ignore: [clickOutsideIgnoreTarget] }" @trigger="outsideDropdown">
         <UpcDropdownTrigger ref="clickOutsideIgnoreTarget" :t="t" />

web/components/UserProfile/DropdownItem.vue

@@ -23,7 +23,6 @@ const showExternalIconOnHover = computed(() => props.item?.external && props.ite
     :is="item?.click ? 'button' : 'a'"
     :disabled="item?.disabled"
     :href="item?.href ?? null"
-    :title="item?.title ? t(item?.title) : null"
     :target="item?.external ? '_blank' : null"
     :rel="item?.external ? 'noopener noreferrer' : null"
     class="text-left text-14px w-full flex flex-row items-center justify-between gap-x-8px px-8px py-8px cursor-pointer"

web/components/shadcn/select/Select.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { SelectRootEmits, SelectRootProps } from 'radix-vue'
+import { SelectRoot, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<SelectRootProps>()
+const emits = defineEmits<SelectRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <SelectRoot v-bind="forwarded">
+    <slot />
+  </SelectRoot>
+</template>

web/components/shadcn/select/SelectContent.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  SelectContent,
+  type SelectContentEmits,
+  type SelectContentProps,
+  SelectPortal,
+  SelectViewport,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { SelectScrollDownButton, SelectScrollUpButton } from '.'
+import { cn } from '@/helpers/utils'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<SelectContentProps & {
+  class?: HTMLAttributes['class']
+  disabled?: boolean
+  forceMount?: boolean
+  to?: string | HTMLElement | Element
+}>(),
+  {
+    position: 'popper',
+  },
+)
+const emits = defineEmits<SelectContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SelectPortal :disabled="disabled" :force-mount="forceMount" :to="to">
+    <SelectContent
+      v-bind="{ ...forwarded, ...$attrs }" :class="cn(
+        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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',
+        position === 'popper'
+          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        props.class,
+      )
+      "
+    >
+      <SelectScrollUpButton />
+      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]')">
+        <slot />
+      </SelectViewport>
+      <SelectScrollDownButton />
+    </SelectContent>
+  </SelectPortal>
+</template>

web/components/shadcn/select/SelectGroup.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { SelectGroup, type SelectGroupProps } from 'radix-vue'
+import { cn } from '@/helpers/utils'
+
+const props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <SelectGroup :class="cn('p-1 w-full', props.class)" v-bind="delegatedProps">
+    <slot />
+  </SelectGroup>
+</template>

web/components/shadcn/select/SelectItem.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  SelectItem,
+  SelectItemIndicator,
+  type SelectItemProps,
+  SelectItemText,
+  useForwardProps,
+} from 'radix-vue'
+import { Check } from 'lucide-vue-next'
+import { cn } from '@/helpers/utils'
+
+const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectItem
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectItemIndicator>
+        <Check class="h-4 w-4" />
+      </SelectItemIndicator>
+    </span>
+
+    <SelectItemText>
+      <slot />
+    </SelectItemText>
+  </SelectItem>
+</template>

web/components/shadcn/select/SelectItemText.vue

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

web/components/shadcn/select/SelectLabel.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { SelectLabel, type SelectLabelProps } from 'radix-vue'
+import { cn } from '@/helpers/utils'
+
+const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <SelectLabel :class="cn('py-1.5 pl-8 pr-2 text-sm font-semibold', props.class)">
+    <slot />
+  </SelectLabel>
+</template>

web/components/shadcn/select/SelectScrollDownButton.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'radix-vue'
+import { ChevronDown } from 'lucide-vue-next'
+import { cn } from '@/helpers/utils'
+
+const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollDownButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
+    <slot>
+      <ChevronDown class="h-4 w-4" />
+    </slot>
+  </SelectScrollDownButton>
+</template>

web/components/shadcn/select/SelectScrollUpButton.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'radix-vue'
+import { ChevronUp } from 'lucide-vue-next'
+import { cn } from '@/helpers/utils'
+
+const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollUpButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
+    <slot>
+      <ChevronUp class="h-4 w-4" />
+    </slot>
+  </SelectScrollUpButton>
+</template>

web/components/shadcn/select/SelectSeparator.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { SelectSeparator, type SelectSeparatorProps } from 'radix-vue'
+import { cn } from '@/helpers/utils'
+
+const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <SelectSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
+</template>

web/components/shadcn/select/SelectTrigger.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'radix-vue'
+import { ChevronDown } from 'lucide-vue-next'
+import { cn } from '@/helpers/utils'
+
+const props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',
+      props.class,
+    )"
+  >
+    <slot />
+    <SelectIcon as-child>
+      <ChevronDown class="w-4 h-4 opacity-50 shrink-0" />
+    </SelectIcon>
+  </SelectTrigger>
+</template>

web/components/shadcn/select/SelectValue.vue

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

web/components/shadcn/select/index.ts

@@ -0,0 +1,11 @@
+export { default as Select } from './Select.vue'
+export { default as SelectValue } from './SelectValue.vue'
+export { default as SelectTrigger } from './SelectTrigger.vue'
+export { default as SelectContent } from './SelectContent.vue'
+export { default as SelectGroup } from './SelectGroup.vue'
+export { default as SelectItem } from './SelectItem.vue'
+export { default as SelectItemText } from './SelectItemText.vue'
+export { default as SelectLabel } from './SelectLabel.vue'
+export { default as SelectSeparator } from './SelectSeparator.vue'
+export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'
+export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'

web/pages/index.vue

@@ -71,7 +71,7 @@ onMounted(() => {
             </div>
             <UserProfileCe :server="serverState" />
           </header>
-          <hr class="border-black dark:border-white">
+          <!-- <hr class="border-black dark:border-white"> -->
 
           <h3 class="text-lg font-semibold font-mono">
             ConnectSettingsCe