Source

// The app around every page: routes, the tabs (at the bottom on phones, in the header on wider
// screens), syncing in the background, and the day changing at midnight.
import { useEffect } from "react";
import { createPortal } from "react-dom";
import { startSync, refresh, takeUpgraded } from "./lib/sync";
import { takeLoginError } from "./lib/bounded";
import { A, toast } from "./ui";
import { Today as TodayIcon, Week as WeekIcon, List, Gear } from "./icons";
import { TodayPage } from "./Today";
import { WeekPage } from "./Week";
import { HabitPage } from "./HabitPage";
import { HabitsPage } from "./Habits";
import { SettingsPage } from "./Settings";
import { JoinPage } from "./Join";
import { draftFromQuery, type Draft } from "./Editor";

export type Route =
  | { name: "today"; draft?: Draft }
  | { name: "week" }
  | { name: "habits" }
  | { name: "settings" }
  | { name: "habit"; id: string }
  | { name: "share"; id: string };

export function routeOf(path: string, query: URLSearchParams): Route | null {
  const p = path.split("/").filter(Boolean);
  if (p[0] === "today") return { name: "today" };
  if (p[0] === "new") return { name: "today", draft: draftFromQuery(query) };
  if (p[0] === "week") return { name: "week" };
  if (p[0] === "habits") return { name: "habits" };
  if (p[0] === "settings") return { name: "settings" };
  if (p[0] === "h" && p[1]) return { name: "habit", id: p[1] };
  if (p[0] === "s" && /^[a-z0-9]{20}$/.test(p[1] || "")) return { name: "share", id: p[1] };
  return null;
}

const TABS = [
  { href: "/today", label: "Today", Icon: TodayIcon, match: ["today", "habit"] },
  { href: "/week", label: "Week", Icon: WeekIcon, match: ["week"] },
  { href: "/habits", label: "Habits", Icon: List, match: ["habits"] },
  { href: "/settings", label: "Settings", Icon: Gear, match: ["settings", "share"] },
];

const TITLES: Record<Route["name"], string> = { today: "Today", week: "Week", habits: "Your habits", settings: "Settings", habit: "Habit", share: "Shared habit" };

function Tabs({ route, className }: { route: Route; className: string }) {
  return (
    <nav className={className} aria-label="Habits">
      {TABS.map(({ href, label, Icon, match }) => (
        <A key={href} href={href} aria-current={match.includes(route.name) ? "page" : undefined}>
          <Icon /> <span>{label}</span>
        </A>
      ))}
    </nav>
  );
}

export function Shell({ route }: { route: Route }) {
  useEffect(() => {
    startSync()
      .then(() => {
        if (takeUpgraded()) toast("Your habits are saved to your account. Sign in on any device to see them.");
        const err = takeLoginError();
        if (err) toast(err);
      })
      .catch(() => toast("You seem to be offline. Your habits are saved on this device."));
    const back = () => { if (document.visibilityState === "visible") void refresh().catch(() => null); };
    document.addEventListener("visibilitychange", back);
    window.addEventListener("online", back);
    return () => { document.removeEventListener("visibilitychange", back); window.removeEventListener("online", back); };
  }, []);

  useEffect(() => { if (route.name !== "habit") document.title = `${TITLES[route.name]} | Habits`; }, [route.name]);

  let page: React.ReactNode;
  if (route.name === "today") page = <TodayPage draft={route.draft} />;
  else if (route.name === "week") page = <WeekPage />;
  else if (route.name === "habits") page = <HabitsPage />;
  else if (route.name === "settings") page = <SettingsPage />;
  else if (route.name === "habit") page = <HabitPage key={route.id} id={route.id} />;
  else page = <JoinPage key={route.id} id={route.id} />;

  const slot = document.getElementById("app-nav");
  return (
    <div className="shell">
      {slot && createPortal(<Tabs route={route} className="head-tabs" />, slot)}
      {page}
      <Tabs route={route} className="tabbar" />
    </div>
  );
}