feat(extrinsics): add collapse to the side (#107)

src/codec-components/LookupTypeEdit/FocusPath.tsx

@@ -1,6 +1,7 @@
 import { lookupToType, TypeIcon, TypeIcons } from "@/components/Icons"
 import { getLookupFn, Var } from "@polkadot-api/metadata-builders"
 import { UnifiedMetadata } from "@polkadot-api/substrate-bindings"
+import { ArrowLeftToLine, ArrowRightToLine } from "lucide-react"
 import { FC, ReactElement } from "react"
 import { twMerge as clsx } from "tailwind-merge"
 
@@ -9,12 +10,23 @@ export const FocusPath: FC<{
   typeId: number
   value: string[] | null
   onFocus: (value: string[] | null) => void
-}> = ({ metadata, typeId, value, onFocus }) => {
+  collapsed?: boolean
+  onToggleCollapse?: () => void
+}> = ({ metadata, typeId, value, onFocus, collapsed, onToggleCollapse }) => {
   const breadcrumbs = getBreadcrumbs(metadata, typeId, value ?? [], onFocus)
 
   return (
     <div className="shrink-0 px-2">
       <div className="flex max-w-full flex-wrap gap-1 items-center border border-border text-sm px-2 py-1">
+        {onToggleCollapse ? (
+          <button onClick={onToggleCollapse} className="max-sm:hidden">
+            {collapsed ? (
+              <ArrowRightToLine size={16} />
+            ) : (
+              <ArrowLeftToLine size={16} />
+            )}
+          </button>
+        ) : null}
         {breadcrumbs.map((v, i) => (
           <span key={i} className="whitespace-nowrap flex gap-1 items-center">
             {i > 0 && <span className="text-foreground/50 mx-2">&gt;</span>}

src/codec-components/LookupTypeEdit/LookupTypeEdit.tsx

@@ -20,6 +20,7 @@ import { EditCodec } from "../EditCodec"
 import { TreeCodec } from "../EditCodec/Tree"
 import { BinaryDisplay } from "./BinaryDisplay"
 import { FocusPath } from "./FocusPath"
+import { cn } from "@/lib/utils"
 
 const editTypeMetadataProps$ = state(
   runtimeCtx$.pipe(
@@ -41,6 +42,7 @@ export const LookupTypeEdit: FC<{
   const [treeRef, setTreeRef] = useState<HTMLDivElement | null>(null)
   const [listRef, setListRef] = useState<HTMLDivElement | null>(null)
   const [focusingSubtree, setFocusingSubtree] = useState<string[] | null>(null)
+  const [collapsed, setCollapsed] = useState(false)
 
   useEffect(() => {
     if (!listRef || !treeRef) return
@@ -65,6 +67,8 @@ export const LookupTypeEdit: FC<{
           typeId={type}
           value={focusingSubtree}
           onFocus={setFocusingSubtree}
+          collapsed={collapsed}
+          onToggleCollapse={() => setCollapsed((c) => !c)}
         />
       )}
       <SubtreeFocus
@@ -78,7 +82,12 @@ export const LookupTypeEdit: FC<{
             {tree && (
               <div
                 ref={setTreeRef}
-                className="w-96 sticky top-0 pl-2 pb-16 leading-loose overflow-hidden max-sm:hidden"
+                className={cn(
+                  "w-96 sticky top-0 pl-2 pb-16 leading-loose overflow-hidden max-sm:hidden",
+                  {
+                    hidden: collapsed,
+                  },
+                )}
               >
                 <div className="relative">
                   <TreeCodec {...codecProps} />

src/pages/Extrinsics/EditMode.tsx

@@ -8,6 +8,7 @@ import { SubtreeFocus } from "@/codec-components/common/SubtreeFocus"
 import { EditCodec } from "@/codec-components/EditCodec"
 import { TreeCodec } from "@/codec-components/EditCodec/Tree/index"
 import { FocusPath } from "@/codec-components/LookupTypeEdit"
+import { cn } from "@/lib/utils"
 import {
   CodecComponentUpdate,
   CodecComponentValue,
@@ -31,6 +32,7 @@ export const EditMode: React.FC<{
   }, [])
 
   const [focusingSubtree, setFocusingSubtree] = useState<string[] | null>(null)
+  const [collapsed, setCollapsed] = useState(false)
 
   return (
     <div className="flex flex-col items-start overflow-hidden">
@@ -39,6 +41,8 @@ export const EditMode: React.FC<{
         typeId={codecType}
         value={focusingSubtree}
         onFocus={setFocusingSubtree}
+        collapsed={collapsed}
+        onToggleCollapse={() => setCollapsed((c) => !c)}
       />
       <SubtreeFocus
         value={{ callback: setFocusingSubtree, path: focusingSubtree }}
@@ -50,7 +54,12 @@ export const EditMode: React.FC<{
           >
             <div
               ref={treeRef}
-              className="min-w-fit w-96 sticky top-0 pl-2 pb-16 leading-loose overflow-hidden max-sm:hidden text-sm"
+              className={cn(
+                "min-w-fit w-96 sticky top-0 pl-2 pb-16 leading-loose overflow-hidden max-sm:hidden text-sm",
+                {
+                  hidden: collapsed,
+                },
+              )}
             >
               <div className="relative">
                 {!value.value ? (