MediaQuickview: add recenter

Reviewed-on: #56

.browserlist

@@ -1 +0,0 @@
->0.3% and not dead, firefox>=98, safari>=15.4, chrome>=84

README.md

@@ -8,17 +8,17 @@ Tutu is a comfortable experience for tooting. Designed to work on any device - d
 
 The code is built against those targets and Tutu must run on those platforms:
 
-| Firefox | Safari |  iOS  | Chrome | Edge |
-| ------- | ------ | ----- | ------ | ---- |
-|   98    |  15.4  | 15.4  |   84   |  87  |
+| Firefox | Safari |  iOS  | Chrome & Edge |
+| ------- | ------ | ----- | ------------- |
+|   115   |  15.6  | 15.6  |      108      |
 
 Tutu trys to push the Web technology to its limit. Some features might not be available on the platform does not meet the requirement.
 
-## The "Next" Branch
+## The "Nightly" Branch
 
-The "next" branch of the app is built on every commit pushed into "master". You can tatse latest change but risks your data.
+Tutu built on the latest code, called the nightly version. You can tatse latest change but risks your data.
 
-[Launch Tutu (Next)](https://master.tututheapp.pages.dev)
+[Launch Tutu (Nightly)](https://master.tututheapp.pages.dev)
 
 ## Build & Depoly
 

docs/devnotes.md

@@ -84,3 +84,64 @@ But, sometimes you need a redesigned (sometimes better) tool for the generic usa
   - *What* this new tool does?
   - *How* this tool works?
 - Clean up code regularly. Don't keep the unused code forever.
+
+## Managing CSS
+
+Two techniques are still:
+
+- Styled compoenent (solid-styled)
+- Native CSS with CSS layering
+
+The second is recommended for massive use. A stylesheet for a component can be placed alongside
+the component's file. The stylesheet must use the same name as the component's file name, but replace the extension with
+`.css`. Say there is a component file "PreviewCard.tsx", the corresponding stylesheet is "PreviewCard.css". They are imported
+by the component file, so the side effect will be applied by the bundler.
+
+The speicifc component uses a root class to scope the rulesets' scope. This convention allows the component's style can be influenced
+by the other stylesheets. It works because Tutu is an end-user application, we gain the control of all stylesheets in the app (kind of).
+Keep in mind that the native stylesheets will be applied globally at any time, you must carefully craft the stylesheet to avoid leaking
+of style.
+
+Three additional CSS layers are declared as:
+
+- compat: Compatibility rules, like normalize.css
+- theme: The theme rules
+- material: The internal material styles
+
+When working on the material package, if the style is intended to work with the user styles,
+it must be declared under the material layer. Otherwise the unlayer, which has the
+highest priority in the author's, can be used.
+
+Styled component is still existing. Though styled component, using attributes for scoping,
+may not be as performant as the techniques with CSS class names;
+it's still provided in the code infrastructure for its ease.
+
+The following is an example of the recommended usage of solid-styled:
+
+```tsx
+// An example of using solid-styled
+import { css } from "solid-styled";
+import { createSignal } from "solid-js";
+
+const Component = () => {
+  const [width, setWidth] = createSignal(100);
+
+  css`
+  .root {
+    width: ${width()}%;
+  }
+  `
+  return <div class="root"></div>
+};
+```
+
+When developing new component, you can use styled component at first, and migrate
+to native css slowly.
+
+Before v2.0.0, there are CSS modules in use, but they are removed:
+
+- Duplicated loads
+- Unaware of order (failed composing)
+- Not-ready for hot reload
+
+In short, CSS module does not works well if the stylesheet will be accessed from more than one component.

docs/versioning.md

@@ -0,0 +1,32 @@
+# Versioning & Development Cycle
+
+The versioning policy follows the [Semantic Versioning](https://semver.org/).
+Since Tutu is an app for the end user, we redefine the some words in the policy:
+
+- API changes: the app is no longer available on certain platforms.
+
+## Development Cycle
+
+Dependency Freeze -> Development -> Release
+
+### Dependency Freeze
+
+This step is for:
+
+- Update dependencies
+- Prepare the new version (like, bump the version number).
+
+New dependencies should not be added in this step.
+
+### Development
+
+In this step, dependencies can only be updated if it's required to fix bugs.
+
+New dependencies should be added as their use, in this step.
+
+### Release
+
+The version is released to production in this step.
+
+Before the next development step, new versions can still be released to
+fix bugs.

package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package",
   "name": "tutu",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "",
   "private": true,
   "type": "module",
@@ -10,30 +10,40 @@
     "preview": "vite preview",
     "dist": "vite build",
     "count-source-lines": "exec scripts/src-lc.sh",
-    "typecheck": "tsc --noEmit --skipLibCheck"
+    "typecheck": "tsc --noEmit --skipLibCheck",
+    "wdio": "wdio run ./wdio.conf.ts"
   },
   "keywords": [],
   "author": "Rubicon",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@solid-devtools/overlay": "^0.30.1",
+    "@solid-devtools/overlay": "^0.33.0",
     "@suid/vite-plugin": "^0.3.1",
+    "@testing-library/webdriverio": "^3.2.1",
     "@types/hammerjs": "^2.0.46",
     "@types/masonry-layout": "^4.2.8",
     "@vite-pwa/assets-generator": "^0.2.6",
+    "@wdio/cli": "^9.5.1",
+    "@wdio/lighthouse-service": "^9.5.1",
+    "@wdio/local-runner": "^9.5.1",
+    "@wdio/mocha-framework": "^9.5.0",
+    "@wdio/spec-reporter": "^9.5.0",
     "postcss": "^8.4.49",
-    "prettier": "^3.3.3",
-    "typescript": "^5.6.3",
-    "vite": "^5.4.11",
+    "prettier": "^3.4.2",
+    "tsx": "^4.19.2",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.7",
     "vite-plugin-package-version": "^1.1.0",
-    "vite-plugin-pwa": "^0.20.5",
-    "vite-plugin-solid": "^2.10.2",
+    "vite-plugin-pwa": "^0.21.1",
+    "vite-plugin-solid": "^2.11.0",
     "vite-plugin-solid-styled": "^0.11.1",
+    "wdio-vite-service": "^2.0.0",
+    "wdio-wait-for": "^3.0.11",
     "workbox-build": "^7.3.0",
-    "wrangler": "^3.86.1"
+    "wrangler": "^3.99.0"
   },
   "dependencies": {
-    "@formatjs/intl-localematcher": "^0.5.7",
+    "@formatjs/intl-localematcher": "^0.5.10",
     "@nanostores/persistent": "^0.10.2",
     "@nanostores/solid": "^0.5.0",
     "@solid-primitives/event-listener": "^2.3.3",
@@ -42,8 +52,8 @@
     "@solid-primitives/map": "^0.4.13",
     "@solid-primitives/page-visibility": "^2.0.17",
     "@solid-primitives/resize-observer": "^2.0.26",
+    "@solidjs/router": "^0.15.2",
     "@solid-primitives/rootless": "^1.4.5",
-    "@solidjs/router": "^0.15.1",
     "@suid/icons-material": "^0.8.1",
     "@suid/material": "^0.18.0",
     "blurhash": "^2.0.5",
@@ -56,9 +66,10 @@
     "masto": "^6.10.1",
     "nanostores": "^0.11.3",
     "normalize.css": "^8.0.1",
-    "solid-devtools": "^0.30.1",
+    "solid-devtools": "^0.33.0",
     "solid-js": "^1.9.3",
     "solid-styled": "^0.11.1",
+    "solid-transition-group": "^0.2.3",
     "stacktrace-js": "^2.0.2",
     "workbox-core": "^7.3.0",
     "workbox-precaching": "^7.3.0"

src/App.css

@@ -1,41 +1,46 @@
-@import "normalize.css/normalize.css";
-@import "./material/theme.css";
+@layer compat, theme, material;
 
-:root {
-  --safe-area-inset-top: env(safe-area-inset-top);
-  --safe-area-inset-left: env(safe-area-inset-left);
-  --safe-area-inset-bottom: env(safe-area-inset-bottom);
-  --safe-area-inset-right: env(safe-area-inset-right);
-  background-color: var(--tutu-color-surface, transparent);
-}
+@import "normalize.css/normalize.css" layer(compat);
+@import "./material/theme.css" layer(theme);
+@import "./material/material.css" layer(material);
 
-/*
-Fix the bottom gap on iOS standalone.
-https://stackoverflow.com/questions/66005655/pwa-ios-child-of-body-not-taking-100-height-gap-on-bottom
-*/
-@media screen and (display-mode: standalone) {
-  body {
-    width: 100%;
-    height: 100vh;
+@layer compat {
+  :root {
+    --safe-area-inset-top: env(safe-area-inset-top);
+    --safe-area-inset-left: env(safe-area-inset-left);
+    --safe-area-inset-bottom: env(safe-area-inset-bottom);
+    --safe-area-inset-right: env(safe-area-inset-right);
+    background-color: var(--tutu-color-surface, transparent);
   }
 
-  #root {
-    position: fixed;
-    top: 0;
-    left: 0;
-    height: 100vh;
-    width: 100vw;
+  /*
+  Fix the bottom gap on iOS standalone.
+  https://stackoverflow.com/questions/66005655/pwa-ios-child-of-body-not-taking-100-height-gap-on-bottom
+  */
+  @media screen and (display-mode: standalone) {
+    body {
+      width: 100%;
+      height: 100vh;
+    }
+
+    #root {
+      position: fixed;
+      top: 0;
+      left: 0;
+      height: 100vh;
+      width: 100vw;
+    }
+  }
+
+  h1 {
+    margin: 0;
+  }
+
+  * {
+    user-select: none;
   }
 }
 
 .custom-emoji {
   width: 1em;
-}
-
-h1 {
-  margin: 0;
-}
-
-* {
-  user-select: none;
-}
+}

src/accounts/MastodonOAuth2Callback.css

@@ -0,0 +1,22 @@
+.MastodonOAuth2Callback {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 448px;
+
+  @media (max-width: 600px) {
+    & {
+      position: static;
+      height: 100%;
+      width: 100%;
+      left: 0;
+      right: 0;
+      transform: none;
+      display: grid;
+      grid-template-rows: 1fr auto;
+      height: 100vh;
+      overflow: auto;
+    }
+  }
+}

src/accounts/MastodonOAuth2Callback.tsx

@@ -8,13 +8,13 @@ import {
 } from "solid-js";
 import { acceptAccountViaAuthCode } from "./stores";
 import { $settings } from "../settings/stores";
-import { useDocumentTitle } from "../utils";
-import cards from "~material/cards.module.css";
+import "~material/cards.css";
 import { LinearProgress } from "@suid/material";
 import Img from "~material/Img";
 import { createRestAPIClient } from "masto";
 import { Title } from "~material/typography";
 import { useNavigator } from "~platform/StackedRouter";
+import DocumentTitle from "~platform/DocumentTitle";
 
 type OAuth2CallbackParams = {
   code?: string;
@@ -27,13 +27,12 @@ const MastodonOAuth2Callback: Component = () => {
   const titleId = createUniqueId();
   const [params] = useSearchParams<OAuth2CallbackParams>();
   const { push: navigate } = useNavigator();
-  const setDocumentTitle = useDocumentTitle("Back from Mastodon...");
   const [siteImg, setSiteImg] = createSignal<{
     src: string;
     srcset?: string;
     blurhash: string;
   }>();
-  const [siteTitle, setSiteTitle] = createSignal("the Mastodon server");
+  const [siteTitle, setSiteTitle] = createSignal("Mastodon");
 
   onMount(async () => {
     const onGoingOAuth2Process = $settings.get().onGoingOAuth2Process;
@@ -42,7 +41,6 @@ const MastodonOAuth2Callback: Component = () => {
       url: onGoingOAuth2Process,
     });
     const ins = await client.v2.instance.fetch();
-    setDocumentTitle(`Back from ${ins.title}...`);
     setSiteTitle(ins.title);
 
     const srcset = [];
@@ -93,42 +91,45 @@ const MastodonOAuth2Callback: Component = () => {
     });
   });
   return (
-    <div class={cards.layoutCentered}>
-      <div class={cards.card} aria-busy="true" aria-describedby={progressId}>
-        <LinearProgress
-          class={[cards.cardNoPad, cards.cardGutSkip].join(" ")}
-          id={progressId}
-          aria-labelledby={titleId}
-        />
-        <Show
-          when={siteImg()}
-          fallback={
-            <i
-              aria-busy="true"
-              aria-label="Preparing image..."
-              style={{ height: "235px", display: "block" }}
-            ></i>
-          }
-        >
-          <Img
-            src={siteImg()?.src}
-            srcset={siteImg()?.srcset}
-            blurhash={siteImg()?.blurhash}
-            class={[cards.cardNoPad, cards.cardGutSkip].join(" ")}
-            alt={`Banner image for ${siteTitle()}`}
-            style={{ height: "235px", display: "block" }}
+    <>
+      <DocumentTitle>Back from {siteTitle()}</DocumentTitle>
+      <main class="MastodonOAuth2Callback">
+        <div class="card card-auto-margin" aria-busy="true" aria-describedby={progressId}>
+          <LinearProgress
+            class="card-no-pad card-gut-skip"
+            id={progressId}
+            aria-labelledby={titleId}
           />
-        </Show>
+          <Show
+            when={siteImg()}
+            fallback={
+              <i
+                aria-busy="true"
+                aria-label="Preparing image..."
+                style={{ height: "235px", display: "block" }}
+              ></i>
+            }
+          >
+            <Img
+              src={siteImg()?.src}
+              srcset={siteImg()?.srcset}
+              blurhash={siteImg()?.blurhash}
+              class="card-no-pad card-gut-skip"
+              alt={`Banner image for ${siteTitle()}`}
+              style={{ height: "235px", display: "block" }}
+            />
+          </Show>
 
-        <Title component="h6" id={titleId}>
-          Contracting {siteTitle}...
-        </Title>
-        <p>
-          If this page stays too long, you can close this page and sign in
-          again.
-        </p>
-      </div>
-    </div>
+          <Title component="h6" id={titleId}>
+            Contracting {siteTitle}...
+          </Title>
+          <p>
+            If this page stays too long, you can close this page and sign in
+            again.
+          </p>
+        </div>
+      </main>
+    </>
   );
 };
 

src/accounts/SignIn.css

@@ -0,0 +1,27 @@
+.SignIn {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 448px;
+
+  @media (max-width: 600px) {
+    & {
+      position: static;
+      height: 100vh;
+      width: 100%;
+      transform: none;
+      overflow: auto;
+    }
+  }
+
+  >.key-content {
+    height: 100%;
+
+    >form {
+      display: flex;
+      flex-flow: column;
+      gap: 16px;
+    }
+  }
+}

src/accounts/SignIn.tsx

@@ -2,22 +2,21 @@ import {
   Component,
   Show,
   createEffect,
-  createSelector,
   createSignal,
   createUniqueId,
   onMount,
 } from "solid-js";
-import cards from "~material/cards.module.css";
+import "~material/cards.css";
 import TextField from "~material/TextField.js";
 import Button from "~material/Button.js";
-import { useDocumentTitle } from "../utils";
 import { Title } from "~material/typography";
-import { css } from "solid-styled";
 import { LinearProgress } from "@suid/material";
 import { createRestAPIClient } from "masto";
 import { getOrRegisterApp } from "./stores";
 import { useSearchParams } from "@solidjs/router";
 import { $settings } from "../settings/stores";
+import "./SignIn.css";
+import DocumentTitle from "~platform/DocumentTitle";
 
 type ErrorParams = {
   error: string;
@@ -35,15 +34,6 @@ const SignIn: Component = () => {
   const [serverUrlError, setServerUrlError] = createSignal(false);
   const [targetSiteTitle, setTargetSiteTitle] = createSignal("");
 
-  useDocumentTitle("Sign In");
-  css`
-    form {
-      display: flex;
-      flex-flow: column;
-      gap: 16px;
-    }
-  `;
-
   const serverUrl = () => {
     const url = rawServerUrl();
     if (url.length === 0 || /^%w:/.test(url)) {
@@ -121,55 +111,58 @@ const SignIn: Component = () => {
   };
 
   return (
-    <div class={cards.layoutCentered}>
-      <Show when={params.error || params.errorDescription}>
-        <div class={cards.card} style={{ "margin-bottom": "20px" }}>
-          <p>Authorization is failed.</p>
-          <p>{params.errorDescription}</p>
-          <p>
-            Please try again later. If the problem persist, you can seek for
-            help from the server administrator.
-          </p>
-        </div>
-      </Show>
-      <div
-        class={/*once*/ cards.card}
-        aria-busy={currentState() !== "inactive" ? "true" : "false"}
-        aria-describedby={
-          currentState() !== "inactive" ? progressId : undefined
-        }
-        style={{
-          padding: `var(--safe-area-inset-top) var(--safe-area-inset-right) var(--safe-area-inset-bottom) var(--safe-area-inset-left)`,
-        }}
-      >
-        <LinearProgress
-          class={[cards.cardNoPad, cards.cardGutSkip].join(" ")}
-          id={progressId}
-          sx={currentState() === "inactive" ? { display: "none" } : undefined}
-        />
-        <form onSubmit={onStartOAuth2}>
-          <Title component="h6">Sign in with Your Mastodon Account</Title>
-          <TextField
-            label="Mastodon Server"
-            name="serverUrl"
-            onInput={setRawServerUrl}
-            required
-            helperText={serverUrlHelperText()}
-            error={!!serverUrlError()}
-          />
-
-          <div style={{ display: "flex", "justify-content": "end" }}>
-            <Button type="submit" disabled={currentState() !== "inactive"}>
-              {currentState() == "inactive"
-                ? "Continue"
-                : currentState() == "contracting"
-                  ? `Contracting ${new URL(serverUrl()).host}...`
-                  : `Moving to ${targetSiteTitle}`}
-            </Button>
+    <>
+      <DocumentTitle>Sign In</DocumentTitle>
+      <main class="SignIn">
+        <Show when={params.error || params.errorDescription}>
+          <div class="card card-auto-margin" style={{ "margin-bottom": "20px" }}>
+            <p>Authorization is failed.</p>
+            <p>{params.errorDescription}</p>
+            <p>
+              Please try again later. If the problem persists, you can ask for
+              help from the server administrator.
+            </p>
           </div>
-        </form>
-      </div>
-    </div>
+        </Show>
+        <div
+          class="card card-auto-margin key-content"
+          aria-busy={currentState() !== "inactive" ? "true" : "false"}
+          aria-describedby={
+            currentState() !== "inactive" ? progressId : undefined
+          }
+          style={{
+            padding: `var(--safe-area-inset-top) var(--safe-area-inset-right) var(--safe-area-inset-bottom) var(--safe-area-inset-left)`,
+          }}
+        >
+          <LinearProgress
+            class={"card-no-pad card-gut-skip"}
+            id={progressId}
+            sx={currentState() === "inactive" ? { display: "none" } : undefined}
+          />
+          <form onSubmit={onStartOAuth2}>
+            <Title component="h6">Sign in with Your Mastodon Account</Title>
+            <TextField
+              label="Mastodon Server"
+              name="serverUrl"
+              onInput={setRawServerUrl}
+              required
+              helperText={serverUrlHelperText()}
+              error={!!serverUrlError()}
+            />
+
+            <div style={{ display: "flex", "justify-content": "end" }}>
+              <Button type="submit" disabled={currentState() !== "inactive"}>
+                {currentState() == "inactive"
+                  ? "Continue"
+                  : currentState() == "contracting"
+                    ? `Contracting ${new URL(serverUrl()).host}...`
+                    : `Moving to ${targetSiteTitle}`}
+              </Button>
+            </div>
+          </form>
+        </div>
+      </main>
+    </>
   );
 };
 

src/accounts/stores.ts

@@ -6,10 +6,19 @@ import {
 } from "masto";
 import { createMastoClientFor } from "../masto/clients";
 
-export type Account = {
+export type RemoteServer = {
   site: string;
-  accessToken: string;
+};
 
+export type AccountKey = RemoteServer & {
+  accessToken: string;
+};
+
+export function isAccountKey(object: RemoteServer): object is AccountKey {
+  return !!(object as Record<string, unknown>)["accessToken"];
+}
+
+export type Account = AccountKey & {
   tokenType: string;
   scope: string;
   createdAt: number;
@@ -17,6 +26,10 @@ export type Account = {
   inf?: mastodon.v1.AccountCredentials;
 };
 
+export function isAccount(object: RemoteServer) {
+  return isAccountKey(object) && !!(object as Record<string, unknown>)["tokenType"];
+}
+
 export const $accounts = persistentAtom<Account[]>("accounts", [], {
   encode: JSON.stringify,
   decode: JSON.parse,

src/masto/base.ts

@@ -0,0 +1,84 @@
+import { createCacheBucket } from "~platform/cache";
+import { MastoHttpError, MastoTimeoutError, MastoUnexpectedError } from "masto";
+
+export const CACHE_BUCKET_NAME = "mastodon";
+
+export const cacheBucket = /* @__PURE__ */ createCacheBucket(CACHE_BUCKET_NAME);
+
+export function toSmallCamelCase<T>(object: T): T {
+  if (!object || typeof object !== "object") {
+    return object;
+  } else if (Array.isArray(object)) {
+    return object.map(toSmallCamelCase) as T;
+  }
+
+  const result = {} as Record<keyof any, unknown>;
+  for (const k in object) {
+    const value = toSmallCamelCase(object[k]);
+    const nk =
+      typeof k === "string"
+        ? k.replace(/_(.)/g, (_, match) => match.toUpperCase())
+        : k;
+    result[nk] = value;
+  }
+
+  return result as T;
+}
+
+function contentTypeOf(headers: Headers) {
+  const raw = headers.get("Content-Type")?.replace(/\s*;.*$/, "");
+  if (!raw) {
+    return;
+  }
+
+  return raw;
+}
+
+/**
+ * Wrpas the error reason into masto's errors:
+ * {@link MastoHttpError} if the reason is a {@link Response},
+ * {@link MastoTimeoutError} if the reason is a timeout error.
+ *
+ * @throws If the reason is unexpected, {@link MastoUnexpectedError} will be thrown.
+ */
+export async function wrapsError(reason: Response): Promise<MastoHttpError>;
+export async function wrapsError(reason: {
+  name: "TimeoutError";
+}): Promise<MastoTimeoutError>;
+export async function wrapsError<T>(reason: T): Promise<T>;
+
+export async function wrapsError(reason: unknown) {
+  if (reason instanceof Response) {
+    const contentType = contentTypeOf(reason.headers);
+    if (!contentType) {
+      throw new MastoUnexpectedError(
+        "The server returned data with an unknown encoding. The server may be down",
+      );
+    }
+
+    const data = await reason.json();
+    const {
+      error: message,
+      errorDescription,
+      details,
+      ...additionalProperties
+    } = data;
+
+    return new MastoHttpError(
+      {
+        statusCode: reason.status,
+        message,
+        description: errorDescription,
+        details,
+        additionalProperties,
+      },
+      { cause: reason },
+    );
+  }
+
+  if (reason && (reason as { name?: string }).name === "TimeoutError") {
+    return new MastoTimeoutError("Request timed out", { cause: reason });
+  }
+
+  return reason;
+}

src/masto/clients.ts

@@ -4,9 +4,10 @@ import {
   createMemo,
   createRenderEffect,
   createResource,
+  untrack,
   useContext,
 } from "solid-js";
-import { Account } from "../accounts/stores";
+import { Account, type RemoteServer } from "../accounts/stores";
 import { createRestAPIClient, mastodon } from "masto";
 import { useLocation } from "@solidjs/router";
 import { useNavigator } from "~platform/StackedRouter";
@@ -57,15 +58,15 @@ export const Provider = Context.Provider;
 
 export function useSessions() {
   const sessions = useSessionsRaw();
-  const {push} = useNavigator();
+  const { push } = useNavigator();
   const location = useLocation();
 
   createRenderEffect(() => {
-    if (sessions().length > 0) return;
-    push(
-      "/accounts/sign-in?back=" + encodeURIComponent(location.pathname),
-      { replace: "all" },
-    );
+    if (untrack(() => sessions().length) > 0) return;
+
+    push("/accounts/sign-in?back=" + encodeURIComponent(location.pathname), {
+      replace: true,
+    });
   });
 
   return sessions;
@@ -114,7 +115,7 @@ export function useDefaultSession() {
  * - If the username is not present, any session on the site is returned; or,
  * - If no available session available for the pattern, an unauthorised session is returned.
  *
- * In an unauthorised session, the `.account` is `undefined` and the `client` is an
+ * In an unauthorised session, the `.account` is {@link RemoteServer} and the `client` is an
  * unauthorised client for the site. This client may not available for some operations.
  */
 export function useSessionForAcctStr(acct: Accessor<string>) {
@@ -130,8 +131,8 @@ export function useSessionForAcctStr(acct: Accessor<string>) {
     return (
       authedSession ?? {
         client: createUnauthorizedClient(inputSite),
-        account: undefined,
-      }
+        account: { site: inputSite } as RemoteServer, // TODO: we need some security checks here?
+      } as const
     );
   });
 }

src/masto/statuses.ts

@@ -0,0 +1,32 @@
+import { CachedFetch } from "~platform/cache";
+import { cacheBucket, toSmallCamelCase, wrapsError } from "./base";
+import { isAccountKey, type RemoteServer } from "../accounts/stores";
+import { type mastodon } from "masto";
+
+export const fetchStatus = /* @__PURE__ */ new CachedFetch(
+  cacheBucket,
+  (session: RemoteServer, id: string) => {
+    const headers = new Headers({
+      Accept: "application/json",
+    });
+    if (isAccountKey(session)) {
+      headers.set("Authorization", `Bearer ${session.accessToken}`);
+    }
+    return {
+      url: new URL(`./api/v1/statuses/${id}`, session.site).toString(),
+      headers,
+    };
+  },
+  async (response) => {
+    try {
+      if (!response.ok) {
+        throw response;
+      }
+      return toSmallCamelCase(
+        await response.json(),
+      ) as unknown as mastodon.v1.Status;
+    } catch (reason) {
+      throw wrapsError(reason);
+    }
+  },
+);

src/masto/timelines.ts

@@ -248,6 +248,64 @@ export type TimelineResource<R> = [
   { refetch(info?: TimelineFetchDirection): void },
 ];
 
+export const emptyTimeline = {
+  list() {
+    return emptyTimeline;
+  },
+
+  setDirection() {
+    return emptyTimeline;
+  },
+
+  async next(): Promise<IteratorResult<any, undefined>> {
+    return {
+      value: undefined,
+      done: true,
+    };
+  },
+
+  getDirection(): TimelineFetchDirection {
+    return "next";
+  },
+
+  clone() {
+    return emptyTimeline;
+  },
+
+  async return(): Promise<IteratorResult<any, undefined>> {
+    return {
+      value: undefined,
+      done: true,
+    };
+  },
+
+  async throw(e?: unknown) {
+    throw e;
+  },
+
+  async *values() {},
+  async *[Symbol.asyncIterator](): AsyncIterator<any[], undefined> {
+    return undefined;
+  },
+
+  async then<TNext, ENext>(
+    onresolve?: null | ((value: any[]) => TNext | PromiseLike<TNext>),
+    onrejected?: null | ((reason: unknown) => ENext | PromiseLike<ENext>),
+  ) {
+    try {
+      if (!onresolve) {
+        throw new TypeError("no onresolve");
+      }
+      return await onresolve([]);
+    } catch (reason) {
+      if (!onrejected) {
+        throw reason;
+      }
+      return await onrejected(reason);
+    }
+  },
+};
+
 /**
  * Create auto managed timeline controls.
  *

src/material/AppTopBar.css

@@ -1,6 +1,27 @@
 .AppTopBar {
-  & > .toolbar {
+  &::before {
+    contain: strict;
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: var(--safe-area-inset-top, 0);
+    background-color: rgba(0, 0, 0, 0.2);
+  }
+
+  &>.MuiToolbar-root {
     padding-top: var(--safe-area-inset-top, 0px);
     gap: 8px;
+
+    &>button:first-child,
+    &>.MuiButtonBase-root:first-child {
+      margin-left: -0.15em;
+    }
+
+    &>button:last-child,
+    &>.MuiButtonBase-root:last-child {
+      margin-right: -0.15em;
+    }
   }
-}
+}

src/material/AppTopBar.tsx

@@ -20,7 +20,6 @@ const AppTopBar: ParentComponent<{
     >
       <Toolbar
         variant={windowSize.width > windowSize.height ? "dense" : "regular"}
-        class="toolbar"
         sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
       >
         {props.children}

src/material/BottomSheet.tsx

@@ -7,7 +7,6 @@ import {
   type ParentComponent,
 } from "solid-js";
 import "./BottomSheet.css";
-import material from "./material.module.css";
 import { ANIM_CURVE_ACELERATION, ANIM_CURVE_DECELERATION } from "./theme";
 import {
   animateSlideInFromRight,
@@ -51,7 +50,7 @@ function animateSlideInFromBottom(element: HTMLElement, reverse?: boolean) {
 }
 
 const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
-  let element: HTMLDialogElement;
+  let element!: HTMLDialogElement;
   let animation: Animation | undefined;
   const child = children(() => props.children);
 
@@ -134,7 +133,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
 
   return (
     <dialog
-      class={`BottomSheet ${material.surface} ${props.class || ""}`}
+      class={`BottomSheet surface ${props.class || ""}`}
       classList={{
         ["bottom"]: props.bottomUp,
       }}

src/material/Button.tsx

@@ -1,5 +1,4 @@
 import { Component, JSX, splitProps } from "solid-js";
-import materialStyles from "./material.module.css";
 import "./typography.css";
 
 /**
@@ -10,13 +9,12 @@ import "./typography.css";
 const Button: Component<JSX.ButtonHTMLAttributes<HTMLButtonElement>> = (
   props,
 ) => {
-  const [managed, passthough] = splitProps(props, ["class", "type"]);
+  const [managed, passthough] = splitProps(props, [ "type"]);
   const type = () => managed.type ?? "button";
 
   return (
     <button
       type={type()}
-      class={`${materialStyles.button} buttonText ${managed.class || ""}`}
       {...passthough}
     ></button>
   );

src/material/Img.tsx

@@ -3,14 +3,12 @@ import {
   splitProps,
   Component,
   createSignal,
-  createEffect,
   onMount,
   createRenderEffect,
   Show,
 } from "solid-js";
 import { css } from "solid-styled";
 import { decode } from "blurhash";
-import { mergeClass } from "../utils";
 
 type ImgProps = {
   blurhash?: string;
@@ -24,6 +22,7 @@ const Img: Component<ImgProps> = (props) => {
     "blurhash",
     "keepBlur",
     "class",
+    "classList",
     "style",
   ]);
   const [isImgLoaded, setIsImgLoaded] = createSignal(false);
@@ -61,21 +60,21 @@ const Img: Component<ImgProps> = (props) => {
   const onImgLoaded = () => {
     setIsImgLoaded(true);
     setImgSize({
-      width: imgE.width,
-      height: imgE.height,
+      width: imgE!.width,
+      height: imgE!.height,
     });
   };
 
   const onMetadataLoaded = () => {
     setImgSize({
-      width: imgE.width,
-      height: imgE.height,
+      width: imgE!.width,
+      height: imgE!.height,
     });
   };
 
   onMount(() => {
     setImgSize((x) => {
-      const parent = imgE.parentElement;
+      const parent = imgE!.parentElement;
       if (!parent) return x;
       return x
         ? x
@@ -87,7 +86,14 @@ const Img: Component<ImgProps> = (props) => {
   });
 
   return (
-    <div class={mergeClass(managed.class, "img-root")} style={managed.style}>
+    <div
+      classList={{
+        ...managed.classList,
+        [managed.class ?? ""]: true,
+        "img-root": true,
+      }}
+      style={managed.style}
+    >
       <Show when={managed.blurhash}>
         <canvas
           ref={(canvas) => {

src/material/Menu.tsx

@@ -108,7 +108,7 @@ function animateGrowFromTopLeft(
  * - Use {@link MenuItem} from SUID as children.
  */
 const Menu: Component<MenuProps> = (oprops) => {
-  let root: HTMLDialogElement;
+  let root!: HTMLDialogElement;
   const windowSize = useWindowSize();
   const [props, rest] = splitProps(oprops, [
     "open",

src/material/Tab.css

@@ -0,0 +1,32 @@
+.Tab {
+  cursor: pointer;
+  background: none;
+  border: none;
+  height: 100%;
+  max-width: min(calc(100% - 56px), 264px);
+  padding: 10px 24px;
+  font-size: 0.8135rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  transition: color 120ms var(--tutu-anim-curve-std);
+
+  :root:where([lang^="zh"],
+    [lang="zh"],
+    [lang^="kr"],
+    [lang="kr"],
+    [lang^="ja"],
+    [lang="ja"]) & {
+    font-size: 0.85rem;
+  }
+}
+
+.MuiToolbar-root .Tab {
+  color: rgba(255, 255, 255, 0.7);
+
+  &:hover,
+  &:focus,
+  &.focus,
+  &.Tabs-focus {
+    color: white;
+  }
+}

src/material/Tab.tsx

@@ -1,26 +1,18 @@
 import {
-  Component,
   createEffect,
   splitProps,
   type JSX,
   type ParentComponent,
 } from "solid-js";
-import { css } from "solid-styled";
 import { useTabListContext } from "./Tabs";
+import "./Tab.css";
 
 const Tab: ParentComponent<
   {
     focus?: boolean;
-    large?: boolean;
   } & JSX.ButtonHTMLAttributes<HTMLButtonElement>
 > = (props) => {
-  const [managed, rest] = splitProps(props, [
-    "focus",
-    "large",
-    "type",
-    "role",
-    "ref",
-  ]);
+  const [managed, rest] = splitProps(props, ["focus", "type", "role", "ref"]);
   let self: HTMLButtonElement;
   const {
     focusOn: [, setFocusOn],
@@ -35,32 +27,7 @@ const Tab: ParentComponent<
     }
     return managed.focus;
   });
-  css`
-    .tab {
-      cursor: pointer;
-      background: none;
-      border: none;
-      min-width: ${managed.large ? "160px" : "72px"};
-      height: 48px;
-      max-width: min(calc(100% - 56px), 264px);
-      padding: 10px 24px;
-      font-size: 0.8135rem;
-      font-weight: 600;
-      text-transform: uppercase;
-      transition: color 120ms var(--tutu-anim-curve-std);
-    }
 
-    :global(.MuiToolbar-root) .tab {
-      color: rgba(255, 255, 255, 0.7);
-
-      &:hover,
-      &:focus,
-      &.focus,
-      &:global(.tablist-focus) {
-        color: white;
-      }
-    }
-  `;
   return (
     <button
       ref={(x) => {
@@ -68,7 +35,7 @@ const Tab: ParentComponent<
         (managed.ref as (e: HTMLButtonElement) => void)?.(x);
       }}
       type={managed.type ?? "button"}
-      classList={{ tab: true, focus: managed.focus }}
+      classList={{ Tab: true, focus: managed.focus }}
       role={managed.role ?? "tab"}
       {...rest}
     >

src/material/Tabs.css

@@ -0,0 +1,21 @@
+.Tabs {
+  width: 100%;
+  position: relative;
+  white-space: nowrap;
+  overflow-x: auto;
+  align-self: stretch;
+
+  &::after {
+    transition:
+      left var(--tabs-indkt-movspeed-offset, 0) var(--tutu-anim-curve-std),
+      width var(--tabs-indkt-movspeed-width, 0) var(--tutu-anim-curve-std);
+    position: absolute;
+    content: "";
+    display: block;
+    background-color: white;
+    height: 2px;
+    width: var(--tabs-indkt-width, 0);
+    left: var(--tabs-indkt-offset, 0);
+    bottom: 0;
+  }
+}

src/material/Tabs.tsx

@@ -1,14 +1,12 @@
 import {
   ParentComponent,
   createContext,
-  createEffect,
-  createMemo,
   createRenderEffect,
   createSignal,
   useContext,
   type Signal,
 } from "solid-js";
-import { css } from "solid-styled";
+import "./Tabs.css"
 
 const TabListContext = /* @__PURE__ */ createContext<{
   focusOn: Signal<HTMLElement[]>;
@@ -24,7 +22,7 @@ export function useTabListContext() {
 
 const ANIM_SPEED = 160 / 110; // 160px/110ms
 
-const TABLIST_FOCUS_CLASS = "tablist-focus";
+const TABS_FOCUS_CLASS = "Tabs-focus";
 
 const Tabs: ParentComponent<{
   offset?: number;
@@ -37,11 +35,11 @@ const Tabs: ParentComponent<{
     const current = focusOn();
     if (lastFocusElement) {
       for (const e of lastFocusElement) {
-        e.classList.remove(TABLIST_FOCUS_CLASS);
+        e.classList.remove(TABS_FOCUS_CLASS);
       }
     }
     for (const e of current) {
-      e.classList.add("tablist-focus");
+      e.classList.add(TABS_FOCUS_CLASS);
     }
     return current;
   });
@@ -109,7 +107,7 @@ const Tabs: ParentComponent<{
       return ["0px", "0px", "110ms", "110ms"] as const;
     }
     const rect = focusBoundingClientRect();
-    const rootRect = self.getBoundingClientRect();
+    const rootRect = self!.getBoundingClientRect();
     const left = rect.x - rootRect.x;
     const width = rect.width;
     const [prevEl, nextEl] = focusSiblings();
@@ -130,32 +128,14 @@ const Tabs: ParentComponent<{
     return result;
   };
 
-  css`
-    .tablist {
-      width: 100%;
-      position: relative;
-      white-space: nowrap;
-      overflow-x: auto;
-
-      &::after {
-        transition:
-          left ${indicator()[2]} var(--tutu-anim-curve-std),
-          width ${indicator()[3]} var(--tutu-anim-curve-std);
-        position: absolute;
-        content: "";
-        display: block;
-        background-color: white;
-        height: 2px;
-        width: ${indicator()[1]};
-        left: ${indicator()[0]};
-        bottom: 0;
-      }
-    }
-  `;
-
   return (
     <TabListContext.Provider value={{ focusOn: [focusOn, setFocusOn] }}>
-      <div ref={self!} class="tablist" role="tablist">
+      <div ref={self!} class="Tabs" style={{
+        "--tabs-indkt-width": indicator()[1],
+        "--tabs-indkt-offset": indicator()[0],
+        "--tabs-indkt-movspeed-offset": indicator()[2],
+        "--tabs-indkt-movspeed-width": indicator()[3]
+      }} role="tablist">
         {props.children}
       </div>
     </TabListContext.Provider>

src/material/TextField.css

@@ -1,5 +1,7 @@
-.textfield {
-  composes: touchTarget from "material.module.css";
+.TextField {
+  min-width: 44px;
+  min-height: 44px;
+  cursor: pointer;
 
   --border-color: var(--tutu-color-inactive-on-surface);
   --active-border-color: var(--tutu-color-primary);

src/material/TextField.tsx

@@ -6,7 +6,7 @@ import {
   onMount,
   Show,
 } from "solid-js";
-import formStyles from "./form.module.css";
+import "./TextField.css";
 
 export type TextFieldProps = {
   label?: string;
@@ -28,14 +28,14 @@ const TextField: Component<TextFieldProps> = (props) => {
 
   createEffect(() => {
     if (hasContent()) {
-      field.classList.add("float-label");
+      field!.classList.add("float-label");
     } else {
-      field.classList.remove("float-label");
+      field!.classList.remove("float-label");
     }
   });
 
   onMount(() => {
-    setHasContent(input.value.length > 0);
+    setHasContent(input!.value.length > 0);
   });
 
   const onInputChange = (e: { currentTarget: HTMLInputElement }) => {
@@ -47,12 +47,12 @@ const TextField: Component<TextFieldProps> = (props) => {
   const inputId = () => props.inputId ?? altInputId;
 
   const fieldClass = () => {
-    const cls = [formStyles.textfield];
+    const cls = ["TextField"];
     if (typeof props.helperText !== "undefined") {
-      cls.push(formStyles.withHelperText);
+      cls.push("withHelperText");
     }
     if (props.error) {
-      cls.push(formStyles.error);
+      cls.push("error");
     }
     return cls.join(" ");
   };
@@ -71,7 +71,7 @@ const TextField: Component<TextFieldProps> = (props) => {
         name={props.name}
       />
       <Show when={typeof props.helperText !== "undefined"}>
-        <span class={formStyles.helperText}>{props.helperText}</span>
+        <span class="helperText">{props.helperText}</span>
       </Show>
     </div>
   );

src/material/cards.css

@@ -0,0 +1,57 @@
+@layer material {
+  .card {
+    --card-pad: 20px;
+    --card-gut: 20px;
+
+    background-color: var(--tutu-color-surface);
+    color: var(--tutu-color-on-surface);
+
+    border-radius: 2px;
+    box-shadow: var(--tutu-shadow-e2);
+    transition: var(--tutu-transition-shadow);
+    overflow: hidden;
+    background-color: var(--tutu-color-surface-l);
+
+    &:focus-within,
+    &:focus-visible {
+      box-shadow: var(--tutu-shadow-e8);
+    }
+
+    &>.card-pad {
+      margin-left: var(--card-pad);
+      margin-right: var(--card-pad);
+    }
+
+    &>.card-gut {
+      &:first-child {
+        margin-top: var(--card-gut);
+      }
+
+      &+.card-gut {
+        margin-top: var(--card-gut);
+      }
+
+      &:last-child {
+        margin-bottom: var(--card-gut);
+      }
+    }
+
+    &.card-auto-margin {
+      &> :not(.card-no-pad) {
+        margin-inline: var(--card-pad, 20px);
+      }
+
+      > :not(.card-gut-skip):first-child {
+        margin-top: var(--card-gut, 20px);
+      }
+
+      >.card-gut-skip+*:not(.card-gut-skip) {
+        margin-top: var(--card-gut, 20px);
+      }
+
+      > :not(.card-gut-skip):last-child {
+        margin-bottom: var(--card-gut, 20px);
+      }
+    }
+  }
+}

src/material/cards.module.css

@@ -1,54 +0,0 @@
-.card {
-  composes: surface from "material.module.css";
-  border-radius: 2px;
-  box-shadow: var(--tutu-shadow-e2);
-  transition: var(--tutu-transition-shadow);
-  overflow: hidden;
-  background-color: var(--tutu-color-surface-l);
-
-  &:focus-within,
-  &:focus-visible {
-    box-shadow: var(--tutu-shadow-e8);
-  }
-
-  &:not(.manualMargin) {
-    &> :not(.cardNoPad) {
-      margin-inline: var(--card-pad, 20px);
-    }
-
-    > :not(.cardGutSkip):first-child {
-      margin-top: var(--card-gut, 20px);
-    }
-
-    >.cardGutSkip+*:not(.cardGutSkip) {
-      margin-top: var(--card-gut, 20px);
-    }
-
-    > :not(.cardGutSkip):last-child {
-      margin-bottom: var(--card-gut, 20px);
-    }
-  }
-}
-
-.layoutCentered {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  width: 448px;
-
-  @media (max-width: 600px) {
-    & {
-      position: static;
-      height: 100%;
-      width: 100%;
-      left: 0;
-      right: 0;
-      transform: none;
-      display: grid;
-      grid-template-rows: 1fr auto;
-      height: 100vh;
-      overflow: auto;
-    }
-  }
-}

src/material/material.css

@@ -1,16 +1,14 @@
+@import "./typography.css";
+
 .surface {
   background-color: var(--tutu-color-surface);
   color: var(--tutu-color-on-surface);
 }
 
-.touchTarget {
+button {
   min-width: 44px;
   min-height: 44px;
   cursor: pointer;
-}
-
-.button {
-  composes: touchTarget;
 
   border: none;
   background-color: transparent;

src/material/typography.css

@@ -1,3 +1,6 @@
+/* Don't import this file directly. This file is already included in material.css */
+
+
 .display4 {
   font-size: 7rem;
   font-weight: 300;

src/material/typography.tsx

@@ -1,21 +1,11 @@
-import { JSX, ParentComponent, splitProps, type Ref } from "solid-js";
+import { splitProps, type Ref, ComponentProps, ValidComponent } from "solid-js";
 import { Dynamic } from "solid-js/web";
-import "./typography.css";
 
-type AnyElement = keyof JSX.IntrinsicElements | ParentComponent<any>;
-
-type PropsOf<E extends AnyElement> =
-  E extends ParentComponent<infer Props>
-    ? Props
-    : E extends keyof JSX.IntrinsicElements
-      ? JSX.IntrinsicElements[E]
-      : JSX.HTMLAttributes<HTMLElement>;
-
-export type TypographyProps<E extends AnyElement> = {
+export type TypographyProps<E extends ValidComponent> = {
   ref?: Ref<E>;
   component?: E;
   class?: string;
-} & PropsOf<E>;
+} & ComponentProps<E>;
 
 type TypographyKind =
   | "display4"
@@ -30,7 +20,7 @@ type TypographyKind =
   | "caption"
   | "buttonText";
 
-export function Typography<T extends AnyElement>(
+export function Typography<T extends ValidComponent>(
   props: { typography: TypographyKind } & TypographyProps<T>,
 ) {
   const [managed, passthough] = splitProps(props, [
@@ -49,36 +39,36 @@ export function Typography<T extends AnyElement>(
   );
 }
 
-export function Display4<E extends AnyElement>(props: TypographyProps<E>) {
+export function Display4<E extends ValidComponent>(props: TypographyProps<E>) {
   return <Typography typography={"display4"} {...props}></Typography>;
 }
-export function Display3<E extends AnyElement>(props: TypographyProps<E>) {
+export function Display3<E extends ValidComponent>(props: TypographyProps<E>) {
   return <Typography typography={"display3"} {...props}></Typography>;
 }
-export function Display2<E extends AnyElement>(props: TypographyProps<E>) {
+export function Display2<E extends ValidComponent>(props: TypographyProps<E>) {
   return <Typography typography={"display2"} {...props}></Typography>;
 }
-export function Display1<E extends AnyElement>(props: TypographyProps<E>) {
+export function Display1<E extends ValidComponent>(props: TypographyProps<E>) {
   return <Typography typography={"display1"} {...props}></Typography>;
 }
-export function Headline<E extends AnyElement>(props: TypographyProps<E>) {
+export function Headline<E extends ValidComponent>(props: TypographyProps<E>) {
   return <Typography typography={"headline"} {...props}></Typography>;
 }
-export function Title<E extends AnyElement>(props: TypographyProps<E>) {
+export function Title<E extends ValidComponent>(props: TypographyProps<E>) {
   return <Typography typography={"title"} {...props}></Typography>;
 }
-export function Subheading<E extends AnyElement>(props: TypographyProps<E>) {
+export function Subheading<E extends ValidComponent>(props: TypographyProps<E>) {
   return <Typography typography={"subheading"} {...props}></Typography>;
 }
-export function Body1<E extends AnyElement>(props: TypographyProps<E>) {
+export function Body1<E extends ValidComponent>(props: TypographyProps<E>) {
   return <Typography typography={"body1"} {...props}></Typography>;
 }
-export function Body2<E extends AnyElement>(props: TypographyProps<E>) {
+export function Body2<E extends ValidComponent>(props: TypographyProps<E>) {
   return <Typography typography={"body2"} {...props}></Typography>;
 }
-export function Caption<E extends AnyElement>(props: TypographyProps<E>) {
+export function Caption<E extends ValidComponent>(props: TypographyProps<E>) {
   return <Typography typography={"caption"} {...props}></Typography>;
 }
-export function ButtonText<E extends AnyElement>(props: TypographyProps<E>) {
+export function ButtonText<E extends ValidComponent>(props: TypographyProps<E>) {
   return <Typography typography={"buttonText"} {...props}></Typography>;
 }

src/platform/DocumentTitle.tsx

@@ -0,0 +1,22 @@
+import { children, createRenderEffect, onCleanup, type JSX } from "solid-js";
+
+/**
+ * Document title.
+ *
+ * The `children` must be plain text.
+ */
+export default function (props: { children?: JSX.Element }) {
+  let otitle: string | undefined;
+
+  createRenderEffect(() => (otitle = document.title));
+
+  const title = children(() => props.children);
+
+  createRenderEffect(
+    () => (document.title = (title.toArray() as string[]).join("")),
+  );
+
+  onCleanup(() => (document.title = otitle!));
+
+  return <></>;
+}

src/platform/StackedRouter.tsx

@@ -1,10 +1,13 @@
-import { StaticRouter, type RouterProps } from "@solidjs/router";
+import {
+  type RouterProps,
+  type StaticRouterProps,
+  createRouter,
+} from "@solidjs/router";
 import {
   Component,
   createContext,
   createMemo,
   createRenderEffect,
-  createUniqueId,
   Index,
   onMount,
   Show,
@@ -12,6 +15,8 @@ import {
   useContext,
   onCleanup,
   type Accessor,
+  useTransition,
+  getOwner,
 } from "solid-js";
 import { createStore, unwrap } from "solid-js/store";
 import "./StackedRouter.css";
@@ -21,6 +26,12 @@ import { makeEventListener } from "@solid-primitives/event-listener";
 import { useWindowSize } from "@solid-primitives/resize-observer";
 import { isPointNotInRect } from "./dom";
 
+let uniqueCounter = 0;
+
+function createUniqueId() {
+  return `sr-${uniqueCounter++}`;
+}
+
 export type StackedRouterProps = Omit<RouterProps, "url">;
 
 export type StackFrame = {
@@ -70,8 +81,8 @@ export type NewFrameOptions<T> = (T extends undefined
 export type FramePusher<T, K extends keyof T = keyof T> = T[K] extends
   | undefined
   | any
-  ? (path: K, state?: Readonly<NewFrameOptions<T[K]>>) => Readonly<StackFrame>
-  : (path: K, state: Readonly<NewFrameOptions<T[K]>>) => Readonly<StackFrame>;
+  ? (path: K, state?: Readonly<NewFrameOptions<T[K]>>) => Promise<Readonly<StackFrame>>
+  : (path: K, state: Readonly<NewFrameOptions<T[K]>>) => Promise<Readonly<StackFrame>>;
 
 export type Navigator<PushGuide = Record<string, any>> = {
   frames: readonly StackFrame[];
@@ -387,6 +398,24 @@ function animateUntil(
   execStep();
 }
 
+function noOp() {}
+
+function StaticRouter(props: StaticRouterProps) {
+  const url = () => props.url || "";
+
+  // TODO: support onBeforeLeave, see
+  // https://github.com/solidjs/solid-router/blob/main/src/routers/Router.ts
+
+  return createRouter({
+    get: url,
+    set: noOp,
+    init(notify) {
+      createRenderEffect(() => notify(url()));
+      return noOp;
+    },
+  })(props);
+}
+
 /**
  * The cache key of saved stack for hot reload.
  *
@@ -438,6 +467,8 @@ const StackedRouter: Component<StackedRouterProps> = (oprops) => {
   const [stack, mutStack] = createStore([] as StackFrame[], { name: "stack" });
   const windowSize = useWindowSize();
 
+  const [, startTransition] = useTransition();
+
   if (import.meta.hot) {
     const saveStack = () => {
       import.meta.hot!.data[$StackedRouterSavedStack] = unwrap(stack);
@@ -457,12 +488,12 @@ const StackedRouter: Component<StackedRouterProps> = (oprops) => {
     };
 
     createRenderEffect(() => {
-      loadStack()
+      loadStack();
     });
   }
 
-  const pushFrame = (path: string, opts?: Readonly<NewFrameOptions<any>>) =>
-    untrack(() => {
+  const pushFrame = async (path: string, opts?: Readonly<NewFrameOptions<any>>) =>
+    await untrack(async () => {
       const frame = {
         path,
         state: opts?.state,
@@ -472,11 +503,17 @@ const StackedRouter: Component<StackedRouterProps> = (oprops) => {
       };
 
       const replace = opts?.replace;
-      if (replace === "all") {
-        mutStack([frame]);
-      } else {
-        mutStack(replace ? stack.length - 1 : stack.length, frame);
-      }
+      const length = stack.length;
+      await startTransition(() => {
+        if (replace === "all" || length === 0) {
+          mutStack([frame]);
+        } else if (replace) {
+          const idx = length - 1;
+          mutStack(idx, frame);
+        } else {
+          mutStack(length, frame);
+        }
+      });
 
       const savedStack = serializableStack(stack);
 
@@ -485,6 +522,7 @@ const StackedRouter: Component<StackedRouterProps> = (oprops) => {
       } else {
         window.history.pushState(savedStack, "", path);
       }
+
       return frame;
     });
 
@@ -541,13 +579,19 @@ const StackedRouter: Component<StackedRouterProps> = (oprops) => {
       }
     });
 
-  createRenderEffect(() => {
-    if (stack.length === 0) {
-      pushFrame(window.location.pathname, {
-        replace: "all",
-      });
-    }
-  });
+  createRenderEffect(() =>
+    untrack(() => {
+      if (stack.length === 0) {
+        const parts = [window.location.pathname] as string[];
+        if (window.location.search) {
+          parts.push(window.location.search);
+        }
+        pushFrame(parts.join(""), {
+          replace: "all",
+        });
+      }
+    }),
+  );
 
   createRenderEffect(() => {
     makeEventListener(window, "popstate", (event) => {
@@ -636,7 +680,9 @@ const StackedRouter: Component<StackedRouterProps> = (oprops) => {
           const currentFrame = () => {
             return {
               index,
-              frame: frame(),
+              get frame() {
+                return frame();
+              },
             };
           };
 

src/platform/cache.ts

@@ -0,0 +1,145 @@
+import { addMinutes, formatRFC7231 } from "date-fns";
+import {
+  createRenderEffect,
+  createResource,
+  untrack,
+} from "solid-js";
+
+export function createCacheBucket(name: string) {
+  let bucket: Cache | undefined;
+
+  return async () => {
+    if (bucket) {
+      return bucket;
+    }
+
+    bucket = await self.caches.open(name);
+
+    return bucket;
+  };
+}
+
+export type FetchRequest = {
+  url: string;
+  headers?: HeadersInit | Headers;
+};
+
+async function searchCache(request: Request) {
+  return await self.caches.match(request);
+}
+
+/**
+ * Create a {@link fetch} helper with additional caching support.
+ */
+export class CachedFetch<
+  Transformer extends (response: Response) => any,
+  Keyer extends (...args: any[]) => FetchRequest,
+> {
+  private cacheBucket: () => Promise<Cache>;
+  keyFor: Keyer;
+  private transform: Transformer;
+
+  constructor(
+    cacheBucket: () => Promise<Cache>,
+    keyFor: Keyer,
+    tranformer: Transformer,
+  ) {
+    this.cacheBucket = cacheBucket;
+    this.keyFor = keyFor;
+    this.transform = tranformer;
+  }
+
+  private async validateCache(request: Request) {
+    const buk = await this.cacheBucket();
+    const response = await fetch(request);
+    buk.put(request, response.clone());
+    return response;
+  }
+
+  private request(...args: Parameters<Keyer>) {
+    const { url, ...init } = this.keyFor(...args);
+    const request = new Request(url, init);
+    return request;
+  }
+
+  /**
+   * Race between the cache and the network result,
+   * use the fastest result.
+   *
+   * The cache will be revalidated.
+   */
+  async fastest(
+    ...args: Parameters<Keyer>
+  ): Promise<Awaited<ReturnType<Transformer>>> {
+    const request = this.request(...args);
+    const validating = this.validateCache(request);
+
+    const searching = searchCache(request);
+
+    const earlyResult = await Promise.race([validating, searching]);
+
+    if (earlyResult) {
+      return await this.transform(earlyResult);
+    }
+
+    return await this.transform(await validating);
+  }
+
+  /**
+   * Validate and return the result.
+   */
+  async validate(
+    ...args: Parameters<Keyer>
+  ): Promise<Awaited<ReturnType<Transformer>>> {
+    return await this.transform(
+      await this.validateCache(this.request(...args)),
+    );
+  }
+
+  /**  Set a response as the cache.
+   * Recommend to set `Expires` or `Cache-Control` to limit its live time.
+   */
+  async set(key: Parameters<Keyer>, response: Response) {
+    const buk = await this.cacheBucket();
+    await buk.put(this.request(...key), response);
+  }
+
+  /**  Set a json object as the cache.
+   * Only available for 5 minutes.
+   */
+  async setJson(key: Parameters<Keyer>, object: unknown) {
+    const response = new Response(JSON.stringify(object), {
+      status: 200,
+      headers: {
+        "Content-Type": "application/json",
+        Expires: formatRFC7231(addMinutes(new Date(), 5)),
+        "X-Cache-Src": "set",
+      },
+    });
+
+    await this.set(key, response);
+  }
+
+  /**
+   * Return a resource, using the cache at first, and revalidate
+   * later.
+   */
+  cachedAndRevalidate(args: () => Parameters<Keyer>) {
+    const res = createResource(args, (p) => this.validate(...p));
+
+    const checkCacheIfStillLoading = async () => {
+      const saved = await searchCache(this.request(...args()));
+      if (!saved) {
+        return;
+      }
+      const transformed = await this.transform(saved);
+      if (res[0].loading) {
+        res[1].mutate(transformed);
+      }
+    };
+
+    createRenderEffect(() => void untrack(() => checkCacheIfStillLoading()));
+
+    return res;
+  }
+}

src/platform/polyfills.ts

@@ -1,38 +1,27 @@
 //! This module has side effect.
 //! It recommended to include the module by <script> tag.
-if (typeof window.crypto.randomUUID === "undefined") {
-  // TODO: this polyfill can be removed in 2.0, see https://code.lightstands.xyz/Rubicon/tutu/issues/36
-  // Chrome/Edge 92+
-  // https://stackoverflow.com/a/2117523/2800218
-  // LICENSE: https://creativecommons.org/licenses/by-sa/4.0/legalcode
-  window.crypto.randomUUID =
-    function randomUUID(): `${string}-${string}-${string}-${string}-${string}` {
-      return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, (c) =>
-        (
-          +c ^
-          (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (+c / 4)))
-        ).toString(16),
-      ) as `${string}-${string}-${string}-${string}-${string}`;
-    };
-}
-
 
 if (typeof Promise.withResolvers === "undefined") {
   // Chrome/Edge 119, Firefox 121, Safari/iOS 17.4
 
   // Promise.withResolvers is generic and works with subclasses - the typescript built-in decl
   // could not handle the subclassing case.
-  Promise.withResolvers = function <T>(this: AnyPromiseConstructor<T>) {
-    let resolve!: PromiseWithResolvers<T>["resolve"], reject!: PromiseWithResolvers<T>["reject"];
+  (Promise.prototype as any).withResolvers = function <T>(
+    this: AnyPromiseConstructor<T>,
+  ) {
+    let resolve!: PromiseWithResolvers<T>["resolve"],
+      reject!: PromiseWithResolvers<T>["reject"];
     // These variables are expected to be set after `new this()`
 
     const promise = new this((resolve0, reject0) => {
       resolve = resolve0;
       reject = reject0;
-    })
+    });
 
     return {
-      promise, resolve, reject
-    }
-  }
+      promise,
+      resolve,
+      reject,
+    };
+  };
 }

src/profiles/Profile.tsx

@@ -1,6 +1,5 @@
 import {
   catchError,
-  createRenderEffect,
   createResource,
   createSignal,
   createUniqueId,
@@ -14,7 +13,6 @@ import {
 } from "solid-js";
 import Scaffold from "~material/Scaffold";
 import {
-  AppBar,
   Avatar,
   Button,
   Checkbox,
@@ -26,7 +24,6 @@ import {
   ListItemSecondaryAction,
   ListItemText,
   MenuItem,
-  Toolbar,
 } from "@suid/material";
 import {
   Close,
@@ -50,7 +47,11 @@ import { useSessionForAcctStr } from "../masto/clients";
 import { resolveCustomEmoji } from "../masto/toot";
 import { FastAverageColor } from "fast-average-color";
 import { useWindowSize } from "@solid-primitives/resize-observer";
-import { createTimeline, createTimelineSnapshot } from "../masto/timelines";
+import {
+  createTimeline,
+  createTimelineSnapshot,
+  emptyTimeline,
+} from "../masto/timelines";
 import TootList from "../timelines/TootList";
 import { createTimeSource, TimeSourceProvider } from "~platform/timesrc";
 import TootFilterButton from "./TootFilterButton";
@@ -63,6 +64,8 @@ import {
   default as ItemSelectionProvider,
 } from "../timelines/toots/ItemSelectionProvider";
 import AppTopBar from "~material/AppTopBar";
+import type { Account } from "../accounts/stores";
+import DocumentTitle from "~platform/DocumentTitle";
 
 const Profile: Component = () => {
   const { pop } = useNavigator();
@@ -104,6 +107,9 @@ const Profile: Component = () => {
   const [profileUncaught] = createResource(
     () => [session().client, params.id] as const,
     async ([client, id]) => {
+      if (id.startsWith("@")) {
+        return await client.v1.accounts.lookup({ acct: id.slice(1) });
+      }
       return await client.v1.accounts.$select(id).fetch();
     },
   );
@@ -116,8 +122,17 @@ const Profile: Component = () => {
     }
   };
 
+  const profileAcctId = () => {
+    if (params.id.startsWith("@")) {
+      // Webfinger
+      return profile()?.id;
+    } else {
+      return params.id;
+    }
+  };
+
   const isCurrentSessionProfile = () => {
-    return session().account?.inf?.url === profile()?.url;
+    return (session().account as Account).inf?.url === profile()?.url;
   };
 
   const [recentTootFilter, setRecentTootFilter] = createSignal({
@@ -127,26 +142,33 @@ const Profile: Component = () => {
     original: true,
   });
 
+  const recentTimeline = () => {
+    const id = profileAcctId();
+
+    if (id) {
+      return session().client.v1.accounts.$select(id).statuses;
+    } else {
+      return emptyTimeline;
+    }
+  };
+
   const [recentToots, recentTootChunk, { refetch: refetchRecentToots }] =
-    createTimeline(
-      () => session().client.v1.accounts.$select(params.id).statuses,
-      () => {
-        const { boost, reply } = recentTootFilter();
-        return { limit: 20, excludeReblogs: !boost, excludeReplies: !reply };
-      },
-    );
+    createTimeline(recentTimeline, () => {
+      const { boost, reply } = recentTootFilter();
+      return { limit: 20, excludeReblogs: !boost, excludeReplies: !reply };
+    });
 
   const [pinnedToots, pinnedTootChunk] = createTimelineSnapshot(
-    () => session().client.v1.accounts.$select(params.id).statuses,
+    recentTimeline,
     () => {
       return { limit: 20, pinned: true };
     },
   );
 
   const [relationshipUncaught, { mutate: mutateRelationship }] = createResource(
-    () => [session(), params.id] as const,
+    () => [session(), profileAcctId()] as const,
     async ([sess, id]) => {
-      if (!sess.account) return; // No account, no relation
+      if (!sess.account || !id) return; // No account, no relation
       const relations = await session().client.v1.accounts.relationships.fetch({
         id: [id],
       });
@@ -172,377 +194,383 @@ const Profile: Component = () => {
 
   const sessionDisplayName = createMemo(() =>
     resolveCustomEmoji(
-      session().account?.inf?.displayName || "",
-      session().account?.inf?.emojis ?? [],
+      (session().account as Account).inf?.displayName || "",
+      (session().account as Account).inf?.emojis ?? [],
     ),
   );
 
   const toggleSubscribeHome = async (event: Event) => {
     const client = session().client;
-    if (!session().account) return;
+    const acctId = profileAcctId();
+    if (!session().account || !acctId) return;
     const isSubscribed = relationship()?.following ?? false;
     mutateRelationship((x) => Object.assign({ following: !isSubscribed }, x));
     subscribeMenuState.onClose(event);
 
     if (isSubscribed) {
-      const nrel = await client.v1.accounts.$select(params.id).unfollow();
+      const nrel = await client.v1.accounts.$select(acctId).unfollow();
       mutateRelationship(nrel);
     } else {
-      const nrel = await client.v1.accounts.$select(params.id).follow();
+      const nrel = await client.v1.accounts.$select(acctId).follow();
       mutateRelationship(nrel);
     }
   };
 
   return (
-    <Scaffold
-      topbar={
-        <AppTopBar
-          role="navigation"
-          position="static"
-          color={scrolledPastBanner() ? "primary" : "transparent"}
-          elevation={scrolledPastBanner() ? undefined : 0}
-          style={{
-            color: scrolledPastBanner()
-              ? undefined
-              : bannerSampledColors()?.text,
-          }}
-        >
-          <IconButton color="inherit" onClick={[pop, 1]} aria-label="Close">
-            <Close />
-          </IconButton>
-          <Title
-            class="Profile__page-title"
+    <>
+      <DocumentTitle>{profile()?.displayName ?? "Someone"}</DocumentTitle>
+      <Scaffold
+        topbar={
+          <AppTopBar
+            role="navigation"
+            position="static"
+            color={scrolledPastBanner() ? "primary" : "transparent"}
+            elevation={scrolledPastBanner() ? undefined : 0}
             style={{
-              visibility: scrolledPastBanner() ? undefined : "hidden",
+              color: scrolledPastBanner()
+                ? undefined
+                : bannerSampledColors()?.text,
             }}
-            innerHTML={displayName()}
-          ></Title>
-
-          <IconButton
-            id={menuButId}
-            aria-controls={optMenuId}
-            color="inherit"
-            onClick={[setMenuOpen, true]}
-            aria-label="Open Options for the Profile"
           >
-            <MoreVert />
-          </IconButton>
-        </AppTopBar>
-      }
-      class="Profile"
-    >
-      <div class="details" role="presentation">
-        <Menu
-          id={optMenuId}
-          open={menuOpen()}
-          onClose={[setMenuOpen, false]}
-          anchor={() =>
-            document.getElementById(menuButId)!.getBoundingClientRect()
-          }
-          aria-label="Options for the Profile"
-        >
-          <Show when={session().account}>
-            <MenuItem>
-              <ListItemAvatar>
-                <Avatar src={session().account?.inf?.avatar} />
-              </ListItemAvatar>
-              <ListItemText secondary={"Default account"}>
-                <span innerHTML={sessionDisplayName()}></span>
-              </ListItemText>
-              {/* <ArrowRight /> // for future */}
-            </MenuItem>
-          </Show>
-          <Show when={session().account && profile()}>
-            <Show
-              when={isCurrentSessionProfile()}
-              fallback={
-                <MenuItem
-                  onClick={(event) => {
-                    const { left, right, top } =
-                      event.currentTarget.getBoundingClientRect();
-                    openSubscribeMenu({
-                      left,
-                      right,
-                      top,
-                      e: 1,
-                    });
-                  }}
-                >
-                  <ListItemIcon>
-                    <PlaylistAdd />
-                  </ListItemIcon>
-                  <ListItemText>Subscribe...</ListItemText>
-                </MenuItem>
-              }
+            <IconButton color="inherit" onClick={[pop, 1]} aria-label="Close">
+              <Close />
+            </IconButton>
+            <Title
+              class="Profile__page-title"
+              style={{
+                visibility: scrolledPastBanner() ? undefined : "hidden",
+              }}
+              innerHTML={displayName()}
+            ></Title>
+
+            <IconButton
+              id={menuButId}
+              aria-controls={optMenuId}
+              color="inherit"
+              onClick={[setMenuOpen, true]}
+              aria-label="Open Options for the Profile"
             >
-              <MenuItem disabled>
-                <ListItemIcon>
-                  <Edit />
-                </ListItemIcon>
-                <ListItemText>Edit...</ListItemText>
+              <MoreVert />
+            </IconButton>
+          </AppTopBar>
+        }
+        class="Profile"
+      >
+        <div class="details" role="presentation">
+          <Menu
+            id={optMenuId}
+            open={menuOpen()}
+            onClose={[setMenuOpen, false]}
+            anchor={() =>
+              document.getElementById(menuButId)!.getBoundingClientRect()
+            }
+            aria-label="Options for the Profile"
+          >
+            <Show when={session().account}>
+              <MenuItem>
+                <ListItemAvatar>
+                  <Avatar src={(session().account as Account).inf?.avatar} />
+                </ListItemAvatar>
+                <ListItemText secondary={"Default account"}>
+                  <span innerHTML={sessionDisplayName()}></span>
+                </ListItemText>
+                {/* <ArrowRight /> // for future */}
               </MenuItem>
             </Show>
-            <Divider />
-          </Show>
-          <MenuItem disabled>
-            <ListItemIcon>
-              <Group />
-            </ListItemIcon>
-            <ListItemText>Followers</ListItemText>
-            <ListItemSecondaryAction>
-              <span aria-label="The number of the account follower">
-                {profile()?.followersCount ?? ""}
-              </span>
-            </ListItemSecondaryAction>
-          </MenuItem>
-          <MenuItem disabled>
-            <ListItemIcon>
-              <Subject />
-            </ListItemIcon>
-            <ListItemText>Following</ListItemText>
-            <ListItemSecondaryAction>
-              <span aria-label="The number the account following">
-                {profile()?.followingCount ?? ""}
-              </span>
-            </ListItemSecondaryAction>
-          </MenuItem>
-          <MenuItem disabled>
-            <ListItemIcon>
-              <PersonOff />
-            </ListItemIcon>
-            <ListItemText>Blocklist</ListItemText>
-          </MenuItem>
-          <MenuItem disabled>
-            <ListItemIcon>
-              <Send />
-            </ListItemIcon>
-            <ListItemText>Mention in...</ListItemText>
-          </MenuItem>
-          <Divider />
-          <MenuItem
-            component={"a"}
-            href={profile()?.url}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <ListItemIcon>
-              <OpenInBrowser />
-            </ListItemIcon>
-            <ListItemText>Open in browser...</ListItemText>
-          </MenuItem>
-          <MenuItem onClick={() => share({ url: profile()?.url })}>
-            <ListItemIcon>
-              <Share />
-            </ListItemIcon>
-            <ListItemText>Share...</ListItemText>
-          </MenuItem>
-        </Menu>
-        <div
-          style={{
-            height: `${268 * (Math.min(560, windowSize.width) / 560)}px`,
-          }}
-          class="banner"
-          role="presentation"
-        >
-          <img
-            ref={(e) => obx.observe(e)}
-            src={bannerImg()}
-            crossOrigin="anonymous"
-            alt={`Banner image for ${profile()?.displayName || "the user"}`}
-            onLoad={(event) => {
-              const ins = new FastAverageColor();
-              const colors = ins.getColor(event.currentTarget);
-              setBannerSampledColors({
-                average: colors.hex,
-                text: colors.isDark ? "white" : "black",
-              });
-              ins.destroy();
-            }}
-          ></img>
-        </div>
-
-        <Menu {...subscribeMenuState}>
-          <MenuItem
-            onClick={toggleSubscribeHome}
-            aria-label={`${relationship()?.following ? "Unfollow" : "Follow"} on your home timeline`}
-          >
-            <ListItemAvatar>
-              <Avatar src={session().account?.inf?.avatar}></Avatar>
-            </ListItemAvatar>
-            <ListItemText
-              secondary={
-                relationship()?.following
-                  ? undefined
-                  : profile()?.locked
-                    ? "A request will be sent"
-                    : undefined
-              }
-            >
-              <span innerHTML={sessionDisplayName()}></span>
-              <span>'s Home</span>
-            </ListItemText>
-
-            <Checkbox checked={relationship()?.following ?? false} />
-          </MenuItem>
-        </Menu>
-
-        <div
-          class="intro"
-          style={{
-            "background-color": bannerSampledColors()?.average,
-            color: bannerSampledColors()?.text,
-          }}
-        >
-          <section class="acct-grp">
-            <Avatar
-              src={avatarImg()}
-              alt={`${profile()?.displayName || "the user"}'s avatar`}
-              sx={{
-                marginTop: "calc(-16px - 72px / 2)",
-                width: "72px",
-                height: "72px",
-              }}
-            ></Avatar>
-            <div class="name-grp">
-              <div class="display-name">
-                <Show when={profile()?.bot}>
-                  <SmartToySharp class="acct-mark" aria-label="Bot" />
-                </Show>
-                <Show when={profile()?.locked}>
-                  <Lock class="acct-mark" aria-label="Locked" />
-                </Show>
-                <Body2
-                  component="span"
-                  innerHTML={displayName()}
-                  aria-label="Display name"
-                ></Body2>
-              </div>
-              <span aria-label="Complete username" class="username">
-                {fullUsername()}
-              </span>
-            </div>
-            <div role="presentation">
-              <Switch>
-                <Match
-                  when={
-                    !session().account ||
-                    profileUncaught.loading ||
-                    profileUncaught.error
-                  }
-                >
-                  {<></>}
-                </Match>
-                <Match when={isCurrentSessionProfile()}>
-                  <IconButton color="inherit">
-                    <Edit />
-                  </IconButton>
-                </Match>
-                <Match when={true}>
-                  <Button
-                    variant="contained"
-                    color="secondary"
+            <Show when={session().account && profile()}>
+              <Show
+                when={isCurrentSessionProfile()}
+                fallback={
+                  <MenuItem
                     onClick={(event) => {
-                      openSubscribeMenu(
-                        event.currentTarget.getBoundingClientRect(),
-                      );
+                      const { left, right, top } =
+                        event.currentTarget.getBoundingClientRect();
+                      openSubscribeMenu({
+                        left,
+                        right,
+                        top,
+                        e: 1,
+                      });
                     }}
                   >
-                    {relationship()?.following ? "Subscribed" : "Subscribe"}
-                  </Button>
-                </Match>
-              </Switch>
-            </div>
-          </section>
-          <section
-            class="description"
-            aria-label={`${profile()?.displayName || "the user"}'s description`}
-            innerHTML={description() || ""}
-          ></section>
-
-          <table
-            class="acct-fields"
-            aria-label={`${profile()?.displayName || "the user"}'s fields`}
-          >
-            <tbody>
-              <For each={profile()?.fields ?? []}>
-                {(item, index) => {
-                  return (
-                    <tr data-field-index={index()}>
-                      <td>{item.name}</td>
-                      <td>
-                        <Show when={item.verifiedAt}>
-                          <Verified />
-                        </Show>
-                      </td>
-                      <td innerHTML={item.value}></td>
-                    </tr>
-                  );
-                }}
-              </For>
-            </tbody>
-          </table>
-        </div>
-      </div>
-
-      <div class="recent-toots" role="presentation">
-        <div class="toot-list-toolbar">
-          <TootFilterButton
-            options={{
-              pinned: "Pinneds",
-              boost: "Boosts",
-              reply: "Replies",
-              original: "Originals",
-            }}
-            applied={recentTootFilter()}
-            onApply={setRecentTootFilter}
-            disabledKeys={["original"]}
-          ></TootFilterButton>
-        </div>
-
-        <ItemSelectionProvider value={selectionState}>
-          <TimeSourceProvider value={time}>
-            <Show
-              when={recentTootFilter().pinned && pinnedToots.list.length > 0}
-            >
-              <TootList
-                threads={pinnedToots.list}
-                onUnknownThread={pinnedToots.getPath}
-                onChangeToot={pinnedToots.set}
-              />
+                    <ListItemIcon>
+                      <PlaylistAdd />
+                    </ListItemIcon>
+                    <ListItemText>Subscribe...</ListItemText>
+                  </MenuItem>
+                }
+              >
+                <MenuItem disabled>
+                  <ListItemIcon>
+                    <Edit />
+                  </ListItemIcon>
+                  <ListItemText>Edit...</ListItemText>
+                </MenuItem>
+              </Show>
               <Divider />
             </Show>
-            <TootList
-              id={recentTootListId}
-              threads={recentToots.list}
-              onUnknownThread={recentToots.getPath}
-              onChangeToot={recentToots.set}
-            />
-          </TimeSourceProvider>
-        </ItemSelectionProvider>
-
-        <Show when={!recentTootChunk()?.done}>
+            <MenuItem disabled>
+              <ListItemIcon>
+                <Group />
+              </ListItemIcon>
+              <ListItemText>Followers</ListItemText>
+              <ListItemSecondaryAction>
+                <span aria-label="The number of the account follower">
+                  {profile()?.followersCount ?? ""}
+                </span>
+              </ListItemSecondaryAction>
+            </MenuItem>
+            <MenuItem disabled>
+              <ListItemIcon>
+                <Subject />
+              </ListItemIcon>
+              <ListItemText>Following</ListItemText>
+              <ListItemSecondaryAction>
+                <span aria-label="The number the account following">
+                  {profile()?.followingCount ?? ""}
+                </span>
+              </ListItemSecondaryAction>
+            </MenuItem>
+            <MenuItem disabled>
+              <ListItemIcon>
+                <PersonOff />
+              </ListItemIcon>
+              <ListItemText>Blocklist</ListItemText>
+            </MenuItem>
+            <MenuItem disabled>
+              <ListItemIcon>
+                <Send />
+              </ListItemIcon>
+              <ListItemText>Mention in...</ListItemText>
+            </MenuItem>
+            <Divider />
+            <MenuItem
+              component={"a"}
+              href={profile()?.url}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <ListItemIcon>
+                <OpenInBrowser />
+              </ListItemIcon>
+              <ListItemText>Open in browser...</ListItemText>
+            </MenuItem>
+            <MenuItem onClick={() => share({ url: profile()?.url })}>
+              <ListItemIcon>
+                <Share />
+              </ListItemIcon>
+              <ListItemText>Share...</ListItemText>
+            </MenuItem>
+          </Menu>
           <div
             style={{
-              "text-align": "center",
-              "padding-bottom": "var(--safe-area-inset-bottom)",
+              height: `${268 * (Math.min(560, windowSize.width) / 560)}px`,
+            }}
+            class="banner"
+            role="presentation"
+          >
+            <img
+              ref={(e) => obx.observe(e)}
+              src={bannerImg()}
+              crossOrigin="anonymous"
+              alt={`Banner image for ${profile()?.displayName || "the user"}`}
+              onLoad={(event) => {
+                const ins = new FastAverageColor();
+                const colors = ins.getColor(event.currentTarget);
+                setBannerSampledColors({
+                  average: colors.hex,
+                  text: colors.isDark ? "white" : "black",
+                });
+                ins.destroy();
+              }}
+            ></img>
+          </div>
+
+          <Menu {...subscribeMenuState}>
+            <MenuItem
+              onClick={toggleSubscribeHome}
+              aria-label={`${relationship()?.following ? "Unfollow" : "Follow"} on your home timeline`}
+            >
+              <ListItemAvatar>
+                <Avatar
+                  src={(session().account as Account).inf?.avatar}
+                ></Avatar>
+              </ListItemAvatar>
+              <ListItemText
+                secondary={
+                  relationship()?.following
+                    ? undefined
+                    : profile()?.locked
+                      ? "A request will be sent"
+                      : undefined
+                }
+              >
+                <span innerHTML={sessionDisplayName()}></span>
+                <span>'s Home</span>
+              </ListItemText>
+
+              <Checkbox checked={relationship()?.following ?? false} />
+            </MenuItem>
+          </Menu>
+
+          <div
+            class="intro"
+            style={{
+              "background-color": bannerSampledColors()?.average,
+              color: bannerSampledColors()?.text,
             }}
           >
-            <IconButton
-              aria-label="Load More"
-              aria-controls={recentTootListId}
-              size="large"
-              color="primary"
-              onClick={[refetchRecentToots, "prev"]}
-              disabled={isTootListLoading()}
+            <section class="acct-grp">
+              <Avatar
+                src={avatarImg()}
+                alt={`${profile()?.displayName || "the user"}'s avatar`}
+                sx={{
+                  marginTop: "calc(-16px - 72px / 2)",
+                  width: "72px",
+                  height: "72px",
+                }}
+              ></Avatar>
+              <div class="name-grp">
+                <div class="display-name">
+                  <Show when={profile()?.bot}>
+                    <SmartToySharp class="acct-mark" aria-label="Bot" />
+                  </Show>
+                  <Show when={profile()?.locked}>
+                    <Lock class="acct-mark" aria-label="Locked" />
+                  </Show>
+                  <Body2
+                    component="span"
+                    innerHTML={displayName()}
+                    aria-label="Display name"
+                  ></Body2>
+                </div>
+                <span aria-label="Complete username" class="username">
+                  {fullUsername()}
+                </span>
+              </div>
+              <div role="presentation">
+                <Switch>
+                  <Match
+                    when={
+                      !session().account ||
+                      profileUncaught.loading ||
+                      profileUncaught.error
+                    }
+                  >
+                    {<></>}
+                  </Match>
+                  <Match when={isCurrentSessionProfile()}>
+                    <IconButton color="inherit">
+                      <Edit />
+                    </IconButton>
+                  </Match>
+                  <Match when={true}>
+                    <Button
+                      variant="contained"
+                      color="secondary"
+                      onClick={(event) => {
+                        openSubscribeMenu(
+                          event.currentTarget.getBoundingClientRect(),
+                        );
+                      }}
+                    >
+                      {relationship()?.following ? "Subscribed" : "Subscribe"}
+                    </Button>
+                  </Match>
+                </Switch>
+              </div>
+            </section>
+            <section
+              class="description"
+              aria-label={`${profile()?.displayName || "the user"}'s description`}
+              innerHTML={description() || ""}
+            ></section>
+
+            <table
+              class="acct-fields"
+              aria-label={`${profile()?.displayName || "the user"}'s fields`}
             >
-              <Show when={isTootListLoading()} fallback={<ExpandMore />}>
-                <CircularProgress sx={{ width: "24px", height: "24px" }} />
-              </Show>
-            </IconButton>
+              <tbody>
+                <For each={profile()?.fields ?? []}>
+                  {(item, index) => {
+                    return (
+                      <tr data-field-index={index()}>
+                        <td>{item.name}</td>
+                        <td>
+                          <Show when={item.verifiedAt}>
+                            <Verified />
+                          </Show>
+                        </td>
+                        <td innerHTML={item.value}></td>
+                      </tr>
+                    );
+                  }}
+                </For>
+              </tbody>
+            </table>
           </div>
-        </Show>
-      </div>
-    </Scaffold>
+        </div>
+
+        <div class="recent-toots" role="presentation">
+          <div class="toot-list-toolbar">
+            <TootFilterButton
+              options={{
+                pinned: "Pinneds",
+                boost: "Boosts",
+                reply: "Replies",
+                original: "Originals",
+              }}
+              applied={recentTootFilter()}
+              onApply={setRecentTootFilter}
+              disabledKeys={["original"]}
+            ></TootFilterButton>
+          </div>
+
+          <ItemSelectionProvider value={selectionState}>
+            <TimeSourceProvider value={time}>
+              <Show
+                when={recentTootFilter().pinned && pinnedToots.list.length > 0}
+              >
+                <TootList
+                  threads={pinnedToots.list}
+                  onUnknownThread={pinnedToots.getPath}
+                  onChangeToot={pinnedToots.set}
+                />
+                <Divider />
+              </Show>
+              <TootList
+                id={recentTootListId}
+                threads={recentToots.list}
+                onUnknownThread={recentToots.getPath}
+                onChangeToot={recentToots.set}
+              />
+            </TimeSourceProvider>
+          </ItemSelectionProvider>
+
+          <Show when={!recentTootChunk()?.done}>
+            <div
+              style={{
+                "text-align": "center",
+                "padding-bottom": "var(--safe-area-inset-bottom)",
+              }}
+            >
+              <IconButton
+                aria-label="Load More"
+                aria-controls={recentTootListId}
+                size="large"
+                color="primary"
+                onClick={[refetchRecentToots, "prev"]}
+                disabled={isTootListLoading()}
+              >
+                <Show when={isTootListLoading()} fallback={<ExpandMore />}>
+                  <CircularProgress sx={{ width: "24px", height: "24px" }} />
+                </Show>
+              </IconButton>
+            </div>
+          </Show>
+        </div>
+      </Scaffold>
+    </>
   );
 };
 

src/settings/Language.tsx

@@ -25,6 +25,8 @@ import type { Template } from "@solid-primitives/i18n";
 import { useStore } from "@nanostores/solid";
 import { $settings } from "./stores";
 import { useNavigator } from "~platform/StackedRouter";
+import AppTopBar from "~material/AppTopBar";
+import DocumentTitle from "~platform/DocumentTitle";
 
 const ChooseLang: Component = () => {
   const { pop } = useNavigator();
@@ -52,72 +54,70 @@ const ChooseLang: Component = () => {
   };
 
   return (
-    <Scaffold
-      topbar={
-        <AppBar position="static">
-          <Toolbar
-            variant="dense"
-            sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
-          >
+    <>
+      <DocumentTitle>{t("Choose Language")}</DocumentTitle>
+      <Scaffold
+        topbar={
+          <AppTopBar>
             <IconButton color="inherit" onClick={[pop, 1]} disableRipple>
               <ArrowBack />
             </IconButton>
             <Title>{t("Choose Language")}</Title>
-          </Toolbar>
-        </AppBar>
-      }
-    >
-      <List
-        sx={{
-          paddingBottom: "var(--safe-area-inset-bottom, 0)",
-        }}
+          </AppTopBar>
+        }
       >
-        <ListItemButton
-          onClick={() => {
-            onCodeChange(code() ? undefined : matchedLangCode());
+        <List
+          sx={{
+            paddingBottom: "var(--safe-area-inset-bottom, 0)",
           }}
         >
-          <ListItemText>
-            {t("lang.auto", {
-              detected: t(`lang.${matchedLangCode()}`) ?? matchedLangCode(),
-            })}
-          </ListItemText>
-          <ListItemSecondaryAction>
-            <Switch checked={typeof code() === "undefined"} />
-          </ListItemSecondaryAction>
-        </ListItemButton>
-        <List subheader={<ListSubheader>{t("Supported")}</ListSubheader>}>
-          <For each={SUPPORTED_LANGS}>
-            {(c) => (
-              <ListItemButton
-                disabled={typeof code() === "undefined"}
-                onClick={[onCodeChange, c]}
-              >
-                <ListItemText>{t(`lang.${c}`)}</ListItemText>
-                <ListItemSecondaryAction>
-                  <Radio
-                    checked={
-                      code() === c ||
-                      (code() === undefined && matchedLangCode() == c)
-                    }
-                  />
-                </ListItemSecondaryAction>
-              </ListItemButton>
-            )}
-          </For>
-        </List>
+          <ListItemButton
+            onClick={() => {
+              onCodeChange(code() ? undefined : matchedLangCode());
+            }}
+          >
+            <ListItemText>
+              {t("lang.auto", {
+                detected: t(`lang.${matchedLangCode()}`) ?? matchedLangCode(),
+              })}
+            </ListItemText>
+            <ListItemSecondaryAction>
+              <Switch checked={typeof code() === "undefined"} />
+            </ListItemSecondaryAction>
+          </ListItemButton>
+          <List subheader={<ListSubheader>{t("Supported")}</ListSubheader>}>
+            <For each={SUPPORTED_LANGS}>
+              {(c) => (
+                <ListItemButton
+                  disabled={typeof code() === "undefined"}
+                  onClick={[onCodeChange, c]}
+                >
+                  <ListItemText>{t(`lang.${c}`)}</ListItemText>
+                  <ListItemSecondaryAction>
+                    <Radio
+                      checked={
+                        code() === c ||
+                        (code() === undefined && matchedLangCode() == c)
+                      }
+                    />
+                  </ListItemSecondaryAction>
+                </ListItemButton>
+              )}
+            </For>
+          </List>
 
-        <List subheader={<ListSubheader>{t("Unsupported")}</ListSubheader>}>
-          <For each={unsupportedLangCodes()}>
-            {(code) => (
-              <ListItem>
-                <ListItemText>{iso639_1.getNativeName(code)}</ListItemText>
-              </ListItem>
-            )}
-          </For>
+          <List subheader={<ListSubheader>{t("Unsupported")}</ListSubheader>}>
+            <For each={unsupportedLangCodes()}>
+              {(code) => (
+                <ListItem>
+                  <ListItemText>{iso639_1.getNativeName(code)}</ListItemText>
+                </ListItem>
+              )}
+            </For>
+          </List>
         </List>
-      </List>
-    </Scaffold>
+      </Scaffold>
+    </>
   );
 };
 

src/settings/MastodonLogo.tsx

@@ -0,0 +1,35 @@
+import { SvgIcon } from "@suid/material";
+
+export default function () {
+  return (
+    <SvgIcon
+      width="75"
+      height="79"
+      viewBox="0 0 75 79"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M73.8393 17.4898C72.6973 9.00165 65.2994 2.31235 56.5296 1.01614C55.05 0.797115 49.4441 0 36.4582 0H36.3612C23.3717 0 20.585 0.797115 19.1054 1.01614C10.5798 2.27644 2.79399 8.28712 0.904997 16.8758C-0.00358524 21.1056 -0.100549 25.7949 0.0682394 30.0965C0.308852 36.2651 0.355538 42.423 0.91577 48.5665C1.30307 52.6474 1.97872 56.6957 2.93763 60.6812C4.73325 68.042 12.0019 74.1676 19.1233 76.6666C26.7478 79.2728 34.9474 79.7055 42.8039 77.9162C43.6682 77.7151 44.5217 77.4817 45.3645 77.216C47.275 76.6092 49.5123 75.9305 51.1571 74.7385C51.1797 74.7217 51.1982 74.7001 51.2112 74.6753C51.2243 74.6504 51.2316 74.6229 51.2325 74.5948V68.6416C51.2321 68.6154 51.2259 68.5896 51.2142 68.5661C51.2025 68.5426 51.1858 68.522 51.1651 68.5058C51.1444 68.4896 51.1204 68.4783 51.0948 68.4726C51.0692 68.4669 51.0426 68.467 51.0171 68.4729C45.9835 69.675 40.8254 70.2777 35.6502 70.2682C26.7439 70.2682 24.3486 66.042 23.6626 64.2826C23.1113 62.762 22.7612 61.1759 22.6212 59.5646C22.6197 59.5375 22.6247 59.5105 22.6357 59.4857C22.6466 59.4609 22.6633 59.4391 22.6843 59.422C22.7053 59.4048 22.73 59.3929 22.7565 59.3871C22.783 59.3813 22.8104 59.3818 22.8367 59.3886C27.7864 60.5826 32.8604 61.1853 37.9522 61.1839C39.1768 61.1839 40.3978 61.1839 41.6224 61.1516C46.7435 61.008 52.1411 60.7459 57.1796 59.7621C57.3053 59.7369 57.431 59.7154 57.5387 59.6831C65.4861 58.157 73.0493 53.3672 73.8178 41.2381C73.8465 40.7606 73.9184 36.2364 73.9184 35.7409C73.9219 34.0569 74.4606 23.7949 73.8393 17.4898Z"
+        fill="url(#paint0_linear_549_34)"
+      />
+      <path
+        d="M61.2484 27.0263V48.114H52.8916V27.6475C52.8916 23.3388 51.096 21.1413 47.4437 21.1413C43.4287 21.1413 41.4177 23.7409 41.4177 28.8755V40.0782H33.1111V28.8755C33.1111 23.7409 31.0965 21.1413 27.0815 21.1413C23.4507 21.1413 21.6371 23.3388 21.6371 27.6475V48.114H13.2839V27.0263C13.2839 22.7176 14.384 19.2946 16.5843 16.7572C18.8539 14.2258 21.8311 12.926 25.5264 12.926C29.8036 12.926 33.0357 14.5705 35.1905 17.8559L37.2698 21.346L39.3527 17.8559C41.5074 14.5705 44.7395 12.926 49.0095 12.926C52.7013 12.926 55.6784 14.2258 57.9553 16.7572C60.1531 19.2922 61.2508 22.7152 61.2484 27.0263Z"
+        fill="white"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_549_34"
+          x1="37.0692"
+          y1="0"
+          x2="37.0692"
+          y2="79"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#6364FF" />
+          <stop offset="1" stop-color="#563ACC" />
+        </linearGradient>
+      </defs>
+    </SvgIcon>
+  );
+}

src/settings/Motions.tsx

@@ -18,9 +18,11 @@ import { createTranslator } from "~platform/i18n";
 import { useStore } from "@nanostores/solid";
 import { $settings } from "./stores";
 import { useNavigator } from "~platform/StackedRouter";
+import AppTopBar from "~material/AppTopBar";
+import DocumentTitle from "~platform/DocumentTitle";
 
 const Motions: Component = () => {
-  const {pop} = useNavigator();
+  const { pop } = useNavigator();
   const [t] = createTranslator(
     (code) =>
       import(`./i18n/${code}.json`) as Promise<{
@@ -29,60 +31,58 @@ const Motions: Component = () => {
   );
   const settings = useStore($settings);
   return (
-    <Scaffold
-      topbar={
-        <AppBar position="static">
-          <Toolbar
-            variant="dense"
-            sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
-          >
+    <>
+      <DocumentTitle>{t("motions")}</DocumentTitle>
+      <Scaffold
+        topbar={
+          <AppTopBar>
             <IconButton color="inherit" onClick={[pop, 1]} disableRipple>
               <ArrowBack />
             </IconButton>
             <Title>{t("motions")}</Title>
-          </Toolbar>
-        </AppBar>
-      }
-    >
-      <List
-        sx={{
-          paddingBottom: "calc(var(--safe-area-inset-bottom, 0px) + 16px)",
-        }}
+          </AppTopBar>
+        }
       >
-        <li>
-          <ul style={{ "padding-left": 0 }}>
-            <ListSubheader>{t("motions.gifs")}</ListSubheader>
-            <ListItemButton
-              onClick={() =>
-                $settings.setKey("autoPlayGIFs", !settings().autoPlayGIFs)
-              }
-            >
-              <ListItemText>{t("motions.gifs.autoplay")}</ListItemText>
-              <ListItemSecondaryAction>
-                <Switch checked={settings().autoPlayGIFs}></Switch>
-              </ListItemSecondaryAction>
-            </ListItemButton>
-            <Divider />
-          </ul>
-        </li>
-        <li>
-          <ul style={{ "padding-left": 0 }}>
-            <ListSubheader>{t("motions.vids")}</ListSubheader>
-            <ListItemButton
-              onClick={() =>
-                $settings.setKey("autoPlayVideos", !settings().autoPlayVideos)
-              }
-            >
-              <ListItemText>{t("motions.vids.autoplay")}</ListItemText>
-              <ListItemSecondaryAction>
-                <Switch checked={settings().autoPlayVideos}></Switch>
-              </ListItemSecondaryAction>
-            </ListItemButton>
-            <Divider />
-          </ul>
-        </li>
-      </List>
-    </Scaffold>
+        <List
+          sx={{
+            paddingBottom: "calc(var(--safe-area-inset-bottom, 0px) + 16px)",
+          }}
+        >
+          <li>
+            <ul style={{ "padding-left": 0 }}>
+              <ListSubheader>{t("motions.gifs")}</ListSubheader>
+              <ListItemButton
+                onClick={() =>
+                  $settings.setKey("autoPlayGIFs", !settings().autoPlayGIFs)
+                }
+              >
+                <ListItemText>{t("motions.gifs.autoplay")}</ListItemText>
+                <ListItemSecondaryAction>
+                  <Switch checked={settings().autoPlayGIFs}></Switch>
+                </ListItemSecondaryAction>
+              </ListItemButton>
+              <Divider />
+            </ul>
+          </li>
+          <li>
+            <ul style={{ "padding-left": 0 }}>
+              <ListSubheader>{t("motions.vids")}</ListSubheader>
+              <ListItemButton
+                onClick={() =>
+                  $settings.setKey("autoPlayVideos", !settings().autoPlayVideos)
+                }
+              >
+                <ListItemText>{t("motions.vids.autoplay")}</ListItemText>
+                <ListItemSecondaryAction>
+                  <Switch checked={settings().autoPlayVideos}></Switch>
+                </ListItemSecondaryAction>
+              </ListItemButton>
+              <Divider />
+            </ul>
+          </li>
+        </List>
+      </Scaffold>
+    </>
   );
 };
 

src/settings/Region.tsx

@@ -23,9 +23,11 @@ import type { Template } from "@solid-primitives/i18n";
 import { $settings } from "./stores";
 import { useStore } from "@nanostores/solid";
 import { useNavigator } from "~platform/StackedRouter";
+import AppTopBar from "~material/AppTopBar";
+import DocumentTitle from "~platform/DocumentTitle";
 
 const ChooseRegion: Component = () => {
-  const {pop} = useNavigator();
+  const { pop } = useNavigator();
   const [t] = createTranslator(
     () => import("./i18n/generic.json"),
     (code) =>
@@ -47,64 +49,62 @@ const ChooseRegion: Component = () => {
   };
 
   return (
-    <Scaffold
-      topbar={
-        <AppBar position="static">
-          <Toolbar
-            variant="dense"
-            sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
-          >
+    <>
+      <DocumentTitle>{t("Choose Region")}</DocumentTitle>
+      <Scaffold
+        topbar={
+          <AppTopBar>
             <IconButton color="inherit" onClick={[pop, 1]} disableRipple>
               <ArrowBack />
             </IconButton>
             <Title>{t("Choose Region")}</Title>
-          </Toolbar>
-        </AppBar>
-      }
-    >
-      <List
-        sx={{
-          paddingBottom: "var(--safe-area-inset-bottom, 0)",
-        }}
+          </AppTopBar>
+        }
       >
-        <ListItemButton
-          onClick={() => {
-            onCodeChange(region() ? undefined : matchedRegionCode());
+        <List
+          sx={{
+            paddingBottom: "var(--safe-area-inset-bottom, 0)",
           }}
         >
-          <ListItemText>
-            {t("region.auto", {
-              detected:
-                t(`region.${matchedRegionCode()}`) ?? matchedRegionCode(),
-            })}
-          </ListItemText>
-          <ListItemSecondaryAction>
-            <Switch checked={typeof region() === "undefined"} />
-          </ListItemSecondaryAction>
-        </ListItemButton>
+          <ListItemButton
+            onClick={() => {
+              onCodeChange(region() ? undefined : matchedRegionCode());
+            }}
+          >
+            <ListItemText>
+              {t("region.auto", {
+                detected:
+                  t(`region.${matchedRegionCode()}`) ?? matchedRegionCode(),
+              })}
+            </ListItemText>
+            <ListItemSecondaryAction>
+              <Switch checked={typeof region() === "undefined"} />
+            </ListItemSecondaryAction>
+          </ListItemButton>
 
-        <List subheader={<ListSubheader>{t("Supported")}</ListSubheader>}>
-          <For each={SUPPORTED_REGIONS}>
-            {(code) => (
-              <ListItemButton
-                disabled={typeof region() === "undefined"}
-                onClick={[onCodeChange, code]}
-              >
-                <ListItemText>{t(`region.${code}`)}</ListItemText>
-                <ListItemSecondaryAction>
-                  <Radio
-                    checked={
-                      region() === code ||
-                      (region() === undefined && matchedRegionCode() == code)
-                    }
-                  />
-                </ListItemSecondaryAction>
-              </ListItemButton>
-            )}
-          </For>
+          <List subheader={<ListSubheader>{t("Supported")}</ListSubheader>}>
+            <For each={SUPPORTED_REGIONS}>
+              {(code) => (
+                <ListItemButton
+                  disabled={typeof region() === "undefined"}
+                  onClick={[onCodeChange, code]}
+                >
+                  <ListItemText>{t(`region.${code}`)}</ListItemText>
+                  <ListItemSecondaryAction>
+                    <Radio
+                      checked={
+                        region() === code ||
+                        (region() === undefined && matchedRegionCode() == code)
+                      }
+                    />
+                  </ListItemSecondaryAction>
+                </ListItemButton>
+              )}
+            </For>
+          </List>
         </List>
-      </List>
-    </Scaffold>
+      </Scaffold>
+    </>
   );
 };
 

src/settings/Settings.tsx

@@ -1,7 +1,6 @@
 import { For, Show, type Component } from "solid-js";
 import Scaffold from "~material/Scaffold.js";
 import {
-  AppBar,
   Divider,
   IconButton,
   List,
@@ -13,11 +12,11 @@ import {
   ListSubheader,
   NativeSelect,
   Switch,
-  Toolbar,
 } from "@suid/material";
 import {
   Animation as AnimationIcon,
   Close as CloseIcon,
+  DeleteForever,
   Logout,
   Public as PublicIcon,
   Refresh as RefreshIcon,
@@ -38,8 +37,11 @@ import {
 } from "~platform/i18n.jsx";
 import { type Template } from "@solid-primitives/i18n";
 import { useServiceWorker } from "~platform/host.js";
-import { useSessions } from "../masto/clients.js";
+import { makeAcctText, useSessions } from "../masto/clients.js";
 import { useNavigator } from "~platform/StackedRouter.jsx";
+import AppTopBar from "~material/AppTopBar.jsx";
+import MastodonLogo from "./MastodonLogo.jsx";
+import DocumentTitle from "~platform/DocumentTitle.jsx";
 
 type Inset = {
   top?: number;
@@ -141,11 +143,16 @@ function setupSafeAreaEmulation(name: string) {
   }
 }
 
+const $$SAFE_AREA_EMU = "$$SAFE_AREA_EMU";
+
 if (import.meta.hot) {
-  import.meta.hot.accept((mod) => {
-    if (!mod) return;
+  import.meta.hot.on("vite:beforeUpdate", () => {
+    import.meta.hot!.data[$$SAFE_AREA_EMU] = screenOrientationCallback;
+  });
+
+  import.meta.hot.on("vite:afterUpdate", () => {
+    screenOrientationCallback = import.meta.hot?.data?.[$$SAFE_AREA_EMU];
     if (screenOrientationCallback) {
-      mod["screenOrientationCallback"] = screenOrientationCallback;
       setTimeout(screenOrientationCallback, 0);
     }
   });
@@ -163,7 +170,7 @@ const Settings: Component = () => {
       }>,
     () => import(`./i18n/generic.json`),
   );
-  const { pop } = useNavigator();
+  const { pop, push } = useNavigator();
   const settings$ = useStore($settings);
   const { needRefresh } = useServiceWorker();
   const dateFnLocale = useDateFnLocale();
@@ -172,6 +179,10 @@ const Settings: Component = () => {
 
   const doSignOut = (acct: Account) => {
     signOut((a) => a.site === acct.site && a.accessToken === acct.accessToken);
+
+    if (profiles().length == 0) {
+      push("/accounts/sign-in", { replace: "all" });
+    }
   };
 
   css`
@@ -187,209 +198,228 @@ const Settings: Component = () => {
     }
   `;
   return (
-    <Scaffold
-      topbar={
-        <AppBar position="static">
-          <Toolbar
-            variant="dense"
-            sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
-          >
+    <>
+      <DocumentTitle>{t("Settings")}</DocumentTitle>
+      <Scaffold
+        topbar={
+          <AppTopBar>
             <IconButton color="inherit" onClick={[pop, 1]} disableRipple>
               <CloseIcon />
             </IconButton>
             <Title>{t("Settings")}</Title>
-          </Toolbar>
-        </AppBar>
-      }
-    >
-      <List class="setting-list" use:solid-styled>
-        <li>
-          <ul>
-            <ListSubheader>{t("Accounts")}</ListSubheader>
-            <ListItemButton disabled>
-              <ListItemText>{t("All Notifications")}</ListItemText>
-              <ListItemSecondaryAction>
-                <Switch value={false} disabled />
-              </ListItemSecondaryAction>
-            </ListItemButton>
-            <Divider />
-            <ListItemButton disabled>
-              <ListItemText>{t("Sign in...")}</ListItemText>
-            </ListItemButton>
-            <Divider />
-          </ul>
-          <For each={profiles()}>
-            {({ account: acct }) => (
-              <ul data-site={acct.site} data-username={acct.inf?.username}>
-                <ListSubheader>{`@${acct.inf?.username ?? "..."}@${new URL(acct.site).host}`}</ListSubheader>
-                <ListItemButton disabled>
-                  <ListItemText>{t("Notifications")}</ListItemText>
-                  <ListItemSecondaryAction>
-                    <Switch value={false} disabled />
-                  </ListItemSecondaryAction>
-                </ListItemButton>
-                <Divider />
-                <ListItemButton onClick={[doSignOut, acct]}>
-                  <ListItemIcon>
-                    <Logout />
-                  </ListItemIcon>
-                  <ListItemText>{t("Sign out")}</ListItemText>
-                </ListItemButton>
-                <Divider />
-              </ul>
-            )}
-          </For>
-        </li>
-        <li>
-          <ListSubheader>{t("timelines")}</ListSubheader>
-          <ListItemButton
-            onClick={(e) =>
-              $settings.setKey(
-                "prefetchTootsDisabled",
-                !settings$().prefetchTootsDisabled,
-              )
-            }
-          >
-            <ListItemText secondary={t("Prefetch Toots.2nd")}>
-              {t("Prefetch Toots")}
-            </ListItemText>
-            <ListItemSecondaryAction>
-              <Switch checked={!settings$().prefetchTootsDisabled} />
-            </ListItemSecondaryAction>
-          </ListItemButton>
-          <Divider />
-          <ListItemButton component={A} href="./motions">
-            <ListItemIcon>
-              <AnimationIcon></AnimationIcon>
-            </ListItemIcon>
-            <ListItemText>{t("motions")}</ListItemText>
-          </ListItemButton>
-          <Divider />
-        </li>
-        <li>
-          <ListSubheader>{t("This Application")}</ListSubheader>
-          <ListItemButton component={A} href="./language">
-            <ListItemIcon>
-              <TranslateIcon />
-            </ListItemIcon>
-            <ListItemText
-              secondary={
-                settings$().language === undefined
-                  ? t("lang.auto", {
-                      detected:
-                        t("lang." + autoMatchLangTag()) ?? autoMatchLangTag(),
-                    })
-                  : t("lang." + settings$().language)
-              }
-            >
-              {t("Language")}
-            </ListItemText>
-          </ListItemButton>
-          <Divider />
-          <ListItemButton component={A} href="./region">
-            <ListItemIcon>
-              <PublicIcon />
-            </ListItemIcon>
-            <ListItemText
-              secondary={
-                settings$().region === undefined
-                  ? t("region.auto", {
-                      detected:
-                        t("region." + autoMatchRegion()) ?? autoMatchRegion(),
-                    })
-                  : t("region." + settings$().region)
-              }
-            >
-              {t("Region")}
-            </ListItemText>
-          </ListItemButton>
-          <Divider />
-          <ListItem>
-            <ListItemText secondary={t("About Tutu.2nd")}>
-              {t("About Tutu")}
-            </ListItemText>
-          </ListItem>
-          <Divider />
-          <ListItem>
-            <ListItemText
-              secondary={t("version", {
-                packageVersion: import.meta.env.PACKAGE_VERSION,
-                builtAt: format(
-                  import.meta.env.BUILT_AT,
-                  t("datefmt") || "yyyy/MM/dd",
-                  { locale: dateFnLocale() },
-                ),
-                buildMode: import.meta.env.MODE,
-              })}
-            >
-              {needRefresh() ? t("updates.ready") : t("updates.no")}
-            </ListItemText>
-            <Show when={needRefresh()}>
-              <ListItemSecondaryAction>
-                <IconButton
-                  aria-label="Restart Now"
-                  onClick={() => window.location.reload()}
-                >
-                  <RefreshIcon />
-                </IconButton>
-              </ListItemSecondaryAction>
-            </Show>
-          </ListItem>
-          <Divider />
-          {import.meta.env.VITE_CODE_VERSION ? (
-            <>
-              <ListItem>
-                <ListItemText secondary={import.meta.env.VITE_CODE_VERSION}>
-                  {t("version.code")}
-                </ListItemText>
-              </ListItem>
-              <Divider />
-            </>
-          ) : (
-            <></>
-          )}
-        </li>
-        {import.meta.env.DEV ? (
+          </AppTopBar>
+        }
+      >
+        <List class="setting-list" use:solid-styled>
           <li>
-            <ListSubheader>Developer Tools</ListSubheader>
-            <ListItem
-              secondaryAction={
-                window.screen?.orientation ? (
-                  <NativeSelect
-                    sx={{ maxWidth: "40vw" }}
-                    onChange={(event) => {
-                      const k = event.currentTarget.value;
-                      setupSafeAreaEmulation(k);
-                    }}
-                  >
-                    <option>Don't change</option>
-                    <option value={"ua"}>User agent</option>
-                    <option value={"iphone15"}>
-                      iPhone 15 and Plus, Pro, Pro Max
-                    </option>
-                    <option value={"iphone12"}>iPhone 12, 13 and 14</option>
-                    <option value={"iphone13mini"}>iPhone 13 mini</option>
-                  </NativeSelect>
-                ) : undefined
+            <ul>
+              <ListSubheader>{t("Accounts")}</ListSubheader>
+              <ListItemButton disabled>
+                <ListItemText>{t("All Notifications")}</ListItemText>
+                <ListItemSecondaryAction>
+                  <Switch value={false} disabled />
+                </ListItemSecondaryAction>
+              </ListItemButton>
+              <Divider />
+              <ListItemButton disabled>
+                <ListItemText>{t("Sign in...")}</ListItemText>
+              </ListItemButton>
+              <Divider />
+            </ul>
+            <For each={profiles()}>
+              {({ account: acct }) => (
+                <ul data-site={acct.site} data-username={acct.inf?.username}>
+                  <ListSubheader>{`@${acct.inf?.username ?? "..."}@${new URL(acct.site).host}`}</ListSubheader>
+                  <ListItemButton disabled>
+                    <ListItemText>{t("Notifications")}</ListItemText>
+                    <ListItemSecondaryAction>
+                      <Switch value={false} disabled />
+                    </ListItemSecondaryAction>
+                  </ListItemButton>
+                  <Divider />
+                  <ListItemButton onClick={[doSignOut, acct]}>
+                    <ListItemIcon>
+                      <Logout />
+                    </ListItemIcon>
+                    <ListItemText>{t("Sign out")}</ListItemText>
+                  </ListItemButton>
+                  <Divider />
+                </ul>
+              )}
+            </For>
+          </li>
+          <li>
+            <ListSubheader>{t("timelines")}</ListSubheader>
+            <ListItemButton
+              onClick={(e) =>
+                $settings.setKey(
+                  "prefetchTootsDisabled",
+                  !settings$().prefetchTootsDisabled,
+                )
               }
             >
+              <ListItemText secondary={t("Prefetch Toots.2nd")}>
+                {t("Prefetch Toots")}
+              </ListItemText>
+              <ListItemSecondaryAction>
+                <Switch checked={!settings$().prefetchTootsDisabled} />
+              </ListItemSecondaryAction>
+            </ListItemButton>
+            <Divider />
+            <ListItemButton component={A} href="./motions">
+              <ListItemIcon>
+                <AnimationIcon></AnimationIcon>
+              </ListItemIcon>
+              <ListItemText>{t("motions")}</ListItemText>
+            </ListItemButton>
+            <Divider />
+          </li>
+          <li>
+            <ListSubheader>{t("storage")}</ListSubheader>
+            <ListItemButton disabled>
+              <ListItemIcon>
+                <DeleteForever />
+              </ListItemIcon>
+              <ListItemText secondary={t("storage.cache.UA-managed")}>
+                {t("storage.cache.clear")}
+              </ListItemText>
+            </ListItemButton>
+          </li>
+          <li>
+            <ListSubheader>{t("This Application")}</ListSubheader>
+            <ListItemButton component={A} href="./language">
+              <ListItemIcon>
+                <TranslateIcon />
+              </ListItemIcon>
               <ListItemText
                 secondary={
-                  window.screen?.orientation
-                    ? undefined
-                    : "Unsupported on This Platform"
+                  settings$().language === undefined
+                    ? t("lang.auto", {
+                        detected:
+                          t("lang." + autoMatchLangTag()) ?? autoMatchLangTag(),
+                      })
+                    : t("lang." + settings$().language)
                 }
               >
-                Safe Area Insets
+                {t("Language")}
+              </ListItemText>
+            </ListItemButton>
+            <Divider />
+            <ListItemButton component={A} href="./region">
+              <ListItemIcon>
+                <PublicIcon />
+              </ListItemIcon>
+              <ListItemText
+                secondary={
+                  settings$().region === undefined
+                    ? t("region.auto", {
+                        detected:
+                          t("region." + autoMatchRegion()) ?? autoMatchRegion(),
+                      })
+                    : t("region." + settings$().region)
+                }
+              >
+                {t("Region")}
+              </ListItemText>
+            </ListItemButton>
+            <Divider />
+            <ListItem
+              secondaryAction={
+                <IconButton
+                  component={A}
+                  aria-label={t("mastodonlink.open")}
+                  href={`/${encodeURIComponent(profiles().length > 0 ? makeAcctText(profiles()[0]) : "@")}/profile/@tutu@indieweb.social`}
+                >
+                  <MastodonLogo />
+                </IconButton>
+              }
+            >
+              <ListItemText secondary={t("About Tutu.2nd")}>
+                {t("About Tutu")}
               </ListItemText>
             </ListItem>
             <Divider />
+            <ListItem>
+              <ListItemText
+                secondary={t("version", {
+                  packageVersion: import.meta.env.PACKAGE_VERSION,
+                  builtAt: format(
+                    import.meta.env.BUILT_AT,
+                    t("datefmt") || "yyyy/MM/dd",
+                    { locale: dateFnLocale() },
+                  ),
+                  buildMode: import.meta.env.MODE,
+                })}
+              >
+                {needRefresh() ? t("updates.ready") : t("updates.no")}
+              </ListItemText>
+              <Show when={needRefresh()}>
+                <ListItemSecondaryAction>
+                  <IconButton
+                    aria-label="Restart Now"
+                    onClick={() => window.location.reload()}
+                  >
+                    <RefreshIcon />
+                  </IconButton>
+                </ListItemSecondaryAction>
+              </Show>
+            </ListItem>
+            <Divider />
+            {import.meta.env.VITE_CODE_VERSION ? (
+              <>
+                <ListItem>
+                  <ListItemText secondary={import.meta.env.VITE_CODE_VERSION}>
+                    {t("version.code")}
+                  </ListItemText>
+                </ListItem>
+                <Divider />
+              </>
+            ) : (
+              <></>
+            )}
           </li>
-        ) : (
-          <></>
-        )}
-      </List>
-    </Scaffold>
+          {import.meta.env.DEV ? (
+            <li>
+              <ListSubheader>Developer Tools</ListSubheader>
+              <ListItem
+                secondaryAction={
+                  window.screen?.orientation ? (
+                    <NativeSelect
+                      sx={{ maxWidth: "40vw" }}
+                      onChange={(event) => {
+                        const k = event.currentTarget.value;
+                        setupSafeAreaEmulation(k);
+                      }}
+                    >
+                      <option>Don't change</option>
+                      <option value={"ua"}>User agent</option>
+                      <option value={"iphone15"}>
+                        iPhone 15 and Plus, Pro, Pro Max
+                      </option>
+                      <option value={"iphone12"}>iPhone 12, 13 and 14</option>
+                      <option value={"iphone13mini"}>iPhone 13 mini</option>
+                    </NativeSelect>
+                  ) : undefined
+                }
+              >
+                <ListItemText
+                  secondary={
+                    window.screen?.orientation
+                      ? undefined
+                      : "Unsupported on This Platform"
+                  }
+                >
+                  Safe Area Insets
+                </ListItemText>
+              </ListItem>
+              <Divider />
+            </li>
+          ) : (
+            <></>
+          )}
+        </List>
+      </Scaffold>
+    </>
   );
 };
 

src/settings/i18n/en.json

@@ -33,5 +33,11 @@
   "motions.gifs": "GIFs",
   "motions.gifs.autoplay": "Auto-play GIFs",
   "motions.vids": "Videos",
-  "motions.vids.autoplay": "Auto-play Videos"
+  "motions.vids.autoplay": "Auto-play Videos",
+
+  "storage": "Storage",
+  "storage.cache.clear": "Clear Cache",
+  "storage.cache.UA-managed": "Cache is managed by your browser.",
+
+  "mastodonlink.open": "Open Tutu's Mastodon"
 }

src/settings/i18n/zh-Hans.json

@@ -33,5 +33,11 @@
   "motions.gifs": "动图",
   "motions.gifs.autoplay": "自动播放动图",
   "motions.vids": "视频",
-  "motions.vids.autoplay": "自动播放视频"
+  "motions.vids.autoplay": "自动播放视频",
+
+  "storage": "存储空间",
+  "storage.cache.clear": "清除缓存",
+  "storage.cache.UA-managed": "缓存由你的浏览器管理。",
+
+  "mastodonlink.open": "打开图图的Mastodon账户"
 }

src/timelines/Home.tsx

@@ -1,26 +1,22 @@
 import {
   createSignal,
   Show,
-  onMount,
   type ParentComponent,
-  createRenderEffect,
+  createEffect,
+  useTransition,
 } from "solid-js";
-import { useDocumentTitle } from "../utils";
 import Scaffold from "~material/Scaffold";
 import {
-  AppBar,
   ListItemSecondaryAction,
   ListItemText,
   MenuItem,
   Switch,
-  Toolbar,
 } from "@suid/material";
 import { css } from "solid-styled";
 import { TimeSourceProvider, createTimeSource } from "~platform/timesrc";
 import ProfileMenuButton from "./ProfileMenuButton";
 import Tabs from "~material/Tabs";
 import Tab from "~material/Tab";
-import { makeEventListener } from "@solid-primitives/event-listener";
 import { $settings } from "../settings/stores";
 import { useStore } from "@nanostores/solid";
 import TrendTimelinePanel from "./TrendTimelinePanel";
@@ -30,10 +26,21 @@ import {
   createSingluarItemSelection,
   default as ItemSelectionProvider,
 } from "./toots/ItemSelectionProvider";
+import AppTopBar from "~material/AppTopBar";
+import { createTranslator } from "~platform/i18n";
+import { useWindowSize } from "@solid-primitives/resize-observer";
+import DocumentTitle from "~platform/DocumentTitle";
+
+type StringRes = Record<
+  "tabs.home" | "tabs.trending" | "tabs.public" | "set.prefetch-toots",
+  string
+>;
 
 const Home: ParentComponent = (props) => {
   let panelList: HTMLDivElement;
-  useDocumentTitle("Timelines");
+  const [t, [stringRes]] = createTranslator(
+    (code) => import(`./i18n/${code}.json`) as Promise<{ default: StringRes }>,
+  );
   const now = createTimeSource();
   const [, selectionState] = createSingluarItemSelection(
     undefined as string | undefined,
@@ -58,6 +65,7 @@ const Home: ParentComponent = (props) => {
   const recalculateTabIndicator = () => {
     scrollEventLockReleased = false;
     try {
+      if (!panelList!) return;
       const { x: panelX, width: panelWidth } =
         panelList.getBoundingClientRect();
       let minIdx = +Infinity,
@@ -95,12 +103,17 @@ const Home: ParentComponent = (props) => {
     }
   };
 
-  createRenderEffect(() => {
-    makeEventListener(window, "resize", requestRecalculateTabIndicator);
+  const windowSize = useWindowSize();
+  createEffect((last) => {
+    const { width } = windowSize;
+    if (last !== width) {
+      requestRecalculateTabIndicator();
+    }
+    return width;
   });
 
-  onMount(() => {
-    requestAnimationFrame(recalculateTabIndicator);
+  createEffect(() => {
+    requestRecalculateTabIndicator();
   });
 
   const isTabFocus = (idx: number) => {
@@ -110,7 +123,7 @@ const Home: ParentComponent = (props) => {
   };
 
   const onTabClick = (idx: number) => {
-    const items = panelList.querySelectorAll(".tab-panel");
+    const items = panelList!.querySelectorAll(".tab-panel");
     if (items.length > idx) {
       items.item(idx).scrollIntoView({ block: "start", behavior: "smooth" });
     }
@@ -163,42 +176,37 @@ const Home: ParentComponent = (props) => {
 
   return (
     <>
+      <DocumentTitle>Timelines</DocumentTitle>
       <Scaffold
         topbar={
-          <AppBar position="static">
-            <Toolbar
-              variant="dense"
-              class="responsive"
-              sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
-            >
-              <Tabs>
-                <Tab focus={isTabFocus(0)} onClick={[onTabClick, 0]}>
-                  Home
-                </Tab>
-                <Tab focus={isTabFocus(1)} onClick={[onTabClick, 1]}>
-                  Trending
-                </Tab>
-                <Tab focus={isTabFocus(2)} onClick={[onTabClick, 2]}>
-                  Public
-                </Tab>
-              </Tabs>
-              <ProfileMenuButton profile={profiles()[0]}>
-                <MenuItem
-                  onClick={(e) =>
-                    $settings.setKey(
-                      "prefetchTootsDisabled",
-                      !$settings.get().prefetchTootsDisabled,
-                    )
-                  }
-                >
-                  <ListItemText>Prefetch Toots</ListItemText>
-                  <ListItemSecondaryAction>
-                    <Switch checked={prefetching()}></Switch>
-                  </ListItemSecondaryAction>
-                </MenuItem>
-              </ProfileMenuButton>
-            </Toolbar>
-          </AppBar>
+          <AppTopBar>
+            <Tabs>
+              <Tab focus={isTabFocus(0)} onClick={[onTabClick, 0]}>
+                {t("tabs.home")}
+              </Tab>
+              <Tab focus={isTabFocus(1)} onClick={[onTabClick, 1]}>
+                {t("tabs.trending")}
+              </Tab>
+              <Tab focus={isTabFocus(2)} onClick={[onTabClick, 2]}>
+                {t("tabs.public")}
+              </Tab>
+            </Tabs>
+            <ProfileMenuButton profile={profiles()[0]}>
+              <MenuItem
+                onClick={(e) =>
+                  $settings.setKey(
+                    "prefetchTootsDisabled",
+                    !$settings.get().prefetchTootsDisabled,
+                  )
+                }
+              >
+                <ListItemText>{t("set.prefetch-toots")}</ListItemText>
+                <ListItemSecondaryAction>
+                  <Switch checked={prefetching()}></Switch>
+                </ListItemSecondaryAction>
+              </MenuItem>
+            </ProfileMenuButton>
+          </AppTopBar>
         }
       >
         <ItemSelectionProvider value={selectionState}>

src/timelines/MediaViewer.tsx

@@ -38,7 +38,7 @@ function clamp(input: number, min: number, max: number) {
 }
 
 const MediaViewer: ParentComponent<MediaViewerProps> = (props) => {
-  let rootRef: HTMLDialogElement;
+  let rootRef!: HTMLDialogElement;
 
   type State = {
     ref?: HTMLElement;

src/timelines/ProfileMenuButton.tsx

@@ -16,6 +16,12 @@ import {
 } from "@suid/icons-material";
 import A from "~platform/A";
 import Menu, { createManagedMenuState } from "~material/Menu";
+import { createTranslator } from "~platform/i18n";
+
+type StringRes = Record<
+  "nav.bookmarks" | "nav.likes" | "nav.lists" | "nav.settings",
+  string
+>;
 
 const ProfileMenuButton: ParentComponent<{
   profile?: {
@@ -32,6 +38,10 @@ const ProfileMenuButton: ParentComponent<{
 }> = (props) => {
   const menuId = createUniqueId();
   const buttonId = createUniqueId();
+  const [t] = createTranslator(
+    async (code) =>
+      (await import(`./i18n/${code}.json`)) as { default: StringRes },
+  );
 
   const [open, state] = createManagedMenuState();
 
@@ -84,19 +94,19 @@ const ProfileMenuButton: ParentComponent<{
           <ListItemIcon>
             <BookmarkIcon />
           </ListItemIcon>
-          <ListItemText>Bookmarks</ListItemText>
+          <ListItemText>{t("nav.bookmarks")}</ListItemText>
         </MenuItem>
         <MenuItem disabled>
           <ListItemIcon>
             <LikeIcon />
           </ListItemIcon>
-          <ListItemText>Likes</ListItemText>
+          <ListItemText>{t("nav.likes")}</ListItemText>
         </MenuItem>
         <MenuItem disabled>
           <ListItemIcon>
             <ListIcon />
           </ListItemIcon>
-          <ListItemText>Lists</ListItemText>
+          <ListItemText>{t("nav.lists")}</ListItemText>
         </MenuItem>
         <Divider />
         <Show when={props.children}>
@@ -107,7 +117,7 @@ const ProfileMenuButton: ParentComponent<{
           <ListItemIcon>
             <SettingsIcon />
           </ListItemIcon>
-          <ListItemText>Settings</ListItemText>
+          <ListItemText>{t("nav.settings")}</ListItemText>
         </MenuItem>
       </Menu>
     </>

src/timelines/PullDownToRefresh.tsx

@@ -17,7 +17,7 @@ const PullDownToRefresh: Component<{
   linkedElement?: HTMLElement;
   onRefresh?: () => void;
 }> = (props) => {
-  let rootElement: HTMLDivElement;
+  let rootElement!: HTMLDivElement;
   const [pullDown, setPullDown] = createSignal(0);
 
   const stopPos = () => 160;

src/timelines/RegularToot.css

@@ -9,8 +9,6 @@
 
 
   transition:
-    margin-top 60ms var(--tutu-anim-curve-sharp),
-    margin-bottom 60ms var(--tutu-anim-curve-sharp),
     height 60ms var(--tutu-anim-curve-sharp),
     var(--tutu-transition-shadow);
   border-radius: 0;
@@ -36,7 +34,7 @@
   }
 
   &.expanded {
-    margin-block: 20px;
+    z-index: calc(var(--tutu-zidx-nav) - 2);
     box-shadow: var(--tutu-shadow-e9);
   }
 

src/timelines/RegularToot.tsx

@@ -13,7 +13,6 @@ import { Body2 } from "~material/typography.js";
 import { useTimeSource } from "~platform/timesrc.js";
 import { resolveCustomEmoji } from "../masto/toot.js";
 import { Divider } from "@suid/material";
-import cardStyle from "~material/cards.module.css";
 import MediaAttachmentGrid from "./toots/MediaAttachmentGrid.jsx";
 import { makeAcctText, useDefaultSession } from "../masto/clients";
 import TootContent from "./toots/TootContent";
@@ -23,6 +22,9 @@ import TootPoll from "./toots/TootPoll";
 import TootActionGroup from "./toots/TootActionGroup.js";
 import TootAuthorGroup from "./toots/TootAuthorGroup.js";
 import "./RegularToot.css";
+import { vibrate } from "~platform/hardware.js";
+import { Transition } from "solid-transition-group";
+import "~material/cards.css";
 
 export type TootEnv = {
   boost: (value: mastodon.v1.Status) => void;
@@ -52,6 +54,112 @@ export function useTootEnv() {
   return env;
 }
 
+/**
+ * Create default toot env.
+ *
+ * This function does not provides the "reply" action.
+ */
+export function createDefaultTootEnv(
+  client: () => mastodon.rest.Client | undefined,
+  setToot: (id: string, status: mastodon.v1.Status) => void,
+): TootEnv {
+  return {
+    async bookmark(status: mastodon.v1.Status) {
+      const c = client();
+      if (!c) return;
+
+      const result = await (status.bookmarked
+        ? c.v1.statuses.$select(status.id).unbookmark()
+        : c.v1.statuses.$select(status.id).bookmark());
+
+      setToot(result.id, result);
+    },
+
+    async boost(status: mastodon.v1.Status) {
+      const c = client();
+      if (!c) return;
+
+      vibrate(50);
+      const rootStatus = status.reblog ? status.reblog : status;
+      const reblogged = rootStatus.reblogged;
+      if (status.reblog) {
+        setToot(status.id, {
+          ...status,
+          reblog: { ...status.reblog!, reblogged: !reblogged },
+          reblogged: !reblogged,
+        });
+      } else {
+        setToot(status.id, {
+          ...status,
+          reblogged: !reblogged,
+        });
+      }
+      // modified the original
+
+      try {
+        const result = reblogged
+          ? await c.v1.statuses.$select(status.id).unreblog()
+          : await c.v1.statuses.$select(status.id).reblog();
+
+        if (status.reblog && !reblogged) {
+          // When calling /reblog, the result is the boost object (the actor
+          // is the calling account); for /unreblog, the result is the original
+          // toot. So we only do this trick only on the rebloggings.
+          setToot(status.id, {
+            ...status,
+            reblog: result.reblog,
+          });
+        } else {
+          setToot(status.id, reblogged ? result : result.reblog!);
+        }
+      } catch (reason) {
+        setToot(status.id, status);
+        throw reason;
+      }
+    },
+
+    async favourite(status: mastodon.v1.Status) {
+      const c = client();
+      if (!c) return;
+
+      const ovalue = status.favourited;
+      setToot(status.id, { ...status, favourited: !ovalue });
+
+      const result = ovalue
+        ? await c.v1.statuses.$select(status.id).unfavourite()
+        : await c.v1.statuses.$select(status.id).favourite();
+      setToot(status.id, result);
+    },
+
+    async vote(status: mastodon.v1.Status, votes: readonly number[]) {
+      const c = client();
+      if (!c) return;
+
+      const toot = status.reblog ?? status;
+      if (!toot.poll) return;
+
+      const npoll = await c.v1.polls.$select(toot.poll.id).votes.create({
+        choices: votes,
+      });
+
+      if (status.reblog) {
+        setToot(status.id, {
+          ...status,
+          reblog: {
+            ...status.reblog,
+            poll: npoll,
+          },
+        });
+      } else {
+        setToot(status.id, {
+          ...status,
+          poll: npoll,
+        });
+      }
+    },
+  };
+}
+
 type RegularTootProps = {
   status: mastodon.v1.Status;
   actionable?: boolean;
@@ -143,6 +251,7 @@ const RegularToot: Component<RegularTootProps> = (oprops) => {
       <article
         classList={{
           RegularToot: true,
+          "card": true,
           expanded: props.evaluated,
           "thread-top": props.thread === "top",
           "thread-mid": props.thread === "middle",
@@ -154,7 +263,7 @@ const RegularToot: Component<RegularTootProps> = (oprops) => {
         {...rest}
       >
         <Show when={!!status().reblog}>
-          <div class="retoot-grp">
+          <div class="retoot-grp card-gut card-pad">
             <BoostIcon />
             <Body2
               innerHTML={resolveCustomEmoji(
@@ -176,7 +285,6 @@ const RegularToot: Component<RegularTootProps> = (oprops) => {
           source={toot().content}
           emojis={toot().emojis}
           mentions={toot().mentions}
-          class={cardStyle.cardNoPad}
           sensitive={toot().sensitive}
           spoilerText={toot().spoilerText}
           reveal={reveal()}
@@ -198,13 +306,21 @@ const RegularToot: Component<RegularTootProps> = (oprops) => {
         <Show when={toot().poll}>
           <TootPoll value={toot().poll!} status={toot()} />
         </Show>
-        <Show when={props.actionable}>
+        {props.actionable && (
           <Divider
-            class={cardStyle.cardNoPad}
             style={{ "margin-top": "8px" }}
           />
-          <TootActionGroup value={toot()} class={cardStyle.cardGutSkip} />
-        </Show>
+        )}
+        <Transition
+          onExit={(el, done) => {
+            (el as HTMLElement).addEventListener("animationend", done);
+            el.classList.add("Transition-exit");
+          }}
+        >
+          <Show when={props.actionable}>
+            <TootActionGroup value={status()} />
+          </Show>
+        </Transition>
       </article>
     </>
   );

src/timelines/TootBottomSheet.tsx

@@ -1,29 +1,18 @@
-import { useLocation, useParams } from "@solidjs/router";
-import {
-  catchError,
-  createEffect,
-  createRenderEffect,
-  createResource,
-  Show,
-  type Component,
-} from "solid-js";
+import { useParams } from "@solidjs/router";
+import { catchError, createResource, Show, type Component } from "solid-js";
 import Scaffold from "~material/Scaffold";
-import { AppBar, CircularProgress, IconButton, Toolbar } from "@suid/material";
+import { CircularProgress } from "@suid/material";
 import { Title } from "~material/typography";
-import { Close as CloseIcon } from "@suid/icons-material";
 import { useSessionForAcctStr } from "../masto/clients";
 import { resolveCustomEmoji } from "../masto/toot";
 import RegularToot, {
+  createDefaultTootEnv,
   findElementActionable,
   TootEnvProvider,
 } from "./RegularToot";
-import type { mastodon } from "masto";
-import cards from "~material/cards.module.css";
 import { css } from "solid-styled";
-import { vibrate } from "~platform/hardware";
 import { createTimeSource, TimeSourceProvider } from "~platform/timesrc";
 import TootComposer from "./TootComposer";
-import { useDocumentTitle } from "../utils";
 import { createTimelineControlsForArray } from "../masto/timelines";
 import TootList from "./TootList";
 import "./TootBottomSheet.css";
@@ -33,18 +22,9 @@ import ItemSelectionProvider, {
   createSingluarItemSelection,
 } from "./toots/ItemSelectionProvider";
 import AppTopBar from "~material/AppTopBar";
-
-let cachedEntry: [string, mastodon.v1.Status] | undefined;
-
-export function setCache(acct: string, status: mastodon.v1.Status) {
-  cachedEntry = [acct, status];
-}
-
-function getCache(acct: string, id: string) {
-  if (acct === cachedEntry?.[0] && id === cachedEntry?.[1].id) {
-    return cachedEntry[1];
-  }
-}
+import { fetchStatus } from "../masto/statuses";
+import { type Account } from "../accounts/stores";
+import DocumentTitle from "~platform/DocumentTitle";
 
 const TootBottomSheet: Component = (props) => {
   const params = useParams<{ acct: string; id: string }>();
@@ -54,29 +34,19 @@ const TootBottomSheet: Component = (props) => {
   const session = useSessionForAcctStr(acctText);
   const [, selectionState] = createSingluarItemSelection();
 
-  const [remoteToot, { mutate: setRemoteToot }] = createResource(
-    () => [session().client, params.id] as const,
-    async ([client, id]) => {
-      return await client.v1.statuses.$select(id).fetch();
-    },
-  );
+  const [remoteToot, { mutate: setRemoteToot }] =
+    fetchStatus.cachedAndRevalidate(
+      () => [session().account, params.id] as const,
+    );
 
   const toot = () =>
     catchError(remoteToot, (error) => {
       console.error(error);
-    }) ?? getCache(acctText(), params.id);
-
-  createEffect((lastTootId?: string) => {
-    const tootId = toot()?.id;
-    if (!tootId || lastTootId === tootId) return tootId;
-    const elementId = `toot-${tootId}`;
-    document.getElementById(elementId)?.scrollIntoView({ behavior: "smooth" });
-    return tootId;
-  });
+    });
 
   const [tootContextErrorUncaught, { refetch: refetchContext }] =
     createResource(
-      () => [session().client, params.id] as const,
+      () => [session().client, toot()?.reblog?.id ?? params.id] as const,
       async ([client, id]) => {
         return await client.v1.statuses.$select(id).context.fetch();
       },
@@ -94,17 +64,11 @@ const TootBottomSheet: Component = (props) => {
     () => tootContext()?.descendants,
   );
 
-  createEffect(() => {
-    if (ancestors.list.length > 0) {
-      document.querySelector(`#toot-${toot()!.id}`)?.scrollIntoView();
-    }
-  });
-
-  useDocumentTitle(() => {
+  const documentTitle = () => {
     const t = toot()?.reblog ?? toot();
     const name = t?.account.displayName ?? "Someone";
     return `${name}'s toot`;
-  });
+  };
 
   const tootDisplayName = () => {
     const t = toot()?.reblog ?? toot();
@@ -118,49 +82,10 @@ const TootBottomSheet: Component = (props) => {
     return s.account ? s : undefined;
   };
 
-  const onBookmark = async () => {
-    const status = remoteToot()!;
-    const client = actSession()!.client;
-    setRemoteToot(
-      Object.assign({}, status, {
-        bookmarked: !status.bookmarked,
-      }),
-    );
-    const result = await (status.bookmarked
-      ? client.v1.statuses.$select(status.id).unbookmark()
-      : client.v1.statuses.$select(status.id).bookmark());
-    setRemoteToot(result);
-  };
-
-  const onBoost = async () => {
-    const status = remoteToot()!;
-    const client = actSession()!.client;
-    vibrate(50);
-    setRemoteToot(
-      Object.assign({}, status, {
-        reblogged: !status.reblogged,
-      }),
-    );
-    const result = await (status.reblogged
-      ? client.v1.statuses.$select(status.id).unreblog()
-      : client.v1.statuses.$select(status.id).reblog());
-    vibrate([20, 30]);
-    setRemoteToot(result.reblog!);
-  };
-
-  const onFav = async () => {
-    const status = remoteToot()!;
-    const client = actSession()!.client;
-    setRemoteToot(
-      Object.assign({}, status, {
-        favourited: !status.favourited,
-      }),
-    );
-    const result = await (status.favourited
-      ? client.v1.statuses.$select(status.id).favourite()
-      : client.v1.statuses.$select(status.id).unfavourite());
-    setRemoteToot(result);
-  };
+  const mainTootEnv = createDefaultTootEnv(
+    () => actSession()?.client,
+    (_, status) => setRemoteToot(status),
+  );
 
   const defaultMentions = () => {
     const tootAcct = remoteToot()?.reblog?.account ?? remoteToot()?.account;
@@ -174,33 +99,6 @@ const TootBottomSheet: Component = (props) => {
     return Array.from(new Set(values).keys());
   };
 
-  const vote = async (status: mastodon.v1.Status, votes: readonly number[]) => {
-    const client = session()?.client;
-    if (!client) return;
-
-    const toot = status.reblog ?? status;
-    if (!toot.poll) return;
-
-    const npoll = await client.v1.polls.$select(toot.poll.id).votes.create({
-      choices: votes,
-    });
-
-    if (status.reblog) {
-      setRemoteToot({
-        ...status,
-        reblog: {
-          ...status.reblog,
-          poll: npoll,
-        },
-      });
-    } else {
-      setRemoteToot({
-        ...status,
-        poll: npoll,
-      });
-    }
-  };
-
   const handleMainTootClick = (
     event: MouseEvent & { currentTarget: HTMLElement },
   ) => {
@@ -264,32 +162,27 @@ const TootBottomSheet: Component = (props) => {
       }
       class="TootBottomSheet"
     >
+      <DocumentTitle>{documentTitle()}</DocumentTitle>
       <div class="Scrollable">
         <TimeSourceProvider value={time}>
-          <TootList
-            threads={ancestors.list}
-            onUnknownThread={ancestors.getPath}
-            onChangeToot={ancestors.set}
-          />
+          <ItemSelectionProvider value={selectionState}>
+            <TootList
+              threads={ancestors.list}
+              onUnknownThread={ancestors.getPath}
+              onChangeToot={ancestors.set}
+            />
 
-          <article>
             <Show when={toot()}>
-              <TootEnvProvider
-                value={{
-                  bookmark: onBookmark,
-                  boost: onBoost,
-                  favourite: onFav,
-                  vote,
-                }}
-              >
+              <TootEnvProvider value={mainTootEnv}>
                 <RegularToot
                   id={`toot-${toot()!.id}`}
-                  class={cards.card}
                   style={{
                     "scroll-margin-top":
                       "calc(var(--scaffold-topbar-height) + 20px)",
                     cursor: "auto",
                     "user-select": "auto",
+                    "margin-top": "20px",
+                    "margin-bottom": "20px",
                   }}
                   status={toot()!}
                   actionable={!!actSession()}
@@ -298,26 +191,24 @@ const TootBottomSheet: Component = (props) => {
                 ></RegularToot>
               </TootEnvProvider>
             </Show>
-          </article>
 
-          <Show when={session()!.account}>
-            <TootComposer
-              mentions={defaultMentions()}
-              profile={session().account!}
-              replyToDisplayName={toot()?.account?.displayName || ""}
-              client={session().client}
-              onSent={() => refetchContext()}
-              inReplyToId={remoteToot()?.reblog?.id ?? remoteToot()?.id}
-            />
-          </Show>
+            <Show when={(session().account as Account).inf}>
+              <TootComposer
+                mentions={defaultMentions()}
+                profile={(session().account! as Account).inf}
+                replyToDisplayName={toot()?.account?.displayName || ""}
+                client={session().client}
+                onSent={() => refetchContext()}
+                inReplyToId={remoteToot()?.reblog?.id ?? remoteToot()?.id}
+              />
+            </Show>
 
-          <Show when={tootContextErrorUncaught.loading}>
-            <div class="progress-line">
-              <CircularProgress style="width: 1.5em; height: 1.5em;" />
-            </div>
-          </Show>
+            <Show when={tootContextErrorUncaught.loading}>
+              <div class="progress-line">
+                <CircularProgress style="width: 1.5em; height: 1.5em;" />
+              </div>
+            </Show>
 
-          <ItemSelectionProvider value={selectionState}>
             <TootList
               threads={descendants.list}
               onUnknownThread={descendants.getPath}

src/timelines/TootComposer.css

@@ -2,7 +2,7 @@
   --card-gut: 8px;
   contain: content;
 
-  > .MuiToolbar-root {
+  >.MuiToolbar-root {
     justify-content: space-between;
 
     > :first-child {
@@ -27,8 +27,8 @@
     flex-flow: row wrap;
     padding-top: 16px;
     padding-bottom: 8px;
-    margin-left: -0.5em;
-    margin-right: -0.5em;
+    margin-left: calc(var(--card-pad) - 0.5em);
+    margin-right: calc(var(--card-pad) - 0.5em);
 
     animation: TootComposerFadeIn 110ms var(--tutu-anim-curve-sharp) both;
   }
@@ -42,4 +42,4 @@
   100% {
     opacity: 1;
   }
-}
+}

src/timelines/TootComposer.tsx

@@ -1,7 +1,6 @@
 import {
   createEffect,
   createMemo,
-  createRenderEffect,
   createSignal,
   Show,
   type Accessor,
@@ -39,14 +38,13 @@ import {
   Close,
   MoreVert,
 } from "@suid/icons-material";
-import type { Account } from "../accounts/stores";
 import "./TootComposer.css";
 import BottomSheet from "~material/BottomSheet";
 import { useAppLocale } from "~platform/i18n";
 import iso639_1 from "iso-639-1";
 import ChooseTootLang from "./TootLangPicker";
 import type { mastodon } from "masto";
-import cardStyles from "~material/cards.module.css";
+import "~material/cards.css";
 import Menu, { createManagedMenuState } from "~material/Menu";
 import { useDefaultSession } from "../masto/clients";
 import { resolveCustomEmoji } from "../masto/toot";
@@ -216,7 +214,7 @@ function cancelEvent(event: Event) {
 const TootComposer: Component<{
   ref?: Ref<HTMLDivElement>;
   style?: JSX.CSSProperties;
-  profile?: Account;
+  profile?: mastodon.v1.Account;
   replyToDisplayName?: string;
   mentions?: readonly string[];
   client?: mastodon.rest.Client;
@@ -248,15 +246,15 @@ const TootComposer: Component<{
 
   createEffect(() => {
     if (active()) {
-      setTimeout(() => inputRef.focus(), 0);
+      setTimeout(() => inputRef!.focus(), 0);
     }
   });
 
   createEffect(() => {
-    if (inputRef.value !== "") return;
+    if (inputRef!.value !== "") return;
     if (props.mentions) {
       const prepText = props.mentions.join(" ") + " ";
-      inputRef.value = prepText;
+      inputRef!.value = prepText;
     }
   });
 
@@ -294,7 +292,7 @@ const TootComposer: Component<{
     try {
       const status = await client.v1.statuses.create(
         {
-          status: inputRef.value,
+          status: inputRef!.value,
           language: language(),
           visibility: visibility(),
           inReplyToId: props.inReplyToId,
@@ -309,7 +307,7 @@ const TootComposer: Component<{
       );
 
       props.onSent?.(status);
-      inputRef.value = "";
+      inputRef!.value = "";
     } finally {
       setSending(false);
     }
@@ -318,7 +316,7 @@ const TootComposer: Component<{
   return (
     <div
       ref={props.ref}
-      class={/* @once */ `TootComposer ${cardStyles.card}`}
+      class="TootComposer card"
       style={containerStyle()}
       on:touchend={
         cancelEvent
@@ -328,7 +326,7 @@ const TootComposer: Component<{
       on:wheel={cancelEvent}
     >
       <Show when={active()}>
-        <Toolbar class={cardStyles.cardNoPad}>
+        <Toolbar class="card-gut">
           <IconButton
             onClick={[setActive, false]}
             aria-label="Close the composer"
@@ -341,7 +339,7 @@ const TootComposer: Component<{
             <MoreVert />
           </IconButton>
         </Toolbar>
-        <div class={cardStyles.cardNoPad}>
+        <div class="card-gut">
           <Menu {...menuState}>
             <MenuItem>
               <ListItemAvatar>
@@ -360,10 +358,10 @@ const TootComposer: Component<{
         </div>
       </Show>
 
-      <div class="reply-input">
+      <div class="reply-input card-gut card-pad">
         <Show when={props.profile}>
           <Avatar
-            src={props.profile!.inf?.avatar}
+            src={props.profile!.avatar}
             sx={{ marginLeft: "-0.25em" }}
           />
         </Show>
@@ -406,7 +404,7 @@ const TootComposer: Component<{
       </div>
 
       <Show when={active()}>
-        <div class="options">
+        <div class="options card-gut">
           <Button
             startIcon={<Translate />}
             endIcon={<ArrowDropDown />}
@@ -430,7 +428,6 @@ const TootComposer: Component<{
         </div>
 
         <TootVisibilityPickerDialog
-          class={cardStyles.cardNoPad}
           open={permPicker()}
           onClose={() => setPermPicker(false)}
           visibility={visibility()}
@@ -438,7 +435,6 @@ const TootComposer: Component<{
         />
 
         <TootLanguagePickerDialog
-          class={cardStyles.cardNoPad}
           open={langPickerOpen()}
           onClose={() => setLangPickerOpen(false)}
           code={language()}

src/timelines/TootLangPicker.tsx

@@ -23,7 +23,7 @@ type ChooseTootLangProps = {
 };
 
 const ChooseTootLang: Component<ChooseTootLangProps> = (props) => {
-  let listRef: HTMLUListElement;
+  let listRef!: HTMLUListElement;
   const [t] = createTranslator(
     (code) =>
       import(`./i18n/${code}.json`) as Promise<{

src/timelines/TootList.tsx

@@ -1,28 +1,25 @@
 import {
   Component,
-  createSignal,
   ErrorBoundary,
   type Ref,
-  createSelector,
   Index,
   createMemo,
   For,
   createUniqueId,
 } from "solid-js";
 import { type mastodon } from "masto";
-import { vibrate } from "~platform/hardware";
 import { useDefaultSession } from "../masto/clients";
-import { setCache as setTootBottomSheetCache } from "./TootBottomSheet";
 import RegularToot, {
+  createDefaultTootEnv,
   findElementActionable,
   findRootToot,
   TootEnvProvider,
 } from "./RegularToot";
-import cardStyle from "~material/cards.module.css";
 import type { ThreadNode } from "../masto/timelines";
 import { useNavigator } from "~platform/StackedRouter";
 import { ANIM_CURVE_STD } from "~material/theme";
 import { useItemSelection } from "./toots/ItemSelectionProvider";
+import { fetchStatus } from "../masto/statuses";
 
 function durationOf(rect0: DOMRect, rect1: DOMRect) {
   const distancelt = Math.sqrt(
@@ -61,62 +58,12 @@ const TootList: Component<{
   const [isExpanded, setExpanded] = useItemSelection();
   const { push } = useNavigator();
 
-  const onBookmark = async (status: mastodon.v1.Status) => {
-    const client = session()?.client;
-    if (!client) return;
+  const tootEnv = createDefaultTootEnv(
+    () => session()?.client,
+    (...args) => props.onChangeToot(...args),
+  );
 
-    const result = await (status.bookmarked
-      ? client.v1.statuses.$select(status.id).unbookmark()
-      : client.v1.statuses.$select(status.id).bookmark());
-    props.onChangeToot(result.id, result);
-  };
-
-  const toggleBoost = async (status: mastodon.v1.Status) => {
-    const client = session()?.client;
-    if (!client) return;
-
-    vibrate(50);
-    const rootStatus = status.reblog ? status.reblog : status;
-    const reblogged = rootStatus.reblogged;
-    if (status.reblog) {
-      props.onChangeToot(status.id, {
-        ...status,
-        reblog: { ...status.reblog, reblogged: !reblogged },
-      });
-    } else {
-      props.onChangeToot(status.id, {
-        ...status,
-        reblogged: !reblogged,
-      });
-    }
-
-    const result = reblogged
-      ? await client.v1.statuses.$select(status.id).unreblog()
-      : (await client.v1.statuses.$select(status.id).reblog()).reblog!;
-
-    if (status.reblog) {
-      props.onChangeToot(status.id, {
-        ...status,
-        reblog: result,
-      });
-    } else {
-      props.onChangeToot(status.id, result);
-    }
-  };
-
-  const toggleFavourite = async (status: mastodon.v1.Status) => {
-    const client = session()?.client;
-    if (!client) return;
-    const ovalue = status.favourited;
-    props.onChangeToot(status.id, { ...status, favourited: !ovalue });
-
-    const result = ovalue
-      ? await client.v1.statuses.$select(status.id).unfavourite()
-      : await client.v1.statuses.$select(status.id).favourite();
-    props.onChangeToot(status.id, result);
-  };
-
-  const openFullScreenToot = (
+  const openFullScreenToot = async (
     toot: mastodon.v1.Status,
     srcElement: HTMLElement,
     reply?: boolean,
@@ -130,7 +77,7 @@ const TootList: Component<{
     }
 
     const acct = `${inf.username}@${p.site}`;
-    setTootBottomSheetCache(acct, toot);
+    await fetchStatus.setJson([p, toot.id], toot)
 
     push(`/${encodeURIComponent(acct)}/toot/${toot.id}`, {
       animateOpen(element) {
@@ -234,33 +181,6 @@ const TootList: Component<{
     openFullScreenToot(status, element, true);
   };
 
-  const vote = async (status: mastodon.v1.Status, votes: readonly number[]) => {
-    const client = session()?.client;
-    if (!client) return;
-
-    const toot = status.reblog ?? status;
-    if (!toot.poll) return;
-
-    const npoll = await client.v1.polls.$select(toot.poll.id).votes.create({
-      choices: votes,
-    });
-
-    if (status.reblog) {
-      props.onChangeToot(status.id, {
-        ...status,
-        reblog: {
-          ...status.reblog,
-          poll: npoll,
-        },
-      });
-    } else {
-      props.onChangeToot(status.id, {
-        ...status,
-        poll: npoll,
-      });
-    }
-  };
-
   return (
     <ErrorBoundary
       fallback={(err, reset) => {
@@ -270,11 +190,8 @@ const TootList: Component<{
     >
       <TootEnvProvider
         value={{
-          boost: toggleBoost,
-          bookmark: onBookmark,
-          favourite: toggleFavourite,
+          ...tootEnv,
           reply: reply,
-          vote: vote,
         }}
       >
         <div ref={props.ref} id={props.id} class="toot-list">
@@ -303,7 +220,6 @@ const TootList: Component<{
                             ? positionTootInThread(index, threadLength())
                             : undefined
                         }
-                        class={cardStyle.card}
                         evaluated={isExpanded(id)}
                         actionable={isExpanded(id)}
                         onClick={[onItemClick, status()]}

src/timelines/i18n/en.json

@@ -1,3 +1,15 @@
 {
-  "Choose Language": "Choose Language"
+  "Choose Language": "Choose Language",
+
+  "tabs.home": "Home",
+  "tabs.trending": "Trending",
+  "tabs.public": "Public",
+
+  "set.prefetch-toots": "Prefetch Toots",
+
+  "nav.bookmarks": "Bookmarks",
+  "nav.likes": "Likes",
+  "nav.lists": "Lists",
+  "nav.settings": "Settings"
+
 }

src/timelines/i18n/zh-Hans.json

@@ -1,3 +1,14 @@
 {
-  "Choose Language": "选择语言"
+  "Choose Language": "选择语言",
+
+  "tabs.home": "主页",
+  "tabs.trending": "当下热门",
+  "tabs.public": "公开",
+
+  "set.prefetch-toots": "提前下载嘟文",
+
+  "nav.bookmarks": "所有书签",
+  "nav.likes": "喜欢的嘟文",
+  "nav.lists": "所有列表",
+  "nav.settings": "设置"
 }

src/timelines/toots/MediaAttachmentGrid.tsx

@@ -16,7 +16,7 @@ import { useStore } from "@nanostores/solid";
 import { $settings } from "../../settings/stores";
 import { averageColorHex } from "~platform/blurhash";
 import "./MediaAttachmentGrid.css";
-import cardStyle from "~material/cards.module.css";
+import "~material/cards.css";
 import { Preview } from "@suid/icons-material";
 import { IconButton } from "@suid/material";
 import Masonry from "~platform/Masonry";
@@ -134,7 +134,7 @@ const MediaAttachmentGrid: Component<{
     <Masonry
       component="section"
       ref={setRootRef}
-      class={`MediaAttachmentGrid ${cardStyle.cardNoPad}`}
+      class={`MediaAttachmentGrid card-gut`}
       classList={{
         sensitive: props.sensitive,
       }}

src/timelines/toots/PreviewCard.tsx

@@ -17,7 +17,7 @@ export function PreviewCard(props: {
   src: mastodon.v1.PreviewCard;
   alwaysCompact?: boolean;
 }) {
-  let root: HTMLAnchorElement;
+  let root!: HTMLAnchorElement;
 
   createEffect(() => {
     if (props.alwaysCompact) {
@@ -75,7 +75,7 @@ export function PreviewCard(props: {
   return (
     <a
       ref={root!}
-      class={"PreviewCard"}
+      class={"PreviewCard card-pad card-gut"}
       href={props.src.url}
       target="_blank"
       referrerPolicy="unsafe-url"

src/timelines/toots/TootActionGroup.css

@@ -2,7 +2,7 @@
   padding-block: calc((var(--card-gut) - 10px) / 2);
   contain: layout style;
 
-  animation: 225ms var(--tutu-anim-curve-std) TootActionGroup_fade-in;
+  animation: 125ms var(--tutu-anim-curve-sharp) TootActionGroup_fade-in;
   display: flex;
   flex-flow: row wrap;
   justify-content: space-evenly;
@@ -28,14 +28,43 @@
   >.plain {
     justify-content: center;
   }
+
+  &.Transition-exit {
+    animation: 125ms var(--tutu-anim-curve-sharp) TootActionGroup_fade-out;
+  }
 }
 
 @keyframes TootActionGroup_fade-in {
   0% {
-    opacity: 0;
+    opacity: 0.5;
+    transform: translateY(-10px);
+    margin-bottom: -30px;
+  }
+
+  25% {
+    margin-bottom: 0;
   }
 
   100% {
     opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes TootActionGroup_fade-out {
+  0% {
+    opacity: 1;
+    transform: translateY(0px);
+    margin-bottom: 0px;
+  }
+
+  75% {
+    margin-bottom: -30px;
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateY(-10px);
+    margin-bottom: -30px;
   }
 }

src/timelines/toots/TootActionGroup.tsx

@@ -24,13 +24,19 @@ function isolatedCallback(e: MouseEvent) {
   e.stopPropagation();
 }
 
+/**
+ * The actions of the toot card.
+ *
+ * The `value` must be the original toot (contains `reblog` if
+ * it's a boost), since the value will be passed to the callbacks.
+ */
 function TootActionGroup<T extends mastodon.v1.Status>(props: {
   value: T;
   class?: string;
 }) {
   const { reply, boost, favourite, bookmark } = useTootEnv();
   let actGrpElement: HTMLDivElement;
-  const toot = () => props.value;
+  const toot = () => props.value.reblog ?? props.value;
   return (
     <div
       ref={actGrpElement!}

src/timelines/toots/TootAuthorGroup.tsx

@@ -19,7 +19,7 @@ function TootAuthorGroup(
   const { dateFn: dateFnLocale } = useAppLocale();
 
   return (
-    <div class="TootAuthorGroup" {...rest}>
+    <div class="TootAuthorGroup card-gut card-pad" {...rest}>
       <Img src={toot().account.avatar} class="avatar" />
       <div class="name-grp">
         <div class="name-primary">

src/timelines/toots/TootContent.tsx

@@ -75,7 +75,7 @@ const TootContent: Component<TootContentProps> = (oprops) => {
           }
         });
       }}
-      class={`TootContent ${props.class || ""}`}
+      class={`TootContent card-gut card-pad ${props.class || ""}`}
       {...rest}
     >
       <Show when={props.sensitive}>

src/timelines/toots/TootPoll.tsx

@@ -1,6 +1,5 @@
 import {
   batch,
-  createRenderEffect,
   createSelector,
   createSignal,
   Index,
@@ -10,7 +9,7 @@ import {
 } from "solid-js";
 import "./TootPoll.css";
 import type { mastodon } from "masto";
-import { resolveCustomEmoji } from "../../masto/toot";
+import { resolveCustomEmoji } from "../../masto/toot.js";
 import {
   Button,
   Checkbox,
@@ -21,11 +20,11 @@ import {
   Radio,
 } from "@suid/material";
 import { formatDistance, isBefore } from "date-fns";
-import { useTimeSource } from "~platform/timesrc";
-import { useDateFnLocale } from "~platform/i18n";
-import TootPollDialog from "./TootPollDialog";
-import { ANIM_CURVE_STD } from "~material/theme";
-import { useTootEnv } from "../RegularToot";
+import { useTimeSource } from "~platform/timesrc.js";
+import { useDateFnLocale } from "~platform/i18n.js";
+import TootPollDialog from "./TootPollDialog.js";
+import { ANIM_CURVE_STD } from "~material/theme.js";
+import { useTootEnv } from "../RegularToot.js";
 
 type TootPollProps = {
   value: mastodon.v1.Poll;
@@ -33,7 +32,7 @@ type TootPollProps = {
 };
 
 const TootPoll: Component<TootPollProps> = (props) => {
-  let list: HTMLUListElement;
+  let list!: HTMLUListElement;
   const { vote } = useTootEnv();
 
   const now = useTimeSource();
@@ -51,7 +50,12 @@ const TootPoll: Component<TootPollProps> = (props) => {
       return n;
     }
 
-    return poll().expired || poll().voted;
+    // TODO: More info for when is a poll available for vote
+    // I don't know the exact condition that the server
+    // prevent the user voting - say, mona allows you
+    // change your vote even after voted. I guess we
+    // need more test on that.
+    return poll().expired;
   };
 
   const isOwnVote = createSelector(
@@ -173,6 +177,7 @@ const TootPoll: Component<TootPollProps> = (props) => {
       <TootPollDialog
         open={showVoteDialog()}
         options={poll().options}
+        multiple={poll().multiple}
         onVote={[vote, props.status]}
         onClose={() => setShowVoteDialog(false)}
         initialVotes={[initialVote()]}

src/timelines/toots/TootPollDialog.tsx

@@ -9,7 +9,6 @@ import {
 import type { mastodon } from "masto";
 import {
   createEffect,
-  createRenderEffect,
   createSignal,
   Index,
   Show,
@@ -47,7 +46,10 @@ const TootPollDialog: Component<TootPollDialogPoll> = (props) => {
 
   const toggleVote = (i: number) => {
     if (props.multiple) {
-      setVotes((o) => [...o.filter((x) => x === i), i]);
+      setVotes((o) => {
+        const others = o.filter((x) => x !== i);
+        return others.length !== o.length ? others : [...others, i];
+      });
     } else {
       setVotes([i]);
     }
@@ -56,7 +58,8 @@ const TootPollDialog: Component<TootPollDialogPoll> = (props) => {
   const sendVote = async () => {
     setInProgress(true);
     try {
-      await props.onVote[0](props.onVote[1], votes());
+      const [callback, status] = props.onVote;
+      await callback(status, votes());
     } catch (reason) {
       console.error(reason);
       props.onClose?.("cancel");

src/utils.tsx

@@ -1,31 +0,0 @@
-import {
-  createRenderEffect,
-  onCleanup,
-  type Accessor,
-} from "solid-js";
-
-export function useDocumentTitle(newTitle?: string | Accessor<string>) {
-  const capturedTitle = document.title;
-
-  createRenderEffect(() => {
-    if (newTitle)
-      document.title = typeof newTitle === "string" ? newTitle : newTitle();
-  });
-
-  onCleanup(() => {
-    document.title = capturedTitle;
-  });
-
-  return (x: ((x: string) => string) | string) =>
-    (document.title = typeof x === "string" ? x : x(document.title));
-}
-
-export function mergeClass(c1: string | undefined, c2: string | undefined) {
-  if (!c1) {
-    return c2;
-  }
-  if (!c2) {
-    return c1;
-  }
-  return [c1, c2].join(" ");
-}

test/objects/accounts.ts

@@ -0,0 +1,24 @@
+import { $, browser } from "@wdio/globals";
+import Page from "./page.js";
+
+/**
+ * sub page containing specific selectors and methods for a specific page
+ */
+export class SignInPage extends Page {
+  public static get serverUrlInput() {
+    return $("[name=serverUrl]");
+  }
+
+  public static async urlIsTheCurrent() {
+    const urlMatched =
+      new URL(await browser.getUrl()).pathname === "/accounts/sign-in";
+    return urlMatched;
+  }
+
+  /**
+   * overwrite specific options to adapt it to page object
+   */
+  public static async open() {
+    return await super.open("accounts/sign-in");
+  }
+}

test/objects/page.ts

@@ -0,0 +1,15 @@
+import { browser } from "@wdio/globals";
+
+/**
+ * main page object containing all methods, selectors and functionality
+ * that is shared across all page objects
+ */
+export default class Page {
+  /**
+   * Opens a sub page of the page
+   * @param path path of the sub page (e.g. /path/to/page.html)
+   */
+  public static open(path: string) {
+    return browser.url(`/${path}`);
+  }
+}

test/objects/timelines.ts

@@ -0,0 +1,7 @@
+import Page from "./page";
+
+export class IndexPage extends Page {
+  public static async open(path: string) {
+    return await super.open(path);
+  }
+}

test/sign-in.spec.ts

@@ -0,0 +1,13 @@
+import { expect } from "@wdio/globals";
+import { SignInPage } from "./objects/accounts.js";
+import { IndexPage } from "./objects/timelines.js";
+
+describe("The index page", () => {
+  it("jumps to the sign-in page if no account signed in", async () => {
+    await IndexPage.open("");
+
+    expect(await browser.waitUntil(SignInPage.urlIsTheCurrent));
+
+    expect(await browser.waitUntil(SignInPage.serverUrlInput.isDisplayed));
+  });
+});

test/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": ["../tsconfig.super.json"],
+  "compilerOptions": {
+    "types": [
+      "node",
+      "@wdio/globals/types",
+      "@wdio/mocha-framework",
+      "@wdio/lighthouse-service"
+    ]
+  },
+  "include": ["./**/*.ts", "../wdio.conf.ts"]
+}

tsconfig.json

@@ -6,6 +6,6 @@
     "lib": ["ESNext", "DOM", "DOM.Iterable"]
   },
   "include": ["./src/**/*.ts", "./src/**/*.tsx", "./*.ts", "./types/**.ts"],
-  "exclude": ["./src/serviceworker/**"],
+  "exclude": ["./src/serviceworker/**", "./wdio.conf.ts"],
   "extends": ["./tsconfig.super.json"]
 }

tsconfig.super.json

@@ -2,8 +2,8 @@
   "compilerOptions": {
     "strict": true,
     "target": "ESNext",
-    "module": "esnext",
-    "moduleResolution": "node",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "noEmit": true,

vite.config.ts

@@ -4,7 +4,7 @@ import solidStyled from "vite-plugin-solid-styled";
 import suid from "@suid/vite-plugin";
 import { VitePWA } from "vite-plugin-pwa";
 import version from "vite-plugin-package-version";
-import manifest from "./manifest.config";
+import manifest from "./manifest.config.js";
 import { GetManualChunk } from "rollup";
 import devtools from "solid-devtools/vite";
 import { resolve } from "node:path";
@@ -70,17 +70,17 @@ export default defineConfig(({ mode }) => {
     plugins: [
       devtools({
         autoname: true,
-        locator: {
-          targetIDE:
-            (devConf["DEV_LOCATOR_EDITOR"] as
-              | "vscode"
-              | "atom"
-              | "webstorm"
-              | "vscode-insiders"
-              | "") || undefined,
-          componentLocation: true,
-          jsxLocation: true,
-        },
+        locator: devConf["DEV_LOCATOR_EDITOR"]
+          ? {
+              targetIDE: devConf["DEV_LOCATOR_EDITOR"] as
+                | "vscode"
+                | "atom"
+                | "webstorm"
+                | "vscode-insiders",
+              componentLocation: true,
+              jsxLocation: true,
+            }
+          : undefined,
       }),
       suid(),
       solid(),
@@ -147,7 +147,7 @@ export default defineConfig(({ mode }) => {
       devSourcemap: true,
     },
     build: {
-      target: ["firefox98", "safari15.4", "ios15.4", "chrome84", "edge87"],
+      target: ["firefox115", "safari15.6", "ios15.6", "chrome108", "edge108"],
       sourcemap: true,
       rollupOptions: {
         output: {

wdio.conf.ts

@@ -0,0 +1,329 @@
+const chromeDefaultOpts = process.env.CI
+  ? {
+      args: ["headless", "disable-gpu"],
+    }
+  : {};
+
+const firefoxDefaultOpts = process.env.CI
+  ? {
+      args: ["-headless"],
+    }
+  : {};
+
+export const config: WebdriverIO.Config = {
+  //
+  // ====================
+  // Runner Configuration
+  // ====================
+  // WebdriverIO supports running e2e tests as well as unit and component tests.
+  runner: "local",
+  tsConfigPath: "./test/tsconfig.json",
+
+  //
+  // ==================
+  // Specify Test Files
+  // ==================
+  // Define which test specs should run. The pattern is relative to the directory
+  // of the configuration file being run.
+  //
+  // The specs are defined as an array of spec files (optionally using wildcards
+  // that will be expanded). The test for each spec file will be run in a separate
+  // worker process. In order to have a group of spec files run in the same worker
+  // process simply enclose them in an array within the specs array.
+  //
+  // The path of the spec files will be resolved relative from the directory of
+  // of the config file unless it's absolute.
+  //
+  specs: ["./test/**/*.spec.ts"],
+  // Patterns to exclude.
+  exclude: ["./test/objects/**/*"],
+  //
+  // ============
+  // Capabilities
+  // ============
+  // Define your capabilities here. WebdriverIO can run multiple capabilities at the same
+  // time. Depending on the number of capabilities, WebdriverIO launches several test
+  // sessions. Within your capabilities you can overwrite the spec and exclude options in
+  // order to group specific specs to a specific capability.
+  //
+  // First, you can define how many instances should be started at the same time. Let's
+  // say you have 3 different capabilities (Chrome, Firefox, and Safari) and you have
+  // set maxInstances to 1; wdio will spawn 3 processes. Therefore, if you have 10 spec
+  // files and you set maxInstances to 10, all spec files will get tested at the same time
+  // and 30 processes will get spawned. The property handles how many capabilities
+  // from the same test should run tests.
+  //
+  maxInstances: 1,
+  //
+  // If you have trouble getting all important capabilities together, check out the
+  // Sauce Labs platform configurator - a great tool to configure your capabilities:
+  // https://saucelabs.com/platform/platform-configurator
+  //
+  capabilities: [
+    {
+      browserName: "chrome",
+      "goog:chromeOptions": chromeDefaultOpts,
+    },
+    // Could not find a reliable way to use old chrome,
+    // skipped here.
+    {
+      browserName: "firefox",
+      "moz:firefoxOptions": firefoxDefaultOpts,
+    },
+    // The browser.url() always timeout on 115.
+    // Idk what the problem is, let skip it for now.
+    /* {
+      browserName: "firefox",
+      browserVersion: "esr_115.18.0esr",
+      "moz:firefoxOptions": firefoxDefaultOpts,
+    }, */
+    ...(process.env.TEST_SAFARI
+      ? [
+          {
+            browserName: "safari",
+          },
+          {
+            browserName: "safari technology preview",
+          },
+        ]
+      : []),
+  ],
+
+  //
+  // ===================
+  // Test Configurations
+  // ===================
+  // Define all options that are relevant for the WebdriverIO instance here
+  //
+  // Level of logging verbosity: trace | debug | info | warn | error | silent
+  logLevel: "info",
+  //
+  // Set specific log levels per logger
+  // loggers:
+  // - webdriver, webdriverio
+  // - @wdio/browserstack-service, @wdio/lighthouse-service, @wdio/sauce-service
+  // - @wdio/mocha-framework, @wdio/jasmine-framework
+  // - @wdio/local-runner
+  // - @wdio/sumologic-reporter
+  // - @wdio/cli, @wdio/config, @wdio/utils
+  // Level of logging verbosity: trace | debug | info | warn | error | silent
+  // logLevels: {
+  //     webdriver: 'info',
+  //     '@wdio/appium-service': 'info'
+  // },
+  //
+  // If you only want to run your tests until a specific amount of tests have failed use
+  // bail (default is 0 - don't bail, run all tests).
+  bail: 0,
+  //
+  // Set a base URL in order to shorten url command calls. If your `url` parameter starts
+  // with `/`, the base url gets prepended, not including the path portion of your baseUrl.
+  // If your `url` parameter starts without a scheme or `/` (like `some/path`), the base url
+  // gets prepended directly.
+  // baseUrl: 'http://localhost:4698',
+  //
+  // Default timeout for all waitFor* commands.
+  waitforTimeout: 10000,
+  //
+  // Default timeout in milliseconds for request
+  // if browser driver or grid doesn't send response
+  connectionRetryTimeout: 120000,
+  //
+  // Default request retries count
+  connectionRetryCount: 3,
+  //
+  // Test runner services
+  // Services take over a specific job you don't want to take care of. They enhance
+  // your test setup with almost no effort. Unlike plugins, they don't add new
+  // commands. Instead, they hook themselves up into the test process.
+  services: ["vite", "lighthouse"],
+
+  // Framework you want to run your specs with.
+  // The following are supported: Mocha, Jasmine, and Cucumber
+  // see also: https://webdriver.io/docs/frameworks
+  //
+  // Make sure you have the wdio adapter package for the specific framework installed
+  // before running any tests.
+  framework: "mocha",
+
+  //
+  // The number of times to retry the entire specfile when it fails as a whole
+  // specFileRetries: 1,
+  //
+  // Delay in seconds between the spec file retry attempts
+  // specFileRetriesDelay: 0,
+  //
+  // Whether or not retried spec files should be retried immediately or deferred to the end of the queue
+  // specFileRetriesDeferred: false,
+  //
+  // Test reporter for stdout.
+  // The only one supported by default is 'dot'
+  // see also: https://webdriver.io/docs/dot-reporter
+  reporters: ["spec"],
+
+  // Options to be passed to Mocha.
+  // See the full list at http://mochajs.org/
+  mochaOpts: {
+    ui: "bdd",
+    timeout: 60000,
+  },
+
+  //
+  // =====
+  // Hooks
+  // =====
+  // WebdriverIO provides several hooks you can use to interfere with the test process in order to enhance
+  // it and to build services around it. You can either apply a single function or an array of
+  // methods to it. If one of them returns with a promise, WebdriverIO will wait until that promise got
+  // resolved to continue.
+  /**
+   * Gets executed once before all workers get launched.
+   * @param {object} config wdio configuration object
+   * @param {Array.<Object>} capabilities list of capabilities details
+   */
+  // onPrepare: function (config, capabilities) {
+  // },
+  /**
+   * Gets executed before a worker process is spawned and can be used to initialize specific service
+   * for that worker as well as modify runtime environments in an async fashion.
+   * @param  {string} cid      capability id (e.g 0-0)
+   * @param  {object} caps     object containing capabilities for session that will be spawn in the worker
+   * @param  {object} specs    specs to be run in the worker process
+   * @param  {object} args     object that will be merged with the main configuration once worker is initialized
+   * @param  {object} execArgv list of string arguments passed to the worker process
+   */
+  // onWorkerStart: function (cid, caps, specs, args, execArgv) {
+  // },
+  /**
+   * Gets executed just after a worker process has exited.
+   * @param  {string} cid      capability id (e.g 0-0)
+   * @param  {number} exitCode 0 - success, 1 - fail
+   * @param  {object} specs    specs to be run in the worker process
+   * @param  {number} retries  number of retries used
+   */
+  // onWorkerEnd: function (cid, exitCode, specs, retries) {
+  // },
+  /**
+   * Gets executed just before initialising the webdriver session and test framework. It allows you
+   * to manipulate configurations depending on the capability or spec.
+   * @param {object} config wdio configuration object
+   * @param {Array.<Object>} capabilities list of capabilities details
+   * @param {Array.<String>} specs List of spec file paths that are to be run
+   * @param {string} cid worker id (e.g. 0-0)
+   */
+  // beforeSession: function (config, capabilities, specs, cid) {
+  // },
+  /**
+   * Gets executed before test execution begins. At this point you can access to all global
+   * variables like `browser`. It is the perfect place to define custom commands.
+   * @param {Array.<Object>} capabilities list of capabilities details
+   * @param {Array.<String>} specs        List of spec file paths that are to be run
+   * @param {object}         browser      instance of created browser/device session
+   */
+  // before: function (capabilities, specs) {
+  // },
+  /**
+   * Runs before a WebdriverIO command gets executed.
+   * @param {string} commandName hook command name
+   * @param {Array} args arguments that command would receive
+   */
+  // beforeCommand: function (commandName, args) {
+  // },
+  /**
+   * Hook that gets executed before the suite starts
+   * @param {object} suite suite details
+   */
+  // beforeSuite: function (suite) {
+  // },
+  /**
+   * Function to be executed before a test (in Mocha/Jasmine) starts.
+   */
+  // beforeTest: function (test, context) {
+  // },
+  /**
+   * Hook that gets executed _before_ a hook within the suite starts (e.g. runs before calling
+   * beforeEach in Mocha)
+   */
+  // beforeHook: function (test, context, hookName) {
+  // },
+  /**
+   * Hook that gets executed _after_ a hook within the suite starts (e.g. runs after calling
+   * afterEach in Mocha)
+   */
+  // afterHook: function (test, context, { error, result, duration, passed, retries }, hookName) {
+  // },
+  /**
+   * Function to be executed after a test (in Mocha/Jasmine only)
+   * @param {object}  test             test object
+   * @param {object}  context          scope object the test was executed with
+   * @param {Error}   result.error     error object in case the test fails, otherwise `undefined`
+   * @param {*}       result.result    return object of test function
+   * @param {number}  result.duration  duration of test
+   * @param {boolean} result.passed    true if test has passed, otherwise false
+   * @param {object}  result.retries   information about spec related retries, e.g. `{ attempts: 0, limit: 0 }`
+   */
+  // afterTest: function(test, context, { error, result, duration, passed, retries }) {
+  // },
+
+  /**
+   * Hook that gets executed after the suite has ended
+   * @param {object} suite suite details
+   */
+  // afterSuite: function (suite) {
+  // },
+  /**
+   * Runs after a WebdriverIO command gets executed
+   * @param {string} commandName hook command name
+   * @param {Array} args arguments that command would receive
+   * @param {number} result 0 - command success, 1 - command error
+   * @param {object} error error object if any
+   */
+  // afterCommand: function (commandName, args, result, error) {
+  // },
+  /**
+   * Gets executed after all tests are done. You still have access to all global variables from
+   * the test.
+   * @param {number} result 0 - test pass, 1 - test fail
+   * @param {Array.<Object>} capabilities list of capabilities details
+   * @param {Array.<String>} specs List of spec file paths that ran
+   */
+  // after: function (result, capabilities, specs) {
+  // },
+  /**
+   * Gets executed right after terminating the webdriver session.
+   * @param {object} config wdio configuration object
+   * @param {Array.<Object>} capabilities list of capabilities details
+   * @param {Array.<String>} specs List of spec file paths that ran
+   */
+  // afterSession: function (config, capabilities, specs) {
+  // },
+  /**
+   * Gets executed after all workers got shut down and the process is about to exit. An error
+   * thrown in the onComplete hook will result in the test run failing.
+   * @param {object} exitCode 0 - success, 1 - fail
+   * @param {object} config wdio configuration object
+   * @param {Array.<Object>} capabilities list of capabilities details
+   * @param {<Object>} results object containing test results
+   */
+  // onComplete: function(exitCode, config, capabilities, results) {
+  // },
+  /**
+   * Gets executed when a refresh happens.
+   * @param {string} oldSessionId session ID of the old session
+   * @param {string} newSessionId session ID of the new session
+   */
+  // onReload: function(oldSessionId, newSessionId) {
+  // }
+  /**
+   * Hook that gets executed before a WebdriverIO assertion happens.
+   * @param {object} params information about the assertion to be executed
+   */
+  // beforeAssertion: function(params) {
+  // }
+  /**
+   * Hook that gets executed after a WebdriverIO assertion happened.
+   * @param {object} params information about the assertion that was executed, including its results
+   */
+  // afterAssertion: function(params) {
+  // }
+};