refactor(frontend) : make page headers and filters sticky across all pages

Wrap title + filters in a sticky container (top-8 sm:top-12, z-20, bg-white)
on all pages for consistent scroll behavior. Also fix SidebarTimer icon
visibility when sidebar is collapsed.

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

frontend/components/ui/AppTopNav.vue

@@ -1,10 +1,16 @@
 <template>
-  <header class="border-b border-neutral-200 bg-primary-500 p-5 text-white">
-    <div class="flex h-full items-center justify-end">
-      <div class="flex gap-12 text-xl text-white">
-        <div class="group relative flex gap-4">
+  <header class="border-b border-neutral-200 bg-primary-500 p-3 text-white sm:p-5">
+    <div class="flex h-full items-center justify-between">
+      <button
+        class="rounded-md p-2 text-white hover:bg-primary-600 transition-colors lg:hidden"
+        @click="ui.openMobileSidebar()"
+      >
+        <Icon name="mdi:menu" size="24" />
+      </button>
+      <div class="ml-auto flex gap-4 text-xl text-white sm:gap-12">
+        <div class="group relative flex gap-2 sm:gap-4">
           <Icon name="mdi:account-circle-outline" class="self-center cursor-pointer" size="36" />
-          <p class="self-center cursor-pointer">{{ user?.username }}</p>
+          <p class="hidden self-center cursor-pointer sm:block">{{ user?.username }}</p>
           <div class="invisible absolute right-0 top-full z-50 mt-2 w-44 rounded-md border border-neutral-200 bg-white py-1 text-sm text-neutral-800 opacity-0 shadow-lg transition-all group-hover:visible group-hover:opacity-100">
             <button
               type="button"
@@ -34,6 +40,7 @@ defineProps<{
 }>()
 
 const auth = useAuthStore()
+const ui = useUiStore()
 
 const handleLogout = async () => {
   await auth.logout()

frontend/components/ui/DataTable.vue

@@ -37,7 +37,7 @@
                             <slot name="actions" :item="item" />
                             <button
                                 v-if="deletable"
-                                class="text-[red-500] hover:text-[red-700]"
+                                class="text-neutral-400 transition-colors hover:text-red-500"
                                 @click.stop="$emit('delete', item)"
                             >
                                 <Icon name="mdi:delete-outline" size="20" />

frontend/components/ui/SidebarTimer.vue

@@ -1,15 +1,18 @@
 <template>
     <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-[#F18619] hover:bg-[#d97314]'
-            : 'bg-primary-500 hover:bg-primary-600'"
+        class="flex w-full items-center justify-center gap-2 rounded-md py-2 text-sm font-semibold text-white transition"
+        :class="[
+            timerStore.isRunning
+                ? 'bg-[#F18619] hover:bg-[#d97314]'
+                : 'bg-primary-500 hover:bg-primary-600',
+            collapsed ? 'px-2' : 'px-4'
+        ]"
         :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"
+            :size="collapsed ? '20' : '16'"
         />
         <span v-if="!collapsed" class="font-mono tracking-wide">
             {{ timerStore.elapsedFormatted }}