refactor : migrate UI to Malio layer-ui components (MalioButton, MalioDrawer, MalioSelectCheckbox)

- Replace all AppDrawer with MalioDrawer across 10 drawer components
- Replace native <button> with MalioButton/MalioButtonIcon in all pages and components
- Fix TimeTrackingExportDrawer: use MalioSelectCheckbox for multi-select filters
- Add Malio design system colors (m-btn-*, m-disabled, m-surface) to tailwind.config.ts
- Align toggle button heights with MalioButton (h-[40px])

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/components/ui/AppTopNav.vue

@@ -1,32 +1,34 @@
 <template>
   <header class="border-b border-neutral-200 bg-primary-500 px-3 py-2 text-white sm:px-5 sm:py-2 max-h-[60px]">
     <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"
+      <MalioButtonIcon
+        icon="mdi:menu"
+        aria-label="Menu"
+        variant="ghost"
+        icon-size="24"
+        button-class="lg:hidden text-white hover:bg-primary-600"
         @click="ui.openMobileSidebar()"
-      >
-        <Icon name="mdi:menu" size="24" />
-      </button>
+      />
       <div class="hidden items-center gap-2 lg:flex">
         <h1 class="text-lg font-bold tracking-tight">{{ appTitle }}</h1>
-        <button
-          type="button"
-          class="rounded-md p-1 text-white/60 transition-colors hover:bg-primary-600 hover:text-white"
-          :title="appTitle === 'NeauTime' ? 'Switch to Lesstime' : 'Switch to NeauTime'"
+        <MalioButtonIcon
+          icon="mdi:swap-horizontal"
+          :aria-label="appTitle === 'NeauTime' ? 'Switch to Lesstime' : 'Switch to NeauTime'"
+          variant="ghost"
+          icon-size="18"
+          button-class="text-white/60 hover:bg-primary-600 hover:text-white"
           @click="toggleTitle"
-        >
-          <Icon name="mdi:swap-horizontal" size="18" />
-        </button>
+        />
       </div>
       <div class="ml-auto flex items-center gap-4 text-xl text-white sm:gap-8">
-        <button
-          type="button"
-          class="rounded-md p-1.5 text-white/70 transition-colors hover:bg-primary-600 hover:text-white"
-          :title="ui.darkMode ? 'Mode clair' : 'Mode sombre'"
+        <MalioButtonIcon
+          :icon="ui.darkMode ? 'mdi:weather-sunny' : 'mdi:weather-night'"
+          :aria-label="ui.darkMode ? 'Mode clair' : 'Mode sombre'"
+          variant="ghost"
+          icon-size="22"
+          button-class="text-white/70 hover:bg-primary-600 hover:text-white"
           @click="ui.toggleDarkMode()"
-        >
-          <Icon :name="ui.darkMode ? 'mdi:weather-sunny' : 'mdi:weather-night'" size="22" />
-        </button>
+        />
         <NotificationBell />
         <div class="group relative flex gap-2 sm:gap-4">
           <UserAvatar v-if="user" :user="user" size="md" class="cursor-pointer" />