curo/kite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(10-12): migrate view-level SVGs to AppIcon

Browse Source 
- 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
This commit is contained in:
curo1305
2026-06-16 09:37:47 +02:00
parent bbb9db73e7
commit 20835bc706
10 changed files with 30 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/auth/TotpEnrollment.vue
+2 -3
View File
@@ -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
+5 -8
View File
@@ -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
+2 -3
View File
@@ -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'
frontend/src/views/AccountView.vue
+2 -3
View File
@@ -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'
frontend/src/views/CloudStorageView.vue
+2 -4
View File
@@ -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'
frontend/src/views/DocumentView.vue
+2 -3
View File
@@ -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'
frontend/src/views/SettingsView.vue
+5 -14
View File
@@ -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'
frontend/src/views/SharedView.vue
+2 -4
View File
@@ -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'
frontend/src/views/admin/AdminAiView.vue
+4 -5
View File
@@ -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'
frontend/src/views/admin/AdminUsersView.vue
+4 -11
View File
@@ -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([])