fix: notifications and store styling

server/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;

server/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>