fix: notifications and store styling

2026-01-31 15:37:09 +01:00 · 2025-03-11 17:08:31 +11:00
parent 9515a21dc6
commit 137241fdbb
15 changed files with 203 additions and 81 deletions
--- a/assets/core.scss
+++ b/assets/core.scss
@@ -64,12 +64,10 @@ $helvetica: (
  background-color: #d4d4d8;
 }

-
 .store-carousel > .carousel__viewport {
-  overflow-y: visible !important;
+  overflow: visible !important;
 }

-
 button {
  cursor: pointer !important;
 }
--- a/components/AddLibraryButton.vue
+++ b/components/AddLibraryButton.vue
@@ -19,7 +19,6 @@
      >
        <ChevronDownIcon class="h-5 w-5 text-white" aria-hidden="true" />
      </MenuButton>
-
      <transition
        enter-active-class="transition ease-out duration-100"
        enter-from-class="transform opacity-0 scale-95"
@@ -92,6 +91,7 @@
 <script setup lang="ts">
 import { PlusIcon, ChevronDownIcon, CheckIcon } from "@heroicons/vue/24/solid";
 import { Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/vue";
+import type { ComponentPublicInstance } from "vue";

 const props = defineProps<{
  gameId: string;
--- a/components/Notification.vue
+++ b/components/Notification.vue
@@ -13,12 +13,16 @@
            v-if="notification.actions.length > 0"
            class="mt-3 flex space-x-7"
          >
-            <button
+            <NuxtLink
+              v-for="[name, link] in notification.actions.map((e) =>
+                e.split('|')
+              )"
              type="button"
-              class="rounded-md bg-white text-sm font-medium text-blue-600 hover:text-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+              :href="link"
+              class="rounded-md text-sm font-medium text-blue-600 hover:text-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
            >
-              Undo
-            </button>
+              {{ name }}
+            </NuxtLink>
            <!-- todo -->
          </div>
        </div>
--- a/layouts/admin.vue
+++ b/layouts/admin.vue
@@ -2,43 +2,81 @@
  <div>
    <TransitionRoot as="template" :show="sidebarOpen">
      <Dialog class="relative z-50 lg:hidden" @close="sidebarOpen = false">
-        <TransitionChild as="template" enter="transition-opacity ease-linear duration-300" enter-from="opacity-0"
-          enter-to="opacity-100" leave="transition-opacity ease-linear duration-300" leave-from="opacity-100"
-          leave-to="opacity-0">
+        <TransitionChild
+          as="template"
+          enter="transition-opacity ease-linear duration-300"
+          enter-from="opacity-0"
+          enter-to="opacity-100"
+          leave="transition-opacity ease-linear duration-300"
+          leave-from="opacity-100"
+          leave-to="opacity-0"
+        >
          <div class="fixed inset-0 bg-zinc-900/80" />
        </TransitionChild>

        <div class="fixed inset-0 flex">
-          <TransitionChild as="template" enter="transition ease-in-out duration-300 transform"
-            enter-from="-translate-x-full" enter-to="translate-x-0"
-            leave="transition ease-in-out duration-300 transform" leave-from="translate-x-0"
-            leave-to="-translate-x-full">
+          <TransitionChild
+            as="template"
+            enter="transition ease-in-out duration-300 transform"
+            enter-from="-translate-x-full"
+            enter-to="translate-x-0"
+            leave="transition ease-in-out duration-300 transform"
+            leave-from="translate-x-0"
+            leave-to="-translate-x-full"
+          >
            <DialogPanel class="relative mr-16 flex w-full max-w-xs flex-1">
-              <TransitionChild as="template" enter="ease-in-out duration-300" enter-from="opacity-0"
-                enter-to="opacity-100" leave="ease-in-out duration-300" leave-from="opacity-100" leave-to="opacity-0">
-                <div class="absolute left-full top-0 flex w-16 justify-center pt-5">
-                  <button type="button" class="-m-2.5 p-2.5" @click="sidebarOpen = false">
+              <TransitionChild
+                as="template"
+                enter="ease-in-out duration-300"
+                enter-from="opacity-0"
+                enter-to="opacity-100"
+                leave="ease-in-out duration-300"
+                leave-from="opacity-100"
+                leave-to="opacity-0"
+              >
+                <div
+                  class="absolute left-full top-0 flex w-16 justify-center pt-5"
+                >
+                  <button
+                    type="button"
+                    class="-m-2.5 p-2.5"
+                    @click="sidebarOpen = false"
+                  >
                    <span class="sr-only">Close sidebar</span>
                    <XMarkIcon class="size-6 text-white" aria-hidden="true" />
                  </button>
                </div>
              </TransitionChild>
              <!-- Sidebar component, swap this element with another sidebar if you like -->
-              <div class="flex grow flex-col gap-y-5 overflow-y-auto bg-zinc-950 px-4 pb-4">
+              <div
+                class="flex grow flex-col gap-y-5 overflow-y-auto bg-zinc-950 px-4 pb-4"
+              >
                <div class="inline-flex items-center py-4 px-4">
                  <Wordmark class="h-full w-auto" alt="Drop`" />
                </div>
                <nav>
-                  <ul role="list" class="grid grid-cols-2 items-stretch gap-4 px-5">
+                  <ul
+                    role="list"
+                    class="grid grid-cols-2 items-stretch gap-4 px-5"
+                  >
                    <li v-for="(item, itemIdx) in navigation" :key="item.route">
-                      <NuxtLink :href="item.route" :class="[
-                        itemIdx === currentNavigationIndex
-                          ? 'bg-zinc-900 text-white'
-                          : 'text-zinc-400 hover:bg-zinc-900 hover:text-white',
-                        'transition group flex flex-col items-center grow gap-x-3 rounded-md px-2 py-3 text-sm font-semibold leading-6',
-                      ]">
-                        <component :is="item.icon" class="h-6 w-6 shrink-0" aria-hidden="true" />
-                        <span class="text-xs text-center">{{ item.label }}</span>
+                      <NuxtLink
+                        :href="item.route"
+                        :class="[
+                          itemIdx === currentNavigationIndex
+                            ? 'bg-zinc-900 text-white'
+                            : 'text-zinc-400 hover:bg-zinc-900 hover:text-white',
+                          'transition group flex flex-col items-center grow gap-x-3 rounded-md px-2 py-3 text-sm font-semibold leading-6',
+                        ]"
+                      >
+                        <component
+                          :is="item.icon"
+                          class="h-6 w-6 shrink-0"
+                          aria-hidden="true"
+                        />
+                        <span class="text-xs text-center">{{
+                          item.label
+                        }}</span>
                      </NuxtLink>
                    </li>
                  </ul>
