Skip to content

feat: redesign AI sidebar overlay menu and composer UX#2224

Open
webguru-hypha wants to merge 33 commits into
mainfrom
feat/sidebar-01-ai-chat-overlay-redesign
Open

feat: redesign AI sidebar overlay menu and composer UX#2224
webguru-hypha wants to merge 33 commits into
mainfrom
feat/sidebar-01-ai-chat-overlay-redesign

Conversation

@webguru-hypha

Copy link
Copy Markdown
Contributor

Summary

  • implement the sidebar-01 inspired AI left-panel navigation redesign with grouped space switcher, icon+label menu items, and deterministic expanded/collapsed overlay behavior
  • align the AI composer UI with the right chat composer and add dictation support, including active recording visual parity and icon ordering parity
  • add a dedicated requirements spec for the redesign and codify anti-glitch state transitions between overlay visibility and collapsed intent

Test plan

  • Open a space route and verify hover/focus on the left trigger reveals the overlay menu without shifting main content
  • Click close and verify the panel collapses to icon-only rail; re-open and confirm no flicker/jump when moving pointer between trigger and rail
  • Verify top-left AI header uses active space icon and dropdown; ensure dropdown groups ecosystem spaces first, then others with a delimiter
  • Verify left menu items render as Signals/Agreements/Members/Treasury with active highlighting and correct navigation
  • Verify AI composer matches right composer visual language and icon order; verify dictation enters text and stop/recording states behave correctly
  • Lint check on touched files passes

Capture the restart-from-scratch implementation contract for the AI sidebar,
space switcher, and section navigation so coding can proceed against clear
acceptance criteria and scope boundaries.

Made-with: Cursor
@coderabbitai

coderabbitai Bot commented Apr 28, 2026

Copy link
Copy Markdown
Contributor

Warning

Rate limit exceeded

@webguru-hypha has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 48 minutes and 55 seconds before requesting another review.

To keep reviews running without waiting, you can enable usage-based add-on for your organization. This allows additional reviews beyond the hourly cap. Account admins can enable it under billing.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 8fdd0c00-9382-4e45-b239-3d821a00b99a

📥 Commits

Reviewing files that changed from the base of the PR and between 2e7b2b4 and 647faa5.

📒 Files selected for processing (23)
  • apps/web/src/app/[lang]/dho/[id]/_components/breadcrumbs.tsx
  • apps/web/src/app/[lang]/dho/[id]/_components/navigation-tabs.tsx
  • apps/web/src/app/layout.tsx
  • apps/web/src/components/connected-menu-top.tsx
  • docs/requirements/ai-sidebar-01-space-navigation-redesign.md
  • packages/core/src/space/client/hooks/useCreateSpaceOrchestrator.ts
  • packages/core/src/space/client/hooks/useUpdateSpaceOrchestrator.ts
  • packages/core/src/space/server/queries.ts
  • packages/core/src/space/types.ts
  • packages/core/src/space/validation.ts
  • packages/epics/src/common/ai-left-panel.tsx
  • packages/epics/src/common/ai-panel/ai-panel-chat-bar.tsx
  • packages/epics/src/common/ai-panel/ai-panel-header.tsx
  • packages/epics/src/common/human-chat-panel-context.tsx
  • packages/epics/src/common/index.ts
  • packages/epics/src/common/panel-main-column-scroll-bridge.tsx
  • packages/epics/src/common/panel-wrap-layout.tsx
  • packages/epics/src/spaces/components/create-space-form.tsx
  • packages/epics/src/spaces/components/create-subspace-form.tsx
  • packages/storage-postgres/migrations/0048_ecosystem_logo_url.sql
  • packages/storage-postgres/migrations/meta/_journal.json
  • packages/storage-postgres/src/schema/space.ts
  • packages/ui/src/organisms/menu-top.tsx
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/sidebar-01-ai-chat-overlay-redesign

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
Review rate limit: 0/1 reviews remaining, refill in 48 minutes and 55 seconds.

Comment @coderabbitai help to get the list of available commands and usage tips.

Alex Prate added 6 commits April 29, 2026 01:17
Switch the DHO section navigation from tab triggers to icon+label menu items
for Signals, Agreements, Members, and Treasury to match the redesigned left
menu interaction model.

Made-with: Cursor
Separate AI sidebar collapse intent from overlay visibility and wire both
single/dual sidebar layouts to icon-collapsible behavior to prevent hover and
close transition flicker.

Made-with: Cursor
Replace the static Hypha AI header with active-space identity, grouped My Spaces
dropdown, and close behavior aligned with collapsed rail expectations.

Made-with: Cursor
Render a dedicated collapsed left-panel rail with active space icon and tooltiped
icon navigation, while keeping the expanded panel menu and AI chat content flow.

Made-with: Cursor
Match the left AI composer layout and control ordering with the right chat panel,
including speech-dictation input flow and recording state visuals for parity.

Made-with: Cursor
Define the menu-shell collapse semantics and state coordination rules so close,
hover, and hidden-overlay interactions remain deterministic and flicker-free.

