fix(auth): clear stale credential error after github re-auth

The 401 flag and cached repo list were module-level and only reset after a 20-min stale window, so re-authenticating left the "credentials are invalid or expired" message pinned on. Watch the access token: reset state and refetch on change. Also await saveCredentials before redirecting so refs are settled.
style: no more underline for header tag
2026-05-14 13:04:44 +02:00 · 2026-05-14 01:22:46 +02:00 · 2026-05-14 01:10:40 +02:00 · 2026-05-14 01:10:38 +02:00 · 2026-05-13 18:54:38 +02:00 · 2026-05-13 18:49:23 +02:00
53 changed files with 4050 additions and 504 deletions
--- a/.doc-jitrc.json
+++ b/.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"
-    }
+    ]
  }
 }
--- a/.husky/_pre-push
+++ b/.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."
--- a/.zed/settings.json
+++ b/.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", "..."]
+    }
+  }
+}
--- a/6
+++ b/6
@@ -1,11 +1,11 @@
 # ---- Stage 1: deps (only invalidated when lockfile changes) ----
 FROM node:22-alpine AS deps

-RUN corepack enable && corepack prepare pnpm@latest --activate
+RUN corepack enable

 WORKDIR /app

-COPY package.json pnpm-lock.yaml ./
+COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./

 RUN pnpm install --frozen-lockfile

@@ -13,7 +13,7 @@ RUN pnpm install --frozen-lockfile
 # ---- Stage 2: build (invalidated on any source change) ----
 FROM node:22-alpine AS builder

-RUN corepack enable && corepack prepare pnpm@latest --activate
+RUN corepack enable

 WORKDIR /app

--- a/_scripts/build-monochrome-icon.ts
+++ b/_scripts/build-monochrome-icon.ts
@@ -0,0 +1,40 @@
+import path from "path"
+import sharp from "sharp"
+
+// PWA spec: `purpose: "monochrome"` icons are *masks*. The user agent ignores
+// RGB and uses only the alpha channel as the silhouette, then paints it with
+// the platform theme color. So the source PNG must be RGBA with the silhouette
+// in alpha, NOT a black-on-white RGB image.
+
+const SRC = path.resolve(__dirname, "../public/favicon.png")
+const OUT = path.resolve(__dirname, "../public/monochromeicon.png")
+const SIZE = 1024
+
+async function main() {
+  const { data, info } = await sharp(SRC)
+    .resize(SIZE, SIZE, { fit: "contain", background: { r: 0, g: 0, b: 0, alpha: 0 } })
+    .ensureAlpha()
+    .raw()
+    .toBuffer({ resolveWithObject: true })
+
+  if (info.channels !== 4) throw new Error(`expected RGBA, got ${info.channels} channels`)
+
+  const out = Buffer.alloc(data.length)
+  for (let i = 0; i < data.length; i += 4) {
+    out[i] = 0
+    out[i + 1] = 0
+    out[i + 2] = 0
+    out[i + 3] = data[i + 3]
+  }
+
+  await sharp(out, { raw: { width: SIZE, height: SIZE, channels: 4 } })
+    .png({ compressionLevel: 9 })
+    .toFile(OUT)
+
+  console.log(`Wrote ${OUT} (${SIZE}x${SIZE} RGBA)`)
+}
+
+main().catch((e) => {
+  console.error(e)
+  process.exit(1)
+})
--- a/docs/superpowers/specs/2026-04-20-react-native-migration-design.md
+++ b/docs/superpowers/specs/2026-04-20-react-native-migration-design.md
@@ -9,21 +9,21 @@ Migrate Remanso from a Vue 3 web app to a fully native iOS + Android app built w

 ## 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 |
+| 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

@@ -137,14 +137,18 @@ Zustand replaces Pinia. The store shape is identical to `userRepo.store.ts`:

 ```ts
 const useRepoStore = create<RepoState>((set, get) => ({
-  user: '',
-  repo: '',
+  user: "",
+  repo: "",
  files: [],
  userSettings: null,
  needToLogin: false,
  setRepo: (user, repo) => set({ user, repo }),
-  loadFiles: async () => { /* Octokit call */ },
-  loadSettings: async () => { /* MMKV read */ },
+  loadFiles: async () => {
+    /* Octokit call */
+  },
+  loadSettings: async () => {
+    /* MMKV read */
+  }
 }))
 ```

