From 20835bc7066445b54abd824174faed1f957576de Mon Sep 17 00:00:00 2001
From: curo1305 <curo1305@proton.me>
Date: Tue, 16 Jun 2026 09:37:47 +0200
Subject: [PATCH] refactor(10-12): migrate view-level SVGs to AppIcon

- CloudStorageView: cloud icon
- SettingsView: checkCircle, exclamationCircle, x (x2)
- AccountView: checkMark (TOTP enabled indicator)
- AdminAiView: chevronDown (accordion)
- AdminUsersView: copy, check, refresh
- SettingsAccountTab: checkMark (TOTP enabled)
- TotpEnrollment: checkMark (verified state)
- CloudCredentialModal: x, chevronRight
- DocumentView: warning (cloud delete modal)
- SharedView: document icon
---
 .../src/components/auth/TotpEnrollment.vue    |  5 ++---
 .../components/cloud/CloudCredentialModal.vue | 13 +++++--------
 .../settings/SettingsAccountTab.vue           |  5 ++---
 frontend/src/views/AccountView.vue            |  5 ++---
 frontend/src/views/CloudStorageView.vue       |  6 ++----
 frontend/src/views/DocumentView.vue           |  5 ++---
 frontend/src/views/SettingsView.vue           | 19 +++++--------------
 frontend/src/views/SharedView.vue             |  6 ++----
 frontend/src/views/admin/AdminAiView.vue      |  9 ++++-----
 frontend/src/views/admin/AdminUsersView.vue   | 15 ++++-----------
 10 files changed, 30 insertions(+), 58 deletions(-)

diff --git a/frontend/src/components/auth/TotpEnrollment.vue b/frontend/src/components/auth/TotpEnrollment.vue
index 004e2c2..7550846 100644
--- a/frontend/src/components/auth/TotpEnrollment.vue
+++ b/frontend/src/components/auth/TotpEnrollment.vue
@@ -76,9 +76,7 @@
           <p v-if="error" class="mt-1 text-xs text-red-600">{{ error }}</p>
           <p v-if="verified" class="mt-1 text-xs text-green-600 flex items-center gap-1">
             <!-- Checkmark icon -->
-            <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
-            </svg>
+            <AppIcon name="checkMark" class="w-4 h-4" />
             Authenticator connected.
           </p>
         </div>
@@ -111,6 +109,7 @@ import { ref } from 'vue'
 import QRCode from 'qrcode'
 import * as api from '../../api/client.js'
 import { useToastStore } from '../../stores/toast.js'
+import AppIcon from '../ui/AppIcon.vue'
 import AppSpinner from '../ui/AppSpinner.vue'
 import BackupCodesDisplay from './BackupCodesDisplay.vue'
 
diff --git a/frontend/src/components/cloud/CloudCredentialModal.vue b/frontend/src/components/cloud/CloudCredentialModal.vue
index 5c7e3e3..c230a89 100644
--- a/frontend/src/components/cloud/CloudCredentialModal.vue
+++ b/frontend/src/components/cloud/CloudCredentialModal.vue
@@ -16,9 +16,7 @@
           aria-label="Close modal"
           class="text-gray-400 hover:text-gray-600 transition-colors"
         >
-          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-          </svg>
+          <AppIcon name="x" class="w-5 h-5" />
         </button>
       </div>
 
@@ -73,13 +71,11 @@
             @click="showAdvanced = !showAdvanced"
             class="text-xs text-indigo-600 hover:text-indigo-800 font-medium transition-colors flex items-center gap-1"
           >
-            <svg
+            <AppIcon
+              name="chevronRight"
               class="w-3 h-3 transition-transform"
               :class="{ 'rotate-90': showAdvanced }"
-              fill="none" stroke="currentColor" viewBox="0 0 24 24"
-            >
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-            </svg>
+            />
             Advanced: custom WebDAV endpoint
           </button>
           <div v-if="showAdvanced" class="mt-2">
@@ -188,6 +184,7 @@
 <script setup>
 import { ref, computed, watch } from 'vue'
 import * as api from '../../api/client.js'
