feat: improve admin panel design (#14464)

packages/frontend/core/src/mobile/components/navigation/nodes/tag/dialog.tsx

@@ -105,11 +105,13 @@ const TagRenameContent = ({
     },
     [color, onConfirm]
   );
+  const tagColorContextValue = useMemo(
+    () => ({ colors, color, setColor, show, setShow, enableAnimation }),
+    [color, colors, enableAnimation, show]
+  );
 
   return (
-    <TagColorContext.Provider
-      value={{ colors, color, setColor, show, setShow, enableAnimation }}
-    >
+    <TagColorContext.Provider value={tagColorContextValue}>
       <RenameContent
         inputPrefixRenderer={ColorPickerTrigger}
         inputBelowRenderer={ColorPickerSelect}

packages/frontend/core/src/mobile/dialogs/setting/swipe-dialog.tsx

@@ -9,11 +9,10 @@ import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { animate } from 'animejs';
 import {
   createContext,
-  type PropsWithChildren,
-  type RefObject,
   useCallback,
   useContext,
   useEffect,
+  useMemo,
   useRef,
 } from 'react';
 import { createPortal } from 'react-dom';
@@ -21,7 +20,7 @@ import { createPortal } from 'react-dom';
 import { SwipeHelper } from '../../utils';
 import * as styles from './swipe-dialog.css';
 
-export interface SwipeDialogProps extends PropsWithChildren {
+export interface SwipeDialogProps extends React.PropsWithChildren {
   triggerSize?: number;
   title?: string;
   open?: boolean;
@@ -142,7 +141,7 @@ const close = (
 };
 
 const SwipeDialogContext = createContext<{
-  stack: Array<RefObject<HTMLElement | null>>;
+  stack: Array<React.RefObject<HTMLElement | null>>;
 }>({
   stack: [],
 });
@@ -162,6 +161,10 @@ export const SwipeDialog = ({
 
   const { stack } = useContext(SwipeDialogContext);
   const prev = stack[stack.length - 1]?.current;
+  const swipeDialogContextValue = useMemo(
+    () => ({ stack: [...stack, dialogRef] }),
+    [stack]
+  );
 
   const handleClose = useCallback(() => {
     onOpenChange?.(false);
@@ -222,7 +225,7 @@ export const SwipeDialog = ({
   if (!open) return null;
 
   return (
-    <SwipeDialogContext.Provider value={{ stack: [...stack, dialogRef] }}>
+    <SwipeDialogContext.Provider value={swipeDialogContextValue}>
       <InsideModalContext.Provider value={insideModal + 1}>
         {createPortal(
           <div className={styles.root}>

packages/frontend/core/src/mobile/pages/workspace/detail/journal-date-picker/index.tsx

@@ -1,4 +1,10 @@
-import { type HTMLAttributes, useCallback, useEffect, useState } from 'react';
+import {
+  type HTMLAttributes,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 
 import { JournalDatePickerContext } from './context';
 import { ResizeViewport } from './viewport';
@@ -31,18 +37,21 @@ export const JournalDatePicker = ({
     },
     [onChange]
   );
+  const width = window.innerWidth;
+  const journalDatePickerContextValue = useMemo(
+    () => ({
+      selected,
+      onSelect,
+      cursor,
+      setCursor,
+      width,
+      withDotDates,
+    }),
+    [cursor, onSelect, selected, width, withDotDates]
+  );
 
   return (
-    <JournalDatePickerContext.Provider
-      value={{
-        selected,
-        onSelect,
-        cursor,
-        setCursor,
-        width: window.innerWidth,
-        withDotDates,
-      }}
-    >
+    <JournalDatePickerContext.Provider value={journalDatePickerContextValue}>
       <ResizeViewport {...attrs} />
     </JournalDatePickerContext.Provider>
   );

packages/frontend/core/src/modules/workbench/view/view-root.tsx

@@ -18,6 +18,10 @@ export const ViewRoot = ({
   routes: RouteObject[];
 }) => {
   const viewRouter = useMemo(() => createMemoryRouter(routes), [routes]);
+  const routeContextValue = useMemo(
+    () => ({ outlet: null, matches: [], isDataRoute: false }),
+    []
+  );
 
   const location = useLiveData(view.location$);
 
@@ -31,13 +35,7 @@ export const ViewRoot = ({
   return (
     <FrameworkScope scope={view.scope}>
       <UNSAFE_LocationContext.Provider value={null as any}>
-        <UNSAFE_RouteContext.Provider
-          value={{
-            outlet: null,
-            matches: [],
-            isDataRoute: false,
-          }}
-        >
+        <UNSAFE_RouteContext.Provider value={routeContextValue}>
           <RouterProvider router={viewRouter} />
         </UNSAFE_RouteContext.Provider>
       </UNSAFE_LocationContext.Provider>