@indietabletop/appkit 7.0.0-0 → 7.0.0-rc.1

package/lib/AppConfig/AppConfig.tsx

@@ -0,0 +1,80 @@
+import { type ReactNode } from "react";
+import type { IndieTabletopClient } from "../client.ts";
+import { createStrictContext } from "../createStrictContext.ts";
+import type { AppHrefs } from "../hrefs.ts";
+import type { ModernIDB } from "../ModernIDB/index.ts";
+import type { DatabaseAppMachineMethods } from "../store/index.tsx";
+import type { AppkitFormatters } from "./formatters.tsx";
+
+export type AppConfig = {
+  app: {
+    /**
+     * The app's name, e.g. Space Gits. Do not include the word App in this
+     * title -- it will be added automatically in places where it's needed.
+     */
+    name: string;
+
+    /**
+     * The URL to the app's icon. This should be a maskable-style icon. In
+     * other words, it should not include its own transparency.
+     */
+    icon: string;
+  };
+
+  /**
+   * Usually the value of `import.meta.env.DEV` when using Vite.
+   *
+   * This is used primarily by the DocumentTitle component, to make it clear
+   * which browser tab is in DEV mode.
+   */
+  isDev: boolean;
+
+  /**
+   * A reference to the ITC client.
+   *
+   * This is necessary in order for prefab components to make thier own calls.
+   */
+  client: IndieTabletopClient;
+
+  /**
+   * A hrefs configuration.
+   *
+   * This is necessary so that prefab components can navigate around the app
+   * without hard-coded values.
+   */
+  hrefs: AppHrefs;
+
+  /**
+   * Customize input placeholders so that they fit their given app thematically.
+   */
+  placeholders: {
+    email: string;
+  };
+
+  /**
+   * Formatters accessible to prefab components.
+   *
+   * You might want to create different formatters based on the app's locale.
+   */
+  fmt: AppkitFormatters;
+
+  database: ModernIDB<any, any> & DatabaseAppMachineMethods;
+};
+
+const [AppConfigContext, useAppConfig] = createStrictContext<AppConfig>();
+
+export { createFormatters } from "./formatters.tsx";
+
+export { useAppConfig };
+
+export function useClient() {
+  return useAppConfig().client;
+}
+
+export function AppConfigProvider(props: {
+  config: AppConfig;
+  children: ReactNode;
+}) {
+  const { config, children } = props;
+  return <AppConfigContext value={config}>{children}</AppConfigContext>;
+}

package/lib/AppConfig/formatters.tsx

@@ -0,0 +1,48 @@
+// English only uses "one" and "other"
+type EnglishCardinalRule = Extract<Intl.LDMLPluralRule, "one" | "other">;
+
+export type AppkitFormatters = ReturnType<typeof createFormatters>;
+
+// Currently, we only support localizing English variants. Not translating the
+// app into other locales.
+type EnglishLocale = "en" | `en-${string}`;
+
+/**
+ * Creates formatters that can be used across the app.
+ */
+export function createFormatters(locale: EnglishLocale) {
+  const cardinalRules = new Intl.PluralRules(locale);
+
+  const dateTimeFmt = new Intl.DateTimeFormat(locale);
+
+  const dateFmt = new Intl.DateTimeFormat(locale, { dateStyle: "long" });
+
+  const conjunctionFmt = new Intl.ListFormat(locale, {
+    style: "long",
+    type: "conjunction",
+  });
+
+  const disjunctionFmt = new Intl.ListFormat(locale, {
+    style: "long",
+    type: "disjunction",
+  });
+
+  return {
+    plural(count: number, rules: Record<EnglishCardinalRule, string>) {
+      const tag = cardinalRules.select(count) as EnglishCardinalRule;
+      return rules[tag].replace("#", count.toString());
+    },
+    dateTime(date: Date | string | number) {
+      return dateTimeFmt.format(new Date(date));
+    },
+    date(date: Date | string | number) {
+      return dateFmt.format(new Date(date));
+    },
+    conjunction(items: string[]) {
+      return conjunctionFmt.format(items);
+    },
+    disjunction(items: string[]) {
+      return disjunctionFmt.format(items);
+    },
+  };
+}

package/lib/AuthCard/AuthCard.stories.ts

