Initial commit

.env

@@ -0,0 +1,2 @@
+VITE_CLIENT_NAME=Phanpy
+VITE_WEBSITE=https://phanpy.social

.gitignore

@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Custom
+.env.dev

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "importOrder": [".css$", "<THIRD_PARTY_MODULES>", "^../", "^[./]"],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true,
+  "importOrderGroupNamespaceSpecifiers": true,
+  "importOrderCaseInsensitive": true
+}

README.md

@@ -0,0 +1,85 @@
+<div align="center">
+  <img src="design/logo-2.svg" width="128" height="128" alt="">
+
+Phanpy
+===
+
+**Minimalistic opinionated Mastodon web client.**
+</div>
+
+<br>
+
+This is an alternative web client for [Mastodon](https://joinmastodon.org/).
+
+Everything is designed and engineered for my own use case, following my taste and vision. This is a personal side project for me to learn about Mastodon and experiment with new UI/UX ideas.
+
+🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧
+
+**🐘 This is an early ALPHA project. Many features are missing, many bugs are present. Please report issues as detailed as possible. Thanks 🙏**
+
+🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧
+
+## Features
+
+- Minimalistic UI
+- Accounts switching
+- Theme switching (light, dark, auto)
+
+## Design decisions
+
+- **Status actions (reply, boost, favourite, bookmark, etc) are hidden by default**.<br>They only appear in individual status page. This is to reduce clutter and distraction. It may result in lower engagement, but we're not chasing numbers here.
+- **Boost is represented with the rocket icon**.<br>The green double arrow icon (retweet for Twitter) doesn't look right for the term "boost". Green rocket looks weird, so I use purple.
+- **Short usernames (`@username`) are displayed in timelines, instead of the full account username (`@username@instance`)**.<br>Despite the [guideline](https://docs.joinmastodon.org/api/guidelines/#username) mentioned that "Decentralization must be transparent to the user", I don't think we should shove it to the face every single time. There are also some [screen-reader-related accessibility concerns](https://twitter.com/lifeofablindgrl/status/1595864647554502656) with the full username, though this web app is unfortunately not accessible yet.
+- **Hash-based URLs**.<br>This web app is not meant to be a full-fledged replacement to Mastodon's existing front-end. There's no SEO, database, serverless or any long-running servers. I could be wrong one day.
+
+## Development
+
+Prerequisites: Node.js 18+
+
+- `npm install` - Install dependencies
+- `npm run dev` - Start development server
+- `npm run build` - Build for production
+- `npm run preview` - Preview the production build
+- `npm run fetch-instances` - Fetch instances list from [instances.social](https://instances.social/), save it to `src/data/instances.json`
+  - requires `.env.dev` file with `INSTANCES_SOCIAL_SECRET_TOKEN` variable set
+
+## Tech stack
+
+- [Vite](https://vitejs.dev/) - Build tool
+- [Preact](https://preactjs.com/) - UI library
+- [Valtio](https://valtio.pmnd.rs/) - State management
+- [masto.js](https://github.com/neet/masto.js/) - Mastodon API client
+- [Iconify](https://iconify.design/) - Icon library
+- Vanilla CSS - *Yes, I'm old school.*
+
+Some of these may change in the future. The front-end world is ever-changing.
+
+## Mascot
+
+[Phanpy](https://bulbapedia.bulbagarden.net/wiki/Phanpy_(Pok%C3%A9mon)) is a Ground-type Pokémon.
+
+## Maintainers
+
+- [Chee Aun](https://github.com/cheeaun) ([Mastodon](https://mastodon.social/@cheeaun)) ([Twitter](https://twitter.com/cheeaun))
+
+## Backstory
+
+I am one of the earliest users of Twitter. Twitter was launched on [15 July 2006](https://en.wikipedia.org/wiki/Twitter). I joined on December 2006 and my [first tweet](https://twitter.com/cheeaun/status/1298723) was posted on 18 December 2006.
+
+I know how early Twitter looks like. It was fun.
+
+Back then, I [made a Twitter clone](https://twitter.com/cheeaun/status/789031599) called "Twig" written in Python and Google App Engine. I almost made my own [Twitter desktop client](https://github.com/cheeaun/chidori) written in Appcelerator Titanium. I [gave one of my best talks about the Twitter client](https://www.slideshare.net/cheeaun/story-of-a-thousand-birds) in a mini-conference. I built this thing called "Twitter [Columns](https://twitter.com/columns)", a web app that shows your list of followings, your followings' followings, your followers, your followers' followers and so on. In 2009, I wrote a blog post titled ["How I got started with Twitter"](https://cheeaun.com/blog/2009/04/how-i-got-started-with-twitter/). I created [two](https://twitter.com/cheeaun/status/1273422454) [themes](https://twitter.com/cheeaun/status/1487781343) for DestroyTwitter (a desktop client made with Adobe Air by Jonnie Hallman) and one of them is called ["Vimeo"](https://dribbble.com/shots/31624). In 2013, I wrote [my own tweets backup site](https://github.com/cheeaun/tweets) with a front-end to view my tweets and a [CouchDB backend](https://github.com/cheeaun/tweet-couch) to store them.
+
+It's been **more than 15 years**.
+
+And here I am. Building a Mastodon web client.
+
+## Alternative clients
+
+- [Pinafore](https://pinafore.social/)
+- [Elk](https://m.webtoo.ls/@elk)
+- [More...](https://github.com/tleb/awesome-mastodon#clients)
+
+## License
+
+[MIT]([LICENSE](https://cheeaun.mit-license.org/)).

index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Phanpy</title>
+    <meta name="color-scheme" content="dark light" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <div id="modal-container"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,38 @@
+{
+  "name": "phanpy",
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "fetch-instances": "env $(cat .env.dev | grep -v \"#\" | xargs) node scripts/fetch-instances-list.js"
+  },
+  "dependencies": {
+    "@github/text-expander-element": "~2.3.0",
+    "@github/time-elements": "~4.0.0",
+    "autoprefixer": "~10.4.13",
+    "fast-blurhash": "~1.1.2",
+    "history": "~5.3.0",
+    "iconify-icon": "~1.0.2",
+    "masto": "~4.9.1",
+    "mem": "~9.0.2",
+    "preact": "~10.11.3",
+    "preact-router": "~4.1.0",
+    "react-intersection-observer": "~9.4.1",
+    "valtio": "~1.7.6"
+  },
+  "devDependencies": {
+    "@preact/preset-vite": "~2.4.0",
+    "@trivago/prettier-plugin-sort-imports": "~4.0.0",
+    "postcss": "~8.4.19",
+    "postcss-dark-theme-class": "~0.7.3",
+    "vite": "3.2.5"
+  },
+  "postcss": {
+    "plugins": {
+      "postcss-dark-theme-class": {},
+      "autoprefixer": {}
+    }
+  }
+}

public/favicon.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 8 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><rect id="Artboard1" x="0" y="0" width="8" height="8" style="fill:none;"/><g id="Artboard11" serif:id="Artboard1"><path d="M7,2.5c-0.227,-0.681 -0.839,-1.28 -1.5,-1.5c-0.75,-0.25 -2.25,-0.25 -3,0c-0.661,0.22 -1.273,0.819 -1.5,1.5c-0.25,0.75 -0.25,2.25 -0,3c0.227,0.681 0.839,1.28 1.5,1.5c0.75,0.25 2.25,0.25 3,0c0.661,-0.22 1.273,-0.819 1.5,-1.5c0.25,-0.75 0.25,-2.25 0,-3Z" style="fill:#d8e7fe;stroke:#a4bff7;stroke-width:1px;"/><path d="M4.766,3c0.154,0.522 0.292,1.28 0.307,2" style="fill:none;stroke:#6892e2;stroke-width:1px;"/><path d="M3.27,3c-0.154,0.522 -0.292,1.28 -0.307,2" style="fill:none;stroke:#6892e2;stroke-width:1px;"/></g></svg>

scripts/fetch-instances-list.js

@@ -0,0 +1,23 @@
+import fs from 'fs';
+
+const { INSTANCES_SOCIAL_SECRET_TOKEN } = process.env;
+
+const params = new URLSearchParams({
+  count: 200,
+  sort_by: 'active_users',
+  sort_order: 'desc',
+});
+
+const url = `https://instances.social/api/1.0/instances/list?${params.toString()}`;
+const results = await fetch(url, {
+  headers: {
+    Authorization: `Bearer ${INSTANCES_SOCIAL_SECRET_TOKEN}`,
+  },
+});
+
+const json = await results.json();
+const names = json.instances.map((instance) => instance.name);
+
+// Write to file
+const path = './src/data/instances.json';
+fs.writeFileSync(path, JSON.stringify(names, null, '\t'), 'utf8');

src/app.css

@@ -0,0 +1,433 @@
+html, body {
+  margin: 0;
+  padding: 0;
+  background-color: var(--bg-faded-color);
+  color: var(--text-color);
+  overflow: hidden;
+}
+
+#app {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.deck-container {
+  width: 100%;
+  height: 100vh;
+  overflow: auto;
+  transition: opacity 1s ease-in-out;
+}
+.deck-container[hidden] {
+  display: block;
+  position: absolute;
+  user-select: none;
+  pointer-events: none;
+  opacity: 0;
+  content-visibility: hidden;
+}
+
+.deck-container,
+.deck.contained {
+  scroll-padding-top: 4em;
+}
+
+.deck {
+  min-height: 100vh;
+  margin: auto;
+  width: 40em;
+  max-width: 100vw;
+  border-left: 1px solid rgba(0, 0, 0, 0.1);
+  border-right: 1px solid rgba(0, 0, 0, 0.1);
+  background-color: var(--bg-color);
+}
+.deck.contained {
+  overflow: auto;
+  height: 100vh;
+}
+
+.deck header {
+  min-height: 4em;
+  padding: 0 8px;
+  position: sticky;
+  top: 0;
+  background-color: var(--bg-blur-color);
+  backdrop-filter: blur(12px);
+  border-bottom: 1px solid var(--divider-color);
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  cursor: default;
+}
+.deck header > *:not(button) {
+  flex-grow: 1;
+  min-width: 44px;
+}
+.deck header > .header-side:last-of-type {
+  text-align: right;
+}
+.deck header h1 {
+  margin: 0;
+  padding: 0;
+  font-size: 1.2em;
+  text-align: center;
+}
+.deck header h1:first-child {
+  text-align: left;
+  padding-left: 8px;
+}
+.deck h2 {
+  font-size: 1.45em;
+}
+.deck.padded-bottom .timeline li:last-child {
+  padding-bottom: 80vh;
+}
+
+.timeline {
+  margin: 0 auto;
+  padding: 0;
+}
+.timeline li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  border-bottom: 1px solid var(--divider-color);
+}
+.timeline.flat li {
+  border-bottom: none;
+}
+/* .timeline li.insignificant {
+  filter: opacity(0.5);
+  background-color: var(--bg-faded-color);
+}
+.timeline li.insignificant > * {
+  opacity: 0.75;
+}
+.timeline li.insignificant:hover > * {
+  opacity: 1;
+} */
+
+.timeline.contextual li {
+  --width: 3px;
+  --left: 40px;
+  --right: calc(var(--left) + var(--width));
+  background-image: linear-gradient(to right, transparent, transparent var(--left), var(--comment-line-color) var(--left), var(--comment-line-color) var(--right), transparent var(--right), transparent);
+  background-repeat: no-repeat;
+}
+.timeline.contextual li:first-child {
+  background-position: 0 16px;
+}
+.timeline.contextual li:last-child {
+  background-size: 100% 20px;
+}
+.timeline.contextual li.descendant {
+  position: relative;
+}
+.timeline.contextual li.descendant.indirect:before {
+  --radius: 10px;
+  --diameter: calc(var(--radius) * 2);
+  content: '';
+  position: absolute;
+  top: 10px;
+  left: 40px;
+  width: var(--diameter);
+  height: var(--diameter);
+  border-radius: var(--radius);
+  border-style: solid;
+  border-width: var(--width);
+  border-color: transparent transparent var(--comment-line-color) transparent;
+  transform: rotate(45deg);
+}
+.timeline.contextual li.descendant.indirect .status-link {
+  position: relative;
+}
+
+.timeline-deck {
+  padding-bottom: 100px; /* faux nav height */
+}
+.timeline-deck.compact .status {
+  max-height: max(25vh, 160px);
+  overflow: hidden;
+  mask-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1) 80%, transparent 95%);
+}
+.timeline-deck.compact .status .meta ~ * {
+  pointer-events: none;
+}
+
+.timeline-header {
+  padding: 0 16px;
+  opacity: 0.75;
+}
+
+.timeline-empty {
+  color: var(--text-insignificant-color);
+  padding: 0 16px;
+  margin-bottom: 3em;
+}
+
+.status-loading {
+  text-align: center;
+  color: var(--text-insignificant-color);
+}
+
+.status-link {
+  display: block;
+  text-decoration-line: none;
+  color: inherit;
+  transition: background-color 0.2s ease-out;
+}
+.status-link:hover {
+  background-color: var(--link-bg-hover-color);
+}
+
+.ui-state {
+  padding: 16px;
+  text-align: center;
+}
+
+.deck-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 1000;
+  display: flex;
+  background-color: var(--backdrop-color);
+}
+.deck-backdrop > a {
+  flex-grow: 1;
+  backdrop-filter: saturate(.75);
+}
+@keyframes slide-in {
+  0% {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+.deck-backdrop .deck {
+  width: 40em;
+  max-width: 100vw;
+  border-left: 1px solid var(--divider-color);
+  background-color: var(--bg-color);
+  animation: slide-in 0.2s ease-out;
+  box-shadow: -1px 0 var(--bg-color);
+}
+.deck-backdrop .deck .status {
+  max-width: 40em;
+}
+
+.decks {
+  flex-grow: 1;
+  transition: transform 0.2s ease-in-out;
+}
+
+.deck-close {
+  color: var(--text-insignificant-color) !important;
+}
+.deck-close:hover {
+  color: var(--text-color) !important;
+}
+
+:is(button, .button).plain.has-badge:after {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  right: 10px;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background-color: var(--link-color);
+  opacity: .5;
+}
+
+@keyframes fade-from-top {
+  0% {
+    transform: translate(-50%, -100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translate(-50%, 0);
+    opacity: 1;
+  }
+}
+.updates-button {
+  position: absolute;
+  animation: fade-from-top 2s ease-out;
+  left: 50%;
+  transform: translate(-50%, 0);
+}
+
+/* BOX */
+
+.box {
+  width: 40em;
+  max-width: 100vw;
+  text-align: center;
+  padding: 16px;
+  margin: 16px;
+  background-color: var(--bg-color);
+  border-radius: 8px;
+  border: 1px solid var(--divider-color);
+}
+
+.box-shadow {
+  box-shadow: 0px 36px 89px rgb(0 0 0 / 4%), 0px 23.3333px 52.1227px rgb(0 0 0 / 3%), 0px 13.8667px 28.3481px rgb(0 0 0 / 2%), 0px 7.2px 14.4625px rgb(0 0 0 / 2%), 0px 2.93333px 7.25185px rgb(0 0 0 / 2%), 0px 0.666667px 3.50231px rgb(0 0 0 / 1%);
+}
+
+/* CAROUSEL */
+/* use snap, center children, max width viewport */
+
+.carousel {
+  display: flex;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  /* scroll-behavior: smooth; */
+  scrollbar-width: none;
+}
+.carousel::-webkit-scrollbar {
+  display: none;
+}
+.carousel > * {
+  scroll-snap-align: center;
+  flex-shrink: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100vw;
+  height: 100vh;
+}
+.carousel > * :is(img, video) {
+  width: auto;
+  max-width: 100vw;
+  height: auto;
+  max-height: 100vh;
+}
+
+.carousel-controls {
+  position: fixed;
+  width: 100%;
+  bottom: 0;
+  text-align: center;
+  padding: 32px;
+  display: flex;
+  gap: 8px;
+  justify-content: space-between;
+}
+button.carousel-button {
+  font-weight: bold;
+  color: var(--link-color);
+}
+button.carousel-button[hidden] {
+  display: inline-block;
+  opacity: 0;
+  pointer-events: none;
+}
+.carousel-dots {
+  border-radius: 999px;
+  backdrop-filter: blur(12px);
+}
+button.carousel-dot {
+  color: var(--text-insignificant-color) !important;
+  font-weight: bold;
+  backdrop-filter: none !important;
+}
+button.carousel-dot:hover,
+button.carousel-dot.active {
+  color: var(--link-color) !important;
+}
+
+/* COMPOSE BUTTON */
+
+#compose-button {
+  position: fixed;
+  bottom: 16px;
+  right: 16px;
+  padding: 16px;
+  box-shadow: 0 0 32px var(--bg-color);
+  z-index: 1;
+  outline: 1px solid var(--bg-color);
+  opacity: .75;
+}
+
+/* SHEET */
+
+@keyframes slide-up {
+  0% {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+.sheet {
+  align-self: flex-end;
+  max-height: 90vh;
+  overflow: auto;
+  background-color: var(--bg-color);
+  width: 100%;
+  max-width: calc(40em - 50px - 16px);
+  border-radius: 36px 36px 0 0;
+  padding: 16px;
+  box-shadow: 0 -1px 32px var(--divider-color);
+  animation: slide-up 0.2s ease-out;
+  outline: 1px solid var(--outline-color);
+}
+
+/* TAG */
+
+.tag {
+  font-size: smaller;
+  color: var(--bg-faded-color);
+  background-color: var(--text-insignificant-color);
+  padding: 2px 4px;
+  border-radius: 4px;
+  display: inline-block;
+  margin: 4px;
+  align-self: center;
+}
+
+@media (min-width: 40em) {
+  #app {
+    display: flex;
+  }
+  .decks:has(~ .deck-backdrop) {
+    transform: translateX(-5vw);
+  }
+  .deck-backdrop .deck {
+    width: 50%;
+    min-width: 40em;
+  }
+  .timeline-deck {
+    border: 0;
+    background-color: transparent;
+  }
+  .timeline-deck header {
+    min-height: 6em;
+    border-bottom: 0;
+    background-color: var(--bg-faded-blur-color);
+    border-bottom: 0;
+    mask-image: linear-gradient(rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, .7) 80%, rgba(0, 0, 0, .5) 90%, transparent);
+  }
+  .deck header h1 {
+    font-size: 1.5em;
+  }
+  .timeline-deck .timeline:not(.flat) li {
+    border: 1px solid var(--divider-color);
+    margin: 16px 0;
+    background-color: var(--bg-color);
+    border-radius: 16px;
+    overflow: hidden;
+    box-shadow: 0px 1px var(--bg-blur-color);
+  }
+  .box {
+    padding: 32px;
+  }
+}

src/app.jsx

@@ -0,0 +1,306 @@
+import './app.css';
+
+import { createHashHistory } from 'history';
+import { login } from 'masto/fetch';
+import Router from 'preact-router';
+import { useEffect, useLayoutEffect, useState } from 'preact/hooks';
+import { useSnapshot } from 'valtio';
+
+import Account from './components/account';
+import Compose from './components/compose';
+import Icon from './components/icon';
+import Loader from './components/loader';
+import Modal from './components/modal';
+import Home from './pages/home';
+import Login from './pages/login';
+import Notifications from './pages/notifications';
+import Settings from './pages/settings';
+import Status from './pages/status';
+import Welcome from './pages/welcome';
+import { getAccessToken } from './utils/auth';
+import states from './utils/states';
+import store from './utils/store';
+
+const { VITE_CLIENT_NAME: CLIENT_NAME } = import.meta.env;
+
+window._STATES = states;
+
+async function startStream() {
+  const stream = await masto.stream.streamUser();
+  console.log('STREAM START', { stream });
+  stream.on('update', (status) => {
+    console.log('UPDATE', status);
+
+    const inHomeNew = states.homeNew.find((s) => s.id === status.id);
+    const inHome = states.home.find((s) => s.id === status.id);
+    if (!inHomeNew && !inHome) {
+      states.homeNew.unshift({
+        id: status.id,
+        reblog: status.reblog?.id,
+        reply: !!status.inReplyToAccountId,
+      });
+    }
+
+    states.statuses.set(status.id, status);
+    if (status.reblog) {
+      states.statuses.set(status.reblog.id, status.reblog);
+    }
+  });
+  stream.on('status.update', (status) => {
+    console.log('STATUS.UPDATE', status);
+    states.statuses.set(status.id, status);
+    if (status.reblog) {
+      states.statuses.set(status.reblog.id, status.reblog);
+    }
+  });
+  stream.on('delete', (statusID) => {
+    console.log('DELETE', statusID);
+    states.statuses.delete(statusID);
+  });
+  stream.on('notification', (notification) => {
+    console.log('NOTIFICATION', notification);
+
+    const inNotificationsNew = states.notificationsNew.find(
+      (n) => n.id === notification.id,
+    );
+    const inNotifications = states.notifications.find(
+      (n) => n.id === notification.id,
+    );
+    if (!inNotificationsNew && !inNotifications) {
+      states.notificationsNew.unshift(notification);
+    }
+
+    if (notification.status && !states.statuses.has(notification.status.id)) {
+      states.statuses.set(notification.status.id, notification.status);
+      if (
+        notification.status.reblog &&
+        !states.statuses.has(notification.status.reblog.id)
+      ) {
+        states.statuses.set(
+          notification.status.reblog.id,
+          notification.status.reblog,
+        );
+      }
+    }
+  });
+
+  stream.ws.onclose = () => {
+    console.log('STREAM CLOSED!');
+
+    requestAnimationFrame(() => {
+      startStream();
+    });
+  };
+
+  return {
+    stream,
+    stopStream: () => {
+      stream.ws.close();
+    },
+  };
+}
+
+export function App() {
+  const snapStates = useSnapshot(states);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [uiState, setUIState] = useState('default');
+
+  useLayoutEffect(() => {
+    const theme = store.local.get('theme');
+    if (theme) {
+      document.documentElement.classList.add(`is-${theme}`);
+      document
+        .querySelector('meta[name="color-scheme"]')
+        .setAttribute('content', theme);
+    }
+  }, []);
+
+  useEffect(() => {
+    const instanceURL = store.local.get('instanceURL');
+    const accounts = store.local.getJSON('accounts') || [];
+    const code = (window.location.search.match(/code=([^&]+)/) || [])[1];
+
+    if (code) {
+      console.log({ code });
+      // Clear the code from the URL
+      window.history.replaceState({}, document.title, '/');
+
+      const clientID = store.session.get('clientID');
+      const clientSecret = store.session.get('clientSecret');
+
+      (async () => {
+        setUIState('loading');
+        const tokenJSON = await getAccessToken({
+          instanceURL,
+          client_id: clientID,
+          client_secret: clientSecret,
+          code,
+        });
+        const { access_token: accessToken } = tokenJSON;
+        store.session.set('accessToken', accessToken);
+
+        window.masto = await login({
+          url: `https://${instanceURL}`,
+          accessToken,
+        });
+
+        const mastoAccount = await masto.accounts.verifyCredentials();
+
+        console.log({ tokenJSON, mastoAccount });
+
+        let account = accounts.find((a) => a.info.id === mastoAccount.id);
+        if (account) {
+          account.info = mastoAccount;
+          account.instanceURL = instanceURL;
+          account.accessToken = accessToken;
+        } else {
+          account = {
+            info: mastoAccount,
+            instanceURL,
+            accessToken,
+          };
+          accounts.push(account);
+        }
+
+        store.local.setJSON('accounts', accounts);
+        store.session.set('currentAccount', account.info.id);
+
+        setIsLoggedIn(true);
+        setUIState('default');
+      })();
+    } else if (accounts.length) {
+      const currentAccount = store.session.get('currentAccount');
+      const account =
+        accounts.find((a) => a.info.id === currentAccount) || accounts[0];
+      const instanceURL = account.instanceURL;
+      const accessToken = account.accessToken;
+      store.session.set('currentAccount', account.info.id);
+
+      (async () => {
+        try {
+          setUIState('loading');
+          window.masto = await login({
+            url: `https://${instanceURL}`,
+            accessToken,
+          });
+          setIsLoggedIn(true);
+        } catch (e) {
+          setIsLoggedIn(false);
+        }
+        setUIState('default');
+      })();
+    }
+  }, []);
+
+  const [currentDeck, setCurrentDeck] = useState('home');
+
+  useEffect(() => {
+    // HACK: prevent this from running again due to HMR
+    if (states.init) return;
+
+    if (isLoggedIn) {
+      requestAnimationFrame(() => {
+        startStream();
+
+        // Collect instance info
+        (async () => {
+          const info = await masto.instances.fetch();
+          console.log(info);
+          const { uri } = info;
+          const instances = store.local.getJSON('instances') || {};
+          instances[uri] = info;
+          store.local.setJSON('instances', instances);
+        })();
+      });
+      states.init = true;
+    }
+  }, [isLoggedIn]);
+
+  return (
+    <>
+      {isLoggedIn && currentDeck && (
+        <>
+          <button
+            type="button"
+            id="compose-button"
+            onClick={() => (states.showCompose = true)}
+          >
+            <Icon icon="quill" size="xxl" alt="Compose" />
+          </button>
+          <div class="decks">
+            {/* Home will never be unmounted */}
+            <Home hidden={currentDeck !== 'home'} />
+            {/* Notifications can be unmounted */}
+            {currentDeck === 'notifications' && <Notifications />}
+          </div>
+        </>
+      )}
+      {!isLoggedIn && uiState === 'loading' && <Loader />}
+      <Router
+        history={createHashHistory()}
+        onChange={(e) => {
+          // Special handling for Home and Notifications
+          const { url } = e;
+          if (/notifications/i.test(url)) {
+            setCurrentDeck('notifications');
+          } else if (url === '/') {
+            setCurrentDeck('home');
+            document.title = `Home / ${CLIENT_NAME}}`;
+          } else if (url === '/login' || url === '/welcome') {
+            setCurrentDeck(null);
+          }
+          states.history.push(url);
+        }}
+      >
+        {!isLoggedIn && uiState !== 'loading' && <Welcome path="/" />}
+        <Welcome path="/welcome" />
+        {isLoggedIn && <Status path="/s/:id" />}
+        <Login path="/login" />
+      </Router>
+      {!!snapStates.showCompose && (
+        <Modal>
+          <Compose
+            replyToStatus={
+              typeof snapStates.showCompose !== 'boolean'
+                ? snapStates.showCompose.replyToStatus
+                : null
+            }
+            onClose={(result) => {
+              states.showCompose = false;
+              if (result) {
+                states.reloadStatusPage++;
+              }
+            }}
+          />
+        </Modal>
+      )}
+      {!!snapStates.showSettings && (
+        <Modal
+          onClick={(e) => {
+            if (e.target === e.currentTarget) {
+              states.showSettings = false;
+            }
+          }}
+        >
+          <Settings
+            onClose={() => {
+              states.showSettings = false;
+            }}
+          />
+        </Modal>
+      )}
+      {!!snapStates.showAccount && (
+        <Modal
+          class="light"
+          onClick={(e) => {
+            if (e.target === e.currentTarget) {
+              states.showAccount = false;
+            }
+          }}
+        >
+          <Account account={snapStates.showAccount} />
+        </Modal>
+      )}
+    </>
+  );
+}

src/components/account.css

@@ -0,0 +1,30 @@
+#account-container.skeleton {
+  color: var(--outline-color);
+}
+
+#account-container header{
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+#account-container .note {
+  font-size: 95%;
+  line-height: 1.5;
+}
+
+#account-container .stats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+#account-container .actions {
+  display: flex;
+  gap: 8px;
+  justify-content: space-between;
+  min-height: 2.5em;
+}
+#account-container .actions button {
+  align-self: flex-end;
+}

src/components/account.jsx

@@ -0,0 +1,167 @@
+import './account.css';
+
+import { useEffect, useState } from 'preact/hooks';
+
+import shortenNumber from '../utils/shorten-number';
+
+import Avatar from './avatar';
+import NameText from './name-text';
+
+export default ({ account }) => {
+  const [uiState, setUIState] = useState('default');
+  const isString = typeof account === 'string';
+  const [info, setInfo] = useState(isString ? null : account);
+
+  useEffect(() => {
+    if (isString) {
+      setUIState('loading');
+      (async () => {
+        try {
+          const info = await masto.accounts.lookup({
+            acct: account,
+            skip_webfinger: false,
+          });
+          setInfo(info);
+          setUIState('default');
+        } catch (e) {
+          alert(e);
+          setUIState('error');
+        }
+      })();
+    }
+  }, []);
+
+  const {
+    acct,
+    avatar,
+    avatarStatic,
+    bot,
+    createdAt,
+    displayName,
+    emojis,
+    fields,
+    followersCount,
+    followingCount,
+    group,
+    header,
+    headerStatic,
+    id,
+    lastStatusAt,
+    locked,
+    note,
+    statusesCount,
+    url,
+    username,
+  } = info || {};
+
+  const [relationshipUIState, setRelationshipUIState] = useState('default');
+  const [relationship, setRelationship] = useState(null);
+  useEffect(() => {
+    if (info) {
+      setRelationshipUIState('loading');
+      (async () => {
+        try {
+          const relationships = await masto.accounts.fetchRelationships([id]);
+          console.log('fetched relationship', relationships);
+          if (relationships.length) {
+            setRelationship(relationships[0]);
+          }
+          setRelationshipUIState('default');
+        } catch (e) {
+          console.error(e);
+          setRelationshipUIState('error');
+        }
+      })();
+    }
+  }, [info]);
+
+  const {
+    following,
+    showingReblogs,
+    notifying,
+    followedBy,
+    blocking,
+    blockedBy,
+    muting,
+    mutingNotifications,
+    requested,
+    domainBlocking,
+    endorsed,
+  } = relationship || {};
+
+  return (
+    <div
+      id="account-container"
+      class={`sheet ${uiState === 'loading' ? 'skeleton' : ''}`}
+    >
+      {!info || uiState === 'loading' ? (
+        <>
+          <header>
+            <Avatar size="xxl" />
+            ███ ████████████
+          </header>
+          <div class="note">
+            <p>████████ ███████</p>
+            <p>███████████████ ███████████████</p>
+          </div>
+          <p class="stats">
+            <span>██ Posts</span>
+            <span>██ Following</span>
+            <span>██ Followers</span>
+          </p>
+        </>
+      ) : (
+        <>
+          <header>
+            <Avatar url={avatar} size="xxl" />
+            <NameText account={info} showAcct external />
+          </header>
+          <div class="note" dangerouslySetInnerHTML={{ __html: note }} />
+          <p class="stats">
+            <span>
+              <b title={statusesCount}>{shortenNumber(statusesCount)}</b> Posts
+            </span>
+            <span>
+              <b title={followingCount}>{shortenNumber(followingCount)}</b>{' '}
+              Following
+            </span>
+            <span>
+              <b title={followersCount}>{shortenNumber(followersCount)}</b>{' '}
+              Followers
+            </span>
+          </p>
+          <p class="actions">
+            {followedBy ? <span class="tag">Following you</span> : <span />}{' '}
+            {relationshipUIState !== 'loading' && relationship && (
+              <button
+                type="button"
+                class={following ? 'light' : ''}
+                disabled={relationshipUIState === 'loading'}
+                onClick={() => {
+                  setRelationshipUIState('loading');
+                  (async () => {
+                    try {
+                      let newRelationship;
+                      if (following) {
+                        newRelationship = await masto.accounts.unfollow(id);
+                      } else {
+                        newRelationship = await masto.accounts.follow(id);
+                      }
+                      setRelationship(newRelationship);
+                      setRelationshipUIState('default');
+                    } catch (e) {
+                      alert(e);
+                      setRelationshipUIState('error');
+                    }
+                  })();
+                }}
+              >
+                {following ? 'Unfollow' : 'Follow'}
+              </button>
+            )}
+          </p>
+        </>
+      )}
+    </div>
+  );
+};

src/components/avatar.css

@@ -0,0 +1,17 @@
+.avatar {
+  display: inline-block;
+  line-height: 0;
+  aspect-ratio: 1/1;
+  border-radius: 50%;
+  overflow: hidden;
+  background-color: var(--bg-faded-color);
+  outline: 1px solid var(--outline-color);
+  flex-shrink: 0;
+}
+
+.avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  background-color: var(--img-bg-color);
+}

src/components/avatar.jsx

@@ -0,0 +1,26 @@
+import './avatar.css';
+
+const SIZES = {
+  s: 16,
+  m: 20,
+  l: 24,
+  xl: 32,
+  xxl: 50,
+};
+
+export default ({ url, size, alt = '' }) => {
+  size = SIZES[size] || size || SIZES.m;
+  return (
+    <span
+      class="avatar"
+      style={{
+        width: size,
+        height: size,
+      }}
+    >
+      {!!url && (
+        <img src={url} width={size} height={size} alt={alt} loading="lazy" />
+      )}
+    </span>
+  );
+};

src/components/compose.css

@@ -0,0 +1,232 @@
+#compose-container {
+  width: 40em;
+  max-width: 100vw;
+  align-self: stretch;
+  animation: fade-in 0.2s ease-out;
+  max-height: 100vh;
+  overflow: auto;
+}
+
+#compose-container .compose-top {
+  text-align: right;
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  align-items: center;
+  padding: 16px;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+#compose-container .close-button {
+  padding: 6px;
+  color: var(--text-insignificant-color);
+}
+
+#compose-container textarea{
+  width: 100%;
+  max-width: 100%;
+  height: 3em;
+  min-height: 3em;
+  max-height: 10em;
+  resize: vertical;
+}
+@keyframes appear-up {
+  0% {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+#compose-container .reply-to {
+  border-radius: 8px 8px 0 0;
+  max-height: 160px;
+  pointer-events: none;
+  filter: saturate(0.25) opacity(0.75);
+  background-color: var(--bg-blur-color);
+  margin: 0 12px;
+  border: 1px solid var(--outline-color);
+  border-bottom: 0;
+  /* box-shadow: 0 0 12px var(--divider-color); */
+  /* mask-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1) 90%, transparent); */
+  animation: appear-up 1s ease-in-out;
+}
+@keyframes appear-down {
+  0% {
+    transform: translateY(-2em);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+#compose-container form {
+  border-radius: 8px;
+  padding: 4px 12px;
+  background-image: linear-gradient(var(--bg-color) 75%, transparent);
+  /* outline: 1px solid var(--outline-color); */
+  /* box-shadow: 0 0 12px var(--divider-color); */
+  position: relative;
+  z-index: 1;
+}
+#compose-container .reply-to ~ form {
+  animation: appear-down 1s ease-in-out;
+  box-shadow: 0 -12px 12px -12px var(--divider-color);
+}
+
+#compose-container .toolbar {
+  display: flex;
+  justify-content: space-between;
+  padding: 8px 0;
+  gap: 8px;
+}
+#compose-container .toolbar.stretch {
+  justify-content: stretch;
+}
+#compose-container .toolbar .spoiler-text-field {
+  flex: 1;
+  min-width: 0;
+}
+#compose-container .toolbar-button {
+  cursor: pointer;
+  display: inline-block;
+  background-color: var(--bg-faded-color);
+  padding: 0 8px;
+  border-radius: 8px;
+  min-height: 2.5em;
+  line-height: 2.5em;
+  min-width: 2.5em;
+  text-align: center;
+  overflow: hidden;
+  position: relative;
+  white-space: nowrap;
+}
+#compose-container .toolbar-button > * {
+  vertical-align: middle;
+  cursor: inherit;
+}
+#compose-container .toolbar-button:has([disabled]) {
+  cursor: not-allowed;
+}
+#compose-container .toolbar-button:has([disabled]) > * {
+  filter: opacity(0.3);
+}
+#compose-container .toolbar-button:not(.show-field) :is(input[type="checkbox"], select, input[type="file"]) {
+  opacity: 0;
+  position: absolute;
+  left: 0;
+  height: 100%;
+}
+#compose-container .toolbar-button input[type="file"] {
+  /* Move this out of the way, to fix cursor: pointer bug */
+  left: -100vw !important;
+}
+#compose-container .toolbar-button select {
+  background-color: transparent;
+  border: 0;
+  outline: 0;
+  padding: 0 0 0 8px;
+}
+#compose-container .toolbar-button:not(.show-field) select {
+  right: 0;
+  left: auto !important;
+}
+#compose-container .toolbar-button:hover {
+  outline: 2px solid var(--divider-color);
+}
+#compose-container .toolbar-button:active {
+  filter: brightness(0.8);
+}
+
+#compose-container text-expander {
+  position: relative;
+}
+#compose-container .text-expander-menu {
+  color: var(--text-color);
+  background-color: var(--bg-color);
+  position: absolute;
+  margin: 0 0 0 -8px;
+  padding: 0;
+  list-style: none;
+  outline: 1px solid var(--outline-color);
+  /* box-shadow: 0 0 12px var(--outline-color); */
+  border-radius: 8px;
+  overflow: hidden;
+  top: 0 !important;
+  z-index: 100;
+  min-width: 50vw;
+}
+#compose-container .text-expander-menu li {
+  white-space: nowrap;
+  padding: 8px;
+  cursor: pointer;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  font-size: 90%;
+}
+#compose-container .text-expander-menu li img {
+  /* The shortcode emojis */
+  width: 1em;
+  height: 1em;
+}
+#compose-container .text-expander-menu li .avatar {
+  width: 2.2em;
+  height: 2.2em;
+}
+#compose-container .text-expander-menu li:hover {
+  color: var(--bg-color);
+  background-color: var(--link-color);
+}
+
+#compose-container .media-attachments {
+  background-color: var(--bg-faded-color);
+  padding: 8px;
+  border-radius: 8px;
+  margin: 8px 0 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+#compose-container .media-attachment {
+  display: flex;
+  gap: 8px;
+  align-items: stretch;
+}
+#compose-container .media-preview {
+  flex-shrink: 1;
+}
+#compose-container .media-preview > *{
+  min-width: 80px;
+  width: 80px !important;
+  height: 80px;
+  object-fit: contain;
+  background-color: var(--img-bg-color);
+  border-radius: 8px;
+  outline: 1px solid var(--outline-color);
+}
+#compose-container .media-attachment textarea {
+  height: 80px;
+  flex-grow: 1;
+  resize: none;
+}
+#compose-container .media-aside {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
+#compose-container .media-aside .close-button {
+  padding: 4px;
+  align-self: flex-start;
+  color: var(--text-insignificant-color);
+}
+#compose-container .media-aside .uploaded {
+  color: var(--green-color);
+  margin-bottom: 4px;
+}

