function useDialogState() {
  const [searchParams, setSearchParams] = useSearchParams<{
    action?: 'new-transaction';
  }>();

  const state = createMemo<DialogState>(() =>
    searchParams.action === 'new-transaction' ? 'open' : 'closed',
  );

  const open = () => {
    setSearchParams({ action: 'new-transaction' });
  };

  const close = (onClose?: () => void) => {
    onClose?.();
    setSearchParams({ ...searchParams, action: undefined });
  };

  const toggle = () => {
    (state() === 'open' ? close : open)();
  };

  const context = {
    state,
    open,
    close,
    toggle,
  };

  return context;
}

function useDialogState() {
  const [searchParams, setSearchParams] = useSearchParams<{
    action?: 'new-transaction';
  }>();

  const state = createMemo<DialogState>(() =>
    searchParams.action === 'new-transaction' ? 'open' : 'closed',
  );

  const open = () => {
    setSearchParams({ action: 'new-transaction' });
  };

  const close = (onClose?: () => void) => {
    onClose?.();
    setSearchParams({ ...searchParams, action: undefined });
  };

  const toggle = () => {
    (state() === 'open' ? close : open)();
  };

  const context = {
    state,
    open,
    close,
    toggle,
  };

  return context;
}

export default function RootLayout(props: RouteSectionProps) {
  const params = useParams<{ username: string }>();
  onMount(destroyToasters);

  return (
    <main class="z-10 flex flex-col px-4 pt-8 pb-16 mx-auto text-center gap-5 sm:min-w-96 w-full max-w-screen-md">
      <Show when={useLocation().pathname} keyed>
        <Suspense
          fallback={<UsernamePageSkeleton username={params.username} />}
        >
          {props.children}
        </Suspense>
      </Show>
      <Toaster regionId="app-toaster" />
    </main>
  );
}

export default function RootLayout(props: RouteSectionProps) {
  const params = useParams<{ username: string }>();
  onMount(destroyToasters);

  return (
    <main class="z-10 flex flex-col px-4 pt-8 pb-16 mx-auto text-center gap-5 sm:min-w-96 w-full max-w-screen-md">
      <Show when={useLocation().pathname} keyed>
        <Suspense
          fallback={<UsernamePageSkeleton username={params.username} />}
        >
          {props.children}
        </Suspense>
      </Show>
      <Toaster regionId="app-toaster" />
    </main>
  );
}

type SuspendingProps<T> = {
  when: Parameters<typeof Show>[0]["when"];
  fallback: Parameters<typeof Show>[0]["fallback"];
  children: Parameters<typeof Show>[0]["children"];
};

function Suspending<T>(props: SuspendingProps<T>) {
  return <Show {...props} />;
}

type SuspendingProps<T> = {
  when: Parameters<typeof Show>[0]["when"];
  fallback: Parameters<typeof Show>[0]["fallback"];
  children: Parameters<typeof Show>[0]["children"];
};

function Suspending<T>(props: SuspendingProps<T>) {
  return <Show {...props} />;
}

      <Suspending
        when={user}
        fallback={<HeaderSkeleton username={params.username} />}
      >
        {(user) => <Header user={user()} view={view()} />}
      </Suspending>

      <Suspending
        when={user}
        fallback={<HeaderSkeleton username={params.username} />}
      >
        {(user) => <Header user={user()} view={view()} />}
      </Suspending>

view = "edit" | "read", based on searchParams
data = fetch data from server
editable = copy of data we can write to (what we render)

when the user clicks save => 
    invoke save fn() (which is an action())
    **set view -> "read" (rest of ui is already optimistically set)
  
    if no error thrown (via try)
        await revalidate() // wan't to make sure we have server state befoe confirming success
        toast("good")
    if error thrown (via catch)
        await revalidate() // reset to good state
        toast("bad")
  

view = "edit" | "read", based on searchParams
data = fetch data from server
editable = copy of data we can write to (what we render)

when the user clicks save => 
    invoke save fn() (which is an action())
    **set view -> "read" (rest of ui is already optimistically set)
  
    if no error thrown (via try)
        await revalidate() // wan't to make sure we have server state befoe confirming success
        toast("good")
    if error thrown (via catch)
        await revalidate() // reset to good state
        toast("bad")
  

export function depends<T, U>(
  v: () => T | undefined,
  fn: (value: NonNullable<T>) => Promise<U>
): () => Promise<U | undefined> {
  return async () => {
    const value = v();
    if (value !== undefined && value !== null) {
      return fn(value as NonNullable<T>);
    }
    return undefined;
  };
}

export function depends<T, U>(
  v: () => T | undefined,
  fn: (value: NonNullable<T>) => Promise<U>
): () => Promise<U | undefined> {
  return async () => {
    const value = v();
    if (value !== undefined && value !== null) {
      return fn(value as NonNullable<T>);
    }
    return undefined;
  };
}

  const selections = createAsync(
    depends(
      () => user()?.id,
      async (userId) => getSelections(userId)
    )
  );

  const selections = createAsync(
    depends(
      () => user()?.id,
      async (userId) => getSelections(userId)
    )
  );

const load = cache(
  (userId: string) => api.getSelectionsByUserId(userId),
  "selections"
);

export const route = {
  preload: () => load,
} satisfies RouteDefinition;

