feat: customize shortcuts (#3786)

* refactor: update command categories and labels for consistency

- Replaced existing command categories with more descriptive names such as "Entry Render", "Global", "Integration", "Layout", "List", "Settings", "Timeline", and "Subscription".
- Updated command labels to remove unnecessary prefixes, enhancing clarity and uniformity across the application.
- Adjusted imports to include the new CommandCategory type for better type safety.

This refactor improves the organization and readability of command definitions, contributing to a more intuitive user experience.

Signed-off-by: Innei <[email protected]>

* update

Signed-off-by: Innei <[email protected]>

* update

Signed-off-by: Innei <[email protected]>

* update

Signed-off-by: Innei <[email protected]>

* feat: enhance command shortcut customization and recording functionality

- Added a new hotkey scope for recording commands.
- Introduced a mechanism to override command shortcuts using local storage.
- Implemented a key recorder for capturing user-defined shortcuts with validation rules.
- Updated the UI for editing command shortcuts, allowing users to customize their key bindings more intuitively.

This enhancement improves user experience by providing more flexibility in managing command shortcuts.

Signed-off-by: Innei <[email protected]>

* feat: enhance command shortcut customization by adding new commands

- Updated the default command shortcut for toggling the timeline column.
- Expanded the set of customizable commands to include various subscription and entry actions, improving user flexibility in managing shortcuts.

This update enhances the customization capabilities for command shortcuts, allowing users to tailor their experience more effectively.

Signed-off-by: Innei <[email protected]>

* refactor: scope

Signed-off-by: Innei <[email protected]>

* feat: add global commands for quick add and toggle corner play

- Introduced new global commands: "Quick Add" and "Toggle Corner Play" with associated keyboard shortcuts.
- Updated command IDs and types to accommodate the new functionalities.
- Enhanced the event bus integration for better command handling.

This update improves user interaction by providing quick access to essential features through keyboard shortcuts.

Signed-off-by: Innei <[email protected]>

* refactor: remove unused hotkey scope and streamline command bindings

- Deleted the `useSwitchHotkeyScope` hook and its references to simplify the hotkey management.
- Updated command bindings to ensure they function correctly without the removed scope.
- Enhanced the logic for determining when commands should be active based on the current focus and active scopes.

This refactor improves the clarity and efficiency of the command handling system, reducing unnecessary complexity.

Signed-off-by: Innei <[email protected]>

* feat: add shortcut conflict detection and enhance shortcut customization UI

- Introduced a new hook `useIsShortcutConflict` to check for conflicts between user-defined shortcuts and existing ones.
- Updated the `EditableCommandShortcutItem` component to visually indicate when a shortcut is customized by the user.
- Enhanced the `ShortcutInputWrapper` to display conflict warnings and improve user interaction when editing shortcuts.

This update improves the user experience by allowing users to easily identify and resolve shortcut conflicts, enhancing the overall customization capabilities of command shortcuts.

Signed-off-by: Innei <[email protected]>

* feat: update command structure and enhance shortcut descriptions

- Changed the command ID for toggling the timeline column to toggle the subscription column for better clarity.
- Updated command labels to include descriptions for various commands, improving user understanding of their functionalities.
- Enhanced localization files to reflect the new command descriptions, ensuring a consistent user experience across different languages.

This update improves the usability of command shortcuts by providing clearer descriptions and a more intuitive command structure.

Signed-off-by: Innei <[email protected]>

* feat: introduce new keyboard shortcuts system

- Added a comprehensive command shortcut system that supports multiple categories including global operations, layout controls, timeline navigation, content rendering, subscription management, and entry actions.
- Users can access and customize key bindings through `Settings` -> `Shortcuts`.

This enhancement improves user efficiency by providing a structured way to manage keyboard shortcuts.

Signed-off-by: Innei <[email protected]>

* refactor

Signed-off-by: Innei <[email protected]>

* feat: enhance focusable component with presets for improved command handling

- Introduced `FocusablePresets` to encapsulate common focus-related logic, improving code reusability.
- Updated command bindings in various components to utilize the new presets, streamlining the focus management process.
- Enhanced the `Focusable` component to support additional scopes, improving the overall functionality and user experience.

This update simplifies the management of focusable elements and enhances the command handling system.

Signed-off-by: Innei <[email protected]>

* refactor: enhance Focusable component with asChild prop for improved flexibility

- Updated the Focusable component to support an `asChild` prop, allowing it to render a child element with focusable properties.
- Modified the BizFocusableProps interface to align with the new FocusableProps structure.
- Adjusted usage in the FeedColumn component to utilize the new `asChild` feature, enhancing the component's flexibility.

This change improves the usability of the Focusable component by allowing it to wrap existing elements while maintaining focus management capabilities.

Signed-off-by: Innei <[email protected]>

* refactor: update WindowUnderBlur and FeedColumn components for improved structure and functionality

- Refactored the WindowUnderBlur component to accept a customizable `as` prop, enhancing its flexibility in rendering.
- Updated the FeedColumn component to utilize the new `WindowUnderBlur` structure, allowing it to wrap the Focusable component directly.
- Enhanced the Focusable component's logic to include additional conditions for the SubscriptionList scope, improving focus management.

These changes streamline the component architecture and improve the overall user experience by allowing for more versatile component usage.

Signed-off-by: Innei <[email protected]>

* refactor: update command bindings in SubscriptionList for improved focus management

- Replaced the `isFocus` variable with `inSubscriptionScope` to streamline focus handling in the SubscriptionList component.
- Updated command bindings and hotkey conditions to utilize the new `inSubscriptionScope` logic, enhancing the clarity and functionality of focus management.

These changes improve the overall structure and usability of the SubscriptionList component, ensuring better focus handling within the subscription context.

Signed-off-by: Innei <[email protected]>

---------

Signed-off-by: Innei <[email protected]>

Author: Innei

apps/desktop/changelog/next.md

@@ -2,6 +2,8 @@
 
 ## Shiny new things
 
+- **New Keyboard Shortcuts System**: Introduced a comprehensive command shortcut system supporting multiple categories including global operations, layout controls, timeline navigation, content rendering, subscription management, and entry actions. Access all available shortcuts and customize key bindings via `Settings` -> `Shortcuts`.
+
 ## Improvements
 
 ## No longer broken

apps/desktop/layer/renderer/src/components/common/Focusable.tsx

@@ -0,0 +1,27 @@
+import type { FocusableProps } from "@follow/components/common/Focusable/Focusable.js"
+import { Focusable as FocusableComponent } from "@follow/components/common/Focusable/Focusable.js"
+
+import { FloatingLayerScope, HotkeyScope } from "~/constants"
+
+interface BizFocusableProps extends Omit<FocusableProps, "scope"> {
+  scope: HotkeyScope
+}
+export const Focusable = FocusableComponent as Component<
+  Prettify<BizFocusableProps> &
+    React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+>
+
+export const FocusablePresets = {
+  isNotFloatingLayerScope: (v: Set<string>) => !FloatingLayerScope.some((s) => v.has(s)),
+  isSubscriptionList: (scope: Set<string>) => {
+    return (
+      scope.size === 0 ||
+      scope.has(HotkeyScope.SubscriptionList) ||
+      (scope.has(HotkeyScope.Home) && scope.size === 1)
+    )
+  },
+
+  isSubscriptionOrTimeline: (v: Set<string>) => {
+    return v.has(HotkeyScope.SubscriptionList) || v.has(HotkeyScope.Timeline) || v.size === 0
+  },
+}

apps/desktop/layer/renderer/src/components/ui/background/WindowUnderBlur.tsx

@@ -1,22 +1,31 @@
-import { Focusable } from "@follow/components/common/Focusable/index.js"
 import { SYSTEM_CAN_UNDER_BLUR_WINDOW } from "@follow/shared/constants"
 import { cn } from "@follow/utils/utils"
+import type * as React from "react"
+import type { ComponentPropsWithoutRef, ElementType } from "react"
 
 import { useUISettingKey } from "~/atoms/settings/ui"
 
-type Props = Component<
-  React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
->
-const MacOSVibrancy: Props = ({ children, ...rest }) => <Focusable {...rest}>{children}</Focusable>
+type Props<T extends ElementType = "div"> = {
+  as?: T
+  ref?: React.Ref<HTMLElement>
+} & ComponentPropsWithoutRef<T>
 
-const Noop: Props = ({ children, className, ...rest }) => (
-  <Focusable className={cn("bg-sidebar", className)} {...rest}>
-    {children}
-  </Focusable>
-)
+const MacOSVibrancy = <T extends ElementType = "div">({ children, as, ...rest }: Props<T>) => {
+  const Component = as || "div"
+  return <Component {...rest}>{children}</Component>
+}
 
-export const WindowUnderBlur: Props = SYSTEM_CAN_UNDER_BLUR_WINDOW
-  ? (props) => {
+const Noop = <T extends ElementType = "div">({ children, className, as, ...rest }: Props<T>) => {
+  const Component = as || "div"
+  return (
+    <Component className={cn("bg-sidebar", className)} {...rest}>
+      {children}
+    </Component>
+  )
+}
+
+export const WindowUnderBlur = SYSTEM_CAN_UNDER_BLUR_WINDOW
+  ? <T extends ElementType = "div">(props: Props<T>) => {
       const opaqueSidebar = useUISettingKey("opaqueSidebar")
       if (opaqueSidebar) {
         return <Noop {...props} />

apps/desktop/layer/renderer/src/components/ui/dropdown-menu/dropdown-menu.tsx

@@ -6,19 +6,15 @@ import { cn } from "@follow/utils/utils"
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
 import * as React from "react"
 
+import { Focusable } from "~/components/common/Focusable"
 import { HotkeyScope } from "~/constants"
-import { useConditionalHotkeyScope } from "~/hooks/common"
 
 const DropdownMenu: typeof DropdownMenuPrimitive.Root = (props) => {
-  const [open, setOpen] = React.useState(!!props.open)
-  useConditionalHotkeyScope(HotkeyScope.DropdownMenu, open)
-
   return (
     <DropdownMenuPrimitive.Root
       {...props}
       onOpenChange={useTypeScriptHappyCallback(
         (open) => {
-          setOpen(open)
           props.onOpenChange?.(open)
         },
         [props.onOpenChange],
@@ -95,16 +91,18 @@ const DropdownMenuContent = ({
 }) => {
   return (
     <RootPortal>
-      <DropdownMenuPrimitive.Content
-        ref={ref}
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-material-medium backdrop-blur-background text-text shadow-context-menu z-[60] min-w-32 overflow-hidden rounded-[6px] border p-1",
-          "motion-scale-in-75 motion-duration-150 text-body lg:animate-none",
-          className,
-        )}
-        {...props}
-      />
+      <Focusable scope={HotkeyScope.DropdownMenu} className="contents">
+        <DropdownMenuPrimitive.Content
+          ref={ref}
+          sideOffset={sideOffset}
+          className={cn(
+            "bg-material-medium backdrop-blur-background text-text shadow-context-menu z-[60] min-w-32 overflow-hidden rounded-[6px] border p-1",
+            "motion-scale-in-75 motion-duration-150 text-body lg:animate-none",
+            className,
+          )}
+          {...props}
+        />
+      </Focusable>
     </RootPortal>
   )
 }

apps/desktop/layer/renderer/src/components/ui/media/VideoPlayer.tsx

@@ -1,4 +1,4 @@
-import { Focusable } from "@follow/components/common/Focusable/index.js"
+"~/components/common/Focusable.js"
 import { Spring } from "@follow/components/constants/spring.js"
 import { ActionButton, MotionButtonBase } from "@follow/components/ui/button/index.js"
 import type { HTMLMediaState } from "@follow/hooks"
@@ -23,7 +23,9 @@ import { createContext, useContext, useContextSelector } from "use-context-selec
 import { useEventCallback } from "usehooks-ts"
 
 import { AudioPlayer } from "~/atoms/player"
+import { Focusable } from "~/components/common/Focusable"
 import { IconScaleTransition } from "~/components/ux/transition/icon"
+import { HotkeyScope } from "~/constants"
 
 import { VolumeSlider } from "./VolumeSlider"
 
@@ -137,7 +139,11 @@ export const VideoPlayer = ({
   )
 
   return (
-    <Focusable className="center group relative size-full" ref={wrapperRef}>
+    <Focusable
+      className="center group relative size-full"
+      ref={wrapperRef}
+      scope={HotkeyScope.VideoPlayer}
+    >
       {element}
       <div className="center pointer-events-none absolute inset-0">
         <m.div

apps/desktop/layer/renderer/src/components/ui/modal/stacked/modal.tsx

@@ -27,11 +27,11 @@ import { useEventCallback } from "usehooks-ts"
 
 import { useUISettingKey } from "~/atoms/settings/ui"
 import { AppErrorBoundary } from "~/components/common/AppErrorBoundary"
+import { Focusable } from "~/components/common/Focusable"
 import { SafeFragment } from "~/components/common/Fragment"
 import { m } from "~/components/common/Motion"
 import { ErrorComponentType } from "~/components/errors/enum"
 import { ElECTRON_CUSTOM_TITLEBAR_HEIGHT, HotkeyScope } from "~/constants"
-import { useConditionalHotkeyScope } from "~/hooks/common"
 
 import { modalStackAtom } from "./atom"
 import { MODAL_STACK_Z_INDEX, modalMontionConfig } from "./constants"
@@ -192,8 +192,6 @@ export const ModalInternal = memo(function Modal({
     }
   }, [currentIsClosing])
 
-  useConditionalHotkeyScope(HotkeyScope.Modal, true)
-
   const modalStyle = resizeableStyle
   const { handleSelectStart, handleDetectSelectEnd, isSelectingRef } = useModalSelect()
   const handleClickOutsideToDismiss = useCallback(
@@ -253,7 +251,8 @@ export const ModalInternal = memo(function Modal({
               onPointerDownOutside={preventDefault}
               onOpenAutoFocus={openAutoFocus}
             >
-              <div
+              <Focusable
+                scope={HotkeyScope.Modal}
                 ref={setEdgeElementRef}
                 className={cn(
                   "no-drag-region fixed",
@@ -282,7 +281,7 @@ export const ModalInternal = memo(function Modal({
                     <CustomModalComponent>{finalChildren}</CustomModalComponent>
                   </ModalContext>
                 </div>
-              </div>
+              </Focusable>
             </Dialog.Content>
           </Dialog.Portal>
         </Dialog.Root>
@@ -304,7 +303,8 @@ export const ModalInternal = memo(function Modal({
             onPointerDownOutside={preventDefault}
             onOpenAutoFocus={openAutoFocus}
           >
-            <div
+            <Focusable
+              scope={HotkeyScope.Modal}
               ref={setEdgeElementRef}
               onContextMenu={preventDefault}
               className={cn(
@@ -395,7 +395,7 @@ export const ModalInternal = memo(function Modal({
                   </div>
                 </ResizeSwitch>
               </m.div>
-            </div>
+            </Focusable>
           </Dialog.Content>
         </Dialog.Portal>
       </Dialog.Root>

apps/desktop/layer/renderer/src/constants/copy.ts

@@ -1,7 +1,9 @@
 import { IN_ELECTRON } from "@follow/shared/constants"
 
 const OpenInBrowser = (_t?: any) =>
-  IN_ELECTRON ? "keys.entry.openInBrowser" : "keys.entry.openInNewTab"
+  IN_ELECTRON
+    ? tShortcuts("command.subscription.open_in_browser.title")
+    : tShortcuts("command.subscription.open_in_tab.title")
 
 export const COPY_MAP = {
   OpenInBrowser,

apps/desktop/layer/renderer/src/constants/hotkeys.ts

@@ -3,10 +3,19 @@ export enum HotkeyScope {
   Menu = "menu",
   Modal = "modal",
   DropdownMenu = "dropdown-menu",
+  Recording = "recording",
 
   // Atom Scope
+  VideoPlayer = "video-player",
   Timeline = "timeline",
   EntryRender = "entry-render",
   SubscriptionList = "subscription-list",
   SubLayer = "sub-layer",
 }
+
+export const FloatingLayerScope = [
+  HotkeyScope.Modal,
+  HotkeyScope.DropdownMenu,
+  HotkeyScope.Menu,
+  HotkeyScope.Recording,
+] as const