feat(time-tracking) : add pending complete entry flow and redesign sidebar timer

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/components/SidebarTimer.vue

@@ -1,27 +1,20 @@
 <template>
-    <div class="flex items-center gap-2">
-        <button
-            class="flex items-center justify-center rounded-full transition-colors"
-            :class="timerStore.isRunning
-                ? 'bg-red-500 hover:bg-red-600 text-white'
-                : 'bg-green-500 hover:bg-green-600 text-white'"
-            style="width: 32px; height: 32px;"
-            :title="timerStore.isRunning ? 'Arrêter le timer' : 'Démarrer un timer'"
-            @click="timerStore.isRunning ? timerStore.stop() : timerStore.start()"
-        >
-            <Icon
-                :name="timerStore.isRunning ? 'mdi:stop' : 'mdi:play'"
-                size="18"
-            />
-        </button>
-        <span
-            v-if="!collapsed"
-            class="font-mono text-sm font-bold"
-            :class="timerStore.isRunning ? 'text-white' : 'text-neutral-400'"
-        >
+    <button
+        class="flex w-full items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-semibold text-white transition"
+        :class="timerStore.isRunning
+            ? 'bg-red-500 hover:bg-red-600'
+            : 'bg-primary-500 hover:bg-primary-600'"
+        :title="timerStore.isRunning ? 'Arrêter le timer' : 'Démarrer un timer'"
+        @click="timerStore.isRunning ? timerStore.stop() : timerStore.start()"
+    >
+        <Icon
+            :name="timerStore.isRunning ? 'mdi:stop' : 'mdi:play'"
+            size="16"
+        />
+        <span v-if="!collapsed" class="font-mono tracking-wide">
             {{ timerStore.elapsedFormatted }}
         </span>
-    </div>
+    </button>
 </template>
 
 <script setup lang="ts">