chore: 1.7.2

Makefile

@@ -131,11 +131,11 @@ npm-run-%: node_modules ## npm run (script)
 
 .PHONY: docker-compose-up
 docker-compose-up: ## docker compose up
-	$(DOCKER) compose up -d
+	$(DOCKER) compose up -d --wait --no-recreate
 
 .PHONY: docker-compose-up-%
 docker-compose-up-%: ## docker compose up (container)
-	$(DOCKER) compose up -d $*
+	$(DOCKER) compose up -d --wait --no-recreate $*
 
 .PHONY: docker-compose-down
 docker-compose-down: ## docker compose down

bun.lock

@@ -1,22 +1,21 @@
 {
   "lockfileVersion": 1,
-  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "tout-doux",
       "dependencies": {
-        "@lucide/vue": "^1.24.0",
+        "@lucide/vue": "^1.25.0",
         "cron-parser": "^5.6.2",
         "date-fns": "^4.4.0",
         "pinia": "^3.0.4",
         "random-word-slugs": "^0.1.7",
         "rrule": "^2.8.1",
-        "vue": "^3.5.39",
+        "vue": "^3.5.40",
         "vue-i18n": "^11.4.6",
-        "vue-router": "^5.1.0",
+        "vue-router": "^5.2.0",
       },
       "devDependencies": {
-        "@tailwindcss/vite": "^4.3.2",
+        "@tailwindcss/vite": "^4.3.3",
         "@tsconfig/node24": "^24.0.4",
         "@types/node": "^24.13.3",
         "@vitejs/plugin-vue": "^6.0.8",
@@ -31,9 +30,9 @@
         "npm-run-all2": "^8.0.4",
         "oxlint": "^1.74.0",
         "sass-embedded": "^1.100.0",
-        "tailwindcss": "^4.3.2",
+        "tailwindcss": "^4.3.3",
         "typescript": "~5.9.3",
-        "vite": "^8.1.4",
+        "vite": "^8.1.5",
         "vite-plugin-vue-devtools": "^8.1.5",
         "vue-tsc": "^3.3.7",
       },

package.json

@@ -1,6 +1,6 @@
 {
     "name": "tout-doux",
-    "version": "1.5.0",
+    "version": "1.7.2",
     "private": true,
     "type": "module",
     "engines": {

pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "tout-doux"
-version = "1.5.0"
+version = "1.7.2"
 description = ""
 requires-python = ">=3.14"
 dependencies = [

resources/lang/en.json

@@ -22,10 +22,14 @@
             "Sunday"
         ],
         "month": {
-            "st": "st",
-            "nd": "nd",
-            "rd": "rd",
-            "th": "th"
+            "st": "The {0}st",
+            "nd": "The {0}nd",
+            "rd": "The {0}rd",
+            "th": "The {0}th",
+            "first_day": "First day of month",
+            "last_day": "Last day of month",
+            "last": "Last",
+            "first": "First"
         },
         "year": [
             "January",
@@ -40,7 +44,8 @@
             "October",
             "November",
             "December"
-        ]
+        ],
+        "rrule_start": "Start:"
     },
     "checked": "Checked",
     "resets": "Resets",
@@ -61,7 +66,8 @@
         "reverse_sort": "Reverse sort",
         "last_checked": "Show last checked time",
         "next_reset": "Show next reset time",
-        "separate_completed": "Separate completed tasks below"
+        "separate_completed": "Separate completed tasks below",
+        "missed": "Show in red missed tasks (reset without check)"
     },
     "alerts": {
         "task_updated": "Task updated",

resources/lang/fr.json

@@ -22,10 +22,14 @@
             "Dimanche"
         ],
         "month": {
-            "st": "",
-            "nd": "",
-            "rd": "",
-            "th": ""
+            "st": "Le {0}",
+            "nd": "Le {0}",
+            "rd": "Le {0}",
+            "th": "Le {0}",
+            "first_day": "Premier jour du mois",
+            "last_day": "Dernier jour du mois",
+            "last": "Dernier",
+            "first": "Premier"
         },
         "year": [
             "Janvier",
@@ -40,7 +44,8 @@
             "Octobre",
             "Novembre",
             "Décembre"
-        ]
+        ],
+        "rrule_start": "Début :"
     },
     "checked": "Complété",
     "resets": "Reviens",
