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

238
design/lists_mobile/code.html Normal file
View File

@@ -0,0 +1,238 @@
<!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 | Lists</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;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": {
"surface-bright": "#f7f9fb",
"on-tertiary-container": "#ffffff",
"tertiary-fixed-dim": "#930013",
"tertiary-fixed": "#b91a24",
"surface-container": "#eceef0",
"on-tertiary-fixed": "#ffffff",
"inverse-primary": "#bec6e0",
"surface": "#f7f9fb",
"primary-container": "#333b50",
"surface-variant": "#e0e3e5",
"on-tertiary": "#ffdad7",
"surface-dim": "#d8dadc",
"on-secondary-container": "#0b1c30",
"inverse-surface": "#2d3133",
"secondary-fixed": "#b7c8e1",
"background": "#f7f9fb",
"on-primary-fixed": "#ffffff",
"outline-variant": "#c6c6c6",
"primary": "#000000",
"on-secondary-fixed-variant": "#2d3c51",
"on-error": "#ffffff",
"primary-fixed-dim": "#3f465c",
"on-primary-fixed-variant": "#dae2fd",
"surface-container-high": "#e6e8ea",
"secondary": "#505f76",
"on-surface": "#191c1e",
"secondary-container": "#c5d6f0",
"inverse-on-surface": "#eff1f3",
"error-container": "#ffdad6",
"on-secondary": "#ffffff",
"surface-tint": "#565e74",
"on-tertiary-fixed-variant": "#ffdad7",
"on-surface-variant": "#474747",
"on-secondary-fixed": "#0b1c30",
"on-primary": "#dae2fd",
"surface-container-low": "#f2f4f6",
"tertiary": "#7d000f",
"outline": "#777777",
"error": "#ba1a1a",
"on-background": "#191c1e",
"tertiary-container": "#da3437",
"on-primary-container": "#ffffff",
"on-error-container": "#410002",
"surface-container-lowest": "#ffffff",
"surface-container-highest": "#e0e3e5",
"primary-fixed": "#565e74",
"secondary-fixed-dim": "#9cacc5"
},
"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' 300, 'GRAD' 0, 'opsz' 24;
font-size: 20px;
}
.ease-monolith {
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="bg-surface text-on-surface font-body selection:bg-primary selection:text-white">
<!-- TopAppBar from JSON -->
<header class="w-full sticky top-0 bg-[#f7f9fb] dark:bg-[#020617] flex items-center justify-between px-6 py-4 z-50">
<div class="flex items-center gap-4">
<button class="text-slate-900 dark:text-slate-50 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-colors p-2 rounded-md active:scale-95 duration-200 ease-in-out">
<span class="material-symbols-outlined" data-icon="menu">menu</span>
</button>
<span class="text-xl font-bold tracking-tighter text-slate-900 dark:text-slate-50">MONOLITH</span>
</div>
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full overflow-hidden bg-slate-200">
<img alt="Profile" class="w-full h-full object-cover" data-alt="Close up portrait of a professional woman with editorial lighting, clean neutral background, minimalist aesthetic" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCbCrRW3Era9N3FIsMxqvO-YmJf5OvZX76hnkYfnVBps143KNktQm8PF-v6i83DRNZ8eVjs2eo8Kb_2HlF41FVpvfhnG6p6cRqjecSPhc46bT1xO6M5RDC1QSYLODiOPjR4bNqM0y4D6CFSywRVruOfBv4ctbawEZZeDKmuS2XaDO08dlJT0QOjrWpjVSh-8iLllRKszXUiB0EjigZxfdmvW-MaMkaHK7U3THA5ONCL4qriUEhIODWqJJxRWGzF25ei0DRNW4GUWYG1"/>
</div>
</div>
</header>
<main class="max-w-2xl mx-auto px-6 pt-12 pb-32">
<!-- Masthead Section -->
<div class="mb-12">
<p class="font-['Inter'] font-semibold tracking-[0.05em] uppercase text-[13px] text-slate-500 mb-2">Workspace</p>
<h1 class="text-[3.5rem] font-semibold leading-[1.1] tracking-[-0.02em] text-slate-900">Shared Lists</h1>
</div>
<!-- Bento Grid / Cards Layout -->
<div class="grid grid-cols-1 gap-4">
<!-- Home Card -->
<div class="group bg-surface-container-lowest rounded-md p-6 flex flex-col justify-between min-h-[160px] cursor-pointer transition-all duration-300 hover:bg-slate-100/50">
<div class="flex justify-between items-start">
<div class="p-3 bg-slate-100 rounded-md">
<span class="material-symbols-outlined text-slate-900" data-icon="home">home</span>
</div>
<div class="flex -space-x-2">
<div class="w-6 h-6 rounded-full border-2 border-white overflow-hidden bg-slate-300">
<img class="w-full h-full object-cover" data-alt="portrait headshot of a person" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA_EezR-DC5OmqTBaaaXasbuY5ASmxMKhWPaz2SBll4-r4P4gHCOKEYz3CMarnvcmAZZdD8PAog6lXp08EYbV4P41PMXwecadsa1CPuO2tpd8xtx6aD49odApJtBvm2lqTqGUDfFT0E2v_11Kappmghm5lSoa0Ye-BU0DqcWqV7s3EIpPsQ30bQULj0nPt1DcW3g8UCP1BZgBCxivnrScI2zzBmSlLHAuaKsEio3sqwg4bYTlcjpPZySTeV4aT8foTP5PsF5dwE_pLF"/>
</div>
<div class="w-6 h-6 rounded-full border-2 border-white overflow-hidden bg-slate-300">
<img class="w-full h-full object-cover" data-alt="portrait headshot of a person" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC3QwvwOrhEM3uAE8xEwdRpG54LxH3w663RAKBkZ8U9zH0E3XymKJVjbSYhvCHjSeQowhF5Q4U3zTBZPffoEouRQySldQtEnIgEq6R-2nMhvQRraigk4C8hse5DIwSmTQgB0V672qdZURlIShkEs8w6fHVTEWeQ00T_H-6PyGTxS_5Pv29NzlLqetjJqXxWGygAsadu1d1h9cQzYvC9sFNa12IGzDE4Y7jjvcB_Ow4qwawxMayjesqGi15kvs8v19emz_15hozmWjRN"/>
</div>
</div>
</div>
<div>
<h2 class="text-2xl font-semibold text-slate-900">Home</h2>
<p class="text-slate-500 text-[13px]">12 items · Shared with Family</p>
</div>
</div>
<!-- Office Card -->
<div class="group bg-surface-container-lowest rounded-md p-6 flex flex-col justify-between min-h-[160px] cursor-pointer transition-all duration-300 hover:bg-slate-100/50">
<div class="flex justify-between items-start">
<div class="p-3 bg-slate-100 rounded-md">
<span class="material-symbols-outlined text-slate-900" data-icon="work">work</span>
</div>
<div class="flex -space-x-2">
<div class="w-6 h-6 rounded-full border-2 border-white overflow-hidden bg-slate-300">
<img class="w-full h-full object-cover" data-alt="portrait headshot of a person" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAyruwqsZvHd_IqbsoIl2YnXBkjbiLVsBem1QH_lwJqH0CnraxujSnFd1FPpqbK8VnZu4sSVAnpeWjdNO32GVJIFMYM1O93TnOnUjDyqmu_1kMzUvyxG1-tmka0dGmvur6cYrQo8TP0sbO4MK2j953ow7eZYCWg6kI9Cix0YPREORmWCgIxbLOmArvR3MD9zb_ae1Tx9TpvXpalzZLSIFGolVkH_W1sDzVMlzyrQaFgwnoknNsk1Ot5qh4xTqhZdjbw7PZFpAaNKBaK"/>
</div>
</div>
</div>
<div>
<h2 class="text-2xl font-semibold text-slate-900">Office</h2>
<p class="text-slate-500 text-[13px]">28 items · Shared with Editorial Team</p>
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<!-- Party Card -->
<div class="group bg-surface-container-lowest rounded-md p-6 flex flex-col justify-between min-h-[180px] cursor-pointer transition-all duration-300 hover:bg-slate-100/50">
<div class="p-3 bg-slate-100 rounded-md self-start">
<span class="material-symbols-outlined text-slate-900" data-icon="celebration">celebration</span>
</div>
<div>
<h2 class="text-xl font-semibold text-slate-900">Party</h2>
<p class="text-slate-500 text-[13px]">8 items</p>
</div>
</div>
<!-- Travel Card -->
<div class="group bg-surface-container-lowest rounded-md p-6 flex flex-col justify-between min-h-[180px] cursor-pointer transition-all duration-300 hover:bg-slate-100/50">
<div class="p-3 bg-slate-100 rounded-md self-start">
<span class="material-symbols-outlined text-slate-900" data-icon="flight">flight</span>
</div>
<div>
<h2 class="text-xl font-semibold text-slate-900">Travel</h2>
<p class="text-slate-500 text-[13px]">42 items</p>
</div>
</div>
</div>
</div>
</main>
<!-- Sticky Bottom Input -->
<div class="fixed bottom-0 left-0 right-0 p-6 z-40">
<div class="max-w-2xl mx-auto">
<div class="relative backdrop-blur-xl bg-white/80 dark:bg-slate-900/80 rounded-md shadow-[0px_20px_40px_rgba(15,23,42,0.06)] flex items-center p-2">
<div class="flex-shrink-0 pl-4 pr-2">
<span class="material-symbols-outlined text-slate-400" data-icon="add">add</span>
</div>
<input class="w-full bg-transparent border-none focus:ring-0 text-slate-900 placeholder:text-slate-400 font-body py-3" placeholder="Create a new shared list..." type="text"/>
<button class="bg-slate-900 text-slate-50 px-5 py-2.5 rounded-md font-semibold text-sm transition-transform active:scale-95 duration-200">
Create
</button>
</div>
</div>
</div>
<!-- Hidden Drawer Placeholder (accessible via Menu) -->
<!-- Applying "NavigationDrawer" styles from JSON to a hidden state overlay -->
<div class="fixed inset-0 bg-slate-900/20 backdrop-blur-sm z-[55] pointer-events-none opacity-0 transition-opacity"></div>
<aside class="fixed inset-y-0 left-0 z-[60] flex flex-col py-8 bg-[#f7f9fb] dark:bg-[#020617] h-full w-80 rounded-r-none shadow-[0px_20px_40px_rgba(15,23,42,0.06)] -translate-x-full transition-transform duration-300 ease-monolith">
<!-- Header Profile -->
<div class="px-8 mb-10 flex flex-col items-start">
<div class="w-12 h-12 rounded-full overflow-hidden mb-4 bg-slate-200">
<img class="w-full h-full object-cover" data-alt="Editorial Lead profile photo" src="https://lh3.googleusercontent.com/aida-public/AB6AXuChb1EYlD2CCvSH8KtRccYf9aelP511eXObO9vL8i_jKI-qCYryVtptc2Arf8nHzh3wnRAhCD2G-2YJiv35wl1yWeUl_vYwjVQSfoHOUI9uTpEspcDUXbmDEBFd8WYR2FD7mYHU4kf-MbakJCS70f2tgzDTNuFRyRWQ8tCqDIcEYGcBG6lxn3OtF6fpBxgLv9MmqIKVLAQIb2Zq0Deh9KowONqsANp03ihxbe4AgGxMR3DfYCJGcon-XkrxPcmtPVzohsi0KYmD9tq9"/>
</div>
<h3 class="font-bold text-slate-900 dark:text-slate-50 text-lg">Editorial Lead</h3>
<p class="text-slate-500 text-sm">monolith.editorial@app.com</p>
</div>
<!-- Navigation items from JSON -->
<nav class="flex flex-col flex-1 overflow-y-auto no-scrollbar">
<!-- Active item -->
<a class="bg-slate-900 dark:bg-slate-50 text-slate-50 dark:text-slate-900 rounded-md mx-4 my-1 px-4 py-3 flex items-center gap-4 transition-colors" href="#">
<span class="material-symbols-outlined" data-icon="format_list_bulleted">format_list_bulleted</span>
<span class="font-['Inter'] text-[16px] font-normal">Lists</span>
</a>
<a class="text-slate-600 dark:text-slate-400 mx-4 my-1 px-4 py-3 flex items-center gap-4 hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors rounded-md" href="#">
<span class="material-symbols-outlined" data-icon="check_circle">check_circle</span>
<span class="font-['Inter'] text-[16px] font-normal">Tasks</span>
</a>
<a class="text-slate-600 dark:text-slate-400 mx-4 my-1 px-4 py-3 flex items-center gap-4 hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors rounded-md" href="#">
<span class="material-symbols-outlined" data-icon="description">description</span>
<span class="font-['Inter'] text-[16px] font-normal">Notes</span>
</a>
<a class="text-slate-600 dark:text-slate-400 mx-4 my-1 px-4 py-3 flex items-center gap-4 hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors rounded-md" href="#">
<span class="material-symbols-outlined" data-icon="search">search</span>
<span class="font-['Inter'] text-[16px] font-normal">Search</span>
</a>
<div class="mt-auto border-t border-slate-100 pt-4">
<a class="text-slate-600 dark:text-slate-400 mx-4 my-1 px-4 py-3 flex items-center gap-4 hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors rounded-md" href="#">
<span class="material-symbols-outlined" data-icon="settings">settings</span>
<span class="font-['Inter'] text-[16px] font-normal">User Settings</span>
</a>
</div>
</nav>
</aside>
</body></html>