refactor: streamline tag sorting and update coordinate handling in MemoEditor components

web/src/components/MemoEditor/Editor/TagSuggestions.tsx

@@ -13,11 +13,9 @@ interface TagSuggestionsProps {
 
 const TagSuggestions = observer(({ editorRef, editorActions }: TagSuggestionsProps) => {
   const sortedTags = useMemo(() => {
-    const tags = Object.entries(userStore.state.tagCount)
-      .sort((a, b) => b[1] - a[1]) // Sort by usage count (descending)
+    return Object.entries(userStore.state.tagCount)
+      .sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0]))
       .map(([tag]) => tag);
-    // Secondary sort by name for stable ordering
-    return tags.sort((a, b) => (userStore.state.tagCount[a] === userStore.state.tagCount[b] ? a.localeCompare(b) : 0));
   }, [userStore.state.tagCount]);
 
   const { position, suggestions, selectedIndex, isVisible, handleItemSelect } = useSuggestions({

web/src/components/MemoEditor/Editor/index.tsx

@@ -8,8 +8,8 @@ import { useListCompletion } from "./useListCompletion";
 
 export interface EditorRefActions {
   getEditor: () => HTMLTextAreaElement | null;
-  focus: FunctionType;
-  scrollToCursor: FunctionType;
+  focus: () => void;
+  scrollToCursor: () => void;
   insertText: (text: string, prefix?: string, suffix?: string) => void;
   removeText: (start: number, length: number) => void;
   setContent: (text: string) => void;

web/src/components/MemoEditor/Toolbar/InsertMenu.tsx

@@ -214,8 +214,7 @@ const InsertMenu = observer((props: Props) => {
         state={location.state}
         locationInitialized={location.locationInitialized}
         onPositionChange={handlePositionChange}
-        onLatChange={location.handleLatChange}
-        onLngChange={location.handleLngChange}
+        onUpdateCoordinate={location.updateCoordinate}
         onPlaceholderChange={location.setPlaceholder}
         onCancel={handleLocationCancel}
         onConfirm={handleLocationConfirm}

web/src/components/MemoEditor/Toolbar/VisibilitySelector.tsx

@@ -18,7 +18,7 @@ const VisibilitySelector = (props: Props) => {
     { value: Visibility.PRIVATE, label: t("memo.visibility.private") },
     { value: Visibility.PROTECTED, label: t("memo.visibility.protected") },
     { value: Visibility.PUBLIC, label: t("memo.visibility.public") },
-  ];
+  ] as const;
 
   const currentLabel = visibilityOptions.find((option) => option.value === value)?.label || "";
 

web/src/components/MemoEditor/components/ErrorBoundary.tsx

-import { AlertCircle } from "lucide-react";
-import React from "react";
-
-interface Props {
-  children: React.ReactNode;
-  fallback?: React.ReactNode;
-}
-
-interface State {
-  hasError: boolean;
-  error: Error | null;
-}
-
-class MemoEditorErrorBoundary extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = { hasError: false, error: null };
-  }
-
-  static getDerivedStateFromError(error: Error): State {
-    // Update state so the next render will show the fallback UI
-    return { hasError: true, error };
-  }
-
-  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
-    // Log the error to console for debugging
-    console.error("MemoEditor Error:", error, errorInfo);
-    // You can also log the error to an error reporting service here
-  }
-
-  handleReset = () => {
-    this.setState({ hasError: false, error: null });
-  };
-
-  render() {
-    if (this.state.hasError) {
-      // Custom fallback UI
-      if (this.props.fallback) {
-        return this.props.fallback;
-      }
-
-      // Default fallback UI
-      return (
-        <div className="w-full flex flex-col justify-center items-center bg-card px-4 py-8 rounded-lg border border-destructive/50">
-          <AlertCircle className="w-8 h-8 text-destructive mb-3" />
-          <h3 className="text-lg font-semibold text-foreground mb-2">Editor Error</h3>
-          <p className="text-sm text-muted-foreground mb-4 text-center max-w-md">
-            Something went wrong with the memo editor. Please try refreshing the page.
-          </p>
-          {this.state.error && (
-            <details className="text-xs text-muted-foreground mb-4 max-w-md">
-              <summary className="cursor-pointer hover:text-foreground">Error details</summary>
-              <pre className="mt-2 p-2 bg-muted rounded text-xs overflow-x-auto">{this.state.error.toString()}</pre>
-            </details>
-          )}
-          <button
-            onClick={this.handleReset}
-            className="px-4 py-2 bg-primary text-primary-foreground rounded hover:bg-primary/90 transition-colors"
-          >
-            Try Again
-          </button>
-        </div>
-      );
-    }
-
-    return this.props.children;
-  }
-}
-
-export default MemoEditorErrorBoundary;

web/src/components/MemoEditor/components/LocationDialog.tsx

@@ -15,8 +15,7 @@ interface LocationDialogProps {
   state: LocationState;
   locationInitialized: boolean;
   onPositionChange: (position: LatLng) => void;
-  onLatChange: (value: string) => void;
-  onLngChange: (value: string) => void;
+  onUpdateCoordinate: (type: "lat" | "lng", value: string) => void;
   onPlaceholderChange: (value: string) => void;
   onCancel: () => void;
   onConfirm: () => void;
@@ -28,8 +27,7 @@ export const LocationDialog = ({
   state,
   locationInitialized,
   onPositionChange,
-  onLatChange,
-  onLngChange,
+  onUpdateCoordinate,
   onPlaceholderChange,
   onCancel,
   onConfirm,
@@ -67,7 +65,7 @@ export const LocationDialog = ({
                   min="-90"
                   max="90"
                   value={latInput}
-                  onChange={(e) => onLatChange(e.target.value)}
+                  onChange={(e) => onUpdateCoordinate("lat", e.target.value)}
                   className="h-9"
                 />
               </div>
@@ -83,7 +81,7 @@ export const LocationDialog = ({
                   min="-180"
                   max="180"
                   value={lngInput}
-                  onChange={(e) => onLngChange(e.target.value)}
+                  onChange={(e) => onUpdateCoordinate("lng", e.target.value)}
                   className="h-9"
                 />
               </div>

web/src/components/MemoEditor/components/index.ts

 // UI components for MemoEditor
-export { default as ErrorBoundary } from "./ErrorBoundary";
 export { FocusModeExitButton, FocusModeOverlay } from "./FocusModeOverlay";
 export { LinkMemoDialog } from "./LinkMemoDialog";
 export { LocationDialog } from "./LocationDialog";

web/src/components/MemoEditor/hooks/useLocation.ts

@@ -23,25 +23,16 @@ export const useLocation = (initialLocation?: Location) => {
   };
 
   const handlePositionChange = (position: LatLng) => {
-    if (!locationInitialized) {
-      setLocationInitialized(true);
-    }
+    if (!locationInitialized) setLocationInitialized(true);
     updatePosition(position);
   };
 
-  const handleLatChange = (value: string) => {
-    setState((prev) => ({ ...prev, latInput: value }));
-    const lat = parseFloat(value);
-    if (!isNaN(lat) && lat >= -90 && lat <= 90 && state.position) {
-      updatePosition(new LatLng(lat, state.position.lng));
-    }
-  };
-
-  const handleLngChange = (value: string) => {
-    setState((prev) => ({ ...prev, lngInput: value }));
-    const lng = parseFloat(value);
-    if (!isNaN(lng) && lng >= -180 && lng <= 180 && state.position) {
-      updatePosition(new LatLng(state.position.lat, lng));
+  const updateCoordinate = (type: "lat" | "lng", value: string) => {
+    setState((prev) => ({ ...prev, [type === "lat" ? "latInput" : "lngInput"]: value }));
+    const num = parseFloat(value);
+    const isValid = type === "lat" ? !isNaN(num) && num >= -90 && num <= 90 : !isNaN(num) && num >= -180 && num <= 180;
+    if (isValid && state.position) {
+      updatePosition(type === "lat" ? new LatLng(num, state.position.lng) : new LatLng(state.position.lat, num));
     }
   };
 
@@ -74,8 +65,7 @@ export const useLocation = (initialLocation?: Location) => {
     state,
     locationInitialized,
     handlePositionChange,
-    handleLatChange,
-    handleLngChange,
+    updateCoordinate,
     setPlaceholder,
     reset,
     getLocation,

web/src/components/MemoEditor/index.tsx

@@ -14,7 +14,7 @@ import { MemoRelation_Type } from "@/types/proto/api/v1/memo_service_pb";
 import { useTranslate } from "@/utils/i18n";
 import DateTimeInput from "../DateTimeInput";
 import { AttachmentList, LocationDisplay, RelationList } from "../memo-metadata";
-import { ErrorBoundary, FocusModeExitButton, FocusModeOverlay } from "./components";
+import { FocusModeExitButton, FocusModeOverlay } from "./components";
 import { FOCUS_MODE_STYLES, LOCALSTORAGE_DEBOUNCE_DELAY } from "./constants";
 import Editor, { type EditorRefActions } from "./Editor";
 import {
@@ -224,7 +224,6 @@ const MemoEditor = observer((props: Props) => {
   const allowSave = (hasContent || attachmentList.length > 0 || localFiles.length > 0) && !isUploadingAttachment && !isRequesting;
 
   return (
-    <ErrorBoundary>
     <MemoEditorContext.Provider
       value={{
         attachmentList,
@@ -330,7 +329,6 @@ const MemoEditor = observer((props: Props) => {
         </div>
       )}
     </MemoEditorContext.Provider>
-    </ErrorBoundary>
   );
 });