Internal server error fixes, 7z fixes, OIDC fixes (#289)

* fix: add no-prisma-delete lint

* fix: typescript for lint

* fix: bump droplet

* fix: oidc scopes override

* fix: type errors

* feat: delete all notifications

* fix: lint

* fix: light mode style fixes

pages/account/notifications.vue

@@ -1,20 +1,32 @@
 <template>
   <div>
     <div class="border-b border-zinc-800 pb-4 w-full">
-      <div class="flex items-center justify-between w-full">
+      <div
+        class="gap-2 flex flex-col lg:flex-row lg:items-center justify-between w-full"
+      >
         <h2
           class="text-xl font-semibold tracking-tight text-zinc-100 sm:text-3xl"
         >
           {{ $t("account.notifications.notifications") }}
         </h2>
-        <button
-          :disabled="notifications.length === 0"
-          class="inline-flex items-center justify-center gap-x-2 rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm transition-all duration-200 hover:bg-zinc-700 hover:scale-[1.02] hover:shadow-lg active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-zinc-800 disabled:hover:scale-100 disabled:hover:shadow-none"
-          @click="markAllAsRead"
-        >
-          <CheckIcon class="size-4" />
-          {{ $t("account.notifications.markAllAsRead") }}
-        </button>
+        <div class="inline-flex gap-x-2">
+          <button
+            :disabled="notifications.length === 0"
+            class="inline-flex items-center justify-center gap-x-2 rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm transition-all duration-200 hover:bg-zinc-700 hover:scale-[1.02] hover:shadow-lg active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-zinc-800 disabled:hover:scale-100 disabled:hover:shadow-none"
+            @click="markAllAsRead"
+          >
+            <CheckIcon class="size-4" />
+            {{ $t("account.notifications.markAllAsRead") }}
+          </button>
+          <button
+            :disabled="notifications.length === 0"
+            class="inline-flex items-center justify-center gap-x-2 rounded-md bg-red-800 px-3 py-2 text-sm font-semibold text-red-100 shadow-sm transition-all duration-200 hover:bg-red-700 hover:scale-[1.02] hover:shadow-lg active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-red-800 disabled:hover:scale-100 disabled:hover:shadow-none"
+            @click="clearNotifications"
+          >
+            <TrashIcon class="size-4" />
+            {{ $t("account.notifications.clear") }}
+          </button>
+        </div>
       </div>
       <p
         class="mt-2 text-pretty text-sm font-medium text-zinc-400 sm:text-md/8"
@@ -31,7 +43,7 @@
         :class="{ 'opacity-75': notification.read }"
       >
         <div class="p-6">
-          <div class="flex items-start justify-between">
+          <div class="flex flex-col lg:flex-row items-start justify-between">
             <div class="flex-1">
               <h3 class="text-base font-semibold text-zinc-100">
                 {{ notification.title }}
@@ -52,7 +64,9 @@
                 </NuxtLink>
               </div>
             </div>
-            <div class="ml-4 flex flex-shrink-0 items-center gap-x-2">
+            <div
+              class="mt-4 lg:mt-0 lg:ml-4 flex flex-shrink-0 items-center gap-x-2"
+            >
               <span class="text-xs text-zinc-500">
                 <RelativeTime :date="notification.created" />
               </span>
@@ -106,22 +120,12 @@ useHead({
 });
 
 // Fetch notifications
-const notifications = ref<SerializeObject<NotificationModel>[]>([]);
-
-async function fetchNotifications() {
-  const { data } = await useFetch("/api/v1/notifications");
-  notifications.value = data.value || [];
-}
-
-// Initial fetch
-await fetchNotifications();
+const notifications = useNotifications();
 
 // Mark a notification as read
 async function markAsRead(id: string) {
   await $dropFetch(`/api/v1/notifications/${id}/read`, { method: "POST" });
-  const notification = notifications.value.find(
-    (n: SerializeObject<NotificationModel>) => n.id === id,
-  );
+  const notification = notifications.value.find((n) => n.id === id);
   if (notification) {
     notification.read = true;
   }
@@ -129,12 +133,21 @@ async function markAsRead(id: string) {
 
 // Mark all notifications as read
 async function markAllAsRead() {
-  await $dropFetch("/api/v1/notifications/readall", { method: "POST" });
-  notifications.value.forEach(
-    (notification: SerializeObject<NotificationModel>) => {
-      notification.read = true;
-    },
-  );
+  await $dropFetch("/api/v1/notifications/readall", {
+    method: "POST",
+    failTitle: "Failed to read all notifications",
+  });
+  notifications.value.forEach((notification) => {
+    notification.read = true;
+  });
+}
+
+async function clearNotifications() {
+  await $dropFetch("/api/v1/notifications/clear", {
+    method: "POST",
+    failTitle: "Failed to clear notifications",
+  });
+  notifications.value = [];
 }
 
 // Delete a notification

pages/admin/settings.vue

@@ -2,7 +2,7 @@
   <div class="flex flex-col">
     <!-- tabs-->
     <div>
-      <div class="border-b border-gray-200 dark:border-white/10">
+      <div class="border-b border-white/10">
         <nav class="-mb-px flex gap-x-2" aria-label="Tabs">
           <NuxtLink
             v-for="(tab, tabIdx) in navigation"
@@ -10,8 +10,8 @@
             :href="tab.route"
             :class="[
               currentNavigationIndex == tabIdx
-                ? 'border-blue-500 text-blue-600 dark:border-blue-400 dark:text-blue-400'
-                : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:border-white/20 dark:hover:text-gray-300',
+                ? 'border-blue-400 text-blue-400'
+                : 'border-transparent text-gray-400 hover:border-white/20 hover:text-gray-300',
               'group inline-flex items-center border-b-2 px-1 py-4 text-sm font-medium',
             ]"
             :aria-current="tab ? 'page' : undefined"
@@ -20,8 +20,8 @@
               :is="tab.icon"
               :class="[
                 currentNavigationIndex == tabIdx
-                  ? 'text-blue-500 dark:text-blue-400'
-                  : 'text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-400',
+                  ? 'text-blue-400'
+                  : 'text-gray-500 group-hover:text-gray-400',
                 'mr-2 -ml-0.5 size-5',
               ]"
               aria-hidden="true"