refactor: add navigaton panel component

Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>

src/components/CollectionList.vue

@@ -67,10 +67,10 @@ const onToggleVisibility = (collection: CollectionObject) => {
 <template>
   <div class="collection-selector">
     <div class="collection-selector-header">
-      <div class="d-flex align-center justify-space-between mb-3">
+      <div class="d-flex align-center justify-space-between mb-1">
         <div class="d-flex align-center">
-          <v-icon :icon="displayIcon" size="small" class="mr-2" />
+          <v-icon :icon="displayIcon" size="14" class="mr-2 text-medium-emphasis" />
-          <span class="text-subtitle-2 font-weight-bold">{{ displayTitle }}</span>
+          <span class="sidebar-section-label">{{ displayTitle }}</span>
         </div>
         <v-btn
           icon="mdi-plus"
@@ -82,8 +82,8 @@ const onToggleVisibility = (collection: CollectionObject) => {
         />
       </div>
     </div>
-    
+
-    <v-divider class="my-2" />
+    <v-divider class="mb-2" />
     
     <div class="collection-selector-content">
       <v-list density="compact" nav class="pa-0">
@@ -147,6 +147,14 @@ const onToggleVisibility = (collection: CollectionObject) => {
   cursor: pointer;
 }
 
+.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);
+}
+
 .collection-edit-btn {
   opacity: 0;
   transition: opacity 0.15s ease;

src/components/Sidebar.vue

@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useDisplay } from 'vuetify';
+import { useChronoOperationsStore } from '@/stores/chronoOperationsStore';
+import { useChronoUiStore } from '@/stores/chronoUiStore';
+import CollectionList from '@/components/CollectionList.vue';
+import MiniCalendar from '@/components/MiniCalendar.vue';
+
+const display = useDisplay();
+const isMobile = computed(() => display.mdAndDown.value);
+
+const chronoOperationsStore = useChronoOperationsStore();
+const chronoUiStore = useChronoUiStore();
+
+const { collections } = storeToRefs(chronoOperationsStore);
+const {
+  sidebarVisible,
+  selectedCollection,
+  currentDate,
+  isTasksSection,
+} = storeToRefs(chronoUiStore);
+
+const {
+  selectCollection,
+  openCollectionEditor,
+  createEvent,
+  createTask,
+  openImport,
+} = chronoUiStore;
+
+const { toggleCalendarVisibility } = chronoOperationsStore;
+
+// iCalendar import file picker
+const fileInputRef = ref<HTMLInputElement | null>(null);
+
+function handleImportStart() {
+  fileInputRef.value?.click();
+}
+
+async function handleImportSelect(event: Event) {
+  const input = event.target as HTMLInputElement;
+  const files = Array.from(input.files ?? []);
+  input.value = '';
+  if (files.length) await openImport(files);
+}
+
+// Settings placeholder (no settings dialog exists for this module yet)
+const showSettingsDialog = ref(false);
+</script>
+
+<template>
+  <v-navigation-drawer
+    v-model="sidebarVisible"
+    contained
+    :permanent="sidebarVisible && !isMobile"
+    :temporary="isMobile"
+    width="280"
+    class="chrono-sidebar"
+  >
+    <div class="pa-3 d-flex flex-column h-100">
+      <!-- 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"
+          >
+            {{ isTasksSection ? 'New Task' : 'New Event' }}
+          </v-btn>
+        </template>
+        <v-list density="compact">
+          <v-list-item @click="createEvent()">
+            <template #prepend>
+              <v-icon icon="mdi-calendar-plus" />
+            </template>
+            <v-list-item-title>Event</v-list-item-title>
+          </v-list-item>
+          <v-list-item @click="createTask()">
+            <template #prepend>
+              <v-icon icon="mdi-checkbox-marked-circle-plus-outline" />
+            </template>
+            <v-list-item-title>Task</v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+
+      <!-- Collections -->
+      <CollectionList
+        v-if="!isTasksSection"
+        :collections="collections"
+        :selected-collection="selectedCollection"
+        type="calendar"
+        @create="openCollectionEditor('calendar')"
+        @select="selectCollection"
+        @edit="openCollectionEditor('calendar', $event)"
+        @toggle-visibility="toggleCalendarVisibility"
+      />
+      <CollectionList
+        v-else
+        :collections="collections"
+        :selected-collection="selectedCollection"
+        type="tasklist"
+        @create="openCollectionEditor('tasklist')"
+        @select="selectCollection"
+        @edit="openCollectionEditor('tasklist', $event)"
+      />
+
+      <!-- Mini Calendar Widget -->
+      <v-card v-if="!isTasksSection" class="mt-4 flex-shrink-0" variant="outlined">
+        <v-card-text class="pa-2">
+          <MiniCalendar v-model="currentDate" />
+        </v-card-text>
+      </v-card>
+    </div>
+
+    <!-- Pinned utility footer -->
+    <template #append>
+      <v-divider />
+      <div class="pa-2">
+        <v-btn
+          block
+          variant="text"
+          size="small"
+          prepend-icon="mdi-calendar-import"
+          class="justify-start text-medium-emphasis"
+          @click="handleImportStart"
+        >
+          Import iCalendar
+        </v-btn>
+        <v-btn
+          block
+          variant="text"
+          size="small"
+          prepend-icon="mdi-cog"
+          class="justify-start text-medium-emphasis"
+          @click="showSettingsDialog = true"
+        >
+          Settings
+        </v-btn>
+        <input
+          ref="fileInputRef"
+          type="file"
+          accept=".ics,text/calendar"
+          multiple
+          class="d-none"
+          @change="handleImportSelect"
+        />
+      </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" />
+        Chrono 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>
+.chrono-sidebar {
+  border-right: 1px solid rgb(var(--v-border-color)) !important;
+  overflow-y: auto;
+}
+</style>