+import AppIcon from '../ui/AppIcon.vue'
 
 const props = defineProps({
   show: {
diff --git a/frontend/src/components/settings/SettingsAccountTab.vue b/frontend/src/components/settings/SettingsAccountTab.vue
index 2933d1a..aac0357 100644
--- a/frontend/src/components/settings/SettingsAccountTab.vue
+++ b/frontend/src/components/settings/SettingsAccountTab.vue
@@ -30,9 +30,7 @@
         <div class="flex items-center gap-3 mb-4">
           <span class="inline-flex items-center gap-1.5 text-sm text-green-700 font-semibold">
             <!-- Checkmark -->
-            <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
-            </svg>
+            <AppIcon name="checkMark" class="w-4 h-4" />
             Enabled
           </span>
         </div>
@@ -171,6 +169,7 @@ import { useRouter } from 'vue-router'
 import { useAuthStore } from '../../stores/auth.js'
 import { useToastStore } from '../../stores/toast.js'
 import * as api from '../../api/client.js'
+import AppIcon from '../ui/AppIcon.vue'
 import PasswordStrengthBar from '../auth/PasswordStrengthBar.vue'
 import TotpEnrollment from '../auth/TotpEnrollment.vue'
 import ConfirmBlock from '../ui/ConfirmBlock.vue'
diff --git a/frontend/src/views/AccountView.vue b/frontend/src/views/AccountView.vue
index 5b717d4..c735f08 100644
--- a/frontend/src/views/AccountView.vue
+++ b/frontend/src/views/AccountView.vue
@@ -33,9 +33,7 @@
           <div class="flex items-center gap-3 mb-4">
             <span class="inline-flex items-center gap-1.5 text-sm text-green-700 font-semibold">
               <!-- Checkmark -->
-              <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
-              </svg>
+              <AppIcon name="checkMark" class="w-4 h-4" />
               Enabled
             </span>
           </div>
@@ -174,6 +172,7 @@ import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useAuthStore } from '../stores/auth.js'
 import * as api from '../api/client.js'
+import AppIcon from '../components/ui/AppIcon.vue'
 import PasswordStrengthBar from '../components/auth/PasswordStrengthBar.vue'
 import TotpEnrollment from '../components/auth/TotpEnrollment.vue'
 import ConfirmBlock from '../components/ui/ConfirmBlock.vue'
diff --git a/frontend/src/views/CloudStorageView.vue b/frontend/src/views/CloudStorageView.vue
index 6728e68..18459d5 100644
--- a/frontend/src/views/CloudStorageView.vue
+++ b/frontend/src/views/CloudStorageView.vue
@@ -42,10 +42,7 @@
         >
           <!-- Provider icon -->
           <div class="w-7 h-7 rounded-lg flex items-center justify-center shrink-0" :class="providerBg(conn.provider)">
-            <svg class="w-4 h-4" :class="providerColor(conn.provider)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
-            </svg>
+            <AppIcon name="cloud" class="w-4 h-4" :class="providerColor(conn.provider)" />
           </div>
 
           <span class="text-sm font-medium text-gray-900 truncate">{{ conn.display_name }}</span>
@@ -69,6 +66,7 @@ import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { useCloudConnectionsStore } from '../stores/cloudConnections.js'
 import { providerColor, providerBg } from '../utils/formatters.js'
+import AppIcon from '../components/ui/AppIcon.vue'
 import BreadcrumbBar from '../components/ui/BreadcrumbBar.vue'
 import EmptyState from '../components/ui/EmptyState.vue'
 
diff --git a/frontend/src/views/DocumentView.vue b/frontend/src/views/DocumentView.vue
index f2cf4e6..f4619c2 100644
--- a/frontend/src/views/DocumentView.vue
+++ b/frontend/src/views/DocumentView.vue
@@ -122,9 +122,7 @@
         class="bg-white rounded-2xl shadow-xl p-6 max-w-sm w-full mx-4"
       >
         <div class="flex items-center gap-2 mb-2">
-          <svg class="w-5 h-5 text-amber-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-          </svg>
+          <AppIcon name="warning" class="w-5 h-5 text-amber-500 shrink-0" />
           <h2 id="cloud-delete-modal-title" class="text-lg font-semibold text-gray-900">Cloud delete failed</h2>
         </div>
         <p class="text-sm text-gray-600 mb-4">
@@ -149,6 +147,7 @@
 import { ref, computed, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { formatDate, formatSize } from '../utils/formatters.js'
+import AppIcon from '../components/ui/AppIcon.vue'
 import TopicBadge from '../components/topics/TopicBadge.vue'
 import DocumentPreviewModal from '../components/documents/DocumentPreviewModal.vue'
 import { useDocumentsStore } from '../stores/documents.js'
diff --git a/frontend/src/views/SettingsView.vue b/frontend/src/views/SettingsView.vue
index 4657f2f..46bc61a 100644
--- a/frontend/src/views/SettingsView.vue
+++ b/frontend/src/views/SettingsView.vue
@@ -10,10 +10,7 @@
       v-if="oauthSuccessProvider"
       class="fixed top-4 right-4 z-50 flex items-center gap-3 bg-white border border-green-200 rounded-xl shadow-lg px-5 py-4 max-w-sm"
     >
-      <svg class="w-5 h-5 text-green-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-          d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-      </svg>
+      <AppIcon name="checkCircle" class="w-5 h-5 text-green-500 shrink-0" />
       <div class="flex-1 min-w-0">
         <p class="text-sm font-semibold text-gray-900">{{ providerDisplayName(oauthSuccessProvider) }} connected</p>
         <p class="text-xs text-gray-500 mt-0.5">Your files are now available in the sidebar.</p>
@@ -23,9 +20,7 @@
         aria-label="Dismiss notification"
         class="text-gray-400 hover:text-gray-600 shrink-0"
       >
-        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-        </svg>
+        <AppIcon name="x" class="w-4 h-4" />
       </button>
     </div>
 
@@ -60,10 +55,7 @@
         v-if="oauthError"
         class="mb-6 flex items-start gap-3 bg-red-50 border border-red-200 rounded-xl px-5 py-4"
       >
-        <svg class="w-5 h-5 text-red-500 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-            d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-        </svg>
+        <AppIcon name="exclamationCircle" class="w-5 h-5 text-red-500 shrink-0 mt-0.5" />
         <div class="flex-1 min-w-0">
           <p class="text-sm font-semibold text-red-700">Connection failed</p>
           <p class="text-sm text-red-600 mt-0.5">{{ oauthError }}</p>
@@ -74,9 +66,7 @@
           aria-label="Dismiss error"
           class="text-red-400 hover:text-red-600 shrink-0"
         >
-          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-          </svg>
+          <AppIcon name="x" class="w-4 h-4" />
         </button>
       </div>
 
@@ -88,6 +78,7 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
+import AppIcon from '../components/ui/AppIcon.vue'
 import SettingsPreferencesTab from '../components/settings/SettingsPreferencesTab.vue'
 import SettingsAiTab from '../components/settings/SettingsAiTab.vue'
 import SettingsCloudTab from '../components/settings/SettingsCloudTab.vue'
diff --git a/frontend/src/views/SharedView.vue b/frontend/src/views/SharedView.vue
index 3b4f08b..2f9ee0f 100644
--- a/frontend/src/views/SharedView.vue
+++ b/frontend/src/views/SharedView.vue
@@ -26,10 +26,7 @@
         <div class="flex items-start gap-3">
           <!-- Icon -->
           <div class="w-9 h-9 rounded-lg bg-indigo-50 flex items-center justify-center shrink-0 mt-0.5">
-            <svg class="w-5 h-5 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-            </svg>
+            <AppIcon name="document" class="w-5 h-5 text-indigo-500" />
           </div>
 
           <div class="flex-1 min-w-0">
@@ -55,6 +52,7 @@
 import { ref, onMounted } from 'vue'
 import * as api from '../api/client.js'
 import { formatDate, formatSize } from '../utils/formatters.js'
+import AppIcon from '../components/ui/AppIcon.vue'
 import BreadcrumbBar from '../components/ui/BreadcrumbBar.vue'
 import EmptyState from '../components/ui/EmptyState.vue'
 
diff --git a/frontend/src/views/admin/AdminAiView.vue b/frontend/src/views/admin/AdminAiView.vue
index 1b48e89..55318b0 100644
--- a/frontend/src/views/admin/AdminAiView.vue
+++ b/frontend/src/views/admin/AdminAiView.vue
@@ -38,12 +38,10 @@
                 class="bg-green-100 text-green-700 text-xs font-semibold px-2 py-0.5 rounded-full"
               >Active</span>
             </div>
-            <svg
+            <AppIcon
+              name="chevronDown"
               :class="['w-4 h-4 text-gray-400 transition-transform', openProviderId === prov.provider_id ? 'rotate-180' : '']"
-              fill="none" stroke="currentColor" viewBox="0 0 24 24"
-            >
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-            </svg>
+            />
           </button>
 
           <div v-if="openProviderId === prov.provider_id" class="px-6 pb-5 pt-2 bg-gray-50 space-y-3">
@@ -208,6 +206,7 @@
 import { ref, reactive, onMounted } from 'vue'
 import * as api from '../../api/client.js'
 import { getAiConfig, saveAiConfig, testAiConnection } from '../../api/client.js'
+import AppIcon from '../../components/ui/AppIcon.vue'
 import SearchableModelSelect from '../../components/ui/SearchableModelSelect.vue'
 import BreadcrumbBar from '../../components/ui/BreadcrumbBar.vue'
 
diff --git a/frontend/src/views/admin/AdminUsersView.vue b/frontend/src/views/admin/AdminUsersView.vue
index 2392198..a3d4fcb 100644
--- a/frontend/src/views/admin/AdminUsersView.vue
+++ b/frontend/src/views/admin/AdminUsersView.vue
@@ -38,23 +38,15 @@
               class="px-3 py-2 border border-gray-300 rounded-lg text-sm text-gray-600 hover:bg-gray-50 transition-colors"
               :title="passwordCopied ? 'Copied!' : 'Copy password'"
             >
-              <svg v-if="!passwordCopied" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                  d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
-              </svg>
-              <svg v-else class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-              </svg>
+              <AppIcon v-if="!passwordCopied" name="copy" class="w-4 h-4" />
+              <AppIcon v-else name="check" class="w-4 h-4 text-green-600" />
             </button>
             <button
               @click="generatePassword"
               class="px-3 py-2 border border-gray-300 rounded-lg text-sm text-gray-600 hover:bg-gray-50 transition-colors"
               title="Regenerate password"
             >
-              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                  d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
-              </svg>
+              <AppIcon name="refresh" class="w-4 h-4" />
             </button>
           </div>
         </div>
@@ -272,6 +264,7 @@
 import { ref, reactive, onMounted } from 'vue'
 import { formatDate } from '../../utils/formatters.js'
 import * as api from '../../api/client.js'
+import AppIcon from '../../components/ui/AppIcon.vue'
 import BreadcrumbBar from '../../components/ui/BreadcrumbBar.vue'
 
 const users = ref([])