diff --git a/CLAUDE.md b/CLAUDE.md index 8e6c399..8546812 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -8,11 +8,12 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co ## Project Status -**Fase 0 complete. Fase 1 complete. Fase 2a complete. Fase 2b complete (Realtime + offline queue + Modo Compra). Fase 3 complete (Tareas + Notas). Fase 4 partially complete (global search + RLS audit). 211 tests green: 34 pgTAP + 140 Vitest integration + 6 Vitest unit + 31 Playwright. 2 skipped (Realtime presence — upstream bug in `supabase/realtime` `handle_out/3`, reactivate when fixed). PWA install/push/rate-limit/JWT rotation deferred to a prod-deploy sprint. ✅** +**Fase 0 complete. Fase 1 complete. Fase 2a complete. Fase 2b complete (Realtime + offline queue + Modo Compra). Fase 3 complete (Tareas + Notas). Fase 4 partially complete (global search + RLS audit). Fase 5 planned (mobile UX rewrite — "Monolith Editorial"; see `plan/fase-5-mobile-ux.md`). 211 tests green: 34 pgTAP + 140 Vitest integration + 6 Vitest unit + 31 Playwright. 2 skipped (Realtime presence — upstream bug in `supabase/realtime` `handle_out/3`, reactivate when fixed). PWA install/push/rate-limit/JWT rotation deferred to a prod-deploy sprint. ✅** - `README.md` — full development plan, confirmed tech stack, Justfile reference, and technical warnings - `analysis/analisis-funcional.md` — complete functional specification (domain model, use cases, data models, business rules) -- `plan/fase-*.md` — phase-by-phase implementation plans (Fase 0 through Fase 4) +- `plan/fase-*.md` — phase-by-phase implementation plans (Fase 0 through Fase 5) +- `design/DESIGN.md` + `design/*/screen.png` — "Monolith Editorial" direction + per-screen Stitch mockups (desktop + mobile variants). Consult before changing UI. ### Fase 1 — what has been built diff --git a/README.md b/README.md index 5c1f255..affe9a1 100644 --- a/README.md +++ b/README.md @@ -15,6 +15,7 @@ | Fase 2b — Realtime y Modo Compra | ✅ Completa (presence bloqueado por bug upstream de `supabase/realtime`) | | Fase 3 — Tareas y Notas | ✅ Completa | | Fase 4 — Búsqueda y Pulido | 🟡 Búsqueda + RLS audit completos; PWA install/push/rate-limit/JWT rotation diferidos a sprint de deploy | +| Fase 5 — Rediseño UX Mobile | ⏳ Plan propuesto ("Monolith Editorial") — pendiente de implementación | | Suite de tests (pgTAP + Vitest + Playwright) | ✅ 211 tests verdes (34 pgTAP + 140 integración + 6 unit + 31 E2E), ejecutables con `just test-all` | --- @@ -39,8 +40,11 @@ Las fases ya cerradas (0, 1, 2a) reflejan este patrón retroactivamente: la secc | Fase 2b | [fase-2b-realtime-modo-compra.md](plan/fase-2b-realtime-modo-compra.md) | 2–3 semanas | | Fase 3 | [fase-3-tareas-notas.md](plan/fase-3-tareas-notas.md) | 1–2 semanas | | Fase 4 | [fase-4-busqueda-pulido.md](plan/fase-4-busqueda-pulido.md) | 1 semana | +| Fase 5 | [fase-5-mobile-ux.md](plan/fase-5-mobile-ux.md) | 1–2 semanas | -**Total estimado: 9–13 semanas** +**Total estimado: 10–15 semanas (con Fase 5 mobile)** + +Los mockups de referencia viven en [`design/`](design/) (organizados por pantalla — ver `design/DESIGN.md` para la dirección "Monolith Editorial"). --- diff --git a/design/DESIGN.md b/design/DESIGN.md new file mode 100644 index 0000000..3e4bda3 --- /dev/null +++ b/design/DESIGN.md @@ -0,0 +1,191 @@ +# Design System Specification + + + +## 1. Overview & Creative North Star: "The Monolith Editorial" + +The creative direction for this design system is **The Monolith Editorial**. We are moving away from the "busy" aesthetics of modern SaaS and toward a disciplined, high-end editorial experience. The goal is to create a sense of permanent, quiet authority. By stripping away all accent colors and relying on a monochromatic slate palette, we force the user to focus on content, structure, and intent. + + + +The "Template" look is avoided through **Intentional Negative Space** and **Tonal Depth**. We do not use lines to separate ideas; we use the weight of the typography and the shift of the background. It is a system that feels carved rather than assembled. + + + +--- + + + +## 2. Colors & Tonal Architecture + +The palette is strictly monochromatic, utilizing a "Slate" foundation to provide a cooling, sophisticated atmosphere. + + + +### Core Palette + +- **Background**: `#f7f9fb` (Light) / `#020617` (Dark) + +- **Primary (Action)**: `#000000` (Light) / `#ffffff` (Dark) — *Note: Primary actions invert the surface.* + +- **Destructive**: `#ba1a1a` (The only color allowed to break the monochrome seal). + + + +### The "No-Line" Rule + +**Explicit Instruction:** Designers are prohibited from using 1px solid borders to section off major UI areas. To define boundaries, you must use background shifts. + +- Use `surface-container-low` for secondary content areas. + +- Use `surface-container-highest` for high-priority nested components. + +- Sectioning is achieved via a 32px–48px vertical gap or a subtle change in the background hex, never a line. + + + +### Surface Hierarchy & Nesting + +Treat the UI as stacked sheets of gallery-grade paper. + +1. **Base Layer:** `surface` (The foundation). + +2. **Raised Layer:** `surface-container-low` (For subtle grouping). + +3. **Focus Layer:** `surface-container-lowest` (For cards and interactive modules to "pop" via tonal contrast). + + + +--- + + + +## 3. Typography: The Inter Hierarchy + +We use **Inter** exclusively. To achieve an editorial feel, we rely on extreme contrast between `headline-lg` and `label-sm`. + + + +| Level | Size | Weight | Case | Spacing | + +| :--- | :--- | :--- | :--- | :--- | + +| **Display-LG** | 3.5rem | 600 | Default | -0.02em | + +| **Title-LG** | 20px | 600 | Default | -0.01em | + +| **Header (Label-MD)** | 13px | 600 | Uppercase | +0.05em | + +| **Body-LG** | 16px | 400 | Default | Normal | + +| **Meta (Label-SM)** | 13px | 400 | Default | Normal | + + + +**Editorial Note:** Always pair an Uppercase Label-MD header directly above a Title-LG to create a "Masthead" effect for sections. + + + +--- + + + +## 4. Elevation & Depth: Tonal Layering + +Traditional drop shadows are largely forbidden. Hierarchy must be achieved through **Tonal Layering**. + + + +- **The Layering Principle:** Instead of a shadow, place a `surface-container-lowest` card on a `surface-container-low` background. The slight shift in slate value creates a "natural" lift. + +- **Ambient Shadows:** For floating elements like Sheets or Dialogs, use a "Ghost Shadow": `0px 20px 40px rgba(15, 23, 42, 0.06)`. It should feel like a soft glow, not a dark stain. + +- **Glassmorphism:** For the "Sticky Bottom Input," use a backdrop-blur of `12px` and a semi-transparent `surface` color (80% opacity). This ensures the content "flows" under the interface, maintaining a sense of depth. + + + +--- + + + +## 5. Components + +All components follow a 4px base grid and a `rounded-md` (0.375rem) corner radius. + + + +### Buttons (Inversion Logic) + +- **Primary:** `bg-slate-900 text-slate-50` (Light Mode). This "Inversion" is the signature interactive state. + +- **Destructive:** `bg-red-500 text-white`. Reserved only for irreversible actions. + +- **Ghost:** No background, `text-slate-500`. On hover, shift to `surface-raised`. + + + +### Input Fields & Sticky Input + +- **The Monolith Input:** A sticky bottom container with `backdrop-blur`. No border; only a subtle `surface-raised` background. + +- **Chips:** `rounded-full`, `bg-slate-200`. When active, they invert to `bg-slate-900 text-white`. + + + +### Lists & Swipe Actions + +- **Forbid Dividers:** Do not use lines between list items. Use 12px of vertical padding (`py-3`) to create separation through whitespace. + +- **Swipe-to-Delete:** The "Red Zone" emerges from behind the item. As the user swipes, the background transitions into `red-500` with a white Lucide `trash-2` icon. + + + +### Shopping Mode Components + +- **Large Tap Targets:** Increase minimum hit area to 56px. + +- **Presence Avatars:** 24px circles with a 2px `surface` border, overlapped horizontally to show collaboration. + + + +--- + + + +## 6. Do's and Don'ts + + + +### Do + +- **Do** use uppercase labels with letter-spacing for all category headers. + +- **Do** use `slate-500` for meta-text to create a visual "recession" of less important data. + +- **Do** maximize the use of the `2xl` max-width container on desktop to ensure the "Editorial" line lengths remain readable. + +- **Do** use Lucide icons at 1.5 stroke width to match the weight of Inter's medium-weight characters. + + + +### Don't + +- **Don't** use a 1px border to separate the sidebar from the main content. Use a background color shift. + +- **Don't** use any colors outside of the Slate and Red-500 palette. No "Success Green" or "Warning Orange." Use icons and text to convey state. + +- **Don't** use standard "drop shadows" on cards. If it doesn't pop via tonal shift, the layout needs more whitespace, not more shadow. + +- **Don't** use "Slate-900" for body text. Use "Slate-900" only for titles; use "Slate-800" or "Slate-700" for long-form reading to reduce eye strain. + + + +--- + + + +## 7. Layout Philosophy + +- **Desktop (lg+):** The left sidebar is a fixed Monolith. It stays `surface-raised` while the main content area remains `surface`. + +- **Mobile:** The bottom tab bar utilizes Glassmorphism. Navigation icons should be `slate-400`, switching to `slate-900` when active. No text labels on mobile tabs; the icons must be clear enough to stand alone. \ No newline at end of file diff --git a/design/colectivo_design_reference.html b/design/colectivo_design_reference.html new file mode 100644 index 0000000..ed710eb --- /dev/null +++ b/design/colectivo_design_reference.html @@ -0,0 +1,239 @@ +# DESIGN.md + +Design reference for the Colectivo app. Stack: SvelteKit + shadcn-svelte + Tailwind CSS. + +--- + +## Visual Style + +### Direction + +Clean and minimal. Content is the UI — no decorative elements, no gradients, no shadows unless they carry meaning. Generous whitespace. Every element earns its place. + +### Color + +Monochromatic slate palette. No accent color — contrast and weight carry hierarchy. + +``` +--background: slate-50 / slate-950 +--surface: white / slate-900 +--surface-raised: slate-100 / slate-800 +--border: slate-200 / slate-700 +--text-primary: slate-900 / slate-50 +--text-secondary: slate-500 / slate-400 +--text-disabled: slate-300 / slate-600 +--destructive: red-500 / red-400 ← only color in the UI +``` + +Interactive elements (buttons, checkboxes, active states) use `slate-900` on light and `slate-50` on dark — inverting the surface. The only true color is destructive red. + +### Typography + +Font: **Inter** (or `system-ui` as fallback — acceptable on iOS/macOS). + +| Role | Size | Weight | +|---|---|---| +| Screen title | 20px | 600 | +| Section header | 13px | 600, uppercase, tracked | +| Body / list item | 16px | 400 | +| Secondary / meta | 13px | 400 | +| Input | 16px | 400 — prevents iOS zoom on focus | + +Line height: 1.5 for body, 1.2 for headings. No text smaller than 13px. + +### Spacing + +Base unit: 4px (Tailwind default). Prefer multiples of 4. Common values: + +- List item padding: `px-4 py-3` +- Screen horizontal margin: `px-4` (mobile), `px-6` (desktop) +- Section gap: `gap-6` +- Bottom nav safe area: always account for `env(safe-area-inset-bottom)` + +### Iconography + +**Lucide** (ships with shadcn-svelte). Size `20px` inline, `24px` for nav and primary actions. Stroke width `1.5`. Never fill icons. + +### Dark Mode + +Class-based (`dark` on ``). Respect `prefers-color-scheme` on first load, then persist user preference in `localStorage`. shadcn-svelte's CSS variable system handles theming — no additional setup needed per component. + +--- + +## Component Library + +**shadcn-svelte** — copy-paste components built on bits-ui + Tailwind. No runtime dependency, full ownership of component code. + +### Conventions + +- Copy components into `apps/web/src/lib/components/ui/` (shadcn-svelte default) +- App-specific compositions go in `apps/web/src/lib/components/` (e.g. `ItemRow.svelte`, `ListCard.svelte`) +- Never modify shadcn-svelte primitives directly — compose or wrap them +- Use shadcn-svelte's `cn()` utility for conditional classes + +### Key components to install + +| Component | Used for | +|---|---| +| `Button` | All actions | +| `Input` | Add item, search, forms | +| `Checkbox` | Shopping items, tasks | +| `Sheet` | Mobile bottom drawers (item edit, member invite) | +| `Dialog` | Confirmations (delete list, dissolve collective) | +| `Popover` | Presence avatars tooltip, note color picker | +| `Badge` | Status labels (archived, completed) | +| `Separator` | Section dividers | +| `Skeleton` | Loading states | +| `Sonner` | Toast notifications (sync errors, member joined) | + +--- + +## Layout & Navigation + +### App Shell + +Two-column on desktop, single-column on mobile. + +``` +Mobile Desktop (lg+) +┌─────────────────────┐ ┌──────────┬──────────────────────┐ +│ Header │ │ │ Header │ +├─────────────────────┤ │ ├──────────────────────┤ +│ │ │ Nav │ │ +│ Content │ │ Sidebar │ Content │ +│ │ │ │ │ +├─────────────────────┤ │ │ │ +│ Bottom Nav │ └──────────┴──────────────────────┘ +└─────────────────────┘ +``` + +### Navigation + +**Mobile:** fixed bottom tab bar, 4 tabs. Respects `safe-area-inset-bottom`. +**Desktop (`lg+`):** left sidebar, always visible. + +| Tab | Icon | Route | +|---|---|---| +| Lists | `shopping-cart` | `/lists` | +| Tasks | `check-square` | `/tasks` | +| Notes | `file-text` | `/notes` | +| Search | `search` | `/search` | + +Collective switcher and user avatar live in the header (mobile) / top of sidebar (desktop). + +### Screen Structure + +Every screen follows the same skeleton: + +``` +┌─────────────────────────────┐ +│ ← Back Screen Title ⋯ │ ← Header: title + optional action menu +├─────────────────────────────┤ +│ │ +│ Main content │ ← Scrollable +│ │ +├─────────────────────────────┤ +│ [ + Add item... ] │ ← Sticky bottom input (list/task screens) +└─────────────────────────────┘ +``` + +### Responsive Breakpoints + +Use Tailwind defaults: `sm` (640), `md` (768), `lg` (1024). The sidebar appears at `lg`. Content max-width: `max-w-2xl` centered on large screens. + +--- + +## UX Patterns + +### Optimistic Updates + +All mutations update the local store immediately before the server responds. On error, revert and show a toast. Never block the UI waiting for a network response. + +### Offline Indicator + +A slim bar at the top of the content area (not the header) when offline: + +``` +┌─────────────────────────────┐ +│ No connection · Saving locally │ ← slate-800 bg, slate-100 text, 36px tall +└─────────────────────────────┘ +``` + +Disappears immediately when connection is restored. No animation — just mounts/unmounts. + +### Add Item Input + +Sticky to the bottom of list and task screens. On focus, shows frequency suggestions above it: + +``` +┌──────────────────────────────┐ +│ Milk · Bread · Eggs │ ← Frequency chips (top 5, scrollable row) +├──────────────────────────────┤ +│ 🔍 Add item... [+] │ ← Input + confirm button +└──────────────────────────────┘ +``` + +- Chips are horizontally scrollable, `text-sm`, `rounded-full`, `border` style +- Tapping a chip fills the input; the user can still edit before confirming +- While typing, chips are replaced by prefix-filtered suggestions (max 10, vertical list) +- Confirm with the `+` button or `Enter` + +### Swipe to Delete + +On list items and tasks. Swipe left reveals a red destructive zone: + +``` +┌─────────────────────────────────────┐ +│ ☐ Whole milk 1L ░░░░░░ │ ← item sliding left +│ [Del] │ ← red zone, icon only +└─────────────────────────────────────┘ +``` + +Full swipe confirms deletion immediately (no dialog). Partial swipe snaps back. A toast with "Undo" appears for 4 seconds. + +### Drag & Drop Reordering + +Handle on the left side of each item (visible on long-press on mobile, always visible on desktop). Use `svelte-dnd-action`. During drag: item has `shadow-md`, others compress slightly to show insertion point. + +### Shopping Session Mode + +Full-screen takeover. Clean, distraction-free: + +``` +┌─────────────────────────────┐ +│ ✕ Compra semanal 👤👤 │ ← close + presence avatars +├─────────────────────────────┤ +│ ☐ Whole milk 1L │ +│ ☐ Bread │ ← large tap targets (min 56px height) +│ ☐ Eggs 12 uds │ +│ ──────── Checked ──────── │ ← divider, auto-scrolled below +│ ☑ Butter 250g │ ← muted, struck through +├─────────────────────────────┤ +│ Finish shopping │ ← full-width button +└─────────────────────────────┘ +``` + +- No bottom nav, no sidebar — only the list +- Items checked during the session slide down past the divider automatically +- Presence avatars are `size-7`, overlap slightly if multiple members present + +### Confirmations + +**Destructive, hard-to-reverse actions** (delete list, remove member, dissolve collective): use a `Dialog` with explicit confirmation text. No shortcut. + +**Soft deletions** (single item, single task): swipe with undo toast — no dialog. + +### Empty States + +Simple, text-only. No illustrations. + +``` +No lists yet. +Tap + to create one. +``` + +Two lines max. Secondary text color. Centered in the content area. + +### Loading States + +Use `Skeleton` components that match the shape of the content (list rows, not spinners). Spinner only for full-screen blocking operations (login, initial data fetch). diff --git a/design/grocery_list_crud/code.html b/design/grocery_list_crud/code.html new file mode 100644 index 0000000..2b381bd --- /dev/null +++ b/design/grocery_list_crud/code.html @@ -0,0 +1,246 @@ + + + + + + + + + + + + + + + +
+ +
+
+
+Active Ledger +