src/pages/ChronoPage.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, onMounted, watch } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useRoute } from 'vue-router';
-import { useDisplay } from 'vuetify';
 import { useModuleStore } from '@KTXC/stores/moduleStore';
 import { useChronoOperationsStore } from '@/stores/chronoOperationsStore';
 import { useChronoSettingsStore } from '@/stores/chronoSettingsStore';
@@ -10,20 +9,15 @@ import { useChronoUiStore } from '@/stores/chronoUiStore';
 import type { CalendarView as CalendarViewType } from '@/types';
 import { spanToDays, type AgendaViewSpan, type DaysViewSpan } from '@/types/spans';
 import { daysVisibleRange, monthGridVisibleRange } from '@/utils/date';
-import CollectionList from '@/components/CollectionList.vue';
+import Sidebar from '@/components/Sidebar.vue';
 import CollectionEditor from '@/components/CollectionEditor.vue';
 import CalendarView from '@/components/CalendarView.vue';
 import TaskView from '@/components/TaskView.vue';
 import EventEditor from '@/components/EventEditor.vue';
 import TaskEditor from '@/components/TaskEditor.vue';
-import MiniCalendar from '@/components/MiniCalendar.vue';
 import ImportDialog from '@/components/ImportDialog.vue';
 import { EpochSpan } from '@/types/date';
 
-// Vuetify display
-const display = useDisplay();
-const isMobile = computed(() => display.mdAndDown.value);
-
 // Check if chrono manager is available
 const moduleStore = useModuleStore();
 const isChronoManagerAvailable = computed(() => {
@@ -71,8 +65,6 @@ const {
   initialize,
   selectSection,
   selectDate,
-  selectCollection,
-  openCollectionEditor,
   createEventFromDate,
   startEditingSelectedEntity,
   cancelEditingSelectedEntity,
@@ -85,18 +77,14 @@ const {
   deleteTask,
   saveCollection,
   deleteCollection,
-  openImport,
   closeImport,
 } = chronoUiStore;
 
 const {
-  toggleCalendarVisibility,
   toggleTaskComplete,
   ensureTasksLoaded,
 } = chronoOperationsStore;
 
-const fileInputRef = ref<HTMLInputElement | null>(null)
-
 watch(() => route.fullPath, async () => {
   selectSectionFromRoute();
   if (isTasksSection.value) {
@@ -119,17 +107,6 @@ onMounted(async () => {
   }
 });
 
-function handleImportStart() {
-  fileInputRef.value?.click()
-}
-
-async function handleImportSelect(event: Event) {
-  const input = event.target as HTMLInputElement
-  const files = Array.from(input.files ?? [])
-  input.value = ''
-  if (files.length) await openImport(files)
-}
-
 function handleCalendarViewChange(view: CalendarViewType) {
   chronoSettingsStore.calendarView = view;
 }
@@ -200,49 +177,7 @@ function selectSectionFromRoute() {
     <!-- Main Content Area -->
     <div class="chrono-content">
       <!-- Sidebar Navigation Drawer -->
-      <v-navigation-drawer
+      <Sidebar />
-        v-model="sidebarVisible"
-        contained
-        :permanent="sidebarVisible && !isMobile"
-        :temporary="isMobile"
-        width="280"
-        class="chrono-sidebar"
-      >
-        <div class="pa-4">
-          <CollectionList
-            v-if="!isTasksSection"
-            :collections="collections"
-            :selected-collection="selectedCollection"
-            type="calendar"
-            @create="openCollectionEditor('calendar')"
-            @select="selectCollection"
-            @edit="openCollectionEditor('calendar', $event)"
-            @toggle-visibility="toggleCalendarVisibility"
-          />
-          <CollectionList
-            v-else
-            :collections="collections"
-            :selected-collection="selectedCollection"
-            type="tasklist"
-            @create="openCollectionEditor('tasklist')"
-            @select="selectCollection"
-            @edit="openCollectionEditor('tasklist', $event)"
-          />
-          
-          <v-divider class="my-3" />
-          <v-btn variant="text" prepend-icon="mdi-calendar-import" block class="justify-start" @click="handleImportStart">
-            Import iCalendar
-          </v-btn>
-          <input ref="fileInputRef" type="file" accept=".ics,text/calendar" multiple class="d-none" @change="handleImportSelect" />
-
-          <!-- Mini Calendar Widget -->
-          <v-card v-if="!isTasksSection" class="mt-4" variant="outlined">
-            <v-card-text class="pa-2">
-              <MiniCalendar v-model="currentDate" />
-            </v-card-text>
-          </v-card>
-        </div>
-      </v-navigation-drawer>
 
       <!-- Main Calendar/Task View -->
       <div class="chrono-main">
@@ -366,11 +301,6 @@ function selectSectionFromRoute() {
   position: relative;
 }
 
-.chrono-sidebar {
-  border-right: 1px solid rgb(var(--v-border-color)) !important;
-  overflow-y: auto;
-}
-
 .chrono-main {
   flex: 1;
   min-height: 0;