fix: paddings and margins

resources/ts/App.vue

@@ -25,12 +25,17 @@ 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"
+                    class="max-w-md min-w-96 bg-base-100 rounded-box shadow-md p-4"
                 >
                     <h1
-                        class="p-4 pb-2 text-4xl font-bold opacity-60 tracking-wide select-none"
+                        class="text-4xl font-bold opacity-60 tracking-wide select-none"
                     >
-                        <list-todo-icon :stroke-width="3" :size="32" class="inline" /> Tout Doux
+                        <list-todo-icon
+                            :stroke-width="3"
+                            :size="32"
+                            class="inline"
+                        />
+                        Tout Doux
                     </h1>
                     <router-view />
                 </div>

resources/ts/components/RecentItem.vue

@@ -1,15 +1,14 @@
 <script setup lang="ts">
 import { ArrowBigRightDashIcon } from "@lucide/vue";
 
-defineProps<{list: string}>();
+defineProps<{ list: string }>();
 </script>
 
 <template>
     <router-link
         :to="`/${list}`"
-        class="w-full flex gap-2 mb-2"
+        class="w-full flex gap-2 mb-2 hover:underline"
     >
-        <arrow-big-right-dash-icon :size="16" class="inline" />
+        <arrow-big-right-dash-icon :size="16" class="inline" /> {{ list }}
-        <span class="underline">{{ list }}</span>
     </router-link>
 </template>

resources/ts/views/HomeView.vue

@@ -24,18 +24,18 @@ function onInput() {
 }
 
 function updateTitle() {
-    document.title = 'Tout Doux';
+    document.title = "Tout Doux";
 }
 
-onBeforeMount(updateTitle)
+onBeforeMount(updateTitle);
 onBeforeRouteUpdate(updateTitle);
 </script>
 
 <template>
-    <div
+    <div class="italic mt-4 text-xl font-extralight">
-        class="p-4 italic text-xl font-extralight"
+        {{ $t("home") }}<br />{{ $t("call_to_action") }}
-    >{{ $t('home') }}<br/>{{ $t('call_to_action') }}</div>
+    </div>
-    <div class="flex gap-2 p-4">
+    <div class="flex gap-2 mt-4">
         <input
             v-model="listNameInput"
             type="text"
@@ -47,7 +47,7 @@ onBeforeRouteUpdate(updateTitle);
             <dices-icon />
         </button>
     </div>
-    <div class="w-full">
+    <div class="mt-4">
         <router-link
             class="btn btn-lg"
             :class="listNameInput.trim().length === 0 ? 'btn-disabled' : ''"
@@ -57,14 +57,21 @@ onBeforeRouteUpdate(updateTitle);
             {{ $t("home_button") }}
         </router-link>
     </div>
-    <div v-if="recentLists.length" class="collapse collapse-arrow font-light text-sm">
+    <div
-        <input id="recent-dropdown" type="checkbox" />
+        v-if="recentLists.length"
-        <div class="collapse-title">
+        class="mt-4 -mb-4 lh collapse collapse-arrow font-light text-sm"
+    >
+        <input id="recent-dropdown p-0" type="checkbox" />
+        <div class="collapse-title p-0 content-center">
             <history-icon class="inline" :size="16" />
             {{ $t("recent") }}
         </div>
         <div class="collapse-content">
-            <recent-item v-for="(list, i) in recentLists" :key="`recent-${i}`" :list="list" />
+            <recent-item
+                v-for="(list, i) in recentLists"
+                :key="`recent-${i}`"
+                :list="list"
+            />
         </div>
     </div>
 </template>

resources/ts/views/ListView.vue

