prettier, port alias textpanel to presonaltextpanel

Author: sid597

apps/roam/src/components/settings/LeftSidebarGlobalSettings.tsx

@@ -22,7 +22,6 @@ import posthog from "posthog-js";
 
 const pagesToUids = (pages: RoamBasicNode[]) => pages.map((p) => p.text);
 
-
 const PageItem = memo(
   ({
     page,
@@ -164,11 +163,7 @@ const LeftSidebarGlobalSectionsContent = ({
       newPages.splice(newIndex, 0, removed);
 
       setPages(newPages);
-      setGlobalSetting(
-        ["Left sidebar", "Children"],
-        pagesToUids(newPages),
-      );
-
+      setGlobalSetting(["Left sidebar", "Children"], pagesToUids(newPages));
 
       if (childrenUid) {
         const order = direction === "down" ? newIndex + 1 : newIndex;
@@ -216,7 +211,7 @@ const LeftSidebarGlobalSectionsContent = ({
           ["Left sidebar", "Children"],
           pagesToUids(updatedPages),
         );
-  
+
         setNewPageInput("");
         setAutocompleteKey((prev) => prev + 1);
         posthog.capture("Left Sidebar Global Settings: Page Added", {
@@ -244,7 +239,7 @@ const LeftSidebarGlobalSectionsContent = ({
           ["Left sidebar", "Children"],
           pagesToUids(updatedPages),
         );
-  
+
         refreshAndNotify();
       } catch (error) {
         renderToast({
@@ -296,7 +291,6 @@ const LeftSidebarGlobalSectionsContent = ({
           uid={globalSection.settings?.folded?.uid || ""}
           parentUid={globalSection.settings?.uid || ""}
           disabled={!globalSection.children?.length}
-
         />
         <GlobalFlagPanel
           title="Collapsable"
@@ -306,7 +300,6 @@ const LeftSidebarGlobalSectionsContent = ({
           order={1}
           uid={globalSection.settings?.collapsable?.uid || ""}
           parentUid={globalSection.settings?.uid || ""}
-
         />
       </div>
 

apps/roam/src/components/settings/LeftSidebarPersonalSettings.tsx

@@ -20,8 +20,10 @@ import deleteBlock from "roamjs-components/writes/deleteBlock";
 import updateBlock from "roamjs-components/writes/updateBlock";
 import type { RoamBasicNode } from "roamjs-components/types";
 import { setPersonalSetting } from "~/components/settings/utils/accessors";
-import { PersonalNumberPanel } from "~/components/settings/components/BlockPropSettingPanels";
-import TextPanel from "roamjs-components/components/ConfigPanels/TextPanel";
+import {
+  PersonalNumberPanel,
+  PersonalTextPanel,
+} from "~/components/settings/components/BlockPropSettingPanels";
 import {
   LeftSidebarPersonalSectionConfig,
   getLeftSidebarPersonalSectionConfig,
@@ -86,7 +88,6 @@ const SectionItem = memo(
     const originalName = blockText || section.text;
     const [childInput, setChildInput] = useState("");
     const [childInputKey, setChildInputKey] = useState(0);
-    const aliasDebounceRef = useRef<ReturnType<typeof setTimeout>>();
 
     const [expandedChildLists, setExpandedChildLists] = useState<Set<string>>(
       new Set(),
@@ -503,45 +504,36 @@ const SectionItem = memo(
                           style={{ width: "400px" }}
                         >
                           <div className="p-4">
-                            <TextPanel
+                            <PersonalTextPanel
                               title="Alias"
                               description="Display name for this item"
+                              settingKeys={["Left sidebar"]}
+                              initialValue={child.alias?.value ?? ""}
                               order={0}
                               uid={child.alias?.uid}
                               parentUid={child.uid}
-                              defaultValue=""
-                              options={{
-                                onChange: (
-                                  event: React.ChangeEvent<HTMLInputElement>,
-                                ) => {
-                                  const nextValue = event.target.value;
-                                  setSections((prev) =>
-                                    prev.map((s) =>
-                                      s.uid === section.uid
-                                        ? {
-                                            ...s,
-                                            children: s.children?.map((c) =>
-                                              c.uid === child.uid
-                                                ? {
-                                                    ...c,
-                                                    alias: {
-                                                      ...c.alias,
-                                                      value: nextValue,
-                                                    },
-                                                  }
-                                                : c,
-                                            ),
-                                          }
-                                        : s,
-                                    ),
-                                  );
-                                  clearTimeout(aliasDebounceRef.current);
-                                  aliasDebounceRef.current = setTimeout(() => {
-                                    syncAllSectionsToBlockProps(
-                                      sectionsRef.current,
-                                    );
-                                  }, 250);
-                                },
+                              setter={(_keys, value) => {
+                                const updatedSections = sectionsRef.current.map(
+                                  (s) =>
+                                    s.uid === section.uid
+                                      ? {
+                                          ...s,
+                                          children: s.children?.map((c) =>
+                                            c.uid === child.uid
+                                              ? {
+                                                  ...c,
+                                                  alias: {
+                                                    ...c.alias,
+                                                    value,
+                                                  },
+                                                }
+                                              : c,
+                                          ),
+                                        }
+                                      : s,
+                                );
+                                setSections(updatedSections);
+                                syncAllSectionsToBlockProps(updatedSections);
                               }}
                             />
                           </div>

apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx

@@ -457,7 +457,9 @@ const BaseMultiTextPanel = ({
   );
 };
 
-type TextWrapperProps = Omit<BaseTextPanelProps, "setter">;
+type TextWrapperProps = Omit<BaseTextPanelProps, "setter"> & {
+  setter?: TextSetter;
+};
 type FlagWrapperProps = Omit<BaseFlagPanelProps, "setter">;
 type NumberWrapperProps = Omit<BaseNumberPanelProps, "setter"> & {
   setter?: NumberSetter;
@@ -559,16 +561,22 @@ export const GlobalMultiTextPanel = (props: MultiTextWrapperProps) => (
   <BaseMultiTextPanel {...props} {...globalAccessors.multiText} />
 );
 
-export const PersonalTextPanel = (props: TextWrapperProps) => (
-  <BaseTextPanel {...props} {...personalAccessors.text} />
+export const PersonalTextPanel = ({ setter, ...props }: TextWrapperProps) => (
+  <BaseTextPanel {...props} setter={setter ?? personalAccessors.text.setter} />
 );
 
 export const PersonalFlagPanel = (props: FlagWrapperProps) => (
   <BaseFlagPanel {...props} {...personalAccessors.flag} />
 );
 
-export const PersonalNumberPanel = ({ setter, ...props }: NumberWrapperProps) => (
-  <BaseNumberPanel {...props} setter={setter ?? personalAccessors.number.setter} />
+export const PersonalNumberPanel = ({
+  setter,
+  ...props
+}: NumberWrapperProps) => (
+  <BaseNumberPanel
+    {...props}
+    setter={setter ?? personalAccessors.number.setter}
+  />
 );
 
 export const PersonalSelectPanel = (props: SelectWrapperProps) => (