refactor: clean up sidebar typescript errors

mdatelle · mdatelle · commit 79af98cc84c7 · 2025-03-25T17:15:39.000-04:00
diff --git a/unraid-ui/src/forms/Select.vue b/unraid-ui/src/forms/Select.vue
@@ -52,7 +52,7 @@ const onSelectOpen = () => {
         <span v-else>{{ control.schema.default ?? 'Select an option' }}</span>
       </SelectTrigger>
       <!-- The content includes the selectable options -->
-      <SelectContent :to="teleportTarget as HTMLElement">
+      <SelectContent :to="teleportTarget">
         <SelectItem v-for="option in options" :key="option.value" :value="option.value">
           <SelectItemText>{{ option.label }}</SelectItemText>
         </SelectItem>
diff --git a/unraid-ui/stories/components/common/Sheet.stories.ts b/unraid-ui/stories/components/common/Sheet.stories.ts
@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/vue3';
-import { h } from 'vue';
 import Button from '../../../src/components/common/button/Button.vue';
 import SheetComponent from '../../../src/components/common/sheet/Sheet.vue';
 import SheetContent from '../../../src/components/common/sheet/SheetContent.vue';
diff --git a/web/components/Notifications/Sidebar.vue b/web/components/Notifications/Sidebar.vue
@@ -21,6 +21,12 @@ import {
   TabsTrigger,
 } from '@unraid/ui';
 
+import type {
+  NotificationAddedSubSubscription,
+  NotificationOverviewSubSubscription,
+  OverviewQuery,
+} from '~/composables/gql/graphql';
+
 import { useTrackLatestSeenNotification } from '~/composables/api/use-notifications';
 import { useFragment } from '~/composables/gql';
 import { Importance, NotificationType } from '~/composables/gql/graphql';
@@ -61,16 +67,39 @@ const confirmAndDeleteArchives = async () => {
 const { result, subscribeToMore } = useQuery(notificationsOverview);
 subscribeToMore({
   document: notificationOverviewSubscription,
-  updateQuery: (prev, { subscriptionData }) => {
+  updateQuery: (
+    prev: OverviewQuery,
+    { subscriptionData }: { subscriptionData: { data: NotificationOverviewSubSubscription } }
+  ) => {
     const snapshot = structuredClone(prev);
-    snapshot.notifications.overview = subscriptionData.data.notificationsOverview;
+    const subData = subscriptionData.data.notificationsOverview;
+    const unreadFragment = subData.unread[' $fragmentRefs']?.NotificationCountFragmentFragment;
+    const archiveFragment = subData.archive[' $fragmentRefs']?.NotificationCountFragmentFragment;
+
+    if (!unreadFragment || !archiveFragment) return snapshot;
+
+    snapshot.notifications.overview = {
+      __typename: 'NotificationOverview',
+      unread: {
+        __typename: 'NotificationCounts',
+        info: unreadFragment.info,
+        warning: unreadFragment.warning,
+        alert: unreadFragment.alert,
+        total: unreadFragment.total,
+      },
+      archive: {
+        __typename: 'NotificationCounts',
+        total: archiveFragment.total,
+      },
+    };
+
     return snapshot;
   },
 });
 const { latestNotificationTimestamp, haveSeenNotifications } = useTrackLatestSeenNotification();
 const { onResult: onNotificationAdded } = useSubscription(notificationAddedSubscription);
 
-onNotificationAdded(({ data }) => {
+onNotificationAdded(({ data }: { data: NotificationAddedSubSubscription | null }) => {
   if (!data) return;
   const notif = useFragment(NOTIFICATION_FRAGMENT, data.notificationAdded);
   if (notif.type !== NotificationType.Unread) return;
diff --git a/web/nuxt.config.ts b/web/nuxt.config.ts
@@ -33,7 +33,7 @@ export default defineNuxtConfig({
   },
 
   devtools: {
-    enabled: process.env.NODE_ENV === 'development',
+    enabled: false,
   },
 
   modules: [

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,4 @@`
`1`	`1`	`import type { Meta, StoryObj } from '@storybook/vue3';`
`2`		`-import { h } from 'vue';`
`3`	`2`	`import Button from '../../../src/components/common/button/Button.vue';`
`4`	`3`	`import SheetComponent from '../../../src/components/common/sheet/Sheet.vue';`
`5`	`4`	`import SheetContent from '../../../src/components/common/sheet/SheetContent.vue';`