@@ -165,6 +169,7 @@ The markdown-it pipeline (KaTeX, Mermaid, shiki, tabler icons, html5-media, GitH
 `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
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-theme="emerald">
+<html lang="en" data-theme="light">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
--- a/package.json
+++ b/package.json
@@ -2,6 +2,7 @@
  "name": "remanso",
  "version": "1.0.0",
  "private": true,
+  "packageManager": "pnpm@11.0.9",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
@@ -12,16 +13,15 @@
    "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",
@@ -40,8 +40,10 @@
    "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",
@@ -82,7 +84,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",
--- a/pnpm-lock.yaml
+++ b/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
@@ -74,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
@@ -195,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
@@ -1307,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==}

@@ -3871,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'}
@@ -4022,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==}

@@ -4848,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==}

@@ -7880,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
@@ -10560,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
@@ -10711,8 +10754,6 @@ snapshots:

  human-signals@4.3.1: {}

-  husky@9.1.7: {}
-
  ico-endec@0.1.6: {}

  iconv-lite@0.4.24:
@@ -11597,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:
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,2 +1,7 @@
 allowBuilds:
+  '@parcel/watcher': true
  core-js: true
+  esbuild: true
+  fsevents: true
+  sharp: true
+  vue-demi: true
--- a/public/monochrome-icon.png
+++ b/public/monochrome-icon.png
--- a/public/monochromeicon.png
+++ b/public/monochromeicon.png
--- a/src/App.vue
+++ b/src/App.vue
@@ -19,8 +19,16 @@ const { isATProtoReady } = useATProtoLogin()
 #main-app {
  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),
--- a/src/bus/noteEventBus.ts
+++ b/src/bus/noteEventBus.ts
@@ -4,6 +4,7 @@ interface EventBusParams {
  user: string
  repo: string
  path: string
+  hash?: string
  currentNoteSHA?: string
 }

--- a/src/components/AuthorizeUser.vue
+++ b/src/components/AuthorizeUser.vue
@@ -19,8 +19,7 @@ onBeforeMount(async () => {
    if ("error" in token) {
      hasError.value = true
    } else {
-      token.access_token
-      saveCredentials(token)
+      await saveCredentials(token)
    }

    router.replace({ name: "Home" })
--- a/src/components/FluxNote.vue
+++ b/src/components/FluxNote.vue
@@ -1,16 +1,11 @@
 <script lang="ts" setup>
-import {
-  computed,
-  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 { useGitHubLogin } from "@/hooks/useGitHubLogin.hook"
 import { useLinks } from "@/hooks/useLinks.hook"
 import { markdownBuilder } from "@/hooks/useMarkdown.hook"
 import { useNoteView } from "@/hooks/useNoteView.hook"
@@ -50,6 +45,7 @@ const { listenToClick } = useLinks("note-display")
 const { stackedNotes, scrollToFocusedNote } = useRouteQueryStackedNotes()

 const { titles } = useNoteView()
+const { isLogged } = useGitHubLogin()
 useResizeContainer("note-container", stackedNotes)

 const renderedContent = computed(() =>
@@ -108,9 +104,18 @@ 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">
+        <template v-if="isLogged">
+          <p>This repository is not accessible.</p>
+        </template>
+        <template v-else>
+          <p>This repository is private. Sign in to view it.</p>
+          <sign-in-github />
+        </template>
+      </div>
      <p
-        v-else-if="withContent"
+        v-else-if="withContent && hasContent"
        class="note-display"
        v-html="renderedContent"
      />
@@ -196,6 +201,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;
  }
@@ -204,12 +218,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;
@@ -217,6 +225,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;
@@ -233,6 +243,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);
    }
  }
 }
@@ -241,6 +256,7 @@ $header-height: 40px;
  .flux-note {
    .readme {
      padding: 0 0.75rem;
+      position: relative;
    }
  }

@@ -250,6 +266,7 @@ $header-height: 40px;

  .note {
    width: 100vw;
+    height: 100svh;
    overflow-y: visible;
  }

--- a/src/components/FontChange.vue
+++ b/src/components/FontChange.vue
@@ -50,22 +50,14 @@ const fontSize = computed({
  <div class="font-change">
    <div>
      <label for="title-font" class="font-label">t</label>
-      <select
-        id="title-font"
-        class="select"
-        v-model="titleFont"
-      >
+      <select id="title-font" class="select" v-model="titleFont">
        <option v-for="font in sortedFontFamilies" :key="font" :value="font">
          {{ font }}
        </option>
      </select>

      <label for="body-font" class="font-label">p</label>
-      <select
-        id="body-font"
-        class="select"
-        v-model="bodyFont"
-      >
+      <select id="body-font" class="select" v-model="bodyFont">
        <option v-for="font in sortedFontFamilies" :key="font" :value="font">
          {{ font }}
        </option>
@@ -75,11 +67,7 @@ const fontSize = computed({
      <theme-swap />

      <label for="font-size" class="font-label">s</label>
-      <select
-        id="font-size"
-        class="select"
-        v-model="fontSize"
-      >
+      <select id="font-size" class="select" v-model="fontSize">
        <option v-for="size in fontSizes" :key="size" :value="size">
          {{ size }}
        </option>
--- a/src/components/HomeButton.vue
+++ b/src/components/HomeButton.vue
@@ -6,7 +6,10 @@ const goHome = () => router.push({ name: "Home" })
 </script>

 <template>
-  <button class="btn btn-ghost btn-circle btn-lg text-base-content" @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" />
  </button>
 </template>
--- a/src/components/NoteConflictModal.vue
+++ b/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">
+        <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>
--- a/src/components/NoteFreshnessBadge.vue
+++ b/src/components/NoteFreshnessBadge.vue
@@ -0,0 +1,215 @@
+<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 label = computed(() => {
+  switch (props.status) {
+    case "verified":
+      return "Up to date"
+    case "checking":
+      return "Checking…"
+    case "outdated":
+      return "Outdated"
+    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 "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'"
+      xmlns="http://www.w3.org/2000/svg"
+      class="icon icon-tabler 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"
+    >
+      <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"
+      />
+    </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-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>
--- a/src/components/StackedNote.vue
+++ b/src/components/StackedNote.vue
@@ -13,18 +13,33 @@ 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"
+import { errorMessage } from "@/utils/notif"

 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 +68,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 +114,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 +160,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 +211,59 @@ 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 () => {
+  try {
+    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
+    }
+  } catch (error) {
+    console.error("freshness badge click failed", error)
+    errorMessage("❌ Couldn't pull latest from GitHub")
+  }
+}
 </script>

 <template>
@@ -140,77 +275,93 @@ 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"
+    <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)' : ''"
+          @click="toggleMode"
+        >
+          <svg
+            v-if="mode === 'read'"
+            xmlns="http://www.w3.org/2000/svg"
+            class="icon icon-tabler icon-tabler-edit"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+            <path
+              d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"
+            />
+            <path
+              d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z"
+            />
+            <path d="M16 5l3 3" />
+          </svg>
+          <svg
+            v-else
+            xmlns="http://www.w3.org/2000/svg"
+            class="icon icon-tabler icon-tabler-device-floppy"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+            <path
+              d="M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2"
+            />
+            <path d="M12 14m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
+            <path d="M14 4l0 4l-6 0l0 -4" />
+          </svg>
+        </button>
+      </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>
-      </div>
-    </a>
+      </a>
+    </div>
    <section class="text-content">
-      <button
-        class="action button is-text is-light"
-        :class="{ 'is-link': mode === 'edit' }"
-        :style="mode === 'edit' ? 'color: var(--color-primary)' : ''"
-        @click="toggleMode"
-      >
-        <svg
-          v-if="mode === 'read'"
-          xmlns="http://www.w3.org/2000/svg"
-          class="icon icon-tabler icon-tabler-edit"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          stroke-width="1.5"
-          stroke="currentColor"
-          fill="none"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-          <path
-            d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"
-          />
-          <path
-            d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z"
-          />
-          <path d="M16 5l3 3" />
-        </svg>
-        <svg
-          v-else
-          xmlns="http://www.w3.org/2000/svg"
-          class="icon icon-tabler icon-tabler-device-floppy"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          stroke-width="2"
-          stroke="currentColor"
-          fill="none"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-          <path
-            d="M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2"
-          />
-          <path d="M12 14m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
-          <path d="M14 4l0 4l-6 0l0 -4" />
-        </svg>
-      </button>
-      <div v-if="mode === 'edit'" class="edit">
+      <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 +379,7 @@ $border-color: rgba(18, 19, 58, 0.2);
  }

  section {
-    padding: 0 0.5rem 2rem;
+    padding: 0 0.5rem;
  }
 }

@@ -242,7 +393,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 +407,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,11 +435,11 @@ $border-color: rgba(18, 19, 58, 0.2);
@media screen and (max-width: 768px) {
  .stacked-note {
    padding: 0 0.75rem 1rem;
+    height: 100svh;

    section {
-      padding: 1rem 0 2rem;
+      padding: 1rem 0;
      overflow-x: auto;
-      overflow-y: hidden;
    }

    .note-content {
@@ -292,10 +453,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);
  }
@@ -303,6 +466,12 @@ $border-color: rgba(18, 19, 58, 0.2);
  a {
    white-space: nowrap;
  }
+
+  .action-bar {
+    .action {
+      transform: rotate(-90deg);
+    }
+  }
 }

@media print {
--- a/src/components/StackedPublicNote.vue
+++ b/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,9 +177,8 @@ $border-color: rgba(18, 19, 58, 0.2);
    padding: 0 0.75rem 1rem;

    section {
-      padding: 1rem 0 2rem;
+      padding: 1rem 0;
      overflow-x: auto;
-      overflow-y: hidden;
    }

    .note-content {
@@ -194,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 {
--- a/src/components/WelcomeWorld.vue
+++ b/src/components/WelcomeWorld.vue
--- a/src/constants/note-width.ts
+++ b/src/constants/note-width.ts
@@ -10,3 +10,7 @@ export const getNoteWidth = () => {
  }
  return cached
 }
+
+export const resetNoteWidthCache = () => {
+  cached = undefined
+}
--- a/src/hooks/useATProtoLinks.hook.ts
+++ b/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
      }

--- a/src/hooks/useCheckboxCommit.hook.ts
+++ b/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
--- a/src/hooks/useComputeBacklinks.hook.ts
+++ b/src/hooks/useComputeBacklinks.hook.ts
@@ -16,7 +16,9 @@ const isMarkdown = (filename?: string) => filename?.endsWith(".md") ?? false

 const yieldToMain = () =>
  "scheduler" in globalThis
-    ? (globalThis as unknown as { scheduler: { yield: () => Promise<void> } }).scheduler.yield()
+    ? (
+        globalThis as unknown as { scheduler: { yield: () => Promise<void> } }
+      ).scheduler.yield()
    : new Promise<void>((r) => setTimeout(r, 0))

 export const useComputeBacklinks = () => {
@@ -43,9 +45,10 @@ export const useComputeBacklinks = () => {
        }

        const fileBacklinkId = generateId(DataType.BacklinkNote, file.sha)
-        const fileBacklink = await data.get<DataType.BacklinkNote, BacklinkNote>(
-          fileBacklinkId
-        )
+        const fileBacklink = await data.get<
+          DataType.BacklinkNote,
+          BacklinkNote
+        >(fileBacklinkId)
        if (fileBacklink) {
          continue
        }
--- a/src/hooks/useGitHubContent.hook.ts
+++ b/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)
  }
--- a/src/hooks/useLinks.hook.ts
+++ b/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
--- a/src/hooks/useMarkdown.hook.ts
+++ b/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,
--- a/src/hooks/useNoteFreshness.hook.ts
+++ b/src/hooks/useNoteFreshness.hook.ts
@@ -0,0 +1,93 @@
+import { 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"
+  | "outdated"
+  | "offline"
+
+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 status = ref<FreshnessStatus>("unknown")
+  const lastCheckedAt = ref<Date | null>(null)
+  const latestSha = ref<string | null>(null)
+
+  const expectedSha = async () => (await getEditedSha()) ?? sha.value
+
+  const check = async () => {
+    if (!path.value) return
+    status.value = "checking"
+    const remoteSha = await fetchLatestSha(path.value)
+    if (remoteSha === null) {
+      status.value = "offline"
+      return
+    }
+    latestSha.value = remoteSha
+    lastCheckedAt.value = new Date()
+    const local = await expectedSha()
+    status.value = remoteSha === local ? "verified" : "outdated"
+  }
+
+  const pullLatest = async (): Promise<string | null> => {
+    if (!path.value) return null
+    const usedCachedSha = latestSha.value !== null
+    const remoteSha = latestSha.value ?? (await fetchLatestSha(path.value))
+    if (!remoteSha) {
+      console.warn("pullLatest: could not resolve remote sha", { path: path.value })
+      status.value = "offline"
+      return null
+    }
+    const fileContent = await queryFileContent(user, repo, remoteSha)
+    if (!fileContent) {
+      console.warn("pullLatest: failed to fetch blob content", {
+        path: path.value,
+        remoteSha,
+        usedCachedSha
+      })
+      // Cached SHA may be stale — clear so the next click re-resolves it.
+      if (usedCachedSha) latestSha.value = null
+      status.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()
+    status.value = "verified"
+    const { getRawContent } = markdownBuilder(sha.value)
+    return getRawContent(fileContent)
+  }
+
+  return {
+    status,
+    lastCheckedAt,
+    latestSha,
+    check,
+    pullLatest
+  }
+}
--- a/src/hooks/useNoteView.hook.ts
+++ b/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)
    }
  )

--- a/src/hooks/useOverlay.hook.ts
+++ b/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" })
      }
    }

@@ -43,10 +40,22 @@ export const useOverlay = (listen = true) => {
    }, 80)
  }

+  const scrollToElement = (element: HTMLElement, anchorTop?: number) => {
+    const mainApp = document.getElementById("main-app")
+    if (mainApp && anchorTop !== undefined) {
+      mainApp.scrollTop = anchorTop
+    }
+
+    requestAnimationFrame(() => {
+      element.scrollIntoView({ behavior: "smooth", block: "start" })
+    })
+  }
+
  return {
    x,
    y,
    isMobile,
-    scrollToNote
+    scrollToNote,
+    scrollToElement
  }
 }
--- a/src/hooks/useRepos.hook.ts
+++ b/src/hooks/useRepos.hook.ts
@@ -1,4 +1,4 @@
-import { computed, ref } from "vue"
+import { computed, ref, watch } from "vue"

 import { useGitHubLogin } from "@/hooks/useGitHubLogin.hook"
 import { RepoBase } from "@/modules/repo/interfaces/RepoBase"
@@ -9,18 +9,32 @@ 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 { username, accessToken } = useGitHubLogin()

-  const loadMore = async () => {
-    if (!accessToken.value || !username.value) {
-      isReady.value = true
-      return
-    }
+const resetState = () => {
+  repos.value = []
+  currentPage.value = 0
+  totalCount.value = 0
+  isReady.value = false
+  isLoading.value = false
+  hasCredentialError.value = false
+  lastFetchedAt = 0
+}
+
+const loadMore = async () => {
+  if (!accessToken.value || !username.value) {
+    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", {
@@ -38,22 +52,45 @@ export const useRepos = () => {
    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(() => repos.value.length < totalCount.value)
+watch(accessToken, (next, prev) => {
+  if (next === prev) return
+  resetState()
+  if (next && username.value) {
+    lastFetchedAt = Date.now()
+    loadMore()
+  }
+})
+
+export const useRepos = () => {
+  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
+      resetState()
    }
    lastFetchedAt = Date.now()
    loadMore()
  }

-  return { repos, isReady, canLoadMore, loadMore }
+  return { repos, isReady, hasCredentialError, canLoadMore, loadMore }
 }
--- a/src/hooks/useResizeContainer.hook.ts
+++ b/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}svh`
    } 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, {
--- a/src/hooks/useRouteQueryStackedNotes.hook.ts
+++ b/src/hooks/useRouteQueryStackedNotes.hook.ts
@@ -18,24 +18,81 @@ export const useRouteQueryStackedNotes = () => {
  })
  const { height } = useWindowSize()

