diff --git a/packages/app/src/components/sidebar-workspace-list.tsx b/packages/app/src/components/sidebar-workspace-list.tsx index 1fbdae036..fb08566dd 100644 --- a/packages/app/src/components/sidebar-workspace-list.tsx +++ b/packages/app/src/components/sidebar-workspace-list.tsx @@ -44,7 +44,7 @@ import { NestableScrollContainer } from "react-native-draggable-flatlist"; import { DraggableList, type DraggableRenderItemInfo } from "./draggable-list"; import type { DraggableListDragHandleProps } from "./draggable-list.types"; import { getHostRuntimeStore, isHostRuntimeConnected } from "@/runtime/host-runtime"; -import { getIsElectronRuntime, useIsCompactFormFactor } from "@/constants/layout"; +import { useIsCompactFormFactor } from "@/constants/layout"; import { projectIconQueryKey } from "@/hooks/use-project-icon-query"; import { parseHostWorkspaceRouteFromPathname } from "@/utils/host-routes"; import { prepareWorkspaceTab } from "@/utils/workspace-navigation"; @@ -53,7 +53,7 @@ import { type SidebarWorkspaceEntry, } from "@/hooks/use-sidebar-workspaces-list"; import { useSidebarOrderStore } from "@/stores/sidebar-order-store"; -import { useKeyboardShortcutsStore } from "@/stores/keyboard-shortcuts-store"; +import { useShowShortcutBadges } from "@/hooks/use-show-shortcut-badges"; import { ContextMenuTrigger, useContextMenu } from "@/components/ui/context-menu"; import { DropdownMenu, @@ -1604,10 +1604,7 @@ export function SidebarWorkspaceList({ const creatingWorkspaceTimeoutsRef = useRef>>( new Map(), ); - const isDesktopApp = getIsElectronRuntime(); - const altDown = useKeyboardShortcutsStore((state) => state.altDown); - const cmdOrCtrlDown = useKeyboardShortcutsStore((state) => state.cmdOrCtrlDown); - const showShortcutBadges = altDown || (isDesktopApp && cmdOrCtrlDown); + const showShortcutBadges = useShowShortcutBadges(); const getProjectOrder = useSidebarOrderStore((state) => state.getProjectOrder); const setProjectOrder = useSidebarOrderStore((state) => state.setProjectOrder); diff --git a/packages/app/src/hooks/use-show-shortcut-badges.ts b/packages/app/src/hooks/use-show-shortcut-badges.ts new file mode 100644 index 000000000..d83685f84 --- /dev/null +++ b/packages/app/src/hooks/use-show-shortcut-badges.ts @@ -0,0 +1,5 @@ +import { useKeyboardShortcutsStore } from "@/stores/keyboard-shortcuts-store"; + +export function useShowShortcutBadges(): boolean { + return useKeyboardShortcutsStore((state) => state.showShortcutBadges); +} diff --git a/packages/app/src/stores/keyboard-shortcuts-store.ts b/packages/app/src/stores/keyboard-shortcuts-store.ts index a8a114324..a3b2e2eca 100644 --- a/packages/app/src/stores/keyboard-shortcuts-store.ts +++ b/packages/app/src/stores/keyboard-shortcuts-store.ts @@ -1,6 +1,8 @@ import { create } from "zustand"; import type { SidebarShortcutWorkspaceTarget } from "@/utils/sidebar-shortcuts"; +const SHORTCUT_BADGE_DELAY_MS = 150; + interface KeyboardShortcutsState { commandCenterOpen: boolean; projectPickerOpen: boolean; @@ -8,6 +10,7 @@ interface KeyboardShortcutsState { capturingShortcut: boolean; altDown: boolean; cmdOrCtrlDown: boolean; + showShortcutBadges: boolean; /** Sidebar-visible workspace targets (up to 9), in top-to-bottom visual order. */ sidebarShortcutWorkspaceTargets: SidebarShortcutWorkspaceTarget[]; /** All visible workspace targets in top-to-bottom visual order. */ @@ -24,13 +27,37 @@ interface KeyboardShortcutsState { resetModifiers: () => void; } -export const useKeyboardShortcutsStore = create((set) => ({ +let badgeTimer: ReturnType | null = null; + +function updateBadgeTimer( + set: (partial: Partial) => void, + get: () => KeyboardShortcutsState, +) { + const { altDown, cmdOrCtrlDown } = get(); + const modifierDown = altDown || cmdOrCtrlDown; + + if (badgeTimer) { + clearTimeout(badgeTimer); + badgeTimer = null; + } + + if (modifierDown) { + badgeTimer = setTimeout(() => { + set({ showShortcutBadges: true }); + }, SHORTCUT_BADGE_DELAY_MS); + } else { + set({ showShortcutBadges: false }); + } +} + +export const useKeyboardShortcutsStore = create((set, get) => ({ commandCenterOpen: false, projectPickerOpen: false, shortcutsDialogOpen: false, capturingShortcut: false, altDown: false, cmdOrCtrlDown: false, + showShortcutBadges: false, sidebarShortcutWorkspaceTargets: [], visibleWorkspaceTargets: [], @@ -38,10 +65,19 @@ export const useKeyboardShortcutsStore = create((set) => setProjectPickerOpen: (open) => set({ projectPickerOpen: open }), setShortcutsDialogOpen: (open) => set({ shortcutsDialogOpen: open }), setCapturingShortcut: (capturing) => set({ capturingShortcut: capturing }), - setAltDown: (down) => set({ altDown: down }), - setCmdOrCtrlDown: (down) => set({ cmdOrCtrlDown: down }), + setAltDown: (down) => { + set({ altDown: down }); + updateBadgeTimer(set, get); + }, + setCmdOrCtrlDown: (down) => { + set({ cmdOrCtrlDown: down }); + updateBadgeTimer(set, get); + }, setSidebarShortcutWorkspaceTargets: (targets) => set({ sidebarShortcutWorkspaceTargets: targets }), setVisibleWorkspaceTargets: (targets) => set({ visibleWorkspaceTargets: targets }), - resetModifiers: () => set({ altDown: false, cmdOrCtrlDown: false }), + resetModifiers: () => { + set({ altDown: false, cmdOrCtrlDown: false }); + updateBadgeTimer(set, get); + }, }));