refactor(10-12): migrate cloud/settings/UI SVGs to AppIcon

- SearchableModelSelect: chevronDown + pencilEdit - SettingsCloudTab: warning (x2) + cloud icons - CloudProviderTreeItem: cloud icon - CloudFolderTreeItem: folder + fileDoc icons
2026-06-16 09:33:57 +02:00
parent 939ea79977
commit bbb9db73e7
4 changed files with 14 additions and 44 deletions
@@ -7,26 +7,8 @@
    @select="navigate"
  >
    <template #icon>
-      <svg
-        v-if="folder.is_dir"
-        class="w-4 h-4 shrink-0 text-gray-400"
-        fill="none"
-        stroke="currentColor"
-        viewBox="0 0 24 24"
-      >
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-          d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V7z" />
-      </svg>
-      <svg
-        v-else
-        class="w-4 h-4 shrink-0 text-gray-400"
-        fill="none"
-        stroke="currentColor"
-        viewBox="0 0 24 24"
-      >
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-          d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
-      </svg>
+      <AppIcon v-if="folder.is_dir" name="folder" class="w-4 h-4 shrink-0 text-gray-400" />
+      <AppIcon v-else name="fileDoc" class="w-4 h-4 shrink-0 text-gray-400" />
    </template>
    <template #children="{ children }">
      <CloudFolderTreeItem
@@ -43,6 +25,7 @@
 <script setup>
 import { useRouter } from 'vue-router'
 import * as api from '../../api/client.js'
+import AppIcon from '../ui/AppIcon.vue'
 import TreeItem from '../ui/TreeItem.vue'

 const props = defineProps({
@@ -6,10 +6,7 @@
    @select="navigateToRoot"
  >
    <template #icon>
-      <svg class="w-4 h-4 shrink-0" :class="providerIconColor" 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 shrink-0" :class="providerIconColor" />
    </template>
    <template #children="{ children }">
      <CloudFolderTreeItem
@@ -27,6 +24,7 @@
 import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 import * as api from '../../api/client.js'
+import AppIcon from '../ui/AppIcon.vue'
 import TreeItem from '../ui/TreeItem.vue'
 import CloudFolderTreeItem from './CloudFolderTreeItem.vue'
 import { providerColor } from '../../utils/formatters.js'
@@ -12,10 +12,7 @@
        v-if="oauthError"
        class="mb-4 p-3 rounded-lg bg-red-50 border border-red-200 flex items-start gap-2"
      >
-        <svg class="w-4 h-4 text-red-600 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 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-4 h-4 text-red-600 shrink-0 mt-0.5" />
        <p class="text-sm text-red-700">{{ oauthError }}</p>
      </div>

@@ -28,10 +25,7 @@
            <div class="flex items-center gap-3 min-w-0">
              <!-- Provider icon -->
              <div class="w-8 h-8 rounded-lg bg-gray-50 border border-gray-200 flex items-center justify-center">
-                <svg class="w-5 h-5" :class="provider.iconColor" 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-5 h-5" :class="provider.iconColor" />
              </div>
              <div class="min-w-0">
                <span class="text-sm font-semibold text-gray-900">{{ provider.label }}</span>
@@ -154,10 +148,7 @@
            v-if="connectionFor(provider.key)?.status === 'REQUIRES_REAUTH'"
            class="mx-0 mb-2 p-3 rounded-lg bg-yellow-50 border border-yellow-200 flex items-start gap-2"
          >
-            <svg class="w-4 h-4 text-yellow-600 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 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-4 h-4 text-yellow-600 shrink-0 mt-0.5" />
            <p class="text-sm text-yellow-800">
              Your {{ provider.label }} connection needs to be re-authorized.
              Click <strong>Reconnect {{ provider.label }}</strong> to restore access.
@@ -203,6 +194,7 @@
 import { ref, computed, onMounted } from 'vue'
 import { useCloudConnectionsStore } from '../../stores/cloudConnections.js'
 import { initiateOAuth } from '../../api/client.js'
+import AppIcon from '../ui/AppIcon.vue'
 import ConfirmBlock from '../ui/ConfirmBlock.vue'
 import CloudCredentialModal from '../cloud/CloudCredentialModal.vue'

@@ -24,12 +24,10 @@
        class="absolute inset-y-0 right-0 flex items-center px-2 text-gray-400 hover:text-gray-600"
        @mousedown.prevent="toggleOpen"
      >
-        <svg
+        <AppIcon
+          name="chevronDown"
          :class="['w-4 h-4 transition-transform', isOpen ? '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>

@@ -82,9 +80,7 @@
          class="sticky bottom-0 flex items-center gap-2 px-3 py-2 text-sm text-indigo-600 font-medium border-t border-gray-100 bg-white cursor-pointer hover:bg-indigo-50 select-none"
          @mousedown.prevent="selectManual"
        >
-          <svg class="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
-          </svg>
+          <AppIcon name="pencilEdit" class="w-3.5 h-3.5 shrink-0" />
          <span>{{ query.trim() ? `Use "${query.trim()}"` : 'Enter model name manually' }}</span>
        </li>
      </ul>
@@ -95,6 +91,7 @@
 <script setup>
 import { ref, computed, watch, nextTick, onUnmounted } from 'vue'
 import { getAiModels } from '../../api/client.js'
+import AppIcon from './AppIcon.vue'

 const props = defineProps({
  modelValue: { type: String, default: '' },