src/components/compose.jsx

@@ -0,0 +1,527 @@
+import './compose.css';
+
+import '@github/text-expander-element';
+import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
+
+import emojifyText from '../utils/emojify-text';
+import store from '../utils/store';
+import visibilityIconsMap from '../utils/visibility-icons-map';
+
+import Avatar from './avatar';
+import Icon from './icon';
+import Loader from './loader';
+import Status from './status';
+
+/* NOTES:
+  - Max character limit includes BOTH status text and Content Warning text
+*/
+
+export default ({ onClose, replyToStatus }) => {
+  const [uiState, setUIState] = useState('default');
+
+  const accounts = store.local.getJSON('accounts');
+  const currentAccount = store.session.get('currentAccount');
+  const currentAccountInfo = accounts.find(
+    (a) => a.info.id === currentAccount,
+  ).info;
+
+  const configuration = useMemo(() => {
+    const instances = store.local.getJSON('instances');
+    const currentInstance = accounts.find(
+      (a) => a.info.id === currentAccount,
+    ).instanceURL;
+    const config = instances[currentInstance].configuration;
+    console.log(config);
+    return config;
+  }, []);
+
+  const {
+    statuses: { maxCharacters, maxMediaAttachments, charactersReservedPerUrl },
+    mediaAttachments: {
+      supportedMimeTypes,
+      imageSizeLimit,
+      imageMatrixLimit,
+      videoSizeLimit,
+      videoMatrixLimit,
+      videoFrameRateLimit,
+    },
+    polls: { maxOptions, maxCharactersPerOption, maxExpiration, minExpiration },
+  } = configuration;
+
+  const textareaRef = useRef();
+
+  const [visibility, setVisibility] = useState(
+    replyToStatus?.visibility || 'public',
+  );
+  const [sensitive, setSensitive] = useState(replyToStatus?.sensitive || false);
+  const spoilerTextRef = useRef();
+
+  useEffect(() => {
+    let timer = setTimeout(() => {
+      const spoilerText = replyToStatus?.spoilerText;
+      if (spoilerText && spoilerTextRef.current) {
+        spoilerTextRef.current.value = spoilerText;
+        spoilerTextRef.current.focus();
+      } else {
+        textareaRef.current?.focus();
+      }
+    }, 0);
+    return () => clearTimeout(timer);
+  }, []);
+
+  const textExpanderRef = useRef();
+  const textExpanderTextRef = useRef('');
+  useEffect(() => {
+    if (textExpanderRef.current) {
+      const handleChange = (e) => {
+        console.log('text-expander-change', e);
+        const { key, provide, text } = e.detail;
+        textExpanderTextRef.current = text;
+        if (text === '') {
+          provide(
+            Promise.resolve({
+              matched: false,
+            }),
+          );
+          return;
+        }
+        const type = {
+          '@': 'accounts',
+          '#': 'hashtags',
+        }[key];
+        provide(
+          new Promise((resolve) => {
+            const resultsIterator = masto.search({
+              type,
+              q: text,
+              limit: 5,
+            });
+            resultsIterator.next().then(({ value }) => {
+              if (text !== textExpanderTextRef.current) {
+                return;
+              }
+              const results = value[type];
+              console.log('RESULTS', value, results);
+              const menu = document.createElement('ul');
+              menu.role = 'listbox';
+              menu.className = 'text-expander-menu';
+              results.forEach((result) => {
+                const {
+                  name,
+                  avatarStatic,
+                  displayName,
+                  username,
+                  acct,
+                  emojis,
+                } = result;
+                const displayNameWithEmoji = emojifyText(displayName, emojis);
+                const item = document.createElement('li');
+                item.setAttribute('role', 'option');
+                if (acct) {
+                  item.dataset.value = acct;
+                  // Want to use <Avatar /> here, but will need to render to string 😅
+                  item.innerHTML = `
+                    <span class="avatar">
+                      <img src="${avatarStatic}" width="16" height="16" alt="" loading="lazy" />
+                    </span>
+                    <span>
+                    <b>${displayNameWithEmoji || username}</b>
+                    <br>@${acct}
+                    </span>
+                  `;
+                } else {
+                  item.dataset.value = name;
+                  item.innerHTML = `
+                    <span>#<b>${name}</b></span>
+                  `;
+                }
+                menu.appendChild(item);
+              });
+              console.log('MENU', results, menu);
+              resolve({
+                matched: results.length > 0,
+                fragment: menu,
+              });
+            });
+          }),
+        );
+      };
+
+      textExpanderRef.current.addEventListener(
+        'text-expander-change',
+        handleChange,
+      );
+
+      textExpanderRef.current.addEventListener('text-expander-value', (e) => {
+        const { key, item } = e.detail;
+        e.detail.value = key + item.dataset.value;
+      });
+    }
+  }, []);
+
+  const [mediaAttachments, setMediaAttachments] = useState([]);
+
+  const formRef = useRef();
+
+  const beforeUnloadCopy =
+    'You have unsaved changes. Are you sure you want to discard this post?';
+  const canClose = () => {
+    // check for status or mediaAttachments
+    if (textareaRef.current.value || mediaAttachments.length > 0) {
+      const yes = confirm(beforeUnloadCopy);
+      return yes;
+    }
+    return true;
+  };
+
+  useEffect(() => {
+    // Show warning if user tries to close window with unsaved changes
+    const handleBeforeUnload = (e) => {
+      if (!canClose()) {
+        e.preventDefault();
+        e.returnValue = beforeUnloadCopy;
+      }
+    };
+    window.addEventListener('beforeunload', handleBeforeUnload, {
+      capture: true,
+    });
+    return () =>
+      window.removeEventListener('beforeunload', handleBeforeUnload, {
+        capture: true,
+      });
+  }, []);
+
+  return (
+    <div id="compose-container">
+      <div class="compose-top">
+        {currentAccountInfo?.avatarStatic && (
+          <Avatar
+            url={currentAccountInfo.avatarStatic}
+            size="l"
+            alt={currentAccountInfo.username}
+          />
+        )}
+        <button
+          type="button"
+          class="light close-button"
+          onClick={() => {
+            if (canClose()) {
+              onClose();
+            }
+          }}
+        >
+          <Icon icon="x" />
+        </button>
+      </div>
+      {!!replyToStatus && (
+        <div class="reply-to">
+          <Status status={replyToStatus} size="s" />
+        </div>
+      )}
+      <form
+        ref={formRef}
+        style={{
+          pointerEvents: uiState === 'loading' ? 'none' : 'auto',
+          opacity: uiState === 'loading' ? 0.5 : 1,
+        }}
+        onSubmit={(e) => {
+          e.preventDefault();
+
+          const formData = new FormData(e.target);
+          const entries = Object.fromEntries(formData.entries());
+          console.log('ENTRIES', entries);
+          let { status, visibility, sensitive, spoilerText } = entries;
+
+          // Pre-cleanup
+          sensitive = sensitive === 'on'; // checkboxes return "on" if checked
+
+          // Validation
+          if (status.length > maxCharacters) {
+            alert(`Status is too long! Max characters: ${maxCharacters}`);
+            return;
+          }
+          if (sensitive && status.length + spoilerText.length > maxCharacters) {
+            alert(
+              `Status and content warning is too long! Max characters: ${maxCharacters}`,
+            );
+            return;
+          }
+          // TODO: check for URLs and use `charactersReservedPerUrl` to calculate max characters
+
+          // Post-cleanup
+          spoilerText = (sensitive && spoilerText) || undefined;
+          status = status === '' ? undefined : status;
+
+          setUIState('loading');
+          (async () => {
+            try {
+              console.log('MEDIA ATTACHMENTS', mediaAttachments);
+              if (mediaAttachments.length > 0) {
+                // Upload media attachments first
+                const mediaPromises = mediaAttachments.map((attachment) => {
+                  const params = {
+                    file: attachment.file,
+                    description: attachment.description || undefined,
+                  };
+                  return masto.mediaAttachments.create(params).then((res) => {
+                    // Update media attachment with ID
+                    if (res.id) {
+                      attachment.id = res.id;
+                    }
+                    return res;
+                  });
+                });
+                const results = await Promise.allSettled(mediaPromises);
+
+                // If any failed, return
+                if (
+                  results.some(
+                    (result) =>
+                      result.status === 'rejected' || !result.value.id,
+                  )
+                ) {
+                  setUIState('error');
+                  // Alert all the reasons
+                  results.forEach((result) => {
+                    if (result.status === 'rejected') {
+                      alert(result.reason || `Attachment #${i} failed`);
+                    }
+                  });
+                  return;
+                }
+
+                console.log({ results, mediaAttachments });
+              }
+
+              const params = {
+                status,
+                visibility,
+                sensitive,
+                spoilerText,
+                inReplyToId: replyToStatus?.id || undefined,
+                mediaIds: mediaAttachments.map((attachment) => attachment.id),
+              };
+              console.log('POST', params);
+              const newStatus = await masto.statuses.create(params);
+              setUIState('default');
+
+              // Close
+              onClose({
+                newStatus,
+              });
+            } catch (e) {
+              alert(e);
+              setUIState('error');
+            }
+          })();
+        }}
+      >
+        <div class="toolbar stretch">
+          <input
+            ref={spoilerTextRef}
+            type="text"
+            name="spoilerText"
+            placeholder="Spoiler text"
+            disabled={uiState === 'loading'}
+            class="spoiler-text-field"
+            style={{
+              opacity: sensitive ? 1 : 0,
+              pointerEvents: sensitive ? 'auto' : 'none',
+            }}
+          />
+          <label
+            class="toolbar-button"
+            title="Content warning or sensitive media"
+          >
+            <input
+              name="sensitive"
+              type="checkbox"
+              disabled={uiState === 'loading'}
+              onChange={(e) => {
+                const sensitive = e.target.checked;
+                setSensitive(sensitive);
+                if (sensitive) {
+                  spoilerTextRef.current?.focus();
+                } else {
+                  textareaRef.current?.focus();
+                }
+              }}
+            />
+            <Icon icon={`eye-${sensitive ? 'close' : 'open'}`} />
+          </label>{' '}
+          <label
+            class={`toolbar-button ${
+              visibility !== 'public' && !sensitive ? 'show-field' : ''
+            }`}
+            title={`Visibility: ${visibility}`}
+          >
+            <Icon icon={visibilityIconsMap[visibility]} alt={visibility} />
+            <select
+              name="visibility"
+              value={visibility}
+              onChange={(e) => {
+                setVisibility(e.target.value);
+              }}
+              disabled={uiState === 'loading'}
+            >
+              <option value="public">
+                Public <Icon icon="earth" />
+              </option>
+              <option value="unlisted">Unlisted</option>
+              <option value="private">Followers only</option>
+              <option value="direct">Direct</option>
+            </select>
+          </label>{' '}
+        </div>
+        <text-expander ref={textExpanderRef} keys="@ #">
+          <textarea
+            class="large"
+            ref={textareaRef}
+            placeholder={
+              replyToStatus ? 'Post your reply' : 'What are you doing?'
+            }
+            required={mediaAttachments.length === 0}
+            autoCapitalize="sentences"
+            autoComplete="on"
+            autoCorrect="on"
+            spellCheck="true"
+            dir="auto"
+            rows="6"
+            cols="50"
+            name="status"
+            disabled={uiState === 'loading'}
+            onInput={(e) => {
+              const { scrollHeight, offsetHeight, clientHeight, value } =
+                e.target;
+              const offset = offsetHeight - clientHeight;
+              e.target.style.height = value
+                ? scrollHeight + offset + 'px'
+                : null;
+            }}
+            style={{
+              maxHeight: `${maxCharacters / 50}em`,
+            }}
+          ></textarea>
+        </text-expander>
+        {mediaAttachments.length > 0 && (
+          <div class="media-attachments">
+            {mediaAttachments.map((attachment, i) => {
+              const { url, type, id } = attachment;
+              const suffixType = type.split('/')[0];
+              return (
+                <div class="media-attachment" key={i + id}>
+                  <div class="media-preview">
+                    {suffixType === 'image' ? (
+                      <img src={url} alt="" />
+                    ) : suffixType === 'video' ? (
+                      <video src={url} playsinline muted />
+                    ) : suffixType === 'audio' ? (
+                      <audio src={url} controls />
+                    ) : null}
+                  </div>
+                  <textarea
+                    placeholder={
+                      {
+                        image: 'Image description',
+                        video: 'Video description',
+                        audio: 'Audio description',
+                      }[suffixType]
+                    }
+                    autoCapitalize="sentences"
+                    autoComplete="on"
+                    autoCorrect="on"
+                    spellCheck="true"
+                    dir="auto"
+                    disabled={uiState === 'loading'}
+                    maxlength="1500"
+                    // TODO: Un-hard-code this maxlength, ref: https://github.com/mastodon/mastodon/blob/b59fb28e90bc21d6fd1a6bafd13cfbd81ab5be54/app/models/media_attachment.rb#L39
+                    onInput={(e) => {
+                      const { value } = e.target;
+                      // Modify `description` in media attachment
+                      setMediaAttachments((attachments) => {
+                        const newAttachments = [...attachments];
+                        newAttachments[i].description = value;
+                        return newAttachments;
+                      });
+                    }}
+                  ></textarea>
+                  <div class="media-aside">
+                    <button
+                      type="button"
+                      class="plain close-button"
+                      disabled={uiState === 'loading'}
+                      onClick={() => {
+                        setMediaAttachments((attachments) => {
+                          return attachments.filter((_, j) => j !== i);
+                        });
+                      }}
+                    >
+                      <Icon icon="x" />
+                    </button>
+                    {!!id && (
+                      <Icon icon="upload" title="Uploaded" class="uploaded" />
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+        <div class="toolbar">
+          <div>
+            <label class="toolbar-button">
+              <input
+                type="file"
+                accept={supportedMimeTypes.join(',')}
+                multiple={mediaAttachments.length < maxMediaAttachments - 1}
+                disabled={
+                  uiState === 'loading' ||
+                  mediaAttachments.length >= maxMediaAttachments
+                }
+                onChange={(e) => {
+                  const files = e.target.files;
+                  if (!files) return;
+
+                  const mediaFiles = Array.from(files).map((file) => ({
+                    file,
+                    type: file.type,
+                    size: file.size,
+                    url: URL.createObjectURL(file),
+                    id: null, // indicate uploaded state
+                    description: null,
+                  }));
+                  console.log('MEDIA ATTACHMENTS', files, mediaFiles);
+
+                  // Validate max media attachments
+                  if (
+                    mediaAttachments.length + mediaFiles.length >
+                    maxMediaAttachments
+                  ) {
+                    alert(
+                      `You can only attach up to ${maxMediaAttachments} files.`,
+                    );
+                  } else {
+                    setMediaAttachments((attachments) => {
+                      return attachments.concat(mediaFiles);
+                    });
+                  }
+                }}
+              />
+              <Icon icon="attachment" />
+            </label>
+          </div>
+          <div>
+            {uiState === 'loading' && <Loader />}{' '}
+            <button
+              type="submit"
+              class="large"
+              disabled={uiState === 'loading'}
+            >
+              {replyToStatus ? 'Reply' : 'Post'}
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+};

src/components/icon.jsx

@@ -0,0 +1,59 @@
+const SIZES = {
+  s: 12,
+  m: 16,
+  l: 20,
+  xl: 24,
+  xxl: 32,
+};
+
+const ICONS = {
+  x: 'mingcute:close-line',
+  heart: 'mingcute:heart-line',
+  bookmark: 'mingcute:bookmark-line',
+  'check-circle': 'mingcute:check-circle-line',
+  transfer: 'mingcute:transfer-4-line',
+  rocket: 'mingcute:rocket-line',
+  'arrow-left': 'mingcute:arrow-left-line',
+  'arrow-right': 'mingcute:arrow-right-line',
+  'arrow-up': 'mingcute:arrow-up-line',
+  earth: 'mingcute:earth-line',
+  lock: 'mingcute:lock-line',
+  unlock: 'mingcute:unlock-line',
+  'eye-close': 'mingcute:eye-close-line',
+  'eye-open': 'mingcute:eye-2-line',
+  message: 'mingcute:mail-line',
+  comment: 'mingcute:chat-3-line',
+  home: 'mingcute:home-5-line',
+  notification: 'mingcute:notification-line',
+  follow: 'mingcute:user-follow-line',
+  'follow-add': 'mingcute:user-add-line',
+  poll: 'mingcute:chart-bar-line',
+  pencil: 'mingcute:pencil-line',
+  quill: 'mingcute:quill-pen-line',
+  at: 'mingcute:at-line',
+  attachment: 'mingcute:attachment-line',
+  upload: 'mingcute:upload-3-line',
+  gear: 'mingcute:settings-3-line',
+};
+
+export default ({ icon, size = 'm', alt, title, class: className = '' }) => {
+  const iconSize = SIZES[size];
+  const iconName = ICONS[icon];
+  return (
+    <div
+      class={`icon ${className}`}
+      title={title || alt}
+      style={{
+        width: `${iconSize}px`,
+        height: `${iconSize}px`,
+        display: 'inline-block',
+        overflow: 'hidden',
+        lineHeight: 0,
+      }}
+    >
+      <iconify-icon width={iconSize} height={iconSize} icon={iconName}>
+        {alt}
+      </iconify-icon>
+    </div>
+  );
+};

src/components/loader.css

@@ -0,0 +1,43 @@
+.loader-container {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  pointer-events: none;
+  animation: slow-appear .3s ease-in-out 1s both;
+  vertical-align: middle;
+}
+@keyframes slow-appear {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.loader-container.abrupt {
+  animation: none;
+}
+.loader-container.hidden {
+  visibility: hidden;
+}
+
+.loader {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 2.5px solid;
+  border-color: var(--loader-color) var(--loader-color) transparent transparent;
+  animation: loader 1s infinite linear;
+}
+@keyframes loader {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.loader-container.hidden .loader {
+  animation: none;
+}

src/components/loader.jsx

@@ -0,0 +1,11 @@
+import './loader.css';
+
+export default ({ abrupt, hidden }) => (
+  <div
+    class={`loader-container ${abrupt ? 'abrupt' : ''} ${
+      hidden ? 'hidden' : ''
+    }`}
+  >
+    <div class="loader" />
+  </div>
+);

src/components/modal.css

@@ -0,0 +1,17 @@
+#modal-container > div {
+  position: fixed;
+  top: 0;
+  right: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 1000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--backdrop-color);
+  backdrop-filter: blur(24px);
+}
+
+#modal-container > .light {
+  backdrop-filter: saturate(.75);
+}

src/components/modal.jsx

@@ -0,0 +1,20 @@
+import './modal.css';
+
+import { createPortal } from 'preact/compat';
+import { useEffect } from 'preact/hooks';
+
+const $modalContainer = document.getElementById('modal-container');
+
+export default ({ children, onClick, class: className }) => {
+  if (!children) return null;
+
+  const Modal = (
+    <div className={className} onClick={onClick}>
+      {children}
+    </div>
+  );
+
+  return createPortal(Modal, $modalContainer);
+
+  // return createPortal(children, $modalContainer);
+};

src/components/name-text.css

@@ -0,0 +1,19 @@
+.name-text {
+  color: inherit;
+  text-decoration: none;
+  display: inline-block;
+}
+a.name-text:hover b,
+a.name-text.short:hover i {
+  text-decoration: underline;
+  text-decoration-color: var(--text-insignificant-color);
+}
+.name-text i {
+  font-style: normal;
+  opacity: 0.75;
+}
+
+.name-text .avatar {
+  vertical-align: middle;
+  margin-right: 4px;
+}

src/components/name-text.jsx

@@ -0,0 +1,58 @@
+import './name-text.css';
+
+import emojifyText from '../utils/emojify-text';
+import states from '../utils/states';
+
+import Avatar from './avatar';
+
+export default ({ account, showAvatar, showAcct, short, external }) => {
+  const { acct, avatar, avatarStatic, id, url, displayName, username, emojis } =
+    account;
+
+  const displayNameWithEmoji = emojifyText(displayName, emojis);
+
+  return (
+    <a
+      class={`name-text ${short ? 'short' : ''}`}
+      href={url}
+      target="_blank"
+      title={`@${acct}`}
+      onClick={(e) => {
+        if (external) return;
+        e.preventDefault();
+        states.showAccount = account;
+      }}
+    >
+      {showAvatar && (
+        <>
+          <Avatar url={avatar} />{' '}
+        </>
+      )}
+      {displayName && !short ? (
+        <>
+          <b
+            dangerouslySetInnerHTML={{
+              __html: displayNameWithEmoji,
+            }}
+          />
+          {!showAcct && (
+            <>
+              {' '}
+              <i>@{username}</i>
+            </>
+          )}
+        </>
+      ) : short ? (
+        <i>@{username}</i>
+      ) : (
+        <b>@{username}</b>
+      )}
+      {showAcct && (
+        <>
+          <br />
+          <i>@{acct}</i>
+        </>
+      )}
+    </a>
+  );
+};

src/components/status.css

@@ -0,0 +1,438 @@
+/* REBLOG + REPLY-TO */
+
+.status-reblog {
+  background: linear-gradient(to bottom right, var(
+    --reblog-faded-color
+  ), transparent 160px);
+}
+.status-reply-to {
+  background: linear-gradient(to bottom right, var(
+    --reply-to-faded-color
+  ), transparent 160px);
+}
+.status-reblog .status-reply-to {
+  background: linear-gradient(to top left, var(
+    --reply-to-faded-color
+  ), transparent 160px);
+}
+
+/* STATUS PRE META */
+
+.status-pre-meta {
+  line-height: 1.5;
+  padding: 8px 16px 0;
+  opacity: 0.75;
+  font-size: smaller;
+  vertical-align: middle;
+}
+.status-pre-meta .icon {
+  color: var(--reblog-color);
+  vertical-align: middle;
+  margin-right: 4px;
+}
+
+/* STATUS */
+
+.status {
+  display: flex;
+  padding: 16px 16px 20px;
+  line-height: 1.5;
+  align-items: flex-start;
+}
+.status.large {
+  padding-bottom: 8px;
+}
+.status-pre-meta + .status {
+  padding-top: 8px;
+}
+.status.small {
+  font-size: 95%;
+}
+.status.skeleton {
+  color: var(--outline-color);
+}
+
+.status.skeleton > .avatar {
+  background-color: var(--outline-color);
+}
+.indirect .status {
+  padding-left: 57px;
+}
+.indirect .status > .avatar {
+  width: 25px !important;
+  height: 25px !important;
+}
+
+.status:not(.small) .container {
+  padding-left: 16px;
+  flex-grow: 1;
+  min-width: 0;
+}
+
+.status.large > .container > .meta {
+  display: flex;
+  gap: 8px;
+  min-height: 50px;
+  justify-content: space-between;
+}
+.status > .container >  .meta .arrow {
+  color: var(--reply-to-color);
+  vertical-align: middle;
+}
+.status > .container >  .meta .time {
+  color: inherit;
+  text-align: end;
+  opacity: 0.5;
+  text-decoration: none;
+  flex-shrink: 0;
+  margin-left: 4px;
+  white-space: nowrap;
+}
+.status > .container >  .meta a.time:hover {
+  text-decoration: underline;
+}
+.status > .container >  .meta .reply-to {
+  opacity: 0.5;
+  font-size: smaller;
+}
+
+.status.large .content-container {
+  margin-left: calc(-50px - 16px);
+  background-image: linear-gradient(to bottom, transparent, var(--bg-color) 10px, var(--bg-color));
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.status .content-container.has-spoiler .spoiler {
+  margin: 8px 0;
+  font-size: 90%;
+  outline: 1px dashed var(--button-bg-color);
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.status .content-container.has-spoiler .spoiler ~ * {
+  filter: blur(6px) invert(.5);
+  pointer-events: none;
+  transition: filter .5s;
+  user-select: none;
+}
+.status .content-container.has-spoiler .spoiler ~ .content ~ * {
+  opacity: .5;
+}
+.status .content-container.show-spoiler .spoiler {
+  outline-style: dotted;
+}
+.status .content-container.show-spoiler .spoiler ~ * {
+  filter: none;
+  pointer-events: auto;
+  user-select: auto;
+}
+.status .content-container.has-spoiler .spoiler ~ .content ~ * {
+  opacity: 1;
+}
+
+.status .content {
+  margin-top: 8px;
+}
+.status .content p {
+  margin-block: .75em;
+}
+.status .content p:first-child {
+  margin-block-start: 0;
+}
+.status .content p:last-child {
+  margin-block-end: 0;
+}
+.status .content .invisible {
+  display: none;
+}
+.status .content .ellipsis::after {
+  content: '…';
+}
+.status:hover .content a {
+  text-decoration-line: underline;
+}
+.status .content a.mention {
+  text-decoration-line: none;
+}
+.status .content a.mention span {
+  text-decoration-line: underline;
+  text-decoration-color: inherit;
+}
+.status .content a.hashtag {
+  color: var(--link-light-color);
+}
+.status .content a.hashtag span{
+  color: var(--text-color);
+}
+.status .content a.u-url span{
+  color: var(--text-color);
+}
+.status.large .content {
+  font-size: 150%;
+}
+.status.large .poll,
+.status.large .actions {
+  font-size: 125%;
+}
+
+/* MEDIA */
+
+.status .media-container {
+  margin-top: 8px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  flex-direction: row;
+}
+.status .media {
+  flex-grow: 1;
+  flex-basis: calc(50% - 8px);
+  border-radius: 8px;
+  overflow: hidden;
+  max-height: 160px;
+  outline: 1px solid var(--outline-color);
+}
+.status .media:hover {
+  outline-color: var(--outline-hover-color);
+}
+.status .media.block {
+  flex-basis: 100%;
+  max-height: auto;
+}
+.status .media :is(img, video) {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  cursor: pointer;
+}
+@keyframes position-object {
+  0% {
+    object-position: 50% 50%;
+  }
+  25% {
+    object-position: 0% 0%;
+  }
+  75% {
+    object-position: 100% 100%;
+  }
+  100% {
+    object-position: 50% 50%;
+  }
+}
+.status .media img:hover {
+  animation: position-object 5s ease-in-out 1s infinite;
+}
+.status .media video {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+.status .media-video {
+  position: relative;
+}
+.status .media-video:after {
+  /* show play icon */
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 15px 0 15px 26.0px;
+  border-color: transparent transparent transparent var(--text-color);
+  pointer-events: none;
+  filter: drop-shadow(0 0 10px var(--bg-color)) drop-shadow(0 0 10px var(--bg-color)) drop-shadow(0 0 10px var(--bg-color)) drop-shadow(0 0 10px var(--bg-color)) drop-shadow(0 0 10px var(--bg-color));
+  opacity: 0.75;
+}
+.status .media-video:hover:after {
+  opacity: 1;
+}
+.status .media-gif video {
+  object-fit: cover;
+}
+.status .media-audio {
+  outline: 0;
+}
+.status .media-audio audio {
+  width: 100%;
+}
+
+/* CARD */
+
+.card {
+  display: flex;
+  margin-top: 8px;
+  border-radius: 8px;
+  outline: 1px solid var(--outline-color);
+  overflow: hidden;
+  gap: 8px;
+  color: inherit;
+  align-items: center;
+  background: var(--bg-color);
+}
+.card .image {
+  min-width: 120px;
+  max-width: 160px;
+  height: auto;
+  min-height: 120px;
+  max-height: 160px;
+  object-fit: cover;
+  outline: 1px solid var(--outline-color);
+}
+.card:hover .image {
+  animation: position-object 5s ease-in-out 1s infinite;
+}
+.card p {
+  margin: 0;
+}
+.card .meta-container {
+  padding: 4px;
+}
+.card .title {
+  font-weight: normal;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: -webkit-box;
+  display: box;
+  -webkit-box-orient: vertical; 
+  box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+}
+.card .meta {
+  font-size: smaller;
+  opacity: 0.75;
+  margin: 0;
+}
+.card .meta.domain {
+  opacity: 1;
+  color: var(--link-color);
+}
+a.card {
+  text-decoration: none;
+  transition: opacity 0.2s ease-in-out;
+}
+a.card:hover {
+  outline: 1px solid var(--outline-hover-color);
+}
+.card.video {
+  max-width: 320px;
+  max-height: 320px;
+}
+.card.video iframe {
+  width: 100%;
+  height: 100%;
+}
+
+/* POLLS */
+
+.poll-option {
+  margin-top: 8px;
+  padding: 8px;
+  display: flex;
+  gap: 8px;
+  justify-content: space-between;
+  background-image: linear-gradient(to right, var(--link-faded-color), var(--link-faded-color) var(--percentage), transparent var(--percentage), transparent);
+  border-radius: 8px;
+  outline: 1px solid rgba(128, 128, 128, .1);
+  align-items: center;
+}
+.poll-label {
+  width: 100%;
+  display: flex;
+  gap: 8px;
+  cursor: pointer;
+}
+.poll-vote-button {
+  margin-top: 8px;
+}
+.poll-meta {
+  margin: 8px 0;
+}
+
+/* ACTIONS */
+
+.status .actions {
+  margin-left: -8px; /* visual balance */
+  padding-top: 16px;
+  display: flex;
+  gap: 8px;
+  justify-content: space-between;
+}
+.status.large .actions {
+  /* margin-left: -12px; */
+  padding-top: 8px;
+  padding-bottom: 16px;
+  margin-left: calc(-50px - 16px);
+  background-image: linear-gradient(to bottom, var(--bg-color), var(--bg-color) calc(100% - 10px), transparent);
+}
+.status .actions > * {
+  opacity: .5;
+  transition: opacity 0.2s ease-in-out;
+}
+.status:hover .actions > * {
+  opacity: 1;
+}
+.status .actions > button {
+  min-height: 40px;
+  min-width: 40px;
+  padding: 0 8px;
+}
+.status .actions > button.plain {
+  color: var(--text-insignificant-color);
+}
+.status .actions > button.plain:hover {
+  color: var(--link-color);
+  background-color: var(--button-plain-bg-hover-color);
+}
+.status .actions > button.plain.reblog-button:hover {
+  color: var(--reblog-color);
+}
+.status .actions > button.plain.reblog-button.reblogged {
+  color: var(--reblog-color);
+  outline: 1.5px solid var(--reblog-color);
+}
+.status .actions > button.plain.favourite-button:hover {
+  color: var(--favourite-color);
+}
+.status .actions > button.plain.favourite-button.favourited {
+  color: var(--favourite-color);
+  outline: 1.5px solid var(--favourite-color);
+}
+.status .actions > button.plain.bookmark-button.bookmarked {
+  color: var(--link-color);
+  outline: 1.5px solid var(--link-color);
+}
+
+/* ENHANCED CONTENT */
+
+.status .content pre {
+  border-radius: 8px;
+  padding: 8px;
+  margin: 8px 0;
+  overflow: auto;
+  width: 100%;
+  font-size: 90%;
+  outline: 1px solid var(--outline-color);
+  background: linear-gradient(to bottom right, var(
+    --bg-faded-color
+  ), transparent 160px);
+}
+
+/* MISC */
+
+.status-aside {
+  padding: 0 16px 16px 80px;
+  color: var(--text-insignificant-color);
+}
+
+.shortcode-emoji {
+  width: 1.2em;
+  height: 1.2em;
+  vertical-align: middle;
+  object-fit: contain;
+}

src/components/status.jsx

@@ -0,0 +1,835 @@
+import './status.css';
+
+import { getBlurHashAverageColor } from 'fast-blurhash';
+import mem from 'mem';
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { useSnapshot } from 'valtio';
+
+import Modal from '../components/modal';
+import NameText from '../components/name-text';
+import enhanceContent from '../utils/enhance-content';
+import shortenNumber from '../utils/shorten-number';
+import states from '../utils/states';
+import visibilityIconsMap from '../utils/visibility-icons-map';
+
+import Avatar from './avatar';
+import Icon from './icon';
+
+/*
+Media type
+===
+unknown = unsupported or unrecognized file type
+image = Static image
+gifv = Looping, soundless animation
+video = Video clip
+audio = Audio track
+*/
+
+function Media({ media, showOriginal, onClick }) {
+  const { blurhash, description, meta, previewUrl, remoteUrl, url, type } =
+    media;
+  const { original, small, focus } = meta || {};
+
+  const width = showOriginal ? original?.width : small?.width;
+  const height = showOriginal ? original?.height : small?.height;
+  const mediaURL = showOriginal ? url : previewUrl;
+
+  const rgbAverageColor = blurhash ? getBlurHashAverageColor(blurhash) : null;
+
+  const videoRef = useRef();
+
+  let focalBackgroundPosition;
+  if (focus) {
+    // Convert focal point to CSS background position
+    // Formula from jquery-focuspoint
+    // x = -1, y = 1 => 0% 0%
+    // x = 0, y = 0 => 50% 50%
+    // x = 1, y = -1 => 100% 100%
+    const x = ((focus.x + 1) / 2) * 100;
+    const y = ((1 - focus.y) / 2) * 100;
+    focalBackgroundPosition = `${x.toFixed(0)}% ${y.toFixed(0)}%`;
+  }
+
+  if (type === 'image') {
+    return (
+      <div
+        class={`media media-image`}
+        onClick={onClick}
+        style={
+          showOriginal && {
+            backgroundImage: `url(${previewUrl})`,
+            backgroundSize: 'contain',
+            backgroundRepeat: 'no-repeat',
+            backgroundPosition: focalBackgroundPosition || 'center',
+            aspectRatio: `${width}/${height}`,
+            width,
+            height,
+            maxWidth: '100%',
+            maxHeight: '100%',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+          }
+        }
+      >
+        <img
+          src={mediaURL}
+          alt={description}
+          width={width}
+          height={height}
+          style={
+            !showOriginal && {
+              backgroundColor: `rgb(${rgbAverageColor.join(',')})`,
+              backgroundPosition: focalBackgroundPosition || 'center',
+            }
+          }
+        />
+      </div>
+    );
+  } else if (type === 'gifv' || type === 'video') {
+    // 20 seconds, treat as a gif
+    const isGIF = type === 'gifv' && original.duration <= 20;
+    return (
+      <div
+        class={`media media-${isGIF ? 'gif' : 'video'}`}
+        style={{
+          backgroundColor: `rgb(${rgbAverageColor.join(',')})`,
+        }}
+        onClick={onClick}
+        onMouseEnter={() => {
+          if (isGIF) {
+            try {
+              videoRef.current?.play();
+            } catch (e) {}
+          }
+        }}
+        onMouseLeave={() => {
+          if (isGIF) {
+            try {
+              videoRef.current?.pause();
+            } catch (e) {}
+          }
+        }}
+      >
+        {showOriginal ? (
+          <video
+            src={url}
+            poster={previewUrl}
+            width={width}
+            height={height}
+            preload
+            autoplay
+            controls={!isGIF}
+            playsinline
+            loop
+          ></video>
+        ) : isGIF ? (
+          <video
+            ref={videoRef}
+            src={url}
+            poster={previewUrl}
+            width={width}
+            height={height}
+            preload
+            // controls
+            playsinline
+            loop
+            muted
+          />
+        ) : (
+          <img
+            src={previewUrl}
+            alt={description}
+            width={width}
+            height={height}
+          />
+        )}
+      </div>
+    );
+  } else if (type === 'audio') {
+    return (
+      <div class="media media-audio">
+        <audio src={remoteUrl || url} preload="none" controls />
+      </div>
+    );
+  }
+}
+
+function Card({ card }) {
+  const {
+    blurhash,
+    title,
+    description,
+    html,
+    providerName,
+    authorName,
+    width,
+    height,
+    image,
+    url,
+    type,
+    embedUrl,
+  } = card;
+
+  /* type
+  link = Link OEmbed
+  photo = Photo OEmbed
+  video = Video OEmbed
+  rich = iframe OEmbed. Not currently accepted, so won’t show up in practice.
+  */
+
+  const hasText = title || providerName || authorName;
+
+  if (hasText && image) {
+    const domain = new URL(url).hostname;
+    return (
+      <a
+        href={url}
+        target="_blank"
+        rel="nofollow noopener noreferrer"
+        class="card link"
+      >
+        <img
+          class="image"
+          src={image}
+          width={width}
+          height={height}
+          alt=""
+          onError={() => {
+            this.style.display = 'none';
+          }}
+        />
+        <div class="meta-container">
+          <p
+            class="title"
+            dangerouslySetInnerHTML={{
+              __html: title,
+            }}
+          />
+          <p class="meta">{providerName || authorName}</p>
+          <p class="meta domain">{domain}</p>
+        </div>
+      </a>
+    );
+  } else if (type === 'photo') {
+    return (
+      <a
+        href={url}
+        target="_blank"
+        rel="nofollow noopener noreferrer"
+        class="card photo"
+      >
+        <img
+          src={embedUrl}
+          width={width}
+          height={height}
+          alt={title || description}
+          style={{
+            height: 'auto',
+            aspectRatio: `${width}/${height}`,
+          }}
+        />
+      </a>
+    );
+  } else if (type === 'video') {
+    return (
+      <div
+        class="card video"
+        style={{
+          aspectRatio: `${width}/${height}`,
+        }}
+        dangerouslySetInnerHTML={{ __html: html }}
+      />
+    );
+  }
+}
+
+function Poll({ poll }) {
+  const [pollSnapshot, setPollSnapshot] = useState(poll);
+  const [uiState, setUIState] = useState('default');
+
+  const {
+    expired,
+    expiresAt,
+    id,
+    multiple,
+    options,
+    ownVotes,
+    voted,
+    votersCount,
+    votesCount,
+  } = pollSnapshot;
+
+  const expiresAtDate = new Date(expiresAt);
+
+  return (
+    <div class="poll">
+      {voted || expired ? (
+        options.map((option, i) => {
+          const { title, votesCount: optionVotesCount } = option;
+          const percentage = Math.round((optionVotesCount / votesCount) * 100);
+          return (
+            <div
+              class="poll-option"
+              style={{
+                '--percentage': `${percentage}%`,
+              }}
+            >
+              <div class="poll-option-title">
+                {title}
+                {voted && ownVotes.includes(i) && (
+                  <>
+                    {' '}
+                    <Icon icon="check" size="s" />
+                  </>
+                )}
+              </div>
+              <div
+                class="poll-option-votes"
+                title={`${optionVotesCount} vote${
+                  optionVotesCount === 1 ? '' : 's'
+                }`}
+              >
+                {percentage}%
+              </div>
+            </div>
+          );
+        })
+      ) : (
+        <form
+          onSubmit={async (e) => {
+            e.preventDefault();
+            const form = e.target;
+            const formData = new FormData(form);
+            const votes = [];
+            formData.forEach((value, key) => {
+              if (key === 'poll') {
+                votes.push(value);
+              }
+            });
+            console.log(votes);
+            setUIState('loading');
+            const pollResponse = await masto.poll.vote(id, {
+              choices: votes,
+            });
+            console.log(pollResponse);
+            setPollSnapshot(pollResponse);
+            setUIState('default');
+          }}
+          style={{
+            pointerEvents: uiState === 'loading' ? 'none' : 'auto',
+            opacity: uiState === 'loading' ? 0.5 : 1,
+          }}
+        >
+          {options.map((option, i) => {
+            const { title } = option;
+            return (
+              <div class="poll-option">
+                <label class="poll-label">
+                  <input
+                    type={multiple ? 'checkbox' : 'radio'}
+                    name="poll"
+                    value={i}
+                    disabled={uiState === 'loading'}
+                  />
+                  <span class="poll-option-title">{title}</span>
+                </label>
+              </div>
+            );
+          })}
+          <button
+            class="poll-vote-button"
+            type="submit"
+            disabled={uiState === 'loading'}
+          >
+            Vote
+          </button>
+        </form>
+      )}
+      <p class="poll-meta">
+        <span title={votersCount}>{shortenNumber(votersCount)}</span>{' '}
+        {votersCount === 1 ? 'voter' : 'voters'}
+        {votersCount !== votesCount && (
+          <>
+            {' '}
+            &bull; <span title={votesCount}>
+              {shortenNumber(votesCount)}
+            </span>{' '}
+            vote
+            {votesCount === 1 ? '' : 's'}
+          </>
+        )}{' '}
+        &bull; {expired ? 'Ended' : 'Ending'}{' '}
+        <relative-time datetime={expiresAtDate.toISOString()} />
+      </p>
+    </div>
+  );
+}
+
+function fetchAccount(id) {
+  return masto.accounts.fetch(id);
+}
+const memFetchAccount = mem(fetchAccount);
+
+function Status({ statusID, status, withinContext, size = 'm', skeleton }) {
+  if (skeleton) {
+    return (
+      <div class="status skeleton">
+        <Avatar size="xxl" />
+        <div class="container">
+          <div class="meta">███ ████████████</div>
+          <div class="content-container">
+            <div class="content">
+              <p>████ ████████████</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const snapStates = useSnapshot(states);
+  if (!status) {
+    status = snapStates.statuses.get(statusID);
+  }
+  if (!status) {
+    return null;
+  }
+
+  const {
+    account: {
+      acct,
+      avatar,
+      avatarStatic,
+      id: accountId,
+      url,
+      displayName,
+      username,
+      emojis: accountEmojis,
+    },
+    id,
+    repliesCount,
+    reblogged,
+    reblogsCount,
+    favourited,
+    favouritesCount,
+    bookmarked,
+    poll,
+    muted,
+    sensitive,
+    spoilerText,
+    visibility, // public, unlisted, private, direct
+    language,
+    editedAt,
+    filtered,
+    card,
+    createdAt,
+    inReplyToAccountId,
+    content,
+    mentions,
+    mediaAttachments,
+    reblog,
+    uri,
+    emojis,
+  } = status;
+
+  const createdAtDate = new Date(createdAt);
+
+  let inReplyToAccountRef = mentions.find(
+    (mention) => mention.id === inReplyToAccountId,
+  );
+  if (!inReplyToAccountRef && inReplyToAccountId === id) {
+    inReplyToAccountRef = { url, username, displayName };
+  }
+  const [inReplyToAccount, setInReplyToAccount] = useState(inReplyToAccountRef);
+  if (!withinContext && !inReplyToAccount && inReplyToAccountId) {
+    const account = states.accounts.get(inReplyToAccountId);
+    if (account) {
+      setInReplyToAccount(account);
+    } else {
+      memFetchAccount(inReplyToAccountId)
+        .then((account) => {
+          setInReplyToAccount(account);
+          states.accounts.set(account.id, account);
+        })
+        .catch((e) => {});
+    }
+  }
+
+  const [showSpoiler, setShowSpoiler] = useState(false);
+
+  const debugHover = (e) => {
+    if (e.shiftKey) {
+      console.log(status);
+    }
+  };
+
+  const [showMediaModal, setShowMediaModal] = useState(false);
+  const carouselFocusItem = useRef(null);
+  const prevShowMediaModal = useRef(showMediaModal);
+  useEffect(() => {
+    if (showMediaModal !== false) {
+      carouselFocusItem.current?.scrollIntoView({
+        behavior: prevShowMediaModal.current === false ? 'auto' : 'smooth',
+      });
+    }
+    prevShowMediaModal.current = showMediaModal;
+  }, [showMediaModal]);
+
+  if (reblog) {
+    return (
+      <div class="status-reblog" onMouseEnter={debugHover}>
+        <div class="status-pre-meta">
+          <Icon icon="rocket" size="l" />{' '}
+          <NameText account={status.account} showAvatar /> boosted
+        </div>
+        <Status status={reblog} size={size} />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      class={`status ${
+        !withinContext && inReplyToAccount ? 'status-reply-to' : ''
+      } ${
+        {
+          s: 'small',
+          m: 'medium',
+          l: 'large',
+        }[size]
+      }`}
+      onMouseEnter={debugHover}
+    >
+      {size !== 's' && (
+        <a
+          href={url}
+          target="_blank"
+          title={`@${acct}`}
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            states.showAccount = status.account;
+          }}
+        >
+          <Avatar url={avatarStatic} size="xxl" />
+        </a>
+      )}
+      <div class="container">
+        <div class="meta">
+          <span>
+            <NameText
+              account={status.account}
+              showAvatar={size === 's'}
+              showAcct={size === 'l'}
+            />
+            {inReplyToAccount && !withinContext && size !== 's' && (
+              <>
+                {' '}
+                <span class="ib">
+                  <Icon icon="arrow-right" class="arrow" />{' '}
+                  <NameText account={inReplyToAccount} short />
+                </span>
+              </>
+            )}
+          </span>{' '}
+          <a href={uri} target="_blank" class="time">
+            <Icon
+              icon={visibilityIconsMap[visibility]}
+              alt={visibility}
+              size="s"
+            />{' '}
+            <relative-time
+              datetime={createdAtDate.toISOString()}
+              format="micro"
+              threshold="P1D"
+              prefix=""
+            >
+              {createdAtDate.toLocaleString()}
+            </relative-time>
+          </a>
+        </div>
+        <div
+          class={`content-container ${
+            sensitive || spoilerText ? 'has-spoiler' : ''
+          } ${showSpoiler ? 'show-spoiler' : ''}`}
+        >
+          {!!spoilerText && sensitive && (
+            <>
+              <div class="content">
+                <p>{spoilerText}</p>
+              </div>
+              <button
+                class="light spoiler"
+                type="button"
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  setShowSpoiler(!showSpoiler);
+                }}
+              >
+                <Icon icon={showSpoiler ? 'eye-open' : 'eye-close'} />{' '}
+                {showSpoiler ? 'Show less' : 'Show more'}
+              </button>
+            </>
+          )}
+          <div
+            class="content"
+            onClick={(e) => {
+              let { target } = e;
+              if (target.parentNode.tagName.toLowerCase() === 'a') {
+                target = target.parentNode;
+              }
+              console.log('click', target, e);
+              if (
+                target.tagName.toLowerCase() === 'a' &&
+                target.classList.contains('mention')
+              ) {
+                e.preventDefault();
+                e.stopPropagation();
+                const username = target.querySelector('span');
+                const mention = mentions.find(
+                  (mention) => mention.username === username?.innerText.trim(),
+                );
+                if (mention) {
+                  states.showAccount = mention.acct;
+                } else {
+                  const href = target.getAttribute('href');
+                  states.showAccount = href;
+                }
+              }
+            }}
+            dangerouslySetInnerHTML={{
+              __html: enhanceContent(content, {
+                emojis,
+              }),
+            }}
+          />
+          {!!poll && <Poll poll={poll} />}
+          {!spoilerText && sensitive && !!mediaAttachments.length && (
+            <button
+              class="plain spoiler"
+              type="button"
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                setShowSpoiler(!showSpoiler);
+              }}
+            >
+              <Icon icon={showSpoiler ? 'eye-open' : 'eye-close'} /> Sensitive
+              content
+            </button>
+          )}
+          {!!mediaAttachments.length && size !== 's' && (
+            <div class="media-container">
+              {mediaAttachments.map((media, i) => (
+                <Media
+                  media={media}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setShowMediaModal(i);
+                  }}
+                />
+              ))}
+            </div>
+          )}
+          {!!card &&
+            (size === 'l' ||
+              (size === 'm' && !poll && !mediaAttachments.length)) && (
+              <Card card={card} />
+            )}
+        </div>
+        {size === 'l' && (
+          <div class="actions">
+            <button
+              type="button"
+              title="Comment"
+              class="plain reply-button"
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                states.showCompose = {
+                  replyToStatus: status,
+                };
+              }}
+            >
+              <Icon icon="comment" size="l" alt="Reply" />
+              {!!repliesCount && (
+                <>
+                  {' '}
+                  <small>{shortenNumber(repliesCount)}</small>
+                </>
+              )}
+            </button>
+            {/* TODO: if visibility = private, only can reblog own statuses */}
+            {visibility !== 'direct' && (
+              <button
+                type="button"
+                title={reblogged ? 'Unboost' : 'Boost'}
+                class={`plain reblog-button ${reblogged ? 'reblogged' : ''}`}
+                onClick={async (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  const yes = confirm(
+                    reblogged ? 'Unboost this status?' : 'Boost this status?',
+                  );
+                  if (!yes) return;
+                  if (reblogged) {
+                    const newStatus = await masto.statuses.unreblog(id);
+                    states.statuses.set(newStatus.id, newStatus);
+                  } else {
+                    const newStatus = await masto.statuses.reblog(id);
+                    states.statuses.set(newStatus.id, newStatus);
+                    states.statuses.set(newStatus.reblog.id, newStatus.reblog);
+                  }
+                }}
+              >
+                <Icon
+                  icon="rocket"
+                  size="l"
+                  alt={reblogged ? 'Boosted' : 'Boost'}
+                />
+                {!!reblogsCount && (
+                  <>
+                    {' '}
+                    <small>{shortenNumber(reblogsCount)}</small>
+                  </>
+                )}
+              </button>
+            )}
+            <button
+              type="button"
+              title={favourited ? 'Unfavourite' : 'Favourite'}
+              class={`plain favourite-button ${favourited ? 'favourited' : ''}`}
+              onClick={async (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                try {
+                  if (favourited) {
+                    const newStatus = await masto.statuses.unfavourite(id);
+                    states.statuses.set(newStatus.id, newStatus);
+                  } else {
+                    const newStatus = await masto.statuses.favourite(id);
+                    states.statuses.set(newStatus.id, newStatus);
+                  }
+                } catch (e) {}
+              }}
+            >
+              <Icon
+                icon="heart"
+                size="l"
+                alt={favourited ? 'Favourited' : 'Favourite'}
+              />
+              {!!favouritesCount && (
+                <>
+                  {' '}
+                  <small>{shortenNumber(favouritesCount)}</small>
+                </>
+              )}
+            </button>
+            <button
+              type="button"
+              title={bookmarked ? 'Unbookmark' : 'Bookmark'}
+              class={`plain bookmark-button ${bookmarked ? 'bookmarked' : ''}`}
+              onClick={async (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                try {
+                  if (bookmarked) {
+                    const newStatus = await masto.statuses.unbookmark(id);
+                    states.statuses.set(newStatus.id, newStatus);
+                  } else {
+                    const newStatus = await masto.statuses.bookmark(id);
+                    states.statuses.set(newStatus.id, newStatus);
+                  }
+                } catch (e) {}
+              }}
+            >
+              <Icon
+                icon="bookmark"
+                size="l"
+                alt={bookmarked ? 'Bookmarked' : 'Bookmark'}
+              />
+            </button>
+          </div>
+        )}
+      </div>
+      {showMediaModal !== false && (
+        <Modal>
+          <div
+            class="carousel"
+            onClick={() => {
+              setShowMediaModal(false);
+            }}
+            tabindex="0"
+          >
+            {mediaAttachments?.map((media, i) => (
+              <div
+                class="carousel-item"
+                tabindex="0"
+                key={media.id}
+                ref={i === showMediaModal ? carouselFocusItem : null}
+              >
+                <Media media={media} showOriginal />
+              </div>
+            ))}
+          </div>
+          {mediaAttachments?.length > 1 && (
+            <div class="carousel-controls">
+              <button
+                type="button"
+                class="carousel-button plain"
+                hidden={showMediaModal === 0}
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  setShowMediaModal(
+                    (showMediaModal - 1 + mediaAttachments.length) %
+                      mediaAttachments.length,
+                  );
+                }}
+              >
+                <Icon icon="arrow-left" />
+              </button>
+              <span class="carousel-dots">
+                {mediaAttachments?.map((media, i) => (
+                  <button
+                    key={media.id}
+                    type="button"
+                    class={`plain carousel-dot ${
+                      i === showMediaModal ? 'active' : ''
+                    }`}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      setShowMediaModal(i);
+                    }}
+                  >
+                    &bull;
+                  </button>
+                ))}
+              </span>
+              <button
+                type="button"
+                class="carousel-button plain"
+                hidden={showMediaModal === mediaAttachments.length - 1}
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  setShowMediaModal(
+                    (showMediaModal + 1) % mediaAttachments.length,
+                  );
+                }}
+              >
+                <Icon icon="arrow-right" />
+              </button>
+            </div>
+          )}
+        </Modal>
+      )}
+    </div>
+  );
+}
+
+export default Status;

