From f0484f03c2d147390a0ed0e4f4051fcc6fd3e36c Mon Sep 17 00:00:00 2001
From: chris <chris@chrisdeMac-mini.local>
Date: Mon, 18 May 2026 09:53:42 +0800
Subject: [PATCH 1/2] Surface keyboard shortcuts and cap label overflow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three small affordance improvements following the Linear-style design pass:

- App.tsx: wire the advertised T shortcut to toggle theme (was in the
  command palette as "T" but had no global handler). All palette
  shortcuts now have working global handlers.
- App.tsx + app.css: render sidebar nav items with an inline kbd hint
  (Inbox=I, My Issues=M, Views=W, Projects=P, Members=E) at 0.5 opacity,
  brightening to full on hover/active/focus. Also adds native `title`
  tooltips with the full G-prefix chord ("Go to Inbox · G I") so screen
  readers and keyboard-curious users learn the muscle-memory chord.
- IssueCard.tsx: cap visible labels at 2 with a "+N" overflow chip
  whose title attribute lists the hidden label names. Prior render
  pushed all labels onto the card, which broke the density rhythm.
---
 packages/web/src/App.tsx                  | 21 ++++++++++++++++-----
 packages/web/src/components/IssueCard.tsx | 13 ++++++++++++-
 packages/web/src/styles/app.css           | 11 +++++++++++
 3 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/packages/web/src/App.tsx b/packages/web/src/App.tsx
index 1111281..1d96d5e 100644
--- a/packages/web/src/App.tsx
+++ b/packages/web/src/App.tsx
@@ -708,6 +708,12 @@ 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'));
       }
     }
 
@@ -927,30 +933,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>
diff --git a/packages/web/src/components/IssueCard.tsx b/packages/web/src/components/IssueCard.tsx
index d51d79a..83a8ef5 100644
--- a/packages/web/src/components/IssueCard.tsx
+++ b/packages/web/src/components/IssueCard.tsx
@@ -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">
diff --git a/packages/web/src/styles/app.css b/packages/web/src/styles/app.css
index 7edcd8b..e824f3b 100644
--- a/packages/web/src/styles/app.css
+++ b/packages/web/src/styles/app.css
@@ -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;

From d14075a387c3037d3a0a92b4a221b7c576bc9b8b Mon Sep 17 00:00:00 2001
From: chris <chris@chrisdeMac-mini.local>
Date: Mon, 18 May 2026 10:04:31 +0800
Subject: [PATCH 2/2] Add return to T shortcut handler for consistency

Mirrors the early-return guard on the C handler so future shortcut
branches added below cannot accidentally run after T fires.
No current behavioral change since T is the last branch.

Addresses gemini-code-assist review feedback on PR #35.
---
 packages/web/src/App.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/web/src/App.tsx b/packages/web/src/App.tsx
index 1d96d5e..b17c874 100644
--- a/packages/web/src/App.tsx
+++ b/packages/web/src/App.tsx
@@ -714,6 +714,7 @@ export function App() {
       if (event.key.toLowerCase() === 't' && !event.metaKey && !event.ctrlKey && !event.altKey && !event.shiftKey) {
         event.preventDefault();
         setTheme((currentTheme) => (currentTheme === 'dark' ? 'light' : 'dark'));
+        return;
       }
     }