Skip to content

design: redesign call center and more#331

Open
konsalex wants to merge 1 commit into
mainfrom
redesign-call-center-and-fix-app-icon
Open

design: redesign call center and more#331
konsalex wants to merge 1 commit into
mainfrom
redesign-call-center-and-fix-app-icon

Conversation

@konsalex

@konsalex konsalex commented Jun 11, 2026

Copy link
Copy Markdown
Contributor

Redesign call-center, as it was fixed on top and with more participants it was pushing the content down.

Also:

  1. Fixed the macOS icon to be re-active based on if we are in a call or not.
  2. Styled keyboard shortcuts
CleanShot.2026-06-11.at.22.18.08.mp4

Summary by CodeRabbit

  • New Features

    • Added a "Call" tab in the sidebar with Cmd+O/Ctrl+O keyboard shortcut navigation.
    • Added ability to copy room links to clipboard for web-based calls.
    • Auto-navigates to Call tab when starting a call.
  • Improvements

    • Enhanced keyboard shortcut styling in the call interface.
    • Added transparent tooltip variant for better visual consistency.
  • Style

    • Added global styling for keyboard elements.

@konsalex konsalex requested a review from iparaskev as a code owner June 11, 2026 20:22
@netlify

netlify Bot commented Jun 11, 2026

Copy link
Copy Markdown

Deploy Preview for hoppdocs ready!

Name Link
🔨 Latest commit 8369cfa
🔍 Latest deploy log https://app.netlify.com/projects/hoppdocs/deploys/6a2b18f27fcdff000842bfc2
😎 Deploy Preview https://deploy-preview-331--hoppdocs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@coderabbitai

coderabbitai Bot commented Jun 11, 2026

Copy link
Copy Markdown

Review Change Stack

📝 Walkthrough

Walkthrough

This PR integrates call functionality into the main sidebar, consolidates room link management into CallCenter, and unifies shortcut tooltip display. The backend tray notification is fixed to run on the main thread. Rooms tab is refactored to remove duplicate room-link logic.

Changes

Call Tab & Room Management Integration

Layer / File(s) Summary
Call Tab Navigation Foundation
tauri/src/store/store.ts, tauri/src/components/sidebar/Sidebar.tsx, tauri/src/windows/main-window/app.tsx
Added call tab to sidebar tabs, created CallPageButton component with cmd+o/ctrl+o hotkey binding, wired button into sidebar, and implemented auto-switching to call tab when entering/exiting calls. CallCenter container visibility now depends on active tab.
Room Link Copying in Call Center
tauri/src/components/ui/call-center.tsx
Added room link copy feature with handleCopyRoomLink handler that builds web URL from Constants.webAppUrl and room ID, copies via Tauri clipboard plugin, and shows success toast. Updated call header to show room card with copy action for room-based calls.
Shortcut Tooltip Display Unification
tauri/src/App.css, tauri/src/components/ui/tooltip.tsx, tauri/src/components/ui/call-center.tsx
Introduced transparent tooltip variant and global kbd CSS styling, then updated all call shortcut tooltips (end call, microphone, screen share, camera) to render shortcuts in <kbd> elements with transparent variant.
Rooms Tab Refactoring
tauri/src/windows/main-window/tabs/Rooms.tsx
Removed local SelectedRoom component that duplicated room link copying logic (now in CallCenter), simplified layout to always render rooms list and dialogs together without conditional call view.
UI Formatting and Tauri Fix
tauri/src/components/ui/call-center.tsx, tauri/src-tauri/src/main.rs
Minor JSX/ternary formatting adjustments across CallCenter participant rendering and icon conditionals. Changed set_tray_notification from async to non-async to ensure macOS notification dot updates run on main thread.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

  • gethopp/hopp#234: Both PRs directly modify the set_tray_notification Tauri command and macOS tray notification behavior.
  • gethopp/hopp#314: Overlaps on shortcut tooltip rendering updates (<kbd> styling and tooltip variant changes) for call control shortcuts.

Suggested reviewers

  • iparaskev

Poem

A hop through the tabs, a call comes alive, 🐰
The sidebar now glows where the shortcuts arrive,
Room links copy swift, no more code duplication,
The keyboard shortcuts shine with <kbd> celebration! ⌨️✨

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'design: redesign call center and more' is partially related to the changeset. It accurately describes the call center redesign (main focus) but uses vague phrasing ('and more') that doesn't convey the other significant changes like macOS app icon reactivity and keyboard shortcut styling.
Docstring Coverage ✅ Passed Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch redesign-call-center-and-fix-app-icon

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

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

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@tauri/src/windows/main-window/tabs/Rooms.tsx`:
- Around line 352-357: The Tailwind v4 deprecation: replace the removed
focus-visible:ring-opacity-20 utility in the Input's className with the
color/opacity slash syntax; update the class string on the Input component (the
element using setSearchQuery and placeholder "Search rooms") to use
focus-visible:ring-blue-300/20 instead of focus-visible:ring-opacity-20 so the
focus ring keeps the same color and opacity.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 16c50f0e-8578-4ef9-b126-ad12bcc9aaa9

📥 Commits

Reviewing files that changed from the base of the PR and between c79e686 and 8369cfa.

📒 Files selected for processing (8)
  • tauri/src-tauri/src/main.rs
  • tauri/src/App.css
  • tauri/src/components/sidebar/Sidebar.tsx
  • tauri/src/components/ui/call-center.tsx
  • tauri/src/components/ui/tooltip.tsx
  • tauri/src/store/store.ts
  • tauri/src/windows/main-window/app.tsx
  • tauri/src/windows/main-window/tabs/Rooms.tsx

Comment on lines +352 to +357
<Input
type="text"
onChange={(e) => setSearchQuery(e.target.value)}
placeholder="Search rooms"
className="pl-8 w-full focus-visible:ring-opacity-20 focus-visible:ring-2 focus-visible:ring-blue-300"
/>

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Deprecated ring-opacity-* utility in Tailwind v4.

The focus-visible:ring-opacity-20 class was removed in Tailwind v4. Use the slash syntax on the color utility instead.

Proposed fix
 <Input
   type="text"
   onChange={(e) => setSearchQuery(e.target.value)}
   placeholder="Search rooms"
-  className="pl-8 w-full focus-visible:ring-opacity-20 focus-visible:ring-2 focus-visible:ring-blue-300"
+  className="pl-8 w-full focus-visible:ring-2 focus-visible:ring-blue-300/20"
 />
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<Input
type="text"
onChange={(e) => setSearchQuery(e.target.value)}
placeholder="Search rooms"
className="pl-8 w-full focus-visible:ring-opacity-20 focus-visible:ring-2 focus-visible:ring-blue-300"
/>
<Input
type="text"
onChange={(e) => setSearchQuery(e.target.value)}
placeholder="Search rooms"
className="pl-8 w-full focus-visible:ring-2 focus-visible:ring-blue-300/20"
/>
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@tauri/src/windows/main-window/tabs/Rooms.tsx` around lines 352 - 357, The
Tailwind v4 deprecation: replace the removed focus-visible:ring-opacity-20
utility in the Input's className with the color/opacity slash syntax; update the
class string on the Input component (the element using setSearchQuery and
placeholder "Search rooms") to use focus-visible:ring-blue-300/20 instead of
focus-visible:ring-opacity-20 so the focus ring keeps the same color and
opacity.

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