Migrate to HeroUI v3 + theme border-radius + realtime polling - #10
Merged
Conversation
Introduce the HeroUI v3 theme layer that the rest of the migration builds on: - package: @heroui/react, @heroui/styles, lucide-react, csstype; add Tailwind v4 postcss plugin (postcss.config.mjs), configure vite plugin / font handling; - src/index.css: lean on @heroui/styles color-mix ranges for accent/base variables; drop prior redundant overrides - src/lib/fileIcons.tsx: colorized per-extension/per-name icon map with dynamic Lucide icon + color tuple - src/hooks/useTheme.ts: theme state (accent/base/font/radius), Google Fonts CDN link injection, localStorage persistence (incl. migration of old keys)
- delete useRefreshKey (no more manual refresh key plumbing) - useAutoRefresh polling now covers every data hook: - events/tasks: 30s (high-churn feeds), visibility-aware - repos/agents/peers/network/home: 60s - useNodesStatus re-validates every 60s instead of one-shot/session cache - useAgents gains a 60s visibility-aware tick (re-uses session cache on first load, bypasses it on each tick) - hooks no longer accept refreshKey; render-phase reset keys tick instead
Replace native HTML controls with HeroUI equivalents across components:
- Button variant="tertiary" for all clickables (repos, events, agents,
peers, tasks, network, command palette)
- <select> -> HeroUI Select+Menu (RepoToolbar, RepoPagination)
- <a> -> HeroUI Link (PeerList, FileViewer, DocsPage) with target/rel
Fixes & polish:
- TopBar mobile Drawer: style DrawerTrigger/DrawerCloseTrigger directly
(no nested <button>), wire close to onPress; simple SVG hamburger/close
icons replacing lucide Menu/X
- Command Palette: custom fixed overlay (cmdk dropped), transparent
ModalBackdrop (centered w/o dimming), body-scroll lock
- FileList: colorized per-type file icons via fileIcons.ts utility
Theme radius:
- drop hardcoded rounded-[2px]/rounded-lg/rounded-sm/rounded-md across
components in favour of rounded-[--radius] (theme-driven)
- remove obsolete components/ui/{badge,card,button,input-group,
separator,table,tabs,theme-toggle}.tsx (superseded by HeroUI)
All list pages (repos, agents, peers, events, tasks, network, home): - remove useRefreshKey usage and refresh/retry pills - RepoHero no longer takes refreshing/onRefresh props (button removed) - RepoHero accepts only display props (totalCount, page windows, title, description, cells) - RepoHero no longer renders a refresh pill; the page title block is clean The data layer (commit c71dd9c) now polls each hook on a 30s/60s tick, so the removed Retry buttons are unnecessary — transient errors self-heal on the next tick.
itsmeadarsh2008
force-pushed
the
heroui-migration
branch
from
August 10, 2026 07:10
f33649f to
797250d
Compare
Contributor
Author
New looks
|
|
Lovely 2026 rounded aesthetic design. Well done @itsmeadarsh2008 |
Member
|
thanks for this looks awesome ! |
kevincodex1
approved these changes
Aug 17, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Migrates the explorer to @heroui/react (React Aria Components under the hood),
centralises corner radius on the theme
--radiusvariable, and removes themanual Refresh button in favour of visibility-aware polling across every data view.
HeroUI v3 migration
button,select, andawith HeroUI equivalents(
Button,Select+Menu,Link) across ~10 components.cmdk):transparent backdrop (centered, no dimming), body-scroll lock on open.
close wired to
onPressso the menu dismisses reliably on all pages.components/ui/{badge,card,button,input-group,separator,table,tabs}.tsx.Theme
Fonts CDN), and 4 radius presets (
--radius/--field-radius).rounded-[2px]/rounded-lg/rounded-sm/rounded-md across 14 files.Realtime (no manual refresh)
useRefreshKey; polling covers every hook via visibility-awareuseAutoRefresh:Verification
tsc --noEmitcleannpm run buildsucceedsNotes
Gitlawb/node-explorer; this PR opens from the fork(
itsmeadarsh2008:heroui-migration) againstGitlawb:main.