Fix sidebar shortcut hints shifting rows

packages/app/src/components/sidebar/sidebar-status-list.tsx

@@ -59,7 +59,9 @@ import { useClearWorkspaceAttention } from "@/hooks/use-clear-workspace-attentio
 import {
   SidebarWorkspaceRowFrame,
   SidebarWorkspaceRowContent,
-  sidebarWorkspaceRowStyles,
+  SidebarWorkspaceTrailingActionBase,
+  SidebarWorkspaceTrailingActionOverlay,
+  SidebarWorkspaceTrailingActionSlot,
 } from "@/components/sidebar/sidebar-workspace-row-content";
 import { useSidebarCollapsedSectionsStore } from "@/stores/sidebar-collapsed-sections-store";
 
@@ -611,7 +613,10 @@ function StatusWorkspaceRowInner({
   return (
     <SidebarWorkspaceRowFrame workspace={workspace}>
       {({ isHovered, hoverHandlers }) => {
+        const showShortcut = showShortcutBadge && shortcutNumber !== null;
         const showKebab = Boolean(onArchive && (isHovered || isTouchPlatform));
+        const showKebabInSlot = showKebab && !showShortcut;
+        const shouldRenderActionSlot = Boolean(onArchive || workspace.diffStat);
         const workspaceRowStyle = getStatusWorkspaceRowStyle({ selected, isHovered });
         return (
           <View style={styles.workspaceRowContainer} {...hoverHandlers}>
@@ -628,6 +633,8 @@ function StatusWorkspaceRowInner({
                 subtitle={projectName}
                 isHovered={isHovered}
                 isLoading={isArchiving}
+                shortcutNumber={shortcutNumber}
+                showShortcutBadge={showShortcutBadge}
               >
                 <>
                   {showScriptsIcon ? (
@@ -639,9 +646,11 @@ function StatusWorkspaceRowInner({
                       )}
                     </View>
                   ) : null}
-                  {showKebab && onArchive ? (
-                    <StatusKebabMenu
-                      workspaceKey={workspace.workspaceKey}
+                  {shouldRenderActionSlot ? (
+                    <StatusWorkspaceActionSlot
+                      workspace={workspace}
+                      showBase={Boolean(workspace.diffStat && !showKebabInSlot && !showShortcut)}
+                      showOverlay={showKebabInSlot}
                       onCopyPath={onCopyPath}
                       onCopyBranchName={onCopyBranchName}
                       onRename={onRename}
@@ -653,19 +662,6 @@ function StatusWorkspaceRowInner({
                       archiveShortcutKeys={archiveShortcutKeys}
                     />
                   ) : null}
-                  {!showKebab && workspace.diffStat ? (
-                    <DiffStat
-                      additions={workspace.diffStat.additions}
-                      deletions={workspace.diffStat.deletions}
-                    />
-                  ) : null}
-                  {showShortcutBadge && shortcutNumber !== null ? (
-                    <View style={sidebarWorkspaceRowStyles.shortcutBadge}>
-                      <Text style={sidebarWorkspaceRowStyles.shortcutBadgeText}>
-                        {shortcutNumber}
-                      </Text>
-                    </View>
-                  ) : null}
                 </>
               </SidebarWorkspaceRowContent>
             </Pressable>
@@ -676,6 +672,63 @@ function StatusWorkspaceRowInner({
   );
 }
 
+function StatusWorkspaceActionSlot({
+  workspace,
+  showBase,
+  showOverlay,
+  onCopyPath,
+  onCopyBranchName,
+  onRename,
+  onMarkAsRead,
+  onArchive,
+  archiveLabel,
+  archiveStatus,
+  archivePendingLabel,
+  archiveShortcutKeys,
+}: {
+  workspace: SidebarWorkspaceEntry;
+  showBase: boolean;
+  showOverlay: boolean;
+  onCopyPath?: () => void;
+  onCopyBranchName?: () => void;
+  onRename?: () => void;
+  onMarkAsRead?: () => void;
+  onArchive?: () => void;
+  archiveLabel?: string;
+  archiveStatus?: "idle" | "pending" | "success";
+  archivePendingLabel?: string;
+  archiveShortcutKeys?: ShortcutKey[][] | null;
+}) {
+  return (
+    <SidebarWorkspaceTrailingActionSlot>
+      <SidebarWorkspaceTrailingActionBase visible={showBase}>
+        {workspace.diffStat ? (
+          <DiffStat
+            additions={workspace.diffStat.additions}
+            deletions={workspace.diffStat.deletions}
+          />
+        ) : null}
+      </SidebarWorkspaceTrailingActionBase>
+      <SidebarWorkspaceTrailingActionOverlay visible={showOverlay}>
+        {onArchive ? (
+          <StatusKebabMenu
+            workspaceKey={workspace.workspaceKey}
+            onCopyPath={onCopyPath}
+            onCopyBranchName={onCopyBranchName}
+            onRename={onRename}
+            onMarkAsRead={onMarkAsRead}
+            onArchive={onArchive}
+            archiveLabel={archiveLabel}
+            archiveStatus={archiveStatus}
+            archivePendingLabel={archivePendingLabel}
+            archiveShortcutKeys={archiveShortcutKeys}
+          />
+        ) : null}
+      </SidebarWorkspaceTrailingActionOverlay>
+    </SidebarWorkspaceTrailingActionSlot>
+  );
+}
+
 function StatusKebabMenu({
   workspaceKey,
   onCopyPath,

packages/app/src/components/sidebar/sidebar-workspace-row-content.tsx

@@ -89,6 +89,8 @@ export const SidebarWorkspaceRowContent = memo(function SidebarWorkspaceRowConte
   isHovered,
   isLoading,
   isCreating = false,
+  shortcutNumber = null,
+  showShortcutBadge = false,
   children,
 }: {
   workspace: SidebarWorkspaceEntry;
@@ -96,6 +98,8 @@ export const SidebarWorkspaceRowContent = memo(function SidebarWorkspaceRowConte
   isHovered: boolean;
   isLoading: boolean;
   isCreating?: boolean;
+  shortcutNumber?: number | null;
+  showShortcutBadge?: boolean;
   children?: ReactNode;
 }) {
   const workspaceBranchTextStyle = useMemo(
@@ -108,7 +112,7 @@ export const SidebarWorkspaceRowContent = memo(function SidebarWorkspaceRowConte
   );
 
   return (
-    <>
+    <View style={styles.workspaceRowContent}>
       <View style={styles.workspaceRowMain}>
         <View style={styles.workspaceRowLeft}>
           <WorkspaceStatusIndicator
@@ -122,6 +126,11 @@ export const SidebarWorkspaceRowContent = memo(function SidebarWorkspaceRowConte
         </View>
         <View style={styles.workspaceRowRight}>{children}</View>
       </View>
+      {showShortcutBadge && shortcutNumber !== null ? (
+        <View style={styles.shortcutBadgeOverlay} pointerEvents="none">
+          <SidebarWorkspaceShortcutBadge number={shortcutNumber} />
+        </View>
+      ) : null}
       {subtitle ? (
         <Text style={styles.workspaceSubtitle} numberOfLines={1}>
           {subtitle}
@@ -133,7 +142,7 @@ export const SidebarWorkspaceRowContent = memo(function SidebarWorkspaceRowConte
           <ChecksBadge checks={workspace.prHint.checks} />
         </View>
       ) : null}
-    </>
+    </View>
   );
 });
 
@@ -346,7 +355,7 @@ const checksBadgeStyles = StyleSheet.create((theme) => ({
 export const sidebarWorkspaceRowStyles = StyleSheet.create((theme) => ({
   rowRight: {
     flexDirection: "row",
-    alignItems: "center",
+    alignItems: "flex-start",
     gap: theme.spacing[2],
     flexShrink: 0,
   },
@@ -368,12 +377,63 @@ export const sidebarWorkspaceRowStyles = StyleSheet.create((theme) => ({
     fontWeight: theme.fontWeight.medium,
     lineHeight: 14,
   },
+  hidden: { opacity: 0 },
+  trailingActionSlot: {
+    position: "relative",
+    minWidth: 18,
+    minHeight: 20,
+    flexShrink: 0,
+    alignItems: "flex-end",
+    justifyContent: "flex-start",
+  },
+  trailingActionOverlay: {
+    position: "absolute",
+    top: 0,
+    right: 0,
+  },
 }));
 
+export function SidebarWorkspaceShortcutBadge({ number }: { number: number }) {
+  return (
+    <View style={sidebarWorkspaceRowStyles.shortcutBadge}>
+      <Text style={sidebarWorkspaceRowStyles.shortcutBadgeText}>{number}</Text>
+    </View>
+  );
+}
+
+export function SidebarWorkspaceTrailingActionSlot({ children }: { children: ReactNode }) {
+  return <View style={sidebarWorkspaceRowStyles.trailingActionSlot}>{children}</View>;
+}
+
+export function SidebarWorkspaceTrailingActionBase({
+  visible,
+  children,
+}: {
+  visible: boolean;
+  children: ReactNode;
+}) {
+  if (!children) return null;
+  return <View style={visible ? undefined : sidebarWorkspaceRowStyles.hidden}>{children}</View>;
+}
+
+export function SidebarWorkspaceTrailingActionOverlay({
+  visible,
+  children,
+}: {
+  visible: boolean;
+  children: ReactNode;
+}) {
+  if (!visible || !children) return null;
+  return <View style={sidebarWorkspaceRowStyles.trailingActionOverlay}>{children}</View>;
+}
+
 const styles = StyleSheet.create((theme) => ({
+  workspaceRowContent: {
+    position: "relative",
+  },
   workspaceRowMain: {
     flexDirection: "row",
-    alignItems: "center",
+    alignItems: "flex-start",
     justifyContent: "space-between",
     gap: theme.spacing[2],
     width: "100%",
@@ -386,6 +446,11 @@ const styles = StyleSheet.create((theme) => ({
     minWidth: 0,
   },
   workspaceRowRight: sidebarWorkspaceRowStyles.rowRight,
+  shortcutBadgeOverlay: {
+    position: "absolute",
+    top: 1,
+    right: 0,
+  },
   workspaceStatusDot: {
     position: "relative",
     width: WORKSPACE_STATUS_DOT_WIDTH,