@@ -0,0 +1,34 @@
+import { fn } from "storybook/test";
+import preview from "../../.storybook/preview.tsx";
+import { AuthCard } from "./AuthCard.tsx";
+
+const meta = preview.meta({
+  title: "Account/Auth Card",
+  component: AuthCard,
+  tags: ["autodocs"],
+  args: {
+    onLogout: fn(),
+  },
+});
+
+/**
+ * The default case where elements are correctly separated with middots.
+ */
+export const Authenticated = meta.story({
+  args: {
+    currentUser: {
+      id: "martin",
+      email: "martin@example.com",
+      isVerified: true,
+    },
+  },
+});
+
+/**
+ * The default case in which all steps of the flow succeed.
+ */
+export const Anonymous = meta.story({
+  args: {
+    currentUser: null,
+  },
+});

package/lib/AuthCard/AuthCard.tsx

@@ -0,0 +1,64 @@
+import { Button } from "@ariakit/react";
+import { Link } from "wouter";
+import { useAppConfig } from "../AppConfig/AppConfig.tsx";
+import { interactiveText } from "../common.css.ts";
+import { IndieTabletopClubLogo } from "../IndieTabletopClubLogo.tsx";
+import { LetterheadParagraph } from "../Letterhead/index.tsx";
+import { button } from "../Letterhead/style.css.ts";
+import { MiddotSeparated } from "../MiddotSeparated/MiddotSeparated.tsx";
+import type { CurrentUser } from "../types.ts";
+import { card } from "./style.css.ts";
+
+/**
+ * Small, ITC-branded card that shows authentication status.
+ *
+ * Primarily intended to be used within the sidenav.
+ */
+export function AuthCard(props: {
+  onLogout: () => void;
+  currentUser: CurrentUser | null;
+}) {
+  const { currentUser, onLogout } = props;
+  const { hrefs } = useAppConfig();
+  const align = !currentUser ? "center" : "start";
+
+  return (
+    <div className={card.container({ align })}>
+      <IndieTabletopClubLogo className={card.logo({ align })} />
+
+      {currentUser ? (
+        <>
+          <LetterheadParagraph>{currentUser.email}</LetterheadParagraph>
+
+          <MiddotSeparated className={card.loggedInAction}>
+            <Link className={interactiveText} href={hrefs.account()}>
+              Account
+            </Link>
+
+            <Button className={interactiveText} onClick={() => onLogout()}>
+              Log out
+            </Button>
+          </MiddotSeparated>
+        </>
+      ) : (
+        <>
+          <LetterheadParagraph size="small">
+            Enable backup & sync, access your pledge data, and more!
+          </LetterheadParagraph>
+
+          <Link href={hrefs.join()} className={button()}>
+            Join
+          </Link>
+
+          <LetterheadParagraph size="small">
+            {"Already have an account? "}
+            <Link href={hrefs.login()} className={interactiveText}>
+              Log in
+            </Link>
+            {"."}
+          </LetterheadParagraph>
+        </>
+      )}
+    </div>
+  );
+}

package/lib/AuthCard/style.css.ts

@@ -0,0 +1,49 @@
+import { style } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+
+export const card = {
+  container: recipe({
+    base: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "0.75rem",
+      backgroundColor: "white",
+      padding: "1.5rem",
+      borderRadius: "0.5rem",
+      color: "black",
+    },
+
+    variants: {
+      align: {
+        center: {
+          textAlign: "center",
+        },
+        start: {
+          textAlign: "start",
+        },
+      },
+    },
+  }),
+
+  logo: recipe({
+    base: {
+      maxInlineSize: "11rem",
+    },
+
+    variants: {
+      align: {
+        center: {
+          marginInline: "auto",
+        },
+        start: {
+          marginInline: "0",
+        },
+      },
+    },
+  }),
+
+  loggedInAction: style({
+    borderBlockStart: "1px solid hsl(0 0% 0% / 0.1)",
+    paddingBlockStart: "0.75rem",
+  }),
+};

package/lib/CacheProvider.tsx

