Refactor task components, add mobile-friendly enhancements, and improve settings management

- Introduced `TodoItemTouch`, a responsive task item optimized for mobile interaction with swipe actions.
- Added `MobileActions` for streamlined task creation and settings access on smaller screens.
- Refactored `App.vue` to adapt layouts dynamically for mobile and desktop users.
- Implemented collapsible, categorized task lists with improved handling in `TodoList` and `TodoListTouch`.
- Improved task swipe actions with `useSwipe` for smoother UI interactions.
- Updated styling with DaisyUI theme customization and multi-theme support.
- Enhanced `useSettings` with a `todayShown` toggle for quick agenda visibility.

src/screens/ListScreen.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import type { Task } from '../types.ts'
 
-import { computed, onMounted, ref } from 'vue'
-import TodoItem from '../components/TodoItem.vue'
+import { useMediaQuery } from '@vueuse/core'
+import { DateTime } from 'luxon'
+import { computed, onMounted } from 'vue'
+import TodoList from '../components/TodoList.vue'
+import TodoListTouch from '../components/TodoListTouch.vue'
 import { useTasks } from '../composables/useTasks.ts'
 
 const { tasks, fetchTasks } = useTasks()
@@ -10,6 +13,7 @@ const { tasks, fetchTasks } = useTasks()
 onMounted(async () => {
   await fetchTasks()
 })
+const isMobile = useMediaQuery('(pointer: coarse)')
 
 const visibleTasks = computed<Task[]>(() => tasks.value.filter(task => !task.archived).sort((a, b) => a.id_ - b.id_))
 
@@ -29,26 +33,20 @@ const categorizedTasks = computed(() => {
   )
 })
 
-const collapsed = ref<string[]>([])
+const today = computed(() => {
+  const now = DateTime.now().startOf('day')
+  const tasksDue = visibleTasks.value.filter(task => task.dueDate)
+  const today = tasksDue.filter(task => now.diff(DateTime.fromMillis(task.dueDate ?? 0), 'days').toObject().days === 0)
+  const next7days = tasksDue.filter((task) => {
+    const diff = now.diff(DateTime.fromMillis(task.dueDate ?? 0), 'days').toObject()
+    return diff.days && diff.days < 0 && diff.days >= -7
+  })
+  return { today, next7days }
+})
 </script>
 
 <template>
-  <div>
-    <div class="flex flex-col gap-4">
-      <div v-for="(catTasks, category) in categorizedTasks" :key="category" class="m-4 ">
-        <div class="mb-4">
-          <button class="px-4 py-1 rounded bg-neutral-200 font-mono text-sm font-bold" @click="collapsed.includes(category) ? collapsed.splice(collapsed.indexOf(category), 1) : collapsed.push(category)">
-            {{ category }} [{{ catTasks.length }}]
-          </button>
-        </div>
-        <Transition name="fade">
-          <ul v-if="!collapsed.includes(category)" class="">
-            <TodoItem v-for="task in catTasks" :key="task.id" :task />
-          </ul>
-        </Transition>
-      </div>
-    </div>
-  </div>
+  <component :is="isMobile ? TodoListTouch : TodoList" :today="today" :categorized-tasks="categorizedTasks" />
 </template>
 
 <style scoped>

src/screens/SettingsScreen.vue

@@ -1,11 +0,0 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-  <div />
-</template>
-
-<style scoped>
-
-</style>