TabloDetailHandler was always rendering the full page regardless of
HX-Request, causing HTMX to swap the entire layout (sidebar, header)
into #tab-content instead of just the overview fragment.
Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
- Add IsOwn bool to DiscussionMessageView; set via user.ID comparison in
DiscussionMessagesFromRows and DiscussionMessageFromRow
- Thread currentUserID through loadDiscussionTabData and all call sites
- discussion.templ: branch message-own vs message-other on message.IsOwn
- Restore .divide-y wrapper inside #discussion-messages (discussion-sse.js
depends on it to locate the message list before appending SSE events)
Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
Phase 16 executor removed the .task-drag-handle div from TaskCard
during restyling. Sortable.js handle: '.task-drag-handle' had no
matching element → dragging completely non-functional.
Restores the grip element with CSS-token styling (no Tailwind).
- Replace <ul>/<li> layout with @ui.Table using fileTableHead/fileTableBody helpers
- Add .overview-section-heading header with "Files" h3 and Upload file button
- Convert FileListRow outer element from <li> to <tr class="file-row-zone">
- Convert FileDeleteConfirmFragment outer element from <div> to <tr class="file-row-zone"> with <td colspan="4">
- Add Download and Delete @ui.IconButton in FileListRow actions column
- Replace FileListEmpty with @ui.EmptyState in FilesTabFragment and UploadErrorFragment
- Convert FileRowGone from <div> to <tr> for DOM consistency
- All 9 file handler tests pass; go build ./... exits 0
- tablos.templ TasksTabFragment: add etapes as 5th argument to @KanbanBoard
- handlers_tasks.go reorder (single): capture etapes from loadTasksTabData; pass to KanbanBoard
- handlers_tasks.go reorder (batch): capture etapes from loadTasksTabData; pass to KanbanBoard
- go build ./backend/... exits 0; go test ./backend/internal/web/... -count=1 passes
- Replace header with project-card-top layout: color avatar with first char, tablo-title-zone
- Replace Discussion link/Invite button/Delete button with @ui.IconButton and @ui.Button using design token variants
- Add inline tablo-delete-zone with trash @ui.IconButton (does not use TabloDeleteButtonFragment)
- Replace metadata row hardcoded flex/hex classes with tablo-metadata-row, @ui.Badge(BadgeVariantPrimary), project-progress-track/bar
- Replace 5 tab nav <a> elements from long inline Tailwind hex classes to tab-nav-item / tab-nav-item is-active
- Wrap tab nav in class="tab-nav" replacing raw flex container
- Move @TabloDescDisplay call from persistent header into TabloOverviewTabFragment
- Remove @EtapeStrip call from TasksTabFragment (D-E01; KanbanBoard call site update deferred to Plan 03)
- Remove last #804EEC hex value from TabloTitleDisplay hover class
- Regenerated tablos_templ.go via templ generate
- insert case "download" with arrow-down SVG (path + polyline + line) before default case
- insert case "chat" with speech-bubble SVG (path) before default case
- icon_button_templ.go regenerated via templ generate (gitignored, regenerated at build time)
Merge conflict resolution had taken the old template signatures (pre-AppLayout).
Restored HEAD~1 signatures then applied the header/tab-nav restyle:
- Title row: md:text-3xl font-bold, Discussion + Invite action buttons
- Metadata row: created date, status badge, 0% progress bar
- Sticky purple-accent tab bar (Overview, Tasks, Files, Discussion, Events)
- All HTMX wiring and AppLayout wrapping preserved
- Replace plain back-link + title with structured header: title row + metadata row
- Title uses larger md:text-3xl font-bold style with inline-edit preserved
- Add Discussion and Invite action buttons in header (purple brand colors)
- Add metadata row: created date, hardcoded En cours status badge, 0% progress bar
- Replace plain slate tab nav with purple-accent tab bar (icon + label per tab)
- Tab active state: text-[#804EEC] border-[#804EEC]; inactive: text-[#667085]
- Tab bar is sticky (top-0 z-40) with horizontal scroll and hidden scrollbar
- Keep all HTMX attributes, hx-push-url, hx-target="#tab-content" logic unchanged
- tablo-title-zone, tablo-desc-zone, tablo-delete-zone elements retained
- Updated TablosDashboard signature to accept activePath and tablos for AppLayout
- Replaced old @Layout call with @AppLayout (sidebar-based shell)
- Added TabloProjectCard component with project-card grid, colored avatar, tablo-title-zone, edit/delete icon buttons
- Replaced TablosEmptyState raw HTML with @ui.EmptyState component (ui-empty-state class)
- Updated TabloDetailPage signature with activePath and sidebarTablos params
- Updated TabloNotFoundPage signature with activePath and sidebarTablos params
- Both detail pages switch from @Layout to @AppLayout
- Create backend/internal/web/ui/app.css with dashboard shell, sidebar, and project-card CSS ported verbatim from go-backend
- All color values use var(--...) design tokens — no hex colors
- Add @import "./internal/web/ui/app.css" to backend/tailwind.input.css
- TestTablosDashboard_Sidebar: asserts dashboard-sidebar + sidebar-nav-shell in GET / body
- TestTablosDashboard_ProjectCards: asserts project-card in GET / body with a pre-inserted tablo
- TestTablosDashboard_EmptyState: asserts ui-empty-state in GET / body with zero tablos
- All three skip without TEST_DATABASE_URL; compile cleanly; existing TestTablos* tests unaffected
Add css to air's include_ext so edits to internal/web/ui/*.css trigger a
rebuild. Add Tailwind build step to the air cmd so static/tailwind.css is
always up to date on reload. static/ remains excluded so the generated
output file doesn't cause a loop.
Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
width: auto on a block element still fills the parent. Use width: max-content
so the button wraps its icon + label + padding only. Remove flex-grow: 1 on
the label span so it doesn't stretch within the now-natural-width button.
Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
Google's gsi-material-button uses width: auto, not 100%. Replace width: 100%
/ max-width: 400px with width: auto + margin: 0 auto so the button sizes to
its content (icon + label + padding) and stays centered in the card.
Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
Per Google's branding guidelines, the gsi-material-button requires Roboto
Medium. Add Google Fonts preconnect + stylesheet link to AuthLayout head.
Also add display:block + 100% dimensions to the SVG inside the icon
container to prevent inline baseline gaps.
Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
- Replace Layout+Card pattern with AuthLayout("Create your account", csrfToken)
- Wire GoogleButton and AuthDivider into SignupPage body
- Replace raw <input> elements with @ui.FormField/@ui.Input design system components
- Password placeholder "12 characters minimum", autocomplete="new-password"
- Add signup-copy nav link ("Already have an account? Sign in") pointing to /login
- Preserve HTMX swap: hx-post="/signup" hx-target="#signup-form" hx-swap="outerHTML"
- Remove signupCardBody helper
- Replace Layout+Card pattern with AuthLayout("Sign in to Xtablo", csrfToken)
- Wire GoogleButton and AuthDivider into LoginPage body
- Replace raw <input> elements with @ui.FormField/@ui.Input design system components
- Add signup-copy nav link ("Don't have an account? Sign up")
- Preserve HTMX swap: hx-post="/login" hx-target="#login-form" hx-swap="outerHTML"
- Remove loginCardBody, AuthProviderButtonsBlock, AuthProviderButtonControl helpers
- Update test assertions for new GoogleButton labels ("Sign in with Google" / disabled attr)
- auth_components.templ: AnimatedBackground (35 elements, /static/logo_dark.png, no light/dark pairs), GoogleButton (a/button variant, English label 'Sign in with Google'), AuthDivider ('or' divider)
- auth_layout.templ: standalone HTML shell with .login-screen, @AnimatedBackground(), .card-wrap/.card-glow/.auth-card-shell, htmx.min.js only (no sortable/sse scripts)
- No auth.User param on AuthLayout (auth pages always unauthenticated)
- just generate exits 0, all Go tests pass
- Copy logo_dark.png and logo_white.png from go-backend/static into backend/static
- Replace minimal 62-line auth.css with 828-line extraction from go-backend/static/styles.css
- Sections: login-screen shell, animated background (bg-01..35, size/opacity utilities), card wrapper, card internals, gsi-material-button, legacy auth-provider controls, 66 keyframe definitions, animate-* utility classes
- Added display:block and text-decoration:none to .gsi-material-button for the anchor variant
- Does NOT include .app-shell or .dashboard-shell rules
- Add backend/internal/web/ui/catalog/catalog.templ: single-page layout
with 240px sidebar nav (11 anchor links) and 11 component sections with
section headings matching DS-XX requirement IDs
- Add backend/internal/web/ui/catalog/examples.go: Example struct + typed
example functions for all 11 component types (badge/button/card/empty-state/
form-field/icon-button/input/modal/select/table/textarea); modal renders
panel-only (no backdrop wrapper, Pitfall 7)
- Add backend/internal/web/catalog_route_catalog.go (//go:build catalog):
RegisterCatalogRoute mounts GET /ui-catalog via catalogPageHandler()
- Add backend/internal/web/catalog_route_stub.go (//go:build !catalog):
no-op RegisterCatalogRoute for production builds
- Wire RegisterCatalogRoute(r) unconditionally in NewRouter after protected routes
- Add justfile catalog target: just generate + go run -tags catalog ./cmd/web
- go build ./... and go build -tags catalog ./... both pass; go test ./... green
- select_helpers.go: 9 helper functions verbatim from go-backend
- select.templ: SelectProps/SelectOption structs, inline JS with __uiSelectInitAll
and htmx:afterSwap re-init listener (Pitfall 6)
- select.css: .ui-select-control (min-height 44px), .ui-select-menu (max-height 16rem)
- form_field.templ: FormFieldProps with Label/For/Field/Error/Hint; conditional regions
- form-field.css: .ui-form-field/.ui-form-label/.ui-form-hint/.ui-form-error
- tailwind.input.css: add @import for select.css and form-field.css
- All 6 TestSelect/TestFormField tests passing; full go test ./... is green
- TestSelect_RendersControl: expects ui-select-control in output
- TestSelect_HasInlineScript: expects __uiSelectInitAll in script block
- TestSelect_HasHtmxListener: expects htmx:afterSwap re-init listener
- TestFormField_RendersLabel: expects ui-form-field and ui-form-label
- TestFormField_RendersError: expects ui-form-error when Error is set
- TestFormField_NoErrorWhenEmpty: expects no ui-form-error when Error is empty
- input.css: .ui-input with min-height 44px, border-radius 0.75rem, focus ring
- input.templ: InputProps with ID/Name/Type/Placeholder/Value/Disabled/Required/Attrs
- textarea.css: .ui-textarea with min-height 7rem, resize vertical, focus ring
- textarea.templ: TextareaProps with ID/Name/Value/Placeholder/Rows/Disabled/Required/Attrs
- tailwind.input.css: add @import for input.css and textarea.css
- All 7 TestInput/TestTextarea tests passing
- TestInput_DefaultType: expects type="text" for empty Type
- TestInput_EmailType: expects type="email" for explicit Type
- TestInput_IDFallback: expects id from Name when no ID set
- TestInput_ExplicitID: expects explicit ID to take precedence
- TestTextarea_RendersClass: expects class="ui-textarea"
- TestTextarea_DefaultRows: expects rows="4" for zero Rows
- TestTextarea_ExplicitRows: expects rows="6" for explicit Rows
- button.css: replaced with go-backend multi-class selector version + ghost variant rules
- badge.css: replaced with go-backend pill-shape version + primary variant
- card.css: replaced with go-backend token-based header/body/footer version
- card.templ: migrated from children passthrough to typed CardProps{Header/Body/Footer}
- ui_test.go: rewrote TestCard_RendersChildren -> TestCard_RendersTypedRegions; added TestBadge_PrimaryVariant; added textComponent helper + io import
- auth_login.templ, auth_signup.templ: migrated Card usage to typed CardProps API
- tablos.templ: migrated TabloCard to typed CardProps API with extracted tabloCardBody
- planning.templ, tasks.templ, events.templ, etapes.templ: all compound button class strings updated to multi-class pattern
- go test ./... passes (all packages green)
- just generate succeeds
- Add ButtonVariantGhost to ButtonVariant enum and NormalizedButtonVariant switch
- Add BadgeVariantPrimary to BadgeVariant enum and NormalizedBadgeVariant switch
- Add IconButtonVariant type (Neutral/Warning/Success/Danger) with normalizer
- Add IconButtonTone type (Solid/Ghost) with normalizer
- Add SpacingStep type (XS/SM/MD/LG/XL) with normalizer
- Add IconButtonClass(), SpaceXClass(), SpaceYClass() exported class functions
- Add buttonType(), inputType(), inputID(), textareaRows() helper functions to helpers.go
- Fix TestButtonClass_GhostVariant assertion to match compound class format preserved for Plan 02