-  const { scrollToNote, isMobile } = useOverlay(false)
+  const { scrollToNote, scrollToElement, 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,
+    anchorTop?: number,
+    attempts = 30
+  ) => {
+    const element = document.querySelector(
+      `.note-${cleanNoteId}`
+    ) as HTMLElement | null
+
+    if (element) {
+      scrollToElement(element, anchorTop)
+      return
+    }
+
+    if (attempts <= 0) {
+      scrollToNote((index + 1) * height.value)
+      return
+    }
+
+    requestAnimationFrame(() => {
+      scrollToNoteElement(cleanNoteId, index, anchorTop, attempts - 1)
+    })
+  }
+
+  type ScrollToFocusedNoteOptions = {
+    noteId?: string | null
+    notes?: string[]
+    hash?: string
+    smoothHash?: boolean
+    anchorTop?: number
+  }
+
+  const scrollToFocusedNote = ({
+    noteId = null,
+    notes = stackedNotes.value,
+    hash,
+    smoothHash = false,
+    anchorTop
+  }: 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, anchorTop)
        } else {
          scrollToNote(0)
        }
@@ -47,16 +104,29 @@ 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
  ) => {
+    const anchorTop =
+      document.getElementById("main-app")?.scrollTop ?? undefined
+
    if (stackedNotes.value.includes(sha)) {
-      scrollToFocusedNote(selector ?? sha)
+      scrollToFocusedNote({
+        noteId: selector ?? sha,
+        hash,
+        smoothHash: true,
+        anchorTop
+      })
      return
    }

@@ -76,7 +146,7 @@ export const useRouteQueryStackedNotes = () => {
      stackedNotes.value = newStackedNotes
    }

-    scrollToFocusedNote(selector ?? sha, stackedNotes.value)
+    scrollToFocusedNote({ noteId: selector ?? sha, hash, anchorTop })
  }

  return {
--- a/src/modules/repo/interfaces/UserSettings.ts
+++ b/src/modules/repo/interfaces/UserSettings.ts
@@ -10,4 +10,5 @@ export interface UserSettings extends Model<DataType.UserSettings> {
  backlink?: boolean
  chosenTitleFont?: string
  chosenBodyFont?: string
+  pageWidth?: string
 }
--- a/src/modules/repo/services/repo.ts
+++ b/src/modules/repo/services/repo.ts
@@ -121,20 +121,23 @@ export const queryFileContent = async (
  repo: string,
  sha: string
 ) => {
-  const octokit = await getOctokit()
-
  if (!user || !repo) {
-    null
+    return null
  }

-  const file = await octokit.request(
-    "GET /repos/{owner}/{repo}/git/blobs/{file_sha}",
-    {
-      owner: user,
-      repo: repo,
-      file_sha: sha
-    }
-  )
-
-  return file?.data.content ?? null
+  try {
+    const octokit = await getOctokit()
+    const file = await octokit.request(
+      "GET /repos/{owner}/{repo}/git/blobs/{file_sha}",
+      {
+        owner: user,
+        repo: repo,
+        file_sha: sha
+      }
+    )
+    return file?.data.content ?? null
+  } catch (error) {
+    console.warn("queryFileContent failed", { user, repo, sha, error })
+    return null
+  }
 }
--- a/src/modules/repo/store/userRepo.store.ts
+++ b/src/modules/repo/store/userRepo.store.ts
@@ -1,4 +1,5 @@
 import { defineStore } from "pinia"
+import { toRaw } from "vue"

 import { data, generateId } from "@/data/data"
 import { DataType } from "@/data/DataType.enum"
@@ -34,14 +35,25 @@ export const useUserRepoStore = defineStore("USER_REPO_STATE", {
    _requestId: 0
  }),
  actions: {
-    _persistFonts() {
+    _persistLayout() {
      if (!this.userSettings) return
      try {
-        const { chosenTitleFont, chosenBodyFont, chosenFontSize, chosenFontFamily } =
-          this.userSettings
+        const {
+          chosenTitleFont,
+          chosenBodyFont,
+          chosenFontSize,
+          chosenFontFamily,
+          pageWidth
+        } = this.userSettings
        localStorage.setItem(
-          `remanso:fonts:${this.user}:${this.repo}`,
-          JSON.stringify({ chosenTitleFont, chosenBodyFont, chosenFontSize, chosenFontFamily })
+          `remanso:layout:${this.user}:${this.repo}`,
+          JSON.stringify({
+            chosenTitleFont,
+            chosenBodyFont,
+            chosenFontSize,
+            chosenFontFamily,
+            pageWidth
+          })
        )
      } catch {
        // ignore
@@ -52,17 +64,18 @@ export const useUserRepoStore = defineStore("USER_REPO_STATE", {
      this.user = user
      this.repo = repo

-      let lsFonts: Partial<UserSettings> = {}
+      let lsLayout: Partial<UserSettings> = {}
      try {
-        const lsRaw = localStorage.getItem(`remanso:fonts:${user}:${repo}`)
-        if (lsRaw) lsFonts = JSON.parse(lsRaw)
+        const lsRaw = localStorage.getItem(`remanso:layout:${user}:${repo}`)
+        if (lsRaw) lsLayout = JSON.parse(lsRaw)
      } catch {
        // ignore
      }

-      if (Object.keys(lsFonts).length) {
-        if (!this.userSettings) this.userSettings = { $type: DataType.UserSettings }
-        Object.assign(this.userSettings, lsFonts)
+      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}`)
@@ -80,8 +93,8 @@ export const useUserRepoStore = defineStore("USER_REPO_STATE", {
      }

      if (cachedUserSettings) {
-        // localStorage font choices take priority over PouchDB cache
-        this.userSettings = { ...cachedUserSettings, ...lsFonts }
+        // localStorage layout choices take priority over PouchDB cache
+        this.userSettings = { ...cachedUserSettings, ...lsLayout }
      }

      try {
@@ -135,6 +148,8 @@ export const useUserRepoStore = defineStore("USER_REPO_STATE", {
          this.userSettings.chosenTitleFont = chosenTitleFont
          this.userSettings.chosenBodyFont = chosenBodyFont

+          this._persistLayout()
+
          // Persist only repo config fields — chosen* are localStorage-only
          const {
            chosenTitleFont: _t,
@@ -142,7 +157,7 @@ export const useUserRepoStore = defineStore("USER_REPO_STATE", {
            chosenFontSize: _s,
            chosenFontFamily: _f,
            ...repoConfig
-          } = this.userSettings
+          } = toRaw(this.userSettings)
          data.update<DataType.UserSettings, UserSettings>({
            ...repoConfig,
            _id: userSettingsId
@@ -151,8 +166,10 @@ export const useUserRepoStore = defineStore("USER_REPO_STATE", {

      getCachedMainReadme(user, repo).then(async (cachedReadme) => {
        if (requestId !== this._requestId) return
-        this.readme = cachedReadme
-        this.readme = await getMainReadme(user, repo)
+        if (cachedReadme) this.readme = cachedReadme
+        const fetched = await getMainReadme(user, repo)
+        if (requestId !== this._requestId) return
+        this.readme = fetched
      })
    },
    addFile(file: RepoFile) {
@@ -170,7 +187,10 @@ export const useUserRepoStore = defineStore("USER_REPO_STATE", {
        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,
@@ -195,28 +215,28 @@ export const useUserRepoStore = defineStore("USER_REPO_STATE", {
        this.userSettings = { $type: DataType.UserSettings }
      }
      this.userSettings.chosenFontFamily = fontFamily
-      this._persistFonts()
+      this._persistLayout()
    },
    setFontSize(fontSize: string) {
      if (!this.userSettings) {
        this.userSettings = { $type: DataType.UserSettings }
      }
      this.userSettings.chosenFontSize = fontSize
-      this._persistFonts()
+      this._persistLayout()
    },
    setTitleFont(font: string) {
      if (!this.userSettings) {
        this.userSettings = { $type: DataType.UserSettings }
      }
      this.userSettings.chosenTitleFont = font
-      this._persistFonts()
+      this._persistLayout()
    },
    setBodyFont(font: string) {
      if (!this.userSettings) {
        this.userSettings = { $type: DataType.UserSettings }
      }
      this.userSettings.chosenBodyFont = font
-      this._persistFonts()
+      this._persistLayout()
    }
  }
 })
--- a/src/modules/user/hooks/useUserSettings.hook.ts
+++ b/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()
@@ -22,5 +24,9 @@ export const useUserSettings = () => {
      "--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()
  })
 }
--- a/src/router/router.ts
+++ b/src/router/router.ts
@@ -95,8 +95,9 @@ export const router = createRouter({
  routes
 })

-router.beforeEach(() => {
+router.beforeEach((to, from) => {
  if (!("startViewTransition" in document)) return
+  if (to.path === from.path) return
  return new Promise<void>((resolve) => {
    ;(
      document as Document & {
--- a/src/shims-vue.d.ts
+++ b/src/shims-vue.d.ts
@@ -1,5 +1,5 @@
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
+declare module "*.vue" {
+  import type { DefineComponent } from "vue"
  const component: DefineComponent<{}, {}, any>
  export default component
 }
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -13,6 +13,12 @@
  --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;
 }
@@ -25,8 +31,8 @@

@plugin 'daisyui' {
  themes:
-    emerald --default,
-    forest --prefersdark;
+    light --default,
+    dracula --prefersdark;
 }

@config '../../tailwind.config.js';
@@ -52,9 +58,17 @@
 html,
 body {
  height: 100dvh;
+  overflow: hidden;
  scroll-behavior: smooth;
 }

+@media screen and (max-width: 768px) {
+  html,
+  body {
+    overflow-y: auto;
+  }
+}
+
 .columns {
  margin-left: 0;
  margin-right: 0;
@@ -81,18 +95,36 @@ 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;
+    text-decoration: none;
  }
 }

+.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;
@@ -225,3 +257,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;
+}
--- a/src/theme.config.ts
+++ b/src/theme.config.ts
@@ -2,6 +2,6 @@
 // Update these values to change the light and dark themes

 export const themeConfig = {
-  light: 'emerald',
-  dark: 'forest'
+  light: 'light',
+  dark: 'dracula'
 }
--- a/src/utils/alloy.tmLanguage.json
+++ b/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" } }
+        }
+      ]
+    }
+  }
+}
--- a/src/utils/downloadFont.ts
+++ b/src/utils/downloadFont.ts
@@ -1,33 +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,
  cssVar = "--font-family"
 ): Promise<void> => {
-  const href = assembleFontLink(font)
+  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) {
-    const link = document.createElement("link")
-    link.href = href
-    link.rel = "stylesheet"
+    if (!alreadyLoaded) {
+      const link = document.createElement("link")
+      link.href = href
+      link.rel = "stylesheet"
+      document.head.appendChild(link)
+    }

-    document.head.appendChild(link)
+    try {
+      await new FontFaceObserver(families[0]).load()
+    } catch {
+      console.warn("error when loading font")
+    }
  }

-  try {
-    await new FontFaceObserver(font).load()
-
-    document.documentElement.style.setProperty(cssVar, font)
-  } catch (error) {
-    console.warn("error when loading font")
-  }
+  document.documentElement.style.setProperty(cssVar, font)
 }
--- a/src/utils/fileLanguage.ts
+++ b/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
+}
--- a/src/views/FleetingNotes.vue
+++ b/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
    })
--- a/src/views/HomeApp.vue
+++ b/src/views/HomeApp.vue
@@ -15,8 +15,7 @@ import WelcomeWorld from "@/components/WelcomeWorld.vue"
  display: flex;
  flex: 1;
  flex-direction: column;
-  align-items: center;
-  height: 100dvh;
+  min-height: 100dvh;
 }

 .authorize {
--- a/src/views/PublicNoteView.vue
+++ b/src/views/PublicNoteView.vue
@@ -241,7 +241,6 @@ watch(
    overflow-y: auto;
    height: 100vh;
    width: 100%;
-    position: sticky;

    .title {
      text-align: left;
@@ -249,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;
@@ -266,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);
    }
  }

--- a/src/views/RepoList.vue
+++ b/src/views/RepoList.vue
@@ -2,14 +2,21 @@
 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, canLoadMore, loadMore } =
-  useRepoList()
+const { isReady, hasCredentialError } = useRepos()
+const {
+  favoriteRepos,
+  otherRepos,
+  favoriteCheckboxes,
+  toggleCheckbox,
+  canLoadMore,
+  loadMore
+} = useRepoList()
 </script>

 <template>
@@ -20,6 +27,10 @@ const { favoriteRepos, otherRepos, favoriteCheckboxes, toggleCheckbox, canLoadMo
    <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
--- a/src/views/SpaceCowboy.vue
+++ b/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>

--- a/vite.config.mts
+++ b/vite.config.mts
@@ -22,7 +22,7 @@ export default defineConfig(({ command }) => {
          "pwa-512x512.png",
          "masked-icon.png",
          "maskable-icon-512x512.png",
-          "monochrome-icon.png",
+          "monochromeicon.png",
          "assets/*.svg"
        ],
        manifest: {
@@ -54,7 +54,7 @@ export default defineConfig(({ command }) => {
              purpose: "maskable"
            },
            {
-              src: "monochrome-icon.png",
+              src: "monochromeicon.png",
              sizes: "1024x1024",
              type: "image/png",
              purpose: "monochrome"