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

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'
 

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: {

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'