Grocery List

+
+ +
+Collaborator 1 +Collaborator 2 +
+1
+
+
+
+ +
+
+ +
+ +
+
+Section 01 +

Produce

+
+
+
+ +
+Honeycrisp Apples +6 Units +
+
+
+ +
+Organic Baby Spinach +2 Bags +
+
+
+
+ +
+
+Section 02 +

Dairy

+
+
+ +
+
+restore_from_trash +
+
+ +
+Whole milk 1L +2 Cartons +
+
+
+
+ +
+Salted Butter +250g +
+
+
+
+ +
+
+Section 03 +

Bakery

+
+
+
+ +
+Sourdough Loaf +1 Unit +
+
+
+
+
+ +
+
+ +
+ + + + + +
+ +
+
+ +
+Cmd + N +
+
+ +
+
+
+
+ \ No newline at end of file diff --git a/design/grocery_list_crud/screen.png b/design/grocery_list_crud/screen.png new file mode 100644 index 0000000..4f97d73 Binary files /dev/null and b/design/grocery_list_crud/screen.png differ diff --git a/design/grocery_list_mobile/code.html b/design/grocery_list_mobile/code.html new file mode 100644 index 0000000..3d27b1e --- /dev/null +++ b/design/grocery_list_mobile/code.html @@ -0,0 +1,254 @@ + + + + + + + + + + + + + + + +
+
+ +

