3 Commits

Author SHA1 Message Date
Sebastian 069fd308cf chore(deps): update dependency vite to v8.1.4 2026-07-15 03:03:01 +00:00
Sebastian a23146e7f0 refactor: replace barrel imports with direct .vue imports.
Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>
2026-07-14 17:24:54 -04:00
Sebastian 15ccdba515 refactor: add navigaton panel component
Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>
2026-07-14 17:19:33 -04:00
11 changed files with 213 additions and 138 deletions
-89
View File
@@ -1,89 +0,0 @@
<script setup lang="ts">
import { computed } from 'vue'
import { useDisplay } from 'vuetify'
import type { ServiceObject } from '@DocumentsManager/models/service'
const display = useDisplay()
const isMobile = computed(() => display.mdAndDown.value)
defineProps<{
modelValue: boolean
activeProviderId: string
activeServiceId: string
services: ServiceObject[]
}>()
const emit = defineEmits<{
'update:modelValue': [value: boolean]
'navigate-home': []
'select-service': [service: ServiceObject]
}>()
</script>
<template>
<v-navigation-drawer
:model-value="modelValue"
contained
@update:model-value="emit('update:modelValue', $event)"
:permanent="modelValue && !isMobile"
:temporary="isMobile"
width="280"
class="files-sidebar"
>
<div class="pa-4">
<v-list density="compact" nav>
<v-list-subheader>Quick Access</v-list-subheader>
<v-list-item
prepend-icon="mdi-home"
title="Home"
@click="emit('navigate-home')"
/>
<v-list-item
prepend-icon="mdi-clock-outline"
title="Recent"
disabled
/>
<v-list-item
prepend-icon="mdi-star-outline"
title="Starred"
disabled
/>
<v-list-item
prepend-icon="mdi-trash-can-outline"
title="Trash"
disabled
/>
</v-list>
<v-divider class="my-4" />
<v-list density="compact" nav>
<v-list-subheader>Storage</v-list-subheader>
<v-list-item
v-for="service in services"
:key="`${service.provider}:${String(service.identifier ?? '')}`"
prepend-icon="mdi-harddisk"
:title="service.label || String(service.identifier ?? 'Unnamed Service')"
:subtitle="service.provider"
:active="activeProviderId === service.provider && activeServiceId === String(service.identifier ?? '')"
@click="emit('select-service', service)"
/>
<div v-if="services.length === 0" class="files-sidebar-empty text-caption text-medium-emphasis px-4 py-2">
No storage services available.
</div>
</v-list>
</div>
</v-navigation-drawer>
</template>
<style scoped>
.files-sidebar {
border-right: 1px solid rgb(var(--v-border-color)) !important;
overflow-y: auto;
}
.files-sidebar-empty {
line-height: 1.4;
}
</style>
+189
View File
@@ -0,0 +1,189 @@
<script setup lang="ts">
import { computed, ref } from 'vue'
import { useDisplay } from 'vuetify'
import type { ServiceObject } from '@DocumentsManager/models/service'
const display = useDisplay()
const isMobile = computed(() => display.mdAndDown.value)
defineProps<{
modelValue: boolean
activeProviderId: string
activeServiceId: string
services: ServiceObject[]
}>()
const emit = defineEmits<{
'update:modelValue': [value: boolean]
'navigate-home': []
'select-service': [service: ServiceObject]
'new-folder': []
'open-file-picker': []
'open-folder-picker': []
}>()
// Settings placeholder (no settings dialog exists for this module yet)
const showSettingsDialog = ref(false)
</script>
<template>
<v-navigation-drawer
:model-value="modelValue"
contained
@update:model-value="emit('update:modelValue', $event)"
:permanent="modelValue && !isMobile"
:temporary="isMobile"
width="280"
class="files-sidebar"
>
<div class="pa-3">
<!-- Primary action -->
<v-menu>
<template #activator="{ props: menuProps }">
<v-btn
block
color="primary"
variant="tonal"
prepend-icon="mdi-plus"
append-icon="mdi-chevron-down"
class="mb-4 justify-start"
v-bind="menuProps"
>
New
</v-btn>
</template>
<v-list density="compact">
<v-list-item @click="emit('new-folder')">
<template #prepend>
<v-icon>mdi-folder-plus</v-icon>
</template>
<v-list-item-title>New Folder</v-list-item-title>
</v-list-item>
<v-list-item @click="emit('open-file-picker')">
<template #prepend>
<v-icon>mdi-file-upload</v-icon>
</template>
<v-list-item-title>Upload Files</v-list-item-title>
</v-list-item>
<v-list-item @click="emit('open-folder-picker')">
<template #prepend>
<v-icon>mdi-folder-upload</v-icon>
</template>
<v-list-item-title>Upload Folder</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<!-- Quick Access -->
<div class="d-flex align-center mb-1 px-1">
<v-icon icon="mdi-star" size="14" class="mr-2 text-medium-emphasis" />
<span class="sidebar-section-label">Quick Access</span>
</div>
<v-divider class="mb-2" />
<v-list density="compact" nav class="pa-0">
<v-list-item
prepend-icon="mdi-home"
title="Home"
rounded="lg"
@click="emit('navigate-home')"
/>
<v-list-item
prepend-icon="mdi-clock-outline"
title="Recent"
rounded="lg"
disabled
/>
<v-list-item
prepend-icon="mdi-star-outline"
title="Starred"
rounded="lg"
disabled
/>
<v-list-item
prepend-icon="mdi-trash-can-outline"
title="Trash"
rounded="lg"
disabled
/>
</v-list>
<div class="my-3"></div>
<!-- Storage -->
<div class="d-flex align-center mb-1 px-1">
<v-icon icon="mdi-harddisk" size="14" class="mr-2 text-medium-emphasis" />
<span class="sidebar-section-label">Storage</span>
</div>
<v-divider class="mb-2" />
<v-list density="compact" nav class="pa-0">
<v-list-item
v-for="service in services"
:key="`${service.provider}:${String(service.identifier ?? '')}`"
prepend-icon="mdi-harddisk"
:title="service.label || String(service.identifier ?? 'Unnamed Service')"
:subtitle="service.provider"
:active="activeProviderId === service.provider && activeServiceId === String(service.identifier ?? '')"
rounded="lg"
@click="emit('select-service', service)"
/>
<div v-if="services.length === 0" class="files-sidebar-empty text-caption text-medium-emphasis px-4 py-2">
No storage services available.
</div>
</v-list>
</div>
<!-- Pinned utility footer -->
<template #append>
<v-divider />
<div class="pa-2">
<v-btn
block
variant="text"
size="small"
prepend-icon="mdi-cog"
class="justify-start text-medium-emphasis"
@click="showSettingsDialog = true"
>
Settings
</v-btn>
</div>
</template>
</v-navigation-drawer>
<!-- Settings placeholder dialog -->
<v-dialog v-model="showSettingsDialog" max-width="480">
<v-card>
<v-card-title class="d-flex align-center">
<v-icon icon="mdi-cog" size="small" class="mr-2" />
Files Settings
</v-card-title>
<v-card-text class="text-medium-emphasis">
No settings are available for this module yet.
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn variant="text" @click="showSettingsDialog = false">Close</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<style scoped>
.files-sidebar {
border-right: 1px solid rgb(var(--v-border-color)) !important;
overflow-y: auto;
}
.sidebar-section-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
color: rgba(var(--v-theme-on-surface), 0.6);
}
.files-sidebar-empty {
line-height: 1.4;
}
</style>
-4
View File
@@ -1,4 +0,0 @@
export { default as NewFolderDialog } from './NewFolderDialog.vue'
export { default as RenameDialog } from './RenameDialog.vue'
export { default as DeleteConfirmDialog } from './DeleteConfirmDialog.vue'
export { default as UploadDialog } from './UploadDialog.vue'
-1
View File
@@ -1 +0,0 @@
export { default as FileEditorDialog } from './FileEditorDialog.vue'
-20
View File
@@ -1,20 +0,0 @@
// Layout components
export { default as FilesToolbar } from './FilesToolbar.vue'
export { default as FilesSidebar } from './FilesSidebar.vue'
export { default as FilesBreadcrumbs } from './FilesBreadcrumbs.vue'
export { default as FilesEmptyState } from './FilesEmptyState.vue'
export { default as FilesDragOverlay } from './FilesDragOverlay.vue'
export { default as FilesInfoPanel } from './FilesInfoPanel.vue'
export { default as FileActionsMenu } from './FileActionsMenu.vue'
// View components
export * from './views'
// Viewer
export * from './viewer'
// Dialog components
export * from './dialogs'
// Editor
export * from './editor'
-1
View File
@@ -1 +0,0 @@
export { default as FilePreviewPopover } from './FilePreviewPopover.vue'
+2 -1
View File
@@ -3,7 +3,8 @@ import { computed } from 'vue'
import { CollectionObject } from '@DocumentsManager/models/collection' import { CollectionObject } from '@DocumentsManager/models/collection'
import { EntityObject } from '@DocumentsManager/models/entity' import { EntityObject } from '@DocumentsManager/models/entity'
import { getFileIcon, formatSize, formatDate } from '@/utils/fileHelpers' import { getFileIcon, formatSize, formatDate } from '@/utils/fileHelpers'
import { FileActionsMenu, FilePreviewPopover } from '@/components' import FileActionsMenu from '@/components/FileActionsMenu.vue'
import FilePreviewPopover from '@/components/viewer/FilePreviewPopover.vue'
type ItemWithType = { type ItemWithType = {
item: CollectionObject | EntityObject item: CollectionObject | EntityObject
+2 -1
View File
@@ -2,7 +2,8 @@
import { CollectionObject } from '@DocumentsManager/models/collection' import { CollectionObject } from '@DocumentsManager/models/collection'
import { EntityObject } from '@DocumentsManager/models/entity' import { EntityObject } from '@DocumentsManager/models/entity'
import { getFileIcon, formatSize } from '@/utils/fileHelpers' import { getFileIcon, formatSize } from '@/utils/fileHelpers'
import { FileActionsMenu, FilePreviewPopover } from '@/components' import FileActionsMenu from '@/components/FileActionsMenu.vue'
import FilePreviewPopover from '@/components/viewer/FilePreviewPopover.vue'
type PreviewSource = (item: { id: string; meta?: Record<string, unknown> }) => string | Blob | Promise<string | Blob> type PreviewSource = (item: { id: string; meta?: Record<string, unknown> }) => string | Blob | Promise<string | Blob>
+2 -1
View File
@@ -3,7 +3,8 @@ import { computed } from 'vue'
import { CollectionObject } from '@DocumentsManager/models/collection' import { CollectionObject } from '@DocumentsManager/models/collection'
import { EntityObject } from '@DocumentsManager/models/entity' import { EntityObject } from '@DocumentsManager/models/entity'
import { getFileIcon, formatSize } from '@/utils/fileHelpers' import { getFileIcon, formatSize } from '@/utils/fileHelpers'
import { FileActionsMenu, FilePreviewPopover } from '@/components' import FileActionsMenu from '@/components/FileActionsMenu.vue'
import FilePreviewPopover from '@/components/viewer/FilePreviewPopover.vue'
type ItemWithType = { type ItemWithType = {
item: CollectionObject | EntityObject item: CollectionObject | EntityObject
-3
View File
@@ -1,3 +0,0 @@
export { default as FilesGridView } from './FilesGridView.vue'
export { default as FilesListView } from './FilesListView.vue'
export { default as FilesDetailsView } from './FilesDetailsView.vue'
+18 -17
View File
@@ -10,22 +10,20 @@ import { ServiceObject } from '@DocumentsManager/models/service'
import { useServicesStore } from '@DocumentsManager/stores/servicesStore' import { useServicesStore } from '@DocumentsManager/stores/servicesStore'
// Components // Components
import { import FilesToolbar from '@/components/FilesToolbar.vue'
FilesToolbar, import Sidebar from '@/components/Sidebar.vue'
FilesSidebar, import FilesBreadcrumbs from '@/components/FilesBreadcrumbs.vue'
FilesBreadcrumbs, import FilesEmptyState from '@/components/FilesEmptyState.vue'
FilesEmptyState, import FilesDragOverlay from '@/components/FilesDragOverlay.vue'
FilesDragOverlay, import FilesInfoPanel from '@/components/FilesInfoPanel.vue'
FilesInfoPanel, import FilesGridView from '@/components/views/FilesGridView.vue'
FilesGridView, import FilesListView from '@/components/views/FilesListView.vue'
FilesListView, import FilesDetailsView from '@/components/views/FilesDetailsView.vue'
FilesDetailsView, import FileEditorDialog from '@/components/editor/FileEditorDialog.vue'
FileEditorDialog, import NewFolderDialog from '@/components/dialogs/NewFolderDialog.vue'
NewFolderDialog, import RenameDialog from '@/components/dialogs/RenameDialog.vue'
RenameDialog, import DeleteConfirmDialog from '@/components/dialogs/DeleteConfirmDialog.vue'
DeleteConfirmDialog, import UploadDialog from '@/components/dialogs/UploadDialog.vue'
UploadDialog,
} from '@/components'
// Check if file manager is available // Check if file manager is available
const display = useDisplay() const display = useDisplay()
@@ -744,13 +742,16 @@ onMounted(async () => {
<FilesDragOverlay :visible="isDragOver" /> <FilesDragOverlay :visible="isDragOver" />
<!-- Sidebar --> <!-- Sidebar -->
<FilesSidebar <Sidebar
v-model="sidebarVisible" v-model="sidebarVisible"
:active-provider-id="activeProviderId" :active-provider-id="activeProviderId"
:active-service-id="activeServiceId" :active-service-id="activeServiceId"
:services="availableServices" :services="availableServices"
@navigate-home="fileManager.navigateToRoot()" @navigate-home="fileManager.navigateToRoot()"
@select-service="handleServiceSelect" @select-service="handleServiceSelect"
@new-folder="showNewFolderDialog = true"
@open-file-picker="openFilePicker"
@open-folder-picker="openFolderPicker"
/> />
<!-- Main Area --> <!-- Main Area -->