From 3e79423cfdbf7785da08c949380f23050577fbb5 Mon Sep 17 00:00:00 2001
From: curo1305 <curo1305@proton.me>
Date: Mon, 15 Jun 2026 20:27:00 +0200
Subject: [PATCH] feat(10-08): BreadcrumbBar in remaining admin views +
 SettingsView; EmptyState in SharedView + CloudStorageView

- AdminQuotasView: BreadcrumbBar (Quotas, showRoot=false)
- AdminAiView: BreadcrumbBar (AI Config, showRoot=false)
- AdminOverviewView: BreadcrumbBar (empty segments, showRoot=false) above existing h2
- SettingsView: BreadcrumbBar with breadcrumbSegments computed (Settings > activeTabLabel)
- SharedView: BreadcrumbBar (Shared with me) + EmptyState (icon=inbox)
- CloudStorageView: BreadcrumbBar in toolbar + EmptyState (icon=cloud) with Settings router-link CTA
- Full test suite: 178 passed, 0 failures
---
 frontend/src/views/CloudStorageView.vue       | 22 +++++++++++++------
 frontend/src/views/SettingsView.vue           | 10 ++++++++-
 frontend/src/views/SharedView.vue             | 14 ++++++++----
 frontend/src/views/admin/AdminAiView.vue      |  3 +++
 .../src/views/admin/AdminOverviewView.vue     |  3 +++
 frontend/src/views/admin/AdminQuotasView.vue  |  3 +++
 6 files changed, 43 insertions(+), 12 deletions(-)

diff --git a/frontend/src/views/CloudStorageView.vue b/frontend/src/views/CloudStorageView.vue
index 9e28ac4..6728e68 100644
--- a/frontend/src/views/CloudStorageView.vue
+++ b/frontend/src/views/CloudStorageView.vue
@@ -4,7 +4,7 @@
     <!-- Toolbar -->
     <div class="sticky top-0 z-10 bg-white border-b border-gray-100">
       <div class="px-6 py-3 flex items-center gap-3">
-        <span class="text-sm font-medium text-gray-700">Cloud Storage</span>
+        <BreadcrumbBar :segments="[{ label: 'Cloud Storage' }]" :show-root="false" />
       </div>
     </div>
 
@@ -20,12 +20,18 @@
 
       <div v-if="loading" class="text-sm text-gray-400 py-8 text-center">Loading…</div>
 
-      <div v-else-if="connections.length === 0" class="text-center py-12 text-gray-400">
-        <p class="text-sm">No cloud storage connected.</p>
-        <router-link to="/settings" class="text-sm text-indigo-600 hover:underline mt-1 inline-block">
-          Add a connection in Settings
-        </router-link>
-      </div>
+      <EmptyState
+        v-else-if="connections.length === 0"
+        icon="cloud"
+        headline="No cloud storage connected"
+        subtext="Connect Google Drive, OneDrive, Nextcloud, or a WebDAV server in Settings."
+      >
+        <template #cta>
+          <router-link to="/settings" class="mt-3 inline-block text-sm text-indigo-600 hover:underline">
+            Go to Settings
+          </router-link>
+        </template>
+      </EmptyState>
 
       <div v-else class="flex flex-col divide-y divide-gray-100 border border-gray-100 rounded-xl overflow-hidden">
         <div
@@ -63,6 +69,8 @@ import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { useCloudConnectionsStore } from '../stores/cloudConnections.js'
 import { providerColor, providerBg } from '../utils/formatters.js'
+import BreadcrumbBar from '../components/ui/BreadcrumbBar.vue'
+import EmptyState from '../components/ui/EmptyState.vue'
 
 const router = useRouter()
 const cloudStore = useCloudConnectionsStore()
diff --git a/frontend/src/views/SettingsView.vue b/frontend/src/views/SettingsView.vue
index 616f5b3..4657f2f 100644
--- a/frontend/src/views/SettingsView.vue
+++ b/frontend/src/views/SettingsView.vue
@@ -1,5 +1,7 @@
 <template>
   <div class="p-8 max-w-3xl mx-auto">
+    <BreadcrumbBar :segments="breadcrumbSegments" :show-root="false" class="mb-4" />
+
     <h2 class="text-2xl font-semibold text-gray-900 mb-1">Settings</h2>
     <p class="text-sm text-gray-500 mb-6">Account-level options for your DocuVault workspace.</p>
 
@@ -84,12 +86,13 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import SettingsPreferencesTab from '../components/settings/SettingsPreferencesTab.vue'
 import SettingsAiTab from '../components/settings/SettingsAiTab.vue'
 import SettingsCloudTab from '../components/settings/SettingsCloudTab.vue'
 import SettingsAccountTab from '../components/settings/SettingsAccountTab.vue'
+import BreadcrumbBar from '../components/ui/BreadcrumbBar.vue'
 
 const router = useRouter()
 
@@ -101,6 +104,11 @@ const tabs = [
 ]
 
 const activeTab = ref('preferences')
+
+const breadcrumbSegments = computed(() => {
+  const tab = tabs.find(t => t.id === activeTab.value)
+  return [{ label: 'Settings' }, { label: tab?.label ?? activeTab.value }]
+})
 const oauthSuccessProvider = ref(null)
 const oauthError = ref(null)
 
