From ef8e3cfb99edcfa13c47697214099230a89359a2 Mon Sep 17 00:00:00 2001
From: Johnny <johnnyjoygg@gmail.com>
Date: Fri, 2 Jan 2026 09:57:09 +0800
Subject: [PATCH] chore: remove unused keyboard shortcuts

---
 .../components/FocusModeOverlay.tsx           | 10 +---
 web/src/components/MemoEditor/constants.ts    |  3 --
 .../MemoEditor/hooks/useKeyboard.ts           | 14 ------
 web/src/components/MemoEditor/index.tsx       |  3 +-
 web/src/components/MemoView/MemoView.tsx      | 33 +------------
 web/src/components/MemoView/constants.ts      |  4 --
 web/src/components/MemoView/hooks/index.ts    |  1 -
 .../MemoView/hooks/useKeyboardShortcuts.ts    | 48 -------------------
 web/src/components/SearchBar.tsx              | 14 +-----
 web/src/components/map/LocationPicker.tsx     | 15 ++++--
 10 files changed, 16 insertions(+), 129 deletions(-)
 delete mode 100644 web/src/components/MemoView/hooks/useKeyboardShortcuts.ts

diff --git a/web/src/components/MemoEditor/components/FocusModeOverlay.tsx b/web/src/components/MemoEditor/components/FocusModeOverlay.tsx
index 871c89750..e9382163e 100644
--- a/web/src/components/MemoEditor/components/FocusModeOverlay.tsx
+++ b/web/src/components/MemoEditor/components/FocusModeOverlay.tsx
@@ -6,15 +6,7 @@ import type { FocusModeExitButtonProps, FocusModeOverlayProps } from "../types";
 export function FocusModeOverlay({ isActive, onToggle }: FocusModeOverlayProps) {
   if (!isActive) return null;
 
-  return (
-    <button
-      type="button"
-      className={FOCUS_MODE_STYLES.backdrop}
-      onClick={onToggle}
-      onKeyDown={(e) => e.key === "Escape" && onToggle()}
-      aria-label="Exit focus mode"
-    />
-  );
+  return <button type="button" className={FOCUS_MODE_STYLES.backdrop} onClick={onToggle} aria-label="Exit focus mode" />;
 }
 
 export function FocusModeExitButton({ isActive, onToggle, title }: FocusModeExitButtonProps) {
diff --git a/web/src/components/MemoEditor/constants.ts b/web/src/components/MemoEditor/constants.ts
index 1a8ef8300..477d1cc26 100644
--- a/web/src/components/MemoEditor/constants.ts
+++ b/web/src/components/MemoEditor/constants.ts
@@ -10,9 +10,6 @@ export const FOCUS_MODE_STYLES = {
   exitButton: "absolute top-2 right-2 z-10 opacity-60 hover:opacity-100",
 } as const;
 
-export const FOCUS_MODE_TOGGLE_KEY = "f";
-export const FOCUS_MODE_EXIT_KEY = "Escape";
-
 export const EDITOR_HEIGHT = {
   // Max height for normal mode - focus mode uses flex-1 to grow dynamically
   normal: "max-h-[50vh]",
diff --git a/web/src/components/MemoEditor/hooks/useKeyboard.ts b/web/src/components/MemoEditor/hooks/useKeyboard.ts
index 1cd22ada3..e90537503 100644
--- a/web/src/components/MemoEditor/hooks/useKeyboard.ts
+++ b/web/src/components/MemoEditor/hooks/useKeyboard.ts
@@ -1,30 +1,16 @@
 import { useEffect } from "react";
-import { FOCUS_MODE_TOGGLE_KEY } from "../constants";
 import type { EditorRefActions } from "../Editor";
 
 interface UseKeyboardOptions {
   onSave: () => void;
-  onToggleFocusMode?: () => void;
 }
 
 export const useKeyboard = (_editorRef: React.RefObject<EditorRefActions | null>, options: UseKeyboardOptions) => {
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
-      // Cmd/Ctrl + Enter to save
       if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
         event.preventDefault();
         options.onSave();
-        return;
-      }
-
-      // 'f' key to toggle focus mode (only if no modifiers and not in input)
-      if (event.key === FOCUS_MODE_TOGGLE_KEY && !event.metaKey && !event.ctrlKey && !event.altKey && !event.shiftKey) {
-        const target = event.target as HTMLElement;
-        // Don't trigger if user is typing in an input/textarea
-        if (target.tagName !== "INPUT" && target.tagName !== "TEXTAREA" && !target.isContentEditable) {
-          event.preventDefault();
-          options.onToggleFocusMode?.();
-        }
       }
     };
 
diff --git a/web/src/components/MemoEditor/index.tsx b/web/src/components/MemoEditor/index.tsx
index 6076f2fb6..2d0b0169c 100644
--- a/web/src/components/MemoEditor/index.tsx
+++ b/web/src/components/MemoEditor/index.tsx
@@ -62,8 +62,7 @@ const MemoEditorImpl: React.FC<MemoEditorProps> = ({
     dispatch(actions.toggleFocusMode());
   };
 
-  // Keyboard shortcuts
-  useKeyboard(editorRef, { onSave: handleSave, onToggleFocusMode: handleToggleFocusMode });
+  useKeyboard(editorRef, { onSave: handleSave });
 
   async function handleSave() {
     // Validate before saving
diff --git a/web/src/components/MemoView/MemoView.tsx b/web/src/components/MemoView/MemoView.tsx
index 33881205c..deea52554 100644
--- a/web/src/components/MemoView/MemoView.tsx
+++ b/web/src/components/MemoView/MemoView.tsx
@@ -5,31 +5,10 @@ import MemoEditor from "../MemoEditor";
 import PreviewImageDialog from "../PreviewImageDialog";
 import { MemoBody, MemoHeader } from "./components";
 import { MEMO_CARD_BASE_CLASSES } from "./constants";
-import { useImagePreview, useKeyboardShortcuts, useMemoActions, useMemoHandlers, useMemoViewDerivedState, useNsfwContent } from "./hooks";
+import { useImagePreview, useMemoActions, useMemoHandlers, useMemoViewDerivedState, useNsfwContent } from "./hooks";
 import { MemoViewContext } from "./MemoViewContext";
 import type { MemoViewProps } from "./types";
 
-/**
- * MemoView component displays a memo card with all its content, metadata, and interactive elements.
- *
- * Features:
- * - Displays memo content with markdown rendering
- * - Shows creator information and timestamps
- * - Supports inline editing with keyboard shortcuts (e = edit, a = archive)
- * - Handles NSFW content blurring
- * - Image preview on click
- * - Comments, reactions, and relations
- *
- * @example
- * ```tsx
- * <MemoView
- *   memo={memoData}
- *   showCreator
- *   showVisibility
- *   compact={false}
- * />
- * ```
- */
 const MemoView: React.FC<MemoViewProps> = (props: MemoViewProps) => {
   const { memo: memoData, className } = props;
   const cardRef = useRef<HTMLDivElement>(null);
@@ -40,7 +19,7 @@ const MemoView: React.FC<MemoViewProps> = (props: MemoViewProps) => {
   const { isArchived, readonly, parentPage } = useMemoViewDerivedState(memoData, props.parentPage);
   const { nsfw, showNSFWContent, toggleNsfwVisibility } = useNsfwContent(memoData, props.showNsfwContent);
   const { previewState, openPreview, setPreviewOpen } = useImagePreview();
-  const { archiveMemo, unpinMemo } = useMemoActions(memoData, isArchived);
+  const { unpinMemo } = useMemoActions(memoData, isArchived);
 
   const handleEditorConfirm = () => setShowEditor(false);
   const handleEditorCancel = () => setShowEditor(false);
@@ -53,14 +32,6 @@ const MemoView: React.FC<MemoViewProps> = (props: MemoViewProps) => {
     openEditor,
     openPreview,
   });
-  useKeyboardShortcuts(cardRef, {
-    enabled: true,
-    readonly,
-    showEditor,
-    isArchived,
-    onEdit: openEditor,
-    onArchive: archiveMemo,
-  });
 
   const contextValue = useMemo(
     () => ({
diff --git a/web/src/components/MemoView/constants.ts b/web/src/components/MemoView/constants.ts
index 485430096..b16cce5f7 100644
--- a/web/src/components/MemoView/constants.ts
+++ b/web/src/components/MemoView/constants.ts
@@ -1,8 +1,4 @@
 export const MEMO_CARD_BASE_CLASSES =
   "relative group flex flex-col justify-start items-start bg-card w-full px-4 py-3 mb-2 gap-2 text-card-foreground rounded-lg border border-border transition-colors";
 
-export const KEYBOARD_SHORTCUTS = { EDIT: "e", ARCHIVE: "a" } as const;
-
-export const TEXT_INPUT_TYPES = ["text", "search", "email", "password", "url", "tel", "number"] as const;
-
 export const RELATIVE_TIME_THRESHOLD_MS = 1000 * 60 * 60 * 24;
diff --git a/web/src/components/MemoView/hooks/index.ts b/web/src/components/MemoView/hooks/index.ts
index e85401901..8d6c583db 100644
--- a/web/src/components/MemoView/hooks/index.ts
+++ b/web/src/components/MemoView/hooks/index.ts
@@ -1,5 +1,4 @@
 export { useImagePreview } from "./useImagePreview";
-export { useKeyboardShortcuts } from "./useKeyboardShortcuts";
 export { useMemoActions } from "./useMemoActions";
 export { useMemoHandlers } from "./useMemoHandlers";
 export { useMemoViewDerivedState } from "./useMemoViewDerivedState";
diff --git a/web/src/components/MemoView/hooks/useKeyboardShortcuts.ts b/web/src/components/MemoView/hooks/useKeyboardShortcuts.ts
deleted file mode 100644
index 07e4a02ab..000000000
--- a/web/src/components/MemoView/hooks/useKeyboardShortcuts.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { useEffect } from "react";
-import { KEYBOARD_SHORTCUTS, TEXT_INPUT_TYPES } from "../constants";
-
-export interface UseKeyboardShortcutsOptions {
-  enabled: boolean;
-  readonly: boolean;
-  showEditor: boolean;
-  isArchived: boolean;
-  onEdit: () => void;
-  onArchive: () => Promise<void>;
-}
-
-const isTextInputElement = (element: HTMLElement | null): boolean => {
-  if (!element) return false;
-  if (element.isContentEditable) return true;
-  if (element instanceof HTMLTextAreaElement) return true;
-  if (element instanceof HTMLInputElement) {
-    return TEXT_INPUT_TYPES.includes(element.type as (typeof TEXT_INPUT_TYPES)[number]);
-  }
-  return false;
-};
-
-export const useKeyboardShortcuts = (cardRef: React.RefObject<HTMLDivElement | null>, options: UseKeyboardShortcutsOptions) => {
-  const { enabled, readonly, showEditor, isArchived, onEdit, onArchive } = options;
-
-  useEffect(() => {
-    if (!enabled || readonly || showEditor || !cardRef.current) return;
-
-    const cardEl = cardRef.current;
-    const handleKeyDown = (event: KeyboardEvent) => {
-      const target = event.target as HTMLElement | null;
-      if (!cardEl.contains(target) || isTextInputElement(target)) return;
-      if (event.metaKey || event.ctrlKey || event.altKey) return;
-
-      const key = event.key.toLowerCase();
-      if (key === KEYBOARD_SHORTCUTS.EDIT) {
-        event.preventDefault();
-        onEdit();
-      } else if (key === KEYBOARD_SHORTCUTS.ARCHIVE && !isArchived) {
-        event.preventDefault();
-        onArchive();
-      }
-    };
-
-    cardEl.addEventListener("keydown", handleKeyDown);
-    return () => cardEl.removeEventListener("keydown", handleKeyDown);
-  }, [enabled, readonly, showEditor, isArchived, onEdit, onArchive, cardRef]);
-};
diff --git a/web/src/components/SearchBar.tsx b/web/src/components/SearchBar.tsx
index 3a3e455b4..5fdb0ebd1 100644
--- a/web/src/components/SearchBar.tsx
+++ b/web/src/components/SearchBar.tsx
@@ -1,5 +1,5 @@
 import { SearchIcon } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import { useMemoFilterContext } from "@/contexts/MemoFilterContext";
 import { cn } from "@/lib/utils";
 import { useTranslate } from "@/utils/i18n";
@@ -11,18 +11,6 @@ const SearchBar = () => {
   const [queryText, setQueryText] = useState("");
   const inputRef = useRef<HTMLInputElement>(null);
 
-  useEffect(() => {
-    const handleGlobalShortcut = (event: KeyboardEvent) => {
-      if ((event.metaKey || event.ctrlKey) && event.key === "/") {
-        event.preventDefault();
-        inputRef.current?.focus();
-      }
-    };
-
-    window.addEventListener("keydown", handleGlobalShortcut);
-    return () => window.removeEventListener("keydown", handleGlobalShortcut);
-  }, []);
-
   const onTextChange = (event: React.FormEvent<HTMLInputElement>) => {
     setQueryText(event.currentTarget.value);
   };
diff --git a/web/src/components/map/LocationPicker.tsx b/web/src/components/map/LocationPicker.tsx
index f5005e4ff..3315780dd 100644
--- a/web/src/components/map/LocationPicker.tsx
+++ b/web/src/components/map/LocationPicker.tsx
@@ -27,7 +27,7 @@ const LocationMarker = (props: MarkerProps) => {
       // Call the parent onChange function.
       props.onChange(e.latlng);
     },
-    locationfound() { },
+    locationfound() {},
   });
 
   useEffect(() => {
@@ -224,12 +224,19 @@ const LeafletMap = (props: MapProps) => {
   const position = props.latlng || DEFAULT_CENTER_LAT_LNG;
 
   return (
-    <MapContainer className="w-full h-72" center={position} zoom={13} scrollWheelZoom={false} zoomControl={false} attributionControl={false}>
+    <MapContainer
+      className="w-full h-72"
+      center={position}
+      zoom={13}
+      scrollWheelZoom={false}
+      zoomControl={false}
+      attributionControl={false}
+    >
       <ThemedTileLayer />
-      <LocationMarker position={position} readonly={props.readonly} onChange={props.onChange ? props.onChange : () => { }} />
+      <LocationMarker position={position} readonly={props.readonly} onChange={props.onChange ? props.onChange : () => {}} />
       <MapControls position={props.latlng} />
       <MapCleanup />
-    </MapContainer >
+    </MapContainer>
   );
 };