Made-with: Cursor
@webguru-hypha webguru-hypha force-pushed the feat/sidebar-01-ai-chat-overlay-redesign branch from f6a165e to 4976514 Compare April 28, 2026 23:19
@github-actions

github-actions Bot commented Apr 28, 2026

Copy link
Copy Markdown

🔗 Custom preview URL: https://pr-2224.preview-app.hypha.earth

Alex Prate added 2 commits April 29, 2026 01:33
Apply prettier formatting to the AI left panel and panel-wrap layout so the
Deploy Preview main check passes format:check.

Made-with: Cursor
Adjust AI header and collapsed rail space-icon dimensions to match the opposite
human chat icon for consistent visual rhythm.

Made-with: Cursor
Alex Prate added 17 commits April 29, 2026 02:41
Apply unresolved CodeRabbit fixes for nav i18n accessibility labeling,
segment-safe sidebar active-route matching, and robust AI spaces dropdown
loading/error/fallback handling.

Made-with: Cursor
Make the collapsed left rail expand a hover overlay menu independently from the
AI chat open state, hide the magic trigger while AI chat is open, and hide the
top Hypha logo on closed rail state in space routes.

Made-with: Cursor
Apply Prettier formatting to the updated AI panel header and panel wrap layout
so the main CI format check passes.

Made-with: Cursor
Remove section-menu rendering from the expanded AI chat panel and keep
space dropdown + itemized navigation in the overlay rail flow only.

Made-with: Cursor
Allow hover overlay content to render outside the rail, remove hover gap to the
flyout, and increase hide delay so users can reliably move pointer into the
expanded menu and click items.

Made-with: Cursor
Limit AI space switcher options to member spaces, improve active-space icon
resolution for the rail, add ellipsis-safe title truncation, and rebalance rail
navigation icon shape/size for stronger visual consistency.

Made-with: Cursor
Replace Hypha branding text with the active root space name on space routes,
positioned next to the AI trigger while preserving existing top-menu actions.

Made-with: Cursor
Increase icon-rail width and sync sidebar icon-width variables across single and
dual sidebar layouts so the collapsed left menu has more balanced spacing.

Made-with: Cursor
Expand the collapsed AI rail in-place on hover, render the active-space dropdown
header in expanded hover mode, and align the hover header block to top-panel
height semantics.

Made-with: Cursor
Reduce root-space branding size, align sidebar header blocks to top-menu height,
and add vertical breathing room for rail icons so logo and navigation feel
centered and visually balanced.

Made-with: Cursor
Remove duplicate icon/menu columns in hover-expanded state, keep a single
expanded overlay menu with one icon set, and restore full AI header content when
the AI panel is opened from the magic trigger.

Made-with: Cursor
Render root space branding with its actual logo in the top menu, and provide an
'Ecosystem Logo' placeholder linking to root space configuration when missing.
Also add a root-space ecosystem logo label in space configuration.

Made-with: Cursor
Switch DHO breadcrumbs to show root-to-leaf space hierarchy, collapse deep
paths with a middle ellipsis, and truncate long space names for stable layout.

Made-with: Cursor
Use the same Signals/Agreements/Members icons across tabs and left menu, and
switch Treasury to a token-style Coins icon for consistent navigation language.

Made-with: Cursor
Strengthen active-state visibility in collapsed and expanded AI menu states
with explicit active background/text styles and aria-current markers.

Made-with: Cursor
Prevent hover-expansion from the top menu/magic icon zone and trigger it only
from the vertical rail content area so the AI trigger remains easy to click.

Made-with: Cursor
Render the close/collapse button in the hover-expanded AI menu header so users
can explicitly close the expanded menu from that state.

Made-with: Cursor
Alex Prate added 6 commits April 29, 2026 04:28
Use the same plus-button attachment dropdown pattern as Human chat in the AI composer, and remove emoji and @ controls from the left panel action row.

Made-with: Cursor
Normalize conditional indentation in SpaceForm so it matches the CI formatter and unblocks the main workflow check.

Made-with: Cursor
Keep the AI panel header controls on a single row and render the Sparkles icon when a space logo is unavailable so the rail/header fallback matches the AI trigger language.

Made-with: Cursor
Use a logo-only root branding slot with an upload placeholder, and restore left rail expansion ergonomics by allowing hover open from both top icon and rail icons while preserving expanded-header interaction.

Made-with: Cursor
Align ai-left-panel formatting with repository Prettier rules and guard nullable icon sources in ai-panel-header list items to satisfy epics check-types on CI.

Made-with: Cursor
Introduce a dedicated ecosystem logo field for root space configuration, persist it end-to-end, and use it for top-banner branding with a configuration placeholder when missing. Also align AI panel menu hover and active styling with the app's standard menu language.

Made-with: Cursor
Prevent subspace creation from passing ecosystemLogoUrl to createSpace,
which expects web2 string fields and broke check-types in CI.

Made-with: Cursor
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant