chrono/src/components/Sidebar.vue

<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>