@@ -52,37 +90,68 @@

    <!-- Static sidebar for desktop -->
    <div
-      class="hidden lg:fixed lg:inset-y-0 lg:left-0 lg:z-50 lg:block lg:w-20 lg:overflow-y-auto lg:bg-zinc-950 lg:pb-4">
+      class="hidden lg:fixed lg:inset-y-0 lg:left-0 lg:z-50 lg:block lg:w-20 lg:overflow-y-auto lg:bg-zinc-950 lg:pb-4"
+    >
      <div class="flex flex-col h-24 shrink-0 items-center justify-center">
        <Logo class="h-8 w-auto" />
-        <span class="mt-1 bg-blue-400 px-1 py-0.5 rounded-md text-xs font-bold font-display">Admin</span>
+        <span
+          class="mt-1 bg-blue-400 px-1 py-0.5 rounded-md text-xs font-bold font-display"
+          >Admin</span
+        >
      </div>
      <nav class="mt-8">
        <ul role="list" class="flex flex-col items-stretch space-y-4 mx-2">
          <li v-for="(item, itemIdx) in navigation" :key="item.route">
-            <NuxtLink :href="item.route" :class="[
-              itemIdx === currentNavigationIndex
-                ? 'bg-zinc-900 text-white'
-                : 'text-zinc-400 hover:bg-zinc-900 hover:text-white',
-              'transition group flex flex-col items-center grow gap-x-3 rounded-md px-2 py-3 text-sm font-semibold leading-6',
-            ]">
-              <component :is="item.icon" class="h-6 w-6 shrink-0" aria-hidden="true" />
+            <NuxtLink
+              :href="item.route"
+              :class="[
+                itemIdx === currentNavigationIndex
+                  ? 'bg-zinc-900 text-white'
+                  : 'text-zinc-400 hover:bg-zinc-900 hover:text-white',
+                'transition group flex flex-col items-center grow gap-x-3 rounded-md px-2 py-3 text-sm font-semibold leading-6',
+              ]"
+            >
+              <component
+                :is="item.icon"
+                class="h-6 w-6 shrink-0"
+                aria-hidden="true"
+              />
              <span class="text-xs text-center">{{ item.label }}</span>
            </NuxtLink>
          </li>