MONOLITH

+
+
+Lists +
+
+
+ +
+Current Inventory +

Grocery List

+
+ +
+ +
+
+ +
+Whole milk 1L +Dairy • Weekly +
+
+
+ +2 + +
+
+ +
+
+ +
+Organic Sourdough +Bakery +
+
+
+ +1 + +
+
+ +
+
+ +
+Large Brown Eggs +Dairy • 12ct +
+
+
+ +1 + +
+
+ +
+
+ +
+Avocado (Ripe) +Produce +
+
+
+ +3 + +
+
+
+
+ +
+
+ +
+Frequency + + + + + +
+ +
+
+ +
+
+ +1 + +
+ +
+
+
+ +
+
+
+User Profile +
+
+

Editorial Lead

+

monolith.editorial@app.com

+
+
+ +
+ \ No newline at end of file diff --git a/design/grocery_list_mobile/screen.png b/design/grocery_list_mobile/screen.png new file mode 100644 index 0000000..d87fbb3 Binary files /dev/null and b/design/grocery_list_mobile/screen.png differ diff --git a/design/grocery_list_simplified/code.html b/design/grocery_list_simplified/code.html new file mode 100644 index 0000000..ced345d --- /dev/null +++ b/design/grocery_list_simplified/code.html @@ -0,0 +1,261 @@ + + + + + + + + + + + + + + + +
+ +
+
+
+Active Ledger +

Grocery List

+
+ +
+Collaborator 1 +Collaborator 2 +
+1
+
+
+
+ +
+
+ +
+ +
+ +
+ +
+Honeycrisp Apples +
+ +6 + +
+
+
+ +
+ +
+Organic Baby Spinach +
+ +2 + +
+
+
+ +
+ +
+Whole milk 1L +
+ +2 + +
+
+
+ +
+ +
+Salted Butter +
+ +1 + +
+
+
+ +
+ +
+Sourdough Loaf +
+ +1 + +
+
+
+
+
+ +
+
+ +
+ + + + + +
+ +
+
+ +
+Cmd + N +
+
+ +
+
+
+
+ \ No newline at end of file diff --git a/design/grocery_list_simplified/screen.png b/design/grocery_list_simplified/screen.png new file mode 100644 index 0000000..b8013a5 Binary files /dev/null and b/design/grocery_list_simplified/screen.png differ diff --git a/design/grocery_list_with_quick_quantity_controls/code.html b/design/grocery_list_with_quick_quantity_controls/code.html new file mode 100644 index 0000000..4fd96a6 --- /dev/null +++ b/design/grocery_list_with_quick_quantity_controls/code.html @@ -0,0 +1,261 @@ + + + + + + + + + + + + + + + +
+ +
+
+
+Active Ledger +

Grocery List

