Layout() — ui Function Reference

Architecture documentation for the Layout() function in use-layout.tsx from the ui codebase.

Function tsx DocumentationAtlas SearchAPI calls 1

Entity Profile

DocumentationAtlas→ SearchAPI→ Layout() — ui Function Reference

Dependency Diagram

graph TD
  c89decb1_3e75_a89c_6cf5_e2c84150f45a["Layout()"]
  5b8512fa_600d_78c3_a5b4_d8c8a67b2771["use-layout.tsx"]
  c89decb1_3e75_a89c_6cf5_e2c84150f45a -->|defined in| 5b8512fa_600d_78c3_a5b4_d8c8a67b2771
  6324026f_dd5f_64bb_0fc2_72c6ffc2a25b["saveToLS()"]
  c89decb1_3e75_a89c_6cf5_e2c84150f45a -->|calls| 6324026f_dd5f_64bb_0fc2_72c6ffc2a25b
  style c89decb1_3e75_a89c_6cf5_e2c84150f45a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/hooks/use-layout.tsx lines 43–153

const Layout = ({
  forcedLayout,
  storageKey = "layout",
  defaultLayout = "full",
  attribute = "class",
  value,
  children,
}: LayoutProviderProps) => {
  const [layout, setLayoutState] = React.useState<Layout>(() => {
    if (isServer) return defaultLayout
    try {
      const saved = localStorage.getItem(storageKey)
      if (saved === "fixed" || saved === "full") {
        return saved
      }
      return defaultLayout
    } catch {
      return defaultLayout
    }
  })

  const attrs = React.useMemo(
    () => (!value ? ["layout-fixed", "layout-full"] : Object.values(value)),
    [value]
  )

  const applyLayout = React.useCallback(
    (layout: Layout) => {
      if (!layout) return

      const name = value ? value[layout] : `layout-${layout}`
      const d = document.documentElement

      const handleAttribute = (attr: string) => {
        if (attr === "class") {
          d.classList.remove(...attrs)
          if (name) d.classList.add(name)
        } else if (attr.startsWith("data-")) {
          if (name) {
            d.setAttribute(attr, name)
          } else {
            d.removeAttribute(attr)
          }
        }
      }

      if (Array.isArray(attribute)) attribute.forEach(handleAttribute)
      else handleAttribute(attribute)
    },
    [attrs, attribute, value]
  )

  const setLayout = React.useCallback(
    (value: Layout | ((prev: Layout) => Layout)) => {
      if (typeof value === "function") {
        setLayoutState((prevLayout) => {
          const newLayout = value(prevLayout)
          saveToLS(storageKey, newLayout)
          return newLayout
        })
      } else {
        setLayoutState(value)
        saveToLS(storageKey, value)
      }
    },
    [storageKey]
  )

  // localStorage event handling
  React.useEffect(() => {
    const handleStorage = (e: StorageEvent) => {
      if (e.key !== storageKey) return

      if (!e.newValue) {
        setLayout(defaultLayout)
      } else if (e.newValue === "fixed" || e.newValue === "full") {
        setLayoutState(e.newValue)
      }
    }

    window.addEventListener("storage", handleStorage)