jamey/simpleshop_theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add admin redesign plan and update progress roadmap

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
jamey 2026-02-11 16:51:42 +00:00
parent 880f63e0b1
commit 093bdcc7a6
2 changed files with 442 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
PROGRESS.md
View File

@ -22,13 +22,20 @@
**Tier 1 MVP complete.** CI pipeline done. Hosting & deployment done (including observability). PageSpeed CI done (99-100 mobile, 97+ desktop). Usability fixes mostly done (15/18). Next up: setup wizard, then real product data, then shipping costs.
## Next Up: Setup Wizard → Real Products → Shipping
## Next Up
Three linked tasks to make the shop fully functional for real orders:
Two parallel tracks to make the shop fully functional:
1. **Setup wizard & go-live gate** — coming soon page for public visitors, admin setup checklist, go-live toggle. See [docs/plans/setup-wizard.md](docs/plans/setup-wizard.md)
2. **Wire real product data** — replace PreviewData with Products context on shop pages (depends on setup wizard being done so there's a gate while testing)
3. **Shipping costs at checkout** — Printify shipping rates or Stripe shipping options (depends on real products being connected)
**Track A — Admin redesign** (can start now):
1. **Admin shell & dashboard** — sidebar nav, admin root layout, dashboard landing page. See [docs/plans/admin-redesign.md](docs/plans/admin-redesign.md)
2. **Custom admin CSS** — replace DaisyUI with lean admin stylesheet (phase 2 of admin redesign)
**Track B — Real orders** (setup wizard first, then sequential):
1. **Setup wizard & go-live gate** — admin account creation, coming soon page, setup checklist, go-live toggle. See [docs/plans/setup-wizard.md](docs/plans/setup-wizard.md)
2. **Wire real product data** — replace PreviewData with Products context on shop pages
3. **Shipping costs at checkout** — Printify shipping rates or Stripe shipping options
The admin dashboard (A1) and setup wizard (B1) converge: the dashboard IS the setup wizard for new installs.
## Usability Issues (from user testing, Feb 2025)

430
docs/plans/admin-redesign.md Normal file
View File

@ -0,0 +1,430 @@
# Plan: Admin area redesign
Status: Pending
## Overview
The admin area is currently a collection of separate pages with no shared layout, inconsistent navigation, and no cohesive feel. This plan redesigns it into a proper admin shell with sidebar navigation, a dashboard landing page, and eventually custom CSS to replace DaisyUI.
## Current state
**6 admin pages across 3 LiveView directories:**
- `/admin/theme` → `ThemeLive.Index` — full-screen two-pane theme editor (custom layout)
- `/admin/orders` → `AdminLive.Orders` — order list with status filter tabs
- `/admin/orders/:id` → `AdminLive.OrderShow` — order detail
- `/admin/settings` → `AdminLive.Settings` — Stripe credentials
- `/admin/providers` → `ProviderLive.Index` — Printify connection list
- `/admin/providers/new|:id/edit` → `ProviderLive.Form` — add/edit Printify connection
- Plus: `/admin/dashboard` (LiveDashboard), `/admin/errors` (ErrorTracker)
**Problems:**
1. No shared admin layout — each page uses the generic `Layouts.app` wrapper
2. Navigation is just text links in `root.html.heex` — no sidebar, no active states, no hierarchy
3. No admin bar on shop pages — admin has no indication they're logged in while browsing
4. No dashboard/landing page — `/admin` just redirects to `/admin/theme`
5. Settings are split: Stripe at `/admin/settings`, Printify at `/admin/providers`, user account at `/users/settings`
6. Theme editor has its own custom layout unrelated to other admin pages
7. Admin uses DaisyUI + core_components, shop uses custom theme CSS — two different design systems
8. No mobile-friendly admin navigation
**Current CSS setup:**
- `app.css` — Tailwind + DaisyUI + heroicons + theme layers (admin pages)
- `app-shop.css` — Tailwind + heroicons + theme layers, no DaisyUI (shop pages)
- `root.html.heex` loads `app.css` (admin root layout)
- `shop_root.html.heex` loads `app-shop.css` (shop root layout)
## Design goals
- **One admin, one shop** — clear visual distinction between admin and storefront
- **Consistent navigation** — sidebar on desktop, bottom sheet or hamburger on mobile
- **Dashboard-first** — landing page shows setup status, recent orders, quick stats
- **Theme editor stays special** — it needs its full-screen two-pane layout, but should still feel connected to the admin
- **Custom CSS** — eventually replace DaisyUI with a lean admin stylesheet
- **Progressive** — phase 1 uses existing components, phase 2 swaps the CSS
## Phase 0: Filesystem restructure
The admin LiveViews are scattered across three directories. Consolidate before building the new layout.
**Current:**
```
live/
admin_live/ → orders.ex, order_show.ex, settings.ex
theme_live/ → index.ex, index.html.heex
provider_live/ → index.ex, form.ex
user_live/ → login.ex, registration.ex, settings.ex, confirmation.ex
shop_live/ → home.ex, collection.ex, product.ex, content.ex, coming_soon.ex
```
**Target:**
```
live/
admin/ → all admin LiveViews
dashboard.ex
orders.ex
order_show.ex
settings.ex (absorbs user settings + Stripe + Printify)
theme/
index.ex
index.html.heex
providers/
index.ex
form.ex
shop/ → all shop LiveViews
home.ex
collection.ex
product.ex
content.ex
coming_soon.ex
auth/ → authentication only (no "users" concept)
login.ex
confirmation.ex
```
Note: `registration.ex` is deleted (replaced by setup wizard `/setup` page). `user_live/settings.ex` is absorbed into `admin/settings.ex`.
**Module rename mapping:**
- `AdminLive.Orders` → `Admin.Orders`
- `AdminLive.OrderShow` → `Admin.OrderShow`
- `AdminLive.Settings` → `Admin.Settings`
- `ThemeLive.Index` → `Admin.Theme.Index`
- `ProviderLive.Index` → `Admin.Providers.Index`
- `ProviderLive.Form` → `Admin.Providers.Form`
- `ShopLive.Home` → `Shop.Home` (etc.)
- `UserLive.Login` → `Auth.Login`
- `UserLive.Confirmation` → `Auth.Confirmation`
- `UserLive.Registration` → deleted (replaced by setup wizard)
- `UserLive.Settings` → deleted (absorbed into `Admin.Settings`)
**What needs updating per rename:**
- Module `defmodule` declaration
- Router references
- Test file paths and module names
- Any cross-module aliases or references
- `embed_templates` paths (theme editor)
This is a mechanical refactor — best done as one atomic commit. Run `mix test` after to verify nothing's broken.
**Estimate:** 1.5-2 hours
## Phase 1: Admin layout and navigation
Build the structural pieces first, using existing DaisyUI components. No CSS changes yet.
### 1.1 Admin shell layout
**New file:** `lib/simpleshop_theme_web/components/admin_components.ex`
A shared admin layout component that wraps all admin pages:
```
┌─────────────────────────────────────────────┐
│ Admin header bar [← Shop]│
├──────────┬──────────────────────────────────┤
│ Sidebar │ │
│ │ Page content │
│ Dashboard│ │
│ Orders │ │
│ Theme │ │
│ Products*│ │
│ Settings │ │
│ │ │
│ │ │
│ ──────── │ │
│ System │ │
│ Log out │ │
├──────────┴──────────────────────────────────┤
│ (mobile: bottom nav or hamburger) │
└─────────────────────────────────────────────┘
```
*Products is future — for now it links to `/admin/providers`
The shell provides:
- **Sidebar nav** (desktop) with icon + label for each section, active state highlighting
- **Header bar** with "← View shop" link and admin email
- **Mobile nav** — collapsible sidebar or bottom sheet (match the shop's mobile-first approach)
- **Content area** — where each admin page renders
**Implementation:**
- `admin_shell` function component in `admin_components.ex`
- Takes `current_path` and `current_scope` as attrs
- Renders sidebar + content slot
- Each admin LiveView wraps its render in `<.admin_shell>`
**Estimate:** 2-3 hours
### 1.2 Admin root layout
**File:** `lib/simpleshop_theme_web/components/layouts/admin_root.html.heex` (new)
A dedicated root layout for admin pages that:
- Loads `app.css` (or later `app-admin.css`)
- Sets appropriate meta tags
- Doesn't include the shop nav/footer chrome
- Replaces the current generic `root.html.heex` for admin routes
**File:** `lib/simpleshop_theme_web/components/layouts/admin.html.heex` (new)
The admin child layout (equivalent of `shop.html.heex`):
- Renders flash messages
- Wraps `@inner_content`
**Router change:** Admin routes get their own `root_layout: {Layouts, :admin_root}`
**Estimate:** 1 hour
### 1.3 Dashboard page
**File:** `lib/simpleshop_theme_web/live/admin_live/dashboard.ex` (new)
Replace the current `/admin` → redirect-to-theme with a proper dashboard:
- **Setup status card** — reuses `Setup.setup_status/0` from the setup wizard plan. Shows checklist progress when not live, or "Shop is live" when live.
- **Recent orders card** — last 5 orders with status badges, link to full orders page
- **Quick stats** — total orders, total revenue, products count (simple queries)
- **Quick links** — edit theme, view shop, manage products
When the shop isn't live yet, the dashboard IS the setup wizard (from [setup-wizard.md](setup-wizard.md)). This replaces the separate `/admin/setup` page from that plan — the dashboard absorbs its role.
**Route:** `/admin` → `AdminLive.Dashboard`
**Estimate:** 2 hours
### 1.4 Consolidate settings
Currently settings are split across three pages. Consolidate into one settings page with sections:
**File:** `lib/simpleshop_theme_web/live/admin_live/settings.ex` (refactor)
Sections:
- **Payments** — Stripe API key, webhook config (current `/admin/settings` content)
- **Products** — Printify connection, sync status (current `/admin/providers` content)
- **Account** — email, password change (current `/users/settings` content)
- **Advanced** — LiveDashboard link, ErrorTracker link, log out
Each section is a collapsible card or tab. The existing `/admin/providers` and `/users/settings` routes can redirect here.
**Estimate:** 2-3 hours
### 1.5 Admin bar on shop pages
**File:** `lib/simpleshop_theme_web/components/shop_components/layout.ex`
When the admin is browsing the shop (authenticated), show a thin bar at the top:
```
┌──────────────────────────────────────────────┐
│ Admin: [Dashboard] [Orders] [Theme] [← Back] │
└──────────────────────────────────────────────┘
```
- Fixed at top, minimal height (~32px)
- Distinct from the shop header (darker background, smaller text)
- Links to key admin pages
- "Not live" indicator when shop isn't live yet
- Can be dismissed/hidden per session if the admin wants a clean view
**Implementation:** Add to `shop_layout` in layout.ex, conditional on `assigns[:current_scope]`
**Estimate:** 1 hour
### 1.6 Theme editor integration
The theme editor has its own full-screen layout (sidebar controls + preview pane) that doesn't fit a standard sidebar nav. Options:
**Approach: Overlay navigation**
- Theme editor keeps its full-screen layout
- A small "← Admin" button in the top-left corner returns to the admin shell
- The admin sidebar is hidden while in the theme editor
- This is similar to how Shopify's theme editor works — it's a separate "mode"
No structural changes to the theme editor itself — just add the back-to-admin link.
**Estimate:** 30 mins
### 1.7 Navigation structure
Final nav items for the sidebar:
| Item | Route | Icon | Notes |
|------|-------|------|-------|
| Dashboard | `/admin` | home/grid | Landing page, setup wizard when not live |
| Orders | `/admin/orders` | shopping-bag | Order list with filters |
| Theme | `/admin/theme` | paintbrush | Opens full-screen editor |
| Settings | `/admin/settings` | cog | Consolidated settings page |
Future additions (keep the nav extensible):
- Products — product management, when we have editable product data
- Pages — page editor (Tier 4)
- Analytics — when we add analytics (Tier 3)
## Phase 2: Custom admin CSS
Replace DaisyUI with a lean, purpose-built admin stylesheet. The shop already does this — `app-shop.css` has no DaisyUI.
### 2.1 Design tokens
**New file:** `assets/css/admin-tokens.css`
A small set of CSS custom properties for the admin:
```css
:root {
/* Admin colour palette — neutral, professional */
--a-bg: #ffffff;
--a-bg-subtle: #f9fafb;
--a-bg-muted: #f3f4f6;
--a-border: #e5e7eb;
--a-border-subtle: #f0f0f0;
--a-text: #111827;
--a-text-secondary: #6b7280;
--a-text-muted: #9ca3af;
--a-accent: #4f46e5; /* indigo — distinct from shop accent */
--a-accent-hover: #4338ca;
--a-success: #059669;
--a-warning: #d97706;
--a-error: #dc2626;
/* Spacing scale (matches Tailwind) */
--a-space-1: 0.25rem;
--a-space-2: 0.5rem;
/* ... etc */
/* Typography */
--a-font: system-ui, -apple-system, sans-serif;
--a-font-mono: ui-monospace, monospace;
--a-radius: 0.375rem;
--a-radius-lg: 0.5rem;
}
```
Simple and fixed — no theming needed for admin. System font stack for speed.
**Estimate:** 30 mins
### 2.2 Admin component styles
**New file:** `assets/css/app-admin.css`
Replaces DaisyUI for admin pages. Structure:
```css
@import "tailwindcss" source(none);
@source "../css";
@source "../js";
@source "../../lib/simpleshop_theme_web/live/admin";
@source "../../lib/simpleshop_theme_web/live/user";
@source "../../lib/simpleshop_theme_web/components/admin_components.ex";
@source "../../lib/simpleshop_theme_web/components/core_components.ex";
@source "../../lib/simpleshop_theme_web/components/layouts/admin_root.html.heex";
@source "../../lib/simpleshop_theme_web/components/layouts/admin.html.heex";
@plugin "../vendor/heroicons";
/* NO daisyUI */
@import "./admin-tokens.css";
/* LiveView variants */
@custom-variant phx-click-loading (.phx-click-loading&, .phx-click-loading &);
@custom-variant phx-submit-loading (.phx-submit-loading&, .phx-submit-loading &);
@custom-variant phx-change-loading (.phx-change-loading&, .phx-change-loading &);
/* LiveView wrapper transparency */
[data-phx-session], [data-phx-teleported-src] { display: contents }
```
Component styles to build (minimal — just what core_components.ex needs):
| Component | Current DaisyUI classes | Custom replacement |
|-----------|----------------------|-------------------|
| Button | `btn btn-primary` | `.admin-btn`, `.admin-btn-primary` |
| Input | `input input-bordered` | `.admin-input` |
| Table | `table` | `.admin-table` |
| Card | `card` | `.admin-card` |
| Badge | `badge badge-success` | `.admin-badge`, `.admin-badge-success` |
| Alert/Flash | `alert alert-info` | `.admin-alert` |
| Navbar | `navbar`, `menu menu-horizontal` | Custom sidebar styles |
Each is ~5-15 lines of CSS. No need for DaisyUI's full component library.
**Estimate:** 3-4 hours
### 2.3 Migrate core_components.ex
**File:** `lib/simpleshop_theme_web/components/core_components.ex`
Replace DaisyUI class references with the new admin classes. This is a find-and-replace job:
- `btn btn-primary` → `admin-btn admin-btn-primary`
- `input input-bordered` → `admin-input`
- etc.
Or better: keep using Tailwind utilities where possible and only use the custom classes for complex components. Most of core_components can stay as Tailwind-only.
**Estimate:** 2 hours
### 2.4 Remove DaisyUI
Once all admin pages are migrated:
- Remove `@plugin "../vendor/daisyui"` from `app.css` (or delete `app.css` entirely if it's replaced by `app-admin.css`)
- Delete `vendor/daisyui.js` and `vendor/daisyui-theme.js`
- Update `admin_root.html.heex` to load `app-admin.css`
- Verify all admin pages still look correct
**Estimate:** 1 hour
## Task breakdown
### Phase 0 — Filesystem restructure (~2 hours, 1 session)
| # | Task | Estimate |
|---|------|----------|
| 0.1 | Rename admin LiveView directories and modules | 1 hour |
| 0.2 | Rename shop and user LiveView directories and modules | 30 mins |
| 0.3 | Update router, tests, aliases, embed_templates paths | 30 mins |
### Phase 1 — Layout and navigation (~10-12 hours, 4-5 sessions)
| # | Task | Estimate |
|---|------|----------|
| 1.1 | Admin shell component (`admin_components.ex`) | 2-3 hours |
| 1.2 | Admin root + child layout templates | 1 hour |
| 1.3 | Dashboard page (with setup wizard integration) | 2 hours |
| 1.4 | Consolidate settings page | 2-3 hours |
| 1.5 | Admin bar on shop pages | 1 hour |
| 1.6 | Theme editor back-to-admin link | 30 mins |
| 1.7 | Tests | 1.5 hours |
### Phase 2 — Custom CSS (~7-8 hours, 3 sessions)
| # | Task | Estimate |
|---|------|----------|
| 2.1 | Admin design tokens (`admin-tokens.css`) | 30 mins |
| 2.2 | Admin component styles (`app-admin.css`) | 3-4 hours |
| 2.3 | Migrate core_components.ex | 2 hours |
| 2.4 | Remove DaisyUI | 1 hour |
| 2.5 | Tests and visual QA | 1 hour |
**Total: ~20-22 hours across 8-9 sessions**
## Sequencing with other plans
```
Phase 0 (filesystem restructure) ← do first, one atomic commit
Phase 1.1-1.2 (admin shell) ← immediately after phase 0
Phase 1.3 (dashboard) ← depends on setup wizard plan (Setup.setup_status/0)
Phase 1.4 (settings) ← independent
Phase 1.5 (admin bar) ← independent
Setup wizard ← uses dashboard as its home (1.3)
Phase 2 (custom CSS) ← after phase 1 is stable
```
Phase 1 and the setup wizard plan should be done together — the dashboard IS the setup wizard for new installs.
## Open questions
- Should the admin sidebar be collapsible (icon-only mode)? Probably yes for laptop screens, but not essential for MVP.
- Dark mode for admin? The shop has theme-controlled colours, but admin could support system dark mode via `prefers-color-scheme`. Nice-to-have, not blocking.
- Should the admin be responsive at all? The shop owner is likely managing from a laptop, but phone access for checking orders on the go would be useful. Leaning towards responsive sidebar (collapses to hamburger on mobile).
- Admin font: system font stack (fastest) or match the shop's heading font? System font keeps admin feeling distinct and loads instantly.