+
+ +
+Collaborator 1 +Collaborator 2 +
+1
+
+
+
+ +
+
+ +
+ +
+ +
+ +
+Honeycrisp Apples +
+ +6 + +
+
+
+ +
+ +
+Organic Baby Spinach +
+ +2 + +
+
+
+ +
+ +
+Whole milk 1L +
+ +2 + +
+
+
+ +
+ +
+Salted Butter +
+ +1 + +
+
+
+ +
+ +
+Sourdough Loaf +
+ +1 + +
+
+
+
+
+ +
+
+ +
+ + + + + +
+ +
+
+ +
+Cmd + N +
+
+ +
+
+
+
+ \ No newline at end of file diff --git a/design/grocery_list_with_quick_quantity_controls/screen.png b/design/grocery_list_with_quick_quantity_controls/screen.png new file mode 100644 index 0000000..b8013a5 Binary files /dev/null and b/design/grocery_list_with_quick_quantity_controls/screen.png differ diff --git a/design/lists_mobile/code.html b/design/lists_mobile/code.html new file mode 100644 index 0000000..e2180db --- /dev/null +++ b/design/lists_mobile/code.html @@ -0,0 +1,238 @@ + + + + + +Colectivo | Lists + + + + + + + + + +
+
+ +MONOLITH +
+
+
+Profile +
+
+
+
+ +
+

Workspace

+

Shared Lists

+
+ +
+ +
+
+
+home +
+
+
+ +
+
+ +
+
+
+
+

Home

+

12 items · Shared with Family

+
+
+ +
+
+
+work +
+
+
+ +
+
+
+
+

Office

+

28 items · Shared with Editorial Team

+
+
+
+ +
+
+celebration +
+
+

Party

+

8 items

+
+
+ +
+
+flight +
+
+

Travel

+

42 items

+
+
+
+
+
+ +
+
+
+
+add +
+ + +
+
+
+ + +
+ + \ No newline at end of file diff --git a/design/lists_mobile/screen.png b/design/lists_mobile/screen.png new file mode 100644 index 0000000..f538536 Binary files /dev/null and b/design/lists_mobile/screen.png differ diff --git a/design/lists_view/code.html b/design/lists_view/code.html new file mode 100644 index 0000000..eac23d7 --- /dev/null +++ b/design/lists_view/code.html @@ -0,0 +1,240 @@ + + + + + + + + + + + + + + + + +
+ +
+
Colectivo
+ +
Lists
+
+ +
+
+ +
+
+
Workspace Overview
+

Shared Lists

+ +
+ +
+
+
+

Home

+

12 items · Updated 2h ago

+
+
+
+User +
+
+User +
+
+
+
+GROCERIES +HOUSEHOLD +
+
+ +
+
+
+

Office

+

8 items

+
+
+
+work +
+
+
+
+ +
+
+
+

Party

+

24 items

+
+
+
+celebration +
+High Priority +
+
+
+ +
+
+
+flight_takeoff +
+
+

Travel

+

5 items · Draft

+
+
+arrow_forward +
+
+
+
+ +
+
+add + + +
+
+ + +
+ \ No newline at end of file diff --git a/design/lists_view/screen.png b/design/lists_view/screen.png new file mode 100644 index 0000000..cf6ae50 Binary files /dev/null and b/design/lists_view/screen.png differ diff --git a/design/notes_mobile/code.html b/design/notes_mobile/code.html new file mode 100644 index 0000000..78c9abb --- /dev/null +++ b/design/notes_mobile/code.html @@ -0,0 +1,219 @@ + + + + + +Monolith Editorial - Notes + + + + + + + + + + +
+
+
+ +

MONOLITH

+
+
+NOTES +
+User Profile +
+
+
+
+ +
+ +
+

REPOSITORY

+

Project Intelligence

+
+ +
+
+Meeting Notes +4 ENTRIES +
+
+ +
+
+

Quarterly Content Strategy Alignment

+more_horiz +
+

Discussed the shift towards high-fidelity editorial pieces for Q4. Focus on long-form interviews and architectural photography...

+
+OCT 12, 2023 +
+
+avatar +
+
+avatar +
+
+
+
+ +
+
+

Client Feedback: Horizon Project

+more_horiz +
+

Client prefers the monochrome direction but requested more emphasis on white space in the mobile viewport. Typography is approved.

+
+OCT 10, 2023 +
+
+
+
+ +
+
+Project Ideas +add +
+
+
+PRIORITY +

The Brutalist Collection

+

A digital archive of 1970s concrete architecture transformed into a high-contrast photography book.

+
+
+

Sustainable Print Media

+

Exploring recycled paper stocks that maintain tactile luxury for the Monolith print edition.

+
+Research +Supply Chain +
+
+
+
+
+ +
+
+ + + +
+
+ + + \ No newline at end of file diff --git a/design/notes_mobile/screen.png b/design/notes_mobile/screen.png new file mode 100644 index 0000000..0e43410 Binary files /dev/null and b/design/notes_mobile/screen.png differ diff --git a/design/notes_view/code.html b/design/notes_view/code.html new file mode 100644 index 0000000..ba88c27 --- /dev/null +++ b/design/notes_view/code.html @@ -0,0 +1,260 @@ + + + + + +Colectivo | Notes + + + + + + + + + + + +
+
+Workspace / +Notes +
+
+
+ + +
+
+User profile +
+
+
+ +
+
+ +
+
+

Category

+

MEETING NOTES

+
+
+ +
+
+Oct 24, 2023 +more_horiz +
+

Q4 Product Roadmap Alignment

+

+ Discussed the core pillars for the upcoming quarter. Priority remains on user retention through the Monolith UI update. Key stakeholders agreed on the phased rollout strategy... +

+
+ + +
+2
+
+
+ +
+
+Oct 22, 2023 +more_horiz +
+

Sprint Retro: Project Apollo

+

+ High velocity maintained. Challenges with the animation engine identified. Action item: Sarah to review the CSS transitions by Friday... +

+
+ +
+
+Oct 19, 2023 +more_horiz +
+

Weekly Sync: Marketing

+

+ Focus on the editorial campaign launching next month. The "Quiet Authority" theme is resonating well with early test groups... +

+
+
+
+ +
+
+

Category

+

PROJECT IDEAS

+
+
+ +
+
+ +
+
+
+Oct 15, 2023 +lightbulb +
+

Minimalist Portfolio Concept

+

+ Experimenting with 0% saturation and extreme negative space for the upcoming creative showcase... +

+
+
+ +
+
+Oct 12, 2023 +more_horiz +
+

AI Driven Content Curation

+

+ Using natural language processing to automatically categorize and tag editorial snippets within the workspace... +

+
+
+
+
+
+ +
+
+
+ + +
+ + + +
+
+
+
+ +
+ + + + +
+ \ No newline at end of file diff --git a/design/notes_view/screen.png b/design/notes_view/screen.png new file mode 100644 index 0000000..ac263c6 Binary files /dev/null and b/design/notes_view/screen.png differ diff --git a/design/search_mobile/code.html b/design/search_mobile/code.html new file mode 100644 index 0000000..e4cffe8 --- /dev/null +++ b/design/search_mobile/code.html @@ -0,0 +1,251 @@ + + + + + + + + + + + + + + + +
+
+
+menu +

MONOLITH

+
+
+User Profile +
+
+
+
+ +
+

Omni-Search

+

Find Anything.

+ +
+
+search +
+ +
+
+ +
+ +
+

+ Lists + 2 Matches +

+
+ +
+
+format_list_bulleted +
+
+

Project Q4 - Strategy

+

Last updated 2 days ago • Editorial Team

+
+chevron_right +
+
+
+format_list_bulleted +
+
+

Project Q4 - Budget Allocations

+

Last updated yesterday • Finance

+
+chevron_right +
+
+
+ +
+