export default function Username(props: ManuallyTypePropsAfterLookingAtConsoleLog) {
  const selections = createAsync(() => load(users[0].id), {
    deferStream: true,
    initialValue: props.data,
  });
//...

const load = cache(
  (userId: string) => api.getSelectionsByUserId(userId),
  "selections"
);

export const route = {
  preload: () => load,
} satisfies RouteDefinition;

export default function Username(props: ManuallyTypePropsAfterLookingAtConsoleLog) {
  const selections = createAsync(() => load(users[0].id), {
    deferStream: true,
    initialValue: props.data,
  });
//...

- routes
  - (user)
    - layout.tsx
    - [username].tsx

- routes
  - (user)
    - layout.tsx
    - [username].tsx

- routes
  - (user)
    - [username].tsx
  - (user).tsx // this is the layout

- routes
  - (user)
    - [username].tsx
  - (user).tsx // this is the layout

"use client";

import { useEffect, useMemo } from "react";

const useRevalidateOnPageLoad = (revalidate: () => void) => {
  useEffect(() => {
    console.log("running");
    (() => {
      revalidate();
    })();
  }, []);
};

export const RevalOnLoad = (props: { reval: () => void }) => {
  const reval = useMemo(() => props.reval, [props.reval]);
  useRevalidateOnPageLoad(reval);

  return null;
};

"use client";

import { useEffect, useMemo } from "react";

const useRevalidateOnPageLoad = (revalidate: () => void) => {
  useEffect(() => {
    console.log("running");
    (() => {
      revalidate();
    })();
  }, []);
};

export const RevalOnLoad = (props: { reval: () => void }) => {
  const reval = useMemo(() => props.reval, [props.reval]);
  useRevalidateOnPageLoad(reval);

  return null;
};

type SidebareOpenContentsProps = {
  showSkeletons: boolean;
  sidebarItems: MockSidebarItems | {};
} & (
  | {
      showSkeletons: true;
      sidebarItems: {};
    }
  | {
      showSkeletons: false;
      sidebarItems: MockSidebarItems;
    }
);

type SidebareOpenContentsProps = {
  showSkeletons: boolean;
  sidebarItems: MockSidebarItems | {};
} & (
  | {
      showSkeletons: true;
      sidebarItems: {};
    }
  | {
      showSkeletons: false;
      sidebarItems: MockSidebarItems;
    }
);

        <SidebarOpenContents
          sidebarItems={status === "success" ? sidebarItems : {}}
          showSkeletons={status === "loading"}
        />

        <SidebarOpenContents
          sidebarItems={status === "success" ? sidebarItems : {}}
          showSkeletons={status === "loading"}
        />

type GameInProgress = {
  state: "playing" | "paused";
  p1Flipped: boolean;
  p2Flipped: boolean;
};

type GameOver = {
  state: "over";
};

type GamePaused = {
  state: "paused";
  p1Flipped: true;
  p2Flipped: true;
};

type Game = {
  state: "playing" | "paused" | "over";
} & (GameInProgress | GamePaused | GameOver);

type GameInProgress = {
  state: "playing" | "paused";
  p1Flipped: boolean;
  p2Flipped: boolean;
};

type GameOver = {
  state: "over";
};

type GamePaused = {
  state: "paused";
  p1Flipped: true;
  p2Flipped: true;
};

type Game = {
  state: "playing" | "paused" | "over";
} & (GameInProgress | GamePaused | GameOver);

  const [gameState, setGameState] = createSignal<Game>({
    state: "over",
  });

  const [gameState, setGameState] = createSignal<Game>({
    state: "over",
  });

type AsyncQuillQueryWithSchema<T> = (input: T) => Promise<unknown>;
type AsyncQuillQueryNoSchema = () => Promise<unknown>;

function createQuillRoute() {
  const input = <T extends z.ZodTypeAny>(schema: T) => {
    // define a fn that takes a query fn and returns a fn that parses it's input first
    const typeSafeQueryInvoker = (
      fn: AsyncQuillQueryWithSchema<z.infer<T>>,
    ) => {
      return async (input: z.infer<typeof schema>) => {
        try {
          await schema.parseAsync(input);
          return await fn(input);
        } catch (error) {
          throw error;
        }
      };
    };

    // return an object on that which is call-able
    return {
      query: typeSafeQueryInvoker,
      // mutation: typeSafeMutationInvoker,
    };
  };

  // we also want to define a query fn that doesn't take any input
  const query = (fn: AsyncQuillQueryNoSchema) => {
    return async () => fn();
  };

  return {
    input,
    query,
  };
}

export const quill = () => ({
  ...createQuillRoute(),
});

type AsyncQuillQueryWithSchema<T> = (input: T) => Promise<unknown>;
type AsyncQuillQueryNoSchema = () => Promise<unknown>;

function createQuillRoute() {
  const input = <T extends z.ZodTypeAny>(schema: T) => {
    // define a fn that takes a query fn and returns a fn that parses it's input first
    const typeSafeQueryInvoker = (
      fn: AsyncQuillQueryWithSchema<z.infer<T>>,
    ) => {
      return async (input: z.infer<typeof schema>) => {
        try {
          await schema.parseAsync(input);
          return await fn(input);
        } catch (error) {
          throw error;
        }
      };
    };

    // return an object on that which is call-able
    return {
      query: typeSafeQueryInvoker,
      // mutation: typeSafeMutationInvoker,
    };
  };

  // we also want to define a query fn that doesn't take any input
  const query = (fn: AsyncQuillQueryNoSchema) => {
    return async () => fn();
  };

  return {
    input,
    query,
  };
}

export const quill = () => ({
  ...createQuillRoute(),
});

  const profile = await quillApi.user.getUserByProfileId({
    username: props.params.username,
  });

  const profile = await quillApi.user.getUserByProfileId({
    username: props.params.username,
  });