src/data/instances.json

@@ -0,0 +1,202 @@
+[
+	"mastodon.social",
+	"mastodon.world",
+	"mas.to",
+	"pawoo.net",
+	"mastodon.online",
+	"mstdn.jp",
+	"universeodon.com",
+	"mastodon.lol",
+	"mastodonapp.uk",
+	"infosec.exchange",
+	"mastodon.uno",
+	"techhub.social",
+	"mastodon.sdf.org",
+	"fosstodon.org",
+	"troet.cafe",
+	"masto.ai",
+	"mstdn.party",
+	"c.im",
+	"hachyderm.io",
+	"m.cmx.im",
+	"mstdn.ca",
+	"sfba.social",
+	"kolektiva.social",
+	"mastodon.scot",
+	"ohai.social",
+	"fedibird.com",
+	"piaille.fr",
+	"home.social",
+	"mindly.social",
+	"mastodon.nl",
+	"toot.community",
+	"aus.social",
+	"thu.closed.social",
+	"mastodon.gamedev.place",
+	"nerdculture.de",
+	"mastodon.cloud",
+	"mastodon.ie",
+	"det.social",
+	"mastodon.au",
+	"nrw.social",
+	"mastodon.art",
+	"chaos.social",
+	"norden.social",
+	"ioc.exchange",
+	"alive.bar",
+	"tkz.one",
+	"sueden.social",
+	"mastodon.nu",
+	"mastodon.top",
+	"mastouille.fr",
+	"mastodontech.de",
+	"o3o.ca",
+	"social.tchncs.de",
+	"noagendasocial.com",
+	"newsie.social",
+	"masto.es",
+	"planet.moe",
+	"social.vivaldi.net",
+	"ravenation.club",
+	"wxw.moe",
+	"mathstodon.xyz",
+	"social.cologne",
+	"mastodon.nz",
+	"qoto.org",
+	"hessen.social",
+	"mastodon.com.tr",
+	"ruhr.social",
+	"muenchen.social",
+	"mamot.fr",
+	"twit.social",
+	"dice.camp",
+	"meow.social",
+	"www.masto.pt",
+	"social.anoxinon.de",
+	"www.sociale.network",
+	"tech.lgbt",
+	"econtwitter.net",
+	"masthead.social",
+	"glasgow.social",
+	"ieji.de",
+	"toot.wales",
+	"ecoevo.social",
+	"ro-mastodon.puyo.jp",
+	"noc.social",
+	"indieweb.social",
+	"zirk.us",
+	"twingyeo.kr",
+	"social.linux.pizza",
+	"mastodont.cat",
+	"social.dev-wiki.de",
+	"mastodonczech.cz",
+	"climatejustice.social",
+	"eldritch.cafe",
+	"g0v.social",
+	"socel.net",
+	"dju.social",
+	"mastodontti.fi",
+	"101010.pl",
+	"framapiaf.org",
+	"wien.rocks",
+	"botsin.space",
+	"mastodon.bida.im",
+	"bildung.social",
+	"pouet.chapril.org",
+	"urbanists.social",
+	"wandering.shop",
+	"masto.pt",
+	"union.place",
+	"metalhead.club",
+	"ruby.social",
+	"hiveway.net",
+	"h4.io",
+	"genomic.social",
+	"mastodon-belgium.be",
+	"mastodon.xyz",
+	"octodon.social",
+	"pol.social",
+	"tooot.im",
+	"berlin.social",
+	"sciences.social",
+	"mstdn.guru",
+	"qdon.space",
+	"mastodon.radio",
+	"lile.cl",
+	"masto.nu",
+	"witches.live",
+	"mastodonners.nl",
+	"muenster.im",
+	"lor.sh",
+	"phpc.social",
+	"pewtix.com",
+	"social.librem.one",
+	"rollenspiel.social",
+	"peoplemaking.games",
+	"kinky.business",
+	"mastodon.fun",
+	"me.ns.ci",
+	"mastodon.eus",
+	"dresden.network",
+	"hostux.social",
+	"scholar.social",
+	"freiburg.social",
+	"todon.eu",
+	"writing.exchange",
+	"toot.aquilenet.fr",
+	"digitalcourage.social",
+	"rheinneckar.social",
+	"discuss.systems",
+	"defcon.social",
+	"snabelen.no",
+	"mastodon.se",
+	"rubber.social",
+	"fulda.social",
+	"vis.social",
+	"toot.funami.tech",
+	"mast.dragon-fly.club",
+	"disabled.social",
+	"medibubble.org",
+	"mastodon.technology",
+	"vmst.io",
+	"mstdn.io",
+	"equestria.social",
+	"vocalodon.net",
+	"mastodon.ml",
+	"libretooth.gr",
+	"tooting.ch",
+	"dizl.de",
+	"best-friends.chat",
+	"romancelandia.club",
+	"queer.party",
+	"tilde.zone",
+	"xarxa.cloud",
+	"abdl.link",
+	"bitcoinhackers.org",
+	"photog.social",
+	"macaw.social",
+	"yiff.life",
+	"sociale.network",
+	"ursal.zone",
+	"eupolicy.social",
+	"gruene.social",
+	"artisan.chat",
+	"graz.social",
+	"social.coop",
+	"mstdn.id",
+	"social.sciences.re",
+	"ludosphere.fr",
+	"social.politicaconciencia.org",
+	"oslo.town",
+	"scicomm.xyz",
+	"floss.social",
+	"creators.social",
+	"tabletop.social",
+	"bonn.social",
+	"openbiblio.social",
+	"mastodon.la",
+	"halifaxsocial.ca",
+	"freeradical.zone",
+	"kfem.cat",
+	"federated.press"
+]