+          <li>
+            <NuxtLink
+              href="/"
+              class="text-zinc-400 hover:bg-zinc-900 hover:text-white transition group flex flex-col items-center grow gap-x-3 rounded-md px-2 py-3 text-sm font-semibold leading-6"
+            >
+              <ArrowLeftIcon
+                class="h-6 w-6 shrink-0"
+                aria-hidden="true"
+              />
+              <span class="text-xs text-center">Back</span>
+            </NuxtLink>
+          </li>
        </ul>
      </nav>
    </div>

-    <div class="sticky top-0 z-40 flex items-center gap-x-6 bg-zinc-900 px-4 py-4 shadow-sm sm:px-6 lg:hidden">
-      <button type="button" class="-m-2.5 p-2.5 text-zinc-400 lg:hidden" @click="sidebarOpen = true">
+    <div
+      class="sticky top-0 z-40 flex items-center gap-x-6 bg-zinc-900 px-4 py-4 shadow-sm sm:px-6 lg:hidden"
+    >
+      <button
+        type="button"
+        class="-m-2.5 p-2.5 text-zinc-400 lg:hidden"
+        @click="sidebarOpen = true"
+      >
        <span class="sr-only">Open sidebar</span>
        <Bars3Icon class="h-6 w-6" aria-hidden="true" />
      </button>
    </div>

    <main class="lg:pl-20 min-h-screen bg-zinc-900 flex flex-col">
-      <div class="flex flex-col grow px-4 py-2 sm:py-10 sm:px-6 lg:px-8 lg:py-6">
+      <div
+        class="flex flex-col grow px-4 py-2 sm:py-10 sm:px-6 lg:px-8 lg:py-6"
+      >
        <!-- Main area -->
        <NuxtPage />
      </div>
@@ -101,7 +170,7 @@ import {
  MenuItems,
  TransitionChild,
  TransitionRoot,
-} from '@headlessui/vue'
+} from "@headlessui/vue";
 import {
  Bars3Icon,
  ServerStackIcon,
@@ -109,6 +178,7 @@ import {
  LockClosedIcon,
  Cog6ToothIcon,
  FlagIcon,
+  BellIcon
 } from "@heroicons/vue/24/outline";
 import type { NavigationItem } from "~/composables/types";
 import { useCurrentNavigationIndex } from "~/composables/current-page-engine";
@@ -129,33 +199,26 @@ const navigation: Array<NavigationItem & { icon: Component }> = [
    prefix: "/admin/auth",
    icon: LockClosedIcon,
  },
-  {
-    label: "Feature Flags",
-    route: "/admin/features",
-    prefix: "/admin/features",
-    icon: FlagIcon,
-  },
  {
    label: "Settings",
    route: "/admin/settings",
    prefix: "/admin/settings",
    icon: Cog6ToothIcon,
  },
-  {
-    label: "Back",
-    route: "/",
-    prefix: ".",
-    icon: ArrowLeftIcon
-  }
 ];