@@ -0,0 +1,20 @@
+import { useCurrentUser } from "@indietabletop/appkit";
+import { useMemo, type ReactNode } from "react";
+import { SWRConfig } from "swr";
+
+/**
+ * Links SWR cache to the current user. This makes sure that if a user logs
+ * out and continues using the app in an anonymous state, they will not be
+ * shown stale data.
+ */
+export function CacheProvider(props: { children: ReactNode }) {
+  const currentUser = useCurrentUser();
+  const cacheKey = currentUser ? currentUser.id : "anonymous";
+
+  const provider = useMemo(() => {
+    console.info(`Using SWR cache for "${cacheKey}"`);
+    return () => new Map();
+  }, [cacheKey]);
+
+  return <SWRConfig value={{ provider }}>{props.children}</SWRConfig>;
+}

package/lib/DialogTrigger/index.tsx

@@ -0,0 +1,36 @@
+import {
+  DialogProvider,
+  useDialogContext,
+  useStoreState,
+} from "@ariakit/react";
+import type { ReactElement, ReactNode } from "react";
+
+function DialogGuard(props: { children: ReactNode }) {
+  const dialog = useDialogContext();
+  const isMounted = useStoreState(dialog, (store) => store?.mounted);
+  if (!isMounted) {
+    return null;
+  }
+  return props.children;
+}
+
+/**
+ * Wraps AriaKit's DialogProvider, but takes a tuple of Dialog a DialogDisclosure
+ * elements as children, and makes sure that the Dialog component is not
+ * rendered when it is hidden.
+ *
+ * This is important in cases where the dialog contains a form that should only
+ * be initialized and re-initialized when the dialog opens, not when it is first
+ * rendered.
+ */
+export function DialogTrigger(props: {
+  children: [ReactElement, ReactElement];
+}) {
+  const [dialog, button] = props.children;
+  return (
+    <DialogProvider>
+      <DialogGuard>{dialog}</DialogGuard>
+      {button}
+    </DialogProvider>
+  );
+}

package/lib/DocumentTitle/DocumentTitle.tsx

@@ -0,0 +1,10 @@
+import { useAppConfig } from "../AppConfig/AppConfig.tsx";
+
+export function DocumentTitle(props: { children: string }) {
+  const { children: children } = props;
+  const { app, isDev } = useAppConfig();
+  const itc = `${app.name} · Indie Tabletop Club`;
+  const title = children ? `${children} | ${itc}` : itc;
+
+  return <title>{isDev ? `[DEV] ${title}` : title}</title>;
+}

package/lib/EnumMapper.ts

@@ -0,0 +1,50 @@
+type InputValues<K extends string | number, V> = Record<K, V> | Array<[K, V]>;
+
+/**
+ * Handles mapping enums to arbitrary values.
+ */
+export class EnumMapper<K extends string | number, V> {
+  private map: Map<K, V>;
+  private fallback: V;
+
+  constructor(values: InputValues<K, V>, fallback: V) {
+    const entries = Array.isArray(values)
+      ? values
+      : (Object.entries(values) as Array<[K, V]>);
+    this.map = new Map(entries);
+    this.fallback = fallback;
+  }
+
+  /**
+   * Returns a value corresponding to the provided key.
+   *
+   * If no match is found, returns the fallback value provided in the constructor.
+   *
+   * Note that TypeScript will make sure that we only ever use the right types
+   * as the enum param, but it can still happen at runtime that different
+   * values are provided.
+   */
+  get(key: K | undefined): V {
+    if (key === undefined) {
+      return this.fallback;
+    }
+
+    const value = this.map.get(key);
+    if (value === undefined) {
+      return this.fallback;
+    }
+
+    return value;
+  }
+
+  /**
+   * All enums known by this mapper.
+   */
+  get enums() {
+    return Array.from(this.map.keys());
+  }
+
+  static from<K extends string>(values: InputValues<K, string>) {
+    return new EnumMapper(values, "Unknown");
+  }
+}

package/lib/ExternalLink.tsx

@@ -0,0 +1,10 @@
+import type { AnchorHTMLAttributes } from "react";
+
+export type ExternalLinkProps = Omit<
+  AnchorHTMLAttributes<HTMLAnchorElement>,
+  "rel" | "target"
+>;
+
+export function ExternalLink(props: ExternalLinkProps) {
+  return <a {...props} target="_blank" rel="noreferrer noopener" />;
+}

package/lib/FullscreenDismissBlocker.tsx