@@ -134,6 +134,7 @@ function onChangeSortReverse() {
 }
 
 function onShare() {
+    if (!empty.value) {
         shareLink(
             `Tout Doux - ${list.value ?? ""}`,
             i18n.t("share_text"),
@@ -147,6 +148,7 @@ function onShare() {
             .catch(() => {
                 alertError(i18n.t("alerts.share_error"));
             });
+    }
 }
 
 function updateTitle() {
@@ -167,11 +169,32 @@ onBeforeRouteUpdate((to) => {
 </script>
 
 <template>
-    <div class="list-row italic text-sm font-extralight self-center">
+    <div
+        class="list-row italic text-sm font-extralight self-center"
+        :class="!empty ? 'cursor-pointer hover:underline' : ''"
+        :title="!empty ? $t('share_button') : ''"
+        @click="onShare"
+    >
         {{ list }}
-        <span v-if="taskCount">({{ completedCount }} / {{ taskCount }})</span>
+        <span v-if="!empty"
+            >({{ completedCount }} / {{ taskCount }})&nbsp;<share-2-icon
+                class="inline"
+                :size="16"
+                :stroke-width="1"
+        /></span>
     </div>
-    <ul class="list">
+    <div v-if="!loading && empty" class="mt-4 mb-4 italic text-xl font-extralight">
+        <search-icon class="inline" />
+        <span v-html="$t('empty_hint')"></span>
+    </div>
+    <div
+        v-else-if="!loading && allCompleted && separateCompleted"
+        class="mt-4 mb-4 italic text-xl font-extralight"
+    >
+        <check-check-icon class="inline" />
+        <span v-html="$t('all_completed_hint')"></span>
+    </div>
+    <ul v-else class="list">
         <template v-for="(task, i) in tasks" :key="task.id">
             <li v-if="tasks[i] && (!separateCompleted || !taskCompleted(task))">
                 <task-item
@@ -184,35 +207,17 @@ onBeforeRouteUpdate((to) => {
                 />
             </li>
         </template>
-        <li
-            v-if="!loading && empty"
-            class="list-row italic text-xl font-extralight self-center"
-        >
-            <span
-                ><search-icon class="inline" />
-                <span v-html="$t('empty_hint')"></span
-            ></span>
-        </li>
-        <li
-            v-else-if="!loading && allCompleted && separateCompleted"
-            class="list-row italic text-xl font-extralight self-center"
-        >
-            <span
-                ><check-check-icon class="inline" />
-                <span v-html="$t('all_completed_hint')"></span
-            ></span>
-        </li>
     </ul>
     <div
         v-if="separateCompleted && hasCompleted"
-        class="collapse collapse-arrow"
+        class="collapse collapse-arrow mb-4"
     >
-        <input id="completed-dropdown" type="checkbox" />
+        <input id="completed-dropdown p-0" type="checkbox" />
-        <div class="collapse-title mb-0">
+        <div class="collapse-title p-0 content-center">
             <circle-check-big-icon class="inline" :size="24" />
             {{ $t("completed") }} ({{ completedCount }})
         </div>
-        <div class="collapse-content p-0">
+        <div class="collapse-content p-0 -mb-4">
             <ul class="list">
                 <template
                     v-for="(task, i) in tasks"
@@ -231,7 +236,7 @@ onBeforeRouteUpdate((to) => {
             </ul>
         </div>
     </div>
-    <div class="flex gap-2 p-4">
+    <div class="flex gap-2">
         <input
             v-model="taskInput"
             type="text"
@@ -248,14 +253,12 @@ onBeforeRouteUpdate((to) => {
             <circle-plus-icon />
         </button>
     </div>
-    <div v-if="!empty">
+    <div
-        <button class="btn btn-sm px-4" @click="onShare">
+        v-if="!empty"
-            <share-2-icon class="inline" :size="16" /> {{ $t("share_button") }}
+        class="mt-4 -mb-4 collapse collapse-arrow font-light text-sm"
-        </button>
+    >
-    </div>
+        <input id="options-dropdown p-0" type="checkbox" />
-    <div v-if="!empty" class="collapse collapse-arrow font-light text-sm">
+        <div class="collapse-title p-0 content-center">
-        <input id="options-dropdown" type="checkbox" />
-        <div class="collapse-title">
             <settings-2-icon class="inline" :size="16" />
             {{ $t("options.title") }}
         </div>

resources/ts/views/NotFoundView.vue

@@ -4,18 +4,20 @@ import { onBeforeMount } from "vue";
 import { onBeforeRouteUpdate } from "vue-router";
 
 function updateTitle() {
-    document.title = 'Tout Doux - Not Found';
+    document.title = "Tout Doux - Not Found";
 }
 
-onBeforeMount(updateTitle)
+onBeforeMount(updateTitle);
 onBeforeRouteUpdate(updateTitle);
 </script>
 
 <template>
-    <div class="italic text-xl font-extralight mb-4">
+    <div class="italic text-xl font-extralight mt-4">
-        <circle-question-mark-icon class="inline" /> {{ $t('not_found') }}
+        <circle-question-mark-icon class="inline" /> {{ $t("not_found") }}
     </div>
-    <div class="w-full">
+    <div class="w-full mt-4">
-        <router-link to="/" class="btn mb-4 px-4">{{ $t('not_found_button') }}</router-link>
+        <router-link to="/" class="btn">{{
+            $t("not_found_button")
+        }}</router-link>
     </div>
 </template>