design(stacked-notes): action buttons in vertical bar

Clicking the badge while it shows outdated now pulls the latest version
from GitHub when there are no unsaved edits, or opens the conflict
modal when edits are in flight. Previously the click only re-ran the
same freshness check, so the badge appeared dead.

.agents/.claude-plugin/plugin.json

@@ -1,8 +0,0 @@
-{
-  "name": "remanso-skills",
-  "version": "1.0.0",
-  "description": "Local skills for the Remanso project",
-  "author": {
-    "name": "julien"
-  }
-}

.agents/skills/migrate-oxlint/SKILL.md

@@ -1,196 +0,0 @@
----
-name: migrate-oxlint
-description: Guide for migrating a project from ESLint to Oxlint. Use when asked to migrate, convert, or switch a JavaScript/TypeScript project's linter from ESLint to Oxlint.
----
-
-This skill guides you through migrating a JavaScript/TypeScript project from ESLint to [Oxlint](https://oxc.rs/docs/guide/usage/linter/).
-
-## Overview
-
-Oxlint is a high-performance linter that implements many popular ESLint rules natively in Rust. It can be used alongside ESLint or as a full replacement.
-
-An official migration tool is available, and will be used by this skill: [`@oxlint/migrate`](https://github.com/oxc-project/oxlint-migrate)
-
-## Step 1: Run Automated Migration
-
-Run the migration tool in the project root:
-
-```bash
-npx @oxlint/migrate
-```
-
-This reads your ESLint flat config (`eslint.config.js` for example) and generates a `.oxlintrc.json` file from it. It will find your ESLint config file automatically in most cases.
-
-See options below for more info.
-
-### Key Options
-
-| Option                      | Description                                                                                                                     |
-| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
-| `--type-aware`              | Include type-aware rules from `@typescript-eslint` (will require the `oxlint-tsgolint` package to be installed after migrating) |
-| `--with-nursery`            | Include experimental rules still under development, may not be fully stable or consistent with ESLint equivalents               |
-| `--js-plugins [bool]`       | Enable/disable ESLint plugin migration via `jsPlugins` (default: enabled)                                                       |
-| `--details`                 | List rules that could not be migrated                                                                                           |
-| `--replace-eslint-comments` | Convert all `// eslint-disable` comments to `// oxlint-disable`                                                                 |
-| `--output-file <file>`      | Specify a different output path (default: `.oxlintrc.json`)                                                                     |
-
-If your ESLint config is not at the default location, pass the path explicitly:
-
-```bash
-npx @oxlint/migrate ./path/to/eslint.config.js
-```
-
-## Step 2: Review Generated Config
-
-After migration, review the generated `.oxlintrc.json`.
-
-### Plugin Mapping
-
-The migration tool automatically maps ESLint plugins to oxlint's built-in equivalents. The following table is for reference when reviewing the generated config:
-
-| ESLint Plugin                                       | Oxlint Plugin Name |
-| --------------------------------------------------- | ------------------ |
-| `@typescript-eslint/eslint-plugin`                  | `typescript`       |
-| `eslint-plugin-react` / `eslint-plugin-react-hooks` | `react`            |
-| `eslint-plugin-import` / `eslint-plugin-import-x`   | `import`           |
-| `eslint-plugin-unicorn`                             | `unicorn`          |
-| `eslint-plugin-jsx-a11y`                            | `jsx-a11y`         |
-| `eslint-plugin-react-perf`                          | `react-perf`       |
-| `eslint-plugin-promise`                             | `promise`          |
-| `eslint-plugin-jest`                                | `jest`             |
-| `@vitest/eslint-plugin`                             | `vitest`           |
-| `eslint-plugin-jsdoc`                               | `jsdoc`            |
-| `eslint-plugin-next`                                | `nextjs`           |
-| `eslint-plugin-node`                                | `node`             |
-| `eslint-plugin-vue`                                 | `vue`              |
-
-Default plugins (enabled when `plugins` field is omitted): `unicorn`, `typescript`, `oxc`.
-Setting the `plugins` array explicitly overrides these defaults.
-
-ESLint core rules are usable in oxlint without needing to configure a plugin in the config file.
-
-### Rule Categories
-
-Oxlint groups rules into categories for bulk configuration, though only `correctness` is enabled by default:
-
-```json
-{
-  "categories": {
-    "correctness": "error",
-    "suspicious": "warn"
-  }
-}
-```
-
-Available categories: `correctness` (default: enabled), `suspicious`, `pedantic`, `perf`, `style`, `restriction`, `nursery`.
-
-Individual rule settings in `rules` override category settings.
-
-`@oxlint/migrate` will turn `correctness` off to avoid enabling additional rules that weren't enabled by your ESLint config. You can choose to enable additional categories after migration if desired.
-
-### Check Unmigrated Rules
-
-Run with `--details` to see which ESLint rules could not be migrated:
-
-```bash
-npx @oxlint/migrate --details
-```
-
-Review the output and decide whether to keep ESLint for those rules or not. Some rules may be mentioned in the output from `--details` as having equivalents in oxlint that were not automatically mapped by the migration tool. In those cases, consider enabling the equivalent oxlint rule manually after migration.
-
-## Step 3: Install Oxlint
-
-Install the core oxlint package (use `yarn install`, `pnpm install`, `vp install`, `bun install`, etc. depending on your package manager):
-
-```bash
-npm install -D oxlint
-```
-
-If you want to add the `oxlint-tsgolint` package, if you intend to use type-aware rules that require TypeScript type information:
-
-```bash
-npm install -D oxlint-tsgolint
-```
-
-No other packages besides the above are needed by default, though you will need to keep/install any additional ESLint plugins that were migrated into `jsPlugins`. Do not add `@oxlint/migrate` to the package.json, it is meant for one-off usage.
-
-## Step 4: Handle Unsupported Features
-
-Some features require manual attention:
-
-- Local plugins (relative path imports): Must be migrated manually to `jsPlugins`
-- `eslint-plugin-prettier`: Supported, but very slow. It is recommended to use [oxfmt](https://oxc.rs/docs/guide/usage/formatter) instead, or switch to `prettier --check` as a separate step alongside oxlint.
-- `settings` in override configs: Oxlint does not support `settings` inside `overrides` blocks.
-- ESLint v9+ plugins: Not all work with oxlint's JS Plugins API, but the majority will.
-
-### Local Plugins
-
-If you have any custom ESLint rules in the project repo itself, you can migrate them manually after running the migration tool by adding them to the `jsPlugins` field in `.oxlintrc.json`:
-
-```json
-{
-  "jsPlugins": ["./path/to/my-plugin.js"],
-  "rules": {
-    "local-plugin/rule-name": "error"
-  }
-}
-```
-
-### External ESLint Plugins
-
-For ESLint plugins without a built-in oxlint equivalent, use the `jsPlugins` field to load them:
-
-```json
-{
-  "jsPlugins": ["eslint-plugin-custom"],
-  "rules": {
-    "custom/my-rule": "warn"
-  }
-}
-```
-
-## Step 5: Update CI and Scripts
-
-Replace ESLint commands with oxlint. Path arguments are optional; oxlint defaults to the current working directory.
-
-```bash
-# Before
-npx eslint src/
-npx eslint --fix src/
-
-# After
-npx oxlint src/
-npx oxlint --fix src/
-```
-
-### Common CLI Options
-
-| ESLint                    | oxlint equivalent                              |
-| ------------------------- | ---------------------------------------------- |
-| `eslint .`                | `oxlint` (default: lints the cwd)              |
-| `eslint src/`             | `oxlint src/`                                  |
-| `eslint --fix`            | `oxlint --fix`                                 |
-| `eslint --max-warnings 0` | `oxlint --deny-warnings` or `--max-warnings 0` |
-| `eslint --format json`    | `oxlint --format json`                         |
-
-Additional oxlint options:
-
-- `--tsconfig <path>`: Specify tsconfig.json path, likely unnecessary unless you have a non-standard name for `tsconfig.json`.
-
-## Tips
-
-- You can run alongside ESLint if necessary: Oxlint is designed to complement ESLint during migration, but with JS Plugins many projects can switch over fully without losing many rules.
-- Disable comments work: `// eslint-disable` and `// eslint-disable-next-line` comments are supported by oxlint. Use `--replace-eslint-comments` when running @oxlint/migrate to convert them to `// oxlint-disable` equivalents if desired.
-- List available rules: Run `npx oxlint --rules` to see all supported rules, or refer to the [rule documentation](https://oxc.rs/docs/guide/usage/linter/rules.html).
-- Schema support: Add `"$schema": "./node_modules/oxlint/configuration_schema.json"` to `.oxlintrc.json` for editor autocompletion if the migration tool didn't do it automatically.
-- Output formats: `default`, `stylish`, `json`, `github`, `gitlab`, `junit`, `checkstyle`, `unix`
-- Ignore files: `.eslintignore` is supported by oxlint if you have it, but it's recommended to move any ignore patterns into the `ignorePatterns` field in `.oxlintrc.json` for consistency and simplicity. All files and paths ignored via a `.gitignore` file will be ignored by oxlint by default as well.
-- If you ran the migration tool multiple times, remove the `.oxlintrc.json.bak` backup file created by the migration tool once you've finished migrating.
-- If you are not using any JS Plugins and have replaced your ESLint configuration, you can remove all ESLint packages from your project dependencies.
-- Ensure your editor is configured to use oxlint instead of ESLint for linting and error reporting. You may want to install the Oxc extension for your preferred editor. See https://oxc.rs/docs/guide/usage/linter/editors.html for more details.
-
-## References
-
-- [CLI Reference](https://oxc.rs/docs/guide/usage/linter/cli.html)
-- [Config File Reference](https://oxc.rs/docs/guide/usage/linter/config-file-reference.html)
-- [Complete Oxlint rule list and docs](https://oxc.rs/docs/guide/usage/linter/rules.html)

.claude-plugin/marketplace.json

@@ -1,14 +0,0 @@
-{
-  "name": "remanso-local",
-  "description": "Local plugins for the Remanso project",
-  "owner": {
-    "name": "julien"
-  },
-  "plugins": [
-    {
-      "name": "remanso-skills",
-      "description": "Local skills for the Remanso project (migrate-oxlint, etc.)",
-      "source": "./.agents"
-    }
-  ]
-}

.doc-jitrc.json

@@ -5,10 +5,6 @@
         "label": "Vue i18n",
         "uri": "https://vue-i18n.intlify.dev/guide/introduction.html"
       }
-    ],
-    "vite.config.ts": {
-      "label": "Remanso GitHub app",
-      "uri": "https://github.com/organizations/remanso-spance/settings/apps/lite-note"
-    }
+    ]
   }
 }

.gitignore

@@ -2,7 +2,6 @@
 node_modules
 /dist
 
-
 # local env files
 .env.local
 .env.*.local

.husky/_pre-push

@@ -1,37 +0,0 @@
-# Define the checksum file
-CHECKSUM_FILE=".env.checksum"
-
-# Calculate the current checksum of the .env file
-CURRENT_CHECKSUM=$(shasum -a 256 .env | awk '{ print $1 }')
-
-# Check if checksum file exists
-if [ -f "$CHECKSUM_FILE" ]; then
-  # Read the previous checksum
-  PREVIOUS_CHECKSUM=$(cat "$CHECKSUM_FILE")
-
-  # Compare the current checksum with the previous checksum
-  if [ "$CURRENT_CHECKSUM" = "$PREVIOUS_CHECKSUM" ]; then
-    echo ".env file has not changed. Skipping Netlify environment import."
-    exit 0
-  fi
-fi
-
-# If the checksum is different or the file doesn't exist, import the variables
-echo "Importing environment variables to Netlify..."
-netlify env:import .env
-
-if [ $? -ne 0 ]; then
-  echo "Failed to import environment variables to Netlify. Aborting push."
-  exit 1
-fi
-
-# Save the new checksum
-echo "$CURRENT_CHECKSUM" > "$CHECKSUM_FILE"
-
-# Stage the checksum file
-git add "$CHECKSUM_FILE"
-
-# Amend the last commit with the updated checksum
-git commit -m "Update .env checksum"
-
-echo "Environment variables imported successfully."

.zed/settings.json

@@ -0,0 +1,23 @@
+{
+  "format_on_save": "on",
+  "formatter": {
+    "external": {
+      "command": "node_modules/.bin/oxfmt",
+      "arguments": ["--stdin-filepath", "{buffer_path}"]
+    }
+  },
+  "languages": {
+    "TypeScript": {
+      "language_servers": ["!deno", "..."]
+    },
+    "TSX": {
+      "language_servers": ["!deno", "..."]
+    },
+    "JavaScript": {
+      "language_servers": ["!deno", "..."]
+    },
+    "JSX": {
+      "language_servers": ["!deno", "..."]
+    }
+  }
+}

Dockerfile

@@ -28,8 +28,6 @@ RUN pnpm run build
 FROM nginx:alpine AS runner
 
 COPY --from=builder /app/dist /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
 
 EXPOSE 80
-
-HEALTHCHECK --interval=30s --timeout=3s \
-  CMD wget -qO- http://localhost:80/ || exit 1

_scripts/change-theme-dark.ts

@@ -28,8 +28,8 @@ let themeConfigContent = readFileSync(themeConfigPath, "utf8")
 
 // Remplacer la valeur du thème sombre
 themeConfigContent = themeConfigContent.replace(
-  /dark:\s*['"][^'"]*['"],/,
-  `dark: '${newTheme}',`
+  /dark:\s*['"][^'"]*['"](,?)/,
+  `dark: '${newTheme}'$1`
 )
 
 // Écrire le contenu mis à jour dans le fichier

docs/superpowers/specs/2026-04-20-react-native-migration-design.md

@@ -0,0 +1,236 @@
+# Remanso React Native Migration — Design Spec
+
+**Date:** 2026-04-20
+**Status:** Approved
+
+## Overview
+
+Migrate Remanso from a Vue 3 web app to a fully native iOS + Android app built with Expo (React Native). The primary motivation is native feel: fluid stack animations, swipe-back gestures, and native navigation chrome. The scope is a full replacement of the web app.
+
+## Tech Stack
+
+| Concern          | Current (Vue)          | React Native                                               |
+| ---------------- | ---------------------- | ---------------------------------------------------------- |
+| Framework        | Vue 3 + Vite           | Expo SDK (managed workflow)                                |
+| Routing          | Vue Router             | Expo Router (file-system routing over React Navigation v7) |
+| State            | Pinia                  | Zustand                                                    |
+| Server state     | TanStack Vue Query     | TanStack Query (same library)                              |
+| Styling          | DaisyUI + Tailwind CSS | NativeWind v4                                              |
+| Local DB         | PouchDB (IndexedDB)    | Expo SQLite                                                |
+| Simple KV store  | localStorage           | MMKV                                                       |
+| Auth             | OAuth redirects        | expo-auth-session                                          |
+| GitHub API       | @octokit/rest          | @octokit/rest (unchanged)                                  |
+| i18n             | vue-i18n               | react-i18next                                              |
+| Date utils       | date-fns               | date-fns (unchanged)                                       |
+| Markdown content | markdown-it (DOM)      | react-native-webview                                       |
+| Fonts            | CSS custom properties  | expo-font                                                  |
+
+## Navigation Structure
+
+Expo Router generates a React Navigation v7 tree from the file system. The stacked note pattern — the core native feel win — maps to a nested Stack navigator where each backlink push adds a note with a native slide animation and swipe-left pops it.
+
+```
+Root Stack
+├── Auth screens (unauthenticated, no tab bar)
+│   ├── Home / Welcome
+│   ├── GitHub OAuth callback
+│   └── ATProto OAuth callback
+│
+└── Authenticated App — Bottom Tabs
+    ├── Tab: Feed (Stack)
+    │   ├── Repo picker
+    │   └── Note Stack (nested Stack)
+    │       ├── Note (root)
+    │       ├── Note (pushed via backlink)  ← swipe-back to pop
+    │       └── Note (pushed via backlink)  ← swipe-back to pop
+    │
+    ├── Tab: Inbox / Drafts / Todos (Stack)
+    │   └── Note list → Note detail
+    │
+    ├── Tab: Public Notes (Stack)
+    │   ├── Public note list
+    │   └── Public note detail
+    │
+    └── Tab: Settings (Stack)
+        ├── Settings root
+        └── Font picker (presented as modal)
+```
+
+History and Spaced Repetition are accessible as sections within the Feed tab or as additional tabs — to be decided during implementation.
+
+## Data Layer
+
+PouchDB is replaced by **Expo SQLite** for structured data and **MMKV** for simple key-value preferences.
+
+### Expo SQLite schema
+
+```sql
+CREATE TABLE IF NOT EXISTS github_tokens (
+  id TEXT PRIMARY KEY,
+  access_token TEXT NOT NULL,
+  refresh_token TEXT,
+  expires_at INTEGER
+);
+
+CREATE TABLE IF NOT EXISTS atproto_sessions (
+  id TEXT PRIMARY KEY,
+  did TEXT NOT NULL
+  -- full session_json stored in Expo SecureStore keyed by id
+);
+
+CREATE TABLE IF NOT EXISTS saved_repos (
+  id TEXT PRIMARY KEY,
+  user TEXT NOT NULL,
+  repo TEXT NOT NULL,
+  files_json TEXT NOT NULL,
+  cached_at INTEGER NOT NULL
+);
+
+CREATE TABLE IF NOT EXISTS history (
+  id TEXT PRIMARY KEY,
+  user TEXT NOT NULL,
+  repo TEXT NOT NULL,
+  note_path TEXT NOT NULL,
+  content TEXT NOT NULL,
+  created_at INTEGER NOT NULL
+);
+```
+
+The existing `DataApi` interface (`add`, `update`, `remove`, `get`, `getAll`) is re-implemented as a thin wrapper over Expo SQLite. No ORM — plain async SQL with `CREATE TABLE IF NOT EXISTS` on first open handles schema initialization at this scale.
+
+Sensitive data (access tokens, refresh tokens, ATProto sessions) is stored in **Expo SecureStore** rather than plain SQLite. SQLite holds only metadata and content cache.
+
+### MMKV
+
+Replaces localStorage for user settings: font family, font size, theme preference. Synchronous reads, no async overhead.
+
+### No Web Worker
+
+Database calls move to the main thread via Expo SQLite's async API. The performance concern that justified the Web Worker on web does not apply on mobile.
+
+## Auth Flows
+
+### GitHub OAuth
+
+The existing auth server (`api.remanso.space/auth/github`) handles code exchange — the client flow is unchanged:
+
+1. `expo-auth-session` opens an in-app browser tab with the GitHub authorize URL
+2. OAuth redirect captured by Expo's deep link handler
+3. Code sent to `api.remanso.space/auth/github?code=...` for token exchange
+4. Access token + refresh token stored in Expo SecureStore
+5. Token refresh logic (15-minute pre-expiry check) stays the same; HTTP calls use `fetch`
+
+### ATProto / Bluesky OAuth
+
+`@atproto/oauth-client-browser` is browser-only (IndexedDB, `window.crypto`, browser redirects). There is no official React Native client. A custom client (~200–300 lines) is implemented using:
+
+- `expo-auth-session` for the OAuth redirect flow (PKCE)
+- `expo-crypto` for PKCE code verifier/challenge generation
+- Expo SecureStore for session persistence
+- The same Bluesky API endpoints as the browser client
+
+This keeps ATProto auth fully client-side, consistent with the app's current architecture.
+
+## State Management
+
+Zustand replaces Pinia. The store shape is identical to `userRepo.store.ts`:
+
+```ts
+const useRepoStore = create<RepoState>((set, get) => ({
+  user: "",
+  repo: "",
+  files: [],
+  userSettings: null,
+  needToLogin: false,
+  setRepo: (user, repo) => set({ user, repo }),
+  loadFiles: async () => {
+    /* Octokit call */
+  },
+  loadSettings: async () => {
+    /* MMKV read */
+  }
+}))
+```
+
+TanStack Query handles all GitHub API server state (file fetching, README, repo listing) — same library, same patterns as today.
+
+## Styling
+
+NativeWind v4 provides Tailwind utility classes in React Native. DaisyUI is web-only and has no React Native equivalent — all component styling (buttons, cards, modals) is hand-written using NativeWind utilities.
+
+The two DaisyUI themes (`retro` light, `coffee` dark) are translated into a custom NativeWind theme in `tailwind.config.ts` with the same color tokens. System appearance (`useColorScheme`) drives theme selection.
+
+Font customization uses `expo-font` for loading custom fonts and React Native's `fontFamily` style prop, replacing the CSS custom property approach.
+
+## Markdown Rendering
+
+The markdown-it pipeline (KaTeX, Mermaid, shiki, tabler icons, html5-media, GitHub alerts, checkboxes) runs in the React Native JS context unchanged — same code, same output. The resulting HTML string is passed to a `NoteWebView` component built on `react-native-webview`.
+
+`NoteWebView` is a native UIView/View wrapper around a WebView engine. It is a React Native component — not a web app. The surrounding app (navigation chrome, tab bar, headers, settings, auth screens) is 100% native. Only the note content pane renders HTML. This is the standard pattern for rich content in React Native (used by GitHub Mobile, Linear, and others).
+
+The WebView communicates back to the native layer via `postMessage` for:
+
+- Internal note link taps (trigger React Navigation push)
+- External URL taps (open in system browser)
+- Backlink detection events
+
+## Project Structure
+
+```
+src/
+├── app/                        # Expo Router — file-system screens
+│   ├── _layout.tsx             # Root Stack navigator
+│   ├── index.tsx               # Home / Welcome
+│   └── (tabs)/                 # Authenticated tab navigator
+│       ├── _layout.tsx
+│       ├── feed/               # Feed + Note Stack screens
+│       ├── inbox/
+│       ├── public/
+│       └── settings/
+│
+├── modules/                    # Feature domains (mirrors current structure)
+│   ├── note/                   # Note models, hooks, caching
+│   ├── repo/                   # Zustand store, Octokit service
+│   ├── user/
+│   │   ├── auth/               # GitHub + ATProto OAuth hooks
+│   │   └── fonts.ts            # Font downloading (was utils/downloadFont.ts)
+│   ├── card/                   # Spaced repetition
+│   ├── history/                # Edit history
+│   ├── atproto/                # Custom ATProto OAuth client, DID resolution
+│   └── post/                   # ts-rest API client (unchanged)
+│
+├── components/                 # Shared UI components
+│
+├── rendering/                  # Markdown pipeline — first-class module
+│   ├── pipeline.ts             # markdown-it setup + plugin registration
+│   ├── plugins/                # Custom plugins
+│   │   ├── html5-media.ts
+│   │   ├── regexp.ts
+│   │   └── tabler-icons.ts
+│   └── NoteWebView.tsx         # react-native-webview wrapper
+│
+├── lib/                        # Shared low-level, stateless helpers
+│   ├── text.ts                 # slugify, noteTitle, displayLanguage
+│   ├── links.ts                # link.ts + youtube.ts
+│   ├── encoding.ts             # decodeBase64ToUTF8
+│   └── notifications.ts        # notif.ts
+│
+├── hooks/                      # React hooks
+├── data/                       # Expo SQLite wrapper (same DataApi interface)
+├── locales/                    # i18n strings (unchanged)
+└── constants/                  # Theme tokens, note width constants
+```
+
+## Key Risks
+
+1. **ATProto custom OAuth client** — no official SDK; requires careful PKCE implementation and session lifecycle management.
+2. **DaisyUI → NativeWind component styling** — no 1:1 mapping; all themed components need to be rebuilt. Most labor-intensive non-feature work.
+3. **NoteWebView ↔ native bridge** — link tap handling and scroll coordination between the WebView and the native Stack navigator require careful implementation to feel seamless.
+4. **Mermaid in WebView** — Mermaid is JS-heavy; initial render may be slow on lower-end Android. May need lazy rendering or a timeout fallback.
+
+## Out of Scope
+
+- PWA / service worker (not applicable to native)
+- Web Worker (replaced by async SQLite)
+- Comlink (not applicable)
+- Server-side rendering

index.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-theme="garden">
+<html lang="en" data-theme="emerald">
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />

nginx.conf

@@ -0,0 +1,9 @@
+server {
+    listen 80;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}

package.json

@@ -12,33 +12,37 @@
     "lint:fix": "oxlint --fix",
     "fmt": "oxfmt",
     "fmt:check": "oxfmt --check",
-    "prepare": "husky",
     "theme:light": "esno _scripts/change-theme-light.ts",
-    "theme:dark": "esno _scripts/change-theme-dark.ts",
-    "generate-pwa-assets": "pwa-assets-generator"
+    "theme:dark": "esno _scripts/change-theme-dark.ts"
   },
   "dependencies": {
     "@atproto/oauth-client-browser": "^0.3.41",
     "@better-fetch/fetch": "^1.1.21",
     "@better-fetch/logger": "^1.1.21",
     "@intlify/unplugin-vue-i18n": "^6.0.8",
+    "@mdit/plugin-tab": "^0.24.2",
     "@octokit/core": "^7.0.6",
     "@octokit/rest": "^22.0.1",
     "@openpanel/web": "^1.3.0",
     "@tailwindcss/postcss": "^4.1.16",
     "@tanstack/vue-query": "^5.92.9",
     "@toycode/markdown-it-class": "^1.2.4",
+    "@ts-rest/core": "^3.52.1",
+    "@ts-rest/vue-query": "^3.52.1",
     "@vscode/markdown-it-katex": "^1.1.2",
     "@vueuse/components": "^14.2.1",
     "@vueuse/core": "^13.6.0",
     "@vueuse/router": "^13.6.0",
     "arktype": "^2.1.29",
+    "comlink": "^4.4.2",
     "date-fns": "^4.1.0",
     "events": "^3.3.0",
     "font-color-contrast": "^11.1.0",
     "fontfaceobserver": "^2.3.0",
+    "github-slugger": "^2.0.0",
     "isomorphic-fetch": "^3.0.0",
     "markdown-it": "^14.1.0",
+    "markdown-it-anchor": "^9.2.0",
     "markdown-it-block-embed": "^0.0.3",
     "markdown-it-checkbox": "^1.1.0",
     "markdown-it-github-alerts": "^1.0.0",
@@ -79,7 +83,6 @@
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-unused-imports": "^4.4.1",
     "esno": "^4.8.0",
-    "husky": "^9.1.7",
     "oxfmt": "^0.42.0",
     "oxlint": "^1.57.0",
     "prettier": "^3.8.1",

pnpm-lock.yaml

@@ -20,6 +20,9 @@ importers:
       '@intlify/unplugin-vue-i18n':
         specifier: ^6.0.8
         version: 6.0.8(@vue/compiler-dom@3.5.28)(eslint@8.57.1)(rollup@2.79.2)(typescript@5.9.3)(vue-i18n@11.1.11(vue@3.5.18(typescript@5.9.3)))(vue@3.5.18(typescript@5.9.3))
+      '@mdit/plugin-tab':
+        specifier: ^0.24.2
+        version: 0.24.2(markdown-it@14.1.0)
       '@octokit/core':
         specifier: ^7.0.6
         version: 7.0.6
@@ -38,6 +41,12 @@ importers:
       '@toycode/markdown-it-class':
         specifier: ^1.2.4
         version: 1.2.4
+      '@ts-rest/core':
+        specifier: ^3.52.1
+        version: 3.52.1(@types/node@22.15.24)(zod@3.25.76)
+      '@ts-rest/vue-query':
+        specifier: ^3.52.1
+        version: 3.52.1(@tanstack/vue-query@5.92.9(vue@3.5.18(typescript@5.9.3)))(@ts-rest/core@3.52.1(@types/node@22.15.24)(zod@3.25.76))(zod@3.25.76)
       '@vscode/markdown-it-katex':
         specifier: ^1.1.2
         version: 1.1.2
@@ -53,6 +62,9 @@ importers:
       arktype:
         specifier: ^2.1.29
         version: 2.1.29
+      comlink:
+        specifier: ^4.4.2
+        version: 4.4.2
       date-fns:
         specifier: ^4.1.0
         version: 4.1.0
@@ -65,12 +77,18 @@ importers:
       fontfaceobserver:
         specifier: ^2.3.0
         version: 2.3.0
+      github-slugger:
+        specifier: ^2.0.0
+        version: 2.0.0
       isomorphic-fetch:
         specifier: ^3.0.0
         version: 3.0.0
       markdown-it:
         specifier: ^14.1.0
         version: 14.1.0
+      markdown-it-anchor:
+        specifier: ^9.2.0
+        version: 9.2.0(@types/markdown-it@14.1.2)(markdown-it@14.1.0)
       markdown-it-block-embed:
         specifier: ^0.0.3
         version: 0.0.3
@@ -186,9 +204,6 @@ importers:
       esno:
         specifier: ^4.8.0
         version: 4.8.0
-      husky:
-        specifier: ^9.1.7
-        version: 9.1.7
       oxfmt:
         specifier: ^0.42.0
         version: 0.42.0
@@ -1053,12 +1068,6 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@eslint-community/eslint-utils@4.4.0':
-    resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
-
   '@eslint-community/eslint-utils@4.7.0':
     resolution: {integrity: sha512-dyybb3AcajC7uha6CvhdVRJqaKyn7w2YKqKyAN37NKYgZT36w+iRb0Dymmc5qEJ549c/S31cMMSFd75bteCpCw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -1069,10 +1078,6 @@ packages:
     resolution: {integrity: sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
 
-  '@eslint-community/regexpp@4.6.2':
-    resolution: {integrity: sha512-pPTNuaAG3QMH+buKyBIGJs3g/S5y0caxw0ygM3YyE6yJFySwiGGSzA+mM3KJ8QQvzeLh3blwgSonkFjgQdxzMw==}
-    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
-
   '@eslint/eslintrc@2.1.4':
     resolution: {integrity: sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -1308,6 +1313,24 @@ packages:
   '@jridgewell/trace-mapping@0.3.31':
     resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
 
+  '@mdit/helper@0.23.2':
+    resolution: {integrity: sha512-w4oja7kZYnkSiodfn4Neg1gmlIkvQtmCBJTLvLFOaET7xt8KomDNPQeumpGobQ9dWkXFqBKHlxjTYgroPH+CvA==}
+    engines: {node: '>= 20'}
+    peerDependencies:
+      markdown-it: ^14.1.0
+    peerDependenciesMeta:
+      markdown-it:
+        optional: true
+
+  '@mdit/plugin-tab@0.24.2':
+    resolution: {integrity: sha512-9rN23SP4beO0shBOuSGLGR+Ia7fminVSH6xl5Rb6rh6rRYQ6R3NR2KkIfLZvoMCRiN2uDwhXT/R9LyXHOdRMUQ==}
+    engines: {node: '>= 20'}
+    peerDependencies:
+      markdown-it: ^14.1.0
+    peerDependenciesMeta:
+      markdown-it:
+        optional: true
+
   '@mermaid-js/parser@0.6.3':
     resolution: {integrity: sha512-lnjOhe7zyHjc+If7yT4zoedx2vo4sHaTmtkl1+or8BRTnCtDmcTpAjpzDSfCZrshM5bCoz0GyidzadJAH1xobA==}
 
@@ -2119,6 +2142,27 @@ packages:
   '@toycode/markdown-it-class@1.2.4':
     resolution: {integrity: sha512-hA4gHBK8moObkOYdWTjhy1wYcYy0MJeM3JjSKbsXHRpRMvIKhk6Jm+t3bXsSScTdz/byWqQbs8YIwVYjHp+SlQ==}
 
+  '@ts-rest/core@3.52.1':
+    resolution: {integrity: sha512-tAjz7Kxq/grJodcTA1Anop4AVRDlD40fkksEV5Mmal88VoZeRKAG8oMHsDwdwPZz+B/zgnz0q2sF+cm5M7Bc7g==}
+    peerDependencies:
+      '@types/node': ^18.18.7 || >=20.8.4
+      zod: ^3.22.3
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      zod:
+        optional: true
+
+  '@ts-rest/vue-query@3.52.1':
+    resolution: {integrity: sha512-89u7aS9LGDC7uNUC5CagWX1EB7vTwyXohYcizLi1D9v7MD/Cnu5OTQNf8SY3PuAK62RcFJXB2XZGsMAPC0svNw==}
+    peerDependencies:
+      '@tanstack/vue-query': ^4.0.0
+      '@ts-rest/core': ~3.52.0
+      zod: ^3.22.3
+    peerDependenciesMeta:
+      zod:
+        optional: true
+
   '@tybys/wasm-util@0.10.1':
     resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==}
 
@@ -2985,6 +3029,9 @@ packages:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
     engines: {node: '>= 0.8'}
 
+  comlink@4.4.2:
+    resolution: {integrity: sha512-OxGdvBmJuNKSCMO4NTl1L47VRp6xn2wG4F/2hYzB6tiCb709otOxtEYCSvK80PtjODfXXZu8ds+Nw5kVCjqd2g==}
+
   commander@2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
 
@@ -3275,15 +3322,6 @@ packages:
       supports-color:
         optional: true
 
-  debug@4.3.4:
-    resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
-    engines: {node: '>=6.0'}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-
   debug@4.4.1:
     resolution: {integrity: sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==}
     engines: {node: '>=6.0'}
@@ -3857,6 +3895,9 @@ packages:
   getpass@0.1.7:
     resolution: {integrity: sha512-0fzj9JxOLfJ+XGLhR8ze3unN0KZCgZwiSSDz168VERjK8Wl8kVSdcu2kspd4s4wtAa1y/qrVRiAA0WclVsu0ng==}
 
+  github-slugger@2.0.0:
+    resolution: {integrity: sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==}
+
   glob-base@0.3.0:
     resolution: {integrity: sha512-ab1S1g1EbO7YzauaJLkgLp7DZVAqj9M/dvKlTt8DkXA2tiOIcSMrlVI2J1RZyB5iJVccEscjGn+kpOG9788MHA==}
     engines: {node: '>=0.10.0'}
@@ -4008,11 +4049,6 @@ packages:
     resolution: {integrity: sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==}
     engines: {node: '>=14.18.0'}
 
-  husky@9.1.7:
-    resolution: {integrity: sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA==}
-    engines: {node: '>=18'}
-    hasBin: true
-
   ico-endec@0.1.6:
     resolution: {integrity: sha512-ZdLU38ZoED3g1j3iEyzcQj+wAkY2xfWNkymszfJPoxucIUhK7NayQ+/C4Kv0nDFMIsbtbEHldv3V8PU494/ueQ==}
 
@@ -4834,6 +4870,12 @@ packages:
     resolution: {integrity: sha512-4y7uGv8bd2WdM9vpQsiQNo41Ln1NvhvDRuVt0k2JZQ+ezN2uaQes7lZeZ+QQUHOLQAtDaBJ+7wCbi+ab/KFs+w==}
     engines: {node: '>=0.10.0'}
 
+  markdown-it-anchor@9.2.0:
+    resolution: {integrity: sha512-sa2ErMQ6kKOA4l31gLGYliFQrMKkqSO0ZJgGhDHKijPf0pNFM9vghjAh3gn26pS4JDRs7Iwa9S36gxm3vgZTzg==}
+    peerDependencies:
+      '@types/markdown-it': '*'
+      markdown-it: '*'
+
   markdown-it-block-embed@0.0.3:
     resolution: {integrity: sha512-coWuC/uZY6Z1Gp3wthhJo5yjkG3/gHErNF/emaiEvD98fKzEHNP6GCYGfJfk5o0n31xiaYjbDgef+XtabKOZzA==}
 
@@ -4959,9 +5001,6 @@ packages:
   ms@2.0.0:
     resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
 
-  ms@2.1.2:
-    resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
-
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
@@ -7642,25 +7681,17 @@ snapshots:
   '@esbuild/win32-x64@0.25.5':
     optional: true
 
-  '@eslint-community/eslint-utils@4.4.0(eslint@8.57.1)':
-    dependencies:
-      eslint: 8.57.1
-      eslint-visitor-keys: 3.4.3
-
   '@eslint-community/eslint-utils@4.7.0(eslint@8.57.1)':
     dependencies:
       eslint: 8.57.1
       eslint-visitor-keys: 3.4.3
 
-  '@eslint-community/regexpp@4.12.1':
-    optional: true
-
-  '@eslint-community/regexpp@4.6.2': {}
+  '@eslint-community/regexpp@4.12.1': {}
 
   '@eslint/eslintrc@2.1.4':
     dependencies:
       ajv: 6.12.6
-      debug: 4.3.4
+      debug: 4.4.3
       espree: 9.6.1
       globals: 13.20.0
       ignore: 5.2.4
@@ -7676,7 +7707,7 @@ snapshots:
   '@humanwhocodes/config-array@0.13.0':
     dependencies:
       '@humanwhocodes/object-schema': 2.0.3
-      debug: 4.3.4
+      debug: 4.4.3
       minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
@@ -7877,6 +7908,19 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  '@mdit/helper@0.23.2(markdown-it@14.1.0)':
+    dependencies:
+      '@types/markdown-it': 14.1.2
+    optionalDependencies:
+      markdown-it: 14.1.0
+
+  '@mdit/plugin-tab@0.24.2(markdown-it@14.1.0)':
+    dependencies:
+      '@mdit/helper': 0.23.2(markdown-it@14.1.0)
+      '@types/markdown-it': 14.1.2
+    optionalDependencies:
+      markdown-it: 14.1.0
+
   '@mermaid-js/parser@0.6.3':
     dependencies:
       langium: 3.3.1
@@ -8424,6 +8468,18 @@ snapshots:
 
   '@toycode/markdown-it-class@1.2.4': {}
 
+  '@ts-rest/core@3.52.1(@types/node@22.15.24)(zod@3.25.76)':
+    optionalDependencies:
+      '@types/node': 22.15.24
+      zod: 3.25.76
+
+  '@ts-rest/vue-query@3.52.1(@tanstack/vue-query@5.92.9(vue@3.5.18(typescript@5.9.3)))(@ts-rest/core@3.52.1(@types/node@22.15.24)(zod@3.25.76))(zod@3.25.76)':
+    dependencies:
+      '@tanstack/vue-query': 5.92.9(vue@3.5.18(typescript@5.9.3))
+      '@ts-rest/core': 3.52.1(@types/node@22.15.24)(zod@3.25.76)
+    optionalDependencies:
+      zod: 3.25.76
+
   '@tybys/wasm-util@0.10.1':
     dependencies:
       tslib: 2.8.1
@@ -8656,7 +8712,7 @@ snapshots:
       '@typescript-eslint/types': 8.46.2
       '@typescript-eslint/typescript-estree': 8.46.2(typescript@5.9.3)
       '@typescript-eslint/visitor-keys': 8.46.2
-      debug: 4.4.1
+      debug: 4.4.3
       eslint: 8.57.1
       typescript: 5.9.3
     transitivePeerDependencies:
@@ -8676,7 +8732,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/tsconfig-utils': 8.46.2(typescript@5.9.3)
       '@typescript-eslint/types': 8.46.2
-      debug: 4.4.1
+      debug: 4.4.3
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
@@ -8707,7 +8763,7 @@ snapshots:
       '@typescript-eslint/types': 8.46.2
       '@typescript-eslint/typescript-estree': 8.46.2(typescript@5.9.3)
       '@typescript-eslint/utils': 8.46.2(eslint@8.57.1)(typescript@5.9.3)
-      debug: 4.4.1
+      debug: 4.4.3
       eslint: 8.57.1
       ts-api-utils: 2.1.0(typescript@5.9.3)
       typescript: 5.9.3
@@ -8742,7 +8798,7 @@ snapshots:
       '@typescript-eslint/tsconfig-utils': 8.46.2(typescript@5.9.3)
       '@typescript-eslint/types': 8.46.2
       '@typescript-eslint/visitor-keys': 8.46.2
-      debug: 4.4.1
+      debug: 4.4.3
       fast-glob: 3.3.3
       is-glob: 4.0.3
       minimatch: 9.0.5
@@ -9542,6 +9598,8 @@ snapshots:
     dependencies:
       delayed-stream: 1.0.0
 
+  comlink@4.4.2: {}
+
   commander@2.20.3: {}
 
   commander@7.2.0: {}
@@ -9836,10 +9894,6 @@ snapshots:
     dependencies:
       ms: 2.1.3
 
-  debug@4.3.4:
-    dependencies:
-      ms: 2.1.2
-
   debug@4.4.1:
     dependencies:
       ms: 2.1.3
@@ -10155,8 +10209,8 @@ snapshots:
 
   eslint@8.57.1:
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.1)
-      '@eslint-community/regexpp': 4.6.2
+      '@eslint-community/eslint-utils': 4.7.0(eslint@8.57.1)
+      '@eslint-community/regexpp': 4.12.1
       '@eslint/eslintrc': 2.1.4
       '@eslint/js': 8.57.1
       '@humanwhocodes/config-array': 0.13.0
@@ -10165,8 +10219,8 @@ snapshots:
       '@ungap/structured-clone': 1.2.0
       ajv: 6.12.6
       chalk: 4.1.2
-      cross-spawn: 7.0.3
-      debug: 4.3.4
+      cross-spawn: 7.0.6
+      debug: 4.4.3
       doctrine: 3.0.0
       escape-string-regexp: 4.0.0
       eslint-scope: 7.2.2
@@ -10547,6 +10601,8 @@ snapshots:
     dependencies:
       assert-plus: 1.0.0
 
+  github-slugger@2.0.0: {}
+
   glob-base@0.3.0:
     dependencies:
       glob-parent: 2.0.0
@@ -10698,8 +10754,6 @@ snapshots:
 
   human-signals@4.3.1: {}
 
-  husky@9.1.7: {}
-
   ico-endec@0.1.6: {}
 
   iconv-lite@0.4.24:
@@ -11584,6 +11638,11 @@ snapshots:
     dependencies:
       object-visit: 1.0.1
 
+  markdown-it-anchor@9.2.0(@types/markdown-it@14.1.2)(markdown-it@14.1.0):
+    dependencies:
+      '@types/markdown-it': 14.1.2
+      markdown-it: 14.1.0
+
   markdown-it-block-embed@0.0.3: {}
 
   markdown-it-checkbox@1.1.0:
@@ -11745,8 +11804,6 @@ snapshots:
 
   ms@2.0.0: {}
 
-  ms@2.1.2: {}
-
   ms@2.1.3: {}
 
   multiformats@9.9.0: {}

src/App.vue

@@ -17,10 +17,18 @@ const { isATProtoReady } = useATProtoLogin()
 
 <style lang="scss">
 #main-app {
-  height: 100vh;
+  height: 100dvh;
   width: 100%;
+  max-width: none;
   display: flex;
   flex: 1;
+  overflow-x: auto;
+}
+
+@media screen and (max-width: 768px) {
+  #main-app {
+    overflow-y: auto;
+  }
 }
 
 ::view-transition-old(root),

src/bus/noteEventBus.ts

@@ -4,6 +4,7 @@ interface EventBusParams {
   user: string
   repo: string
   path: string
+  hash?: string
   currentNoteSHA?: string
 }
 

src/components/BackButton.vue

@@ -24,7 +24,7 @@ const goBack = () => {
 </script>
 
 <template>
-  <a class="btn btn-sm back-button" @click="goBack">
+  <button class="btn btn-sm back-button text-base-content" @click="goBack">
     <svg
       xmlns="http://www.w3.org/2000/svg"
       class="icon icon-tabler icon-tabler-arrow-narrow-left"
@@ -41,5 +41,5 @@ const goBack = () => {
       <line x1="5" y1="12" x2="9" y2="16" />
       <line x1="5" y1="12" x2="9" y2="8" />
     </svg>
-  </a>
+  </button>
 </template>

src/components/FluxNote.vue

@@ -1,14 +1,8 @@
 <script lang="ts" setup>
-import {
-  computed,
-  defineAsyncComponent,
-  nextTick,
-  onMounted,
-  onUnmounted,
-  toRefs,
-  watch
-} from "vue"
+import { computed, nextTick, onMounted, onUnmounted, toRefs, watch } from "vue"
 
+import HeaderNote from "@/components/HeaderNote.vue"
+import SignInGithub from "@/components/SignInGithub.vue"
 import SkeletonLoader from "@/components/SkeletonLoader.vue"
 import StackedNote from "@/components/StackedNote.vue"
 import { useLinks } from "@/hooks/useLinks.hook"
@@ -21,10 +15,6 @@ import CacheAllNotes from "@/modules/note/components/CacheAllNote.vue"
 import { useUserRepoStore } from "@/modules/repo/store/userRepo.store"
 import { useUserSettings } from "@/modules/user/hooks/useUserSettings.hook"
 
-const HeaderNote = defineAsyncComponent(
-  () => import("@/components/HeaderNote.vue")
-)
-
 const props = withDefaults(
   defineProps<{
     user: string
@@ -112,9 +102,13 @@ onUnmounted(() => {
         <cache-all-notes />
       </div>
       <slot />
-      <skeleton-loader v-if="isLoading || !hasContent" />
+      <skeleton-loader v-if="isLoading" />
+      <div v-else-if="withContent && !hasContent" class="repo-not-found">
+        <p>This repository is not accessible.</p>
+        <sign-in-github />
+      </div>
       <p
-        v-else-if="withContent"
+        v-else-if="withContent && hasContent"
         class="note-display"
         v-html="renderedContent"
       />
@@ -200,6 +194,15 @@ $header-height: 40px;
     }
   }
 
+  .repo-not-found {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+    padding: 2rem 0;
+    color: var(--color-base-content);
+  }
+
   .note-display {
     padding-bottom: 2rem;
   }
@@ -208,12 +211,6 @@ $header-height: 40px;
     display: flex;
     flex-direction: column;
     overflow-y: auto;
-    height: 100vh;
-    position: sticky;
-
-    &:not(:first-child) {
-      border-top: 1px solid rgba(18, 19, 58, 0.2);
-    }
 
     .title {
       text-align: left;
@@ -221,6 +218,8 @@ $header-height: 40px;
   }
 
   @media screen and (min-width: 769px) {
+    background-color: var(--note-canvas-bg);
+
     .repo-title-breadcrumb {
       padding: 0.5rem 1rem 0;
       transform-origin: 0 0;
@@ -237,6 +236,11 @@ $header-height: 40px;
     .note {
       min-width: var(--note-width);
       max-width: var(--note-width);
+      background-color: var(--color-base-100);
+    }
+
+    .readme {
+      box-shadow: var(--note-sheet-shadow);
     }
   }
 }
@@ -245,6 +249,7 @@ $header-height: 40px;
   .flux-note {
     .readme {
       padding: 0 0.75rem;
+      position: relative;
     }
   }
 
@@ -254,6 +259,7 @@ $header-height: 40px;
 
   .note {
     width: 100vw;
+    height: 100dvh;
     overflow-y: visible;
   }
 

src/components/FontChange.vue

@@ -7,50 +7,94 @@ import { useUserRepoStore } from "../modules/repo/store/userRepo.store"
 
 const store = useUserRepoStore()
 
-const fontFamilies = computed(() => store.userSettings?.fontFamilies ?? [])
-const sortedFontFamilies = computed(() =>
-  [...fontFamilies.value].sort((a, b) => a.localeCompare(b))
+const DEFAULT_FONT_FAMILIES = [
+  "EB Garamond",
+  "Inter",
+  "Lato",
+  "Libertinus Serif",
+  "Lora",
+  "Merriweather",
+  "Playfair Display",
+  "Roboto",
+  "Source Serif 4"
+]
+
+const fontFamilies = computed(
+  () => store.userSettings?.fontFamilies ?? DEFAULT_FONT_FAMILIES
 )
+const sortedFontFamilies = computed(() => {
+  const base = fontFamilies.value
+  const extras = [
+    store.userSettings?.chosenTitleFont,
+    store.userSettings?.chosenBodyFont
+  ].filter((f): f is string => !!f && !base.includes(f))
+  return [...base, ...extras].sort((a, b) => a.localeCompare(b))
+})
 const fontSizes = Array.from({ length: 7 }, (_, i) => `${9 + i * 2}pt`)
+
+const titleFont = computed({
+  get: () => store.userSettings?.chosenTitleFont,
+  set: (value) => store.setTitleFont(value!)
+})
+const bodyFont = computed({
+  get: () => store.userSettings?.chosenBodyFont,
+  set: (value) => store.setBodyFont(value!)
+})
+const fontSize = computed({
+  get: () => store.userSettings?.chosenFontSize,
+  set: (value) => store.setFontSize(value!)
+})
 </script>
 
 <template>
-  <div class="font-change" v-if="sortedFontFamilies.length > 0">
-    <theme-swap />
-
-    <select
-      class="select"
-      :value="store.userSettings?.chosenFontFamily"
-      @change="store.setFontFamily(($event.target as HTMLSelectElement).value)"
-    >
+  <div class="font-change">
+    <div>
+      <label for="title-font" class="font-label">t</label>
+      <select id="title-font" class="select" v-model="titleFont">
         <option v-for="font in sortedFontFamilies" :key="font" :value="font">
           {{ font }}
         </option>
       </select>
 
-    <select
-      class="select"
-      :value="store.userSettings?.chosenFontSize"
-      @change="store.setFontSize(($event.target as HTMLSelectElement).value)"
-    >
+      <label for="body-font" class="font-label">p</label>
+      <select id="body-font" class="select" v-model="bodyFont">
+        <option v-for="font in sortedFontFamilies" :key="font" :value="font">
+          {{ font }}
+        </option>
+      </select>
+    </div>
+    <div>
+      <theme-swap />
+
+      <label for="font-size" class="font-label">s</label>
+      <select id="font-size" class="select" v-model="fontSize">
         <option v-for="size in fontSizes" :key="size" :value="size">
           {{ size }}
         </option>
       </select>
     </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
 .font-change {
-  flex: 1;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 1rem;
-
   select {
     flex: 1;
     display: flex;
   }
+
+  div {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 1rem;
+    margin: 1rem;
+  }
+}
+
+.font-label {
+  font-weight: bold;
+  font-size: 0.75rem;
+  opacity: 0.6;
 }
 </style>

src/components/HeaderNote.vue

@@ -1,32 +1,13 @@
 <script lang="ts" setup>
 import FontChange from "@/components/FontChange.vue"
+import HomeButton from "@/components/HomeButton.vue"
 
 defineProps<{ user: string; repo: string }>()
 </script>
 
 <template>
   <header class="header-note">
-    <router-link
-      :to="{ name: 'Home' }"
-      class="button is-small is-white back-button"
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        class="icon icon-tabler icon-tabler-arrow-narrow-left"
-        width="28"
-        height="28"
-        viewBox="0 0 24 24"
-        stroke-width="1.5"
-        stroke="currentColor"
-        fill="none"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <line x1="5" y1="12" x2="19" y2="12" />
-        <line x1="5" y1="12" x2="9" y2="16" />
-        <line x1="5" y1="12" x2="9" y2="8" />
-      </svg>
-    </router-link>
+    <home-button />
     <!-- <router-link
       :to="{ name: 'SpacedRepetitionCard', params: { user, repo } }"
     >
@@ -51,12 +32,15 @@ defineProps<{ user: string; repo: string }>()
       </svg>
     </router-link> -->
 
-    <button onclick="font_modal.showModal()">
+    <button
+      class="btn btn-ghost btn-circle text-base-content"
+      onclick="font_modal.showModal()"
+    >
       <svg
         xmlns="http://www.w3.org/2000/svg"
         class="icon icon-tabler icons-tabler-outline icon-tabler-typography"
-        width="36"
-        height="36"
+        width="30"
+        height="30"
         viewBox="0 0 24 24"
         stroke-width="1.5"
         stroke="currentColor"
@@ -71,11 +55,14 @@ defineProps<{ user: string; repo: string }>()
         <path d="M5 20l6 -16l2 0l7 16" />
       </svg>
     </button>
-    <router-link :to="{ name: 'FluxNoteView', params: { user, repo } }">
+    <router-link
+      class="btn btn-ghost btn-circle"
+      :to="{ name: 'FluxNoteView', params: { user, repo } }"
+    >
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width="36"
-        height="36"
+        width="30"
+        height="30"
         viewBox="0 0 24 24"
         stroke="currentColor"
         fill="none"
@@ -88,12 +75,15 @@ defineProps<{ user: string; repo: string }>()
         <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
       </svg>
     </router-link>
-    <router-link :to="{ name: 'DraftNotes', params: { user, repo } }">
+    <router-link
+      class="btn btn-ghost btn-circle"
+      :to="{ name: 'DraftNotes', params: { user, repo } }"
+    >
       <svg
         xmlns="http://www.w3.org/2000/svg"
         class="icon icon-tabler icon-tabler-notes"
-        width="36"
-        height="36"
+        width="30"
+        height="30"
         viewBox="0 0 24 24"
         stroke-width="1.5"
         stroke="currentColor"
@@ -107,11 +97,14 @@ defineProps<{ user: string; repo: string }>()
         <line x1="9" y1="15" x2="13" y2="15" />
       </svg>
     </router-link>
-    <router-link :to="{ name: 'TodoNotes', params: { user, repo } }">
+    <router-link
+      class="btn btn-ghost btn-circle"
+      :to="{ name: 'TodoNotes', params: { user, repo } }"
+    >
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width="36"
-        height="36"
+        width="30"
+        height="30"
         viewBox="0 0 24 24"
         fill="none"
         stroke="currentColor"
@@ -129,12 +122,15 @@ defineProps<{ user: string; repo: string }>()
         <path d="M11 18l9 0" />
       </svg>
     </router-link>
-    <router-link :to="{ name: 'FleetingNotes', params: { user, repo } }">
+    <router-link
+      class="btn btn-ghost btn-circle"
+      :to="{ name: 'FleetingNotes', params: { user, repo } }"
+    >
       <svg
         xmlns="http://www.w3.org/2000/svg"
         class="icon icon-tabler icon-tabler-mailbox"
-        width="36"
-        height="36"
+        width="30"
+        height="30"
         viewBox="0 0 24 24"
         stroke-width="1.5"
         stroke="currentColor"
@@ -150,7 +146,7 @@ defineProps<{ user: string; repo: string }>()
       </svg>
     </router-link>
     <dialog id="font_modal" class="modal">
-      <div class="modal-box">
+      <div class="modal-box w-10/12 max-w-2xl">
         <h3 class="text-lg font-bold">Style settings</h3>
         <font-change />
       </div>
@@ -168,12 +164,6 @@ defineProps<{ user: string; repo: string }>()
   justify-content: space-between;
   margin-top: 10px;
 
-  img {
-    &:hover {
-      cursor: pointer;
-    }
-  }
-
   button {
     color: var(--color-accent);
   }

src/components/HomeButton.vue

@@ -6,9 +6,12 @@ const goHome = () => router.push({ name: "Home" })
 </script>
 
 <template>
-  <a class="btn btn-ghost btn-circle btn-lg" @click="goHome">
+  <button
+    class="btn btn-ghost btn-circle btn-lg text-base-content"
+    @click="goHome"
+  >
     <img src="/favicon.png" alt="Remanso icon" class="remanso-logo" />
-  </a>
+  </button>
 </template>
 
 <style>

src/components/LinkedNotes.vue

@@ -24,9 +24,9 @@ const emitNote = (sha: string) => {
     <h5 class="subtitle is-5">🔗</h5>
     <ul class="links">
       <li v-for="link in backlink?.links" :key="link.sha">
-        <a @click.prevent="emitNote(link.sha)">
+        <button class="link" @click="emitNote(link.sha)">
           {{ link.title }}
-        </a>
+        </button>
       </li>
     </ul>
   </div>

src/components/NoteConflictModal.vue

@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import { onMounted, ref, watch } from "vue"
+
+const props = defineProps<{ open: boolean }>()
+
+const emit = defineEmits<{
+  (e: "discard"): void
+  (e: "overwrite"): void
+  (e: "cancel"): void
+  (e: "update:open", value: boolean): void
+}>()
+
+const dialogRef = ref<HTMLDialogElement | null>(null)
+
+const close = () => {
+  if (dialogRef.value?.open) dialogRef.value.close()
+  emit("update:open", false)
+}
+
+const choose = (action: "discard" | "overwrite" | "cancel") => {
+  emit(action)
+  close()
+}
+
+watch(
+  () => props.open,
+  (open) => {
+    const el = dialogRef.value
+    if (!el) return
+    if (open && !el.open) el.showModal()
+    else if (!open && el.open) el.close()
+  }
+)
+
+onMounted(() => {
+  if (props.open) dialogRef.value?.showModal()
+})
+</script>
+
+<template>
+  <dialog
+    ref="dialogRef"
+    class="modal"
+    @close="emit('update:open', false)"
+    @cancel.prevent="choose('cancel')"
+  >
+    <div class="modal-box">
+      <h3 class="text-lg font-bold">GitHub has a newer version of this note</h3>
+      <p class="py-3 text-sm">
+        Someone (or another device) updated this note on GitHub since you
+        started editing. If you save now, their changes will be overwritten.
+      </p>
+
+      <div class="modal-action flex-col gap-2 sm:flex-row sm:justify-end">
+        <button
+          type="button"
+          class="btn btn-ghost"
+          @click="choose('cancel')"
+        >
+          Cancel
+        </button>
+        <button
+          type="button"
+          class="btn btn-warning"
+          @click="choose('overwrite')"
+        >
+          Save anyway (overwrite)
+        </button>
+        <button
+          type="button"
+          class="btn btn-primary"
+          @click="choose('discard')"
+        >
+          Discard my edits, pull latest
+        </button>
+      </div>
+    </div>
+    <form method="dialog" class="modal-backdrop">
+      <button type="submit" @click="choose('cancel')">close</button>
+    </form>
+  </dialog>
+</template>

src/components/NoteFreshnessBadge.vue

@@ -0,0 +1,236 @@
+<script lang="ts" setup>
+import { computed } from "vue"
+
+import type { FreshnessStatus } from "@/hooks/useNoteFreshness.hook"
+
+const props = defineProps<{
+  status: FreshnessStatus
+  lastCheckedAt: Date | null
+}>()
+
+defineEmits<{ (e: "click"): void }>()
+
+const formatTime = (d: Date) =>
+  d.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" })
+
+const minutesAgo = (d: Date) =>
+  Math.max(1, Math.round((Date.now() - d.getTime()) / 60000))
+
+const label = computed(() => {
+  switch (props.status) {
+    case "verified":
+      return "Up to date"
+    case "checking":
+      return "Checking…"
+    case "outdated":
+      return "Outdated"
+    case "stale-known":
+      return props.lastCheckedAt
+        ? `Checked ${minutesAgo(props.lastCheckedAt)}m ago`
+        : "Not checked"
+    case "offline":
+      return "Can’t reach GitHub"
+    case "unknown":
+    default:
+      return "Not checked"
+  }
+})
+
+const tooltip = computed(() => {
+  switch (props.status) {
+    case "verified":
+      return props.lastCheckedAt
+        ? `Verified at ${formatTime(props.lastCheckedAt)}. Click to re-check.`
+        : "Click to re-check."
+    case "outdated":
+      return "GitHub has a newer version. Click to pull latest."
+    case "stale-known":
+      return "Click to verify against GitHub."
+    case "offline":
+      return "Could not reach GitHub. Click to retry."
+    case "checking":
+      return "Checking against GitHub…"
+    case "unknown":
+    default:
+      return "Click to check against GitHub."
+  }
+})
+
+const stateClass = computed(() => `state-${props.status}`)
+const isBusy = computed(() => props.status === "checking")
+</script>
+
+<template>
+  <button
+    class="freshness button is-text is-light"
+    :class="stateClass"
+    :title="tooltip"
+    :aria-label="tooltip"
+    :disabled="isBusy"
+    @click="$emit('click')"
+  >
+    <svg
+      v-if="status === 'verified'"
+      xmlns="http://www.w3.org/2000/svg"
+      class="icon icon-tabler icon-tabler-cloud-check"
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.75"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path
+        d="M11 18.004h-4.343c-2.572 -.004 -4.657 -2.011 -4.657 -4.487c0 -2.475 2.085 -4.482 4.657 -4.482c.393 -1.762 1.794 -3.2 3.675 -3.773c1.88 -.572 3.956 -.193 5.444 1c1.488 1.19 2.162 3.007 1.77 4.769h.99c1.388 0 2.585 .82 3.138 2.007"
+      />
+      <path d="M15 19l2 2l4 -4" />
+    </svg>
+    <svg
+      v-else-if="status === 'unknown' || status === 'stale-known'"
+      xmlns="http://www.w3.org/2000/svg"
+      class="icon icon-tabler"
+      :class="
+        status === 'stale-known'
+          ? 'icon-tabler-clock'
+          : 'icon-tabler-cloud-question'
+      "
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.75"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <template v-if="status === 'stale-known'">
+        <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" />
+        <path d="M12 7v5l3 3" />
+      </template>
+      <template v-else>
+        <path
+          d="M14.5 18.004h-7.843c-2.572 -.004 -4.657 -2.011 -4.657 -4.487c0 -2.475 2.085 -4.482 4.657 -4.482c.393 -1.762 1.794 -3.2 3.675 -3.773c1.88 -.572 3.956 -.193 5.444 1c1.488 1.19 2.162 3.007 1.77 4.769h.99"
+        />
+        <path d="M19 22v.01" />
+        <path
+          d="M19 19a2.003 2.003 0 0 0 .914 -3.782a1.98 1.98 0 0 0 -2.414 .483"
+        />
+      </template>
+    </svg>
+    <svg
+      v-else-if="status === 'outdated'"
+      xmlns="http://www.w3.org/2000/svg"
+      class="icon icon-tabler icon-tabler-cloud-download"
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.75"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path
+        d="M19 18a3.5 3.5 0 0 0 0 -7h-1a5 4.5 0 0 0 -11 -2a4.6 4.4 0 0 0 -2.1 8.4"
+      />
+      <path d="M12 13l0 9" />
+      <path d="M9 19l3 3l3 -3" />
+    </svg>
+    <svg
+      v-else-if="status === 'checking'"
+      xmlns="http://www.w3.org/2000/svg"
+      class="icon icon-tabler icon-tabler-loader-2 spin"
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.75"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="M12 3a9 9 0 1 0 9 9" />
+    </svg>
+    <svg
+      v-else
+      xmlns="http://www.w3.org/2000/svg"
+      class="icon icon-tabler icon-tabler-cloud-off"
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.75"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path
+        d="M9.58 5.548c.24 -.11 .492 -.207 .752 -.286c1.88 -.572 3.956 -.193 5.444 1c1.488 1.19 2.162 3.007 1.77 4.769h.99c1.913 0 3.464 1.56 3.464 3.486c0 .957 -.383 1.824 -1.003 2.454m-2.997 1.033h-11.343c-2.572 -.004 -4.657 -2.011 -4.657 -4.487c0 -2.475 2.085 -4.482 4.657 -4.482c.13 -.582 .37 -1.128 .7 -1.62"
+      />
+      <path d="M3 3l18 18" />
+    </svg>
+  </button>
+</template>
+
+<style lang="scss" scoped>
+.freshness {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: 0.75rem;
+  padding: 0.15rem 0.5rem;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  vertical-align: middle;
+
+  &[disabled] {
+    cursor: progress;
+  }
+
+  .icon {
+    flex-shrink: 0;
+  }
+
+  .freshness-label {
+    line-height: 1;
+  }
+}
+
+.state-verified {
+  color: var(--color-success, hsl(140, 60%, 35%));
+}
+
+.state-outdated {
+  color: var(--color-warning, hsl(35, 90%, 45%));
+}
+
+.state-offline {
+  color: var(--color-error, hsl(0, 70%, 45%));
+}
+
+.state-unknown,
+.state-stale-known,
+.state-checking {
+  color: var(--color-base-content);
+  opacity: 0.6;
+}
+
+.spin {
+  animation: freshness-spin 1s linear infinite;
+}
+
+@keyframes freshness-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .freshness-label {
+    display: none;
+  }
+}
+</style>

src/components/RepoList.vue

@@ -40,6 +40,7 @@ const getStyle = (seed: string) => {
 <style scoped lang="scss">
 .repo-list {
   display: flex;
+  justify-content: space-evenly;
   gap: 1rem;
   flex-wrap: wrap;
 

src/components/StackedNote.vue

@@ -13,18 +13,32 @@ import { useFile } from "@/hooks/useFile.hook"
 import { useGitHubContent } from "@/hooks/useGitHubContent.hook"
 import { useImages } from "@/hooks/useImages.hook"
 import { useLinks } from "@/hooks/useLinks.hook"
-import { runMermaid, useShikiji } from "@/hooks/useMarkdown.hook"
+import {
+  renderCodeFile,
+  runMermaid,
+  useShikiji
+} from "@/hooks/useMarkdown.hook"
+import { useNoteFreshness } from "@/hooks/useNoteFreshness.hook"
 import { useNoteOverlay } from "@/hooks/useNoteOverlay.hook"
 import { useRouteQueryStackedNotes } from "@/hooks/useRouteQueryStackedNotes.hook"
 import { useTitleNotes } from "@/hooks/useTitleNotes.hook"
 import { useUserRepoStore } from "@/modules/repo/store/userRepo.store"
 import { encodeUTF8ToBase64 } from "@/utils/decodeBase64ToUTF8"
+import { getFileLanguage, isMarkdownPath } from "@/utils/fileLanguage"
 import { filenameToNoteTitle } from "@/utils/noteTitle"
 
 const LinkedNotes = defineAsyncComponent(
   () => import("@/components/LinkedNotes.vue")
 )
 
+const NoteFreshnessBadge = defineAsyncComponent(
+  () => import("@/components/NoteFreshnessBadge.vue")
+)
+
+const NoteConflictModal = defineAsyncComponent(
+  () => import("@/components/NoteConflictModal.vue")
+)
+
 const EditNote = defineAsyncComponent(
   () => import("@/modules/note/components/EditNote.vue")
 )
@@ -53,6 +67,35 @@ const {
   getEditedSha
 } = useFile(sha)
 const initialRawContent = ref<string | null>(null)
+const isMarkdown = computed(() =>
+  path.value ? isMarkdownPath(path.value) : true
+)
+const displayedContent = ref("")
+
+watch(
+  [rawContent, isMarkdown, path],
+  async ([raw, isMd, p]) => {
+    if (!raw) {
+      displayedContent.value = ""
+      return
+    }
+    if (isMd) {
+      displayedContent.value = content.value
+      return
+    }
+    const lang = p ? getFileLanguage(p) : null
+    const filename = p?.split("/").pop()
+    const result = await renderCodeFile({ rawContent: raw, lang, filename })
+    if (rawContent.value === raw) {
+      displayedContent.value = result
+    }
+  },
+  { immediate: true }
+)
+
+watch(content, (c) => {
+  if (isMarkdown.value) displayedContent.value = c
+})
 const className = computed(() => `stacked-note-${props.index}`)
 const { listenToClick } = useLinks(className.value, sha)
 const titleClassName = computed(() => `title-${className.value}`)
@@ -70,10 +113,34 @@ const { updateFile } = useGitHubContent({
   repo: repo.value
 })
 
+const {
+  status: freshnessStatus,
+  lastCheckedAt,
+  latestSha,
+  check: checkFreshness,
+  pullLatest
+} = useNoteFreshness({
+  user: user.value,
+  repo: repo.value,
+  sha,
+  path,
+  getEditedSha
+})
+
+const conflictOpen = ref(false)
+
 onMounted(async () => {
   initialRawContent.value = await getRawContent()
 })
 
+watch(
+  path,
+  (p) => {
+    if (p) void checkFreshness()
+  },
+  { immediate: true }
+)
+
 const { mode, toggleMode } = useEditionMode()
 
 watch([content, mode], () => {
@@ -92,13 +159,49 @@ watch([content, mode], () => {
       runMermaid(`.note-${sha.value} .mermaid`)
     }
 
-    if (rawContent.value.includes("```")) {
+    if (isMarkdown.value && rawContent.value.includes("```")) {
       useShikiji()
     }
   })
 })
 
+const performSave = async (overrideSha?: string) => {
+  if (!path.value) {
+    console.warn("no path found for this file")
+    return
+  }
+
+  const editedSha = overrideSha ?? (await getEditedSha()) ?? sha.value
+  const { sha: newSha, conflict } = await updateFile({
+    content: rawContent.value,
+    path: path.value,
+    sha: editedSha
+  })
+
+  if (conflict) {
+    await checkFreshness()
+    conflictOpen.value = true
+    if (mode.value === "read") toggleMode()
+    return
+  }
+
+  if (!newSha) {
+    console.warn("no new SHA found for this file")
+    return
+  }
+
+  await saveCacheNote(encodeUTF8ToBase64(rawContent.value), {
+    editedSha: newSha
+  })
+  initialRawContent.value = rawContent.value
+}
+
 watch(mode, async (newMode) => {
+  if (newMode === "edit") {
+    void checkFreshness()
+    return
+  }
+
   const hasUserFinishedToEdit =
     newMode === "read" && rawContent.value !== initialRawContent.value
 
@@ -107,28 +210,54 @@ watch(mode, async (newMode) => {
   }
   if (!path.value) {
     console.warn("no path found for this file")
-
     return
   }
 
-  const editedSha = (await getEditedSha()) ?? sha.value
-  const newSha = await updateFile({
-    content: rawContent.value,
-    path: path.value,
-    sha: editedSha
-  })
-
-  if (!newSha) {
-    console.warn("no new SHA found for this file")
-
+  await checkFreshness()
+  if (freshnessStatus.value === "outdated") {
+    conflictOpen.value = true
     return
   }
 
-  await saveCacheNote(encodeUTF8ToBase64(rawContent.value), {
-    editedSha: newSha
-  })
-  initialRawContent.value = rawContent.value
+  await performSave()
 })
+
+const onConflictDiscard = async () => {
+  const newRaw = await pullLatest()
+  if (newRaw !== null) {
+    rawContent.value = newRaw
+    initialRawContent.value = newRaw
+  }
+}
+
+const onConflictOverwrite = async () => {
+  if (latestSha.value) {
+    await performSave(latestSha.value)
+  }
+}
+
+const onConflictCancel = () => {
+  if (mode.value === "read") toggleMode()
+}
+
+const onBadgeClick = async () => {
+  if (freshnessStatus.value !== "outdated") {
+    await checkFreshness()
+    return
+  }
+
+  const hasUnsavedEdits = rawContent.value !== initialRawContent.value
+  if (hasUnsavedEdits) {
+    conflictOpen.value = true
+    return
+  }
+
+  const newRaw = await pullLatest()
+  if (newRaw !== null) {
+    rawContent.value = newRaw
+    initialRawContent.value = newRaw
+  }
+}
 </script>
 
 <template>
@@ -140,23 +269,16 @@ watch(mode, async (newMode) => {
       [`note-${sha}`]: true
     }"
   >
-    <a
-      class="title-stacked-note-link"
-      @click.prevent="scrollToFocusedNote(props.sha)"
-    >
-      <div
-        class="title-stacked-note breadcrumbs text-sm"
-        :class="titleClassName"
-      >
-        <ul>
-          <li v-for="(part, i) in breadcrumbs" :key="i">
-            {{ part }}
-          </li>
-        </ul>
-      </div>
-    </a>
-    <section class="text-content">
+    <div class="title-stacked-note breadcrumbs text-sm" :class="titleClassName">
+      <div class="action-bar">
+        <note-freshness-badge
+          :status="freshnessStatus"
+          :last-checked-at="lastCheckedAt"
+          @click="onBadgeClick"
+          class="action"
+        />
         <button
+          v-if="isMarkdown"
           class="action button is-text is-light"
           :class="{ 'is-link': mode === 'edit' }"
           :style="mode === 'edit' ? 'color: var(--color-primary)' : ''"
@@ -205,12 +327,35 @@ watch(mode, async (newMode) => {
             <path d="M14 4l0 4l-6 0l0 -4" />
           </svg>
         </button>
-      <div v-if="mode === 'edit'" class="edit">
+      </div>
+      <a
+        class="title-stacked-note-link"
+        @click.prevent="scrollToFocusedNote({ noteId: props.sha })"
+      >
+        <ul>
+          <li v-for="(part, i) in breadcrumbs" :key="i">
+            {{ part }}
+          </li>
+        </ul>
+      </a>
+    </div>
+    <section class="text-content">
+      <div v-if="mode === 'edit' && isMarkdown" class="edit">
         <edit-note v-model="rawContent" />
       </div>
-      <div v-if="mode === 'read'" class="note-content" v-html="content"></div>
+      <div
+        v-if="mode === 'read'"
+        class="note-content"
+        v-html="displayedContent"
+      ></div>
     </section>
     <linked-notes v-if="hasBacklinks && content" :sha="sha" />
+    <note-conflict-modal
+      v-model:open="conflictOpen"
+      @discard="onConflictDiscard"
+      @overwrite="onConflictOverwrite"
+      @cancel="onConflictCancel"
+    />
   </div>
 </template>
 
@@ -228,7 +373,7 @@ $border-color: rgba(18, 19, 58, 0.2);
   }
 
   section {
-    padding: 0 0.5rem 2rem;
+    padding: 0 0.5rem;
   }
 }
 
@@ -242,7 +387,6 @@ $border-color: rgba(18, 19, 58, 0.2);
   background-color: var(--color-base-100);
   color: var(--color-base-content);
   font-size: 0.8em;
-  overflow: hidden;
 
   ul,
   li {
@@ -257,14 +401,25 @@ $border-color: rgba(18, 19, 58, 0.2);
   flex: 1;
   scrollbar-width: none;
 
-  div {
+  > .edit,
+  > .note-content {
     height: 100%;
   }
 }
 
+.action-bar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.25rem;
+}
+
 .action {
-  float: right;
-  margin: 0.2rem;
+  margin: 0;
+
+  &:hover {
+    cursor: pointer;
+  }
 
   img {
     vertical-align: bottom;
@@ -274,9 +429,10 @@ $border-color: rgba(18, 19, 58, 0.2);
 @media screen and (max-width: 768px) {
   .stacked-note {
     padding: 0 0.75rem 1rem;
+    height: 100dvh;
 
     section {
-      padding: 1rem 0 2rem;
+      padding: 1rem 0;
       overflow-x: auto;
     }
 
@@ -291,10 +447,12 @@ $border-color: rgba(18, 19, 58, 0.2);
   .stacked-note {
     border-top: 0;
     border-left: 1px solid $border-color;
+    position: sticky;
+    top: 0;
   }
 
   .title-stacked-note {
-    padding: 0 1rem;
+    padding: 0;
     transform-origin: 0 0;
     transform: rotate(90deg);
   }
@@ -302,6 +460,12 @@ $border-color: rgba(18, 19, 58, 0.2);
   a {
     white-space: nowrap;
   }
+
+  .action-bar {
+    .action {
+      transform: rotate(-90deg);
+    }
+  }
 }
 
 @media print {

src/components/StackedPublicNote.vue

@@ -97,7 +97,7 @@ watch(
   >
     <a
       class="title-stacked-note-link"
-      @click.prevent="scrollToFocusedNote(didrkey)"
+      @click.prevent="scrollToFocusedNote({ noteId: didrkey })"
     >
       <div
         class="title-stacked-note breadcrumbs text-sm"
@@ -130,7 +130,7 @@ $border-color: rgba(18, 19, 58, 0.2);
   }
 
   section {
-    padding: 0 0.5rem 2rem;
+    padding: 0 0.5rem;
   }
 }
 
@@ -144,7 +144,6 @@ $border-color: rgba(18, 19, 58, 0.2);
   background-color: var(--color-base-100);
   color: var(--color-base-content);
   font-size: 0.8em;
-  overflow: hidden;
 
   ul,
   li {
@@ -178,7 +177,7 @@ $border-color: rgba(18, 19, 58, 0.2);
     padding: 0 0.75rem 1rem;
 
     section {
-      padding: 1rem 0 2rem;
+      padding: 1rem 0;
       overflow-x: auto;
     }
 
@@ -193,6 +192,8 @@ $border-color: rgba(18, 19, 58, 0.2);
   .stacked-note {
     border-top: 0;
     border-left: 1px solid $border-color;
+    position: sticky;
+    top: 0;
   }
 
   .title-stacked-note {

src/constants/note-width.ts

@@ -10,3 +10,7 @@ export const getNoteWidth = () => {
   }
   return cached
 }
+
+export const resetNoteWidthCache = () => {
+  cached = undefined
+}

src/data/data.ts

@@ -1,166 +1,31 @@
+import { wrap } from "comlink"
 import { nanoid } from "nanoid"
-import indexedDb from "pouchdb-adapter-indexeddb"
-import PouchDb from "pouchdb-browser"
 
 import { DataType } from "./DataType.enum"
 import { Model } from "./models/Model"
 
-PouchDb.plugin(indexedDb)
-
-interface GetAllParams {
+export interface DataApi {
+  add<DT extends DataType>(model: Model<DT>): Promise<boolean>
+  update<DT extends DataType, T extends Model<DT>>(model: T): Promise<boolean>
+  remove(id: string): Promise<boolean>
+  get<DT extends DataType, T extends Model<DT>>(id: string): Promise<T | null>
+  getOrCreate<DT extends DataType, T extends Model<DT>>(
+    id: string,
+    initialValue: T
+  ): Promise<T>
+  getAll<DT extends DataType, T extends Model<DT>>(params: {
     prefix?: string
     includeDocs?: boolean
     includeAttachments?: boolean
     keys?: string[]
+  }): Promise<T[]>
 }
 
-class Data {
-  // oxlint-disable-next-line typescript/ban-types
-  private readonly locale: PouchDB.Database<{}> | null = null
-
-  constructor() {
-    try {
-      this.locale = new PouchDb("remanso", {
-        adapter: "indexeddb"
-      })
-    } catch (error) {
-      console.warn("data error", error)
-    }
-  }
-
-  public async add<DT extends DataType>(model: Model<DT>): Promise<boolean> {
-    try {
-      const result = await this.locale?.put(model)
-      return result?.ok ?? false
-    } catch (error) {
-      console.warn(error)
-
-      return false
-    }
-  }
-
-  public async update<DT extends DataType, T extends Model<DT>>(
-    model: T
-  ): Promise<boolean> {
-    try {
-      if (!model._id) {
-        const result = await this.locale?.put(model)
-        return result?.ok ?? false
-      }
-
-      const oldModel = await this.get(model._id)
-      if (oldModel) {
-        const result = await this.locale?.put({ ...oldModel, ...model })
-        return result?.ok ?? false
-      }
-
-      const result = await this.locale?.put(model)
-      return result?.ok ?? false
-    } catch (error) {
-      console.warn(error)
-
-      return false
-    }
-  }
-
-  public async remove(id: string): Promise<boolean> {
-    try {
-      const doc = await this.get(id)
-      if (!doc) {
-        return false
-      }
-      const result = await this.locale?.put({
-        ...doc,
-        _deleted: true
-      })
-      return result?.ok ?? false
-    } catch {
-      return false
-    }
-  }
-
-  public async get<DT extends DataType, T extends Model<DT>>(
-    id: string
-  ): Promise<T | null> {
-    try {
-      return ((await this.locale?.get(id)) as T) || null
-    } catch {
-      return null
-    }
-  }
-
-  public async getOrCreate<DT extends DataType, T extends Model<DT>>(
-    id: string,
-    initialValue: T
-  ): Promise<T> {
-    const element = await this.get<DT, T>(id)
-
-    if (element) {
-      return element
-    }
-
-    await data.add<DT>({ ...initialValue, _id: id })
-
-    return this.getOrCreate(id, initialValue)
-  }
-
-  public async getAll<DT extends DataType, T extends Model<DT>>({
-    prefix,
-    includeDocs = true,
-    includeAttachments = false,
-    keys = []
-  }: GetAllParams): Promise<T[]> {
-    if (!this.locale) {
-      return []
-    }
-
-    if (keys.length) {
-      const response = await this.locale.allDocs({
-        include_docs: includeDocs,
-        attachments: includeAttachments,
-        keys: keys.map((key) => this.generateId(prefix, key))
-      })
-
-      if (includeDocs) {
-        return response.rows
-          .map((row) => {
-            if ("error" in row) {
-              return null
-            }
-
-            return row.doc
-          })
-          .filter(Boolean) as T[]
-      } else {
-        return response.rows
-          .map((row) => {
-            if ("error" in row) {
-              return null
-            }
-
-            return { _id: row.id }
-          })
-          .filter(Boolean) as T[]
-      }
-    }
-
-    const response = await this.locale.allDocs({
-      include_docs: includeDocs,
-      attachments: includeAttachments,
-      startkey: prefix ? prefix : undefined,
-      endkey: prefix ? `${prefix}\ufff0` : undefined
-    })
-
-    return response.rows.map((row) => row.doc) as T[]
-  }
-
-  public generateId(type?: DataType | string, id?: string) {
-    if (!type) {
-      return id || nanoid()
-    }
-
+export const generateId = (type?: DataType | string, id?: string): string => {
+  if (!type) return id || nanoid()
   return `${type}-${id || nanoid()}`
-  }
 }
 
-export const data = new Data()
+import DataWorker from "./data.worker?worker"
+
+export const data = wrap(new DataWorker()) as unknown as DataApi

src/data/data.worker.ts

@@ -0,0 +1,156 @@
+import { expose } from "comlink"
+import { nanoid } from "nanoid"
+import indexedDb from "pouchdb-adapter-indexeddb"
+import PouchDb from "pouchdb-browser"
+
+import { DataType } from "./DataType.enum"
+import { Model } from "./models/Model"
+
+PouchDb.plugin(indexedDb)
+
+interface GetAllParams {
+  prefix?: string
+  includeDocs?: boolean
+  includeAttachments?: boolean
+  keys?: string[]
+}
+
+class Data {
+  // oxlint-disable-next-line typescript/ban-types
+  private readonly locale: PouchDB.Database<{}> | null = null
+
+  constructor() {
+    try {
+      this.locale = new PouchDb("remanso", {
+        adapter: "indexeddb"
+      })
+    } catch (error) {
+      console.warn("data error", error)
+    }
+  }
+
+  private buildId(type?: DataType | string, id?: string): string {
+    if (!type) return id || nanoid()
+    return `${type}-${id || nanoid()}`
+  }
+
+  public async add<DT extends DataType>(model: Model<DT>): Promise<boolean> {
+    try {
+      const result = await this.locale?.put(model)
+      return result?.ok ?? false
+    } catch (error) {
+      console.warn(error)
+      return false
+    }
+  }
+
+  public async update<DT extends DataType, T extends Model<DT>>(
+    model: T
+  ): Promise<boolean> {
+    try {
+      if (!model._id) {
+        const result = await this.locale?.put(model)
+        return result?.ok ?? false
+      }
+
+      const oldModel = await this.get(model._id)
+      if (oldModel) {
+        const result = await this.locale?.put({ ...oldModel, ...model })
+        return result?.ok ?? false
+      }
+
+      const result = await this.locale?.put(model)
+      return result?.ok ?? false
+    } catch (error) {
+      console.warn(error)
+      return false
+    }
+  }
+
+  public async remove(id: string): Promise<boolean> {
+    try {
+      const doc = await this.get(id)
+      if (!doc) {
+        return false
+      }
+      const result = await this.locale?.put({
+        ...doc,
+        _deleted: true
+      })
+      return result?.ok ?? false
+    } catch {
+      return false
+    }
+  }
+
+  public async get<DT extends DataType, T extends Model<DT>>(
+    id: string
+  ): Promise<T | null> {
+    try {
+      return ((await this.locale?.get(id)) as T) || null
+    } catch {
+      return null
+    }
+  }
+
+  public async getOrCreate<DT extends DataType, T extends Model<DT>>(
+    id: string,
+    initialValue: T
+  ): Promise<T> {
+    const element = await this.get<DT, T>(id)
+
+    if (element) {
+      return element
+    }
+
+    await this.add<DT>({ ...initialValue, _id: id })
+
+    return this.getOrCreate(id, initialValue)
+  }
+
+  public async getAll<DT extends DataType, T extends Model<DT>>({
+    prefix,
+    includeDocs = true,
+    includeAttachments = false,
+    keys = []
+  }: GetAllParams): Promise<T[]> {
+    if (!this.locale) {
+      return []
+    }
+
+    if (keys.length) {
+      const response = await this.locale.allDocs({
+        include_docs: includeDocs,
+        attachments: includeAttachments,
+        keys: keys.map((key) => this.buildId(prefix, key))
+      })
+
+      if (includeDocs) {
+        return response.rows
+          .map((row) => {
+            if ("error" in row) return null
+            return row.doc
+          })
+          .filter(Boolean) as T[]
+      } else {
+        return response.rows
+          .map((row) => {
+            if ("error" in row) return null
+            return { _id: row.id }
+          })
+          .filter(Boolean) as T[]
+      }
+    }
+
+    const response = await this.locale.allDocs({
+      include_docs: includeDocs,
+      attachments: includeAttachments,
+      startkey: prefix ? prefix : undefined,
+      endkey: prefix ? `${prefix}\ufff0` : undefined
+    })
+
+    return response.rows.map((row) => row.doc) as T[]
+  }
+}
+
+expose(new Data())

src/hooks/useATProtoLinks.hook.ts

@@ -17,8 +17,8 @@ export const useATProtoLinks = (
   const { currentAtUri, mainNoteId } = options
 
   const linkNote = (event: Event) => {
-    const target = event.target as HTMLElement
-    const href = target.getAttribute("href")
+    const anchor = (event.target as HTMLElement).closest("a")
+    const href = anchor?.getAttribute("href")
 
     if (!href) {
       return
@@ -50,7 +50,7 @@ export const useATProtoLinks = (
         : `${params.shortDid}-${params.rkey}`
 
       if (noteId === toValue(mainNoteId)) {
-        scrollToFocusedNote(null)
+        scrollToFocusedNote()
         return
       }
 
@@ -67,7 +67,7 @@ export const useATProtoLinks = (
       const noteId = `${toShortDid(did)}-${rkey}`
 
       if (noteId === toValue(mainNoteId)) {
-        scrollToFocusedNote(null)
+        scrollToFocusedNote()
         return
       }
 

src/hooks/useATProtoLogin.hook.ts

@@ -14,14 +14,32 @@ import {
 
 const did = ref<string | null>(null)
 const handle = ref<string | null>(null)
+const avatarUrl = ref<string | null>(null)
 
 let init = true
 
+const fetchAvatar = async (actorDid: string) => {
+  try {
+    const res = await fetch(
+      `https://public.api.bsky.app/xrpc/app.bsky.actor.getProfile?actor=${encodeURIComponent(actorDid)}`
+    )
+    if (res.ok) {
+      const data = await res.json()
+      avatarUrl.value = data.avatar ?? null
+    }
+  } catch {
+    avatarUrl.value = null
+  }
+}
+
 const initializeAuth = async () => {
   // Load cached session from IndexedDB first (fast, local) so the UI can render immediately
   const stored = await loadSession()
   did.value = stored?.did ?? ""
   handle.value = stored?.handle ?? ""
+  if (stored?.did) {
+    fetchAvatar(stored.did)
+  }
 
   // Then restore OAuth session in the background (may involve network)
   const session = await restoreSession()
@@ -32,6 +50,7 @@ const initializeAuth = async () => {
     did.value = session.did
     handle.value = resolvedHandle
     await saveSession(session.did, resolvedHandle)
+    fetchAvatar(session.did)
 
     window.history.replaceState(
       null,
@@ -61,11 +80,13 @@ export const useATProtoLogin = () => {
     await clearSession()
     did.value = ""
     handle.value = ""
+    avatarUrl.value = null
   }
 
   return {
     did,
     handle,
+    avatarUrl,
     isLoggedIn,
     isATProtoReady,
     signIn,

src/hooks/useBacklinks.hook.ts

@@ -2,7 +2,7 @@ import { useAsyncState } from "@vueuse/core"
 import { ComputedRef, onUnmounted, toValue } from "vue"
 
 import { backlinkEventBus } from "@/bus/backlinkEventBus"
-import { data } from "@/data/data"
+import { data, generateId } from "@/data/data"
 import { DataType } from "@/data/DataType.enum"
 import { BacklinkNote } from "@/modules/note/models/BacklinkNote"
 
@@ -11,7 +11,7 @@ export const useBacklinks = (sha: string | ComputedRef<string>) => {
 
   const { state: backlink, execute } = useAsyncState(
     data.get<DataType.BacklinkNote, BacklinkNote>(
-      data.generateId(DataType.BacklinkNote, sha)
+      generateId(DataType.BacklinkNote, sha)
     ),
     null,
     {

src/hooks/useCheckboxCommit.hook.ts

@@ -74,7 +74,7 @@ export const useCheckboxCommit = ({
 
     isCommitting.value = true
 
-    const newSha = await updateFile({
+    const { sha: newSha } = await updateFile({
       content: pendingContent.value,
       path: pathValue,
       sha: currentSha.value

src/hooks/useComputeBacklinks.hook.ts

@@ -1,7 +1,7 @@
 import { watch } from "vue"
 
 import { backlinkEventBus } from "@/bus/backlinkEventBus"
-import { data } from "@/data/data"
+import { data, generateId } from "@/data/data"
 import { DataType } from "@/data/DataType.enum"
 import { useFile } from "@/hooks/useFile.hook"
 import { Backlink } from "@/modules/note/models/Backlink"
@@ -14,10 +14,21 @@ import { confirmMessage } from "@/utils/notif"
 
 const isMarkdown = (filename?: string) => filename?.endsWith(".md") ?? false
 
+const yieldToMain = () =>
+  "scheduler" in globalThis
+    ? (
+        globalThis as unknown as { scheduler: { yield: () => Promise<void> } }
+      ).scheduler.yield()
+    : new Promise<void>((r) => setTimeout(r, 0))
+
 export const useComputeBacklinks = () => {
   const store = useUserRepoStore()
 
-  watch(store, async () => {
+  watch(
+    () => store.files,
+    async () => {
+      await new Promise<void>((r) => setTimeout(r, 300))
+
       if (!store.userSettings?.backlink) {
         return
       }
@@ -27,14 +38,17 @@ export const useComputeBacklinks = () => {
       const backlinks: Map<string, Backlink[]> = new Map()
 
       for (const file of store.files) {
+        await yieldToMain()
+
         if (!isMarkdown(file.path) || !file.sha) {
           continue
         }
 
-      const fileBacklinkId = data.generateId(DataType.BacklinkNote, file.sha)
-      const fileBacklink = await data.get<DataType.BacklinkNote, BacklinkNote>(
-        fileBacklinkId
-      )
+        const fileBacklinkId = generateId(DataType.BacklinkNote, file.sha)
+        const fileBacklink = await data.get<
+          DataType.BacklinkNote,
+          BacklinkNote
+        >(fileBacklinkId)
         if (fileBacklink) {
           continue
         }
@@ -91,7 +105,7 @@ export const useComputeBacklinks = () => {
       }
 
       for (const [sha, fileBacklinks] of backlinks) {
-      const fileBacklinkId = data.generateId(DataType.BacklinkNote, sha)
+        const fileBacklinkId = generateId(DataType.BacklinkNote, sha)
         const backlinkNote: BacklinkNote = {
           _id: fileBacklinkId,
           $type: DataType.BacklinkNote,
@@ -102,5 +116,6 @@ export const useComputeBacklinks = () => {
         await data.update(backlinkNote)
         backlinkEventBus.emit({ fileSha: sha })
       }
-  })
+    }
+  )
 }

src/hooks/useGitHubContent.hook.ts

@@ -2,6 +2,8 @@ import { getOctokit } from "@/modules/repo/services/octo"
 import { encodeUTF8ToBase64 } from "@/utils/decodeBase64ToUTF8"
 import { confirmMessage, errorMessage } from "@/utils/notif"
 
+const isConflictStatus = (status: number) => status === 409 || status === 422
+
 export const useGitHubContent = ({
   user,
   repo
@@ -9,6 +11,26 @@ export const useGitHubContent = ({
   user: string
   repo: string
 }) => {
+  const fetchLatestSha = async (path: string): Promise<string | null> => {
+    try {
+      const octokit = await getOctokit()
+      const response = await octokit.request(
+        "GET /repos/{owner}/{repo}/contents/{path}",
+        {
+          owner: user,
+          repo,
+          path,
+          headers: { "X-GitHub-Api-Version": "2022-11-28" }
+        }
+      )
+      const data = response?.data
+      if (Array.isArray(data) || !data) return null
+      return "sha" in data ? data.sha : null
+    } catch {
+      return null
+    }
+  }
+
   const putFile = async ({
     content,
     path,
@@ -17,7 +39,7 @@ export const useGitHubContent = ({
     content: string
     path: string
     sha?: string
-  }) => {
+  }): Promise<{ sha: string | null; conflict: boolean }> => {
     try {
       const octokit = await getOctokit()
 
@@ -35,18 +57,27 @@ export const useGitHubContent = ({
 
       confirmMessage("✅ Note saved")
 
-      return response?.data.content?.sha ?? null
+      return { sha: response?.data.content?.sha ?? null, conflict: false }
     } catch (error) {
+      const status = (error as { status?: number })?.status
+      if (status && isConflictStatus(status)) {
+        errorMessage("⚠ Conflict: this note changed on GitHub")
+        console.warn(error)
+        return { sha: null, conflict: true }
+      }
       errorMessage("❌ Note could not be saved")
       console.warn(error)
+      return { sha: null, conflict: false }
     }
-
-    return null
   }
 
   return {
-    updateFile: async (props: { content: string; path: string; sha: string }) =>
-      putFile(props),
+    fetchLatestSha,
+    updateFile: async (props: {
+      content: string
+      path: string
+      sha: string
+    }) => putFile(props),
     createFile: async (props: { content: string; path: string }) =>
       putFile(props)
   }

src/hooks/useLinks.hook.ts

@@ -11,14 +11,23 @@ export const useLinks = (
   const store = useUserRepoStore()
 
   const linkNote: EventListener = (event) => {
-    const target = event.target as HTMLElement
-    const href = target.getAttribute("href")
+    const anchor = (event.target as HTMLElement).closest("a")
+    const href = anchor?.getAttribute("href")
 
     if (!href) {
       return
     }
 
     if (href.startsWith("#")) {
+      event.preventDefault()
+      const id = href.slice(1)
+      const container = document.querySelector(`.${toValue(className)}`)
+      const heading = container?.querySelector(`#${CSS.escape(id)}`)
+      heading?.scrollIntoView({
+        block: "start",
+        inline: "nearest",
+        behavior: "smooth"
+      })
       return
     }
 
@@ -30,8 +39,13 @@ export const useLinks = (
       return
     }
 
+    const hashIndex = href.indexOf("#")
+    const path = hashIndex === -1 ? href : href.slice(0, hashIndex)
+    const hash = hashIndex === -1 ? undefined : href.slice(hashIndex + 1)
+
     noteEventBus.emit({
-      path: href,
+      path,
+      hash,
       currentNoteSHA: toValue(sha),
       user: store.user,
       repo: store.repo

src/hooks/useMarkdown.hook.ts

@@ -1,15 +1,21 @@
+import type { MarkdownItTabData, MarkdownItTabInfo } from "@mdit/plugin-tab"
+import { tab } from "@mdit/plugin-tab"
 import markdownItKatex from "@vscode/markdown-it-katex"
+import GithubSlugger from "github-slugger"
 import MarkdownIt, { Options } from "markdown-it"
 import Renderer, { type RenderRuleRecord } from "markdown-it/lib/renderer.mjs"
 import type Token from "markdown-it/lib/token.mjs"
+import markdownItAnchor from "markdown-it-anchor"
 import blockEmbedPlugin from "markdown-it-block-embed"
 import markdownItCheckbox from "markdown-it-checkbox"
 import MarkdownItGitHubAlerts from "markdown-it-github-alerts"
 import markdownItIframe from "markdown-it-iframe"
 import Shikiji from "markdown-it-shikiji"
 import mermaid from "mermaid"
+import type { LanguageRegistration } from "shikiji-core"
 import { Ref, toValue } from "vue"
 
+import alloyGrammar from "@/utils/alloy.tmLanguage.json"
 import { decodeBase64ToUTF8 } from "@/utils/decodeBase64ToUTF8"
 import { html5Media } from "@/utils/markdown/markdown-html5-media"
 import { markdownItTablerIcons } from "@/utils/markdown/markdown-it-tabler-icons"
@@ -45,6 +51,12 @@ const markdownItMermaidExtractor = (md: MarkdownIt) => {
   }
 }
 
+const slugger = new GithubSlugger()
+
+let tabGroupCounter = 0
+let currentTabGroup = 0
+let currentTabActiveSet = false
+
 const md = new MarkdownIt({
   typographer: true,
   quotes: ["«\xA0", "\xA0»", "‹\xA0", "\xA0›"]
@@ -64,17 +76,32 @@ const md = new MarkdownIt({
   })
   .use(MarkdownItGitHubAlerts)
   .use(markdownItTablerIcons)
+  .use(tab, {
+    name: "tabs",
+    openRender: (info: MarkdownItTabInfo) => {
+      currentTabGroup = ++tabGroupCounter
+      currentTabActiveSet = info.active >= 0
+      return '<div class="tabs tabs-box">\n'
+    },
+    closeRender: () => "</div>\n",
+    tabOpenRender: (data: MarkdownItTabData) => {
+      const isChecked =
+        data.isActive || (!currentTabActiveSet && data.index === 0)
+      const checked = isChecked ? " checked" : ""
+      const title = data.title.replace(/"/g, "&quot;")
+      return `<input type="radio" name="md-tabs-${currentTabGroup}" class="tab" aria-label="${title}"${checked}>\n<div class="tab-content bg-base-100 border-base-300 rounded-box p-2">\n`
+    },
+    tabCloseRender: () => "</div>\n"
+  })
+  .use(markdownItAnchor, {
+    slugify: (s: string) => slugger.slug(s)
+  })
 
-let shikijiInitialized = false
+let shikijiPromise: Promise<void> | null = null
 
-export const useShikiji = async () => {
-  if (shikijiInitialized) {
-    return
-  }
-
-  shikijiInitialized = true
-  md.use(
-    await Shikiji({
+export const useShikiji = (): Promise<void> => {
+  if (!shikijiPromise) {
+    shikijiPromise = Shikiji({
       themes: {
         light: "vitesse-light",
         dark: "vitesse-black"
@@ -87,10 +114,18 @@ export const useShikiji = async () => {
         "mermaid",
         "html",
         "css",
-        "json"
+        "json",
+        {
+          ...alloyGrammar,
+          name: "alloy",
+          aliases: ["als"]
+        } as unknown as LanguageRegistration
       ]
+    }).then((plugin) => {
+      md.use(plugin)
     })
-  )
+  }
+  return shikijiPromise
 }
 
 let mermaidInitialized = false
@@ -123,11 +158,33 @@ const stripFrontmatter = (content: string): string => {
   return match ? content.slice(match[0].length) : content
 }
 
+const renderMarkdown = (content: string, env?: Record<string, unknown>) => {
+  slugger.reset()
+  return env ? md.render(content, env) : md.render(content)
+}
+
+export const renderCodeFile = async ({
+  rawContent,
+  lang,
+  filename
+}: {
+  rawContent: string
+  lang: string | null
+  filename?: string
+}): Promise<string> => {
+  await useShikiji()
+  const heading = filename ? `# ${filename}\n\n` : ""
+  if (lang !== null) {
+    return renderMarkdown(`${heading}\`\`\`\`${lang}\n${rawContent}\n\`\`\`\``)
+  }
+  return `${renderMarkdown(heading)}<pre><code>${md.utils.escapeHtml(rawContent)}</code></pre>`
+}
+
 export const markdownBuilder = (defaultPrefix?: Ref<string> | string) => {
   const getRawContent = (content: string) => decodeBase64ToUTF8(content)
   const renderFromUTF8 = (content: string, prefix?: string) => {
     return content
-      ? md.render(stripFrontmatter(content), {
+      ? renderMarkdown(stripFrontmatter(content), {
           docId: defaultPrefix ? toValue(defaultPrefix) : (prefix ?? "")
         })
       : ""
@@ -135,7 +192,7 @@ export const markdownBuilder = (defaultPrefix?: Ref<string> | string) => {
 
   return {
     toHTML: (content: string) =>
-      content ? md.render(stripFrontmatter(content)) : "",
+      content ? renderMarkdown(stripFrontmatter(content)) : "",
     render: (content: string, prefix?: string) =>
       renderFromUTF8(decodeBase64ToUTF8(content), prefix),
     renderFromUTF8,

src/hooks/useNoteFreshness.hook.ts

@@ -0,0 +1,106 @@
+import { computed, Ref, ref } from "vue"
+
+import { useGitHubContent } from "@/hooks/useGitHubContent.hook"
+import { markdownBuilder } from "@/hooks/useMarkdown.hook"
+import { prepareNoteCache } from "@/modules/note/cache/prepareNoteCache"
+import { queryFileContent } from "@/modules/repo/services/repo"
+import { useUserRepoStore } from "@/modules/repo/store/userRepo.store"
+
+export type FreshnessStatus =
+  | "unknown"
+  | "checking"
+  | "verified"
+  | "stale-known"
+  | "outdated"
+  | "offline"
+
+const STALE_AFTER_MS = 2 * 60 * 1000
+
+export const useNoteFreshness = ({
+  user,
+  repo,
+  sha,
+  path,
+  getEditedSha
+}: {
+  user: string
+  repo: string
+  sha: Ref<string>
+  path: Ref<string | undefined>
+  getEditedSha: () => Promise<string | null>
+}) => {
+  const store = useUserRepoStore()
+  const { fetchLatestSha } = useGitHubContent({ user, repo })
+
+  const rawStatus = ref<FreshnessStatus>("unknown")
+  const lastCheckedAt = ref<Date | null>(null)
+  const latestSha = ref<string | null>(null)
+  const tick = ref(0)
+  let staleTimer: ReturnType<typeof setTimeout> | null = null
+
+  const status = computed<FreshnessStatus>(() => {
+    void tick.value
+    if (rawStatus.value !== "verified") return rawStatus.value
+    if (!lastCheckedAt.value) return rawStatus.value
+    const age = Date.now() - lastCheckedAt.value.getTime()
+    return age > STALE_AFTER_MS ? "stale-known" : "verified"
+  })
+
+  const armStaleTimer = () => {
+    if (staleTimer) clearTimeout(staleTimer)
+    staleTimer = setTimeout(() => {
+      tick.value++
+    }, STALE_AFTER_MS + 100)
+  }
+
+  const expectedSha = async () => (await getEditedSha()) ?? sha.value
+
+  const check = async () => {
+    if (!path.value) return
+    rawStatus.value = "checking"
+    const remoteSha = await fetchLatestSha(path.value)
+    if (remoteSha === null) {
+      rawStatus.value = "offline"
+      return
+    }
+    latestSha.value = remoteSha
+    lastCheckedAt.value = new Date()
+    const local = await expectedSha()
+    rawStatus.value = remoteSha === local ? "verified" : "outdated"
+    armStaleTimer()
+  }
+
+  const pullLatest = async (): Promise<string | null> => {
+    if (!path.value) return null
+    const remoteSha = latestSha.value ?? (await fetchLatestSha(path.value))
+    if (!remoteSha) {
+      rawStatus.value = "offline"
+      return null
+    }
+    const fileContent = await queryFileContent(user, repo, remoteSha)
+    if (!fileContent) {
+      rawStatus.value = "offline"
+      return null
+    }
+    const { saveCacheNote } = prepareNoteCache(sha.value, path.value)
+    await saveCacheNote(fileContent, {
+      editedSha: remoteSha,
+      path: path.value
+    })
+    store.addFile({ path: path.value, sha: remoteSha })
+    latestSha.value = remoteSha
+    lastCheckedAt.value = new Date()
+    rawStatus.value = "verified"
+    armStaleTimer()
+    const { getRawContent } = markdownBuilder(sha.value)
+    return getRawContent(fileContent)
+  }
+
+  return {
+    status,
+    lastCheckedAt,
+    latestSha,
+    check,
+    pullLatest
+  }
+}

src/hooks/useNoteView.hook.ts

@@ -25,7 +25,7 @@ export const useNoteView = () => {
   )
 
   const unsubscribeLink = noteEventBus.addEventBusListener(
-    ({ path, currentNoteSHA }) => {
+    ({ path, hash, currentNoteSHA }) => {
       const currentFile = store.files.find(
         (file) => file.sha === currentNoteSHA
       )
@@ -38,7 +38,7 @@ export const useNoteView = () => {
         return
       }
 
-      addStackedNote(currentNoteSHA ?? "", file.sha)
+      addStackedNote(currentNoteSHA ?? "", file.sha, undefined, hash)
     }
   )
 

src/hooks/useOfflineNotes.hook.ts

@@ -1,7 +1,7 @@
 import { useAsyncState } from "@vueuse/core"
 import { computed, ref } from "vue"
 
-import { data } from "@/data/data"
+import { data, generateId } from "@/data/data"
 import { DataType } from "@/data/DataType.enum"
 import { prepareNoteCache } from "@/modules/note/cache/prepareNoteCache"
 import { Note } from "@/modules/note/models/Note"
@@ -36,7 +36,7 @@ export const useOfflineNotes = () => {
 
       if (
         !file.sha ||
-        cachedNotesSet.has(data.generateId(DataType.Note, file.sha))
+        cachedNotesSet.has(generateId(DataType.Note, file.sha))
       ) {
         continue
       }

src/hooks/useOverlay.hook.ts

@@ -10,31 +10,28 @@ export const useOverlay = (listen = true) => {
   const isMobile = computed(() => width.value <= MOBILE_BREAKPOINT)
 
   if (listen) {
-    // In Firefox/Chrome, body is the horizontal scroll container (body has
-    // computed overflow-x: auto from overflow-y: hidden). In Safari, the
-    // viewport (documentElement) is used instead. Listen on both.
     const updateScroll = () => {
-      x.value = document.body.scrollLeft || window.scrollX
-      y.value = document.body.scrollTop || window.scrollY
+      const mainApp = document.getElementById("main-app")
+      x.value = mainApp?.scrollLeft ?? 0
+      y.value = mainApp?.scrollTop ?? 0
     }
-    useEventListener(window, "scroll", updateScroll, {
-      passive: true,
-      capture: false
-    })
-    useEventListener(document.body, "scroll", updateScroll, {
-      passive: true,
-      capture: false
-    })
+    useEventListener(
+      () => document.getElementById("main-app"),
+      "scroll",
+      updateScroll,
+      { passive: true }
+    )
   }
 
   const scrollToNote = (to: number) => {
     const go = () => {
+      const mainApp = document.getElementById("main-app")
+      if (!mainApp) return
+
       if (isMobile.value) {
-        document.body.scrollTop = to
-        document.documentElement.scrollTop = to
+        mainApp.scrollTo({ top: to, behavior: "smooth" })
       } else {
-        document.body.scrollLeft = to
-        document.documentElement.scrollLeft = to
+        mainApp.scrollTo({ left: to, behavior: "smooth" })
       }
     }
 

src/hooks/useRepos.hook.ts

@@ -1,34 +1,82 @@
-import { useAsyncState } from "@vueuse/core"
+import { computed, ref } from "vue"
 
 import { useGitHubLogin } from "@/hooks/useGitHubLogin.hook"
 import { RepoBase } from "@/modules/repo/interfaces/RepoBase"
 import { getOctokit } from "@/modules/repo/services/octo"
 
+const PER_PAGE = 30
+const STALE_TIME_MS = 20 * 60 * 1000
+
+const repos = ref<RepoBase[]>([])
+const isReady = ref(false)
+const isLoading = ref(false)
+const hasCredentialError = ref(false)
+const currentPage = ref(0)
+const totalCount = ref(0)
+let lastFetchedAt = 0
+
 export const useRepos = () => {
   const { username, accessToken } = useGitHubLogin()
-  const repos = useAsyncState<RepoBase[]>(async () => {
+
+  const loadMore = async () => {
     if (!accessToken.value || !username.value) {
-      return []
+      isReady.value = true
+      return
     }
-
+    if (isLoading.value) return
+    isLoading.value = true
+    try {
       const octokit = await getOctokit()
-
+      const nextPage = currentPage.value + 1
       const repoList = await octokit.request("GET /search/repositories", {
         q: `user:${username.value}`,
-      per_page: 100
+        per_page: PER_PAGE,
+        page: nextPage
       })
-
-    return repoList.data.items
-      .map((item) => ({
+      currentPage.value = nextPage
+      totalCount.value = repoList.data.total_count
+      const newItems = repoList.data.items.map((item) => ({
         id: `${item.id}`,
         name: item.name,
         isPrivate: item.private
       }))
-      .sort((a, b) => (a.name < b.name ? -1 : 1))
-  }, [])
-
-  return {
-    repos: repos.state,
-    isReady: repos.isReady
+      repos.value = [...repos.value, ...newItems].sort((a, b) =>
+        a.name < b.name ? -1 : 1
+      )
+    } catch (err: unknown) {
+      if (
+        typeof err === "object" &&
+        err !== null &&
+        "status" in err &&
+        (err as { status: number }).status === 401
+      ) {
+        hasCredentialError.value = true
+      } else {
+        throw err
       }
+    } finally {
+      isReady.value = true
+      isLoading.value = false
+    }
+  }
+
+  const canLoadMore = computed(
+    () => !isLoading.value && repos.value.length < totalCount.value
+  )
+
+  const isStale = Date.now() - lastFetchedAt > STALE_TIME_MS
+  if (!isReady.value || isStale) {
+    if (isStale && isReady.value) {
+      repos.value = []
+      currentPage.value = 0
+      totalCount.value = 0
+      isReady.value = false
+      isLoading.value = false
+      hasCredentialError.value = false
+    }
+    lastFetchedAt = Date.now()
+    loadMore()
+  }
+
+  return { repos, isReady, hasCredentialError, canLoadMore, loadMore }
 }

src/hooks/useResizeContainer.hook.ts

@@ -1,4 +1,4 @@
-import { onMounted, type Ref, watch } from "vue"
+import { onMounted, onUnmounted, type Ref, watch } from "vue"
 
 import { getNoteWidth } from "@/constants/note-width"
 import { useOverlay } from "@/hooks/useOverlay.hook"
@@ -19,9 +19,9 @@ export const useResizeContainer = (
     }
 
     if (isMobile.value) {
-      container.style.height = `${(stackedNotes.value.length + 1) * 100}vh`
+      container.style.height = `${(stackedNotes.value.length + 1) * 100}dvh`
     } else {
-      container.style.width = `${
+      container.style.minWidth = `${
         getNoteWidth() * (stackedNotes.value.length + 1)
       }px`
     }
@@ -29,6 +29,11 @@ export const useResizeContainer = (
 
   onMounted(() => {
     resizeContainer()
+    window.addEventListener("resize", resizeContainer)
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener("resize", resizeContainer)
   })
 
   watch(stackedNotes, resizeContainer, {

src/hooks/useRouteQueryStackedNotes.hook.ts

@@ -20,22 +20,76 @@ export const useRouteQueryStackedNotes = () => {
 
   const { scrollToNote, isMobile } = useOverlay(false)
 
-  const scrollToFocusedNote = (
-    noteId: string | null = null,
-    notes: string[] = stackedNotes.value
+  const scrollToHashInNote = (
+    cleanSha: string,
+    hash: string,
+    smooth: boolean,
+    attempts = 30
   ) => {
+    if (attempts <= 0) {
+      return
+    }
+
+    const heading = document.querySelector(
+      `.note-${cleanSha} #${CSS.escape(hash)}`
+    )
+    if (heading) {
+      heading.scrollIntoView({
+        block: "start",
+        inline: "nearest",
+        behavior: smooth ? "smooth" : "auto"
+      })
+      return
+    }
+
+    requestAnimationFrame(() => {
+      scrollToHashInNote(cleanSha, hash, smooth, attempts - 1)
+    })
+  }
+
+  const scrollToNoteElement = (
+    cleanNoteId: string,
+    index: number,
+    attempts = 30
+  ) => {
+    const element = document.querySelector(
+      `.note-${cleanNoteId}`
+    ) as HTMLElement | null
+
+    if (element) {
+      scrollToNote((index + 1) * element.clientHeight)
+      return
+    }
+
+    if (attempts <= 0) {
+      scrollToNote((index + 1) * height.value)
+      return
+    }
+
+    requestAnimationFrame(() => {
+      scrollToNoteElement(cleanNoteId, index, attempts - 1)
+    })
+  }
+
+  type ScrollToFocusedNoteOptions = {
+    noteId?: string | null
+    notes?: string[]
+    hash?: string
+    smoothHash?: boolean
+  }
+
+  const scrollToFocusedNote = ({
+    noteId = null,
+    notes = stackedNotes.value,
+    hash,
+    smoothHash = false
+  }: ScrollToFocusedNoteOptions = {}) => {
     nextTick(() => {
       const index = noteId ? notes.findIndex((nid) => nid === noteId) : 0
 
       if (isMobile.value) {
         if (noteId) {
-          const cleanNoteId = noteId.replaceAll(":", "-")
-          const element = document.querySelector(
-            `.note-${cleanNoteId}`
-          ) as HTMLElement
-
-          const top = (index + 1) * (element?.clientHeight ?? height.value)
-          scrollToNote(top)
+          scrollToNoteElement(noteId.replaceAll(":", "-"), index)
         } else {
           scrollToNote(0)
         }
@@ -47,16 +101,25 @@ export const useRouteQueryStackedNotes = () => {
           scrollToNote(0)
         }
       }
+
+      if (hash && noteId) {
+        scrollToHashInNote(noteId.replaceAll(":", "-"), hash, smoothHash)
+      }
     })
   }
 
   const addStackedNote = (
     currentSha: string,
     sha: string,
-    selector?: string
+    selector?: string,
+    hash?: string
   ) => {
     if (stackedNotes.value.includes(sha)) {
-      scrollToFocusedNote(selector ?? sha)
+      scrollToFocusedNote({
+        noteId: selector ?? sha,
+        hash,
+        smoothHash: true
+      })
       return
     }
 
@@ -76,7 +139,7 @@ export const useRouteQueryStackedNotes = () => {
       stackedNotes.value = newStackedNotes
     }
 
-    scrollToFocusedNote(selector ?? sha, stackedNotes.value)
+    scrollToFocusedNote({ noteId: selector ?? sha, hash })
   }
 
   return {

src/modules/card/hooks/useSpacedRepetitionCards.ts

@@ -4,7 +4,7 @@ import { useAsyncState } from "@vueuse/core"
 import { addDays, isAfter } from "date-fns"
 import { computed, nextTick, watch } from "vue"
 
-import { data } from "@/data/data"
+import { data, generateId } from "@/data/data"
 import { DataType } from "@/data/DataType.enum"
 import { useFile } from "@/hooks/useFile.hook"
 import { useLinks } from "@/hooks/useLinks.hook"
@@ -51,7 +51,7 @@ export const useSpacedRepetitionCards = () => {
         const repetition = await data.getOrCreate<
           DataType.RepetitionCard,
           RepetitionCard
-        >(data.generateId(DataType.RepetitionCard, cardFile.path), {
+        >(generateId(DataType.RepetitionCard, cardFile.path), {
           $type: DataType.RepetitionCard,
           level: 1,
           repeatDate: new Date(),

src/modules/history/hooks/useLastVisitedRepos.hook.ts

@@ -1,17 +1,17 @@
 import { useAsyncState } from "@vueuse/core"
 import { computed } from "vue"
 
-import { data } from "@/data/data"
+import { data, generateId } from "@/data/data"
 import { DataType } from "@/data/DataType.enum"
 import { History } from "@/data/models/History"
 
-const HISTORY_ID = data.generateId(DataType.History, "history")
+const HISTORY_ID = generateId(DataType.History, "history")
 
 export const useLastVisitedRepos = () => {
   const history = useAsyncState(
     () =>
       data.get<DataType.History, History>(
-        data.generateId(DataType.History, "history")
+        generateId(DataType.History, "history")
       ),
     null
   )

src/modules/history/hooks/useVisitRepo.hook.ts

@@ -1,10 +1,10 @@
 import { Ref, toValue } from "vue"
 
-import { data } from "@/data/data"
+import { data, generateId } from "@/data/data"
 import { DataType } from "@/data/DataType.enum"
 import { History } from "@/data/models/History"
 
-const HISTORY_ID = data.generateId(DataType.History, "history")
+const HISTORY_ID = generateId(DataType.History, "history")
 const MAX_REPO_HISTORY = 10
 
 export const useVisitRepo = (newRepo: {

src/modules/note/cache/prepareNoteCache.ts

@@ -1,4 +1,4 @@
-import { data } from "@/data/data"
+import { data, generateId } from "@/data/data"
 import { DataType } from "@/data/DataType.enum"
 import { Note } from "@/modules/note/models/Note"
 import { useUserRepoStore } from "@/modules/repo/store/userRepo.store"
@@ -14,8 +14,8 @@ type NoteCacheResult =
 export const prepareNoteCache = (sha: string, path?: string) => {
   const store = useUserRepoStore()
 
-  const noteId = data.generateId(DataType.Note, sha)
-  const notePath = path ? data.generateId(DataType.Note, path) : null
+  const noteId = generateId(DataType.Note, sha)
+  const notePath = path ? generateId(DataType.Note, path) : null
   const getCachedNote = async (): Promise<NoteCacheResult> => {
     const note = await data.get<DataType.Note, Note>(noteId)
 

src/modules/post/data/client.ts

@@ -29,31 +29,19 @@ export const noteRouter = contract.router({
   noteLists: {
     method: "GET",
     path: "/notes",
-    query: type({
-      cursor: "string | undefined",
-      limit: "number | undefined"
-    }),
+    query: contract.type<{ cursor?: string; limit?: number }>(),
     responses: {
-      200: type({
-        notes: PublicNoteListItem.array()
-      })
+      200: contract.type<{ notes: PublicNoteListItem[] }>()
     },
     summary: "List all notes"
   },
   noteListsByDid: {
     method: "GET",
     path: "/:did/notes",
-    pathParams: type({
-      did: "string"
-    }),
-    query: type({
-      cursor: "string | undefined",
-      limit: "number | undefined"
-    }),
+    pathParams: contract.type<{ did: string }>(),
+    query: contract.type<{ cursor?: string; limit?: number }>(),
     responses: {
-      200: type({
-        notes: PublicNoteListItem.array()
-      })
+      200: contract.type<{ notes: PublicNoteListItem[] }>()
     },
     summary: "List all notes"
   }

src/modules/repo/hooks/useFavoriteRepos.hook.ts

@@ -1,6 +1,6 @@
 import { computed, onMounted, ref } from "vue"
 
-import { data } from "@/data/data"
+import { data, generateId } from "@/data/data"
 import { DataType } from "@/data/DataType.enum"
 import { useRepos } from "@/hooks/useRepos.hook"
 import { RepoBase } from "@/modules/repo/interfaces/RepoBase"
@@ -27,7 +27,7 @@ export const useFavoriteRepos = () => {
 
   const toggleFavorite = async (repo: RepoBase, isFavorite: boolean) => {
     const favorite: FavoriteRepo = {
-      _id: data.generateId(DataType.FavoriteRepo, repo.id),
+      _id: generateId(DataType.FavoriteRepo, repo.id),
       $type: DataType.FavoriteRepo,
       isFavorite,
       name: repo.name,

src/modules/repo/hooks/useRepoList.hook.ts

@@ -6,7 +6,7 @@ import { RepoBase } from "@/modules/repo/interfaces/RepoBase"
 
 export const useRepoList = () => {
   const { savedFavoriteRepos, addFavorite, removeFavorite } = useFavoriteRepos()
-  const { repos } = useRepos()
+  const { repos, canLoadMore, loadMore } = useRepos()
 
   const favoriteRepos = computed(() => {
     return repos.value.filter((repo) =>
@@ -38,6 +38,8 @@ export const useRepoList = () => {
     favoriteRepos,
     otherRepos,
     favoriteCheckboxes,
-    toggleCheckbox
+    toggleCheckbox,
+    canLoadMore,
+    loadMore
   }
 }

src/modules/repo/interfaces/UserSettings.ts

@@ -8,4 +8,7 @@ export interface UserSettings extends Model<DataType.UserSettings> {
   fontSize?: string
   chosenFontSize?: string
   backlink?: boolean
+  chosenTitleFont?: string
+  chosenBodyFont?: string
+  pageWidth?: string
 }

src/modules/repo/services/repo.ts

@@ -104,7 +104,16 @@ export const getUserSettingsContent = async (
     return null
   }
 
-  return JSON.parse(atob(content)) as UserSettings
+  const raw = JSON.parse(atob(content)) as UserSettings & {
+    t?: string
+    p?: string
+  }
+  const { t, p, ...rest } = raw
+  return {
+    ...rest,
+    chosenTitleFont: t,
+    chosenBodyFont: p
+  }
 }
 
 export const queryFileContent = async (

src/modules/repo/store/userRepo.store.ts

@@ -1,6 +1,7 @@
+import { toRaw } from "vue"
 import { defineStore } from "pinia"
 
-import { data } from "@/data/data"
+import { data, generateId } from "@/data/data"
 import { DataType } from "@/data/DataType.enum"
 import { RepoFile } from "@/modules/repo/interfaces/RepoFile"
 import { UserSettings } from "@/modules/repo/interfaces/UserSettings"
@@ -20,6 +21,7 @@ interface State {
   readme?: string | null
   userSettings?: UserSettings | null
   needToLogin: boolean
+  _requestId: number
 }
 
 export const useUserRepoStore = defineStore("USER_REPO_STATE", {
@@ -29,40 +31,83 @@ export const useUserRepoStore = defineStore("USER_REPO_STATE", {
     files: [],
     readme: undefined,
     userSettings: undefined,
-    needToLogin: false
+    needToLogin: false,
+    _requestId: 0
   }),
   actions: {
+    _persistLayout() {
+      if (!this.userSettings) return
+      try {
+        const {
+          chosenTitleFont,
+          chosenBodyFont,
+          chosenFontSize,
+          chosenFontFamily,
+          pageWidth
+        } = this.userSettings
+        localStorage.setItem(
+          `remanso:layout:${this.user}:${this.repo}`,
+          JSON.stringify({
+            chosenTitleFont,
+            chosenBodyFont,
+            chosenFontSize,
+            chosenFontFamily,
+            pageWidth
+          })
+        )
+      } catch {
+        // ignore
+      }
+    },
     async setUserRepo(user: string, repo: string) {
+      const requestId = ++this._requestId
       this.user = user
       this.repo = repo
 
-      const savedRepoId = data.generateId(DataType.SavedRepo, `${user}-${repo}`)
-      const cachedSavedRepo = await data.get<DataType.SavedRepo, SavedRepo>(
-        savedRepoId
-      )
+      let lsLayout: Partial<UserSettings> = {}
+      try {
+        const lsRaw = localStorage.getItem(`remanso:layout:${user}:${repo}`)
+        if (lsRaw) lsLayout = JSON.parse(lsRaw)
+      } catch {
+        // ignore
+      }
+
+      if (Object.keys(lsLayout).length) {
+        if (!this.userSettings)
+          this.userSettings = { $type: DataType.UserSettings }
+        Object.assign(this.userSettings, lsLayout)
+      }
+
+      const savedRepoId = generateId(DataType.SavedRepo, `${user}-${repo}`)
+      const userSettingsId = `UserSetting-${user}-${repo}`
+
+      const [cachedSavedRepo, cachedUserSettings] = await Promise.all([
+        data.get<DataType.SavedRepo, SavedRepo>(savedRepoId),
+        data.get<DataType.UserSettings, UserSettings>(userSettingsId)
+      ])
+
+      if (requestId !== this._requestId) return
 
       if (cachedSavedRepo) {
         this.files = cachedSavedRepo.files
       }
 
+      if (cachedUserSettings) {
+        // localStorage layout choices take priority over PouchDB cache
+        this.userSettings = { ...cachedUserSettings, ...lsLayout }
+      }
+
       try {
         await refreshToken()
       } catch (error) {
         console.warn("impossible to refresh token", error)
       }
 
-      const userSettingsId = `UserSetting-${user}-${repo}`
-      const cachedUserSettings = await data.get<
-        DataType.UserSettings,
-        UserSettings
-      >(userSettingsId)
-
-      if (cachedUserSettings) {
-        this.userSettings = cachedUserSettings
-      }
+      if (requestId !== this._requestId) return
 
       getFiles(user, repo)
         .then(async (files) => {
+          if (requestId !== this._requestId) return
           data.update<DataType.SavedRepo, SavedRepo>({
             _id: savedRepoId,
             $type: DataType.SavedRepo,
@@ -74,6 +119,7 @@ export const useUserRepoStore = defineStore("USER_REPO_STATE", {
           return getUserSettingsContent(user, repo, files)
         })
         .then((userSettings) => {
+          if (requestId !== this._requestId) return
           const chosenFontFamily = userSettings?.fontFamilies?.find(
             (font) => font === this.userSettings?.chosenFontFamily
           )
@@ -81,24 +127,45 @@ export const useUserRepoStore = defineStore("USER_REPO_STATE", {
             : userSettings?.fontFamily
           const chosenFontSize =
             this.userSettings?.chosenFontSize ?? userSettings?.fontSize
+          const chosenTitleFont =
+            this.userSettings?.chosenTitleFont ??
+            userSettings?.chosenTitleFont ??
+            chosenFontFamily
+          const chosenBodyFont =
+            this.userSettings?.chosenBodyFont ??
+            userSettings?.chosenBodyFont ??
+            chosenFontFamily
+          if (userSettings) {
             this.userSettings = userSettings
-
-          if (!this.userSettings) {
-            return
+          } else if (!this.userSettings) {
+            this.userSettings = { $type: DataType.UserSettings }
           }
 
           this.userSettings.chosenFontFamily =
             chosenFontFamily ?? this.userSettings.fontFamily
           this.userSettings.chosenFontSize =
             chosenFontSize ?? this.userSettings.fontSize
+          this.userSettings.chosenTitleFont = chosenTitleFont
+          this.userSettings.chosenBodyFont = chosenBodyFont
 
+          this._persistLayout()
+
+          // Persist only repo config fields — chosen* are localStorage-only
+          const {
+            chosenTitleFont: _t,
+            chosenBodyFont: _b,
+            chosenFontSize: _s,
+            chosenFontFamily: _f,
+            ...repoConfig
+          } = toRaw(this.userSettings)
           data.update<DataType.UserSettings, UserSettings>({
-            ...this.userSettings,
+            ...repoConfig,
             _id: userSettingsId
           })
         })
 
       getCachedMainReadme(user, repo).then(async (cachedReadme) => {
+        if (requestId !== this._requestId) return
         this.readme = cachedReadme
         this.readme = await getMainReadme(user, repo)
       })
@@ -114,11 +181,14 @@ export const useUserRepoStore = defineStore("USER_REPO_STATE", {
         return
       }
 
-      const savedRepoId = data.generateId(
+      const savedRepoId = generateId(
         DataType.SavedRepo,
         `${this.user}-${this.repo}`
       )
-      const newFiles = [...this.files.filter((f) => f.sha !== file.sha), file]
+      const newFiles = [
+        ...toRaw(this.files).filter((f) => f.sha !== file.sha),
+        toRaw(file)
+      ]
       data.update<DataType.SavedRepo, SavedRepo>({
         _id: savedRepoId,
         $type: DataType.SavedRepo,
@@ -132,35 +202,39 @@ export const useUserRepoStore = defineStore("USER_REPO_STATE", {
       this.user = ""
       this.repo = ""
       this.resetFiles()
+      this.userSettings = undefined
     },
     resetFiles() {
       this.files = []
       this.readme = null
-      this.userSettings = undefined
     },
     setFontFamily(fontFamily: string) {
       if (!this.userSettings) {
-        return
+        this.userSettings = { $type: DataType.UserSettings }
       }
       this.userSettings.chosenFontFamily = fontFamily
-
-      const userSettingsId = `UserSetting-${this.user}-${this.repo}`
-      data.update<DataType.UserSettings, UserSettings>({
-        ...this.userSettings,
-        _id: userSettingsId
-      })
+      this._persistLayout()
     },
     setFontSize(fontSize: string) {
       if (!this.userSettings) {
-        return
+        this.userSettings = { $type: DataType.UserSettings }
       }
       this.userSettings.chosenFontSize = fontSize
-
-      const userSettingsId = `UserSetting-${this.user}-${this.repo}`
-      data.update<DataType.UserSettings, UserSettings>({
-        ...this.userSettings,
-        _id: userSettingsId
-      })
+      this._persistLayout()
+    },
+    setTitleFont(font: string) {
+      if (!this.userSettings) {
+        this.userSettings = { $type: DataType.UserSettings }
+      }
+      this.userSettings.chosenTitleFont = font
+      this._persistLayout()
+    },
+    setBodyFont(font: string) {
+      if (!this.userSettings) {
+        this.userSettings = { $type: DataType.UserSettings }
+      }
+      this.userSettings.chosenBodyFont = font
+      this._persistLayout()
     }
   }
 })

src/modules/user/hooks/useUserSettings.hook.ts

@@ -1,10 +1,12 @@
 import { watchEffect } from "vue"
 
+import { resetNoteWidthCache } from "@/constants/note-width"
 import { useUserRepoStore } from "@/modules/repo/store/userRepo.store"
 import { downloadFont } from "@/utils/downloadFont"
 
 const DEFAULT_FONT_POLICY = '"Libertinus Serif", serif'
 const DEFAULT_FONT_SIZE = "16px"
+const DEFAULT_NOTE_WIDTH = "500px"
 
 export const useUserSettings = () => {
   const store = useUserRepoStore()
@@ -12,10 +14,19 @@ export const useUserSettings = () => {
   watchEffect(() => {
     const root = document.documentElement
 
-    const fontFamily = store.userSettings?.chosenFontFamily
     const fontSize = store.userSettings?.chosenFontSize
+    const bodyFont = store.userSettings?.chosenBodyFont
+    const titleFont = store.userSettings?.chosenTitleFont
 
-    downloadFont(fontFamily || DEFAULT_FONT_POLICY)
+    downloadFont(bodyFont || DEFAULT_FONT_POLICY, "--font-family")
+    downloadFont(
+      titleFont || bodyFont || DEFAULT_FONT_POLICY,
+      "--title-font-family"
+    )
     root.style.setProperty("--font-size", fontSize || DEFAULT_FONT_SIZE)
+
+    const pageWidth = store.userSettings?.pageWidth ?? DEFAULT_NOTE_WIDTH
+    root.style.setProperty("--note-width", pageWidth)
+    resetNoteWidthCache()
   })
 }

src/modules/user/service/signIn.ts

@@ -1,7 +1,7 @@
 import { Octokit } from "@octokit/rest"
 import { addMinutes, addSeconds, isBefore } from "date-fns"
 
-import { data } from "@/data/data"
+import { data, generateId } from "@/data/data"
 import { DataType } from "@/data/DataType.enum"
 import { GithubAccessToken } from "@/data/models/GithubAccessToken"
 import { GithubToken } from "@/modules/user/interfaces/GithubToken"
@@ -26,7 +26,7 @@ export const needToRefreshToken = async () => {
   const accessToken = await data.get<
     DataType.GithubAccessToken,
     GithubAccessToken
-  >(data.generateId(DataType.GithubAccessToken, personalTokenId))
+  >(generateId(DataType.GithubAccessToken, personalTokenId))
 
   if (!accessToken) {
     return false
@@ -42,7 +42,7 @@ export const refreshToken = async () => {
   const accessToken = await data.get<
     DataType.GithubAccessToken,
     GithubAccessToken
-  >(data.generateId(DataType.GithubAccessToken, personalTokenId))
+  >(generateId(DataType.GithubAccessToken, personalTokenId))
 
   if (!accessToken) {
     return null
@@ -74,7 +74,7 @@ export const getAccessToken = async () => {
   const response = await data.get<
     DataType.GithubAccessToken,
     GithubAccessToken
-  >(data.generateId(DataType.GithubAccessToken, personalTokenId))
+  >(generateId(DataType.GithubAccessToken, personalTokenId))
 
   return response
 }
@@ -94,7 +94,7 @@ export const saveAccessToken = async (githubToken: GithubToken) => {
 
   const accessToken: GithubAccessToken = {
     ...actualPAT,
-    _id: data.generateId(DataType.GithubAccessToken, personalTokenId),
+    _id: generateId(DataType.GithubAccessToken, personalTokenId),
     $type: DataType.GithubAccessToken,
     token: githubToken.access_token,
     expiresIn: githubToken.expires_in,

src/router/router.ts

@@ -104,7 +104,12 @@ router.beforeEach(() => {
       }
     ).startViewTransition(async () => {
       resolve()
-      await nextTick()
+      await new Promise<void>((r) => {
+        const unwatch = router.afterEach(() => {
+          unwatch()
+          nextTick().then(r)
+        })
+      })
     })
   })
 })

src/shims-vue.d.ts

@@ -1,3 +1,9 @@
+declare module "*.vue" {
+  import type { DefineComponent } from "vue"
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
+
 declare module "pouchdb-adapter-indexeddb"
 declare module "@toycode/markdown-it-class"
 declare module "markdown-it-block-embed"

src/styles/app.css

@@ -6,12 +6,19 @@
 :root {
   --primary-color: #ffa4c0;
   --font-family: "Libertinus Serif", serif;
+  --title-font-family: "Libertinus Serif", serif;
   --font-size: 13pt;
   --font-color: #4a4a4a;
   --link: #445fb9;
   --light-link: lighten(#445fb9, 45%);
   --background-color: #ffffff;
   --note-width: 500px;
+  --note-canvas-bg: color-mix(
+    in oklch,
+    var(--color-base-100) 60%,
+    var(--color-base-200)
+  );
+  --note-sheet-shadow: 1px 0 8px rgb(0 0 0 / 6%);
   --color-contrast-content: var(--color-success);
   --notyf-margin: 0.5rem;
 }
@@ -24,8 +31,8 @@
 
 @plugin 'daisyui' {
   themes:
-    garden --default,
-    dim --prefersdark;
+    emerald --default,
+    forest --prefersdark;
 }
 
 @config '../../tailwind.config.js';
@@ -48,21 +55,17 @@
   }
 }
 
-html {
-  overflow-y: auto;
-  overflow-x: auto;
-}
-
+html,
 body {
-  height: 100vh;
+  height: 100dvh;
+  overflow: hidden;
   scroll-behavior: smooth;
-  overflow-y: auto;
 }
 
-@media screen and (min-width: 769px) {
+@media screen and (max-width: 768px) {
   html,
   body {
-    overflow-y: hidden;
+    overflow-y: auto;
   }
 }
 
@@ -77,7 +80,7 @@ body {
 }
 
 #app {
-  height: 100vh;
+  height: 100dvh;
   display: flex;
 }
 
@@ -92,18 +95,35 @@ a {
   }
 }
 
-a.title-stacked-note-link {
+.title-stacked-note {
   color: var(--color-base-content);
-  display: block;
   text-decoration: none;
   position: sticky;
   top: 0;
+  overflow: visible;
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
 
+a.title-stacked-note-link {
+  display: block;
+  overflow: visible;
   &:hover {
     cursor: pointer;
   }
 }
 
+.title-stacked-note ul,
+.title-stacked-note li {
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-left: 0;
+  text-decoration: none;
+  display: flex;
+  gap: 1rem;
+}
+
 .notyf__toast {
   border-radius: revert-layer;
   border: none;
@@ -236,3 +256,12 @@ iframe {
 .todo-notes li:has(> input[type="checkbox"]) {
   list-style: none;
 }
+
+.tabs :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-top: 0.2rem;
+  padding-inline-end: 0.2rem;
+  padding-bottom: 0.2rem;
+  padding-inline-start: 0.2rem;
+}

src/theme.config.ts

@@ -2,6 +2,6 @@
 // Update these values to change the light and dark themes
 
 export const themeConfig = {
-  light: "garden",
-  dark: "dim"
+  light: "emerald",
+  dark: "forest"
 }

src/utils/alloy.tmLanguage.json

@@ -0,0 +1,296 @@
+{
+  "$schema": "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json",
+  "name": "Alloy",
+  "scopeName": "source.als",
+  "patterns": [
+    { "include": "#comments" },
+    { "include": "#declaration" },
+    { "include": "#expression" },
+    { "include": "#built-in" },
+    { "include": "#keywords" },
+    { "include": "#digit" }
+  ],
+  "repository": {
+    "comments": {
+      "patterns": [
+        { "begin": "/\\*", "end": "\\*/", "name": "comment.block.alloy" },
+        { "begin": "//", "end": "\n", "name": "comment.line.double-slash" },
+        { "begin": "--", "end": "\n", "name": "comment.line.double-dash" }
+      ]
+    },
+    "keywords": {
+      "patterns": [
+        { "include": "#define" },
+        { "include": "#modifier" },
+        { "include": "#operator" },
+        { "include": "#control" },
+        { "include": "#variable" }
+      ],
+      "repository": {
+        "define": {
+          "patterns": [
+            { "match": "\\b(sig)\\b", "name": "keyword.language.sig.alloy" },
+            { "match": "\\b(fact)\\b", "name": "keyword.language.fact.alloy" },
+            { "match": "\\b(pred)\\b", "name": "keyword.language.pred.alloy" },
+            { "match": "\\b(fun)\\b", "name": "keyword.language.fun.alloy" },
+            {
+              "match": "\\b(module)\\b",
+              "name": "keyword.language.module.alloy"
+            },
+            {
+              "match": "\\b(extends)\\b",
+              "name": "keyword.language.extends.alloy"
+            },
+            { "match": ":", "name": "keyword.other.colon.alloy" },
+            {
+              "match": "\\b(check)\\b",
+              "name": "keyword.language.check.alloy"
+            },
+            {
+              "match": "\\b(assert)\\b",
+              "name": "keyword.language.assert.alloy"
+            },
+            { "match": "\\b(run)\\b", "name": "keyword.language.run.alloy" },
+            { "match": "\\b(open)\\b", "name": "keyword.other.open.alloy" },
+            { "match": "\\b(as)\\b", "name": "keyword.other.as.alloy" },
+            { "match": "\\b(in)\\b", "name": "keyword.other.in.alloy" }
+          ]
+        },
+        "modifier": {
+          "patterns": [
+            { "match": "\\b(var)\\b", "name": "keyword.modifier.var.alloy" },
+            {
+              "match": "\\b(private)\\b",
+              "name": "keyword.modifier.private.alloy"
+            },
+            {
+              "match": "\\b(abstract)\\b",
+              "name": "keyword.modifier.abstract.alloy"
+            },
+            {
+              "match": "\\b(all|disj|lone|no|one|set|seq|some|sum|univ|none)\\b",
+              "name": "keyword.modifier.set.alloy"
+            }
+          ]
+        },
+        "operator": {
+          "patterns": [
+            { "include": "#temporal" },
+            { "include": "#unary" },
+            { "include": "#binary" }
+          ],
+          "repository": {
+            "temporal": {
+              "patterns": [
+                {
+                  "match": "\\b(always|eventually|after|before|historically|once|prev)\\b",
+                  "name": "keyword.operator.temporal.unary.alloy"
+                },
+                {
+                  "match": "\\b(until|releases|since|triggered)\\b",
+                  "name": "keyword.operator.temporal.binary.alloy"
+                }
+              ]
+            },
+            "unary": {
+              "patterns": [
+                {
+                  "match": "!|#|~|\\*|\\^|(\\b(not)\\b)",
+                  "name": "keyword.operator.unary.alloy"
+                }
+              ]
+            },
+            "binary": {
+              "patterns": [
+                {
+                  "match": "(?:\\|\\|)|&&|<=>|=>|&|\\+|-|\\+\\+|<:|:>|\\.|=|->",
+                  "name": "keyword.operator.binary.alloy"
+                },
+                {
+                  "match": "\\b(and|or|iff|implies|else|in)\\b",
+                  "name": "keyword.operator.binary.alloy"
+                },
+                {
+                  "match": "=|<|>|=<|>=",
+                  "name": "keyword.operator.binary.alloy"
+                },
+                { "match": ",", "name": "keyword.other.comma.alloy" },
+                { "match": "\\|", "name": "keyword.other.split.alloy" }
+              ]
+            }
+          }
+        },
+        "variable": {
+          "patterns": [
+            { "match": "\\b(let)\\b", "name": "keyword.language.let.alloy" },
+            { "match": "\\b(this)\\b", "name": "keyword.language.this.alloy" }
+          ]
+        },
+        "control": {
+          "patterns": [
+            { "match": "\\b(for)\\b", "name": "keyword.control.for.alloy" },
+            { "match": "\\b(but)\\b", "name": "keyword.control.but.alloy" },
+            {
+              "match": "\\b(exactly)\\b",
+              "name": "keyword.control.exactly.alloy"
+            },
+            {
+              "match": "\\b(expect)\\b",
+              "name": "keyword.control.expect.alloy"
+            },
+            { "match": "\\b(steps)\\b", "name": "keyword.control.steps.alloy" }
+          ]
+        }
+      }
+    },
+    "declaration": {
+      "patterns": [
+        { "include": "#module" },
+        { "include": "#predict" },
+        { "include": "#signature" },
+        { "include": "#fact" },
+        { "include": "#fun" }
+      ],
+      "repository": {
+        "module": {
+          "patterns": [
+            {
+              "match": "(module)\\b\\s*((?:\\w|'|_|\\d|/)+)",
+              "captures": {
+                "1": { "name": "keyword.language.module.alloy" },
+                "2": { "name": "support.class.module.alloy" }
+              }
+            }
+          ]
+        },
+        "predict": {
+          "patterns": [
+            {
+              "match": "(pred)\\b\\s*((?:\\w|'|_|\\d|/)+)",
+              "captures": {
+                "1": { "name": "keyword.language.pred.alloy" },
+                "2": { "name": "entity.name.function.pred.alloy" }
+              }
+            }
+          ]
+        },
+        "signature": {
+          "patterns": [
+            {
+              "begin": "(abstract)?\\s*(lone|some|one)?\\s*(var)?\\s*(sig)\\b\\s*",
+              "end": "(?=\\{)",
+              "beginCaptures": {
+                "1": { "name": "keyword.modifier.abstract.alloy" },
+                "2": { "name": "keyword.modifier.set.alloy" },
+                "3": { "name": "keyword.modifier.var.alloy" },
+                "4": { "name": "keyword.language.sig.alloy" }
+              },
+              "patterns": [
+                {
+                  "begin": "(extends)",
+                  "end": "(?=\\{)",
+                  "beginCaptures": {
+                    "1": { "name": "keyword.language.extends.alloy" }
+                  },
+                  "patterns": [
+                    {
+                      "match": "(?:\\w|'|_|\\d|/)+",
+                      "name": "entity.other.inherited-class.alloy"
+                    }
+                  ]
+                },
+                {
+                  "begin": "(in)",
+                  "end": "(?=\\{)",
+                  "beginCaptures": {
+                    "1": { "name": "keyword.other.in.alloy" }
+                  },
+                  "patterns": [
+                    {
+                      "match": "(?:\\w|'|_|\\d|/)+",
+                      "name": "entity.other.inherited-class.alloy"
+                    },
+                    { "match": "\\+", "name": "keyword.operator.binary.alloy" }
+                  ]
+                },
+                {
+                  "match": "(?:\\w|'|_|\\d|/)+",
+                  "name": "entity.name.type.signature.alloy"
+                },
+                { "match": ",", "name": "keyword.other.comma.alloy" }
+              ]
+            }
+          ]
+        },
+        "fact": {
+          "patterns": [
+            {
+              "match": "(fact)\\b\\s*((?:\\w|'|_|\\d|/)+)",
+              "captures": {
+                "1": { "name": "keyword.language.fact.alloy" },
+                "2": { "name": "entity.name.function.fact.alloy" }
+              }
+            }
+          ]
+        },
+        "fun": {
+          "patterns": [
+            {
+              "match": "(fun)\\b\\s*((?:\\w|'|_|\\d|/)+)",
+              "captures": {
+                "1": { "name": "keyword.language.fun.alloy" },
+                "2": { "name": "entity.name.function.fun.alloy" }
+              }
+            }
+          ]
+        }
+      }
+    },
+    "expression": {
+      "patterns": [
+        {
+          "match": "(check)\\b\\s*((?:\\w|'|_|\\d|/)+)",
+          "captures": {
+            "1": { "name": "keyword.language.check.alloy" },
+            "2": { "name": "entity.name.function.check.alloy" }
+          }
+        },
+        {
+          "match": "(assert)\\b\\s*((?:\\w|'|_|\\d|/)+)",
+          "captures": {
+            "1": { "name": "keyword.language.assert.alloy" },
+            "2": { "name": "entity.name.function.check.alloy" }
+          }
+        }
+      ]
+    },
+    "digit": {
+      "patterns": [
+        { "match": "\\b(\\d+)\\b", "name": "constant.numeric.alloy" }
+      ]
+    },
+    "built-in": {
+      "patterns": [
+        {
+          "match": "\\b(plus|minus|mul|div|rem|sum)\\[",
+          "captures": { "1": { "name": "support.function.numeric.alloy" } }
+        },
+        {
+          "match": "\\b(open)\\b\\s*((?:\\w|'|_|\\d|/)+)\\[",
+          "captures": {
+            "1": { "name": "keyword.other.open.alloy" },
+            "2": { "name": "support.class.module.alloy" }
+          }
+        },
+        {
+          "match": "(/(?:\\w|'|_|\\d|/)+)",
+          "captures": { "1": { "name": "support.function.order.alloy" } }
+        },
+        {
+          "match": "((?:\\w|'|_|\\d)+)\\s*\\[",
+          "captures": { "1": { "name": "support.function.order.alloy" } }
+        }
+      ]
+    }
+  }
+}

src/utils/downloadFont.ts

@@ -1,30 +1,56 @@
 import FontFaceObserver from "fontfaceobserver"
 
-const assembleFontLink = (font: string) => {
-  return `https://api.fonts.coollabs.io/css2?display=swap&family=${font
-    .replaceAll(",", "&family=")
-    .replaceAll(" ", "+")}`
+const GENERIC_FAMILIES = new Set([
+  "serif",
+  "sans-serif",
+  "monospace",
+  "cursive",
+  "fantasy",
+  "system-ui",
+  "ui-serif",
+  "ui-sans-serif",
+  "ui-monospace",
+  "ui-rounded"
+])
+
+const parseWebFontFamilies = (font: string): string[] =>
+  font
+    .split(",")
+    .map((f) => f.trim().replace(/^["']|["']$/g, ""))
+    .filter((f) => f && !GENERIC_FAMILIES.has(f))
+
+const assembleFontLink = (families: string[]): string | null => {
+  if (families.length === 0) return null
+  return `https://api.fonts.coollabs.io/css2?display=swap&${families
+    .map((f) => `family=${f.replaceAll(" ", "+")}`)
+    .join("&")}`
 }
 
-export const downloadFont = async (font: string): Promise<void> => {
-  const href = assembleFontLink(font)
+export const downloadFont = async (
+  font: string,
+  cssVar = "--font-family"
+): Promise<void> => {
+  const families = parseWebFontFamilies(font)
+  const href = assembleFontLink(families)
 
-  // check if the href already exists
-  const existingLink = document.querySelector(`link[href="${href}"]`)
+  if (href) {
+    const alreadyLoaded = Array.from(
+      document.head.querySelectorAll<HTMLLinkElement>('link[rel="stylesheet"]')
+    ).some((link) => link.href === href)
 
-  if (!existingLink) {
+    if (!alreadyLoaded) {
       const link = document.createElement("link")
       link.href = href
       link.rel = "stylesheet"
-
       document.head.appendChild(link)
     }
 
     try {
-    await new FontFaceObserver(font).load()
-
-    document.documentElement.style.setProperty("--font-family", font)
-  } catch (error) {
+      await new FontFaceObserver(families[0]).load()
+    } catch {
       console.warn("error when loading font")
     }
+  }
+
+  document.documentElement.style.setProperty(cssVar, font)
 }

src/utils/fileLanguage.ts

@@ -0,0 +1,31 @@
+const EXT_TO_LANG: Record<string, string> = {
+  sh: "bash",
+  bash: "bash",
+  js: "javascript",
+  mjs: "javascript",
+  cjs: "javascript",
+  ts: "typescript",
+  mts: "typescript",
+  cts: "typescript",
+  md: "markdown",
+  mdx: "markdown",
+  html: "html",
+  htm: "html",
+  css: "css",
+  scss: "css",
+  json: "json",
+  jsonc: "json",
+  als: "alloy"
+}
+
+const MARKDOWN_EXTS = new Set(["md", "mdx"])
+
+export function isMarkdownPath(path: string): boolean {
+  const ext = path.split(".").pop()?.toLowerCase() ?? ""
+  return MARKDOWN_EXTS.has(ext)
+}
+
+export function getFileLanguage(path: string): string | null {
+  const ext = path.split(".").pop()?.toLowerCase() ?? ""
+  return EXT_TO_LANG[ext] ?? null
+}

src/views/FleetingNotes.vue

@@ -82,7 +82,7 @@ watch(mode, async (newMode) => {
       newContent.value
     }`
 
-    const newSha = await createFile({
+    const { sha: newSha } = await createFile({
       content,
       path: newContentPath
     })

src/views/HomeApp.vue

@@ -15,7 +15,7 @@ import WelcomeWorld from "@/components/WelcomeWorld.vue"
   display: flex;
   flex: 1;
   flex-direction: column;
-  align-items: center;
+  min-height: 100dvh;
 }
 
 .authorize {

src/views/PublicNoteView.vue

@@ -4,7 +4,7 @@ import { useTitle } from "@vueuse/core"
 import { computed, nextTick, ref, watch } from "vue"
 import { useRouter } from "vue-router"
 
-import BackButton from "@/components/BackButton.vue"
+import HomeButton from "@/components/HomeButton.vue"
 import SkeletonLoader from "@/components/SkeletonLoader.vue"
 import StackedPublicNote from "@/components/StackedPublicNote.vue"
 import ThemeSwap from "@/components/ThemeSwap.vue"
@@ -129,13 +129,7 @@ watch(
   <main class="public-note-view repo-note note-container">
     <div class="note article">
       <div class="header">
-        <back-button
-          :fallback="{ name: 'PublicNoteListByDidView', params: { shortDid } }"
-          :prefer-fallback="false"
-        />
-
-        <img src="/favicon.png" alt="Remanso" class="remanso-logo" />
-
+        <home-button />
         <theme-swap />
       </div>
       <div class="subheader">
@@ -197,13 +191,6 @@ watch(
     gap: 1rem;
   }
 
-  .remanso-logo {
-    width: 32px;
-    height: 32px;
-    box-shadow: none;
-    view-transition-name: remanso-logo;
-  }
-
   .subheader {
     margin: 1rem auto 0;
   }
@@ -254,7 +241,6 @@ watch(
     overflow-y: auto;
     height: 100vh;
     width: 100%;
-    position: sticky;
 
     .title {
       text-align: left;
@@ -262,6 +248,8 @@ watch(
   }
 
   @media screen and (min-width: 769px) {
+    background-color: var(--note-canvas-bg);
+
     .repo-title-breadcrumb {
       padding: 0.5rem 1rem 0;
       transform-origin: 0 0;
@@ -279,6 +267,11 @@ watch(
     .note {
       min-width: var(--note-width);
       max-width: var(--note-width);
+      background-color: var(--color-base-100);
+    }
+
+    .article {
+      box-shadow: var(--note-sheet-shadow);
     }
   }
 

src/views/RepoList.vue

@@ -1,20 +1,36 @@
 <script lang="ts" setup>
+import { vInfiniteScroll } from "@vueuse/components"
+
 import GoBack from "@/components/GoBack.vue"
+import SignInGithub from "@/components/SignInGithub.vue"
 import { useGitHubLogin } from "@/hooks/useGitHubLogin.hook"
 import { useRepos } from "@/hooks/useRepos.hook"
 import { useRepoList } from "@/modules/repo/hooks/useRepoList.hook"
 
 const { username } = useGitHubLogin()
-const { isReady } = useRepos()
-const { favoriteRepos, otherRepos, favoriteCheckboxes, toggleCheckbox } =
-  useRepoList()
+const { isReady, hasCredentialError } = useRepos()
+const {
+  favoriteRepos,
+  otherRepos,
+  favoriteCheckboxes,
+  toggleCheckbox,
+  canLoadMore,
+  loadMore
+} = useRepoList()
 </script>
 
 <template>
-  <div class="repo-list">
+  <div
+    class="repo-list"
+    v-infinite-scroll="[loadMore, { canLoadMore: () => canLoadMore }]"
+  >
     <h1 class="title is-1">Repositories</h1>
     <go-back />
     <div v-if="!isReady">loading...</div>
+    <div v-else-if="hasCredentialError">
+      <p>Your GitHub credentials are invalid or expired.</p>
+      <sign-in-github />
+    </div>
     <div v-else class="columns is-centered">
       <div class="column is-one-third">
         <table

src/views/SpaceCowboy.vue

@@ -1,4 +1,6 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import SignInGithub from "@/components/SignInGithub.vue"
+</script>
 
 <template>
   <main class="space-cowboy content">
@@ -43,6 +45,7 @@
     <router-link class="button is-links" :to="{ name: 'Home' }"
       >return to homepage</router-link
     >
+    <sign-in-github />
   </main>
 </template>
 

tailwind.config.js

@@ -11,7 +11,8 @@ const defaultTitleStyles = Array.from(
     ...acc,
     [heading]: {
       "margin-top": "0",
-      "margin-bottom": "0.5em"
+      "margin-bottom": "0.5em",
+      "font-family": "var(--title-font-family)"
     }
   }),
   {}

vite.config.mts

@@ -47,11 +47,6 @@ export default defineConfig(({ command }) => {
               sizes: "512x512",
               type: "image/png"
             },
-            {
-              src: "favicon.png",
-              sizes: "1024x1024",
-              type: "image/png"
-            },
             {
               src: "maskable-icon-512x512.png",
               sizes: "512x512",