From 34d4482f6d23207c32bdf1b82f20a8e1b0282362 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Thu, 19 Mar 2026 18:26:46 -0400
Subject: [PATCH] feat(ui): lift nav branding and add WebSocket status
 indicator

---
 frontend/src/App.vue | 34 +++++++++++++++++++++++++++-------
 1 file changed, 27 insertions(+), 7 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index a3927b7..b0ea18d 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,27 +1,47 @@
 <template>
   <v-app>
     <v-navigation-drawer v-model="drawer" app>
-      <v-list-item
-        prepend-icon="mdi-image-multiple"
-        title="Gallery Subscriber"
-        subtitle="Download Manager"
-      />
+      <!-- Brand header -->
+      <div class="pa-4 bg-surface">
+        <div class="d-flex align-center ga-3">
+          <v-icon color="primary" size="32">mdi-download-network</v-icon>
+          <div>
+            <div class="font-weight-bold text-subtitle-1">GallerySubscriber</div>
+            <div class="text-caption text-medium-emphasis">Download Manager</div>
+          </div>
+        </div>
+      </div>
       <v-divider />
-      <v-list nav density="compact">
+
+      <v-list nav density="comfortable">
         <v-list-item
           v-for="item in navItems"
           :key="item.path"
           :to="item.path"
           :prepend-icon="item.icon"
           :title="item.title"
+          rounded="lg"
+          active-color="primary"
         />
       </v-list>
     </v-navigation-drawer>
 
-    <v-app-bar app elevation="1">
+    <v-app-bar app elevation="0" border="b">
       <v-app-bar-nav-icon @click="drawer = !drawer" />
       <v-toolbar-title>{{ currentPageTitle }}</v-toolbar-title>
       <v-spacer />
+
+      <!-- WebSocket status indicator -->
+      <v-btn icon variant="text" style="cursor: default" :ripple="false">
+        <v-icon
+          :color="wsStore.isConnected ? 'success' : 'error'"
+          size="10"
+        >mdi-circle</v-icon>
+        <v-tooltip activator="parent" location="bottom">
+          {{ wsStore.isConnected ? 'Real-time updates active' : 'Disconnected — real-time updates paused' }}
+        </v-tooltip>
+      </v-btn>
+
       <v-btn icon @click="toggleTheme">
         <v-icon>{{ isDark ? 'mdi-weather-sunny' : 'mdi-weather-night' }}</v-icon>
       </v-btn>