refactor: remove MemoContentContext and integrate MemoViewContext

- Deleted MemoContentContext and its associated types.
- Updated Tag and TaskListItem components to use MemoViewContext instead.
- Refactored MemoContent component to eliminate context provider and directly use derived values.
- Simplified MemoViewContext to only include essential data.
- Enhanced error handling in various components by introducing a centralized error handling utility.
- Improved type safety across components and hooks by refining TypeScript definitions.
- Updated remark plugins to enhance tag parsing and preserve node types.

Author: johnnyjoygh

web/biome.json

@@ -84,7 +84,7 @@
 				"noDuplicateObjectKeys": "error",
 				"noDuplicateParameters": "error",
 				"noEmptyBlockStatements": "off",
-				"noExplicitAny": "off",
+				"noExplicitAny": "error",
 				"noExtraNonNullAssertion": "error",
 				"noFallthroughSwitchClause": "error",
 				"noFunctionAssign": "error",

web/src/components/ChangeMemberPasswordDialog.tsx

@@ -5,6 +5,7 @@ import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { useUpdateUser } from "@/hooks/useUserQueries";
+import { handleError } from "@/lib/error";
 import { User } from "@/types/proto/api/v1/user_service_pb";
 import { useTranslate } from "@/utils/i18n";
 
@@ -60,9 +61,10 @@ function ChangeMemberPasswordDialog({ open, onOpenChange, user, onSuccess }: Pro
       toast(t("message.password-changed"));
       onSuccess?.();
       onOpenChange(false);
-    } catch (error: any) {
-      console.error(error);
-      toast.error(error.message);
+    } catch (error: unknown) {
+      await handleError(error, toast.error, {
+        context: "Change member password",
+      });
     }
   };
 

web/src/components/CreateAccessTokenDialog.tsx

@@ -8,6 +8,7 @@ import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { userServiceClient } from "@/connect";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import useLoading from "@/hooks/useLoading";
+import { handleError } from "@/lib/error";
 import { CreatePersonalAccessTokenResponse } from "@/types/proto/api/v1/user_service_pb";
 import { useTranslate } from "@/utils/i18n";
 
@@ -83,10 +84,11 @@ function CreateAccessTokenDialog({ open, onOpenChange, onSuccess }: Props) {
       requestState.setFinish();
       onSuccess(response);
       onOpenChange(false);
-    } catch (error: any) {
-      toast.error(error.message);
-      console.error(error);
-      requestState.setError();
+    } catch (error: unknown) {
+      handleError(error, toast.error, {
+        context: "Create access token",
+        onError: () => requestState.setError(),
+      });
     }
   };
 

web/src/components/CreateIdentityProviderDialog.tsx

@@ -9,6 +9,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { Separator } from "@/components/ui/separator";
 import { identityProviderServiceClient } from "@/connect";
 import { absolutifyLink } from "@/helpers/utils";
+import { handleError } from "@/lib/error";
 import {
   FieldMapping,
   FieldMappingSchema,
@@ -288,9 +289,10 @@ function CreateIdentityProviderDialog({ open, onOpenChange, identityProvider, on
         });
         toast.success(t("setting.sso-section.sso-updated", { name: basicInfo.title }));
       }
-    } catch (error: any) {
-      toast.error(error.message);
-      console.error(error);
+    } catch (error: unknown) {
+      await handleError(error, toast.error, {
+        context: isCreating ? "Create identity provider" : "Update identity provider",
+      });
     }
     onSuccess?.();
     onOpenChange(false);

web/src/components/CreateShortcutDialog.tsx

@@ -1,6 +1,6 @@
 import { create } from "@bufbuild/protobuf";
 import { FieldMaskSchema } from "@bufbuild/protobuf/wkt";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
@@ -11,6 +11,7 @@ import { shortcutServiceClient } from "@/connect";
 import { useAuth } from "@/contexts/AuthContext";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import useLoading from "@/hooks/useLoading";
+import { handleError } from "@/lib/error";
 import { Shortcut, ShortcutSchema } from "@/types/proto/api/v1/shortcut_service_pb";
 import { useTranslate } from "@/utils/i18n";
 
@@ -33,31 +34,34 @@ function CreateShortcutDialog({ open, onOpenChange, shortcut: initialShortcut, o
     }),
   );
   const requestState = useLoading(false);
-  const isCreating = !initialShortcut;
+  const isCreating = shortcut.name === "";
 
   useEffect(() => {
-    if (initialShortcut) {
-      setShortcut(
-        create(ShortcutSchema, {
-          name: initialShortcut.name,
-          title: initialShortcut.title,
-          filter: initialShortcut.filter,
-        }),
-      );
-    } else {
-      setShortcut(create(ShortcutSchema, { name: "", title: "", filter: "" }));
+    if (shortcut.name) {
+      setShortcut(shortcut);
     }
-  }, [initialShortcut]);
+  }, [shortcut.name, shortcut.title, shortcut.filter]);
 
   const onShortcutTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setShortcut({ ...shortcut, title: e.target.value });