src/index.css

@@ -0,0 +1,191 @@
+:root {
+  --blue-color: royalblue;
+  --purple-color: blueviolet;
+  --green-color: green;
+  --orange-color: orange;
+  --red-color: orangered;
+  --bg-color: #fff;
+  --bg-faded-color: #f0f2f5;
+  --bg-blur-color: #fff9;
+  --bg-faded-blur-color: #f0f2f599;
+  --text-color: #1c1e21;
+  --text-insignificant-color: #1c1e2199;
+  --link-color: var(--blue-color);
+  --link-light-color: #4169e199;
+  --link-faded-color: #4169e122;
+  --link-bg-hover-color: #f0f2f599;
+  --button-bg-color: var(--blue-color);
+  --button-bg-blur-color: #4169e1aa;
+  --button-text-color: white;
+  --button-plain-bg-hover-color: rgba(128, 128, 128, 0.1);
+  --reblog-color: var(--purple-color);
+  --reblog-faded-color: #892be220;
+  --reply-to-color: var(--orange-color);
+  --favourite-color: var(--red-color);
+  --reply-to-faded-color: #ffa6001a;
+  --outline-color: rgba(128, 128, 128, .2);
+  --outline-hover-color: rgba(128, 128, 128, .7);
+  --divider-color: rgba(0, 0, 0, 0.1);
+  --backdrop-color: rgba(255, 255, 255, 0.5);
+  --img-bg-color: rgba(128, 128, 128, 0.2);
+  --loader-color: #1c1e2199;
+  --comment-line-color: #e5e5e5;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --blue-color: CornflowerBlue;
+    --purple-color: mediumpurple;
+    --green-color: MediumSeaGreen;
+    --bg-color: #242526;
+    --bg-faded-color: #18191a;
+    --bg-blur-color: #0009;
+    --bg-faded-blur-color: #18191a99;
+    --text-color: #f0f2f5;
+    --text-insignificant-color: #f0f2f599;
+    --link-bg-hover-color: #34353799;
+    --divider-color: rgba(255, 255, 255, 0.1);
+    --bg-blur-color: #24252699;
+    --backdrop-color: rgba(0, 0, 0, 0.5);
+    --comment-line-color: #565656;
+  }
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
+  font-size: 15px;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+a {
+  color: var(--link-color);
+  text-decoration-color: var(--link-faded-color);
+  text-decoration-thickness: 2px;
+  text-underline-offset: 2px;
+  overflow-wrap: anywhere;
+}
+a:hover {
+  text-decoration-color: var(--link-color);
+}
+
+img {
+  max-width: 100%;
+}
+
+hr {
+  height: 2px;
+  border: 0;
+  padding: 0;
+  margin: 16px 0;
+  background-image: linear-gradient(to right, transparent, var(--divider-color), transparent);
+}
+
+button, input, select, textarea {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  max-width: 100%;
+}
+
+button, .button {
+  display: inline-block;
+  margin: 2px;
+  padding: 8px 12px;
+  border-radius: 2.5em;
+  border: 0;
+  background-color: var(--button-bg-color);
+  color: var(--button-text-color);
+  cursor: pointer;
+  line-height: 1;
+  vertical-align: middle;
+  text-decoration: none;
+}
+button > * {
+  vertical-align: middle;
+}
+:is(button, .button):not([disabled]):hover {
+  filter: brightness(1.2);
+}
+:is(button, .button):active {
+  filter: brightness(0.8);
+}
+:is(button, .button)[disabled] {
+  cursor: auto;
+  opacity: 0.5;
+}
+
+:is(button, .button).plain {
+  background-color: transparent;
+  color: var(--link-color);
+  backdrop-filter: blur(12px);
+}
+:is(button, .button).light {
+  background-color: var(--bg-faded-color);
+  color: var(--text-color);
+  outline: 1px solid var(--outline-color);
+}
+
+:is(button, .button).block {
+  display: block;
+  width: 100%;
+  padding: 12px;
+}
+
+input[type="text"], textarea, select {
+  color: var(--text-color);
+  background-color: var(--bg-color);
+  border: 2px solid var(--divider-color);
+  padding: 8px;
+  border-radius: 4px;
+}
+input[type="text"]:focus, textarea:focus, select:focus {
+  border-color: var(--outline-color);
+}
+input[type="text"].large, textarea.large, select.large, button.large {
+  font-size: 125%;
+  padding: 12px;
+}
+
+button.small {
+  font-size: 90%;
+  padding: 4px 8px;
+}
+
+select.plain {
+  border: 0;
+  background-color: transparent;
+}
+
+@media (prefers-color-scheme: dark) {
+  img, video {
+    filter: brightness(0.7);
+    transition: filter 0.3s ease-out;
+  }
+  img:hover, video:hover {
+    filter: brightness(1);
+  }
+}
+
+/* UTILS */
+
+.ib {
+  display: inline-block;
+}
+
+/* KEYFRAMES */
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

