oier/collective-lists
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(fase-5): plan mobile UX rewrite ("Monolith Editorial")

Browse Source 
- Add plan/fase-5-mobile-ux.md with 7-chunk breakdown:
    5.0 mobile tests (Playwright mobile-shell/masthead/swipe-delete + Vitest helpers)
    5.1 responsive shell (MobileTopBar + BottomTabBar + MobileDrawer)
    5.2 ScreenMasthead + px-4/md:px-6 pass
    5.3 /lists mobile cards
    5.4 /lists/[id] rows + red-zone swipe-delete
    5.5 undoQueue store + UndoToast
    5.6 scrollable frequency chips
    5.7 tasks/notes/search shell + masthead
    5.Z verify 211 + new M-series green
- Explicit gap analysis vs. current app + deliberate exclusions
    (no priority badges, no voice search, no fake meta like "Dairy · Weekly")
- Index design/ directory: Stitch mockups per screen (mobile + desktop variants),
  plus the "Monolith Editorial" DESIGN.md directing tonal shifts, masthead
  typography, glassmorphism, and the no-line rule
- Relocate DESIGN.md under design/slate_collective/DESIGN.md (old entry point) —
  the current design direction lives at design/DESIGN.md
- Reference design/ from CLAUDE.md + add Fase 5 to README phase index

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Oier Bravo
2026-04-13 13:36:52 +02:00
parent 2806e06db2
commit ee962991e1
42 changed files with 5018 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

201
design/shopping_session_2/code.html Normal file
View File