@@ -0,0 +1,23 @@
+import { useEffect } from "react";
+
+function preventDefaultEscHandling(event: KeyboardEvent) {
+  if (event.key === "Escape") {
+    event.preventDefault();
+  }
+}
+
+/**
+ * This component prevents the default MacOS behaviour where a fullscreen window
+ * gets minimized by pressing Escape.
+ */
+export function FullscreenDismissBlocker() {
+  useEffect(() => {
+    window.addEventListener("keydown", preventDefaultEscHandling);
+
+    return () => {
+      window.removeEventListener("keydown", preventDefaultEscHandling);
+    };
+  }, []);
+
+  return null;
+}

package/{dist/HistoryState.d.ts → lib/HistoryState.ts}

@@ -7,12 +7,15 @@
  * @see https://www.typescriptlang.org/docs/handbook/declaration-merging.html
  */
 export interface HistoryState {
-    emailValue?: string;
+  emailValue?: string;
 }
+
 /**
  * Get's window history state with correct typings.
  *
  * Note that this is not a reactive value. It will not trigger re-renders if
  * it is changed.
  */
-export declare function getHistoryState(): HistoryState | null;
+export function getHistoryState() {
+  return window.history.state as HistoryState | null;
+}

package/lib/IndieTabletopClubLogo.tsx

