Skip to content

Surface keyboard shortcuts and cap label overflow #35

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
fakechris merged 2 commits into from
May 18, 2026
Merged

Surface keyboard shortcuts and cap label overflow #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f0484f0
Surface keyboard shortcuts and cap label overflow
May 18, 2026
d14075a
Add return to T shortcut handler for consistency
May 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 17 additions & 5 deletions packages/web/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -708,6 +708,13 @@ export function App() {
if (event.key.toLowerCase() === 'c' && !event.metaKey && !event.ctrlKey && !event.altKey && !event.shiftKey) {
event.preventDefault();
openCreateIssueSurface(navigate, location.pathname);
return;
}

if (event.key.toLowerCase() === 't' && !event.metaKey && !event.ctrlKey && !event.altKey && !event.shiftKey) {
event.preventDefault();
setTheme((currentTheme) => (currentTheme === 'dark' ? 'light' : 'dark'));
return;
}
Comment on lines +714 to 718
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot May 18, 2026

Choose a reason for hiding this comment

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

medium

The new 'T' shortcut handler should include a return; statement to exit the function early upon a match. This maintains consistency with the 'C' handler logic updated in this PR and prevents unnecessary evaluation of any future shortcut conditions added below this block.

      if (event.key.toLowerCase() === 't' && !event.metaKey && !event.ctrlKey && !event.altKey && !event.shiftKey) {
        event.preventDefault();
        setTheme((currentTheme) => (currentTheme === 'dark' ? 'light' : 'dark'));
        return;
      }

}

Expand Down Expand Up @@ -927,30 +934,35 @@ export function App() {
</button>

<nav className="app-shell__nav-section">
<NavLink to="/inbox" className={getNavLinkClassName}>
<NavLink to="/inbox" className={getNavLinkClassName} title="Go to Inbox · G I">
<span className="app-shell__nav-icon"><IcoInbox size={14} /></span>
<span className="app-shell__link-label">Inbox</span>
<kbd className="app-shell__link-kbd" aria-hidden="true">I</kbd>
</NavLink>
<NavLink to="/my-issues" className={getNavLinkClassName}>
<NavLink to="/my-issues" className={getNavLinkClassName} title="Go to My Issues · G M">
<span className="app-shell__nav-icon"><IcoIssues size={14} /></span>
<span className="app-shell__link-label">My Issues</span>
<kbd className="app-shell__link-kbd" aria-hidden="true">M</kbd>
</NavLink>
<NavLink to="/views" className={getNavLinkClassName}>
<NavLink to="/views" className={getNavLinkClassName} title="Go to Views · G W">
<span className="app-shell__nav-icon"><IcoViews size={14} /></span>
<span className="app-shell__link-label">Views</span>
<kbd className="app-shell__link-kbd" aria-hidden="true">W</kbd>
</NavLink>
</nav>

<div className="app-shell__team-section">
<div className="app-shell__section-label">Workspace</div>
<nav className="app-shell__nav-section">
<NavLink to="/projects" className={getNavLinkClassName}>
<NavLink to="/projects" className={getNavLinkClassName} title="Go to Projects · G P">
<span className="app-shell__nav-icon"><IcoProject size={14} /></span>
<span className="app-shell__link-label">Projects</span>
<kbd className="app-shell__link-kbd" aria-hidden="true">P</kbd>
</NavLink>
<NavLink to="/members" className={getNavLinkClassName}>
<NavLink to="/members" className={getNavLinkClassName} title="Go to Members · G E">
<span className="app-shell__nav-icon"><IcoTeam size={14} /></span>
<span className="app-shell__link-label">Members</span>
<kbd className="app-shell__link-kbd" aria-hidden="true">E</kbd>
</NavLink>
</nav>
</div>
Expand Down
13 changes: 12 additions & 1 deletion packages/web/src/components/IssueCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,11 +159,22 @@ export function IssueCard({
<h3 className="issue-card__title">{issue.title}</h3>

<div className="issue-card__labels">
{issue.labels.nodes.map((label) => (
{issue.labels.nodes.slice(0, 2).map((label) => (
<span key={label.id} className={getLabelClassName(label.name)}>
{label.name}
</span>
))}
{issue.labels.nodes.length > 2 ? (
<span
className="issue-card__label issue-card__label--neutral"
title={issue.labels.nodes
.slice(2)
.map((label) => label.name)
.join(', ')}
>
+{issue.labels.nodes.length - 2}
</span>
) : null}
</div>

<div className="issue-card__footer">
Expand Down
11 changes: 11 additions & 0 deletions packages/web/src/styles/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -411,6 +411,17 @@ kbd {
flex: 1;
}

.app-shell__link-kbd {
opacity: 0.5;
transition: opacity var(--dur-1) var(--ease);
}

.app-shell__link:hover .app-shell__link-kbd,
.app-shell__link--active .app-shell__link-kbd,
.app-shell__link:focus-visible .app-shell__link-kbd {
opacity: 1;
}

.app-shell__sidebar-footer-row {
display: flex;
align-items: center;
Expand Down
Loading