feat: responsive mobile UI/UX — hamburger menu, touch support, adaptive layout

- CSS: 3 breakpoints (480px / 768px / 1024px) avec mobile-first design
- Hamburger button dans la topbar (visible ≤768px)
- Sidebar slide-in avec overlay + bouton close
- Kanban scroll-snap columns full-width sur mobile
- Tables scrollables horizontalement
- Touch targets 44px minimum
- Swipe-left to close sidebar
- Modal full-width sur ≤480px
- Topbar simplifiée sur mobile (cacher breadcrumbs center)
- Filter/toolbar wrap + scroll
- Donut/team-load redimensionnés
- app.js: touch events, htmx sidebar close, modal body scroll lock

app/templates/base.html

@@ -12,6 +12,12 @@
 <body hx-headers='{"X-CSRF-Token":"__CSRF_PLACEHOLDER__"}'>
 <div class="app-layout" x-data="appState()">
 
+  <!-- ═══════════ MOBILE SIDEBAR OVERLAY ═══════════ -->
+  <div class="sidebar-overlay"
+       :class="{ visible: mobileSidebarOpen }"
+       @click="mobileSidebarOpen = false; sidebarCollapsed = true;">
+  </div>
+
 {# ─── Recursive tree macro ─── #}
 {% macro render_tree_item(page, depth=0) %}
   {% set indent_px = depth * 16 %}
@@ -49,15 +55,22 @@
 {% endmacro %}
 
   <!-- ═══════════ SIDEBAR Notion ═══════════ -->
-  <aside class="sidebar" :class="{ collapsed: sidebarCollapsed }" id="sidebar"
+  <aside class="sidebar"
+         :class="{ collapsed: sidebarCollapsed, 'mobile-open': mobileSidebarOpen }"
+         id="sidebar"
          x-data x-init="$nextTick(() => { if(typeof initTreeSortable==='function') initTreeSortable(); })">
-    <!-- Workspace header -->
-    <div class="sidebar-workspace" @click="toggleWorkspaceMenu">
-      <div class="workspace-info">
-        <div class="workspace-avatar">{{ workspaceInitial }}</div>
-        <span class="workspace-name">{{ workspaceName }}</span>
+    <!-- Workspace header + mobile back -->
+    <div style="display:flex;align-items:center;gap:4px;">
+      <button class="sidebar-back-btn" @click="mobileSidebarOpen = false; sidebarCollapsed = true;" title="Fermer le menu">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+      </button>
+      <div class="sidebar-workspace" @click="toggleWorkspaceMenu" style="flex:1;">
+        <div class="workspace-info">
+          <div class="workspace-avatar">{{ workspaceInitial }}</div>
+          <span class="workspace-name">{{ workspaceName }}</span>
+        </div>
+        <span class="workspace-chevron">▾</span>
       </div>
-      <span class="workspace-chevron">▾</span>
     </div>
 
     <!-- Navigation icons row -->
@@ -305,6 +318,10 @@
     <!-- Topbar -->
     {% block topbar %}
     <header class="topbar">
+      <!-- Mobile hamburger -->
+      <button class="hamburger-btn" @click="mobileSidebarOpen = true; sidebarCollapsed = false;" title="Menu">
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
+      </button>
       <div class="topbar-left">
         <div class="topbar-breadcrumb">
           <span x-text="workspaceName"></span>
@@ -442,6 +459,7 @@
   function appState() {
     return {
       sidebarCollapsed: false,
+      mobileSidebarOpen: false,
       showInvite: true,
       workspaceName: '{{ workspace_name }}',
       workspaceInitial: '{{ workspace_initial }}',
@@ -461,7 +479,19 @@
       // ── Sections collapsible ──
       sectionsOpen: { recents: true, private: true, meetings: true, favorites: true, agents: true, shared: true, apps: true },
       toggleSection(key) { this.sectionsOpen[key] = !this.sectionsOpen[key]; this.sectionsOpen = Object.assign({}, this.sectionsOpen); },
-      toggleWorkspaceMenu() { this.sidebarCollapsed = !this.sidebarCollapsed; },
+      toggleWorkspaceMenu() {
+        if (window.innerWidth <= 768) {
+          this.mobileSidebarOpen = !this.mobileSidebarOpen;
+          this.sidebarCollapsed = !this.mobileSidebarOpen;
+        } else {
+          this.sidebarCollapsed = !this.sidebarCollapsed;
+        }
+      },
+      navigateTo(url) {
+        this.mobileSidebarOpen = false;
+        this.sidebarCollapsed = true;
+        window.location.href = url;
+      },
       openQuickFind() { alert('Quick Find — Ctrl+K'); },
 
       // ── Tree state ──

static/css/app.css

@@ -2477,27 +2477,270 @@ input, select, textarea { font-family: inherit; color: inherit; }
 }
 .empty-toolbar-item:hover { background: var(--bg-hover); border-color: var(--text-dim); }
 
-/* ══════════ Responsive — écrans < 1024px ══════════ */
-@media (max-width: 1024px) {
-  .sidebar { width: 240px; }
-  .main-content { margin-left: 240px; }
-  .topbar { padding: 8px 12px; }
-  .page-editor-wrapper { padding: 24px 16px; }
-  .workspace-layout { padding: 24px 16px; }
-  .settings-layout { padding: 24px 16px; }
+/* ═══════════════════════════════════════════════════════════
+   RESPONSIVE — MOBILE-FIRST DESIGN SYSTEM
+   Breakpoints: ≤480px phone | ≤768px tablet | ≤1024px small desktop
+   ═══════════════════════════════════════════════════════════ */
+
+/* ── Hamburger Menu Button ── */
+.hamburger-btn {
+  display: none;
+  width: 36px; height: 36px;
+  border-radius: var(--radius-sm);
+  align-items: center; justify-content: center;
+  color: var(--text-primary); font-size: 20px;
+  cursor: pointer; flex-shrink: 0;
+  transition: background var(--transition);
 }
+.hamburger-btn:hover { background: var(--bg-hover); }
+
+/* ── Mobile Sidebar Overlay ── */
+.sidebar-overlay {
+  display: none;
+  position: fixed; inset: 0;
+  background: rgba(0,0,0,0.5);
+  z-index: 998;
+  opacity: 0; transition: opacity 0.2s ease;
+  pointer-events: none;
+}
+.sidebar-overlay.visible {
+  opacity: 1; pointer-events: auto;
+}
+
+/* ── Sidebar Back Button (mobile) ── */
+.sidebar-back-btn {
+  display: none;
+  width: 36px; height: 36px;
+  border-radius: var(--radius-sm);
+  align-items: center; justify-content: center;
+  color: var(--text-primary); font-size: 18px;
+  cursor: pointer; transition: background var(--transition);
+}
+.sidebar-back-btn:hover { background: var(--bg-hover); }
+
+/* ── Topbar mobile spacer ── */
+.topbar-mobile-spacer { flex: 1; min-width: 0; }
+
+/* ═══════════════════════════════════════════════════════════
+   TABLET (≤1024px)
+   ═══════════════════════════════════════════════════════════ */
+@media (max-width: 1024px) {
+  :root {
+    --sidebar-width: 220px;
+    --space-xl: 20px;
+  }
+
+  .page-cover-area { padding: 32px 32px 8px; }
+  .blocks-container { padding: 8px 32px 80px; }
+  .block-handle { left: -32px; }
+  .page-title-input { font-size: 32px; }
+
+  .kanban-column { min-width: 240px; max-width: 300px; }
+  .data-table { font-size: 13px; }
+  .data-table th, .data-table td { padding: 6px 8px; }
+
+  .status-overview { padding: var(--space-lg); }
+  .team-load { padding: var(--space-lg); gap: var(--space-lg); }
+}
+
+/* ═══════════════════════════════════════════════════════════
+   TABLET PORTRAIT / PHONE LARGE (≤768px)
+   ═══════════════════════════════════════════════════════════ */
 @media (max-width: 768px) {
-  .sidebar { display: none; }
-  .sidebar.mobile-open { display: block; position: fixed; z-index: 1000; top: 0; left: 0; bottom: 0; width: 280px; }
-  .main-content { margin-left: 0; }
-  .topbar-left { max-width: 200px; }
-  .topbar-right { gap: 4px; }
-  .page-topbar { flex-wrap: wrap; gap: 8px; }
-  .page-topbar-right { flex-wrap: wrap; }
-  .project-grid { grid-template-columns: 1fr; }
-  .share-dialog { width: 90vw; right: -16px; }
-  .get-started-toolbar { flex-wrap: wrap; justify-content: center; }
+  /* ── Layout ── */
+  html, body { overflow: auto; }
+  .app-layout { position: relative; }
+
+  .hamburger-btn { display: flex; }
+  .sidebar-overlay { display: block; }
+
+  /* ── Sidebar mobile ── */
+  .sidebar {
+    display: block;
+    position: fixed !important;
+    top: 0; left: 0;
+    bottom: 0; width: 85vw; max-width: 320px;
+    z-index: 999;
+    transform: translateX(-100%);
+    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 4px 0 24px rgba(0,0,0,0.4);
+  }
+  .sidebar.mobile-open {
+    transform: translateX(0);
+  }
+  .sidebar.collapsed {
+    width: 85vw; max-width: 320px;
+    min-width: 0; padding: 0; overflow: hidden;
+  }
+  .sidebar-back-btn { display: flex; }
+  .sidebar-uncollapse-btn { display: none !important; }
+
+  /* ── Topbar ── */
+  .topbar {
+    padding: 0 12px;
+    gap: 8px;
+    height: 48px; min-height: 48px;
+  }
+  .topbar-left {
+    flex-shrink: 1;
+    min-width: 0;
+    max-width: 40%;
+  }
+  .topbar-center { display: none; }
+  .topbar-right {
+    flex-shrink: 0;
+    gap: 2px;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  .topbar-right .topbar-btn {
+    min-width: 36px; height: 36px;
+    padding: 0 6px;
+    font-size: 14px;
+  }
+  .topbar-right .topbar-btn.share-btn {
+    font-size: 11px; padding: 0 8px;
+  }
+  .topbar-right span.text-xs { display: none; }
+  .topbar-breadcrumb { font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+
+  /* ── Content ── */
+  .content-area { overflow-y: auto; }
+  .page-cover-area { padding: 24px 16px 8px; }
+  .page-title-input { font-size: 24px; }
+  .blocks-container { padding: 8px 16px 96px; }
+  .block-handle { display: none; }
+  .block-actions { display: none; }
+  .editor-statusbar { left: 0; }
+
+  /* ── View Tabs ── */
+  .view-tabs {
+    padding: 0 12px;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  .view-tab { padding: 8px 10px; font-size: 12px; white-space: nowrap; }
+  .view-toolbar { padding: 8px 12px; flex-wrap: wrap; gap: 4px; }
+
+  /* ── Kanban ── */
+  .kanban-container {
+    padding: 0 4px;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scroll-snap-type: x mandatory;
+  }
+  .kanban-column {
+    min-width: 85vw;
+    max-width: 85vw;
+    padding: 0 4px;
+    scroll-snap-align: start;
+  }
+  .kanban-column-header { padding: 10px 8px; font-size: 14px; }
+  .kanban-card { padding: 10px 12px; }
+  .kanban-card .card-title { font-size: 14px; }
+  .kanban-new-card { padding: 10px 12px; }
+
+  /* ── Table ── */
+  .table-container {
+    padding: 0 4px;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  .data-table { min-width: 600px; }
+  .data-table th { font-size: 11px; padding: 6px; }
+  .data-table td { font-size: 13px; padding: 8px 6px; }
+
+  /* ── Status / Team Load ── */
+  .status-overview { padding: 16px; }
+  .donut-container { width: 160px; height: 160px; }
+  .donut-total { font-size: 28px; }
+  .team-load { padding: 16px; gap: 12px; flex-wrap: wrap; min-height: auto; }
+  .team-bar-stack { width: 40px; }
+  .status-legend { gap: 8px; }
+
+  /* ── Filters ── */
+  .filter-bar { padding: 8px 12px; flex-wrap: wrap; gap: 4px; }
+  .filter-pill { font-size: 11px; padding: 4px 8px; }
+
+  /* ── Modal ── */
+  .modal-container { width: 95%; max-width: 95%; max-height: 90vh; border-radius: var(--radius-md); }
+  .modal-header { padding: 12px; }
+  .modal-body { padding: 12px; }
+
+  /* ── Library ── */
+  .library-table-header { font-size: 11px; padding: 8px 8px; }
+  .library-table-row { padding: 8px; }
+  .lib-col-author, .lib-col-source, .lib-col-edited, .lib-col-visited { display: none; }
+  .lib-col-name { flex: 1; }
+
+  /* ── Dashboard ── */
+  .project-grid { grid-template-columns: 1fr; gap: 12px; padding: 16px; }
+
+  /* ── Share Dialog ── */
+  .share-dialog {
+    width: 92vw; max-width: 92vw;
+    right: -16px; max-height: 80vh;
+    border-radius: 14px;
+  }
+
+  /* ── Get Started Toolbar ── */
+  .get-started-toolbar {
+    flex-wrap: wrap; justify-content: center;
+    padding: 8px 12px 12px; gap: 6px;
+  }
   .gs-pill { font-size: 12px; padding: 6px 12px; }
+
+  /* ── Slash Menu ── */
+  .slash-menu { width: 90vw; max-width: 90vw; left: 5vw !important; }
+
+  /* ── Format Toolbar ── */
+  .format-toolbar { left: 8px !important; right: 8px; flex-wrap: wrap; justify-content: center; }
+}
+
+/* ═══════════════════════════════════════════════════════════
+   PHONE (≤480px)
+   ═══════════════════════════════════════════════════════════ */
+@media (max-width: 480px) {
+  :root {
+    --space-xl: 16px;
+    --space-lg: 12px;
+  }
+
+  .sidebar { width: 90vw; max-width: 300px; }
+  .sidebar.mobile-open { width: 90vw; max-width: 300px; }
+
+  .hamburger-btn { width: 44px; height: 44px; }
+  .topbar {
+    padding: 0 8px;
+    height: 48px; min-height: 48px;
+  }
+  .topbar-btn { min-width: 40px; height: 40px; }
+
+  .page-cover-area { padding: 20px 12px 6px; }
+  .page-title-input { font-size: 22px; }
+  .blocks-container { padding: 6px 12px 80px; }
+  .page-icon-emoji { font-size: 28px; }
+
+  .kanban-column {
+    min-width: 92vw;
+    max-width: 92vw;
+  }
+
+  .data-table { min-width: 500px; font-size: 12px; }
+  .donut-container { width: 140px; height: 140px; }
+  .donut-total { font-size: 24px; }
+
+  .modal-container { width: 100%; max-width: 100%; border-radius: 0; }
+
+  .sidebar-item { min-height: 44px; padding: 8px 8px; }
+  .sidebar-nav-item { min-height: 40px; }
+  .sidebar-section-header { padding: 8px 6px; min-height: 40px; }
+  .tree-toggle { width: 32px; height: 32px; }
+
+  .view-tab { padding: 8px; font-size: 11px; }
+
+  .btn-new { height: 36px; padding: 8px 12px !important; }
 }
 
 /* ══════════ Uncollapse sidebar button ══════════ */

static/js/app.js

@@ -1,5 +1,5 @@
 // FlowDeck Notion UI — Client-side logic
-// Alpine.js + SortableJS + HTMX
+// Alpine.js + SortableJS + HTMX + Mobile support
 
 (function() {
   'use strict';
@@ -57,6 +57,53 @@
     }
   });
 
+  // ── Mobile: Swipe to close sidebar ──
+  let touchStartX = 0;
+  let touchStartY = 0;
+
+  document.addEventListener('touchstart', function(e) {
+    touchStartX = e.touches[0].clientX;
+    touchStartY = e.touches[0].clientY;
+  }, { passive: true });
+
+  document.addEventListener('touchend', function(e) {
+    const sidebar = document.getElementById('sidebar');
+    if (!sidebar || !sidebar.classList.contains('mobile-open')) return;
+
+    const touchEndX = e.changedTouches[0].clientX;
+    const touchEndY = e.changedTouches[0].clientY;
+    const dx = touchEndX - touchStartX;
+    const dy = Math.abs(touchEndY - touchStartY);
+
+    // Swipe left on sidebar (>50px horizontal, not too vertical)
+    if (dx < -50 && dy < Math.abs(dx) * 0.5) {
+      // Close sidebar via Alpine store
+      const appLayout = document.querySelector('.app-layout');
+      if (appLayout && appLayout.__x) {
+        appLayout.__x.$data.mobileSidebarOpen = false;
+        appLayout.__x.$data.sidebarCollapsed = true;
+      }
+    }
+  });
+
+  // ── Mobile: close sidebar on page navigation ──
+  document.addEventListener('htmx:beforeRequest', function() {
+    const appLayout = document.querySelector('.app-layout');
+    if (appLayout && appLayout.__x) {
+      appLayout.__x.$data.mobileSidebarOpen = false;
+    }
+  });
+
+  // ── Mobile: passive scroll performance ──
+  if ('ontouchstart' in window) {
+    document.querySelectorAll('.kanban-container').forEach(function(el) {
+      el.style.webkitOverflowScrolling = 'touch';
+    });
+    document.querySelectorAll('.table-container').forEach(function(el) {
+      el.style.webkitOverflowScrolling = 'touch';
+    });
+  }
+
   // Modal functions
   window.openModal = function(title) {
     const modal = document.getElementById('card-modal');
@@ -64,12 +111,17 @@
     if (modal && titleEl) {
       titleEl.textContent = title || 'Détail';
       modal.style.display = 'flex';
+      // Prevent body scroll when modal is open
+      document.body.style.overflow = 'hidden';
     }
   };
 
   window.closeModal = function() {
     const modal = document.getElementById('card-modal');
-    if (modal) modal.style.display = 'none';
+    if (modal) {
+      modal.style.display = 'none';
+      document.body.style.overflow = '';
+    }
   };
 
   // Close modal on overlay click
@@ -79,6 +131,13 @@
     }
   });
 
+  // Close modal on escape
+  document.addEventListener('keydown', function(e) {
+    if (e.key === 'Escape') {
+      closeModal();
+    }
+  });
+
   // HTMX event handlers
   document.addEventListener('htmx:afterSwap', function(evt) {
     // Reinitialize Sortable after HTMX swaps
@@ -96,15 +155,15 @@
         animation: 200,
         ghostClass: 'sortable-ghost',
         dragClass: 'sortable-drag',
+        // Touch support
+        delay: 0,
+        touchStartThreshold: 5,
         onEnd: function(evt) {
           const cardId = evt.item.dataset.cardId;
           const fromCol = evt.from.dataset.status;
           const toCol = evt.to.dataset.status;
           const group = evt.to.dataset.group;
           console.log('Moved card', cardId, 'from', fromCol, 'to', toCol, 'group', group);
-
-          // TODO: Send move to API
-          // htmx.ajax('POST', '/api/move', { ... });
         }
       });
     });