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

220
design/user_settings/code.html Normal file
View File

@@ -0,0 +1,220 @@
<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&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 src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"tertiary-container": "#da3437",
"on-secondary": "#ffffff",
"on-tertiary-container": "#ffffff",
"tertiary-fixed-dim": "#930013",
"on-secondary-fixed": "#0b1c30",
"on-primary-fixed": "#ffffff",
"inverse-on-surface": "#eff1f3",
"tertiary-fixed": "#b91a24",
"surface-container-lowest": "#ffffff",
"surface-container-highest": "#e0e3e5",
"surface-container-low": "#f2f4f6",
"outline": "#777777",
"secondary": "#505f76",
"on-background": "#191c1e",
"surface-tint": "#565e74",
"secondary-fixed": "#b7c8e1",
"surface-container-high": "#e6e8ea",
"primary-fixed-dim": "#3f465c",
"on-secondary-container": "#0b1c30",
"error-container": "#ffdad6",
"tertiary": "#7d000f",
"primary": "#000000",
"secondary-fixed-dim": "#9cacc5",
"on-primary": "#dae2fd",
"background": "#f7f9fb",
"outline-variant": "#c6c6c6",
"surface-bright": "#f7f9fb",
"on-error": "#ffffff",
"surface-dim": "#d8dadc",
"surface-container": "#eceef0",
"primary-fixed": "#565e74",
"on-surface": "#191c1e",
"on-tertiary-fixed-variant": "#ffdad7",
"on-tertiary": "#ffdad7",
"inverse-primary": "#bec6e0",
"error": "#ba1a1a",
"on-secondary-fixed-variant": "#2d3c51",
"on-error-container": "#410002",
"on-surface-variant": "#474747",
"inverse-surface": "#2d3133",
"on-tertiary-fixed": "#ffffff",
"surface": "#f7f9fb",
"primary-container": "#333b50",
"secondary-container": "#c5d6f0",
"surface-variant": "#e0e3e5",
"on-primary-fixed-variant": "#dae2fd",
"on-primary-container": "#ffffff"
},
"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-background text-on-surface">
<!-- SideNavBar (Monolith Sidebar) -->
<aside class="h-screen w-64 fixed left-0 top-0 bg-slate-50 dark:bg-slate-900 flex flex-col py-8 gap-8">
<div class="px-8">
<h1 class="text-xl font-semibold tracking-tight text-slate-900 dark:text-white">Colectivo</h1>
<p class="font-inter uppercase tracking-wider text-[11px] font-semibold text-slate-400 mt-1">Household Workspace</p>
</div>
<nav class="flex-1 space-y-2">
<a class="flex items-center gap-3 py-2 text-slate-500 dark:text-slate-400 pl-4 font-inter uppercase tracking-wider text-[13px] font-semibold hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-colors" href="#">
<span class="material-symbols-outlined" data-icon="format_list_bulleted">format_list_bulleted</span>
<span>Lists</span>
</a>
<a class="flex items-center gap-3 py-2 text-slate-500 dark:text-slate-400 pl-4 font-inter uppercase tracking-wider text-[13px] font-semibold hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-colors" href="#">
<span class="material-symbols-outlined" data-icon="check_circle">check_circle</span>
<span>Tasks</span>
</a>
<a class="flex items-center gap-3 py-2 text-slate-500 dark:text-slate-400 pl-4 font-inter uppercase tracking-wider text-[13px] font-semibold hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-colors" href="#">
<span class="material-symbols-outlined" data-icon="description">description</span>
<span>Notes</span>
</a>
<a class="flex items-center gap-3 py-2 text-slate-500 dark:text-slate-400 pl-4 font-inter uppercase tracking-wider text-[13px] font-semibold hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-colors" href="#">
<span class="material-symbols-outlined" data-icon="search">search</span>
<span>Search</span>
</a>
</nav>
<div class="mt-auto space-y-2">
<!-- Active Navigation Logic: Settings is currently active -->
<a class="flex items-center gap-3 py-2 text-slate-900 dark:text-white border-l-2 border-slate-900 dark:border-white pl-4 font-inter uppercase tracking-wider text-[13px] font-semibold" href="#">
<span class="material-symbols-outlined" data-icon="settings">settings</span>
<span>Settings</span>
</a>
<a class="flex items-center gap-3 py-2 text-slate-500 dark:text-slate-400 pl-4 font-inter uppercase tracking-wider text-[13px] font-semibold hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-colors" href="#">
<span class="material-symbols-outlined" data-icon="help_outline">help_outline</span>
<span>Help</span>
</a>
<div class="px-8 mt-6">
<button class="w-full bg-slate-900 dark:bg-white text-slate-50 dark:text-slate-900 text-[13px] font-semibold uppercase tracking-widest py-3 rounded-md transition-all active:scale-95">
Add Member
</button>
</div>
</div>
</aside>
<!-- TopAppBar -->
<header class="w-full h-16 sticky top-0 z-40 flex items-center justify-between px-8 ml-64 bg-slate-50 dark:bg-slate-900">
<h2 class="text-lg font-bold tracking-tighter text-slate-900 dark:text-white uppercase">Settings</h2>
<div class="flex items-center gap-6">
<span class="material-symbols-outlined text-slate-500 hover:text-slate-900 cursor-pointer transition-opacity" data-icon="notifications">notifications</span>
<span class="material-symbols-outlined text-slate-500 hover:text-slate-900 cursor-pointer transition-opacity" data-icon="grid_view">grid_view</span>
<div class="h-8 w-8 rounded-full bg-slate-700 flex items-center justify-center text-[11px] font-bold text-white uppercase overflow-hidden">
AG
</div>
</div>
</header>
<!-- Main Content Canvas -->
<main class="ml-64 p-12 lg:p-24 max-w-5xl mx-auto">
<div class="space-y-24">
<!-- Profile Section -->
<section class="flex flex-col items-center justify-center space-y-4">
<div class="w-24 h-24 rounded-full bg-slate-700 flex items-center justify-center text-2xl font-semibold text-white shadow-sm ring-4 ring-white">
AG
</div>
<button class="text-[13px] font-semibold uppercase tracking-widest text-slate-500 hover:text-slate-900 transition-colors">
Change avatar
</button>
</section>
<!-- Grid Layout for Settings Groups -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-20 gap-y-16">
<!-- Display Name & Emoji Picker Group -->
<div class="space-y-12">
<!-- Display Name -->
<div class="space-y-4">
<label class="block text-[13px] font-semibold uppercase tracking-widest text-slate-500">Display Name</label>
<input class="w-full bg-surface-container-low border-0 rounded-md py-4 px-4 text-slate-900 font-medium focus:ring-2 focus:ring-slate-900/5 transition-all" type="text" value="Ana García"/>
</div>
<!-- Emoji Picker -->
<div class="space-y-4">
<label class="block text-[13px] font-semibold uppercase tracking-widest text-slate-500">Status Icon</label>
<div class="grid grid-cols-6 gap-3 p-4 bg-surface-container-low rounded-md">
<button class="text-xl hover:scale-125 transition-transform p-1">🐸</button>
<button class="text-xl hover:scale-125 transition-transform p-1">🐼</button>
<button class="text-xl hover:scale-125 transition-transform p-1">🦊</button>
<button class="text-xl hover:scale-125 transition-transform p-1">🐨</button>
<button class="text-xl hover:scale-125 transition-transform p-1">🦁</button>
<button class="text-xl hover:scale-125 transition-transform p-1">🌵</button>
<button class="text-xl hover:scale-125 transition-transform p-1">🌻</button>
<button class="text-xl hover:scale-125 transition-transform p-1">⭐</button>
<button class="text-xl hover:scale-125 transition-transform p-1">🔥</button>
<button class="text-xl hover:scale-125 transition-transform p-1">🎨</button>
<button class="text-xl hover:scale-125 transition-transform p-1">📚</button>
<button class="text-xl hover:scale-125 transition-transform p-1">🍕</button>
<button class="text-xl hover:scale-125 transition-transform p-1">🍜</button>
<button class="text-xl hover:scale-125 transition-transform p-1">🍣</button>
<button class="text-xl hover:scale-125 transition-transform p-1">🏠</button>
<button class="text-xl hover:scale-125 transition-transform p-1">🚲</button>
<button class="text-xl hover:scale-125 transition-transform p-1">⚽</button>
<button class="text-xl hover:scale-125 transition-transform p-1">🎮</button>
</div>
</div>
</div>
<!-- Language & Account Group -->
<div class="space-y-12">
<!-- Language Selection -->
<div class="space-y-4">
<label class="block text-[13px] font-semibold uppercase tracking-widest text-slate-500">Language</label>
<div class="flex gap-2">
<button class="px-6 py-2 rounded-full bg-slate-900 text-white text-[13px] font-semibold">English</button>
<button class="px-6 py-2 rounded-full bg-surface-container-low text-slate-500 hover:text-slate-900 transition-colors text-[13px] font-semibold">Español</button>
</div>
</div>
<!-- Account Section -->
<div class="space-y-4">
<label class="block text-[13px] font-semibold uppercase tracking-widest text-slate-500">Account</label>
<a class="group flex items-center justify-between p-4 bg-surface-container-low rounded-md hover:bg-surface-container-high transition-colors" href="#">
<span class="text-slate-900 font-medium">Email &amp; password</span>
<span class="material-symbols-outlined text-slate-400 group-hover:translate-x-1 transition-transform" data-icon="arrow_forward">arrow_forward</span>
</a>
</div>
</div>
</div>
<!-- Danger Zone Section -->
<section class="pt-12 border-t-0">
<div class="bg-surface-container-low p-8 rounded-md flex items-center justify-between">
<div>
<h3 class="text-[13px] font-bold uppercase tracking-widest text-red-500">Danger Zone</h3>
<p class="text-slate-500 text-[13px] mt-1">Permanently remove your account and all associated data.</p>
</div>
<button class="px-6 py-3 border border-red-500/20 text-red-500 text-[13px] font-semibold uppercase tracking-widest rounded-md hover:bg-red-500 hover:text-white transition-all active:scale-95">
Delete account
</button>
</div>
</section>
</div>
</main>
<!-- Glassmorphism Floating FAB (Contextual suppression check: Suppressed on Settings) -->
</body></html>

BIN
design/user_settings/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 123 KiB