diff --git a/frontend/src/views/SharedView.vue b/frontend/src/views/SharedView.vue
index 0cbda72..3b4f08b 100644
--- a/frontend/src/views/SharedView.vue
+++ b/frontend/src/views/SharedView.vue
@@ -1,15 +1,19 @@
 <template>
   <div class="p-8 max-w-4xl mx-auto">
+    <BreadcrumbBar :segments="[{ label: 'Shared with me' }]" :show-root="false" class="mb-4" />
+
     <h2 class="text-2xl font-bold text-gray-900 mb-1">Shared with me</h2>
     <p class="text-gray-500 text-sm mb-6">Documents other users have shared with you.</p>
 
     <div v-if="loading" class="text-sm text-gray-400">Loading…</div>
 
     <!-- Empty state -->
-    <div v-else-if="sharedDocs.length === 0" class="text-center py-12 text-gray-400">
-      <p class="text-sm font-medium text-gray-500">No documents shared with you yet.</p>
-      <p class="text-xs mt-1">When someone shares a document with you, it will appear here.</p>
-    </div>
+    <EmptyState
+      v-else-if="sharedDocs.length === 0"
+      icon="inbox"
+      headline="Nothing shared with you yet"
+      subtext="When someone shares a document with you, it will appear here."
+    />
 
     <!-- Shared documents list -->
     <div v-else class="grid gap-3">
@@ -51,6 +55,8 @@
 import { ref, onMounted } from 'vue'
 import * as api from '../api/client.js'
 import { formatDate, formatSize } from '../utils/formatters.js'
+import BreadcrumbBar from '../components/ui/BreadcrumbBar.vue'
+import EmptyState from '../components/ui/EmptyState.vue'
 
 const sharedDocs = ref([])
 const loading = ref(false)
diff --git a/frontend/src/views/admin/AdminAiView.vue b/frontend/src/views/admin/AdminAiView.vue
index d6f502e..1b48e89 100644
--- a/frontend/src/views/admin/AdminAiView.vue
+++ b/frontend/src/views/admin/AdminAiView.vue
@@ -1,5 +1,7 @@
 <template>
   <div>
+    <BreadcrumbBar :segments="[{ label: 'AI Config' }]" :show-root="false" class="mb-4" />
+
     <section class="bg-white rounded-xl border border-gray-200 overflow-hidden mb-6">
       <div class="px-6 py-4 border-b border-gray-200">
         <h2 class="text-sm font-semibold text-gray-900">System AI Providers (Global)</h2>
@@ -207,6 +209,7 @@ import { ref, reactive, onMounted } from 'vue'
 import * as api from '../../api/client.js'
 import { getAiConfig, saveAiConfig, testAiConnection } from '../../api/client.js'
 import SearchableModelSelect from '../../components/ui/SearchableModelSelect.vue'
+import BreadcrumbBar from '../../components/ui/BreadcrumbBar.vue'
 
 
 const _PROVIDER_DEFAULTS = {
diff --git a/frontend/src/views/admin/AdminOverviewView.vue b/frontend/src/views/admin/AdminOverviewView.vue
index 2740018..00eb9c7 100644
--- a/frontend/src/views/admin/AdminOverviewView.vue
+++ b/frontend/src/views/admin/AdminOverviewView.vue
@@ -1,5 +1,7 @@
 <template>
   <div>
+    <BreadcrumbBar :segments="[]" :show-root="false" class="mb-4" />
+
     <h2 class="text-xl font-semibold text-gray-900 mb-6">Overview</h2>
 
     <div v-if="loading" class="text-gray-500">Loading overview…</div>
@@ -71,6 +73,7 @@
 import { ref, onMounted } from 'vue'
 import { getAdminOverview } from '../../api/admin.js'
 import { formatSize, formatDate } from '../../utils/formatters.js'
+import BreadcrumbBar from '../../components/ui/BreadcrumbBar.vue'
 
 const loading = ref(false)
 const error = ref(null)
diff --git a/frontend/src/views/admin/AdminQuotasView.vue b/frontend/src/views/admin/AdminQuotasView.vue
index cf9d5a5..59608f1 100644
--- a/frontend/src/views/admin/AdminQuotasView.vue
+++ b/frontend/src/views/admin/AdminQuotasView.vue
@@ -1,5 +1,7 @@
 <template>
   <div>
+    <BreadcrumbBar :segments="[{ label: 'Quotas' }]" :show-root="false" class="mb-4" />
+
     <div v-if="loading" class="bg-white rounded-xl border border-gray-200 p-8 text-center">
       <div class="flex items-center justify-center gap-2 text-gray-400 text-sm">
         <span class="animate-spin rounded-full border-2 border-current border-t-transparent w-4 h-4"></span>
@@ -87,6 +89,7 @@
 <script setup>
 import { ref, reactive, onMounted } from 'vue'
 import * as api from '../../api/client.js'
+import BreadcrumbBar from '../../components/ui/BreadcrumbBar.vue'
 
 const rows = ref([])
 const loading = ref(false)