feat(editor): improve desing

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

.github/workflows/build-test.yml

@@ -0,0 +1,50 @@
+name: Build Test
+
+on:
+  pull_request:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Retrieve Server Install Action
+        uses: actions/checkout@v6.0.2
+        with:
+          repository: Nodarx/action-server-install
+          ref: main
+          path: action-server-install
+          github-server-url: https://git.ktrix.dev
+
+      - name: Install Server
+        uses: ./action-server-install
+        with:
+          install-php: 'false'
+          install-node: 'true'
+          php-version: '8.5'
+          node-version: '24'
+          server-path: './server'
+
+      - name: Install Chrono Manager
+        uses: actions/checkout@v6.0.2
+        with:
+          repository: Nodarx/chrono_manager
+          ref: main
+          path: server/modules/chrono_manager
+          github-server-url: https://git.ktrix.dev
+
+      - name: Checkout Pull Request
+        uses: actions/checkout@v6.0.2
+        with:
+          repository: ${{ github.repository }}
+          ref: ${{ github.event.pull_request.head.sha }}
+          path: server/modules/chrono
+          github-server-url: https://git.ktrix.dev
+
+      - name: Install dependencies
+        run: npm ci
+        working-directory: server/modules/chrono
+
+      - name: Build
+        run: npm run build
+        working-directory: server/modules/chrono

.github/workflows/js-unit-tests.yml

@@ -0,0 +1,50 @@
+name: JS Unit Tests
+
+on:
+  pull_request:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Retrieve Server Install Action
+        uses: actions/checkout@v6.0.2
+        with:
+          repository: Nodarx/action-server-install
+          ref: main
+          path: action-server-install
+          github-server-url: https://git.ktrix.dev
+
+      - name: Install Server
+        uses: ./action-server-install
+        with:
+          install-php: 'false'
+          install-node: 'true'
+          php-version: '8.5'
+          node-version: '24'
+          server-path: './server'
+
+      - name: Install Chrono Manager
+        uses: actions/checkout@v6.0.2
+        with:
+          repository: Nodarx/chrono_manager
+          ref: main
+          path: server/modules/chrono_manager
+          github-server-url: https://git.ktrix.dev
+
+      - name: Checkout Pull Request
+        uses: actions/checkout@v6.0.2
+        with:
+          repository: ${{ github.repository }}
+          ref: ${{ github.event.pull_request.head.sha }}
+          path: server/modules/chrono
+          github-server-url: https://git.ktrix.dev
+
+      - name: Install dependencies
+        run: npm ci
+        working-directory: server/modules/chrono
+
+      - name: Run tests
+        run: npm run test:unit
+        working-directory: server/modules/chrono

.gitignore

@@ -15,10 +15,7 @@ node_modules/
 /vendor/
 /lib/vendor/
 coverage/
-phpunit.xml.cache
-.phpunit.result.cache
-.php-cs-fixer.cache
-.phpstan.cache
+*.cache
 .phpactor/
 
 # Editors

package.json

@@ -11,19 +11,27 @@
     "dev": "vite build --mode development --config vite.config.ts",
     "watch": "vite build --mode development --watch --config vite.config.ts",
     "typecheck": "vue-tsc --noEmit",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "test": "vitest run --config tests/js/vitest.config.ts",
+    "test:unit": "vitest run --config tests/js/vitest.config.ts",
+    "test:watch": "vitest watch --config tests/js/vitest.config.ts",
+    "test:coverage": "vitest run --coverage --config tests/js/vitest.config.ts"
   },
   "dependencies": {
-    "pinia": "^3.0.0",
+    "pinia": "^4.0.0",
     "vue": "^3.5.18",
     "vue-router": "^5.0.0",
     "vuetify": "^4.0.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.1",
+    "@vitest/coverage-v8": "^4.1.6",
+    "@vue/test-utils": "^2.4.10",
     "@vue/tsconfig": "^0.9.0",
+    "jsdom": "^29.1.1",
     "typescript": "~6.0.0",
     "vite": "^8.0.0",
+    "vitest": "^4.1.6",
     "vue-tsc": "^3.0.5"
   }
 }

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" />
-          <span class="text-subtitle-2 font-weight-bold">{{ displayTitle }}</span>
+          <v-icon :icon="displayIcon" size="14" class="mr-2 text-medium-emphasis" />
+          <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/EventEditor.vue