+    setPartialState({
+      title: e.target.value,
+    });
   };
 
   const onShortcutFilterChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setShortcut({ ...shortcut, filter: e.target.value });
+    setPartialState({
+      filter: e.target.value,
+    });
   };
 
-  const handleConfirm = async () => {
+  const setPartialState = (partialState: Partial<Shortcut>) => {
+    setShortcut({
+      ...shortcut,
+      ...partialState,
+    });
+  };
+
+  const handleSaveBtnClick = async () => {
     if (!shortcut.title || !shortcut.filter) {
       toast.error("Title and filter cannot be empty");
       return;
@@ -69,7 +73,7 @@ function CreateShortcutDialog({ open, onOpenChange, shortcut: initialShortcut, o
         await shortcutServiceClient.createShortcut({
           parent: user?.name,
           shortcut: {
-            name: "", // Will be set by server
+            name: "",
             title: shortcut.title,
             filter: shortcut.filter,
           },
@@ -79,21 +83,21 @@ function CreateShortcutDialog({ open, onOpenChange, shortcut: initialShortcut, o
         await shortcutServiceClient.updateShortcut({
           shortcut: {
             ...shortcut,
-            name: initialShortcut!.name, // Keep the original resource name
+            name: initialShortcut!.name,
           },
           updateMask: create(FieldMaskSchema, { paths: ["title", "filter"] }),
         });
         toast.success("Update shortcut successfully");
       }
-      // Refresh shortcuts.
       await refetchSettings();
       requestState.setFinish();
       onSuccess?.();
       onOpenChange(false);
-    } catch (error: any) {
-      console.error(error);
-      toast.error(error.message);
-      requestState.setError();
+    } catch (error: unknown) {
+      await handleError(error, toast.error, {
+        context: isCreating ? "Create shortcut" : "Update shortcut",
+        onError: () => requestState.setError(),
+      });
     }
   };
 
@@ -118,28 +122,13 @@ function CreateShortcutDialog({ open, onOpenChange, shortcut: initialShortcut, o
               onChange={onShortcutFilterChange}
             />
           </div>
-          <div className="text-sm text-muted-foreground">
-            <p className="mb-2">{t("common.learn-more")}:</p>
-            <ul className="list-disc list-inside space-y-1">
-              <li>
-                <a
-                  className="text-primary hover:underline"
-                  href="https://www.usememos.com/docs/guides/shortcuts"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  Docs - Shortcuts
-                </a>
-              </li>
-            </ul>
-          </div>
         </div>
         <DialogFooter>
           <Button variant="ghost" disabled={requestState.isLoading} onClick={() => onOpenChange(false)}>
             {t("common.cancel")}
           </Button>
-          <Button disabled={requestState.isLoading} onClick={handleConfirm}>
-            {t("common.confirm")}
+          <Button disabled={requestState.isLoading} onClick={handleSaveBtnClick}>
+            {t("common.save")}
           </Button>
         </DialogFooter>
       </DialogContent>

web/src/components/CreateUserDialog.tsx

@@ -9,6 +9,7 @@ import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { userServiceClient } from "@/connect";
 import useLoading from "@/hooks/useLoading";
+import { handleError } from "@/lib/error";
 import { User, User_Role, UserSchema } from "@/types/proto/api/v1/user_service_pb";
 import { useTranslate } from "@/utils/i18n";
 
@@ -68,10 +69,11 @@ function CreateUserDialog({ open, onOpenChange, user: initialUser, onSuccess }:
       requestState.setFinish();
       onSuccess?.();
       onOpenChange(false);
-    } catch (error: any) {
-      console.error(error);
-      toast.error(error.message);
-      requestState.setError();
+    } catch (error: unknown) {
+      handleError(error, toast.error, {
+        context: user ? "Update user" : "Create user",
+        onError: () => requestState.setError(),
+      });
     }
   };
 

web/src/components/CreateWebhookDialog.tsx

@@ -9,6 +9,7 @@ import { Label } from "@/components/ui/label";
 import { userServiceClient } from "@/connect";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import useLoading from "@/hooks/useLoading";
+import { handleError } from "@/lib/error";
 import { useTranslate } from "@/utils/i18n";
 
 interface Props {
@@ -107,10 +108,11 @@ function CreateWebhookDialog({ open, onOpenChange, webhookName, onSuccess }: Pro
       onSuccess?.();
       onOpenChange(false);
       requestState.setFinish();
-    } catch (error: any) {
-      console.error(error);
-      toast.error(error.message);
-      requestState.setError();
+    } catch (error: unknown) {
+      handleError(error, toast.error, {
+        context: webhookName ? "Update webhook" : "Create webhook",
+        onError: () => requestState.setError(),
+      });
     }
   };
 

web/src/components/Inbox/MemoCommentMessage.tsx

@@ -8,6 +8,7 @@ import { activityServiceClient, memoServiceClient, userServiceClient } from "@/c
 import { activityNamePrefix } from "@/helpers/resource-names";
 import useAsyncEffect from "@/hooks/useAsyncEffect";
 import useNavigateTo from "@/hooks/useNavigateTo";
+import { handleError } from "@/lib/error";
 import { cn } from "@/lib/utils";
 import { Memo } from "@/types/proto/api/v1/memo_service_pb";
 import { User, UserNotification, UserNotification_Status } from "@/types/proto/api/v1/user_service_pb";
@@ -56,8 +57,10 @@ function MemoCommentMessage({ notification }: Props) {
         setInitialized(true);
       }
     } catch (error) {
-      console.error("Failed to fetch activity:", error);
-      setHasError(true);
+      handleError(error, () => {}, {
+        context: "Failed to fetch activity",
+        onError: () => setHasError(true),
+      });
       return;
     }
   }, [notification.activityId]);

web/src/components/MemoActionMenu/hooks.ts

@@ -7,6 +7,7 @@ import { useInstance } from "@/contexts/InstanceContext";
 import { useDeleteMemo, useUpdateMemo } from "@/hooks/useMemoQueries";
 import useNavigateTo from "@/hooks/useNavigateTo";
 import { userKeys } from "@/hooks/useUserQueries";
+import { handleError } from "@/lib/error";
 import { State } from "@/types/proto/api/v1/common_pb";
 import type { Memo } from "@/types/proto/api/v1/memo_service_pb";
 import { useTranslate } from "@/utils/i18n";
@@ -53,6 +54,7 @@ export const useMemoActionHandlers = ({ memo, onEdit, setDeleteDialogOpen, setRe
   }, [onEdit]);
 
   const handleToggleMemoStatusClick = useCallback(async () => {
+    const isArchiving = memo.state !== State.ARCHIVED;
     const state = memo.state === State.ARCHIVED ? State.NORMAL : State.ARCHIVED;
     const message = memo.state === State.ARCHIVED ? t("message.restored-successfully") : t("message.archived-successfully");
 
@@ -66,9 +68,10 @@ export const useMemoActionHandlers = ({ memo, onEdit, setDeleteDialogOpen, setRe
       });
       toast.success(message);
     } catch (error: unknown) {
-      const err = error as { details?: string };
-      toast.error(err.details || "An error occurred");
-      console.error(error);
+      handleError(error, toast.error, {
+        context: `${isArchiving ? "Archive" : "Restore"} memo`,
+        fallbackMessage: "An error occurred",
+      });
       return;
     }
 

web/src/components/MemoContent/ConditionalComponent.tsx

@@ -1,11 +1,22 @@
+import type { Element } from "hast";
 import React from "react";
+import { isTagElement, isTaskListItemElement } from "@/types/markdown";
 
-export const createConditionalComponent = <P extends Record<string, any>>(
+/**
+ * Creates a conditional component that renders different components
+ * based on AST node type detection
+ *
+ * @param CustomComponent - Custom component to render when condition matches
+ * @param DefaultComponent - Default component/element to render otherwise
+ * @param condition - Function to test AST node
+ * @returns Conditional wrapper component
+ */
+export const createConditionalComponent = <P extends Record<string, unknown>>(
   CustomComponent: React.ComponentType<P>,
   DefaultComponent: React.ComponentType<P> | keyof JSX.IntrinsicElements,
-  condition: (node: any) => boolean,
+  condition: (node: Element) => boolean,
 ) => {
-  return (props: P & { node?: any }) => {
+  return (props: P & { node?: Element }) => {
     const { node, ...restProps } = props;
 
     // Check AST node to determine which component to use
@@ -21,17 +32,5 @@ export const createConditionalComponent = <P extends Record<string, any>>(
   };
 };
 
-// Condition checkers for AST node types
-export const isTagNode = (node: any): boolean => {
-  // Check preserved mdast type first
-  if (node?.data?.mdastType === "tagNode") {
-    return true;
-  }
-  // Fallback: check hast properties
-  return node?.properties?.className?.includes?.("tag") || false;
-};
-
-export const isTaskListItemNode = (node: any): boolean => {
-  // Task list checkboxes are standard GFM - check element type
-  return node?.properties?.type === "checkbox" || false;
-};
+// Re-export type guards for convenience
+export { isTagElement as isTagNode, isTaskListItemElement as isTaskListItemNode };