Routing

import { useCommand } from "@tooee/commands";
import { AppLayout } from "@tooee/layout";
import {
  Outlet,
  RouterProvider,
  createRoute,
  createRouter,
  useCanGoBack,
  useNavigate,
  useParams,
  useRouterCommands,
  useScreenState,
} from "@tooee/router";
import type { Codec } from "@tooee/router";
import { launchCli, useQuitCommand } from "@tooee/shell";
import { useTheme } from "@tooee/themes";
import { useEffect, useState } from "react";
import type { ReactNode } from "react";

interface Issue {
  number: number;
  title: string;
  body: string;
}

const issues: Issue[] = [
  { body: "The filter line matches case.", number: 41, title: "Search ignores case" },
  { body: "The cursor row changes after a resize.", number: 42, title: "Cursor jumps on resize" },
  {
    body: "A patch loses its last newline.",
    number: 45,
    title: "Diff view drops the trailing newline",
  },
];

const issueParams: Codec<{ number: number }> = {
  parse: (value) => {
    if (value instanceof Object && "number" in value) {
      const number = Number(value.number);
      if (Number.isInteger(number)) {
        return { number };
      }
    }
    throw new TypeError("Expected params { number }");
  },
};

const rowIndex: Codec<number> = {
  parse: (value) => {
    const index = Number(value);
    if (Number.isInteger(index)) {
      return index;
    }
    throw new TypeError("Expected a row index");
  },
};

const listSpec = { id: "list", screenState: rowIndex } as const;
const detailSpec = { id: "detail", params: issueParams } as const;

const IssueDetail = function IssueDetail(): ReactNode {
  const { theme } = useTheme();
  const { number } = useParams(detailSpec);
  const issue = issues.find((candidate) => candidate.number === number);
  useRouterCommands();
  useQuitCommand();

  return (
    <box flexDirection="column" paddingLeft={1}>
      <text content={`#${number} ${issue?.title ?? "not found"}`} fg={theme.primary} />
      <text content={issue?.body ?? ""} />
    </box>
  );
};

const detailRoute = createRoute({ ...detailSpec, component: IssueDetail });

const IssueList = function IssueList(): ReactNode {
  const { theme } = useTheme();
  const navigate = useNavigate();
  const { savedState, saveState } = useScreenState(listSpec);
  const [cursor, setCursor] = useState(savedState ?? 0);
  useRouterCommands();
  useQuitCommand();

  useEffect(() => {
    saveState(cursor);
  }, [cursor, saveState]);

  useCommand({
    handler: () => {
      setCursor((current) => Math.min(current + 1, issues.length - 1));
    },
    hotkey: "j",
    id: "list.down",
    title: "Down",
  });
  useCommand({
    handler: () => {
      setCursor((current) => Math.max(current - 1, 0));
    },
    hotkey: "k",
    id: "list.up",
    title: "Up",
  });
  useCommand({
    handler: () => {
      void navigate.push(detailRoute, { number: issues[cursor].number });
    },
    hotkey: "Enter",
    id: "list.open",
    title: "Open issue",
  });

  return (
    <box flexDirection="column" paddingLeft={1}>
      {issues.map(
        (issue, index): ReactNode => (
          <text
            key={issue.number}
            content={`${index === cursor ? ">" : " "} #${issue.number} ${issue.title}`}
            fg={index === cursor ? theme.primary : theme.text}
          />
        ),
      )}
    </box>
  );
};

const listRoute = createRoute({ ...listSpec, component: IssueList });

const router = createRouter({
  initial: { routeId: "list" },
  routes: [listRoute, detailRoute],
});
await router.start();

const IssueTracker = function IssueTracker(): ReactNode {
  const canGoBack = useCanGoBack();
  return (
    <AppLayout
      titleBar={{ title: "Issues" }}
      statusBar={{
        items: [
          {
            label: "",
            value: canGoBack ? "Backspace back  q quit" : "j/k move  Enter open  q quit",
          },
        ],
      }}
    >
      <Outlet />
    </AppLayout>
  );
};

await launchCli(
  <RouterProvider router={router}>
    <IssueTracker />
  </RouterProvider>,
);

