Minor bugfixes

Author: devvir

resources/js/components/Notifications.vue

@@ -1,14 +1,25 @@
 <script setup lang="ts">
 import { Dropdown, DropdownContent, DropdownTrigger } from '@/components/dropdown';
-import { notifications } from '@/composables/useAuth';
+import { useGlobalProps } from '@/composables/useGlobalProps';
 import { _ } from '@/composables/useTranslations';
 import { Link } from '@inertiajs/vue3';
 import axios from 'axios';
 import { Bell } from 'lucide-vue-next';
 import { route as routeUri } from 'ziggy-js';
 
+const globalProps = useGlobalProps();
+
+// Computed reference to notifications from global props
+const notifications = computed(() => globalProps.auth?.notifications);
+
 const markAsRead = (notification: Notification, close: () => void) => {
-  if (!notification.is_read) axios.post(routeUri('notifications.read', notification.id));
+  if (!notification.is_read) {
+    axios.post(routeUri('notifications.read', notification.id));
+    // Decrement unread count when marking a single notification as read
+    if (globalProps.auth?.notifications) {
+      globalProps.auth.notifications.unread = Math.max(0, globalProps.auth.notifications.unread - 1);
+    }
+  }
 
   notification.is_read = true;
   setTimeout(() => close(), 100);
@@ -17,8 +28,12 @@ const markAsRead = (notification: Notification, close: () => void) => {
 const markAllAsRead = () => {
   axios.post(routeUri('notifications.readAll'));
 
-  // Optimistically mark all as read
-  notifications.value.recent.forEach((n: Notification) => (n.is_read = true));
+  // Optimistically mark all as read using the mutable global props copy
+  if (globalProps.auth?.notifications) {
+    globalProps.auth.notifications.recent.forEach((n: Notification) => (n.is_read = true));
+    // Reset unread count to 0
+    globalProps.auth.notifications.unread = 0;
+  }
 };
 </script>
 
@@ -32,21 +47,21 @@ const markAllAsRead = () => {
 
       <!-- Unread count badge -->
       <span
-        v-if="notifications.unread"
+        v-if="notifications?.unread"
         class="absolute -top-0.5 -right-0.5 flex size-5 items-center justify-center rounded-full bg-accent-foreground text-xs font-bold text-background"
       >
         {{ notifications.unread > 9 ? '9+' : notifications.unread }}
       </span>
     </DropdownTrigger>
 
     <DropdownContent
-      class="top-10 right-0 mr-3 w-80 origin-top overflow-hidden rounded-xl border border-border bg-surface-elevated shadow shadow-accent/70 backdrop-blur-2xl"
+      class="top-10 right-0 mr-3 w-80 origin-top overflow-hidden rounded-xl border border-border bg-surface-elevated shadow shadow-accent/70 backdrop-blur-2xl max-xs:fixed max-xs:inset-x max-xs:top-16"
     >
       <!-- Header -->
       <div class="flex items-center justify-between border-b border-border/30 px-4 py-3">
         <h3 class="text-sm font-semibold text-text">{{ _('Notifications') }}</h3>
         <button
-          v-if="notifications.unread"
+          v-if="notifications?.unread"
           class="text-xs text-text-subtle hocus:text-text"
           @click="markAllAsRead"
         >
@@ -57,8 +72,8 @@ const markAllAsRead = () => {
       <!-- Notifications list -->
       <div class="max-h-96 divide-y divide-border/70 overflow-y-auto">
         <component
+          v-for="notification in notifications?.recent || []"
           :is="notification.data?.action ? Link : 'div'"
-          v-for="notification in notifications.recent"
           :key="notification.id"
           :href="notification.data?.action"
           class="flex items-start gap-3 px-4 py-3 transition-colors"
@@ -85,7 +100,7 @@ const markAllAsRead = () => {
 
         <!-- Empty state -->
         <div
-          v-if="notifications.recent.length === 0"
+          v-if="!notifications?.recent || notifications.recent.length === 0"
           class="flex flex-col items-center justify-center py-12 text-text-subtle"
         >
           <Bell class="mb-3 size-12 opacity-30" />

resources/js/components/layout/NavMain.vue

@@ -4,6 +4,7 @@ import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
+  useSidebar,
 } from '@/components/layout/sidebar';
 import { can } from '@/composables/useAuth';
 import { currentRoute } from '@/composables/useRoute';
@@ -30,6 +31,7 @@ interface NavItem {
 }
 
 const { groupMembers } = useMemberGrouping();
+const { setOpenMobile } = useSidebar();
 
 const allNavItems: NavItem[] = [
   {
@@ -106,6 +108,7 @@ const activeNavItem = computed(() =>
             :href="route(toValue(item.route))"
             :class="{ 'pointer-events-none': item.route === currentRoute }"
             prefetch
+            @click="setOpenMobile(false)"
           >
             <component :is="item.icon" />
             <span>{{ _(toValue(item.label)) }}</span>

resources/js/components/layout/header/AppSidebarHeader.vue

@@ -33,7 +33,7 @@ onAnyMessage((message) => {
 <template>
   <header class="@container/header m-0 mb-base @md:px-base">
     <div
-      class="relative z-20 flex items-center justify-between gap-base border-t border-r border-border bg-linear-to-r from-sidebar/70 to-background to-70% px-8 py-4 shadow-lg shadow-foreground/10 transition-[width,height] ease-linear @md:mt-4 @md:mb-wide @md:rounded-lg @md:px-wide @md:py-3"
+      class="relative z-20 flex items-center justify-between gap-base border-t border-r border-border bg-linear-to-r from-sidebar/70 to-background to-70% px-4 xs:px-8 py-4 shadow-lg shadow-foreground/10 transition-[width,height] ease-linear @md:mt-4 mb-4 @md:mb-wide @md:rounded-lg @md:px-wide @md:py-3"
     >
       <div class="flex flex-1 items-center gap-4">
         <SidebarTrigger />

resources/js/composables/useGlobalProps.ts

@@ -0,0 +1,34 @@
+// Copilot - Pending review
+import { usePage } from '@inertiajs/vue3';
+
+/**
+ * Composable that maintains a reactive, mutable copy of Inertia props.
+ * Useful for optimistic updates without requiring a full page reload.
+ *
+ * The returned object maintains the same structure as usePage().props,
+ * but is a reactive copy that can be mutated to update UI optimistically.
+ * Nested mutations persist until the next Inertia update.
+ *
+ * @returns Reactive copy of Inertia props
+ */
+export function useGlobalProps() {
+  const page = usePage();
+  const globalProps = reactive<Record<string, any>>({});
+
+  // Initialize with current props immediately
+  Object.assign(globalProps, page.props);
+
+  // Sync whenever props change
+  watchEffect(() => {
+    // Remove stale props that no longer exist in the current Inertia props
+    for (const key in globalProps) {
+      if (!(key in page.props)) {
+        delete globalProps[key];
+      }
+    }
+    // Update with current props (adds new ones, updates existing)
+    Object.assign(globalProps, page.props);
+  });
+
+  return globalProps;
+}