+ Tasks + 1 Match +

+
+
+check_circle +
+
+

Approve Project Q4 wireframes

+

Due tomorrow • High Priority

+
+chevron_right +
+
+ +
+

+ Notes + 3 Matches +

+
+ +
+
+description +Oct 12, 2023 +
+

Project Q4: Kickoff Meeting

+

Discussion regarding the new visual hierarchy and editorial-first approach for the monolith system...

+
+
+
+description +Sep 28, 2023 +
+

Stakeholder Feedback - Q4

+

Initial feedback focuses on the elimination of borders and reliance on tonal shifts for sectioning...

+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/design/search_mobile/screen.png b/design/search_mobile/screen.png new file mode 100644 index 0000000..78b93e9 Binary files /dev/null and b/design/search_mobile/screen.png differ diff --git a/design/search_page/code.html b/design/search_page/code.html new file mode 100644 index 0000000..913954b --- /dev/null +++ b/design/search_page/code.html @@ -0,0 +1,282 @@ + + + + + + + + + + + + + + + + +
+
+Directory +chevron_right +Search Results +
+
+ + +
+User profile +
+
+
+ +
+
+ +
+
+search + +
+
+All Results +Last 7 Days +Attachments +
+
+ +
+ +
+
+Notes +

Design thoughts

+
+
+ +
+
+description +2h ago +
+

Interface Heuristics

+

Exploring the relationship between negative space and cognitive load in minimalist editorial layouts...

+
+
+Avatar +
+
+Avatar +
+
+
+ +
+
+description +Yesterday +
+

Monolith System

+

Core principles for the new design system focusing on slate palettes and glassmorphism anchors...

+
+System +
+
+
+ +
+
+Design inspiration +
+Visual Inspiration +

Editorial Spatial Study

+
+
+
+ +
+ +
+
+Tasks +

Active Items

+
+
+
+check_box +
+

Fix navigation bug

+

Colectivo Mobile App

+
+
+
+check_box_outline_blank +
+

Finalize search UI

+

Workspace V2

+
+High +
+
+
+ +
+
+Lists +

Collections

+
+
+
+
+shopping_cart +Grocery list +
+12 items +
+
+
+bookmarks +Reading list +
+4 items +
+
+
+ +
+bolt +

Search Insights

+

Search is indexing 452 items across your workspace. Use keyboard shortcuts to browse faster.

+
+CMD +K +
+
+
+
+
+
+ +
+
+
+auto_awesome +Ask AI about your workspace... +
+ +
+
+ \ No newline at end of file diff --git a/design/search_page/screen.png b/design/search_page/screen.png new file mode 100644 index 0000000..2cfa1b9 Binary files /dev/null and b/design/search_page/screen.png differ diff --git a/design/settings_1/code.html b/design/settings_1/code.html new file mode 100644 index 0000000..f810268 --- /dev/null +++ b/design/settings_1/code.html @@ -0,0 +1,258 @@ + + + + + +Colectivo - Settings + + + + + + + + + + + +
+ +
+
+ +

Settings

+
+
+ + +
+
+ +
+
+ +
+
+
+ AG +
+
+ +
+
+ +
+ + + +
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ +
+ +
+ +

Changes saved automatically

+
+
+ +
+ +
+ + +
+
+ +
+ + +
+
+

+ Email & password + arrow_forward +

+

Managed in Keycloak

+
+open_in_new +
+ +
+ +
+ + +
+
+
+
+ \ No newline at end of file diff --git a/design/settings_1/screen.png b/design/settings_1/screen.png new file mode 100644 index 0000000..c401a90 Binary files /dev/null and b/design/settings_1/screen.png differ diff --git a/design/settings_2/code.html b/design/settings_2/code.html new file mode 100644 index 0000000..373126a --- /dev/null +++ b/design/settings_2/code.html @@ -0,0 +1,262 @@ + + + + + +Colectivo Settings + + + + + + + + + + + +
+ +
+
+ +
+Colectivo +

Settings

+
+
+
+ + +
+
+ +
+ +
+
+
+ AG +
+
+ +
+ +
+
+
+ + + +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ +
+
+DISPLAY NAME +
+
+ +
+

Changes saved automatically

+
+ +
+
+LANGUAGE +
+
+ + +
+
+ +
+
+ACCOUNT +
+
+
+
+

Email & password →

+

Managed in Keycloak

+
+lock +
+
+
+ +
+
+DANGER ZONE +
+
+
+
+

Delete Account

+

Permanently delete your profile and all associated data. This action is irreversible.

+
+ +
+
+
+
+
+ + + \ No newline at end of file diff --git a/design/settings_2/screen.png b/design/settings_2/screen.png new file mode 100644 index 0000000..ea1ccba Binary files /dev/null and b/design/settings_2/screen.png differ diff --git a/design/shopping_session_1/code.html b/design/shopping_session_1/code.html new file mode 100644 index 0000000..62891e5 --- /dev/null +++ b/design/shopping_session_1/code.html @@ -0,0 +1,210 @@ + + + + + +Colectivo - Shopping Session + + + + + + + + + +
+
+ +

Compra semanal

+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+

To buy

+
+ +
+
+ +
+
+

Whole milk 1L

+

Dairy • Essential

+
+
+drag_indicator +
+
+ +
+
+ +
+
+

Bread

+

Bakery • Fresh

+
+
+drag_indicator +
+
+ +
+
+ +
+
+

Eggs 12 uds

+

Protein • Large

+
+
+drag_indicator +
+
+ +
+
+ +
+
+

Avocados

+

Produce • Pack of 3

+
+
+drag_indicator +
+
+
+ +
+
+

Checked

+
+
+ +
+
+ +
+
+

Butter 250g

+
+
+ +
+
+ +
+
+

Olive Oil 1L

+
+
+
+ + +
+ +
+
+ +
+
+ \ No newline at end of file diff --git a/design/shopping_session_1/screen.png b/design/shopping_session_1/screen.png new file mode 100644 index 0000000..47b25da Binary files /dev/null and b/design/shopping_session_1/screen.png differ diff --git a/design/shopping_session_2/code.html b/design/shopping_session_2/code.html new file mode 100644 index 0000000..fb2e620 --- /dev/null +++ b/design/shopping_session_2/code.html @@ -0,0 +1,201 @@ + + + + + +Colectivo - Shopping Session + + + + + + + + + +
+
+ +

Compra semanal

+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+

To buy

+
+ +
+
+ +
+
+

Whole milk 1L

+

Dairy • Essential

+
+
+drag_indicator +
+
+ +
+
+ +
+
+

Bread

+

Bakery • Fresh

+
+
+drag_indicator +
+
+ +
+
+ +
+
+

Eggs 12 uds

+

Protein • Large

+
+
+drag_indicator +
+
+ +
+
+ +
+
+

Avocados

+

Produce • Pack of 3

+
+
+drag_indicator +
+
+
+ +
+
+

Checked

+
+
+ +
+
+ +
+
+

Butter 250g

+
+
+ +
+
+ +
+
+

Olive Oil 1L

+
+
+
+ +
+ +
+
+ +
+
+ \ No newline at end of file diff --git a/design/shopping_session_2/screen.png b/design/shopping_session_2/screen.png new file mode 100644 index 0000000..89be3b3 Binary files /dev/null and b/design/shopping_session_2/screen.png differ diff --git a/design/shopping_session_mobile/code.html b/design/shopping_session_mobile/code.html new file mode 100644 index 0000000..3e4f451 --- /dev/null +++ b/design/shopping_session_mobile/code.html @@ -0,0 +1,213 @@ + + + + + + + + + + + + + + +
+
+ +
+Shopping Session +
+
+ +
+
+ +
+
+ +2 +
+
+
+
+shopping_bag +
+
+
+
+Active List +