import { useCommand } from "@tooee/commands";
import { AppLayout } from "@tooee/layout";
import {
  Outlet,
  RouterProvider,
  createRoute,
  createRouter,
  useNavigate,
  useRouterCommands,
} from "@tooee/router";
import { launchCli, useQuitCommand } from "@tooee/shell";
import { useEffect, useState } from "react";
import type { ReactNode } from "react";

const draft = { unsaved: false };

const Compose = function Compose(): ReactNode {
  const navigate = useNavigate();
  const [saved, setSaved] = useState(true);
  useQuitCommand();

  useEffect(() => {
    draft.unsaved = !saved;
  }, [saved]);

  useCommand({
    handler: () => {
      setSaved(false);
    },
    hotkey: "e",
    id: "compose.edit",
    title: "Edit the draft",
  });
  useCommand({
    handler: () => {
      setSaved(true);
    },
    hotkey: "s",
    id: "compose.save",
    title: "Save the draft",
  });
  useCommand({
    handler: async (ctx) => {
      const result = await navigate.pop();
      if (result.status === "cancelled") {
        ctx.toast?.toast({ level: "warning", message: `Blocked by ${result.reason}: save first` });
      }
    },
    hotkey: "Escape",
    id: "compose.leave",
    title: "Back to the inbox",
  });

  return (
    <box flexDirection="column" paddingLeft={1}>
      <text content={saved ? "Draft: saved" : "Draft: unsaved changes"} />
      <text content="e edit  s save  Escape back" />
    </box>
  );
};

const composeRoute = createRoute({ component: Compose, id: "compose" });

const Inbox = function Inbox(): ReactNode {
  const navigate = useNavigate();
  useRouterCommands();
  useQuitCommand();
  useCommand({
    handler: () => {
      void navigate.push(composeRoute);
    },
    hotkey: "c",
    id: "inbox.compose",
    title: "Compose",
  });

  return (
    <box paddingLeft={1}>
      <text content="Inbox: 3 messages. c compose  q quit" />
    </box>
  );
};

const inboxRoute = createRoute({ component: Inbox, id: "inbox" });

const router = createRouter({
  beforeNavigate: (navigation) => {
    const leavingDraft = navigation.intent.type === "pop" && draft.unsaved;
    return leavingDraft ? false : undefined;
  },
  initial: { routeId: "inbox" },
  routes: [inboxRoute, composeRoute],
});
await router.start();

await launchCli(
  <RouterProvider router={router}>
    <AppLayout titleBar={{ title: "Mail" }} statusBar={{ items: [{ label: "", value: "q quit" }] }}>
      <Outlet />
    </AppLayout>
  </RouterProvider>,
);

import { useCommand } from "@tooee/commands";
import { AppLayout } from "@tooee/layout";
import {
  Outlet,
  RouterProvider,
  createRoute,
  createRouter,
  useNavigate,
  useParams,
  useRouteData,
  useRouterCommands,
} from "@tooee/router";
import type { Codec } from "@tooee/router";
import { launchCli, useQuitCommand } from "@tooee/shell";
import { useState } from "react";
import type { ReactNode } from "react";

interface Manifest {
  name: string;
  version: string;
}

const pathParams: Codec<{ path: string }> = {
  parse: (value) => {
    if (value instanceof Object && "path" in value) {
      return { path: String(value.path) };
    }
    throw new TypeError("Expected params { path }");
  },
};

const manifestData: Codec<Manifest> = {
  parse: (value) => {
    if (value instanceof Object && "name" in value && "version" in value) {
      return { name: String(value.name), version: String(value.version) };
    }
    throw new TypeError("Expected a manifest with name and version");
  },
};

const manifestSpec = { data: manifestData, id: "manifest", params: pathParams } as const;

const ManifestScreen = function ManifestScreen(): ReactNode {
  const { path } = useParams(manifestSpec);
  const manifest = useRouteData(manifestSpec);

  return (
    <box flexDirection="column" paddingLeft={1}>
      <text content={path} />
      <text content={manifest === undefined ? "" : `${manifest.name} ${manifest.version}`} />
    </box>
  );
};

const Reading = function Reading(): ReactNode {
  return <text content="Reading..." />;
};