src/main.jsx

@@ -0,0 +1,9 @@
+import { render } from 'preact';
+import { App } from './app';
+
+import 'iconify-icon';
+import '@github/time-elements';
+
+import './index.css';
+
+render(<App />, document.getElementById('app'));

src/pages/home.jsx

@@ -0,0 +1,217 @@
+import { Link } from 'preact-router/match';
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { InView } from 'react-intersection-observer';
+import { useSnapshot } from 'valtio';
+
+import Icon from '../components/icon';
+import Loader from '../components/loader';
+import Status from '../components/status';
+import states from '../utils/states';
+import store from '../utils/store';
+
+const LIMIT = 20;
+
+export default ({ hidden }) => {
+  const snapStates = useSnapshot(states);
+  const [uiState, setUIState] = useState('default');
+  const [showMore, setShowMore] = useState(false);
+
+  const statusIterator = useRef(
+    masto.timelines.getHomeIterable({
+      limit: LIMIT,
+    }),
+  ).current;
+  async function fetchStatuses(firstLoad) {
+    const allStatuses = await statusIterator.next(
+      firstLoad
+        ? {
+            limit: LIMIT,
+          }
+        : undefined,
+    );
+    if (allStatuses.value <= 0) {
+      return { done: true };
+    }
+    const homeValues = allStatuses.value.map((status) => {
+      states.statuses.set(status.id, status);
+      if (status.reblog) {
+        states.statuses.set(status.reblog.id, status.reblog);
+      }
+      return {
+        id: status.id,
+        reblog: status.reblog?.id,
+        reply: !!status.inReplyToAccountId,
+      };
+    });
+    if (firstLoad) {
+      states.home = homeValues;
+    } else {
+      states.home.push(...homeValues);
+    }
+    states.homeLastFetchTime = Date.now();
+    console.log(allStatuses);
+    return allStatuses;
+  }
+
+  const loadStatuses = (firstLoad) => {
+    setUIState('loading');
+    (async () => {
+      try {
+        const { done } = await fetchStatuses(firstLoad);
+        setShowMore(!done);
+        setUIState('default');
+      } catch (e) {
+        console.warn(e);
+        setUIState('error');
+      }
+    })();
+  };
+
+  useEffect(() => {
+    loadStatuses(true);
+  }, []);
+
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      if (document.hidden) {
+        const timestamp = Date.now();
+        store.session.set('lastHidden', timestamp);
+        console.log('hidden', timestamp);
+      } else {
+        const timestamp = Date.now();
+        const lastHidden = store.session.get('lastHidden');
+        const diff = timestamp - lastHidden;
+        const diffMins = Math.round(diff / 1000 / 60);
+        console.log('visible', { timestamp, diff, diffMins });
+        if (diffMins > 1) {
+          setTimeout(() => {
+            loadStatuses(true);
+            states.homeNew = [];
+          }, 100);
+        }
+      }
+    };
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    };
+  }, []);
+
+  const scrollableRef = useRef();
+
+  return (
+    <div class="deck-container" hidden={hidden} ref={scrollableRef}>
+      <div class="timeline-deck deck">
+        <header
+          onClick={() => {
+            scrollableRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
+          }}
+        >
+          <div class="header-side">
+            <button
+              type="button"
+              class="plain"
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                states.showSettings = true;
+              }}
+            >
+              <Icon icon="gear" size="l" alt="Settings" />
+            </button>
+          </div>
+          <h1>Home</h1>
+          <div class="header-side">
+            <Loader hidden={uiState !== 'loading'} />{' '}
+            <a
+              href="#/notifications"
+              class={`button plain ${
+                snapStates.notificationsNew.length > 0 ? 'has-badge' : ''
+              }`}
+            >
+              <Icon icon="notification" size="l" alt="Notifications" />
+            </a>
+          </div>
+          {snapStates.homeNew.length > 1 && (
+            <button
+              class="updates-button"
+              type="button"
+              onClick={() => {
+                const uniqueHomeNew = snapStates.homeNew.filter(
+                  (status) => !states.home.some((s) => s.id === status.id),
+                );
+                states.home.unshift(...uniqueHomeNew);
+                loadStatuses(true);
+                states.homeNew = [];
+
+                scrollableRef.current?.scrollTo({
+                  top: 0,
+                  behavior: 'smooth',
+                });
+              }}
+            >
+              <Icon icon="arrow-up" /> New posts
+            </button>
+          )}
+        </header>
+        {snapStates.home.length ? (
+          <>
+            <ul class="timeline">
+              {snapStates.home.map(({ id: statusID, reblog }) => {
+                const actualStatusID = reblog || statusID;
+                return (
+                  <li key={statusID}>
+                    <Link
+                      activeClassName="active"
+                      class="status-link"
+                      href={`#/s/${actualStatusID}`}
+                    >
+                      <Status statusID={statusID} />
+                    </Link>
+                  </li>
+                );
+              })}
+              {showMore && (
+                <InView
+                  onChange={(inView) => {
+                    if (inView) loadStatuses();
+                  }}
+                >
+                  <li
+                    style={{
+                      height: '25vh',
+                    }}
+                  >
+                    <Status skeleton />
+                  </li>
+                  <li
+                    style={{
+                      height: '25vh',
+                    }}
+                  >
+                    <Status skeleton />
+                  </li>
+                </InView>
+              )}
+            </ul>
+          </>
+        ) : (
+          <>
+            {uiState === 'loading' && (
+              <ul class="timeline">
+                {Array.from({ length: 5 }).map((_, i) => (
+                  <li key={i}>
+                    <Status skeleton />
+                  </li>
+                ))}
+              </ul>
+            )}
+            {uiState === 'error' && (
+              <p class="ui-state">Error loading statuses</p>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+};

src/pages/login.jsx

@@ -0,0 +1,99 @@
+import { useEffect, useRef, useState } from 'preact/hooks';
+
+import Loader from '../components/loader';
+import instancesList from '../data/instances.json';
+import { getAuthorizationURL, registerApplication } from '../utils/auth';
+import store from '../utils/store';
+import useTitle from '../utils/useTitle';
+
+export default () => {
+  useTitle('Log in');
+  const instanceURLRef = useRef();
+  const cachedInstanceURL = store.local.get('instanceURL');
+  const [uiState, setUIState] = useState('default');
+
+  useEffect(() => {
+    if (cachedInstanceURL) {
+      instanceURLRef.current.value = cachedInstanceURL;
+    }
+  }, []);
+
+  const onSubmit = (e) => {
+    e.preventDefault();
+    const { elements } = e.target;
+    let instanceURL = elements.instanceURL.value;
+    // Remove protocol from instance URL
+    instanceURL = instanceURL.replace(/(^\w+:|^)\/\//, '');
+    store.local.set('instanceURL', instanceURL);
+
+    (async () => {
+      setUIState('loading');
+      try {
+        const { client_id, client_secret } = await registerApplication({
+          instanceURL,
+        });
+
+        if (client_id && client_secret) {
+          store.session.set('clientID', client_id);
+          store.session.set('clientSecret', client_secret);
+
+          location.href = await getAuthorizationURL({
+            instanceURL,
+            client_id,
+          });
+        } else {
+          alert('Failed to register application');
+        }
+        setUIState('default');
+      } catch (e) {
+        console.error(e);
+        setUIState('error');
+      }
+    })();
+  };
+
+  return (
+    <main class="box">
+      <form onSubmit={onSubmit}>
+        <h1>Log in</h1>
+        <label>
+          <p>Instance</p>
+          <input
+            required
+            type="text"
+            class="large"
+            id="instanceURL"
+            ref={instanceURLRef}
+            disabled={uiState === 'loading'}
+            list="instances-list"
+          />
+          <datalist id="instances-list">
+            {instancesList.map((instance) => (
+              <option value={instance} />
+            ))}
+          </datalist>
+        </label>
+        {uiState === 'error' && (
+          <p class="error">
+            Failed to log in. Please try again or another instance.
+          </p>
+        )}
+        <p>
+          <button class="large" disabled={uiState === 'loading'}>
+            Log in
+          </button>{' '}
+          <Loader hidden={uiState !== 'loading'} />
+        </p>
+        <hr />
+        <p>
+          <a href="https://joinmastodon.org/servers" target="_blank">
+            Don't have an account? Create one!
+          </a>
+        </p>
+        <p>
+          <a href="/#">Go home</a>
+        </p>
+      </form>
+    </main>
+  );
+};

src/pages/notifications.css

@@ -0,0 +1,49 @@
+.notification {
+  display: flex;
+  padding: 16px !important;
+  gap: 16px;
+}
+.notification.skeleton {
+  color: var(--outline-color);
+}
+
+.notification-type {
+  width: 24px;
+  flex-shrink: 0;
+  opacity: 0.75;
+  color: var(--text-insignificant-color);
+}
+.notification-type.favourite {
+  color: var(--favourite-color);
+}
+.notification-type.reblog {
+  color: var(--reblog-color);
+}
+.notification-type.poll,
+.notification-type.mention {
+  color: var(--link-color);
+}
+
+.notification .status-link {
+  border-radius: 8px 8px 0 0;
+  border: 1px solid var(--divider-color);
+  max-height: 160px;
+  overflow: hidden;
+  /* fade out mask gradient bottom */
+  mask-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1) 50%, transparent);
+  filter: saturate(0.25);
+}
+.notification .status-link:hover {
+  background-color: var(--bg-blur-color);
+  filter: saturate(1);
+}
+.notification .status-link > * {
+  pointer-events: none;
+}
+
+.notification-content {
+  flex-grow: 1;
+}
+.notification-content p:first-child {
+  margin-top: 0;
+}

src/pages/notifications.jsx

@@ -0,0 +1,292 @@
+import './notifications.css';
+
+import { Link } from 'preact-router/match';
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { useSnapshot } from 'valtio';
+
+import Icon from '../components/icon';
+import Loader from '../components/loader';
+import NameText from '../components/name-text';
+import Status from '../components/status';
+import states from '../utils/states';
+import useTitle from '../utils/useTitle';
+
+/*
+Notification types
+==================
+mention = Someone mentioned you in their status
+status = Someone you enabled notifications for has posted a status
+reblog = Someone boosted one of your statuses
+follow = Someone followed you
+follow_request = Someone requested to follow you
+favourite = Someone favourited one of your statuses
+poll = A poll you have voted in or created has ended
+update = A status you interacted with has been edited
+admin.sign_up = Someone signed up (optionally sent to admins)
+admin.report = A new report has been filed
+*/
+
+const contentText = {
+  mention: 'mentioned you in their status.',
+  status: 'posted a status.',
+  reblog: 'boosted your status.',
+  follow: 'followed you.',
+  follow_request: 'requested to follow you.',
+  favourite: 'favourited your status.',
+  poll: 'A poll you have voted in or created has ended.',
+  update: 'A status you interacted with has been edited.',
+};
+
+const LIMIT = 20;
+
+function Notification({ notification }) {
+  const { id, type, status, account } = notification;
+
+  // status = Attached when type of the notification is favourite, reblog, status, mention, poll, or update
+  const actualStatusID = status?.reblog?.id || status?.id;
+
+  return (
+    <>
+      <div
+        class={`notification-type ${type}`}
+        title={new Date(notification.createdAt).toLocaleString()}
+      >
+        <Icon
+          icon={
+            {
+              mention: 'comment',
+              status: 'notification',
+              reblog: 'reblog',
+              follow: 'follow',
+              follow_request: 'follow-add',
+              favourite: 'heart',
+              poll: 'poll',
+              update: 'pencil',
+            }[type] || 'notification'
+          }
+          size="xl"
+          alt={type}
+        />
+      </div>
+      <div class="notification-content">
+        <p>
+          {!/poll|update/i.test(type) && (
+            <>
+              <NameText account={account} showAvatar />{' '}
+            </>
+          )}
+          {contentText[type]}
+        </p>
+        {status && (
+          <Link class="status-link" href={`#/s/${actualStatusID}`}>
+            <Status status={status} size="s" />
+          </Link>
+        )}
+      </div>
+    </>
+  );
+}
+
+function NotificationsList({ notifications, emptyCopy }) {
+  if (!notifications.length && emptyCopy) {
+    return <p class="timeline-empty">{emptyCopy}</p>;
+  }
+  return (
+    <ul class="timeline flat">
+      {notifications.map((notification) => {
+        const { id, type } = notification;
+        return (
+          <li key={id} class={`notification ${type}`}>
+            <Notification notification={notification} />
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+export default () => {
+  useTitle('Notifications');
+  const snapStates = useSnapshot(states);
+  const [uiState, setUIState] = useState('default');
+  const [showMore, setShowMore] = useState(false);
+
+  const notificationsIterator = useRef(
+    masto.notifications.getIterator({
+      limit: LIMIT,
+    }),
+  ).current;
+  async function fetchNotifications(firstLoad) {
+    const allNotifications = await notificationsIterator.next(
+      firstLoad
+        ? {
+            limit: LIMIT,
+          }
+        : undefined,
+    );
+    if (allNotifications.value <= 0) {
+      return { done: true };
+    }
+    const notificationsValues = allNotifications.value.map((notification) => {
+      if (notification.status) {
+        states.statuses.set(notification.status.id, notification.status);
+      }
+      return notification;
+    });
+    if (firstLoad) {
+      states.notifications = notificationsValues;
+    } else {
+      states.notifications.push(...notificationsValues);
+    }
+    states.notificationsLastFetchTime = Date.now();
+    console.log(allNotifications);
+    return allNotifications;
+  }
+
+  const loadNotifications = (firstLoad) => {
+    setUIState('loading');
+    (async () => {
+      try {
+        const { done } = await fetchNotifications(firstLoad);
+        setShowMore(!done);
+        setUIState('default');
+      } catch (e) {
+        setUIState('error');
+      }
+    })();
+  };
+
+  useEffect(() => {
+    loadNotifications(true);
+  }, []);
+
+  const scrollableRef = useRef();
+
+  // Group notifications by today, yesterday, and older
+  const groupedNotifications = snapStates.notifications.reduce(
+    (acc, notification) => {
+      const date = new Date(notification.created_at);
+      const today = new Date();
+      const yesterday = new Date();
+      yesterday.setDate(today.getDate() - 1);
+      if (
+        date.getDate() === today.getDate() &&
+        date.getMonth() === today.getMonth() &&
+        date.getFullYear() === today.getFullYear()
+      ) {
+        acc.today.push(notification);
+      } else if (
+        date.getDate() === yesterday.getDate() &&
+        date.getMonth() === yesterday.getMonth() &&
+        date.getFullYear() === yesterday.getFullYear()
+      ) {
+        acc.yesterday.push(notification);
+      } else {
+        acc.older.push(notification);
+      }
+      return acc;
+    },
+    { today: [], yesterday: [], older: [] },
+  );
+
+  console.log(groupedNotifications);
+
+  return (
+    <div class="deck-container" ref={scrollableRef}>
+      <div class="timeline-deck deck">
+        <header>
+          <div class="header-side">
+            <a href="#" class="button plain">
+              <Icon icon="home" size="l" />
+            </a>
+          </div>
+          <h1>Notifications</h1>
+          <div class="header-side">
+            <Loader hidden={uiState !== 'loading'} />
+          </div>
+          {snapStates.notificationsNew.length > 0 && (
+            <button
+              class="updates-button"
+              type="button"
+              onClick={() => {
+                const uniqueNotificationsNew =
+                  snapStates.notificationsNew.filter(
+                    (notification) =>
+                      !snapStates.notifications.some(
+                        (n) => n.id === notification.id,
+                      ),
+                  );
+                states.notifications.unshift(...uniqueNotificationsNew);
+                loadNotifications(true);
+                states.notificationsNew = [];
+
+                scrollableRef.current?.scrollTo({
+                  top: 0,
+                  behavior: 'smooth',
+                });
+              }}
+            >
+              <Icon icon="arrow-up" /> New notifications
+            </button>
+          )}
+        </header>
+        {snapStates.notifications.length ? (
+          <>
+            <h2 class="timeline-header">Today</h2>
+            <NotificationsList
+              notifications={groupedNotifications.today}
+              emptyCopy="You're all caught up."
+            />
+            {groupedNotifications.yesterday.length > 0 && (
+              <>
+                <h2 class="timeline-header">Yesterday</h2>
+                <NotificationsList
+                  notifications={groupedNotifications.yesterday}
+                />
+              </>
+            )}
+            {groupedNotifications.older.length > 0 && (
+              <>
+                <h2 class="timeline-header">Older</h2>
+                <NotificationsList notifications={groupedNotifications.older} />
+              </>
+            )}
+            {showMore && (
+              <button
+                type="button"
+                class="plain block"
+                disabled={uiState === 'loading'}
+                onClick={() => loadNotifications()}
+              >
+                {uiState === 'loading' ? <Loader /> : <>Show more&hellip;</>}
+              </button>
+            )}
+          </>
+        ) : (
+          <>
+            {uiState === 'loading' && (
+              <>
+                <h2 class="timeline-header">Today</h2>
+                <ul class="timeline flat">
+                  {Array.from({ length: 5 }).map((_, i) => (
+                    <li class="notification skeleton">
+                      <div class="notification-type">
+                        <Icon icon="notification" size="xl" />
+                      </div>
+                      <div class="notification-content">
+                        <p>███████████ ████</p>
+                      </div>
+                    </li>
+                  ))}
+                </ul>
+              </>
+            )}
+            {uiState === 'error' && (
+              <p class="ui-state">Error loading notifications</p>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+};

src/pages/settings.css

@@ -0,0 +1,95 @@
+#settings-container {
+  text-align: left;
+  padding-bottom: 3em;
+  animation: fade-in 0.2s ease-out;
+  max-height: 100vh;
+  overflow: auto;
+}
+
+#settings-container .close-button {
+  float: right;
+}
+
+#settings-container h2 {
+  margin: 3em 0 1em;
+  font-size: .9em;
+  text-transform: uppercase;
+  color: var(--text-insignificant-color);
+}
+
+#settings-container ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+#settings-container ul li {
+  padding: 8px 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+}
+#settings-container ul li .current {
+  margin-right: 8px;
+  color: var(--green-color);
+  opacity: 0.1;
+}
+#settings-container ul li .current.is-current {
+  opacity: 1;
+}
+#settings-container ul li .current.is-current + .avatar {
+  outline-color: var(--green-color);
+  outline-width: 2px;
+}
+#settings-container ul li > div {
+  flex-grow: 1;
+  max-width: 100%;
+}
+#settings-container ul li > div.actions {
+  flex-basis: min-content;
+  margin-top: 8px;
+}
+#settings-container ul li > div:last-child {
+  text-align: right;
+}
+#settings-container div,
+#settings-container div > *{
+  vertical-align: middle;
+}
+#settings-container .avatar {
+  margin-right: 8px;
+}
+
+#settings-container .radio-group {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 999px;
+  border: 1px solid var(--button-bg-color);
+  overflow: hidden;
+  padding: 1px;
+}
+#settings-container .radio-group input[type="radio"] {
+  opacity: 0;
+  position: absolute;
+  pointer-events: none;
+}
+#settings-container .radio-group label {
+  display: inline-block;
+  padding: 6px 12px;
+  cursor: pointer;
+}
+#settings-container .radio-group label input:checked + span {
+  color: var(--link-color);
+  font-weight: bold;
+}
+#settings-container .radio-group label:hover {
+  color: var(--button-bg-color);
+}
+#settings-container .radio-group label:has(input:checked) {
+  border-radius: 999px;
+  color: var(--button-text-color);
+  background-color: var(--button-bg-color);
+}
+#settings-container .radio-group label:has(input:checked) input:checked + span {
+  color: inherit;
+}

