Revision 8 of 16
Reverses the styling call: the reference app now defines behavior and copy only, and every screen is restyled with Postrboard instead of Bulma and Font Awesome.
+23 −36 lines of text vs revision 7 (this site's diff)
| Old | New | Change | Line |
|---|---|---|---|
| @@ -2,9 +2,9 @@ | |||
| 2 | 2 | ||
| 3 | 3 | Build the complete application in this repository. Work autonomously from start to finish and stop only when the app is complete. | |
| 4 | 4 | ||
| 5 | − | If a minor detail is not specified, choose a reasonable solution and document it. Replicate the observable user experience of the reference app exactly: layouts, visible copy (button labels, errors, headings, tooltips, states), interactions, and the overall visual language. Do not copy the reference app's implementation or framework. | |
| 5 | + | If a minor detail is not specified, choose a reasonable solution and document it. Replicate the observable user experience of the reference app exactly: page structure, visible copy (button labels, errors, headings, tooltips, states), and interactions (what happens, in what order, on every action). Do **not** replicate the reference app's visual design, CSS framework, icon set, or color palette — restyle every screen using this repository's own Postrboard design system instead. Do not copy the reference app's implementation or framework. | |
| 6 | 6 | ||
| 7 | − | Reference app (source of truth for UX): `the-urlist/blazor-static-web-apps` at https://github.com/the-urlist/blazor-static-web-apps — see `Client/Pages/*.razor`, `Client/Shared/*.razor`, and `Client/wwwroot/css/app.css` for exact copy, layout, and design tokens. A live demo (if available) is linked from that repository's README. | |
| 7 | + | Reference app (source of truth for UX behavior and copy only, not visuals): `the-urlist/blazor-static-web-apps` at https://github.com/the-urlist/blazor-static-web-apps — see `Client/Pages/*.razor` and `Client/Shared/*.razor` for exact copy, layout structure, and interaction behavior. Ignore `Client/wwwroot/css/app.css` and its Bulma/Font Awesome styling entirely. A live demo (if available) is linked from that repository's README. | |
| 8 | 8 | ||
| 9 | 9 | ## Technical specification and checklist | |
| 10 | 10 | ||
| @@ -29,22 +29,9 @@ | |||
| 29 | 29 | ||
| 30 | 30 | Use the Node.js runtime, not Edge, for SQLite, sessions, file access, and metadata fetching. | |
| 31 | 31 | ||
| 32 | − | Design system: replicate the reference app's visual language, which is **Bulma CSS** (0.9.x) with **Font Awesome 5.6.3** icons and the **Roboto** font at an 18px base size. Use these exact design tokens: | |
| 33 | − | ||
| 34 | − | - Primary: `#20ae96` (teal). Danger/error: `#d9255e`. | |
| 35 | − | - Light theme: text `#222c38`, main background `#fff`, section background `#f9fafc`, card shadow `0 50px 40px -40px #e8e8e8`. | |
| 36 | − | - Dark theme: text `#fff`, main background `#14161a`, section background `#353638`, card shadow `0 50px 40px -40px #292727`. | |
| 37 | − | - Cards: 4px border radius; inputs/textareas: 3.5rem height, 1px `#979797` border, 4px radius, `outline: none`. | |
| 38 | − | - Invalid input state: 4px `--danger` border with a ~0.6s horizontal shake animation, plus the field's error text below it. | |
| 39 | − | ||
| 40 | − | Use these image assets (recreate equivalent SVG/PNG files under a `public/images/` directory using the same filenames): | |
| 32 | + | Design system: use this repository's **Postrboard** design system for every screen — invoke and follow its skill/guidelines (native components first, restrained and honest content, no generic AI design) rather than the reference app's Bulma/Font Awesome look. Do not port Bulma classes, Font Awesome icons, the Roboto font, or the reference app's color tokens, shadows, or animations. Where the reference app conveys state or affordance visually (e.g., an invalid-input highlight, a disabled button, a loading skeleton, a toast/modal), reproduce that same *behavior* — something is visibly invalid, disabled, loading, or confirmed — using Postrboard's own components and idioms, not its specific CSS. | |
| 41 | 33 | ||
| 42 | − | - `logo.svg` (navbar brand, 100×60, light theme) and `logo-dark.svg` (navbar brand, dark theme) | |
| 43 | − | - `banner-logo-large.svg` (home hero, 500×500) | |
| 44 | − | - `burger.svg` (mobile menu toggle, ~60×60) | |
| 45 | − | - `no-image.png` (link image placeholder) | |
| 46 | − | - `bg.png` (small dot texture for My Lists tiles) | |
| 47 | − | - `urly.png` (not-found mascot, 500×500, a sad green fuzzy character) | |
| 34 | + | Icons, illustrations, and images: recreate each reference asset's *purpose* (brand mark, mobile menu affordance, hero illustration, image placeholder, tile texture, not-found mascot) as a Postrboard-native equivalent instead of copying the source SVG/PNG files or filenames. | |
| 48 | 35 | ||
| 49 | 36 | ## Product | |
| 50 | 37 | ||
| @@ -73,14 +60,14 @@ | |||
| 73 | 60 | ||
| 74 | 61 | ### Navigation bar | |
| 75 | 62 | ||
| 76 | − | Bulma navbar. Left: logo (alt "urlist logo"); on mobile, a hamburger button (`burger.svg`) that toggles the menu. Menu items in this order, each an icon plus label: | |
| 63 | + | A Postrboard-styled navbar. Left: brand/logo (alt "urlist logo"); on mobile, a menu toggle that expands the menu. Menu items in this order, each an icon plus label (use Postrboard's own icon set, matching each icon's meaning below, not a specific glyph): | |
| 77 | 64 | ||
| 78 | − | 1. `New` — icon `fas fa-plus-circle` | |
| 79 | − | 2. `My Lists` — icon `fas fa-user-circle` — **only when signed in** | |
| 80 | − | 3. `About` — external link `https://aka.ms/theurlist`, icon `fas fa-question-circle` | |
| 81 | − | 4. `Terms` — link to `/s/terms`, icon `fas fa-info` | |
| 65 | + | 1. `New` — a "create/add" icon | |
| 66 | + | 2. `My Lists` — a "user/account" icon — **only when signed in** | |
| 67 | + | 3. `About` — external link `https://aka.ms/theurlist`, a "help/question" icon | |
| 68 | + | 4. `Terms` — link to `/s/terms`, an "info" icon | |
| 82 | 69 | ||
| 83 | − | Right: theme dropdown, then either the Login item (icon `fas fa-sign-in-alt`, label "Login", opens the login modal) or the signed-in user's avatar and name with a dropdown showing "Signed in with {provider}" and a "Log Out" item (icon `fas fa-sign-out-alt`). | |
| 70 | + | Right: theme dropdown, then either the Login item (a "sign in" icon, label "Login", opens the login modal) or the signed-in user's avatar and name with a dropdown showing "Signed in with {provider}" and a "Log Out" item (a "sign out" icon). | |
| 84 | 71 | ||
| 85 | 72 | Clicking `New` while on `/s/new` with a non-empty draft must pop a confirm modal: title **"Clear this list?"**, prompt **"This will reset the current list and you will lose all changes. Are you sure you want to do that?"** with OK/Cancel. On OK, reset the draft and go to `/s/new`. Otherwise, clicking `New` resets the draft and goes to `/s/new`. | |
| 86 | 73 | ||
| @@ -94,7 +81,7 @@ | |||
| 94 | 81 | 1. H1: **Group links, Save & Share them with the world** — the single words "Group", "Save", and "Share" rendered in the primary teal color. | |
| 95 | 82 | 2. Paragraph: **Add links to a list and share it with one simple URL.** | |
| 96 | 83 | 3. Paragraph: **Create a list anonymously or login to save, manage, and edit your lists.** | |
| 97 | − | - Right column: `banner-logo-large.svg` (lazy loaded, 500×500). | |
| 84 | + | - Right column: a Postrboard-native hero illustration (lazy loaded, roughly 500×500), in place of the reference app's `banner-logo-large.svg`. | |
| 98 | 85 | ||
| 99 | 86 | Bottom section on a distinct background: a centered, bold, primary-colored H2 **Get Started**, followed by the first-link input widget. | |
| 100 | 87 | ||
| @@ -123,7 +110,7 @@ | |||
| 123 | 110 | ||
| 124 | 111 | When the list has links, show a "Links" heading with a right-aligned hint **"Drag links to re-order"**, then the linked rows. | |
| 125 | 112 | ||
| 126 | − | Each row: a drag grip (`fas fa-grip-vertical`) at the far left; a 64px image (24px on mobile) or the `no-image.png` placeholder; a **Title** text input (placeholder "Enter a title", bold text); a **Description** textarea (placeholder "Enter a description"); a **URL** text input showing the destination (editable); and a delete button (`fas fa-times`) that removes the row immediately with **no confirmation**. | |
| 113 | + | Each row: a drag grip icon at the far left; a 64px image (24px on mobile) or a Postrboard-native placeholder in its place; a **Title** text input (placeholder "Enter a title", bold text); a **Description** textarea (placeholder "Enter a description"); a **URL** text input showing the destination (editable); and a delete icon button that removes the row immediately with **no confirmation**. | |
| 127 | 114 | ||
| 128 | 115 | While a link's metadata fetch is in flight, show a small progress bar overlay on that row; when it settles the progress bar disappears. There are no per-link status badges or error messages: failed metadata simply leaves the fields as they are (or empty) and clears the progress bar. | |
| 129 | 116 | ||
| @@ -153,11 +140,11 @@ | |||
| 153 | 140 | ||
| 154 | 141 | ## Login and ownership | |
| 155 | 142 | ||
| 156 | − | Show a login modal styled like the reference app: a heading "Sign in to" with the logo, then three full-width colored provider buttons, in this order, each with its provider icon: | |
| 143 | + | Show a login modal following the reference app's structure: a heading "Sign in to" with the logo, then three full-width provider buttons styled with Postrboard's components, in this order, each with its provider's icon: | |
| 157 | 144 | ||
| 158 | − | 1. **"with Twitter/X"** (`fab fa-twitter`) | |
| 159 | − | 2. **"with GitHub"** (`fab fa-github`) | |
| 160 | − | 3. **"with Google"** (`fab fa-google`) | |
| 145 | + | 1. **"with Twitter/X"** | |
| 146 | + | 2. **"with GitHub"** | |
| 147 | + | 3. **"with Google"** | |
| 161 | 148 | ||
| 162 | 149 | This app is local and must not call any real identity provider. Each button signs in as a stable fictional user stored in SQLite; map each provider button to a distinct mock identity (at least two distinct users total) and render that user's name and avatar in the navbar. Ownership is the (stable user ID, provider) pair, not the display name. | |
| 163 | 150 | ||
| @@ -170,7 +157,7 @@ | |||
| 170 | 157 | Login required. H2 (large, medium weight, primary color): **"My Lists"**. Then a responsive grid of tiles: 1 column on mobile, 2 on tablet, 3 on desktop, 4 on widescreen. | |
| 171 | 158 | ||
| 172 | 159 | - First tile: a dashed placeholder tile containing a large **+** and the text **"Create new list"**; clicking it starts a fresh draft and goes to `/s/new`. | |
| 173 | − | - Per-list tile: the `bg.png` dot texture in the card; a primary-colored tag reading **"{N} Links"** (e.g. "4 Links"); the vanity URL as the title; the description below it (omitted when empty). The whole tile is clickable and loads that list into the editor state, then goes to `/s/edit`. | |
| 160 | + | - Per-list tile: a Postrboard-native subtle texture/background in the card (in place of the reference app's `bg.png` dots); a primary-colored tag reading **"{N} Links"** (e.g. "4 Links"); the vanity URL as the title; the description below it (omitted when empty). The whole tile is clickable and loads that list into the editor state, then goes to `/s/edit`. | |
| 174 | 161 | - While loading: 3 skeleton tiles. If the request fails, show an empty grid without error text. | |
| 175 | 162 | ||
| 176 | 163 | There is **no Deleted section and no Restore action**. | |
| @@ -187,19 +174,19 @@ | |||
| 187 | 174 | ||
| 188 | 175 | - Heading: the list's **description** (large, primary color). No fallback needed. | |
| 189 | 176 | - Share row (left, a connected group of icon buttons, all opening in a new tab, URL-encoded): | |
| 190 | − | - X/Twitter: `https://twitter.com/intent/tweet?text={description} https://theurlist.com/{vanity}` — icon `fab fa-twitter` | |
| 191 | − | - Facebook: `https://www.facebook.com/sharer/sharer.php?u=https://theurlist.com/{vanity}` — icon `fab fa-facebook-f` | |
| 192 | − | - LinkedIn: `https://www.linkedin.com/shareArticle?mini=true&summary={description}&url=https://theurlist.com/{vanity}` — icon `fab fa-linkedin-in` | |
| 193 | − | - View toggle (right, a connected group of two icon buttons with an accessible selected state): **"View as List"** (`fas fa-list-ul`) and **"View as QR Code"** (`fas fa-qrcode`). | |
| 177 | + | - X/Twitter: `https://twitter.com/intent/tweet?text={description} https://theurlist.com/{vanity}` | |
| 178 | + | - Facebook: `https://www.facebook.com/sharer/sharer.php?u=https://theurlist.com/{vanity}` | |
| 179 | + | - LinkedIn: `https://www.linkedin.com/shareArticle?mini=true&summary={description}&url=https://theurlist.com/{vanity}` | |
| 180 | + | - View toggle (right, a connected group of two icon buttons with an accessible selected state): **"View as List"** and **"View as QR Code"**. | |
| 194 | 181 | - QR view: a centered, scannable QR code SVG of the URL `https://theurlist.com/{vanity}` (4x module scale, colors `#121212` on `#F9FAFC`, error correction medium). | |
| 195 | 182 | - List view: link cards in stored order. Each card is itself a link opening the destination in a new tab (`rel="noopener noreferrer"`), showing the 64px image or placeholder, the bold title (fall back to the destination URL), the description (omitted when empty), and the plain destination URL. | |
| 196 | 183 | - Below the cards, a link **"Report this list"** that opens a mailto to `support@theurlist.com` with subject "LinkBundle Flagged" and the list URL in the body. | |
| 197 | 184 | ||
| 198 | − | When the alias does not resolve to an active list, show the not-found state instead: the `urly.png` mascot (500×500, alt "Sad green fuzzy"), H2 **"We couldn't find that Urlist"**, and H3 **"But don't be sad! That means {vanity} is still available."** where the alias is a link. Clicking that alias starts a fresh draft pre-filled with it and goes to `/s/new`. There is no tombstone or "deleted" state. | |
| 185 | + | When the alias does not resolve to an active list, show the not-found state instead: a Postrboard-native "not found" illustration or icon (in place of the reference app's mascot image), H2 **"We couldn't find that Urlist"**, and H3 **"But don't be sad! That means {vanity} is still available."** where the alias is a link. Clicking that alias starts a fresh draft pre-filled with it and goes to `/s/new`. There is no tombstone or "deleted" state. | |
| 199 | 186 | ||
| 200 | 187 | ## Theme, responsive UI, and accessibility | |
| 201 | 188 | ||
| 202 | − | Provide a theme control in the navbar: a hoverable dropdown whose button shows the currently active theme's icon, with items (icon + label, checkmark on the active one): **Light** (`fas fa-sun`), **Dark** (`fas fa-moon`), **System** (`fas fa-desktop`). Persist the choice (e.g. `localStorage["preferredTheme"]`, default `"system"`), apply it via a `data-theme` attribute on `<html>`, and set it with an inline script before first paint to avoid a wrong-theme flash. System follows the OS preference. The dark theme swaps the navbar logo to `logo-dark.svg`. | |
| 189 | + | Provide a theme control in the navbar: a hoverable dropdown whose button shows the currently active theme's icon, with items (icon + label, checkmark on the active one): **Light**, **Dark**, **System**. Persist the choice (e.g. `localStorage["preferredTheme"]`, default `"system"`), apply it via a `data-theme` attribute on `<html>`, and set it with an inline script before first paint to avoid a wrong-theme flash. System follows the OS preference. Use Postrboard's own light/dark logo or brand-mark variants (not the reference app's `logo-dark.svg`). | |
| 203 | 190 | ||
| 204 | 191 | Support current Chromium from desktop down to 320 CSS pixels with no page-level horizontal scrolling; the editor, modals, and public page must remain usable. | |
| 205 | 192 | ||