const ReadFailed = function ReadFailed({ error }: { error: Error }): ReactNode {
  return <text content={`Could not read the manifest: ${error.message}`} />;
};

const manifestRoute = createRoute({
  ...manifestSpec,
  component: ManifestScreen,
  errorComponent: ReadFailed,
  loader: async ({ params }) => {
    await Bun.sleep(400);
    return manifestData.parse(await Bun.file(params.path).json());
  },
  pendingComponent: Reading,
});

const files = ["package.json", "missing.json"];

const FileList = function FileList(): ReactNode {
  const navigate = useNavigate();
  const [cursor, setCursor] = useState(0);
  useCommand({
    handler: () => {
      setCursor((current) => (current + 1) % files.length);
    },
    hotkey: "j",
    id: "files.next",
    title: "Next file",
  });
  useCommand({
    handler: () => {
      void navigate.push(manifestRoute, { path: files[cursor] });
    },
    hotkey: "Enter",
    id: "files.open",
    title: "Open",
  });

  return (
    <box flexDirection="column" paddingLeft={1}>
      {files.map(
        (file, index): ReactNode => (
          <text key={file} content={`${index === cursor ? ">" : " "} ${file}`} />
        ),
      )}
    </box>
  );
};

const filesRoute = createRoute({ component: FileList, id: "files" });

const router = createRouter({
  initial: { routeId: "files" },
  routes: [filesRoute, manifestRoute],
});
await router.start();

const Manifests = function Manifests(): ReactNode {
  useRouterCommands();
  useQuitCommand();
  return (
    <AppLayout
      titleBar={{ title: "Manifests" }}
      statusBar={{ items: [{ label: "", value: "j next  Enter open  Backspace back  q quit" }] }}
    >
      <Outlet />
    </AppLayout>
  );
};

await launchCli(
  <RouterProvider router={router}>
    <Manifests />
  </RouterProvider>,
);

import { useCommand } from "@tooee/commands";
import { AppLayout } from "@tooee/layout";
import {
  Outlet,
  RouterProvider,
  createRoute,
  createRouter,
  useNavigate,
  useRouterCommands,
  useScreenEffect,
  useScreenFocus,
} from "@tooee/router";
import { launchCli, useQuitCommand } from "@tooee/shell";
import { useTheme } from "@tooee/themes";
import { useState } from "react";
import type { ReactNode } from "react";

const Dashboard = function Dashboard(): ReactNode {
  const { theme } = useTheme();
  const { isFocused } = useScreenFocus();
  return (
    <box flexDirection="column" paddingLeft={1}>
      <text content={`Dashboard  focused: ${isFocused}`} fg={theme.textMuted} />
      <Outlet />
    </box>
  );
};

const dashboardRoute = createRoute({ component: Dashboard, id: "dashboard" });

const Alerts = function Alerts(): ReactNode {
  const { isFocused } = useScreenFocus();
  const [polls, setPolls] = useState(0);
  useRouterCommands();
  useQuitCommand();
  useScreenEffect(() => {
    const timer = setInterval(() => {
      setPolls((current) => current + 1);
    }, 500);
    return () => {
      clearInterval(timer);
    };
  });

  return <text content={`Alerts  focused: ${isFocused}  polls: ${polls}`} />;
};

const alertsRoute = createRoute({ component: Alerts, id: "alerts", parent: dashboardRoute });

const Overview = function Overview(): ReactNode {
  const { isFocused } = useScreenFocus();
  const navigate = useNavigate();
  useQuitCommand();
  useCommand({
    handler: () => {
      void navigate.push(alertsRoute);
    },
    hotkey: "a",
    id: "overview.alerts",
    title: "Show alerts",
  });

  return <text content={`Overview  focused: ${isFocused}  a alerts`} />;
};

const overviewRoute = createRoute({ component: Overview, id: "overview", parent: dashboardRoute });

const router = createRouter({
  initial: { routeId: "overview" },
  routes: [dashboardRoute, overviewRoute, alertsRoute],
});
await router.start();

await launchCli(
  <RouterProvider router={router}>
    <AppLayout titleBar={{ title: "Ops" }} statusBar={{ items: [{ label: "", value: "q quit" }] }}>
      <Outlet />
    </AppLayout>
  </RouterProvider>,
);