feat: shell UX overhaul — page-scoped search, redesign & mobile #127

Merged

john merged 9 commits from feat/shell-ux-overhaul into dev 2026-06-20 08:28:25 +00:00

Conversation 0 Commits 9 Files changed 23 +655 -142

john commented 2026-06-20 08:25:42 +00:00

Owner

Copy link

Re-submission of #126 (from @mathiasBe fork) as a repo branch so CI runs.

Desktop + mobile UX overhaul of the HaskyOS Shell, built locally and reviewed screenshot-by-screenshot. Four scoped commits: (1) page-scoped search, (2) shell redesign/layout/polish/branding, (3) mobile responsiveness, (4) favicon. tsc clean.

Follow-ups (separate): error boundary so a bad page does not blank the SPA, scoped-search sweep to remaining pages, undefined-token/badge cleanup.

Original PR: #126

Re-submission of #126 (from @mathiasBe fork) as a repo branch so CI runs. Desktop + mobile UX overhaul of the HaskyOS Shell, built locally and reviewed screenshot-by-screenshot. Four scoped commits: (1) page-scoped search, (2) shell redesign/layout/polish/branding, (3) mobile responsiveness, (4) favicon. tsc clean. Follow-ups (separate): error boundary so a bad page does not blank the SPA, scoped-search sweep to remaining pages, undefined-token/badge cleanup. Original PR: #126

john added 9 commits 2026-06-20 08:25:42 +00:00

feat(search): page-scoped search in the top bar ... 569ddbdf27

Add a PageSearch context so list pages can opt into current-page
filtering. The top SearchBar becomes a scoped filter on those pages
(showing e.g. "Search workstreams…") and falls back to the existing
global entity search elsewhere. Wire it into Workstreams and the
client Registry as the first two pages; the magnifier icon is now a
proper SVG.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

feat(ui): redesign app shell — layout, polish & branding ... 3e2efd6468

Restructure the shell around a cleaner, lighter frame:

- Right Activity/Chat panel is now an on-demand drawer (closed by
  default) toggled from a bare icon in the top-right corner; widen
  toggle on the left of the tabs, drawer icon (not an X) closes it.
- Sticky page header with a large module-coloured title and the
  search below it; content centred at 1200px on a white canvas.
- Left-nav toggle moved beside the logo; real HaskyOS wordmark logo
  (track src/assets PNGs past the global *.png ignore).
- Cards and table rows are borderless light-grey surfaces; removed
  the chrome separator lines (header, search bar, table header,
  footer) and the sidebar's right border for a cleaner look.
- Restore the module-coloured active nav accent.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

feat(mobile): responsive top bar, off-canvas nav & scrollable tables ... 0defbbeb28

Make the shell usable on phones (<=768px):

- Dedicated mobile top bar: hamburger (left) opens the left nav as an
  off-canvas drawer over a backdrop; HaskyOS logo centred; Activity/
  Chat drawer toggle on the right. The desktop sidebar and corner
  toggle hide at this width.
- Tables scroll horizontally (display:block + overflow-x) so wide
  tables never break the layout, with columns staying aligned.
- Status bar / filter chips wrap, cards go single-column, search
  spans full width, title scales down.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

feat(ui): add HaskyOS favicon ... b7ef894eef

Use the "OS" brand mark as the favicon (public/favicon.png) and link
it from index.html. Track public PNGs past the global *.png ignore.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

fix(mobile): full-screen drawer, kill off-canvas glow, contain page scroll ... f8b89a5e22

- Off-canvas sidebar and right drawer only cast their box-shadow while
  open, so the shadow no longer bleeds in as a glow on the screen
  edges when they're parked off-screen.
- Right Activity/Chat drawer goes full-screen on mobile; hide the
  widen toggle (redundant at full width) so there's a single close
  control and no duplicate drawer icon.
- Clamp horizontal overflow on the shell/content containers so pages
  only scroll vertically; wide elements like tables keep their own
  horizontal scroll.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

fix(mobile): collapse fixed grids and scroll dense rows on small screens ... cbac7d79e1

Per-page mobile sweep so detail/admin/finance pages aren't cramped:

- Tag fixed two-column inline grids (deal/contact/issue forms, deal &
  contact detail info blocks, orchestrator, pipeline/contacts/campaigns
  create forms) with `.mcol`, which collapses them to one column under
  768px (stylesheet !important overrides the inline grid).
- Wrap the weekday calendar (Actions) and the deal stage-progress row
  in horizontal scroll containers so they scroll instead of squishing
  or clipping.

Verified at 390px across deal/contact/project/PNL/actions — pages
scroll vertically only; wide elements scroll inside themselves.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

fix(ui): define missing design tokens, badge & button variants ... d5e09c8121

A cluster of CSS custom properties and class modifiers were referenced
across the app but never defined, so they rendered wrong:

- Add :root aliases (on-palette) for --text-muted (used in 6 files, was
  rendering dimmed text at full black), --dim, --hover, --primary,
  --success, --danger, --c-red, --healthy, --bg-primary, --accent-bg,
  and --mod-ops/--mod-clients/--mod-knowledge (+ their -bg).
- Add the missing badge--healthy/neutral/muted classes (status badges
  were rendering as colorless pills) and fix badge--closed.
- Add the missing btn--danger/critical/warning/success/info/active
  classes (delete/close buttons had no danger styling).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

feat(search): extend page-scoped search to more list pages ... 6347bbfa1d

Wire usePageSearch into Pipeline (deals), Project Registry, Issue
Management and Campaigns so the top search bar scopes to the current
page's list, matching Workstreams and the client Registry.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

fix(ui): drop fake/hardcoded stats on Patrol and Playbooks ... 2aba54bcbb

- Patrol "All Clear" no longer shows a fake-computed "Next sweep in
  ~30 minutes" (the expression always yielded 30); say it plainly.
- Playbook cards drop the always-zero "Used by: 0 projects" line, and
  the status bar drops the redundant "N in use" (it equalled total).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

john referenced this pull request 2026-06-20 08:25:58 +00:00

feat: shell UX overhaul — page-scoped search, redesign & mobile #126

john merged commit 14b6f3cd0a into dev 2026-06-20 08:28:25 +00:00

john deleted branch feat/shell-ux-overhaul 2026-06-20 08:28:25 +00:00

john referenced this pull request from a commit 2026-06-20 08:28:26 +00:00

feat: shell UX overhaul — page-scoped search, redesign & mobile (#127)

john referenced this pull request 2026-06-20 08:28:51 +00:00

release: shell UX overhaul #129

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels

No items

No labels

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

haskytech/operator!127

No description provided.