RSSNext
diff --git a/‎apps/desktop/changelog/next.md
Copy file name to clipboard
+2Lines changed: 2 additions & 0 deletions b/‎apps/desktop/changelog/next.md
Copy file name to clipboard
+2Lines changed: 2 additions & 0 deletions
diff --git a/‎apps/desktop/layer/renderer/src/components/common/Focusable.tsx
Copy file name to clipboard
+27Lines changed: 27 additions & 0 deletions b/‎apps/desktop/layer/renderer/src/components/common/Focusable.tsx
Copy file name to clipboard
+27Lines changed: 27 additions & 0 deletions
diff --git a/‎apps/desktop/layer/renderer/src/components/ui/background/WindowUnderBlur.tsx
Copy file name to clipboard
+21-12Lines changed: 21 additions & 12 deletions b/‎apps/desktop/layer/renderer/src/components/ui/background/WindowUnderBlur.tsx
Copy file name to clipboard
+21-12Lines changed: 21 additions & 12 deletions
diff --git a/‎apps/desktop/layer/renderer/src/components/ui/dropdown-menu/dropdown-menu.tsx
Copy file name to clipboard
+13-15Lines changed: 13 additions & 15 deletions b/‎apps/desktop/layer/renderer/src/components/ui/dropdown-menu/dropdown-menu.tsx
Copy file name to clipboard
+13-15Lines changed: 13 additions & 15 deletions
diff --git a/‎apps/desktop/layer/renderer/src/components/ui/media/VideoPlayer.tsx
Copy file name to clipboard
+8-2Lines changed: 8 additions & 2 deletions b/‎apps/desktop/layer/renderer/src/components/ui/media/VideoPlayer.tsx
Copy file name to clipboard
+8-2Lines changed: 8 additions & 2 deletions
diff --git a/‎apps/desktop/layer/renderer/src/components/ui/modal/stacked/modal.tsx
Copy file name to clipboard
+7-7Lines changed: 7 additions & 7 deletions b/‎apps/desktop/layer/renderer/src/components/ui/modal/stacked/modal.tsx
Copy file name to clipboard
+7-7Lines changed: 7 additions & 7 deletions
diff --git a/‎apps/desktop/layer/renderer/src/constants/copy.ts
Copy file name to clipboard
+3-1Lines changed: 3 additions & 1 deletion b/‎apps/desktop/layer/renderer/src/constants/copy.ts
Copy file name to clipboard
+3-1Lines changed: 3 additions & 1 deletion
diff --git a/‎apps/desktop/layer/renderer/src/constants/hotkeys.ts
Copy file name to clipboard
+9Lines changed: 9 additions & 0 deletions b/‎apps/desktop/layer/renderer/src/constants/hotkeys.ts
Copy file name to clipboard
+9Lines changed: 9 additions & 0 deletions
@@ -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
 
@@ -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
+  },
+}
@@ -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} />
 
@@ -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>
   )
 }
 
@@ -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
 
@@ -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>
 
@@ -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,
 
@@ -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