AppLayout.tsx raw

   1  import { Outlet } from "react-router";
   2  
   3  import { AppSidebar } from "src/components/AppSidebar";
   4  import { Banner } from "src/components/Banner";
   5  import { CommandPalette } from "src/components/CommandPalette";
   6  import { SidebarInset, SidebarProvider } from "src/components/ui/sidebar";
   7  import {
   8    CommandPaletteProvider,
   9    useCommandPaletteContext,
  10  } from "src/contexts/CommandPaletteContext";
  11  import { useBanner } from "src/hooks/useBanner";
  12  import { useInfo } from "src/hooks/useInfo";
  13  import { useNotifyReceivedPayments } from "src/hooks/useNotifyReceivedPayments";
  14  import { useRemoveSuccessfulChannelOrder } from "src/hooks/useRemoveSuccessfulChannelOrder";
  15  import { cn } from "src/lib/utils";
  16  
  17  function AppLayoutInner() {
  18    const { data: info } = useInfo();
  19    const { showBanner, dismissBanner } = useBanner();
  20    const { open, setOpen } = useCommandPaletteContext();
  21  
  22    useRemoveSuccessfulChannelOrder();
  23    useNotifyReceivedPayments();
  24  
  25    if (!info) {
  26      return null;
  27    }
  28  
  29    return (
  30      <>
  31        <div
  32          className={cn(
  33            "font-sans min-h-screen w-full flex flex-col",
  34            showBanner
  35              ? "[--header-height:calc(--spacing(9))]" // Banner height is 36px when visible (sidebar hidden on <md width)
  36              : "[--header-height:0]"
  37          )}
  38        >
  39          <SidebarProvider className="flex flex-col">
  40            {showBanner && <Banner onDismiss={dismissBanner} />}
  41            <div className="flex flex-1">
  42              <AppSidebar />
  43              <SidebarInset className="min-w-0">
  44                <div
  45                  className={cn(
  46                    "flex flex-1 flex-col gap-4 p-4",
  47                    showBanner && "mt-14 md:mt-9" // Banner height is 36px with 1 line (>=md width) and 56px with 2 lines (<md width)
  48                  )}
  49                >
  50                  <Outlet />
  51                </div>
  52              </SidebarInset>
  53            </div>
  54          </SidebarProvider>
  55        </div>
  56        <CommandPalette open={open} onOpenChange={setOpen} />
  57      </>
  58    );
  59  }
  60  
  61  export default function AppLayout() {
  62    return (
  63      <CommandPaletteProvider>
  64        <AppLayoutInner />
  65      </CommandPaletteProvider>
  66    );
  67  }
  68