@@ -0,0 +1,201 @@
<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Colectivo - Shopping Session</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"secondary": "#505f76",
"surface-container-lowest": "#ffffff",
"primary-fixed": "#565e74",
"primary": "#000000",
"secondary-fixed": "#b7c8e1",
"on-primary-fixed-variant": "#dae2fd",
"primary-fixed-dim": "#3f465c",
"on-surface": "#191c1e",
"tertiary-fixed": "#b91a24",
"surface-bright": "#f7f9fb",
"on-primary": "#dae2fd",
"on-tertiary-fixed": "#ffffff",
"inverse-surface": "#2d3133",
"on-tertiary-fixed-variant": "#ffdad7",
"inverse-primary": "#bec6e0",
"on-error": "#ffffff",
"primary-container": "#333b50",
"on-error-container": "#410002",
"background": "#f7f9fb",
"error": "#ba1a1a",
"surface-container-highest": "#e0e3e5",
"surface-container": "#eceef0",
"surface-dim": "#d8dadc",
"surface-container-low": "#f2f4f6",
"on-secondary-container": "#0b1c30",
"secondary-container": "#c5d6f0",
"outline": "#777777",
"surface": "#f7f9fb",
"on-tertiary": "#ffdad7",
"outline-variant": "#c6c6c6",
"on-surface-variant": "#474747",
"error-container": "#ffdad6",
"on-primary-fixed": "#ffffff",
"secondary-fixed-dim": "#9cacc5",
"on-primary-container": "#ffffff",
"inverse-on-surface": "#eff1f3",
"tertiary-container": "#da3437",
"on-tertiary-container": "#ffffff",
"surface-variant": "#e0e3e5",
"on-secondary-fixed": "#0b1c30",
"on-secondary-fixed-variant": "#2d3c51",
"on-secondary": "#ffffff",
"tertiary": "#7d000f",
"tertiary-fixed-dim": "#930013",
"surface-tint": "#565e74",
"surface-container-high": "#e6e8ea",
"on-background": "#191c1e"
},
"borderRadius": {
"DEFAULT": "0.125rem",
"lg": "0.25rem",
"xl": "0.5rem",
"full": "0.75rem"
},
"fontFamily": {
"headline": ["Inter"],
"body": ["Inter"],
"label": ["Inter"]
}
},
},
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
body { font-family: 'Inter', sans-serif; }
</style>
</head>
<body class="bg-surface text-on-surface selection:bg-slate-200">
<!-- Shopping Session Header -->
<header class="sticky top-0 z-40 bg-surface/80 backdrop-blur-xl flex justify-between items-center h-16 px-6">
<div class="flex items-center gap-4">
<button class="flex items-center justify-center w-10 h-10 -ml-2 text-slate-900 active:scale-90 transition-transform">
<span class="material-symbols-outlined text-2xl">close</span>
</button>
<h1 class="text-xl font-semibold tracking-tight text-slate-900">Compra semanal</h1>
</div>
<!-- Presence Avatars -->
<div class="flex -space-x-2">
<div class="w-8 h-8 rounded-full border-2 border-surface overflow-hidden">
<img class="w-full h-full object-cover" data-alt="portrait of a young woman with a friendly expression in soft natural lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBuiajlGpJ58EHg6U1cJmoIbhDPPmTK52pA7ESu6mENnJ7kYam0DzV8i-XwjIATEBBX0Po2kCssCR9Hum120lFkeCeqTxUNtVtnbJ_i6K6z0dKwcwjpY78xxhdVtQ0d9A2pERSHrLUKTduSTRjfA2-62yvg3pUruGxhcMGTBTYnfovlBAh3h28C5EiNNsmmt9WvZvylSs3SYyUF--9IQnoM2o-b4P68SRfpW3GHMhla5T1mxUROu_JnOCAodesYM6AOfkhFVO7WjiAH"/>
</div>
<div class="w-8 h-8 rounded-full border-2 border-surface overflow-hidden">
<img class="w-full h-full object-cover" data-alt="portrait of a smiling man with clean minimalist aesthetic and soft shadows" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDN3-1EK1PYMbJnnqUv-q7VtJUNFUJ9DHSMEjxu6m3OI-480NZ-jabSYygkzIvoEEkEgr9ziN1viVBmJriK3x9Eyz4ECh6WxzKpFzYRTO_F2YPs42BGMz4ZdhqRv_BCN_CLCOw1_fSNAqQo0CYXPa8RzRmK7L4m_hBJ8HJBov9inRKzO669GpZ3Rgq6289vvhbyBp9JiZsWNfQQDNvBl_sLrwr-UQiO99u_cmjuYVT3gXbCsHXO2pSE5YYPwkX1xCqftXxdFY5DUPdE"/>
</div>
</div>
</header>
<main class="max-w-2xl mx-auto px-6 pb-32 pt-4">
<!-- Active Items Section -->
<section class="space-y-2">
<header class="mb-4">
<p class="text-[13px] font-semibold uppercase tracking-widest text-slate-500">To buy</p>
</header>
<!-- Item: Whole milk -->
<div class="group flex items-center bg-surface-container-lowest rounded-xl min-h-[56px] px-4 transition-colors active:bg-slate-100">
<div class="flex-shrink-0 mr-4">
<input class="w-6 h-6 rounded border-slate-300 text-slate-900 focus:ring-slate-900" type="checkbox"/>
</div>
<div class="flex-grow py-4">
<p class="text-slate-900 font-medium">Whole milk 1L</p>
<p class="text-xs text-slate-400">Dairy • Essential</p>
</div>
<div class="flex-shrink-0 text-slate-400">
<span class="material-symbols-outlined text-xl">drag_indicator</span>
</div>
</div>
<!-- Item: Bread -->
<div class="group flex items-center bg-surface-container-lowest rounded-xl min-h-[56px] px-4 transition-colors active:bg-slate-100">
<div class="flex-shrink-0 mr-4">
<input class="w-6 h-6 rounded border-slate-300 text-slate-900 focus:ring-slate-900" type="checkbox"/>
</div>
<div class="flex-grow py-4">
<p class="text-slate-900 font-medium">Bread</p>
<p class="text-xs text-slate-400">Bakery • Fresh</p>
</div>
<div class="flex-shrink-0 text-slate-400">
<span class="material-symbols-outlined text-xl">drag_indicator</span>
</div>
</div>
<!-- Item: Eggs 12 uds -->
<div class="group flex items-center bg-surface-container-lowest rounded-xl min-h-[56px] px-4 transition-colors active:bg-slate-100">
<div class="flex-shrink-0 mr-4">
<input class="w-6 h-6 rounded border-slate-300 text-slate-900 focus:ring-slate-900" type="checkbox"/>
</div>
<div class="flex-grow py-4">
<p class="text-slate-900 font-medium">Eggs 12 uds</p>
<p class="text-xs text-slate-400">Protein • Large</p>
</div>
<div class="flex-shrink-0 text-slate-400">
<span class="material-symbols-outlined text-xl">drag_indicator</span>
</div>
</div>
<!-- Item: Avocados -->
<div class="group flex items-center bg-surface-container-lowest rounded-xl min-h-[56px] px-4 transition-colors active:bg-slate-100">
<div class="flex-shrink-0 mr-4">
<input class="w-6 h-6 rounded border-slate-300 text-slate-900 focus:ring-slate-900" type="checkbox"/>
</div>
<div class="flex-grow py-4">
<p class="text-slate-900 font-medium">Avocados</p>
<p class="text-xs text-slate-400">Produce • Pack of 3</p>
</div>
<div class="flex-shrink-0 text-slate-400">
<span class="material-symbols-outlined text-xl">drag_indicator</span>
</div>
</div>
</section>
<!-- Divider & Checked Items -->
<section class="mt-12 space-y-2">
<header class="mb-4 flex items-center gap-4">
<p class="text-[13px] font-semibold uppercase tracking-widest text-slate-400">Checked</p>
<div class="h-[1px] flex-grow bg-slate-200"></div>
</header>
<!-- Checked Item: Butter 250g -->
<div class="flex items-center opacity-40 grayscale min-h-[56px] px-4">
<div class="flex-shrink-0 mr-4">
<input checked="" class="w-6 h-6 rounded border-slate-300 text-slate-400 focus:ring-slate-400" type="checkbox"/>
</div>
<div class="flex-grow py-4">
<p class="text-slate-900 font-normal line-through">Butter 250g</p>
</div>
</div>
<!-- Checked Item: Olive Oil -->
<div class="flex items-center opacity-40 grayscale min-h-[56px] px-4">
<div class="flex-shrink-0 mr-4">
<input checked="" class="w-6 h-6 rounded border-slate-300 text-slate-400 focus:ring-slate-400" type="checkbox"/>
</div>
<div class="flex-grow py-4">
<p class="text-slate-900 font-normal line-through">Olive Oil 1L</p>
</div>
</div>
</section>
<!-- Asymmetric Context Card -->
</main>
<!-- Bottom Action Bar -->
<div class="fixed bottom-0 left-0 w-full p-6 bg-surface/80 backdrop-blur-xl z-50">
<div class="max-w-2xl mx-auto">
<button class="w-full h-14 bg-slate-900 text-slate-50 rounded-xl font-semibold tracking-tight transition-all active:scale-95 flex items-center justify-center gap-2 shadow-xl shadow-slate-900/10">
<span>Finish shopping</span>
<span class="material-symbols-outlined text-lg">check_circle</span>
</button>
</div>
</div>
</body></html>