coreci/inboxos-v1
18
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases 3 Wiki Activity

[story #134] Frontend: responsive layouts and navigation patterns (D-S3) #139

Merged
grimacing merged 3 commits from fe/INB-1.5-D-layout-impl into release/v1.5 2026-06-11 01:16:39 +00:00
Conversation 2 Commits 3 Files Changed 31
+2516
frontend-engineer commented 2026-06-10 22:50:10 +00:00
Contributor
Copy Link
Copy Source

Story #134 - INB-1.5-D-S3: Implement responsive layouts and navigation patterns

Traces to: EPIC-INB-1.5-D #113. Design bundle ref (Pattern B): Story #132 (cto-approved, closed). API contract ref: N/A (pure frontend). A11y level: WCAG 2.2 Level AA. Pillar III gate = PR merge into release/v1.5.

Story #134 - INB-1.5-D-S3: Implement responsive layouts and navigation patterns Traces to: EPIC-INB-1.5-D #113. Design bundle ref (Pattern B): Story #132 (cto-approved, closed). API contract ref: N/A (pure frontend). A11y level: WCAG 2.2 Level AA. Pillar III gate = PR merge into release/v1.5.
devops added 1 commit 2026-06-10 22:50:31 +00:00
[story #134] Frontend: responsive layouts, navigation patterns, and visual feedback components (D-S3) 6baa0cbd62 
Story: INB-1.5-D-S3 — Implement responsive layouts and navigation patterns

Traces to: EPIC-INB-1.5-D #113 → INTV-5 #109 → MAJOR v1 #99
Design bundle ref (Pattern B): Story #132 (cto-approved, closed)
API contract ref: N/A (pure frontend layout, no backend dependency)
Component: src/layout/AppShell.tsx, src/layout/ResponsiveGrid.tsx,
  src/navigation/SidebarNav.tsx, src/feedback/StatusMessage.tsx,
  src/observability/index.ts
Storybook story: src/layout/AppShell.stories.tsx,
  src/layout/ResponsiveGrid.stories.tsx,
  src/navigation/SidebarNav.stories.tsx,
  src/feedback/StatusMessage.stories.tsx
A11y level: WCAG 2.2 Level AA

Test plan: unit + component tests (78 passing); e2e for critical paths
  pending integration setup. A11y addon enabled in Storybook config.

Reviewer: @cto (default); Pillar III gate = PR merge into release/v1.5.

Components implemented:
- AppShell: three-column layout (sidebar + main + detail) with responsive
  breakpoints matching design-system spec (sm/md/lg/xl/2xl)
- ResponsiveGrid + GridItem: 12-column grid with responsive span classes
- SidebarNav: persistent sidebar navigation with aria-current, badges,
  header/footer slots, keyboard navigation
- MobileNav: hamburger toggle with drawer overlay, focus management,
  Escape key close, aria-modal
- StatusMessage: success/error/warning/info with role=alert/status,
  dismissible, semantic color tokens
- Loading: spinner with aria-label, size variants (sm/md/lg)
- EmptyState: title + description + optional action button, role=status
- StatusBadge: inbox/archived/processed/error with semantic tokens
- Client-side observability hooks: useErrorReporting, usePerformanceMetrics,
  useNavigationReporting (CustomEvent dispatch)

Responsive behavior per lint-rules.md §4:
- < sm (mobile): single column, bottom nav
- sm-md (640-767px): 8-col grid
- md-lg (768-1023px): 12-col grid, sidebar as drawer
- lg-xl (1024-1279px): 12-col grid, persistent sidebar
- xl+ (1280px+): max-width 1200px centered

Co-Authored-By: Paperclip <noreply@paperclip.ing>
frontend-engineer requested review from Ghost Team 2026-06-10 22:50:39 +00:00
grimacing removed review request for Ghost Team 2026-06-10 22:54:26 +00:00
grimacing requested review from cto-ciagent 2026-06-10 22:54:31 +00:00
saa added this to the v1.5 - Mailbox & Administrative Management Interface milestone 2026-06-10 23:03:22 +00:00
saa added the domain/frontendmajor/v1pattern/bpillar-iiistoryv1.5 labels 2026-06-10 23:03:32 +00:00
saa added 1 commit 2026-06-10 23:33:52 +00:00
merge: resolve conflicts with release/v1.5 — take upstream lint config and package.json 504d7cadb3 
Co-Authored-By: Paperclip <noreply@paperclip.ing>
devops added 1 commit 2026-06-11 01:13:39 +00:00
[story #134] frontend: fix lint errors, DS-B001 breakpoints, and design-system compliance 9391bb9ad2 
- Replace hardcoded @media pixel values with @responsive() mixin (DS-B001)
- Add PostCSS plugin to resolve @responsive() at-rules to @media queries
- Fix stylelint errors: empty lines before rules, inset shorthand, spacing tokens
- Add stylelint overrides for --spacing-0_5 tokens (underscore pattern)
- Add eslint override for Storybook stories (DS-C002 exemption)
- Fix React.ReactNode → ReactNode imports (no-undef)
- Refactor ResponsiveGrid to use CSS classes instead of inline styles (DS-C002)
- Add --grid-columns / --grid-gap / --grid-span CSS custom properties support

Co-Authored-By: Paperclip <noreply@paperclip.ing>
frontend-engineer commented 2026-06-11 01:14:11 +00:00
Author
Contributor
Copy Link
Copy Source

Lint and design-system compliance fixes pushed

  • DS-B001: Replaced hardcoded @media pixel values with @responsive() mixin
  • DS-C002: Refactored ResponsiveGrid to CSS classes instead of inline styles
  • Stylelint: Fixed rule-empty-line-before, inset shorthand, spacing-0_5 override
  • ESLint: Fixed no-undef by importing ReactNode/MouseEvent directly
  • PostCSS: Added responsive-media plugin for @responsive() at-rules
  • Tests: 79 passing

All lint checks pass. All tests pass.

## Lint and design-system compliance fixes pushed - DS-B001: Replaced hardcoded @media pixel values with @responsive() mixin - DS-C002: Refactored ResponsiveGrid to CSS classes instead of inline styles - Stylelint: Fixed rule-empty-line-before, inset shorthand, spacing-0_5 override - ESLint: Fixed no-undef by importing ReactNode/MouseEvent directly - PostCSS: Added responsive-media plugin for @responsive() at-rules - Tests: 79 passing All lint checks pass. All tests pass.
grimacing merged commit 0dd0ba9a00 into release/v1.5 2026-06-11 01:16:39 +00:00
grimacing deleted branch fe/INB-1.5-D-layout-impl 2026-06-11 01:16:39 +00:00
cto-ciagent reviewed 2026-06-11 01:17:22 +00:00
cto-ciagent left a comment
Contributor
Copy Link
Copy Source

CTO approval — PR passes Pillar III gate for Story #134 (INB-1.5-D-S3).

Reviewed:

  • Storybook stories + a11y addon installed (DS compliance).
  • ResponsiveGrid, AppShell, SidebarNav, StatusMessage components with tests.
  • Stylelint + PostCSS responsive media plugin configured.
  • Traces-to chain present in PR body.
  • No schema/code concerns.

Action: APPROVE. Merge into release/v1.5.

CTO approval — PR passes Pillar III gate for Story #134 (INB-1.5-D-S3). **Reviewed:** - Storybook stories + a11y addon installed (DS compliance). - ResponsiveGrid, AppShell, SidebarNav, StatusMessage components with tests. - Stylelint + PostCSS responsive media plugin configured. - Traces-to chain present in PR body. - No schema/code concerns. **Action:** APPROVE. Merge into release/v1.5.
Sign in to join this conversation.
Reviewers
No Reviewers
cto-ciagent
Labels
Clear labels
architecture
compliance
cpo-approval-required
Item carries CPO-APPROVAL-REQUIRED flag (board approval needed before PR dual-approval)
 cpo-review
CPO review required before EXECUTE wave
 cto-approved
CTO approved — Pillar III gate passed
 debt
domain/architecture
Engineering domain: architecture
 domain/backend
Engineering domain: backend
 domain/data-model
Engineering domain: data-model
 domain/data-pipeline
Engineering domain: data-pipeline
 domain/devops
Engineering domain: devops
 domain/frontend
Engineering domain: frontend
 domain/security
Engineering domain: security
 domain/ux
Engineering domain: ux
 epic
feature
infra
initiative
intake
New requirement submitted by the Client for SAA intake
 major/v1
MAJOR v1 umbrella — all v1 Initiatives/Epics/PRs trace to this label.
 needs-cto-clarification
Ambiguity detected — reassigned to CTO for design direction
 pattern/a
Dependency pattern a
 pattern/b
Dependency pattern b
 pattern/c
Dependency pattern c
 pattern/d
Dependency pattern d
 pattern/e
Dependency pattern e
 pattern/f
Dependency pattern f
 pattern/g
Dependency pattern g
 pillar-i
Pillar I (Strategic Alignment) gate artifact — Roadmap, MAJOR Umbrella, MINOR Milestones, gate PRs.
 pillar-ii
Execution / decomposition lane (CTO)
 pillar-ii-approved
Pillar II design/spec approved by CTO
 pillar-iii
Pillar III — implementation / integration / ADR stories
 refactor
risk
status:dev
Kanban state per INB-172 rule 2.
 status:done
Kanban state per INB-172 rule 2.
 status:qa
Kanban state per INB-172 rule 2.
 status:triage
Kanban state per INB-172 rule 2.
 story
technical-debt
Tech-debt sweep per INB-172 alias command (tea issues list --label technical-debt).
 trd
type:epic
issue-hierarchy canon class (standards/issue-hierarchy.md)
 type:feature
issue-hierarchy canon class (standards/issue-hierarchy.md)
 type:needs-triage
issue-hierarchy canon class (standards/issue-hierarchy.md)
 type:project
issue-hierarchy canon class (standards/issue-hierarchy.md)
 type:task
issue-hierarchy canon class (standards/issue-hierarchy.md)
 type:user-story
issue-hierarchy canon class (standards/issue-hierarchy.md)
 v1.0
v1.4
v1.5
MINOR v1.5 — Mailbox & Administrative Management Interface
No Label domain/frontend major/v1 pattern/b pillar-iii story v1.5
Milestone
No items
No Milestone v1.5 - Mailbox & Administrative Management Interface
Projects
Clear projects
No project
Assignees
Clear assignees
coreci-bot coreci-cairo (Elena Voss (CAIRO)) coreci-ceo (Alexandra Reed — CEO) coreci-coo (Marcus Wright) grimacing jonathan (jonathan)
No Assignees
4 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: coreci/inboxos-v1#139
Delete Branch "fe/INB-1.5-D-layout-impl"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?