WEEKLY PROVISIONS

+
+
+
+
+
+
+Organic Heirloom Tomatoes +2.5 lbs • Produce +
+
+
+drag_indicator +
+
+
+
+
+
+Artisan Sourdough Batard +1 unit • Bakery +
+
+
+drag_indicator +
+
+
+
+
+
+Cold Pressed Olive Oil +500ml • Pantry +
+
+
+drag_indicator +
+
+
+
+
+
+Maldon Sea Salt Flakes +250g • Pantry +
+
+
+drag_indicator +
+
+
+
+
+Checked +
+
+
+
+
+
+
+check +
+
+Sparkling Mineral Water +Case of 12 • Beverages +
+
+
+
+
+
+check +
+
+Fresh Sweet Basil +1 Bunch • Produce +
+
+
+
+
+ +
+ \ No newline at end of file diff --git a/design/shopping_session_mobile/screen.png b/design/shopping_session_mobile/screen.png new file mode 100644 index 0000000..eed0abd Binary files /dev/null and b/design/shopping_session_mobile/screen.png differ diff --git a/DESIGN.md b/design/slate_collective/DESIGN.md similarity index 99% rename from DESIGN.md rename to design/slate_collective/DESIGN.md index 73f8361..fc501a0 100644 --- a/DESIGN.md +++ b/design/slate_collective/DESIGN.md @@ -1,37 +1,37 @@ # Design System Specification - + ## 1. Overview & Creative North Star: "The Monolith Editorial" The creative direction for this design system is **The Monolith Editorial**. We are moving away from the "busy" aesthetics of modern SaaS and toward a disciplined, high-end editorial experience. The goal is to create a sense of permanent, quiet authority. By stripping away all accent colors and relying on a monochromatic slate palette, we force the user to focus on content, structure, and intent. - + The "Template" look is avoided through **Intentional Negative Space** and **Tonal Depth**. We do not use lines to separate ideas; we use the weight of the typography and the shift of the background. It is a system that feels carved rather than assembled. - + --- - + ## 2. Colors & Tonal Architecture The palette is strictly monochromatic, utilizing a "Slate" foundation to provide a cooling, sophisticated atmosphere. - + ### Core Palette - **Background**: `#f7f9fb` (Light) / `#020617` (Dark) - **Primary (Action)**: `#000000` (Light) / `#ffffff` (Dark) — *Note: Primary actions invert the surface.* - **Destructive**: `#ba1a1a` (The only color allowed to break the monochrome seal). - + ### The "No-Line" Rule **Explicit Instruction:** Designers are prohibited from using 1px solid borders to section off major UI areas. To define boundaries, you must use background shifts. - Use `surface-container-low` for secondary content areas. - Use `surface-container-highest` for high-priority nested components. - Sectioning is achieved via a 32px–48px vertical gap or a subtle change in the background hex, never a line. - + ### Surface Hierarchy & Nesting Treat the UI as stacked sheets of gallery-grade paper. 1. **Base Layer:** `surface` (The foundation). 2. **Raised Layer:** `surface-container-low` (For subtle grouping). 3. **Focus Layer:** `surface-container-lowest` (For cards and interactive modules to "pop" via tonal contrast). - + --- - + ## 3. Typography: The Inter Hierarchy We use **Inter** exclusively. To achieve an editorial feel, we rely on extreme contrast between `headline-lg` and `label-sm`. - + | Level | Size | Weight | Case | Spacing | | :--- | :--- | :--- | :--- | :--- | | **Display-LG** | 3.5rem | 600 | Default | -0.02em | @@ -39,58 +39,58 @@ We use **Inter** exclusively. To achieve an editorial feel, we rely on extreme c | **Header (Label-MD)** | 13px | 600 | Uppercase | +0.05em | | **Body-LG** | 16px | 400 | Default | Normal | | **Meta (Label-SM)** | 13px | 400 | Default | Normal | - + **Editorial Note:** Always pair an Uppercase Label-MD header directly above a Title-LG to create a "Masthead" effect for sections. - + --- - + ## 4. Elevation & Depth: Tonal Layering Traditional drop shadows are largely forbidden. Hierarchy must be achieved through **Tonal Layering**. - + - **The Layering Principle:** Instead of a shadow, place a `surface-container-lowest` card on a `surface-container-low` background. The slight shift in slate value creates a "natural" lift. - **Ambient Shadows:** For floating elements like Sheets or Dialogs, use a "Ghost Shadow": `0px 20px 40px rgba(15, 23, 42, 0.06)`. It should feel like a soft glow, not a dark stain. - **Glassmorphism:** For the "Sticky Bottom Input," use a backdrop-blur of `12px` and a semi-transparent `surface` color (80% opacity). This ensures the content "flows" under the interface, maintaining a sense of depth. - + --- - + ## 5. Components All components follow a 4px base grid and a `rounded-md` (0.375rem) corner radius. - + ### Buttons (Inversion Logic) - **Primary:** `bg-slate-900 text-slate-50` (Light Mode). This "Inversion" is the signature interactive state. - **Destructive:** `bg-red-500 text-white`. Reserved only for irreversible actions. - **Ghost:** No background, `text-slate-500`. On hover, shift to `surface-raised`. - + ### Input Fields & Sticky Input - **The Monolith Input:** A sticky bottom container with `backdrop-blur`. No border; only a subtle `surface-raised` background. - **Chips:** `rounded-full`, `bg-slate-200`. When active, they invert to `bg-slate-900 text-white`. - + ### Lists & Swipe Actions - **Forbid Dividers:** Do not use lines between list items. Use 12px of vertical padding (`py-3`) to create separation through whitespace. - **Swipe-to-Delete:** The "Red Zone" emerges from behind the item. As the user swipes, the background transitions into `red-500` with a white Lucide `trash-2` icon. - + ### Shopping Mode Components - **Large Tap Targets:** Increase minimum hit area to 56px. - **Presence Avatars:** 24px circles with a 2px `surface` border, overlapped horizontally to show collaboration. - + --- - + ## 6. Do's and Don'ts - + ### Do - **Do** use uppercase labels with letter-spacing for all category headers. - **Do** use `slate-500` for meta-text to create a visual "recession" of less important data. - **Do** maximize the use of the `2xl` max-width container on desktop to ensure the "Editorial" line lengths remain readable. - **Do** use Lucide icons at 1.5 stroke width to match the weight of Inter's medium-weight characters. - + ### Don't - **Don't** use a 1px border to separate the sidebar from the main content. Use a background color shift. - **Don't** use any colors outside of the Slate and Red-500 palette. No "Success Green" or "Warning Orange." Use icons and text to convey state. - **Don't** use standard "drop shadows" on cards. If it doesn't pop via tonal shift, the layout needs more whitespace, not more shadow. - **Don't** use "Slate-900" for body text. Use "Slate-900" only for titles; use "Slate-800" or "Slate-700" for long-form reading to reduce eye strain. - + --- - + ## 7. Layout Philosophy - **Desktop (lg+):** The left sidebar is a fixed Monolith. It stays `surface-raised` while the main content area remains `surface`. - **Mobile:** The bottom tab bar utilizes Glassmorphism. Navigation icons should be `slate-400`, switching to `slate-900` when active. No text labels on mobile tabs; the icons must be clear enough to stand alone. \ No newline at end of file diff --git a/design/tasks_mobile/code.html b/design/tasks_mobile/code.html new file mode 100644 index 0000000..f82ae2a --- /dev/null +++ b/design/tasks_mobile/code.html @@ -0,0 +1,259 @@ + + + + + + + + + + + + + + + +
+
+ +