@@ -148,8 +148,8 @@ watch(
 </script>
 
 <template>
-  <v-sheet class="pa-2 text-start overflow-auto" min-height="84vh" max-height="84vh">
-    <div class="event-editor-header d-flex justify-space-between pa-4">
+  <v-sheet class="text-start overflow-auto" color="surface" min-height="84vh" max-height="84vh">
+    <v-sheet class="event-editor-header d-flex justify-space-between pa-4" color="surface">
       <div>
         <v-icon :icon="entityIcon" class="mr-2" />
         {{ entityObject?.label || 'Nothing Selected' }}
@@ -180,7 +180,7 @@ watch(
           @click="$emit('close')"
         />
       </div>
-    </div>
+    </v-sheet>
 
     <div class="event-editor-fields">
       <v-divider />
@@ -215,6 +215,12 @@ watch(
           @update:description="entityObject!.description = $event"
         />
 
+        <EventEditorTags
+          :mode="mode"
+          :tags="entityObject!.tags"
+          @update:tags="entityObject!.tags = $event"
+        />
+
         <EventEditorDates
           :mode="mode"
           :starts-on="entityObject!.startsOn"
@@ -260,12 +266,6 @@ watch(
           @remove-notification="removeNotification"
         />
 
-        <EventEditorTags
-          :mode="mode"
-          :tags="entityObject!.tags"
-          @update:tags="entityObject!.tags = $event"
-        />
-
         <!-- Metadata for view mode -->
         <div v-if="mode === 'view' && entityObject!.created" class="event-editor-section">
           <v-divider class="mb-4"></v-divider>
@@ -285,7 +285,7 @@ watch(
       <v-divider/>
     </div>
 
-    <div class="event-editor-footer d-flex text-end justify-space-between pa-4">
+    <v-sheet class="event-editor-footer d-flex text-end justify-space-between pa-4" color="surface">
       <v-btn v-if="mode === 'edit'"
         variant="text"
         @click="cancelEdit"
@@ -301,7 +301,7 @@ watch(
         :loading="saving">
         Save
       </v-btn>
-    </div>
+    </v-sheet>
   </v-sheet>
 </template>
 
@@ -309,4 +309,18 @@ watch(
 .event-editor-section {
   margin-bottom: 1.5rem;
 }
+
+.event-editor-header,
+.event-editor-footer {
+  position: sticky;
+  z-index: 2;
+}
+
+.event-editor-header {
+  top: 0;
+}
+
+.event-editor-footer {
+  bottom: 0;
+}
 </style>

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/components/editors/EventEditorDateTimeField.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { formatDisplayDate, formatDisplayTime, formatLocalIsoDate, formatLocalIsoTime } from '@/utils/format'
+
+interface Props {
+  modelValue?: string | null
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | null]
+}>()
+
+const dateValue = ref('')
+const timeValue = ref('')
+const dateMenu = ref(false)
+const timeMenu = ref(false)
+
+watch(() => props.modelValue, (value) => {
+  const date = value ? new Date(value) : new Date()
+  dateValue.value = formatLocalIsoDate(date)
+  timeValue.value = formatLocalIsoTime(date)
+}, { immediate: true })
+
+const emitValue = () => {
+  if (!dateValue.value || !timeValue.value) return
+  emit('update:modelValue', new Date(`${dateValue.value}T${timeValue.value}`).toISOString())
+}
+
+const pickerDate = (value: string): Date | null => value ? new Date(`${value}T00:00:00`) : null
+
+const normalizePickerDate = (value: unknown): string => {
+  const selected = Array.isArray(value) ? value[0] : value
+  const date = selected instanceof Date ? selected : new Date(String(selected))
+  return Number.isNaN(date.getTime()) ? '' : formatLocalIsoDate(date)
+}
+
+const selectDate = (value: unknown) => {
+  const date = normalizePickerDate(value)
+  if (date) dateValue.value = date
+  dateMenu.value = false
+  emitValue()
+}
+
+watch(timeValue, () => emitValue())
+</script>
+
+<template>
+  <v-row dense>
+    <v-col cols="6">
+      <v-menu v-model="dateMenu" :close-on-content-click="false" location="bottom start">
+        <template #activator="{ props: activatorProps }">
+          <v-text-field
+            v-bind="activatorProps"
+            :model-value="formatDisplayDate(dateValue)"
+            label="Date"
+            prepend-inner-icon="mdi-calendar"
+            variant="outlined"
+            density="compact"
+            hide-details
+            readonly
+          />
+        </template>
+        <v-date-picker
+          :model-value="pickerDate(dateValue)"
+          color="primary"
+          show-adjacent-months
+          @update:model-value="selectDate"
+        />
+      </v-menu>
+    </v-col>
+    <v-col cols="6">
+      <v-menu v-model="timeMenu" :close-on-content-click="false" location="bottom start">
+        <template #activator="{ props: activatorProps }">
+          <v-text-field
+            v-bind="activatorProps"
+            :model-value="formatDisplayTime(timeValue)"
+            label="Time"
+            prepend-inner-icon="mdi-clock-outline"
+            variant="outlined"
+            density="compact"
+            hide-details
+            readonly
+          />
+        </template>
+        <v-card>
+          <v-time-picker v-model="timeValue" color="primary" format="ampm" />
+          <v-card-actions class="justify-end">
+            <v-btn variant="text" @click="timeMenu = false">Done</v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-menu>
+    </v-col>
+  </v-row>
+</template>

src/components/editors/EventEditorDates.vue

@@ -137,8 +137,6 @@ watch([startDate, startTime, endDate, endTime, timelessValue], () => {
 
 <template>
   <div class="event-editor-section">
-    <div class="text-subtitle-1 mb-2">Date & Time</div>
-    
     <!-- Read-only view -->
     <div v-if="mode === 'view'">
       <div class="mb-2 pa-2">
@@ -164,7 +162,6 @@ watch([startDate, startTime, endDate, endTime, timelessValue], () => {
       />
 
       <div class="mb-3">
-        <div class="text-subtitle-2 mb-2">Start</div>
         <v-row dense>
           <v-col cols="12" md="6">
             <v-menu v-model="startDateMenu" :close-on-content-click="false" location="bottom start">
@@ -212,7 +209,6 @@ watch([startDate, startTime, endDate, endTime, timelessValue], () => {
       </div>
 
       <div class="mb-3">
-        <div class="text-subtitle-2 mb-2">End</div>
         <v-row dense>
           <v-col cols="12" md="6">
             <v-menu v-model="endDateMenu" :close-on-content-click="false" location="bottom start">

src/components/editors/EventEditorDescription.vue

@@ -20,7 +20,6 @@ const descriptionValue = computed({
 
 <template>
   <div v-if="descriptionValue || mode === 'edit'" class="event-editor-section">
-    <div class="text-subtitle-1 mb-2">Description</div>
     <!-- Read-only view -->
     <div v-if="mode === 'view'" class="mb-4">
       <div class="mb-2 pa-2 white-space-pre-wrap">{{ descriptionValue || 'No description' }}</div>

src/components/editors/EventEditorLabel.vue

@@ -20,7 +20,6 @@ const labelValue = computed({
 
 <template>
   <div class="event-editor-section">
-    <div class="text-subtitle-1 mb-2">Title</div>
     <!-- Read-only view -->
     <div v-if="mode === 'view'" class="mb-4">
       <div class="mb-2 pa-2">{{ labelValue || 'Untitled Event' }}</div>

src/components/editors/EventEditorLocations.vue

@@ -27,7 +27,7 @@ const hasLocations = () => {
     <!-- Physical Locations -->
     <div v-if="Object.keys(locationsPhysical || {}).length > 0 || mode === 'edit'" class="mb-4">
       <div class="d-flex align-center justify-space-between mb-2">
-        <div class="text-subtitle-2">Physical Locations</div>
+        <div class="text-subtitle-2">Physical</div>
         <v-btn v-if="mode === 'edit'"
           size="small"
           variant="outlined"
@@ -49,8 +49,7 @@ const hasLocations = () => {
       <!-- Edit view -->
       <div v-else>
         <div v-for="(location, key) in locationsPhysical" :key="key" class="mb-3 pa-3 border rounded">
-          <div class="d-flex align-center justify-space-between mb-2">
-            <strong>{{ location.label || 'Physical Location' }}</strong>
+          <div class="d-flex justify-end mb-2">
             <v-btn
               icon="mdi-delete"
               size="small"
@@ -102,7 +101,7 @@ const hasLocations = () => {
     <!-- Virtual Locations -->
     <div v-if="Object.keys(locationsVirtual || {}).length > 0 || mode === 'edit'">
       <div class="d-flex align-center justify-space-between mb-2">
-        <div class="text-subtitle-2">Virtual Locations</div>
+        <div class="text-subtitle-2">Virtual</div>
         <v-btn v-if="mode === 'edit'"
           size="small"
           variant="outlined"
@@ -126,8 +125,7 @@ const hasLocations = () => {
       <!-- Edit view -->
       <div v-else>
         <div v-for="(location, key) in locationsVirtual" :key="key" class="mb-3 pa-3 border rounded">
-          <div class="d-flex align-center justify-space-between mb-2">
-            <strong>{{ location.label || 'Virtual Location' }}</strong>
+          <div class="d-flex justify-end mb-2">
             <v-btn
               icon="mdi-delete"
               size="small"

src/components/editors/EventEditorNotifications.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import EventEditorDateTimeField from './EventEditorDateTimeField.vue'
+
 interface Props {
   mode: 'edit' | 'view'
   notifications: Record<string, any>
@@ -13,14 +15,12 @@ const emit = defineEmits<{
 
 const typeOptions = [
   { title: 'Email', value: 'email' },
-  { title: 'Visual (Display)', value: 'visual' },
-  { title: 'Audible (Sound)', value: 'audible' }
+  { title: 'Display', value: 'visual' }
 ]
 
 const patternOptions = [
-  { title: 'Absolute (Specific Time)', value: 'absolute' },
-  { title: 'Relative (Before Event)', value: 'relative' },
-  { title: 'Unknown', value: 'unknown' }
+  { title: 'Relative', value: 'relative' },
+  { title: 'Absolute', value: 'absolute' },
 ]
 
 const anchorOptions = [
@@ -28,6 +28,18 @@ const anchorOptions = [
   { title: 'End Time', value: 'end' }
 ]
 
+const offsetPresets = [
+  { title: '5 minutes before', value: 'PT5M' },
+  { title: '10 minutes before', value: 'PT10M' },
+  { title: '15 minutes before', value: 'PT15M' },
+  { title: '30 minutes before', value: 'PT30M' },
+  { title: '1 hour before', value: 'PT1H' },
+  { title: '2 hours before', value: 'PT2H' },
+  { title: '1 day before', value: 'P1D' },
+  { title: '2 days before', value: 'P2D' },
+  { title: '1 week before', value: 'P1W' },
+]
+
 const formatNotification = (notification: any) => {
   if (notification.pattern === 'absolute' && notification.when) {
     return `At ${new Date(notification.when).toLocaleString()}`
@@ -48,7 +60,7 @@ const formatNotification = (notification: any) => {
         variant="outlined"
         @click="$emit('add-notification')">
         <v-icon left>mdi-plus</v-icon>
-        Add Notification
+        Add
       </v-btn>
     </div>
 
@@ -69,9 +81,65 @@ const formatNotification = (notification: any) => {
 
     <!-- Edit view -->
     <div v-else>
-      <div v-for="(notification, key) in notifications" :key="key" class="mb-3 pa-3 border rounded">
-        <div class="d-flex align-center justify-space-between mb-2">
-          <strong>Notification</strong>
+      <div v-for="(notification, key) in notifications" :key="key" class="mb-2 pa-2 border rounded">
+        <div class="d-flex align-center ga-2">
+          <v-row dense class="flex-grow-1">
+            <v-col cols="6" sm="3">
+              <v-select
+                v-model="notification.type"
+                :items="typeOptions"
+                label="Type"
+                variant="outlined"
+                density="compact"
+                hide-details
+                :rules="[v => !!v || 'Type is required']"
+              />
+            </v-col>
+            <v-col cols="6" sm="3">
+              <v-select
+                v-model="notification.pattern"
+                :items="patternOptions"
+                label="Pattern"
+                variant="outlined"
+                density="compact"
+                hide-details
+                :rules="[v => !!v || 'Pattern is required']"
+              />
+            </v-col>
+
+            <v-col v-if="notification.pattern === 'absolute'" cols="12" sm="6">
+              <EventEditorDateTimeField
+                :model-value="notification.when"
+                @update:model-value="notification.when = $event"
+              />
+            </v-col>
+
+            <template v-else-if="notification.pattern === 'relative'">
+              <v-col cols="6" sm="3">
+                <v-select
+                  v-model="notification.anchor"
+                  :items="anchorOptions"
+                  label="Anchor"
+                  variant="outlined"
+                  density="compact"
+                  hide-details
+                />
+              </v-col>
+              <v-col cols="6" sm="3">
+                <v-combobox
+                  v-model="notification.offset"
+                  :items="offsetPresets"
+                  item-title="title"
+                  item-value="value"
+                  label="Offset"
+                  variant="outlined"
+                  density="compact"
+                  hide-details
+                />
+              </v-col>
+            </template>
+          </v-row>
+
           <v-btn
             icon="mdi-delete"
             size="small"
@@ -80,63 +148,6 @@ const formatNotification = (notification: any) => {
             @click="$emit('remove-notification', key)">
           </v-btn>
         </div>
-
-        <v-row dense class="mb-2">
-          <v-col cols="12" md="6">
-            <v-select
-              v-model="notification.type"
-              :items="typeOptions"
-              label="Type"
-              variant="outlined"
-              density="compact"
-              :rules="[v => !!v || 'Type is required']"
-            />
-          </v-col>
-          <v-col cols="12" md="6">
-            <v-select
-              v-model="notification.pattern"
-              :items="patternOptions"
-              label="Pattern"
-              variant="outlined"
-              density="compact"
-              :rules="[v => !!v || 'Pattern is required']"
-            />
-          </v-col>
-        </v-row>
-
-        <div v-if="notification.pattern === 'absolute'">
-          <v-text-field
-            v-model="notification.when"
-            label="When (ISO Date)"
-            type="datetime-local"
-            variant="outlined"
-            density="compact"
-            hint="Specific date and time for notification"
-          />
-        </div>
-
-        <div v-else-if="notification.pattern === 'relative'">
-          <v-row dense>
-            <v-col cols="12" md="6">
-              <v-text-field
-                v-model="notification.offset"
-                label="Offset (e.g., PT15M)"
-                variant="outlined"
-                density="compact"
-                hint="ISO 8601 duration before event"
-              />
-            </v-col>
-            <v-col cols="12" md="6">
-              <v-select
-                v-model="notification.anchor"
-                :items="anchorOptions"
-                label="Anchor"
-                variant="outlined"
-                density="compact"
-              />
-            </v-col>
-          </v-row>
-        </div>
       </div>
     </div>
   </div>

src/components/editors/EventEditorParticipants.vue

@@ -90,7 +90,7 @@ const hasParticipants = () => {
           variant="outlined"
           @click="$emit('add-participant')">
           <v-icon left>mdi-plus</v-icon>
-          Add Participant
+          Add
         </v-btn>
       </div>
 
@@ -131,8 +131,7 @@ const hasParticipants = () => {
       <!-- Edit view -->
       <div v-else>
         <div v-for="(participant, key) in participants" :key="key" class="mb-3 pa-3 border rounded">
-          <div class="d-flex align-center justify-space-between mb-2">
-            <strong>{{ participant.name || 'Participant' }}</strong>
+          <div class="d-flex justify-end mb-2">
             <v-btn
               icon="mdi-delete"
               size="small"

src/components/editors/EventEditorTags.vue

@@ -20,8 +20,6 @@ const tagsValue = computed({
 
 <template>
   <div v-if="tagsValue.length > 0 || mode === 'edit'" class="event-editor-section">
-    <div class="text-subtitle-1 mb-2">Tags</div>
-    
     <!-- Read-only view -->
     <div v-if="mode === 'view'" class="mb-4">
       <div v-if="tagsValue.length > 0" class="pa-2">

src/pages/Main.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
-        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>
+      <Sidebar />
 
       <!-- 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;

src/routes.ts

@@ -7,13 +7,13 @@ const routes = [
   {
     name: 'calendar',
     path: '/calendar',
-    component: () => import('@/pages/ChronoPage.vue'),
+    component: () => import('@/pages/Main.vue'),
     meta: { layout: 'fixed' },
   },
   {
     name: 'tasks',
     path: '/tasks',
-    component: () => import('@/pages/ChronoPage.vue'),
+    component: () => import('@/pages/Main.vue'),
     meta: { layout: 'fixed' },
   },
 ]

tests/js/unit/base.test.ts

@@ -0,0 +1,30 @@
+import { describe, it, expect } from 'vitest'
+
+describe('Basic Tests', () => {
+  it('should perform basic assertion', () => {
+    expect(true).toBe(true)
+  })
+
+  it('should test array operations', () => {
+    const array = ['foo', 'bar', 'baz']
+
+    expect(array).toHaveLength(3)
+    expect(array).toContain('bar')
+    expect(array[0]).toBe('foo')
+  })
+
+  it('should test string operations', () => {
+    const string = 'Hello, World!'
+
+    expect(string).toContain('World')
+    expect(string.length).toBe(13)
+  })
+
+  it('should test object operations', () => {
+    const obj = { foo: 'bar', count: 42 }
+
+    expect(obj).toHaveProperty('foo')
+    expect(obj.foo).toBe('bar')
+    expect(obj.count).toBeGreaterThan(40)
+  })
+})

tests/js/unit/entityInstances.test.ts

@@ -29,9 +29,9 @@ describe('entity instance expansion', () => {
       eventEntity('meeting', localIso(2026, 5, 15, 9), localIso(2026, 5, 15, 10)),
     )
 
-    expect(instance.durationMs).toBe(60 * 60 * 1000)
+    expect(instance.duration).toBe(60 * 60 * 1000)
     expect(new Date(instance.start).getHours()).toBe(9)
-    expect(new Date(instance.dayStartMs).getHours()).toBe(0)
+    expect(new Date(instance.dayStart).getHours()).toBe(0)
     expect(instance.instanceId).toBeNull()
     expect(instance.multiDay).toBe(false)
   })
@@ -56,7 +56,7 @@ describe('entity instance expansion', () => {
 
     const end = new Date(instance.end)
     expect([end.getDate(), end.getHours()]).toEqual([21, 0])
-    expect(new Date(instance.dayStartMs).getDate()).toBe(20)
+    expect(new Date(instance.dayStart).getDate()).toBe(20)
     expect(instance.multiDay).toBe(false)
   })
 
@@ -75,7 +75,7 @@ describe('entity instance expansion', () => {
       eventEntity('instant', localIso(2026, 5, 15, 9), null),
     )
 
-    expect(instance.durationMs).toBe(1)
+    expect(instance.duration).toBe(1)
   })
 
   it('omits a non-recurring event outside the requested range', () => {

tests/js/unit/recurrence.test.ts

@@ -40,7 +40,7 @@ describe('daily recurrence', () => {
     )
 
     expect(instances.map(instance => new Date(instance.start).getDate())).toEqual([5, 7, 9])
-    expect(instances.every(instance => instance.durationMs === 60 * 60 * 1000)).toBe(true)
+    expect(instances.every(instance => instance.duration === 60 * 60 * 1000)).toBe(true)
     expect(new Set(instances.map(instance => instance.key)).size).toBe(3)
   })
 
@@ -179,7 +179,7 @@ describe('recurrence mutations', () => {
 
     expect(instances).toHaveLength(2)
     expect(new Date(moved!.start).getHours()).toBe(14)
-    expect(moved!.durationMs).toBe(2 * 60 * 60 * 1000)
+    expect(moved!.duration).toBe(2 * 60 * 60 * 1000)
     expect(moved!.label).toBe('Moved standup')
     expect(moved!.color).toBe('#abcdef')
   })

tests/js/vitest.config.ts

@@ -0,0 +1,33 @@
+import { fileURLToPath } from 'node:url'
+import { defineConfig, configDefaults } from 'vitest/config'
+import vue from '@vitejs/plugin-vue'
+import path from 'path'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, '../../src'),
+      '@KTXC': path.resolve(__dirname, '../../../../core/src'),
+    },
+  },
+  test: {
+    environment: 'jsdom',
+    exclude: [...configDefaults.exclude, 'e2e/**'],
+    root: fileURLToPath(new URL('../../', import.meta.url)),
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+      exclude: [
+        'node_modules/',
+        'tests/',
+        '**/*.d.ts',
+        '**/*.config.*',
+        '**/dist/**',
+      ],
+    },
+  },
+})