+const notifications = useNotifications();
+const unreadNotifications = computed(() =>
+  notifications.value.filter((e) => !e.read)
+);
+
 const currentNavigationIndex = useCurrentNavigationIndex(navigation);

 const sidebarOpen = ref(false);
 const router = useRouter();
 router.afterEach(() => {
  sidebarOpen.value = false;
-})
+});

 useHead({
  titleTemplate(title) {
--- a/pages/store/index.vue
+++ b/pages/store/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full flex flex-col">
+  <div class="w-full flex flex-col overflow-x-hidden">
    <!-- Hero section -->
    <VueCarousel
      v-if="recent.length > 0"
--- a/server/api/v1/notifications/[id]/index.delete.ts
+++ b/server/api/v1/notifications/[id]/index.delete.ts
@@ -12,10 +12,18 @@ export default defineEventHandler(async (h3) => {
      statusMessage: "Missing notification ID",
    });

+  const userIds = [userId];
+  const hasSystemPerms = await aclManager.allowSystemACL(h3, [
+    "notifications:delete",
+  ]);
+  if (hasSystemPerms) {
+    userIds.push("system");
+  }
+
  const notification = await prisma.notification.delete({
    where: {
      id: notificationId,
-      userId,
+      userId: { in: userIds },
    },
  });

--- a/server/api/v1/notifications/[id]/index.get.ts
+++ b/server/api/v1/notifications/[id]/index.get.ts
@@ -12,10 +12,18 @@ export default defineEventHandler(async (h3) => {
      statusMessage: "Missing notification ID",
    });

+  const userIds = [userId];
+  const hasSystemPerms = await aclManager.allowSystemACL(h3, [
+    "notifications:read",
+  ]);
+  if (hasSystemPerms) {
+    userIds.push("system");
+  }
+
  const notification = await prisma.notification.findFirst({
    where: {
      id: notificationId,
-      userId,
+      userId: { in: userIds },
    },
  });

--- a/server/api/v1/notifications/[id]/read.post.ts
+++ b/server/api/v1/notifications/[id]/read.post.ts
@@ -12,10 +12,18 @@ export default defineEventHandler(async (h3) => {
      statusMessage: "Missing notification ID",
    });

+  const userIds = [userId];
+  const hasSystemPerms = await aclManager.allowSystemACL(h3, [
+    "notifications:mark",
+  ]);
+  if (hasSystemPerms) {
+    userIds.push("system");
+  }
+
  const notification = await prisma.notification.update({
    where: {
      id: notificationId,
-      userId,
+      userId: { in: userIds },
    },
    data: {
      read: true,
--- a/server/api/v1/notifications/index.get.ts
+++ b/server/api/v1/notifications/index.get.ts
@@ -5,9 +5,17 @@ export default defineEventHandler(async (h3) => {
  const userId = await aclManager.getUserIdACL(h3, ["notifications:read"]);
  if (!userId) throw createError({ statusCode: 403 });

+  const userIds = [userId];
+  const hasSystemPerms = await aclManager.allowSystemACL(h3, [
+    "notifications:mark",
+  ]);
+  if (hasSystemPerms) {
+    userIds.push("system");
+  }
+
  const notifications = await prisma.notification.findMany({
    where: {
-      userId,
+      userId: { in: userIds },
    },
    orderBy: {
      created: "desc", // Newest first
--- a/server/api/v1/notifications/readall.post.ts
+++ b/server/api/v1/notifications/readall.post.ts
@@ -5,9 +5,17 @@ export default defineEventHandler(async (h3) => {
  const userId = await aclManager.getUserIdACL(h3, ["notifications:mark"]);
  if (!userId) throw createError({ statusCode: 403 });

+  const userIds = [userId];
+  const hasSystemPerms = await aclManager.allowSystemACL(h3, [
+    "notifications:mark",
+  ]);
+  if(hasSystemPerms){
+    userIds.push("system");
+  }
+
  await prisma.notification.updateMany({
    where: {
-      userId,
+      userId: { in: userIds },
    },
    data: {
      read: true,
--- a/server/api/v1/notifications/ws.get.ts
+++ b/server/api/v1/notifications/ws.get.ts
@@ -9,20 +9,29 @@ const socketSessions: { [key: string]: string } = {};

 export default defineWebSocketHandler({
  async open(peer) {
-    const userId = await aclManager.getUserIdACL(
-      { headers: peer.request?.headers ?? new Headers() },
-      ["notifications:listen"]
-    );
+    const h3 = { headers: peer.request?.headers ?? new Headers() };
+    const userId = await aclManager.getUserIdACL(h3, ["notifications:listen"]);
    if (!userId) {
      peer.send("unauthenticated");
      return;
    }

+    const userIds = [userId];
+
+    const hasSystemPerms = await aclManager.allowSystemACL(h3, [
+      "notifications:listen",
+    ]);
+    if (hasSystemPerms) {
+      userIds.push("system");
+    }
+
    socketSessions[peer.id] = userId;

-    notificationSystem.listen(userId, peer.id, (notification) => {
-      peer.send(JSON.stringify(notification));
-    });
+    for (const listenUserId of userIds) {
+      notificationSystem.listen(listenUserId, peer.id, (notification) => {
+        peer.send(JSON.stringify(notification));
+      });
+    }
  },
  async close(peer, details) {
    const userId = socketSessions[peer.id];
@@ -32,6 +41,7 @@ export default defineWebSocketHandler({
    }

    notificationSystem.unlisten(userId, peer.id);
+    notificationSystem.unlisten("system", peer.id); // In case we were listening as 'system'
    delete socketSessions[peer.id];
  },
 });
--- a/server/h3.d.ts
+++ b/server/h3.d.ts
@@ -1,14 +1 @@
-import { CertificateAuthority } from "./internal/clients/ca";
-import { MetadataHandler } from "./internal/metadata";
-import { ObjectBackend } from "./internal/objects";
-import { SessionHandler } from "./internal/session";
-
-export * from "h3";
-declare module "h3" {
-  interface H3EventContext {
-    ca: CertificateAuthority;
-    objects: ObjectBackend;
-  }
-}
-
 export type MinimumRequestObject = { headers: Headers };
--- a/server/internal/acls/descriptions.ts
+++ b/server/internal/acls/descriptions.ts
@@ -41,6 +41,11 @@ export const systemACLDescriptions: ObjectFromList<typeof systemACLs> = {

  "library:read": "Fetch a list of all games on this instance.",

+  "notifications:read": "Read system notifications.",
+  "notifications:mark": "Mark system notifications as read.",
+  "notifications:listen": "Connect to the system notification websocket.",
+  "notifications:delete": "Delete system notifications.",
+
  "game:read": "Fetch a given game on this instance.",
  "game:update": "Update a game on this instance.",
  "game:delete": "Delete a game on this instance.",
--- a/server/internal/acls/index.ts
+++ b/server/internal/acls/index.ts
@@ -37,6 +37,11 @@ export const systemACLs = [
  "auth:simple:invitation:new",
  "auth:simple:invitation:delete",

+  "notifications:read",
+  "notifications:mark",
+  "notifications:listen",
+  "notifications:delete",
+
  "library:read",
  "game:read",
  "game:update",
--- a/server/internal/library/index.ts
+++ b/server/internal/library/index.ts
@@ -14,6 +14,7 @@ import { recursivelyReaddir } from "../utils/recursivedirs";
 import taskHandler from "../tasks";
 import { parsePlatform } from "../utils/parseplatform";
 import droplet from "@drop/droplet";
+import notificationSystem from "../notifications";

 class LibraryManager {
  private basePath: string;
@@ -297,6 +298,15 @@ class LibraryManager {

        log("Successfully created version!");

+        notificationSystem.systemPush({
+          nonce: `version-create-${gameId}-${versionName}`,
+          title: `'${game.mName}' ('${versionName}') finished importing.`,
+          description: `Drop finished importing version ${versionName} for ${game.mName}.`,
+          actions: [
+            `View|/admin/library/${gameId}`
+          ]
+        })
+
        progress(100);
      },
    });