@@ -0,0 +1,44 @@
+import type { SVGAttributes } from "react";
+
+type IndieTabletopClubLogoProps = Omit<
+  SVGAttributes<SVGElement>,
+  "width" | "height" | "viewBox"
+> & {
+  textColor?: string;
+  symbolColor?: string;
+};
+
+export function IndieTabletopClubLogo(props: IndieTabletopClubLogoProps) {
+  const { textColor = "#161615", symbolColor = "#FF5937", ...svgProps } = props;
+
+  // prettier-ignore
+  return (
+    <svg {...svgProps} width="200px" height="13px" viewBox="0 0 200 13">
+      <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+        <g transform="translate(-720, -746)" fillRule="nonzero">
+          <g transform="translate(720, 746)">
+            <path    fill={textColor} d="M162.319043,13 C160.39468,13 158.856429,12.433618 157.706354,11.3007467 C156.560409,10.1678541 155.987436,8.6527232 155.987436,6.75532194 C155.987436,5.27087812 156.347738,3.76969784 157.068341,2.25177041 L162.384083,0 C164.685265,0 166.250358,0.625027117 167.07833,1.87508242 L164.464335,4.2356719 C163.658044,3.15862455 162.711348,2.42755671 161.625281,2.04250049 L160.101483,2.04250049 C159.838226,3.28697663 159.70608,4.32217213 159.70608,5.14810843 C159.70608,6.76090433 160.056058,8.03885336 160.754982,8.98197696 C161.453905,9.91951817 162.380986,10.3882888 163.537255,10.3882888 C163.854197,10.3882888 164.179397,10.3408545 164.512857,10.2459861 C164.846317,10.1511176 165.387286,9.95858417 166.134731,9.66839641 L166.61066,10.4217724 L164.053446,13 L162.319043,13 Z" />
+            <polygon fill={textColor} points="171.687921 10.7314717 176.244861 10.7314717 175.584135 12.7572036 168.147879 12.7572036 168.147879 0.242755671 171.687921 0.159047705" />
+            <path    fill={textColor} d="M184.113686,0.242755671 L187.646502,0.159047705 L187.646502,12.7572036 L184.113686,12.840993 L184.113686,11.8699146 L181.435684,13 C179.893303,13 178.79588,12.6512347 178.145478,11.9535969 C177.500239,11.2560662 177.177103,10.078568 177.177103,8.42113445 L177.177103,0.242755671 L180.709918,0.159047705 L180.709918,7.96073207 C180.709918,8.59133836 180.742955,9.07964196 180.806962,9.42564289 C180.877164,9.77163309 181.021698,10.0701998 181.242628,10.3213215 C181.462526,10.572454 181.763982,10.7426151 182.145964,10.8319761 C182.533107,10.9156584 183.057558,10.9575531 183.718283,10.9575531 C183.982573,9.7465177 184.113686,8.7113222 184.113686,7.85190228 L184.113686,0.242755671 Z" />
+            <path    fill={textColor} d="M197.176432,5.36574657 C198.069443,5.42155974 198.763205,5.69221449 199.257716,6.17772155 C199.752228,6.65765693 200,7.29664216 200,8.09466652 C200,8.95407573 199.690285,9.76047903 199.071887,10.513855 L193.757178,12.7572036 L189.788697,12.7572036 L189.788697,0.242755671 L195.273749,0.242755671 C198.015759,0.242755671 199.386764,1.15239351 199.386764,2.97167348 C199.386764,3.48508176 199.160672,4.06546799 198.709521,4.71282144 L197.176432,5.36574657 Z M194.595474,2.26851757 L193.329772,2.26851757 L193.329772,5.34901012 L195.44306,5.34901012 C195.59895,4.80210751 195.674314,4.40310069 195.66812,4.15196822 C195.66812,3.29813069 195.310915,2.67032095 194.595474,2.26851757 Z M196.031519,10.7314717 C196.197732,10.1846012 196.281355,9.69908348 196.281355,9.27496126 C196.281355,8.40438728 195.907633,7.77098444 195.160187,7.37476345 L193.329772,7.37476345 L193.329772,10.7314717 L196.031519,10.7314717 Z" />
+            <polygon fill={textColor} points="0 0.242755671 3.54075462 0.159047705 3.54075462 12.7572036 0 12.840993" />
+            <polygon fill={textColor} points="13.6033016 0.242755671 15.5551254 0.159047705 15.5551254 12.7572036 13.2403156 13 7.6267315 5.50804925 7.6267315 12.7572036 5.67487669 12.840993 5.67487669 0.242755671 7.98967617 0 13.6033016 7.55892869" />
+            <path    fill={textColor} d="M23.8028354,0.242755671 C25.6203462,0.242755671 27.0425574,0.77291326 28.0695723,1.83323058 C29.1019556,2.88795909 29.6181472,4.30543568 29.6181472,6.08564964 C29.6181472,7.48079668 29.2605297,8.95687228 28.5453978,10.513855 L23.2221198,12.7572036 L17.7053733,12.7572036 L17.7053733,0.242755671 L23.8028354,0.242755671 Z M25.5047193,10.7314717 C25.7681835,9.41447811 25.8999156,8.39880489 25.8999156,7.68449492 C25.8999156,5.03370698 24.9588982,3.22837762 23.0769668,2.26851757 L21.2461382,2.26851757 L21.2461382,10.7314717 L25.5047193,10.7314717 Z" />
+            <polygon fill={textColor} points="31.090842 0.242755671 34.6316069 0.159047705 34.6316069 12.7572036 31.090842 12.840993" />
+            <polygon fill={textColor} points="40.3065146 7.34127984 40.3065146 10.7314717 45.19423 10.7314717 44.532782 12.7572036 36.7657497 12.7572036 36.7657497 0.242755671 45.19423 0.242755671 44.532782 2.26851757 40.3065146 2.26851757 40.3065146 5.31552651 44.3634712 5.31552651 43.7020232 7.34127984" />
+            <polygon fill={textColor} points="60.8105757 0.242755671 60.1572836 2.26851757 57.2134427 2.26851757 57.2134427 12.7572036 53.6807303 12.840993 53.6807303 2.26851757 50.0593362 2.26851757 50.720681 0.242755671" />
+            <path    fill={textColor} d="M67.1548807,13 L65.9773443,9.65164925 L62.2107972,9.65164925 L61.1219425,12.7572036 L59.0087572,13 L63.5012763,0.242755671 L66.3080167,0 L70.6553827,12.3136127 L67.1548807,13 Z M62.9205607,7.63426414 L65.2675808,7.63426414 L64.0980971,4.31938629 L62.9205607,7.63426414 Z" />
+            <path    fill={textColor} d="M79.1127698,5.36574657 C80.0053684,5.42155974 80.6990267,5.69221449 81.1937448,6.17772155 C81.6883596,6.65765693 81.9357187,7.29664216 81.9357187,8.09466652 C81.9357187,8.95407573 81.6265199,9.76047903 81.0082255,10.513855 L75.6930002,12.7572036 L71.7248286,12.7572036 L71.7248286,0.242755671 L77.2093647,0.242755671 C79.9515812,0.242755671 81.3227927,1.15239351 81.3227927,2.97167348 C81.3227927,3.48508176 81.0969072,4.06546799 80.6452396,4.71282144 L79.1127698,5.36574657 Z M76.5318116,2.26851757 L75.2655935,2.26851757 L75.2655935,5.34901012 L77.3787788,5.34901012 C77.5346687,4.80210751 77.6099295,4.40310069 77.6045611,4.15196822 C77.6045611,3.29813069 77.2470467,2.67032095 76.5318116,2.26851757 Z M77.967547,10.7314717 C78.1341737,10.1846012 78.2175903,9.69908348 78.2175903,9.27496126 C78.2175903,8.40438728 77.8438675,7.77098444 77.096422,7.37476345 L75.2655935,7.37476345 L75.2655935,10.7314717 L77.967547,10.7314717 Z" />
+            <polygon fill={textColor} points="86.8282863 10.7314717 91.3853293 10.7314717 90.7238813 12.7572036 83.2875213 12.7572036 83.2875213 0.242755671 86.8282863 0.159047705" />
+            <polygon fill={textColor} points="96.0035927 7.34127984 96.0035927 10.7314717 100.891308 10.7314717 100.22986 12.7572036 92.4628277 12.7572036 92.4628277 0.242755671 100.891308 0.242755671 100.22986 2.26851757 96.0035927 2.26851757 96.0035927 5.31552651 100.060549 5.31552651 99.3992045 7.34127984" />
+            <polygon fill={textColor} points="111.848921 0.242755671 111.195422 2.26851757 108.252098 2.26851757 108.252098 12.7572036 104.719282 12.840993 104.719282 2.26851757 101.097785 2.26851757 101.759129 0.242755671" />
+            <path    fill={textColor} d="M117.951339,0 C119.876733,0 121.411887,0.566431327 122.5568,1.69929612 C123.701713,2.83215663 124.274686,4.34728752 124.274686,6.24468878 C124.274686,7.7291326 123.917482,9.23031287 123.20204,10.7481867 L117.887331,13 C115.961936,13 114.423685,12.433618 113.27361,11.3007467 C112.127665,10.1678541 111.555724,8.6527232 111.555724,6.75532194 C111.555724,5.27087812 111.916026,3.76969784 112.636629,2.25177041 L117.951339,0 Z M120.161671,10.9575531 C120.424929,9.71303409 120.559139,8.67783859 120.564301,7.85190228 C120.564301,5.02812459 119.46791,3.09165733 117.274095,2.04250049 L115.668739,2.04250049 C115.405481,3.28697663 115.273336,4.32217213 115.273336,5.14810843 C115.273336,7.97188613 116.37076,9.9083641 118.564574,10.9575531 L120.161671,10.9575531 Z" />
+            <path    fill={textColor} d="M131.070865,0.242755671 C131.796631,0.242755671 132.44187,0.312514094 133.006584,0.452028798 C133.57646,0.585963257 134.033805,0.764542892 134.377589,0.987766633 C134.727567,1.21099252 135.01457,1.47886143 135.240661,1.79137874 C135.466753,2.09830295 135.622643,2.40523787 135.708331,2.71217279 C135.800213,3.01910771 135.845638,3.34557563 135.845638,3.69156584 C135.845638,4.61795299 135.535923,5.4522468 134.917525,6.19446871 L129.602816,8.4378709 L129.287939,8.4378709 L129.287939,12.7572036 L125.747897,12.840993 L125.747897,0.242755671 L131.070865,0.242755671 Z M131.877157,6.41211757 C132.044403,5.86521495 132.126993,5.35179596 132.126993,4.87187129 C132.126993,3.66087877 131.713008,2.79309063 130.885036,2.26851757 L129.287939,2.26851757 L129.287939,6.41211757 L131.877157,6.41211757 Z" />
+
+            <polygon fill={symbolColor} points="150.825519 4.65625824 149.752873 9.89656716 144.843891 11.5521149 141.007554 7.96730021 142.080201 2.7269913 146.990216 1.07147567" />
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+}

package/lib/IndieTabletopClubSymbol.tsx

@@ -0,0 +1,37 @@
+import type { SVGAttributes } from "react";
+
+type IndieTabletopClubSymbolProps = Omit<
+  SVGAttributes<SVGElement>,
+  "width" | "height" | "viewBox"
+> & {
+  backgroundColor?: string;
+  symbolColor?: string;
+};
+
+export function IndieTabletopClubSymbol(props: IndieTabletopClubSymbolProps) {
+  const {
+    symbolColor = "#FF5937",
+    backgroundColor = "#F0F0F0",
+    ...svgProps
+  } = props;
+
+  return (
+    <svg {...svgProps} width="65px" height="65px" viewBox="0 0 65 65">
+      <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+        <rect
+          fill={backgroundColor}
+          x="0"
+          y="0"
+          width="65"
+          height="65"
+          rx="11"
+        />
+        <polygon
+          fill={symbolColor}
+          fillRule="nonzero"
+          points="52.2105164 26.1156583 47.8803714 46.1156174 28.0633944 52.4341166 12.5765623 38.7524522 16.9067073 18.7524931 36.7278519 12.4341166"
+        />
+      </g>
+    </svg>
+  );
+}

package/lib/InfoPage/index.tsx

@@ -0,0 +1,46 @@
+import { Heading, HeadingLevel } from "@ariakit/react";
+import { LoadingIndicator } from "@indietabletop/appkit";
+import type { ReactNode } from "react";
+import * as css from "./style.css.ts";
+
+export function InfoPage(props: {
+  heading: string;
+  description: ReactNode;
+  action?: ReactNode;
+}) {
+  return (
+    <HeadingLevel>
+      <div className={css.page}>
+        <Heading className={css.heading}>{props.heading}</Heading>
+        <p className={css.description}>{props.description}</p>
+        {props.action && (
+          <div
+            style={{
+              marginBlockStart: "1rem",
+              marginInline: "auto",
+              inlineSize: "fit-content",
+            }}
+          >
+            {props.action}
+          </div>
+        )}
+      </div>
+    </HeadingLevel>
+  );
+}
+
+export function LoadingPage() {
+  return (
+    <div className={css.loadingPage}>
+      <LoadingIndicator />
+    </div>
+  );
+}
+
+export function LoadingView() {
+  return (
+    <div className={css.loadingView}>
+      <LoadingIndicator />
+    </div>
+  );
+}

package/lib/InfoPage/pages.tsx

@@ -0,0 +1,36 @@
+import { interactiveText } from "@indietabletop/appkit/common.css.ts";
+import { Link } from "wouter";
+import { InfoPage } from "./index.tsx";
+
+export function NotFoundPage() {
+  return (
+    <InfoPage
+      heading="Nothing here..."
+      description={
+        <>
+          The link you have followed might be broken.{" "}
+          <Link href="/" className={interactiveText}>
+            Back to dashboard
+          </Link>
+          .
+        </>
+      }
+    />
+  );
+}
+
+export function ClientSideErrorPage() {
+  const description = (
+    <>
+      Sorry, this wasn't supposed to happen. If the error persists, please{" "}
+      <a className={interactiveText} href={`mailto:support@indietabletop.club`}>
+        get in touch
+      </a>
+      .
+    </>
+  );
+
+  return (
+    <InfoPage heading="An wild Error appears!" description={description} />
+  );
+}

package/lib/InfoPage/style.css.ts

@@ -0,0 +1,36 @@
+import { manofa } from "@indietabletop/appkit/common.css.ts";
+import { style } from "@vanilla-extract/css";
+
+export const page = style({
+  minBlockSize: "100svh",
+  paddingBlockStart: "30svh",
+  paddingInline: "clamp(1rem, 5vw, 3rem)",
+  textAlign: "center",
+});
+
+export const heading = style([
+  manofa,
+  {
+    fontSize: "1.5rem",
+    lineHeight: 1.2,
+  },
+]);
+
+export const description = style({
+  marginBlockStart: "0.5rem",
+  fontSize: "1rem",
+});
+
+export const loadingPage = style([
+  page,
+  { display: "flex", justifyContent: "center" },
+]);
+
+export const loadingView = style({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  paddingInline: "clamp(1rem, 5vw, 3rem)",
+  textAlign: "center",
+  minBlockSize: "30svh",
+});