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

refactor(10-12): migrate sidebar + layout + TreeItem SVGs to AppIcon

Browse Source 
- StorageBrowser.vue: replace 8 inline SVGs (plus, folder x2, pencil, trash, share, folderMove, document)
- AppSidebar.vue: replace 8 inline SVGs (tag, inbox, chevronRight x2, folder, cloud, shield, cog dual-path, logout)
- AdminSidebar.vue: replace 6 inline SVGs (home, users, chartBar, lightBulb, clipboardList, logout)
- TreeItem.vue: replace 1 inline SVG (chevronRight expand/collapse)
This commit is contained in:
curo1305
2026-06-16 08:35:02 +02:00
parent 01a0605831
commit cb41753605
4 changed files with 35 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/layout/AppSidebar.vue
+14 -39
View File
@@ -11,10 +11,7 @@
class="nav-link"
:class="{ 'nav-link-active': $route.path.startsWith('/topics') }"
>
<svg class="w-4 h-4 mr-2 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
</svg>
<AppIcon name="tag" class="w-4 h-4 mr-2 shrink-0" />
All Topics
</router-link>
@@ -24,10 +21,7 @@
:class="{ 'nav-link-active': $route.path === '/shared' }"
>
<div class="w-4 h-4 mr-2 shrink-0 rounded bg-purple-50 flex items-center justify-center">
<svg class="w-3 h-3 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
</svg>
<AppIcon name="inbox" class="w-3 h-3 text-purple-500" />
</div>
<span class="flex-1">Shared with me</span>
<span
@@ -45,13 +39,11 @@
class="p-1 rounded hover:bg-gray-100 text-gray-400 hover:text-gray-600 transition-colors shrink-0"
:title="foldersExpanded ? 'Collapse folders' : 'Expand folders'"
>
<svg
<AppIcon
name="chevronRight"
class="w-3 h-3 transition-transform duration-150"
:class="foldersExpanded ? 'rotate-90' : ''"
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>
/>
</button>
<router-link
@@ -59,10 +51,7 @@
class="nav-link flex-1 min-w-0"
:class="{ 'nav-link-active': $route.path === '/' || $route.path.startsWith('/folders/') }"
>
<svg class="w-4 h-4 mr-2 shrink-0 text-amber-500" 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>
<AppIcon name="folder" class="w-4 h-4 mr-2 shrink-0 text-amber-500" />
Folders
</router-link>
</div>
@@ -97,13 +86,11 @@
class="p-1 rounded hover:bg-gray-100 text-gray-400 hover:text-gray-600 transition-colors shrink-0"
:title="cloudExpanded ? 'Collapse cloud storage' : 'Expand cloud storage'"
>
<svg
<AppIcon
name="chevronRight"
class="w-3 h-3 transition-transform duration-150"
:class="cloudExpanded ? 'rotate-90' : ''"
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>
/>
</button>
<router-link
@@ -111,10 +98,7 @@
class="nav-link flex-1 min-w-0"
:class="{ 'nav-link-active': $route.path.startsWith('/cloud') }"
>
<svg class="w-4 h-4 mr-2 shrink-0 text-sky-500" 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 mr-2 shrink-0 text-sky-500" />
Cloud Storage
</router-link>
</div>
@@ -187,10 +171,7 @@
class="nav-link"
:class="{ 'nav-link-active': $route.path === '/admin' }"
>
<svg class="w-4 h-4 mr-2 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-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
</svg>
<AppIcon name="shield" class="w-4 h-4 mr-2 shrink-0" />
Admin
</router-link>
@@ -199,11 +180,7 @@
class="nav-link"
:class="{ 'nav-link-active': $route.path === '/settings' }"
>
<svg class="w-4 h-4 mr-2 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
<AppIcon name="cog" class="w-4 h-4 mr-2 shrink-0" />
Settings
</router-link>
@@ -217,10 +194,7 @@
aria-label="Sign out"
class="text-gray-400 hover:text-gray-600 transition-colors"
>
<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="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
</svg>
<AppIcon name="logout" class="w-4 h-4" />
</button>
</div>
</div>
@@ -230,6 +204,7 @@
<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import AppIcon from '../ui/AppIcon.vue'
import { useTopicsStore } from '../../stores/topics.js'
import { useAuthStore } from '../../stores/auth.js'
import { useFoldersStore } from '../../stores/folders.js'