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

refactor(frontend): extract shared modules, thin views, delete dead code

Browse Source 
Shared utilities:
- Add src/utils/formatters.js — formatDate, formatSize, providerColor,
  providerBg, providerLabel; all components import from here, no inline duplicates
- Add src/components/ui/TreeItem.vue — generic expand/collapse tree node;
  FolderTreeItem, CloudFolderTreeItem, CloudProviderTreeItem now wrap it
- Add src/components/storage/StorageBrowser.vue — unified file browser grid
  used by both FileManagerView and CloudFolderView

View refactor (thin data-providers):
- FileManagerView.vue: stripped to props + event wiring; all layout moved to StorageBrowser
- CloudFolderView.vue: same treatment — feeds props into StorageBrowser
- All tree sidebar components delegate expand/collapse to TreeItem.vue

Dead code removed:
- Delete HomeView.vue — no active route, replaced by FileManagerView
- Delete FolderView.vue — no active route, logic merged into FileManagerView

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
curo1305
2026-06-02 16:10:47 +02:00
co-authored by Claude Sonnet 4.6
parent a548266461
commit cce70b2ef6
15 changed files with 728 additions and 1087 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/FileManagerView.vue
+52 -348
View File
@@ -1,271 +1,56 @@
<template>
<div class="flex flex-col h-full">
<StorageBrowser
mode="local"
:folders="foldersStore.folders"
:files="docsStore.documents"
:breadcrumb="foldersStore.breadcrumb"
:upload-queue="uploadQueue"
:loading="docsStore.loading || foldersStore.loading"
:search-query="docsStore.searchQuery"
:sort-field="docsStore.sortField"
:sort-order="docsStore.sortOrder"
:root-folders="foldersStore.rootFolders"
:topic-color-fn="topicColor"
:empty-message="currentFolderId ? 'This folder is empty' : 'No folders yet'"
:empty-hint="currentFolderId ? 'Upload files above or create a sub-folder' : 'Create a folder to get started'"
ref="browserRef"
@breadcrumb-navigate="handleBreadcrumbNavigate"
@new-folder="browserRef?.startNewFolder()"
@search-change="val => (docsStore.searchQuery = val)"
@sort-change="handleSortChange"
@upload="onFilesSelected"
@folder-navigate="folder => navigateToFolder(folder.id)"
@folder-create="handleFolderCreate"
@folder-rename="handleFolderRename"
@folder-delete="folder => (folderToDelete = folder)"
@file-open="file => $router.push(`/document/${file.id}`)"
@file-share="file => (shareDoc = file)"
@file-move="({ fileId, folderId }) => doMove(fileId, folderId)"
@file-delete="doDeleteDoc"
/>
<!-- ── Sticky toolbar ──────────────────────────────────────────────── -->
<div class="sticky top-0 z-10 bg-white border-b border-gray-100">
<div class="px-6 py-3 flex items-center gap-3 flex-wrap">
<FolderBreadcrumb
:segments="foldersStore.breadcrumb"
@navigate="handleBreadcrumbNavigate"
/>
<div class="ml-auto flex items-center gap-2 shrink-0">
<SearchBar v-if="currentFolderId" v-model="docsStore.searchQuery" />
<SortControls
v-if="currentFolderId"
:sort="docsStore.sortField"
:order="docsStore.sortOrder"
@change="handleSortChange"
/>
<button
@click="startNewFolder"
class="flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-indigo-600 border border-indigo-200 hover:bg-indigo-50 rounded-lg 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="M12 4v16m8-8H4" />
</svg>
New folder
</button>
</div>
</div>
</div>
<!-- ── Folder view ─────────────────────────────────────────────────── -->
<div class="flex-1 overflow-y-auto flex flex-col">
<!-- Upload zone (always at top of folder view) -->
<div class="px-6 pt-5 pb-3">
<DropZone @files-selected="onFilesSelected" />
<UploadProgress :items="uploadQueue" />
</div>
<!-- Column headers -->
<div class="mx-6 px-4 py-2 grid grid-cols-[2rem_1fr_6rem_8rem_6rem] gap-3 items-center rounded-lg bg-gray-50 text-xs font-semibold text-gray-400 uppercase tracking-wider select-none">
<span></span>
<span>Name</span>
<span class="text-right hidden md:block">Size</span>
<span class="text-right hidden sm:block">Modified</span>
<span></span>
</div>
<!-- New-folder inline row -->
<div v-if="showNewFolderInput" class="mx-6 mt-1 px-4 py-2.5 grid grid-cols-[2rem_1fr_6rem_8rem_6rem] gap-3 items-center rounded-lg border border-amber-200 bg-amber-50/40">
<div class="w-7 h-7 bg-amber-50 rounded-lg flex items-center justify-center">
<svg class="w-4 h-4 text-amber-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>
</div>
<div class="flex items-center gap-2 col-span-4">
<input
ref="newFolderInputRef"
v-model="newFolderName"
type="text"
placeholder="Folder name"
class="border border-gray-300 rounded-lg px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
@keydown.enter="submitNewFolder"
@keydown.escape="cancelNewFolder"
/>
<button @click="submitNewFolder" class="text-sm text-indigo-600 hover:underline font-medium">Save</button>
<button @click="cancelNewFolder" class="text-sm text-gray-500 hover:text-gray-700">Cancel</button>
<p v-if="newFolderError" class="text-xs text-red-500">{{ newFolderError }}</p>
</div>
</div>
<!-- ── Item list ──────────────────────────────────────────────────── -->
<div class="mx-6 mt-1 mb-6 flex flex-col divide-y divide-gray-100 border border-gray-100 rounded-xl overflow-hidden">
<!-- Folder rows -------------------------------------------------- -->
<div
v-for="folder in foldersStore.folders"
:key="`f-${folder.id}`"
class="px-4 py-2.5 grid grid-cols-[2rem_1fr_6rem_8rem_6rem] gap-3 items-center hover:bg-gray-50 group cursor-pointer transition-colors"
:class="{
'bg-amber-50 ring-2 ring-inset ring-amber-300': docDragOverFolderId === folder.id,
'bg-gray-50': renaming === folder.id,
}"
@click="renaming === folder.id ? null : navigateToFolder(folder.id)"
@dragover.prevent="onFolderDragOver(folder.id, $event)"
@dragleave="onFolderDragLeave"
@drop.prevent="onDropDocOnFolder(folder.id)"
>
<!-- Folder icon -->
<div class="w-7 h-7 bg-amber-50 rounded-lg flex items-center justify-center shrink-0">
<svg class="w-4 h-4 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>
</div>
<!-- Name / rename input -->
<div>
<input
v-if="renaming === folder.id"
v-model="renameValue"
class="border border-indigo-300 rounded-lg px-2 py-0.5 text-sm w-full max-w-xs focus:outline-none focus:ring-2 focus:ring-indigo-500"
@keydown.enter="submitRename(folder.id)"
@keydown.escape="cancelRename"
@vue:mounted="e => e.el?.focus()"
/>
<span v-else class="text-sm font-medium text-gray-900 truncate block">{{ folder.name }}</span>
</div>
<span class="text-right text-xs text-gray-400 hidden md:block">—</span>
<span class="text-right text-xs text-gray-400 hidden sm:block">{{ formatDate(folder.created_at) }}</span>
<!-- Hover actions -->
<div class="flex justify-end gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity" @click.stop>
<button @click.stop="startRename(folder)" title="Rename"
class="p-1.5 rounded hover:bg-gray-200 text-gray-400 hover:text-gray-700 transition-colors">
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg>
</button>
<button @click.stop="folderToDelete = folder" title="Delete folder"
class="p-1.5 rounded hover:bg-red-50 text-gray-400 hover:text-red-500 transition-colors">
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
</div>
</div>
<!-- Document rows ------------------------------------------------ -->
<div
v-for="doc in docsStore.documents"
:key="`d-${doc.id}`"
draggable="true"
class="px-4 py-2.5 grid grid-cols-[2rem_1fr_6rem_8rem_6rem] gap-3 items-center hover:bg-gray-50 group cursor-pointer transition-colors select-none"
:class="{ 'opacity-50': docDragging?.id === doc.id }"
@click="$router.push(`/document/${doc.id}`)"
@dragstart="onDocDragStart(doc, $event)"
@dragend="docDragging = null; docDragOverFolderId = null"
>
<!-- File icon -->
<div class="w-7 h-7 bg-indigo-50 rounded-lg flex items-center justify-center shrink-0">
<svg class="w-4 h-4 text-indigo-400" 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>
</div>
<!-- Name + topics -->
<div class="min-w-0">
<div class="flex items-center gap-2">
<p class="text-sm font-medium text-gray-900 truncate">{{ doc.original_name }}</p>
<span v-if="doc.is_shared" class="shrink-0 bg-indigo-50 text-indigo-600 text-xs font-medium px-2 py-0.5 rounded-full">Shared</span>
</div>
<div v-if="doc.topics?.length" class="flex items-center gap-1 mt-0.5 flex-wrap">
<TopicBadge v-for="t in doc.topics.slice(0, 3)" :key="t" :name="t" :color="topicColor(t)" />
</div>
</div>
<span class="text-right text-xs text-gray-400 hidden md:block">{{ formatSize(doc.size_bytes) }}</span>
<span class="text-right text-xs text-gray-400 hidden sm:block">{{ formatDate(doc.created_at) }}</span>
<!-- Hover actions -->
<div class="flex justify-end gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity" @click.stop>
<!-- Share -->
<button @click.stop="shareDoc = doc" title="Share"
class="p-1.5 rounded hover:bg-gray-200 text-gray-400 hover:text-gray-700 transition-colors">
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
</svg>
</button>
<!-- Move -->
<div class="relative">
<button
@click.stop="folderPickerDocId = folderPickerDocId === doc.id ? null : doc.id"
title="Move to folder"
class="p-1.5 rounded hover:bg-gray-200 text-gray-400 hover:text-gray-700 transition-colors"
>
<svg class="w-3.5 h-3.5" 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 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V7z" />
</svg>
</button>
<div
v-if="folderPickerDocId === doc.id"
class="absolute right-0 top-full mt-1 w-48 bg-white border border-gray-200 rounded-xl shadow-lg z-20 py-1"
@click.stop
>
<button class="w-full text-left px-3 py-2 text-sm text-gray-600 hover:bg-gray-50"
@click.stop="doMove(doc.id, null)">Root (no folder)</button>
<button
v-for="f in foldersStore.rootFolders"
:key="f.id"
class="w-full text-left px-3 py-2 text-sm text-gray-700 hover:bg-indigo-50 hover:text-indigo-700 truncate"
@click.stop="doMove(doc.id, f.id)"
>{{ f.name }}</button>
<p v-if="!foldersStore.rootFolders.length" class="px-3 py-2 text-xs text-gray-400">No folders yet</p>
</div>
</div>
<!-- Delete -->
<button @click.stop="doDeleteDoc(doc.id)" title="Delete"
class="p-1.5 rounded hover:bg-red-50 text-gray-400 hover:text-red-500 transition-colors">
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
</div>
</div>
<!-- Empty state (no search active) -->
<div
v-if="!docsStore.loading && !foldersStore.loading && foldersStore.folders.length === 0 && docsStore.documents.length === 0 && !showNewFolderInput"
class="px-4 py-10 text-center text-gray-300"
>
<p class="text-gray-400 text-sm">{{ currentFolderId ? 'This folder is empty' : 'No folders yet' }}</p>
<p class="text-xs mt-1">{{ currentFolderId ? 'Upload files above or create a sub-folder' : 'Create a folder to get started' }}</p>
</div>
<!-- No results for search -->
<div
v-else-if="docsStore.searchQuery && docsStore.documents.length === 0 && foldersStore.folders.length === 0"
class="px-4 py-10 text-center text-sm text-gray-400"
>
No items match "{{ docsStore.searchQuery }}".
</div>
<!-- Loading -->
<div v-if="docsStore.loading || foldersStore.loading" class="py-6 text-center text-sm text-gray-400">
Loading…
</div>
</div>
</div>
<!-- ── Modals ──────────────────────────────────────────────────────── -->
<FolderDeleteModal
v-if="folderToDelete"
:folder="folderToDelete"
@confirm="confirmDeleteFolder"
@cancel="folderToDelete = null"
/>
<ShareModal
v-if="shareDoc"
:doc="shareDoc"
@close="shareDoc = null"
@unshared="(id) => { const d = docsStore.documents.find(x => x.id === id); if (d) d.is_shared = false }"
/>
</div>
<FolderDeleteModal
v-if="folderToDelete"
:folder="folderToDelete"
@confirm="confirmDeleteFolder"
@cancel="folderToDelete = null"
/>
<ShareModal
v-if="shareDoc"
:doc="shareDoc"
@close="shareDoc = null"
@unshared="(id) => { const d = docsStore.documents.find(x => x.id === id); if (d) d.is_shared = false }"
/>
</template>
<script setup>
import { ref, reactive, computed, watch, nextTick, onMounted, onUnmounted } from 'vue'
import { ref, reactive, computed, watch, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useFoldersStore } from '../stores/folders.js'
import { useDocumentsStore } from '../stores/documents.js'
import { useTopicsStore } from '../stores/topics.js'
import FolderBreadcrumb from '../components/folders/FolderBreadcrumb.vue'
import StorageBrowser from '../components/storage/StorageBrowser.vue'
import FolderDeleteModal from '../components/folders/FolderDeleteModal.vue'
import SearchBar from '../components/documents/SearchBar.vue'
import SortControls from '../components/documents/SortControls.vue'
import TopicBadge from '../components/topics/TopicBadge.vue'
import UploadProgress from '../components/upload/UploadProgress.vue'
import DropZone from '../components/upload/DropZone.vue'
import ShareModal from '../components/sharing/ShareModal.vue'
const route = useRoute()
@@ -273,6 +58,7 @@ const router = useRouter()
const foldersStore = useFoldersStore()
const docsStore = useDocumentsStore()
const topicsStore = useTopicsStore()
const browserRef = ref(null)
// ── Navigation ────────────────────────────────────────────────────────────────
@@ -328,84 +114,22 @@ async function onFilesSelected({ files, autoClassify }) {
await topicsStore.fetchTopics()
}
// ── Drag-and-drop: move documents onto folders ────────────────────────────────
// ── Folder CRUD ───────────────────────────────────────────────────────────────
const docDragging = ref(null) // doc object being dragged
const docDragOverFolderId = ref(null) // folder.id the cursor is over
function onDocDragStart(doc, e) {
docDragging.value = doc
e.dataTransfer.effectAllowed = 'move'
e.dataTransfer.setData('text/plain', doc.id)
}
function onFolderDragOver(folderId, e) {
if (!docDragging.value) return
e.preventDefault()
docDragOverFolderId.value = folderId
}
function onFolderDragLeave() {
docDragOverFolderId.value = null
}
async function onDropDocOnFolder(folderId) {
if (!docDragging.value) return
const docId = docDragging.value.id
docDragging.value = null
docDragOverFolderId.value = null
try { await docsStore.moveToFolder(docId, folderId) } catch (e) { console.error(e.message) }
}
// ── New folder ────────────────────────────────────────────────────────────────
const showNewFolderInput = ref(false)
const newFolderName = ref('')
const newFolderError = ref('')
const newFolderInputRef = ref(null)
function startNewFolder() {
newFolderName.value = ''
newFolderError.value = ''
showNewFolderInput.value = true
nextTick(() => newFolderInputRef.value?.focus())
}
function cancelNewFolder() { showNewFolderInput.value = false; newFolderError.value = '' }
async function submitNewFolder() {
const name = newFolderName.value.trim()
if (!name) { newFolderError.value = 'Folder name cannot be empty.'; return }
async function handleFolderCreate({ name, onError, onSuccess }) {
try {
await foldersStore.createFolder(name, currentFolderId.value)
showNewFolderInput.value = false
newFolderError.value = ''
onSuccess()
} catch (e) {
newFolderError.value = e.message || 'Failed to create folder.'
onError(e.message || 'Failed to create folder.')
}
}
// ── Rename folder ─────────────────────────────────────────────────────────────
const renaming = ref(null)
const renameValue = ref('')
function startRename(folder) {
renaming.value = folder.id
renameValue.value = folder.name
async function handleFolderRename({ id, name }) {
if (!name) return
try { await foldersStore.renameFolder(id, name) } catch {}
}
function cancelRename() { renaming.value = null }
async function submitRename(folderId) {
const name = renameValue.value.trim()
if (!name) { cancelRename(); return }
try { await foldersStore.renameFolder(folderId, name) }
finally { renaming.value = null }
}
// ── Delete folder ─────────────────────────────────────────────────────────────
const folderToDelete = ref(null)
async function confirmDeleteFolder() {
@@ -417,10 +141,8 @@ async function confirmDeleteFolder() {
// ── Document actions ──────────────────────────────────────────────────────────
const shareDoc = ref(null)
const folderPickerDocId = ref(null)
async function doMove(docId, folderId) {
folderPickerDocId.value = null
try { await docsStore.moveToFolder(docId, folderId) } catch (e) { console.error(e.message) }
}
@@ -428,27 +150,9 @@ async function doDeleteDoc(docId) {
try { await docsStore.remove(docId) } catch (e) { console.error(e.message) }
}
function onOutsideClick(e) {
if (!e.target.closest('.relative')) folderPickerDocId.value = null
}
onMounted(() => document.addEventListener('click', onOutsideClick))
onUnmounted(() => document.removeEventListener('click', onOutsideClick))
// ── Helpers ───────────────────────────────────────────────────────────────────
// ── Topic color lookup ────────────────────────────────────────────────────────
function topicColor(name) {
return topicsStore.topics.find(t => t.name === name)?.color ?? '#6366f1'
}
function formatDate(iso) {
if (!iso) return '—'
return new Date(iso).toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })
}
function formatSize(bytes) {
if (!bytes) return '—'
if (bytes < 1024) return bytes + ' B'
if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB'
return (bytes / 1048576).toFixed(1) + ' MB'
}
</script>