@@ -61,7 +66,8 @@
         "reverse_sort": "Inverser le tri",
         "last_checked": "Afficher la dernière completion",
         "next_reset": "Afficher la prochaine réinitialisation",
-        "separate_completed": "Séparer les tâches complétées plus bas"
+        "separate_completed": "Séparer les tâches complétées plus bas",
+        "missed": "Indiquer en rouge les tâches manquées (réinitialisées sans completion)"
     },
     "alerts": {
         "task_updated": "Tâche mise a jour",

resources/ts/App.vue

@@ -25,7 +25,7 @@ onMounted(() => {
         <div class="hero bg-hero grow">
             <div class="hero-content text-center p-0">
                 <div
-                    class="max-w-md min-w-96 bg-base-100 rounded-box shadow-md p-4"
+                    class="max-w-96 min-w-screen sm:min-w-96 bg-base-100 rounded-box shadow-md p-4"
                 >
                     <router-link
                         to="/"

resources/ts/components/CronInput.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
-import { ref, onBeforeMount, watch } from "vue";
+import { ref, onBeforeMount, watch, defineAsyncComponent } from "vue";
 import { getCron, parseCron, validCron } from "@/lib/recurrence";
 import { CronType } from "@/enums";
+const DateInput = defineAsyncComponent(
+    () => import("@/components/DateInput.vue"),
+);
 
 const DEFAULT_CRON = "0 0 * * *";
 
@@ -11,28 +14,38 @@ const valid = ref<boolean>(true);
 const props = defineProps<{ editMode: boolean }>();
 
 const cronType = ref<CronType>(CronType.MANUAL);
-const cronValue = ref<number>(0);
+const cronValue = ref<string>("0");
+const cronDate = ref<Date>(new Date());
 
 function onCronChanged() {
     const data = parseCron(cron.value);
     rawCron.value = cron.value ?? DEFAULT_CRON;
     cronType.value = data.type;
-    cronValue.value = data.value;
+    cronValue.value = data.value.toFixed(0);
+    cronDate.value = data.date ?? new Date();
 }
 
 function updateCron() {
-    cron.value = getCron(cronType.value, cronValue.value, rawCron.value);
+    cron.value = getCron(
+        cronType.value,
+        parseInt(cronValue.value),
+        cronDate.value,
+        rawCron.value,
+    );
 }
 
 function onChangeCronType() {
     switch (cronType.value) {
         case CronType.EVERY_DAY:
-            cronValue.value = 0;
+            cronValue.value = "0";
             break;
         case CronType.EVERY_WEEK:
         case CronType.EVERY_MONTH:
         case CronType.EVERY_YEAR:
-            cronValue.value = 1;
+        case CronType.EVERY_N_DAYS:
+        case CronType.EVERY_N_WEEKS:
+        case CronType.EVERY_N_MONTHS:
+            cronValue.value = "1";
             break;
         case CronType.CUSTOM:
             cron.value ??= DEFAULT_CRON;
@@ -45,6 +58,10 @@ function onChangeCronValue() {
     updateCron();
 }
 
+function onChangeCronDate() {
+    updateCron();
+}
+
 function onInputRawCron() {
     valid.value = validCron(rawCron.value);
     if (valid.value) {
@@ -62,8 +79,12 @@ watch(cron, () => {
 </script>
 
 <template>
-    <div class="flex gap-2">
-        <select v-model="cronType" class="select flex-1" @change="onChangeCronType">
+    <div class="flex gap-2 flex-wrap">
+        <select
+            v-model="cronType"
+            class="select flex-1"
+            @change="onChangeCronType"
+        >
             <option :value="CronType.MANUAL">
                 {{ $t("cron.type.manual") }}
             </option>
@@ -103,7 +124,7 @@ watch(cron, () => {
         >
             <option
                 v-for="i in Array.from(Array(24).keys())"
-                :key="`h${i}`"
+                :key="`h${i + 1}`"
                 :value="i"
             >
                 {{ i.toFixed(0).padStart(2, "0") }}:00
@@ -117,7 +138,7 @@ watch(cron, () => {
         >
             <option
                 v-for="i in Array.from(Array(7).keys())"
-                :key="`w${i}`"
+                :key="`w${i + 1}`"
                 :value="i + 1"
             >
                 {{ $t(`cron.week.${i.toFixed(0)}`) }}
@@ -129,20 +150,37 @@ watch(cron, () => {
             class="select flex-1"
             @change="onChangeCronValue"
         >
+            <option :value="1">{{ $t("cron.month.first_day") }}</option>
+            <option :value="32">{{ $t("cron.month.last_day") }}</option>
             <option
-                v-for="i in Array.from(Array(31).keys())"
-                :key="`d${i}`"
-                :value="i + 1"
+                v-for="i in Array.from(Array(7).keys())"
+                :key="`d${-(i + 1)}`"
+                :value="-(i + 1)"
             >
-                {{ i + 1
-                }}{{
-                    i % 10 == 0
-                        ? $t("cron.month.st")
-                        : i % 10 === 1
-                          ? $t("cron.month.nd")
-                          : i % 10 === 2
-                            ? $t("cron.month.rd")
-                            : $t("cron.month.th")
+                {{ $t("cron.month.first") }}
+                {{ $t(`cron.week.${i.toFixed(0)}`).toLowerCase() }}
+            </option>
+            <option
+                v-for="i in Array.from(Array(7).keys())"
+                :key="`d${-(i + 8)}`"
+                :value="-(i + 8)"
+            >
+                {{ $t("cron.month.last") }}
+                {{ $t(`cron.week.${i.toFixed(0)}`).toLowerCase() }}
+            </option>
+            <option
+                v-for="i in Array.from(Array(30).keys())"
+                :key="`d${i + 2}`"
+                :value="i + 2"
+            >
+                {{
+                    i % 10 == 9 && i !== 9
+                        ? $t("cron.month.st", [i + 2])
+                        : i % 10 === 0 && i !== 10
+                          ? $t("cron.month.nd", [i + 2])
+                          : i % 10 === 1 && i !== 11
+                            ? $t("cron.month.rd", [i + 2])
+                            : $t("cron.month.th", [i + 2])
                 }}
             </option>
         </select>
@@ -169,13 +207,33 @@ watch(cron, () => {
             @input="onInputRawCron"
         />
         <input
-            v-if="cronType === CronType.EVERY_N_DAYS || cronType === CronType.EVERY_N_WEEKS || cronType === CronType.EVERY_N_MONTHS"
+            v-if="
+                cronType === CronType.EVERY_N_DAYS ||
+                cronType === CronType.EVERY_N_WEEKS ||
+                cronType === CronType.EVERY_N_MONTHS
+            "
             v-model="cronValue"
             type="number"
             min="1"
             step="1"
             class="input font-mono flex-1"
-            @input="onChangeCronValue"
+            @change="onChangeCronValue"
         />
+        <label
+            v-if="
+                cronType === CronType.EVERY_N_DAYS ||
+                cronType === CronType.EVERY_N_WEEKS ||
+                cronType === CronType.EVERY_N_MONTHS
+            "
+            class="label flex-1 basis-full"
+        >
+            {{ $t("cron.rrule_start") }}
+            <date-input
+                v-model="cronDate"
+                required
+                class="input font-mono"
+                @change="onChangeCronDate"
+            />
+        </label>
     </div>
 </template>

resources/ts/components/DateInput.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+const emit = defineEmits<(e: "input"|"change", value: Date) => void>();
+
+const date = defineModel<Date>({ required: true });
+
+function onInput(event: Event) {
+    const inputValue = (event.target as HTMLInputElement).value;
+    date.value =  new Date(inputValue);
+    emit('input', date.value);
+}
+
+function onChange(event: Event) {
+    const inputValue = (event.target as HTMLInputElement).value;
+    date.value =  new Date(inputValue);
+    emit('change', date.value);
+}
+</script>
+
+<template>
+    <input
+        :value="date.toISOString().substring(0, 10)"
+        type="date"
+        @input="onInput"
+        @change="onChange"
+    />
+</template>

resources/ts/components/ListOptions.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { ArrowDownUpIcon, Settings2Icon } from "@lucide/vue";
+import { SortType } from "@/enums";
+
+defineEmits<(e: "changeSort") => void>();
+
+const sortType = defineModel<SortType>("sortType", { required: true });
+const sortReverse = defineModel<boolean>("sortReverse", { required: true });
+const showLastChecked = defineModel<boolean>("showLastChecked", {
+    required: true,
+});
+const showNextReset = defineModel<boolean>("showNextReset", { required: true });
+const separateCompleted = defineModel<boolean>("separateCompleted", {
+    required: true,
+});
+const showMissed = defineModel<boolean>("showMissed", { required: true });
+</script>
+
+<template>
+    <div class="collapse collapse-arrow font-light text-sm">
+        <input id="options-dropdown p-0" type="checkbox" />
+        <div class="collapse-title p-0 content-center">
+            <settings-2-icon class="inline" :size="16" />
+            {{ $t("options.title") }}
+        </div>
+        <div class="collapse-content">
+            <div class="w-full flex flex-col gap-2 text-left overflow-scroll">
+                <label class="label">
+                    <arrow-down-up-icon class="inline" />
+                    {{ $t("options.sort_by") }}
+                    <select
+                        v-model="sortType"
+                        class="select"
+                        @change="$emit('changeSort')"
+                    >
+                        <option :value="SortType.CREATED_AT">
+                            {{ $t("options.sort.created_at") }}
+                        </option>
+                        <option :value="SortType.UPDATED_AT">
+                            {{ $t("options.sort.updated_at") }}
+                        </option>
+                        <option :value="SortType.CHECK_DATE">
+                            {{ $t("options.sort.check_date") }}
+                        </option>
+                        <option :value="SortType.RESET_DATE">
+                            {{ $t("options.sort.reset_date") }}
+                        </option>
+                        <option :value="SortType.NAME">
+                            {{ $t("options.sort.name") }}
+                        </option>
+                    </select>
+                </label>
+                <label class="label text-wrap">
+                    <input
+                        v-model="sortReverse"
+                        type="checkbox"
+                        class="checkbox"
+                        @change="$emit('changeSort')"
+                    />
+                    {{ $t("options.reverse_sort") }}
+                </label>
+                <label class="label text-wrap">
+                    <input
+                        v-model="showLastChecked"
+                        type="checkbox"
+                        class="checkbox"
+                    />
+                    {{ $t("options.last_checked") }}
+                </label>
+                <label class="label text-wrap">
+                    <input
+                        v-model="showNextReset"
+                        type="checkbox"
+                        class="checkbox"
+                    />
+                    {{ $t("options.next_reset") }}
+                </label>
+                <label class="label text-wrap">
+                    <input
+                        v-model="separateCompleted"
+                        type="checkbox"
+                        class="checkbox"
+                    />
+                    {{ $t("options.separate_completed") }}
+                </label>
+                <label class="label text-wrap">
+                    <input
+                        v-model="showMissed"
+                        type="checkbox"
+                        class="checkbox"
+                    />
+                    {{ $t("options.missed") }}
+                </label>
+            </div>
+        </div>
+    </div>
+</template>

resources/ts/components/TaskItem.vue

@@ -13,7 +13,12 @@ import { updateTask } from "@/api/tasks";
 const CronInput = defineAsyncComponent(
     () => import("@/components/CronInput.vue"),
 );
-import { isTemporary, taskCompleted, taskNextReset } from "@/lib/tasks";
+import {
+    isTemporary,
+    taskCompleted,
+    taskFutureReset,
+    taskNextReset,
+} from "@/lib/tasks";
 import { relativeTime } from "@/lib/dates";
 import { useAlertStore } from "@/stores/alerts";
 import { useI18n } from "vue-i18n";
@@ -23,7 +28,11 @@ const emit =
     defineEmits<(e: "clone" | "delete" | "updated", task: Task) => void>();
 
 const task = defineModel<Task>({ required: true });
-defineProps<{ showLastChecked: boolean; showNextReset: boolean }>();
+defineProps<{
+    showLastChecked: boolean;
+    showNextReset: boolean;
+    showMissed: boolean;
+}>();
 
 const editMode = ref<boolean>(false);
 const editName = ref<string>("");
@@ -33,6 +42,13 @@ const editNameInput = ref<HTMLInputElement | null>(null);
 
 const checked = computed<boolean>(() => taskCompleted(task.value));
 const nextReset = computed<Date | null>(() => taskNextReset(task.value));
+const futureReset = computed<Date | null>(() => taskFutureReset(task.value));
+const missed = computed<boolean>(
+    () =>
+        !checked.value &&
+        futureReset.value !== null &&
+        futureReset.value.getTime() < new Date().getTime(),
+);
 
 const i18n = useI18n();
 
@@ -157,6 +173,7 @@ watch(task, () => {
             </div>
             <div
                 class="cursor-pointer text-lg select-none"
+                :class="showMissed && missed ? 'text-error' : ''"
                 @click.prevent="onOpen"
             >
                 <div>{{ task.name }}</div>

resources/ts/lib/recurrence.ts

@@ -7,44 +7,70 @@ const ONE_TIME_VALUE = "@one-time";
 export function parseCron(cron: string | null): {
     type: CronType;
     value: number;
+    date: Date | null;
 } {
     let value: RegExpMatchArray | null;
     if (cron === null) {
         return {
             type: CronType.MANUAL,
             value: 0,
+            date: null,
         };
     } else if (cron === ONE_TIME_VALUE) {
         return {
             type: CronType.ONE_TIME,
             value: 0,
+            date: null,
         };
-    } else if (cron.startsWith("RRULE:")) {
+    } else if (cron.startsWith("RRULE:") || cron.startsWith("DTSTART:")) {
         return parseRrule(cron);
     } else if ((value = /^0 (\d+) \* \* \*$/i.exec(cron)) !== null) {
         return {
             type: CronType.EVERY_DAY,
             value: parseInt(value[1] ?? ""),
+            date: null,
         };
     } else if ((value = /^0 0 \* \* (\d+)$/i.exec(cron)) !== null) {
         return {
             type: CronType.EVERY_WEEK,
             value: parseInt(value[1] ?? ""),
+            date: null,
         };
     } else if ((value = /^0 0 (\d+) \* \*$/i.exec(cron)) !== null) {
         return {
             type: CronType.EVERY_MONTH,
             value: parseInt(value[1] ?? ""),
+            date: null,
+        };
+    } else if ((value = /^0 0 L \* \*$/i.exec(cron)) !== null) {
+        return {
+            type: CronType.EVERY_MONTH,
+            value: 32,
+            date: null,
+        };
+    } else if ((value = /^0 0 \* \* (\d+)#1$/i.exec(cron)) !== null) {
+        return {
+            type: CronType.EVERY_MONTH,
+            value: -parseInt(value[1] ?? ""),
+            date: null,
+        };
+    } else if ((value = /^0 0 \* \* (\d+)L$/i.exec(cron)) !== null) {
+        return {
+            type: CronType.EVERY_MONTH,
+            value: -parseInt(value[1] ?? "") - 7,
+            date: null,
         };
     } else if ((value = /^0 0 1 (\d+) \*$/i.exec(cron)) !== null) {
         return {
             type: CronType.EVERY_YEAR,
             value: parseInt(value[1] ?? ""),
+            date: null,
         };
     } else {
         return {
             type: CronType.CUSTOM,
             value: 0,
+            date: null,
         };
     }
 }
@@ -52,6 +78,7 @@ export function parseCron(cron: string | null): {
 export function parseRrule(rule: string): {
     type: CronType;
     value: number;
+    date: Date | null;
 } {
     try {
         const rrule = RRule.parseString(rule);
@@ -60,21 +87,25 @@ export function parseRrule(rule: string): {
                 return {
                     type: CronType.EVERY_N_MONTHS,
                     value: (rrule.interval ?? 1) * 12,
+                    date: rrule.dtstart ?? null,
                 };
             case RRule.MONTHLY:
                 return {
                     type: CronType.EVERY_N_MONTHS,
                     value: rrule.interval ?? 1,
+                    date: rrule.dtstart ?? null,
                 };
             case RRule.WEEKLY:
                 return {
                     type: CronType.EVERY_N_WEEKS,
                     value: rrule.interval ?? 1,
+                    date: rrule.dtstart ?? null,
                 };
             case RRule.DAILY:
                 return {
                     type: CronType.EVERY_N_DAYS,
                     value: rrule.interval ?? 1,
+                    date: rrule.dtstart ?? null,
                 };
         }
     } catch {
@@ -83,12 +114,14 @@ export function parseRrule(rule: string): {
     return {
         type: CronType.MANUAL,
         value: 0,
+        date: null,
     };
 }
 
 export function getCron(
     type: CronType,
     value: number,
+    date: Date,
     fallback: string,
 ): string | null {
     switch (type) {
@@ -99,6 +132,15 @@ export function getCron(
         case CronType.EVERY_WEEK:
             return `0 0 * * ${value.toFixed(0)}`;
         case CronType.EVERY_MONTH:
+            if (value === 32) {
+                return `0 0 L * *`;
+            }
+            if (value < 0 && value >= -7) {
+                return `0 0 * * ${(-value).toFixed(0)}#1`;
+            }
+            if (value < -7 && value >= -14) {
+                return `0 0 * * ${(-value - 7).toFixed(0)}L`;
+            }
             return `0 0 ${value.toFixed(0)} * *`;
         case CronType.EVERY_YEAR:
             return `0 0 1 ${value.toFixed(0)} *`;
@@ -106,16 +148,19 @@ export function getCron(
             return new RRule({
                 freq: RRule.MONTHLY,
                 interval: value,
+                dtstart: date,
             }).toString();
         case CronType.EVERY_N_WEEKS:
             return new RRule({
                 freq: RRule.WEEKLY,
                 interval: value,
+                dtstart: date,
             }).toString();
         case CronType.EVERY_N_DAYS:
             return new RRule({
                 freq: RRule.DAILY,
                 interval: value,
+                dtstart: date,
             }).toString();
         case CronType.CUSTOM:
             if (validCron(fallback)) {
@@ -126,6 +171,10 @@ export function getCron(
     return null;
 }
 
+function dtStartFormat(date: Date): string {
+    return `${date.getFullYear().toFixed(0)}${(date.getMonth() + 1).toFixed(0).padStart(2, "0")}${date.getDate().toFixed(0).padStart(2, "0")}T000000Z`;
+}
+
 export function isOneTime(cron: string | null): boolean {
     return cron === ONE_TIME_VALUE;
 }
@@ -140,11 +189,11 @@ export function validCron(cron: string): boolean {
 }
 
 export function nextCronReset(
-    date: Date | null,
+    date: Date,
     cron: string | null,
     hash: string,
 ): Date | null {
-    if (date === null || cron === null || isOneTime(cron)) {
+    if (cron === null || isOneTime(cron)) {
         return null;
     }
     try {
@@ -152,11 +201,10 @@ export function nextCronReset(
             try {
                 const rule = new RRule({
                     ...RRule.parseString(cron),
-                    dtstart: date,
                     count: 2,
                 });
 
-                return rule.all()[1] ?? null;
+                return rule.after(date) ?? null;
             } catch {
                 // ignore
             }

resources/ts/lib/tasks.ts

@@ -35,13 +35,20 @@ export function isTemporary(task: Task): boolean {
 }
 
 export function taskNextReset(task: Task): Date | null {
-    return nextCronReset(task.check_date, task.reset_cron, task.id);
+    return nextCronReset(task.check_date ?? new Date(), task.reset_cron, task.id);
+}
+
+export function taskFutureReset(task: Task): Date | null {
+    return nextCronReset(taskNextReset(task) ?? new Date(), task.reset_cron, task.id);
 }
 
 export function taskCompleted(task: Task): boolean {
+    if (task.check_date === null) {
+        return false;
+    }
     const nextReset = taskNextReset(task);
     if (nextReset === null) {
-        return task.check_date !== null;
+        return true;
     }
     return nextReset.getTime() > new Date().getTime();
 }

resources/ts/views/ListView.vue

@@ -4,8 +4,6 @@ import type { Task } from "@/types";
 import { getTasks, createTask, deleteTask } from "@/api/tasks";
 import {
     CirclePlusIcon,
-    ArrowDownUpIcon,
-    Settings2Icon,
     CircleCheckBigIcon,
     CheckCheckIcon,
     SearchIcon,
@@ -14,6 +12,9 @@ import {
 const TaskItem = defineAsyncComponent(
     () => import("@/components/TaskItem.vue"),
 );
+const ListOptions = defineAsyncComponent(
+    () => import("@/components/ListOptions.vue"),
+);
 import { taskCompleted, sortTasks, newTemporaryTask } from "@/lib/tasks";
 import { SortType } from "@/enums";
 import { booleanCookieRef, enumCookieRef } from "@/lib/cookies";
@@ -36,6 +37,7 @@ const sortReverse = booleanCookieRef("sortReverse", false);
 const showLastChecked = booleanCookieRef("showLastChecked", false);
 const showNextReset = booleanCookieRef("showNextReset", false);
 const separateCompleted = booleanCookieRef("separateCompleted", true);
+const showMissed = booleanCookieRef("showMissed", true);
 
 const completedCount = computed<number>(
     () => tasks.value.filter(taskCompleted).length,
@@ -146,14 +148,6 @@ function onDeleteTask(task: Task) {
         });
 }
 
-function onChangeSortType() {
-    reSortTasks();
-}
-
-function onChangeSortReverse() {
-    reSortTasks();
-}
-
 function onShare() {
     if (!empty.value) {
         shareLink(
@@ -229,6 +223,7 @@ onBeforeRouteLeave(() => {
                     v-model="tasks[i]"
                     :show-last-checked="showLastChecked"
                     :show-next-reset="showNextReset"
+                    :show-missed="showMissed"
                     @updated="onUpdateTask"
                     @clone="onCloneTask"
                     @delete="onDeleteTask"
@@ -256,6 +251,7 @@ onBeforeRouteLeave(() => {
                             v-model="tasks[i]"
                             :show-last-checked="showLastChecked"
                             :show-next-reset="showNextReset"
+                            :show-missed="showMissed"
                             @clone="onCloneTask"
                             @delete="onDeleteTask"
                         />
@@ -281,76 +277,15 @@ onBeforeRouteLeave(() => {
             <circle-plus-icon />
         </button>
     </div>
-    <div
+    <list-options
         v-if="!empty"
-        class="mt-4 -mb-4 collapse collapse-arrow font-light text-sm"
-    >
-        <input id="options-dropdown p-0" type="checkbox" />
-        <div class="collapse-title p-0 content-center">
-            <settings-2-icon class="inline" :size="16" />
-            {{ $t("options.title") }}
-        </div>
-        <div class="collapse-content">
-            <fieldset class="fieldset flex flex-col gap-2">
-                <label class="label">
-                    <arrow-down-up-icon class="inline" />
-                    {{ $t("options.sort_by") }}
-                    <select
-                        v-model="sortType"
-                        class="select"
-                        @change="onChangeSortType"
-                    >
-                        <option :value="SortType.CREATED_AT">
-                            {{ $t("options.sort.created_at") }}
-                        </option>
-                        <option :value="SortType.UPDATED_AT">
-                            {{ $t("options.sort.updated_at") }}
-                        </option>
-                        <option :value="SortType.CHECK_DATE">
-                            {{ $t("options.sort.check_date") }}
-                        </option>
-                        <option :value="SortType.RESET_DATE">
-                            {{ $t("options.sort.reset_date") }}
-                        </option>
-                        <option :value="SortType.NAME">
-                            {{ $t("options.sort.name") }}
-                        </option>
-                    </select>
-                </label>
-                <label class="label">
-                    <input
-                        v-model="sortReverse"
-                        type="checkbox"
-                        class="checkbox"
-                        @change="onChangeSortReverse"
-                    />
-                    {{ $t("options.reverse_sort") }}
-                </label>
-                <label class="label">
-                    <input
-                        v-model="showLastChecked"
-                        type="checkbox"
-                        class="checkbox"
-                    />
-                    {{ $t("options.last_checked") }}
-                </label>
-                <label class="label">
-                    <input
-                        v-model="showNextReset"
-                        type="checkbox"
-                        class="checkbox"
-                    />
-                    {{ $t("options.next_reset") }}
-                </label>
-                <label class="label">
-                    <input
-                        v-model="separateCompleted"
-                        type="checkbox"
-                        class="checkbox"
-                    />
-                    {{ $t("options.separate_completed") }}
-                </label>
-            </fieldset>
-        </div>
-    </div>
+        v-model:sort-type="sortType"
+        v-model:sort-reverse="sortReverse"
+        v-model:show-last-checked="showLastChecked"
+        v-model:show-next-reset="showNextReset"
+        v-model:separate-completed="separateCompleted"
+        v-model:show-missed="showMissed"
+        class="mt-4 -mb-4"
+        @change-sort="reSortTasks"
+    />
 </template>

uv.lock

@@ -323,7 +323,7 @@ asyncpg = [
 
 [[package]]
 name = "tout-doux"
-version = "1.5.0"
+version = "1.7.2"
 source = { editable = "." }
 dependencies = [
     { name = "flask", extra = ["async"] },