src/pages/settings.jsx

@@ -0,0 +1,186 @@
+import './settings.css';
+
+import { useRef, useState } from 'preact/hooks';
+
+import Avatar from '../components/avatar';
+import Icon from '../components/icon';
+import NameText from '../components/name-text';
+import store from '../utils/store';
+
+/*
+  Settings component that shows these settings:
+  - Accounts list for switching
+  - Dark/light/auto theme switch (done with adding/removing 'is-light' or 'is-dark' class on the body)
+*/
+
+export default ({ onClose }) => {
+  // Accounts
+  const accounts = store.local.getJSON('accounts');
+  const currentAccount = store.session.get('currentAccount');
+  const currentTheme = store.local.get('theme') || 'auto';
+  const themeFormRef = useRef();
+  const moreThanOneAccount = accounts.length > 1;
+  const [currentDefault, setCurrentDefault] = useState(0);
+
+  return (
+    <div id="settings-container" class="box">
+      <div>
+        <button type="button" class="close-button plain" onClick={onClose}>
+          <Icon icon="x" alt="Close" />
+        </button>
+      </div>
+      <div>
+        <h2>Accounts</h2>
+        <ul class="accounts-list">
+          {accounts.map((account, i) => {
+            const isCurrent = account.info.id === currentAccount;
+            const isDefault = i === (currentDefault || 0);
+            return (
+              <li>
+                <div>
+                  {moreThanOneAccount && (
+                    <span class={`current ${isCurrent ? 'is-current' : ''}`}>
+                      <Icon icon="check-circle" alt="Current" />
+                    </span>
+                  )}
+                  <Avatar url={account.info.avatarStatic} size="xxl" />
+                  <NameText account={account.info} showAcct />
+                </div>
+                <div class="actions">
+                  {isDefault && moreThanOneAccount && (
+                    <>
+                      <span class="tag">Default</span>{' '}
+                    </>
+                  )}
+                  {!isCurrent && (
+                    <button
+                      type="button"
+                      class="light"
+                      onClick={() => {
+                        store.session.set('currentAccount', account.info.id);
+                        location.reload();
+                      }}
+                    >
+                      <Icon icon="transfer" /> Switch
+                    </button>
+                  )}
+                  <div>
+                    {!isDefault && moreThanOneAccount && (
+                      <button
+                        type="button"
+                        class="plain small"
+                        onClick={() => {
+                          // Move account to the top of the list
+                          accounts.splice(i, 1);
+                          accounts.unshift(account);
+                          store.local.setJSON('accounts', accounts);
+                          setCurrentDefault(i);
+                        }}
+                      >
+                        Set as default
+                      </button>
+                    )}
+                    {isCurrent && (
+                      <>
+                        {' '}
+                        <button
+                          type="button"
+                          class="plain small"
+                          onClick={() => {
+                            const yes = confirm(
+                              'Are you sure you want to log out?',
+                            );
+                            if (!yes) return;
+                            accounts.splice(i, 1);
+                            store.local.setJSON('accounts', accounts);
+                            location.reload();
+                          }}
+                        >
+                          Log out
+                        </button>
+                      </>
+                    )}
+                  </div>
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+        {moreThanOneAccount && (
+          <p>
+            <small>
+              Note: <i>Default</i> account will always be used for first load.
+              Switched accounts will persist during the session.
+            </small>
+          </p>
+        )}
+        <p style={{ textAlign: 'end' }}>
+          <a href="/#/login" class="button" onClick={onClose}>
+            Add new account
+          </a>
+        </p>
+      </div>
+      <div>
+        <h2>Theme</h2>
+        <form
+          ref={themeFormRef}
+          onInput={(e) => {
+            console.log(e);
+            e.preventDefault();
+            const formData = new FormData(themeFormRef.current);
+            const theme = formData.get('theme');
+            const html = document.documentElement;
+
+            if (theme === 'auto') {
+              html.classList.remove('is-light', 'is-dark');
+            } else {
+              html.classList.toggle('is-light', theme === 'light');
+              html.classList.toggle('is-dark', theme === 'dark');
+            }
+            document
+              .querySelector('meta[name="color-scheme"]')
+              .setAttribute('content', theme);
+
+            if (theme === 'auto') {
+              store.local.del('theme');
+            } else {
+              store.local.set('theme', theme);
+            }
+          }}
+        >
+          <div class="radio-group">
+            <label>
+              <input
+                type="radio"
+                name="theme"
+                value="light"
+                defaultChecked={currentTheme === 'light'}
+              />
+              <span>Light</span>
+            </label>
+            <label>
+              <input
+                type="radio"
+                name="theme"
+                value="dark"
+                defaultChecked={currentTheme === 'dark'}
+              />
+              <span>Dark</span>
+            </label>
+            <label>
+              <input
+                type="radio"
+                name="theme"
+                value="auto"
+                defaultChecked={
+                  currentTheme !== 'light' && currentTheme !== 'dark'
+                }
+              />
+              <span>Auto</span>
+            </label>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};

src/pages/status.jsx

@@ -0,0 +1,210 @@
+import { Link } from 'preact-router/match';
+import {
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'preact/hooks';
+import { useSnapshot } from 'valtio';
+
+import Icon from '../components/icon';
+import Loader from '../components/loader';
+import Status from '../components/status';
+import states from '../utils/states';
+import useTitle from '../utils/useTitle';
+
+export default ({ id }) => {
+  const snapStates = useSnapshot(states);
+  const [statuses, setStatuses] = useState([{ id }]);
+  const [uiState, setUIState] = useState('default');
+  const heroStatusRef = useRef();
+
+  useEffect(async () => {
+    // If id is completely new, reset the whole list
+    if (!statuses.find((s) => s.id === id)) {
+      setStatuses([{ id }]);
+    }
+
+    setUIState('loading');
+
+    if (!states.statuses.has(id)) {
+      try {
+        const status = await masto.statuses.fetch(id);
+        states.statuses.set(id, status);
+      } catch (e) {
+        setUIState('error');
+        alert('Error fetching status');
+        return;
+      }
+    }
+
+    try {
+      const context = await masto.statuses.fetchContext(id);
+      const { ancestors, descendants } = context;
+
+      ancestors.forEach((status) => {
+        states.statuses.set(status.id, status);
+      });
+      const directReplies = [];
+      descendants.forEach((status) => {
+        states.statuses.set(status.id, status);
+        if (status.inReplyToId === id) {
+          directReplies.push(status);
+        }
+      });
+      console.log({ ancestors, descendants, directReplies });
+
+      if (directReplies.length) {
+        const heroStatus = states.statuses.get(id);
+        const heroStatusRepliesCount = heroStatus.repliesCount;
+        if (heroStatusRepliesCount != directReplies.length) {
+          // If replies count doesn't match, refetch the status
+          const status = await masto.statuses.fetch(id);
+          states.statuses.set(id, status);
+        }
+      }
+
+      const allStatuses = [
+        ...ancestors.map((s) => ({ id: s.id, ancestor: true })),
+        { id },
+        ...descendants.map((s) => ({
+          id: s.id,
+          descendant: true,
+          directReply:
+            s.inReplyToId === id || s.inReplyToAccountId === s.account.id,
+          // I can assume if the reply is to the same account, it's a direct reply. In other words, it's a thread?!?
+        })),
+      ];
+      setStatuses(allStatuses);
+    } catch (e) {
+      setUIState('error');
+    }
+
+    setUIState('default');
+  }, [id, snapStates.reloadStatusPage]);
+
+  useLayoutEffect(() => {
+    if (heroStatusRef.current && statuses.length > 1) {
+      heroStatusRef.current.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start',
+      });
+    }
+  }, [id]);
+
+  useLayoutEffect(() => {
+    heroStatusRef.current?.scrollIntoView({
+      // behavior: 'smooth',
+      block: 'start',
+    });
+  }, [statuses]);
+
+  const heroStatus = states.statuses.get(id);
+  const heroDisplayName = useMemo(() => {
+    // Remove shortcodes from display name
+    if (!heroStatus) return '';
+    const { account } = heroStatus;
+    const div = document.createElement('div');
+    div.innerHTML = account.displayName;
+    return div.innerText.trim();
+  }, [heroStatus]);
+  const heroContentText = useMemo(() => {
+    if (!heroStatus) return '';
+    const { content } = heroStatus;
+    const div = document.createElement('div');
+    div.innerHTML = content;
+    let text = div.innerText.trim();
+    if (text.length > 64) {
+      text = text.slice(0, 64) + '…';
+    }
+    return text;
+  }, [heroStatus]);
+  useTitle(
+    heroDisplayName && heroContentText
+      ? `${heroDisplayName}: ${heroContentText}`
+      : 'Status',
+  );
+
+  const comments = statuses.filter((s) => s.descendant);
+  const replies = comments.filter((s) => s.directReply);
+
+  const prevRoute = states.history.findLast((h) => {
+    return h === '/' || /notifications/i.test(h);
+  });
+  const closeLink = `#${prevRoute || '/'}`;
+
+  return (
+    <div class="deck-backdrop">
+      <Link href={closeLink}></Link>
+      <div
+        class={`status-deck deck contained ${
+          statuses.length > 1 ? 'padded-bottom' : ''
+        }`}
+      >
+        <header>
+          <h1>Status</h1>
+          <div class="header-side">
+            <Loader hidden={uiState !== 'loading'} />
+            <Link class="button plain deck-close" href={closeLink}>
+              <Icon icon="x" size="xl" />
+            </Link>
+          </div>
+        </header>
+        <ul class="timeline flat contextual">
+          {statuses.map((status) => {
+            const { id: statusID, ancestor, descendant, directReply } = status;
+            const isHero = statusID === id;
+            return (
+              <li
+                key={statusID}
+                ref={isHero ? heroStatusRef : null}
+                class={`${isHero ? '' : 'insignificant'} ${
+                  ancestor ? 'ancestor' : ''
+                } ${descendant ? 'descendant' : ''} ${
+                  descendant && !directReply ? 'indirect' : ''
+                }`}
+              >
+                {isHero ? (
+                  <Status statusID={statusID} withinContext size="l" />
+                ) : (
+                  <Link
+                    class="
+                status-link
+              "
+                    href={`#/s/${statusID}`}
+                  >
+                    <Status statusID={statusID} withinContext />
+                  </Link>
+                )}
+                {uiState === 'loading' &&
+                  isHero &&
+                  !!heroStatus?.repliesCount && (
+                    <div class="status-loading">
+                      <Loader />{' '}
+                      <span>
+                        {!!replies.length &&
+                          replies.length !== comments.length && (
+                            <>
+                              {replies.length} repl
+                              {replies.length > 1 ? 'ies' : 'y'}
+                            </>
+                          )}
+                        {!!comments.length && (
+                          <>
+                            {' '}
+                            &bull; {comments.length} comment
+                            {comments.length > 1 ? 's' : ''}
+                          </>
+                        )}
+                      </span>
+                    </div>
+                  )}
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    </div>
+  );
+};

src/pages/welcome.css

@@ -0,0 +1,40 @@
+#welcome {
+  overflow: auto;
+  max-height: 90vh;
+}
+
+#welcome img {
+  margin-top: 16px;
+  height: auto;
+}
+@keyframes dance {
+  0% {
+    transform: rotate(0deg);
+  }
+  20% {
+    transform: rotate(5deg);
+  }
+  40% {
+    transform: rotate(-5deg);
+  }
+  60% {
+    transform: rotate(5deg);
+  }
+  80% {
+    transform: rotate(-5deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}
+#welcome:hover img {
+  animation: dance 2s infinite 15s linear;
+}
+
+#welcome .warning {
+  font-weight: bold;
+  padding: 16px;
+  background: lemonchiffon;
+  color: chocolate;
+  border-radius: 16px;
+}

src/pages/welcome.jsx

@@ -0,0 +1,35 @@
+import './welcome.css';
+
+import useTitle from '../utils/useTitle';
+
+export default () => {
+  useTitle();
+  return (
+    <main id="welcome" class="box">
+      <img
+        src="../design/logo-2.svg"
+        alt=""
+        width="140"
+        height="140"
+        style={{
+          aspectRatio: '1/1',
+        }}
+      />
+      <h1>Welcome</h1>
+      <p>Phanpy is a minimalistic opinionated Mastodon web client.</p>
+      <p class="warning">
+        🚧 This is an early ALPHA project. Many features are missing, many bugs
+        are present. Please report issues as detailed as possible. Thanks 🙏
+      </p>
+      <p>
+        <big>
+          <b>
+            <a href="#/login" class="button">
+              Log in
+            </a>
+          </b>
+        </big>
+      </p>
+    </main>
+  );
+};

src/utils/auth.js

@@ -0,0 +1,62 @@
+const { VITE_CLIENT_NAME: CLIENT_NAME, VITE_WEBSITE: WEBSITE } = import.meta
+  .env;
+
+export async function registerApplication({ instanceURL }) {
+  const registrationParams = new URLSearchParams({
+    client_name: CLIENT_NAME,
+    redirect_uris: location.origin,
+    scopes: 'read write follow',
+    website: WEBSITE,
+  });
+  const registrationResponse = await fetch(
+    `https://${instanceURL}/api/v1/apps`,
+    {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+      },
+      body: registrationParams.toString(),
+    },
+  );
+  const registrationJSON = await registrationResponse.json();
+  console.log({ registrationJSON });
+  return registrationJSON;
+}
+
+export async function getAuthorizationURL({ instanceURL, client_id }) {
+  const authorizationParams = new URLSearchParams({
+    client_id,
+    scope: 'read write follow',
+    redirect_uri: location.origin,
+    // redirect_uri: 'urn:ietf:wg:oauth:2.0:oob',
+    response_type: 'code',
+  });
+  const authorizationURL = `https://${instanceURL}/oauth/authorize?${authorizationParams.toString()}`;
+  return authorizationURL;
+}
+
+export async function getAccessToken({
+  instanceURL,
+  client_id,
+  client_secret,
+  code,
+}) {
+  const params = new URLSearchParams({
+    client_id,
+    client_secret,
+    redirect_uri: location.origin,
+    grant_type: 'authorization_code',
+    code,
+    scope: 'read write follow',
+  });
+  const tokenResponse = await fetch(`https://${instanceURL}/oauth/token`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+    },
+    body: params.toString(),
+  });
+  const tokenJSON = await tokenResponse.json();
+  console.log({ tokenJSON });
+  return tokenJSON;
+}

src/utils/emojify-text.js

@@ -0,0 +1,16 @@
+function emojifyText(text, emojis = []) {
+  if (!emojis.length) return text;
+  // Replace shortcodes in text with emoji
+  // emojis = [{ shortcode: 'smile', url: 'https://example.com/emoji.png' }]
+  emojis.forEach((emoji) => {
+    const { shortcode, staticUrl, url } = emoji;
+    text = text.replace(
+      new RegExp(`:${shortcode}:`, 'g'),
+      `<img class="shortcode-emoji emoji" src="${url}" alt=":${shortcode}:" width="12" height="12" loading="lazy" />`,
+    );
+  });
+  // console.log(text, emojis);
+  return text;
+}
+
+export default emojifyText;

src/utils/enhance-content.js

@@ -0,0 +1,34 @@
+import emojifyText from './emojify-text';
+
+export default (content, { emojis }) => {
+  // 1. Emojis
+  let enhancedContent = content;
+
+  if (emojis) {
+    enhancedContent = emojifyText(enhancedContent, emojis);
+  }
+
+  // 2. Code blocks
+  const dom = document.createElement('div');
+  dom.innerHTML = enhancedContent;
+  // Check for <p> with markdown-like content "```"
+  const blocks = Array.from(dom.querySelectorAll('p')).filter((p) =>
+    /^```[^]+```$/g.test(p.innerText.trim()),
+  );
+  blocks.forEach((block) => {
+    const pre = document.createElement('pre');
+    const code = document.createElement('code');
+    const breaks = block.querySelectorAll('br');
+    Array.from(breaks).forEach((br) => br.replaceWith('\n'));
+    code.innerHTML = block.innerText
+      .trim()
+      // .replace(/^```/g, '')
+      // .replace(/```$/g, '')
+      .replace(/^[\n\r]+/, '');
+    pre.appendChild(code);
+    block.replaceWith(pre);
+  });
+  enhancedContent = dom.innerHTML;
+
+  return enhancedContent;
+};

src/utils/shorten-number.jsx

@@ -0,0 +1,5 @@
+export default function shortenNumber(num) {
+  return Intl.NumberFormat('en-US', {
+    notation: 'compact',
+  }).format(num);
+}

src/utils/states.js

@@ -0,0 +1,19 @@
+import { proxy } from 'valtio';
+import { proxyMap } from 'valtio/utils';
+
+export default proxy({
+  history: [],
+  statuses: proxyMap([]),
+  home: [],
+  homeNew: [],
+  homeLastFetchTime: null,
+  notifications: [],
+  notificationsNew: [],
+  notificationsLastFetchTime: null,
+  accounts: new WeakMap(),
+  reloadStatusPage: 0,
+  // Modals
+  showCompose: false,
+  showSettings: false,
+  showAccount: false,
+});

src/utils/store.js

@@ -0,0 +1,87 @@
+const local = {
+  get: (key) => {
+    try {
+      return localStorage.getItem(key);
+    } catch (e) {
+      console.warn(e);
+      return null;
+    }
+  },
+  getJSON: (key) => {
+    try {
+      return JSON.parse(local.get(key));
+    } catch (e) {
+      console.warn(e);
+      return null;
+    }
+  },
+  set: (key, value) => {
+    try {
+      return localStorage.setItem(key, value);
+    } catch (e) {
+      console.warn(e);
+      return null;
+    }
+  },
+  setJSON: (key, value) => {
+    try {
+      return local.set(key, JSON.stringify(value));
+    } catch (e) {
+      console.warn(e);
+      return null;
+    }
+  },
+  del: (key) => {
+    try {
+      return localStorage.removeItem(key);
+    } catch (e) {
+      console.warn(e);
+      return null;
+    }
+  },
+};
+
+const session = {
+  get: (key) => {
+    try {
+      return sessionStorage.getItem(key);
+    } catch (e) {
+      console.warn(e);
+      return null;
+    }
+  },
+  getJSON: (key) => {
+    try {
+      return JSON.parse(session.get(key));
+    } catch (e) {
+      console.warn(e);
+      return null;
+    }
+  },
+  set: (key, value) => {
+    try {
+      return sessionStorage.setItem(key, value);
+    } catch (e) {
+      console.warn(e);
+      return null;
+    }
+  },
+  setJSON: (key, value) => {
+    try {
+      return session.set(key, JSON.stringify(value));
+    } catch (e) {
+      console.warn(e);
+      return null;
+    }
+  },
+  del: (key) => {
+    try {
+      return sessionStorage.removeItem(key);
+    } catch (e) {
+      console.warn(e);
+      return null;
+    }
+  },
+};
+
+export default { local, session };

src/utils/useTitle.js

@@ -0,0 +1,9 @@
+import { useEffect } from 'preact/hooks';
+
+const { VITE_CLIENT_NAME: CLIENT_NAME } = import.meta.env;
+
+export default (title) => {
+  useEffect(() => {
+    document.title = title ? `${title} - ${CLIENT_NAME}` : CLIENT_NAME;
+  }, [title]);
+};

src/utils/visibility-icons-map.js

@@ -0,0 +1,6 @@
+export default {
+  public: 'earth',
+  unlisted: 'unlock',
+  private: 'lock',
+  direct: 'at',
+};

vite.config.js

@@ -0,0 +1,7 @@
+import preact from '@preact/preset-vite';
+import { defineConfig } from 'vite';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [preact()],
+});