fix: notifications and store styling

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;
 }

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;

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
+              {{ name }}
-            </button>
+            </NuxtLink>
             <!-- todo -->
           </div>
         </div>

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"
+        <TransitionChild
-          enter-to="opacity-100" leave="transition-opacity ease-linear duration-300" leave-from="opacity-100"
+          as="template"
-          leave-to="opacity-0">
+          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"
+          <TransitionChild
-            enter-from="-translate-x-full" enter-to="translate-x-0"
+            as="template"
-            leave="transition ease-in-out duration-300 transform" leave-from="translate-x-0"
+            enter="transition ease-in-out duration-300 transform"
-            leave-to="-translate-x-full">
+            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"
+              <TransitionChild
-                enter-to="opacity-100" leave="ease-in-out duration-300" leave-from="opacity-100" leave-to="opacity-0">
+                as="template"
-                <div class="absolute left-full top-0 flex w-16 justify-center pt-5">
+                enter="ease-in-out duration-300"
-                  <button type="button" class="-m-2.5 p-2.5" @click="sidebarOpen = false">
+                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="[
+                      <NuxtLink
-                        itemIdx === currentNavigationIndex
+                        :href="item.route"
-                          ? 'bg-zinc-900 text-white'
+                        :class="[
-                          : 'text-zinc-400 hover:bg-zinc-900 hover:text-white',
+                          itemIdx === currentNavigationIndex
-                        'transition group flex flex-col items-center grow gap-x-3 rounded-md px-2 py-3 text-sm font-semibold leading-6',
+                            ? 'bg-zinc-900 text-white'
-                      ]">
+                            : 'text-zinc-400 hover:bg-zinc-900 hover:text-white',
-                        <component :is="item.icon" class="h-6 w-6 shrink-0" aria-hidden="true" />
+                          'transition group flex flex-col items-center grow gap-x-3 rounded-md px-2 py-3 text-sm font-semibold leading-6',
-                        <span class="text-xs text-center">{{ item.label }}</span>
+                        ]"
+                      >
+                        <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="[
+            <NuxtLink
-              itemIdx === currentNavigationIndex
+              :href="item.route"
-                ? 'bg-zinc-900 text-white'
+              :class="[
-                : 'text-zinc-400 hover:bg-zinc-900 hover:text-white',
+                itemIdx === currentNavigationIndex
-              'transition group flex flex-col items-center grow gap-x-3 rounded-md px-2 py-3 text-sm font-semibold leading-6',
+                  ? 'bg-zinc-900 text-white'
-            ]">
+                  : 'text-zinc-400 hover:bg-zinc-900 hover:text-white',
-              <component :is="item.icon" class="h-6 w-6 shrink-0" aria-hidden="true" />
+                '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">
+    <div
-      <button type="button" class="-m-2.5 p-2.5 text-zinc-400 lg:hidden" @click="sidebarOpen = true">
+      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) {

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"

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 },
     },
   });
 

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 },
     },
   });
 

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,

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

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,

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(
+    const h3 = { headers: peer.request?.headers ?? new Headers() };
-      { headers: peer.request?.headers ?? new Headers() },
+    const userId = await aclManager.getUserIdACL(h3, ["notifications:listen"]);
-      ["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) => {
+    for (const listenUserId of userIds) {
-      peer.send(JSON.stringify(notification));
+      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];
   },
 });

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 };

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.",

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",

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);
       },
     });