From 15ccdba515a235403d75946402df230a0c49a841 Mon Sep 17 00:00:00 2001
From: Sebastian Krupinski <krupinski01@gmail.com>
Date: Tue, 14 Jul 2026 17:19:33 -0400
Subject: [PATCH] refactor: add navigaton panel component

Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>
---
 src/components/FilesSidebar.vue |  89 ---------------
 src/components/Sidebar.vue      | 189 ++++++++++++++++++++++++++++++++
 src/components/index.ts         |   2 +-
 src/pages/FilesPage.vue         |   7 +-
 4 files changed, 195 insertions(+), 92 deletions(-)
 delete mode 100644 src/components/FilesSidebar.vue
 create mode 100644 src/components/Sidebar.vue

diff --git a/src/components/FilesSidebar.vue b/src/components/FilesSidebar.vue
deleted file mode 100644
index 3fcdc97..0000000
--- a/src/components/FilesSidebar.vue
+++ /dev/null
@@ -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>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
new file mode 100644
index 0000000..713ba47
--- /dev/null
+++ b/src/components/Sidebar.vue
@@ -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>
diff --git a/src/components/index.ts b/src/components/index.ts
index 62e7963..298a878 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,6 +1,6 @@
 // Layout components
 export { default as FilesToolbar } from './FilesToolbar.vue'
-export { default as FilesSidebar } from './FilesSidebar.vue'
+export { default as Sidebar } from './Sidebar.vue'
 export { default as FilesBreadcrumbs } from './FilesBreadcrumbs.vue'
 export { default as FilesEmptyState } from './FilesEmptyState.vue'
 export { default as FilesDragOverlay } from './FilesDragOverlay.vue'
diff --git a/src/pages/FilesPage.vue b/src/pages/FilesPage.vue
index bf433b6..c6e7183 100644
--- a/src/pages/FilesPage.vue
+++ b/src/pages/FilesPage.vue
@@ -12,7 +12,7 @@ import { useServicesStore } from '@DocumentsManager/stores/servicesStore'
 // Components
 import {
   FilesToolbar,
-  FilesSidebar,
+  Sidebar,
   FilesBreadcrumbs,
   FilesEmptyState,
   FilesDragOverlay,
@@ -744,13 +744,16 @@ onMounted(async () => {
       <FilesDragOverlay :visible="isDragOver" />
 
       <!-- Sidebar -->
-      <FilesSidebar
+      <Sidebar
         v-model="sidebarVisible"
         :active-provider-id="activeProviderId"
         :active-service-id="activeServiceId"
         :services="availableServices"
         @navigate-home="fileManager.navigateToRoot()"
         @select-service="handleServiceSelect"
+        @new-folder="showNewFolderDialog = true"
+        @open-file-picker="openFilePicker"
+        @open-folder-picker="openFolderPicker"
       />
 
       <!-- Main Area -->