MONOLITH

+
+
+ +
+
+ +
+
+Task Manager +

Productivity

+
+ +
+
+Urgent Action +

High Priority

+
+
+ +
+ +
+

Review Q3 Revenue Projections

+

Ensure alignment with current growth trajectory before board meeting.

+
+Due Today +Finance +
+
+
+ +
+ +
+

Finalize Acquisition Terms

+

Review legal documents for Project Phoenix.

+
+attach_file +3 Attachments +
+
+
+
+
+ +
+
+Roadmap +

Product Development

+
+
+
+ +
+

Implement Bento Grid Components

+

Modular layout system for the main dashboard views.

+
+
+
+ +
+

Define Tonal Layering Spec

+

Documenting the no-line rule for design-engineering handoff.

+
+
+ +
+
+ +
+
+
+
+
+
+ +
+
+Future Focused +

Backlog

+
+
+
+ +
+

Explore VR Interface Paradigms

+

Research phase for spatial editorial content.

+
+
+
+ +
+

Legacy CSS Audit

+

Removing unused utility classes from v1.

+
+
+
+
+
+ +
+
+
+ +
+ + + +
+ +
+add + + +
+
+
+
+ +
+
+
+
+ +
+
+
Editorial Lead
+
monolith.editorial@app.com
+
+
+
+ +
+ \ No newline at end of file diff --git a/design/tasks_mobile/screen.png b/design/tasks_mobile/screen.png new file mode 100644 index 0000000..d17cba1 Binary files /dev/null and b/design/tasks_mobile/screen.png differ diff --git a/design/tasks_view/code.html b/design/tasks_view/code.html new file mode 100644 index 0000000..10f85d9 --- /dev/null +++ b/design/tasks_view/code.html @@ -0,0 +1,256 @@ + + + + + + + + + + + + + + +
+
+
+menu +Colectivo +
+ +
+
+ + +
+3
+
+ +
+
+
+
+

High Priority

+
+
+drag_indicator +
+ +Finalize Q4 strategy deck for stakeholders +
+ +
+
+drag_indicator +
+ +Coordinate with design on monolith brand tokens +
+ +
+
+
+
+

Product Development

+
+
+drag_indicator +
+ +Core API Integration +
+
+
+
+
+ +Review documentation for Auth endpoints +
+
+
+
+ +Map database schema to editorial structure +
+
+
+
+drag_indicator +
+ +User testing: Editorial workflow +
+
+
+
+
+

Backlog

+
+
+drag_indicator +
+ +Update dependency libraries +
+
+
+
+
+
+
+
+
+ + + +
+
+
+add_circle +
+ + +
+
+
+ + \ No newline at end of file diff --git a/design/tasks_view/screen.png b/design/tasks_view/screen.png new file mode 100644 index 0000000..e7242d2 Binary files /dev/null and b/design/tasks_view/screen.png differ diff --git a/design/user_settings/code.html b/design/user_settings/code.html new file mode 100644 index 0000000..5c021a8 --- /dev/null +++ b/design/user_settings/code.html @@ -0,0 +1,220 @@ + + + + + + + + + + + + + + + + +
+

Settings

+
+notifications +grid_view +
+ AG +
+
+
+ +
+
+ +
+
+ AG +
+ +
+ +
+ +
+ +
+ + +
+ +
+ +
+ + + + + + + + + + + + + + + + + + +
+
+
+ +
+ +
+ +
+ + +
+
+ +
+ + +Email & password +arrow_forward + +
+
+
+ +
+
+
+

Danger Zone

+

Permanently remove your account and all associated data.

+
+ +
+
+
+
+ + \ No newline at end of file diff --git a/design/user_settings/screen.png b/design/user_settings/screen.png new file mode 100644 index 0000000..2eb28bb Binary files /dev/null and b/design/user_settings/screen.png differ diff --git a/plan/fase-5-mobile-ux.md b/plan/fase-5-mobile-ux.md new file mode 100644 index 0000000..751b219 --- /dev/null +++ b/plan/fase-5-mobile-ux.md @@ -0,0 +1,163 @@ +### Fase 5 — Rediseño UX Mobile ("Monolith Editorial") +**Estado: ⏳ Plan propuesto** +**Duración estimada: 1–2 semanas** +**Objetivo: reescribir la capa de presentación para que el app sea mobile-first, siguiendo las mockups de Stitch en `design/*/screen.png` y la dirección "Monolith Editorial" de `design/DESIGN.md`.** + +Esta fase sigue TDD: **primero los tests, al final la verificación.** Toda la cobertura funcional actual (211 tests) debe seguir verde. Los nuevos tests cubren responsive breakpoints y el shell mobile. + +--- + +#### 0. Brecha entre el estado actual y la dirección de diseño + +**Lo que ya funciona a favor del plan:** +- Modo Compra ya es full-screen overlay con z-50 (`/lists/[id]/session`) — compatible mobile. +- Sticky bottom input con glassmorphism básico en `/lists/[id]` y `/tasks/[id]`. +- Tokens de diseño en `app.css` (RGB triplets + `rgb(var(--token) / )`) compatibles con la paleta slate. +- Swipe-to-delete touch en `/lists/[id]` para items (parcial — sin zona roja animada ni toast de "undo"). + +**Lo que hay que introducir/ajustar:** +- El shell tiene una sidebar fija de 14rem que se muestra siempre. En mobile hay que ocultarla y mostrar **top-bar con hamburger + bottom tab bar con glassmorphism**. +- Ningún header tiene el tratamiento de **masthead editorial** (uppercase label + big title) que piden las mockups (`WORKSPACE / Shared Lists`, `CURRENT INVENTORY / Grocery List`, etc.). +- Las cards de listas en `/lists` son genéricas; la mockup mobile las quiere **con icono, meta ("12 items · Shared with Family") y avatares de presencia overlapping**. +- Swipe-to-delete no tiene zona roja con fade + toast con undo (ver §UX Patterns en `design/colectivo_design_reference.html`). +- Chips de frecuencia no son horizontalmente scrollables en mobile. +- Headers de sección (todas las pantallas) usan `text-xs uppercase tracking-wide` pero sin el pairing masthead. +- Padding actual `px-6` no escala: mobile pide `px-4`, desktop `px-6`. + +**Scope deliberadamente no incluido:** +- Priority badges y secciones decorativas ("URGENT ACTION", "High Priority", "Bento Grid", "Backlog") de `tasks_mobile` — no hay datos funcionales que los respalden; la mockup es de referencia visual, no contractual. +- "SAVE" manual en notas (seguimos con autosave). +- Mic/voice search en `search_mobile` (fuera de alcance). +- Meta ficticia tipo "Dairy • Weekly" en ítems de la compra — el modelo no tiene categorías. + +--- + +#### 5.0 Tests primero — escribir antes de implementar + +**Playwright (`apps/web/tests/e2e/`):** + +- [ ] `mobile-shell.test.ts`: + - M-01: en viewport 375×812 (iPhone 13), la sidebar NO es visible. + - M-02: en viewport 375×812, el bottom tab bar es visible con 4 iconos (lists/tasks/notes/search) y el icono de la ruta activa tiene `aria-current="page"`. + - M-03: tap en el hamburger abre un drawer con el collective switcher + settings + logout. + - M-04: en viewport 1280×800, la sidebar SÍ es visible y el bottom tab bar NO aparece. +- [ ] `mobile-masthead.test.ts`: + - M-05: cada ruta (`/lists`, `/tasks`, `/notes`, `/search`) muestra un elemento con `data-testid="masthead-label"` (uppercase) + `data-testid="masthead-title"` (big). +- [ ] `mobile-swipe-delete.test.ts`: + - M-06: en `/lists/[id]` con viewport mobile, simulate touch swipe-left en un item → se revela la zona roja con aria-label "Delete item". + - M-07: full-swipe dispara el delete; toast con botón "Undo" restaura el ítem si se pulsa en < 4s. + +**Vitest (`apps/web/src/lib/...`):** + +- [ ] `swipe.test.ts` — helper de estado del swipe (offset → revealed → committed) aislado para testeo sin DOM. +- [ ] `undoQueue.test.ts` — cola de deletes con TTL de 4s que puede cancelarse. + +**Nota:** los 211 tests existentes deben seguir pasando tras el rediseño. Ese es el verdadero smoke de regresión — no añadimos tests funcionales nuevos que dupliquen lo que ya hay. + +--- + +#### 5.1 Shell responsive + +- [ ] `apps/web/src/lib/components/layout/MobileTopBar.svelte`: + - Hamburger (izq) + wordmark "Colectivo" (centro) + avatar (der) + - Visible solo en `md:hidden` + - Sticky top con glassmorphism (`backdrop-blur-xl bg-surface/80`) +- [ ] `apps/web/src/lib/components/layout/BottomTabBar.svelte`: + - 4 items: Lists, Tasks, Notes, Search. Solo iconos (sin texto). + - Glassmorphism igual que la top bar. + - Respeta `env(safe-area-inset-bottom)` con `pb-[env(safe-area-inset-bottom)]`. + - Active: `text-slate-900` / inactive: `text-slate-400`. + - Visible solo en `md:hidden`. +- [ ] `apps/web/src/lib/components/layout/MobileDrawer.svelte`: + - Se abre al tocar el hamburger. + - Contiene: collective switcher (con lista de colectivos + emoji), botón "Manage collective", enlace a Settings, Sign out. + - Backdrop con click-outside close + trap focus. + - Usa CSS transform (no re-mount) para evitar pérdida de estado. +- [ ] `apps/web/src/routes/(app)/+layout.svelte`: + - Extraer la sidebar actual a `DesktopSidebar.svelte`, renderizar solo `md:flex`. + - Renderizar `` + `
` + `` en mobile. + - Main scroll area con `pb-20` en mobile para dejar espacio al bottom bar. + +#### 5.2 Masthead editorial + responsive padding + +- [ ] Extraer un componente `ScreenMasthead.svelte`: + ```svelte + +

{label}

+

{title}

+ ``` +- [ ] Aplicar en `/lists` (`WORKSPACE` / `Shopping Lists`), `/tasks` (`TASK MANAGER` / `Productivity` o `Tareas`), `/notes` (`REPOSITORY` / `Notes`), `/search` (`OMNI-SEARCH` / `Find Anything.`). +- [ ] Reemplazar `px-6` genérico por `px-4 md:px-6` en contenedores principales. +- [ ] Reemplazar `max-w` ausente por `max-w-2xl mx-auto` en pantallas de lectura (notes, search results) para mantener longitudes editoriales en pantallas grandes. + +#### 5.3 Rediseño de `/lists` mobile + +- [ ] Cards con el tratamiento de la mockup `lists_mobile`: + - Icono grande (emoji / lucide) arriba-izq + - Título + línea meta (`{n} items · {member_count} members` o `Active` si vacío) + - Avatares de presencia overlapping (usa `collectiveMembers` ya cargado; máximo 3, "+N" si más) + - Sin shadow — separa por `bg-surface-raised` sobre `bg-background` +- [ ] Card "featured" (primera lista activa) a ancho completo; resto en grid 2×2 en mobile. +- [ ] Sticky input conserva `Plus` + `Create` button como en la mockup. + +#### 5.4 Rediseño de `/lists/[id]` mobile + +- [ ] Top-bar contextual: back arrow + nombre de la lista (truncado) + menú 3-dots. +- [ ] Fila de ítem: + - Checkbox 24px a la izq + - Nombre (body-lg) + meta opcional `{unit}` debajo si existe + - Qty stepper a la derecha (`– N +`) siempre visible en mobile (quitar hover-only actual) + - Handle de drag (GripVertical) oculto en mobile — se activa con long-press +- [ ] Swipe-to-delete "zona roja": + - Touch-move left → translate X y revela `bg-red-500 text-white` con icono `Trash2` a la derecha + - Threshold 48px = snap abierto; >72% del ancho = commit delete + - Post-delete: toast con "Undo" durante 4s (ver `undoQueue`) + - Reutilizar lógica existente y añadir animación de color + el componente de toast + +#### 5.5 Toast con "Undo" para deletes suaves + +- [ ] `apps/web/src/lib/stores/undoQueue.ts`: + - `scheduleUndoable({ label, restore, commit })` devuelve `id` + - TTL 4s; si nadie llama `undo(id)`, ejecuta `commit`; si llama `undo`, ejecuta `restore` +- [ ] `apps/web/src/lib/components/UndoToast.svelte`: + - Monta al fondo de la pantalla (encima del bottom bar en mobile) + - Muestra label + botón "Undo" + - Escucha el store y desaparece cuando la cola se vacía +- [ ] Integrar en: delete de item (lists), delete de task, send-to-trash de nota. + +#### 5.6 Chips de frecuencia scrollables + +- [ ] `ItemSuggestions.svelte`: wrapper con `overflow-x-auto flex-nowrap` en mobile, grid en desktop. +- [ ] Hacer los chips `rounded-full bg-slate-200 dark:bg-slate-800` según DESIGN.md §5. + +#### 5.7 Adaptar `/tasks`, `/notes`, `/search` al shell + masthead + +- [ ] `/tasks`: masthead `TASK MANAGER` / `Tareas`. Quitar priority badges de las mockups (no están en el modelo). Mantener secciones "Pendientes / Completadas" con animación flip. +- [ ] `/notes`: masthead `REPOSITORY` / `Notes` + contador `{n} ENTRIES`. Listado en una columna mobile; grid masonry solo en `md+`. +- [ ] `/search`: masthead `OMNI-SEARCH` / `Find Anything.`. Las secciones ya tienen `data-testid="search-group-*"` — solo añadir badge "{n} MATCHES" junto al header. + +#### 5.Z Verificación final — todos los tests verdes + +- [ ] `just test-all` → 0 failures (los 211 actuales siguen verdes + los nuevos mobile tests) +- [ ] Validación visual en DevTools iPhone 13 (375×812) + Pixel 7 (412×915) + Desktop (1280×800) +- [ ] `loginAs(USERS.borja)` en Playwright con viewport mobile emulado — el shell mobile debe estar activo automáticamente. + +--- + +### Plan de ejecución (orden sugerido) + +1. **5.0 Tests primero** — escribir los mobile tests aunque inicialmente fallen. +2. **5.1 Shell responsive** — sin esto, nada más es testable en mobile. +3. **5.5 UndoQueue + UndoToast** — dependencia de 5.4. +4. **5.2 Masthead + padding** — trivial, desbloquea los tests M-05. +5. **5.3 / 5.4 / 5.6** — ajustes por pantalla. +6. **5.7** — pulido de tasks/notes/search con el shell. +7. **5.Z Verificación** — correr toda la suite, snapshot visual, commit. + +### Criterio de aceptación + +- En viewport ≤ 768px: sidebar oculta, bottom tab bar + top bar visibles, drawer abre con el switcher. +- Todas las pantallas tienen el par masthead (label uppercase + title big). +- Swipe-left en un item revela la zona roja; full-swipe borra con toast de undo. +- Los 211 tests funcionales siguen verdes. Los nuevos mobile tests (M-01..M-07) pasan. +- Validado manualmente en DevTools en 3 viewports.