style(repos): use tabler lock icon for private repos

Align the repo manager with WelcomeWorld and PublicNoteView: editorial
top nav, serif hero, pastel favorite tiles, A-Z grouped list, skeleton
and credential-error states, and a name filter.

.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"
-    }
   }
 }

.husky/_pre-push

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

.zed/settings.json

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

Dockerfile

@@ -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
 

_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)
+})

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

@@ -10,7 +10,7 @@ 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                                                    |
@@ -137,14 +137,18 @@ Zustand replaces Pinia. The store shape is identical to `userRepo.store.ts`:
 
 ```ts
 const useRepoStore = create<RepoState>((set, get) => ({
-  user: '',
+  user: "",
-  repo: '',
+  repo: "",
   files: [],
   userSettings: null,
   needToLogin: false,
   setRepo: (user, repo) => set({ user, repo }),
-  loadFiles: async () => { /* Octokit call */ },
+  loadFiles: async () => {
-  loadSettings: async () => { /* MMKV read */ },
+    /* 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

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" />

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",
+    "theme:dark": "esno _scripts/change-theme-dark.ts"
-    "generate-pwa-assets": "pwa-assets-generator"
   },
   "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",

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:

pnpm-workspace.yaml

@@ -1,2 +1,7 @@
 allowBuilds:
+  '@parcel/watcher': true
   core-js: true
+  esbuild: true
+  fsevents: true
+  sharp: true
+  vue-demi: true

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),

src/bus/noteEventBus.ts

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

src/components/AuthorizeUser.vue

@@ -19,8 +19,7 @@ onBeforeMount(async () => {
     if ("error" in token) {
       hasError.value = true
     } else {
-      token.access_token
+      await saveCredentials(token)
-      saveCredentials(token)
     }
 
     router.replace({ name: "Home" })

src/components/FluxNote.vue

@@ -1,16 +1,11 @@
 <script lang="ts" setup>
-import {
+import { computed, nextTick, onMounted, onUnmounted, toRefs, watch } from "vue"
-  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;
   }
 

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
+      <select id="title-font" class="select" v-model="titleFont">
-        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
+      <select id="body-font" class="select" v-model="bodyFont">
-        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
+      <select id="font-size" class="select" v-model="fontSize">
-        id="font-size"
-        class="select"
-        v-model="fontSize"
-      >
         <option v-for="size in fontSizes" :key="size" :value="size">
           {{ size }}
         </option>

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>

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>

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>

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
+  await checkFreshness()
-  const newSha = await updateFile({
+  if (freshnessStatus.value === "outdated") {
-    content: rawContent.value,
+    conflictOpen.value = true
-    path: path.value,
-    sha: editedSha
-  })
-
-  if (!newSha) {
-    console.warn("no new SHA found for this file")
-
     return
   }
 
-  await saveCacheNote(encodeUTF8ToBase64(rawContent.value), {
+  await performSave()
-    editedSha: newSha
-  })
-  initialRawContent.value = rawContent.value
 })
+
+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,23 +275,16 @@ watch(mode, async (newMode) => {
       [`note-${sha}`]: true
     }"
   >
-    <a
+    <div class="title-stacked-note breadcrumbs text-sm" :class="titleClassName">
-      class="title-stacked-note-link"
+      <div class="action-bar">
-      @click.prevent="scrollToFocusedNote(props.sha)"
+        <note-freshness-badge
-    >
+          :status="freshnessStatus"
-      <div
+          :last-checked-at="lastCheckedAt"
-        class="title-stacked-note breadcrumbs text-sm"
+          @click="onBadgeClick"
-        :class="titleClassName"
+          class="action"
-      >
+        />
-        <ul>
-          <li v-for="(part, i) in breadcrumbs" :key="i">
-            {{ part }}
-          </li>
-        </ul>
-      </div>
-    </a>
-    <section class="text-content">
         <button
+          v-if="isMarkdown"
           class="action button is-text is-light"
           :class="{ 'is-link': mode === 'edit' }"
           :style="mode === 'edit' ? 'color: var(--color-primary)' : ''"
@@ -205,12 +333,35 @@ watch(mode, async (newMode) => {
             <path d="M14 4l0 4l-6 0l0 -4" />
           </svg>
         </button>
-      <div v-if="mode === 'edit'" class="edit">
+      </div>
+      <a
+        class="title-stacked-note-link"
+        @click.prevent="scrollToFocusedNote({ noteId: props.sha })"
+      >
+        <ul>
+          <li v-for="(part, i) in breadcrumbs" :key="i">
+            {{ part }}
+          </li>
+        </ul>
+      </a>
+    </div>
+    <section class="text-content">
+      <div v-if="mode === 'edit' && isMarkdown" class="edit">
         <edit-note v-model="rawContent" />
       </div>
-      <div v-if="mode === 'read'" class="note-content" v-html="content"></div>
+      <div
+        v-if="mode === 'read'"
+        class="note-content"
+        v-html="displayedContent"
+      ></div>
     </section>
     <linked-notes v-if="hasBacklinks && content" :sha="sha" />
+    <note-conflict-modal
+      v-model:open="conflictOpen"
+      @discard="onConflictDiscard"
+      @overwrite="onConflictOverwrite"
+      @cancel="onConflictCancel"
+    />
   </div>
 </template>
 
@@ -228,7 +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;
-  margin: 0.2rem;
+
+  &: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 {

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 {

src/constants/note-width.ts

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

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

src/hooks/useCheckboxCommit.hook.ts

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

src/hooks/useComputeBacklinks.hook.ts

@@ -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>(
+        const fileBacklink = await data.get<
-          fileBacklinkId
+          DataType.BacklinkNote,
-        )
+          BacklinkNote
+        >(fileBacklinkId)
         if (fileBacklink) {
           continue
         }

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 }) =>
+    fetchLatestSha,
-      putFile(props),
+    updateFile: async (props: {
+      content: string
+      path: string
+      sha: string
+    }) => putFile(props),
     createFile: async (props: { content: string; path: string }) =>
       putFile(props)
   }

src/hooks/useLinks.hook.ts

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

src/hooks/useMarkdown.hook.ts

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

src/hooks/useNoteFreshness.hook.ts

@@ -0,0 +1,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
+  }
+}

src/hooks/useNoteView.hook.ts

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

src/hooks/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
+      const mainApp = document.getElementById("main-app")
-      y.value = document.body.scrollTop || window.scrollY
+      x.value = mainApp?.scrollLeft ?? 0
+      y.value = mainApp?.scrollTop ?? 0
     }
-    useEventListener(window, "scroll", updateScroll, {
+    useEventListener(
-      passive: true,
+      () => document.getElementById("main-app"),
-      capture: false
+      "scroll",
-    })
+      updateScroll,
-    useEventListener(document.body, "scroll", updateScroll, {
+      { passive: true }
-      passive: true,
+    )
-      capture: false
-    })
   }
 
   const scrollToNote = (to: number) => {
     const go = () => {
+      const mainApp = document.getElementById("main-app")
+      if (!mainApp) return
+
       if (isMobile.value) {
-        document.body.scrollTop = to
+        mainApp.scrollTo({ top: to, behavior: "smooth" })
-        document.documentElement.scrollTop = to
       } else {
-        document.body.scrollLeft = to
+        mainApp.scrollTo({ left: to, behavior: "smooth" })
-        document.documentElement.scrollLeft = to
       }
     }
 
@@ -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
   }
 }

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 () => {
+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
     )
-    isReady.value = true
+  } 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 = []
+      resetState()
-      currentPage.value = 0
-      totalCount.value = 0
-      isReady.value = false
     }
     lastFetchedAt = Date.now()
     loadMore()
   }
 
-  return { repos, isReady, canLoadMore, loadMore }
+  return { repos, isReady, hasCredentialError, canLoadMore, loadMore }
 }

src/hooks/useResizeContainer.hook.ts

@@ -1,4 +1,4 @@
-import { onMounted, type Ref, watch } from "vue"
+import { onMounted, onUnmounted, type Ref, watch } from "vue"
 
 import { getNoteWidth } from "@/constants/note-width"
 import { useOverlay } from "@/hooks/useOverlay.hook"
@@ -19,9 +19,9 @@ export const useResizeContainer = (
     }
 
     if (isMobile.value) {
-      container.style.height = `${(stackedNotes.value.length + 1) * 100}vh`
+      container.style.height = `${(stackedNotes.value.length + 1) * 100}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, {

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 = (
+  const scrollToHashInNote = (
-    noteId: string | null = null,
+    cleanSha: string,
-    notes: string[] = stackedNotes.value
+    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(":", "-")
+          scrollToNoteElement(noteId.replaceAll(":", "-"), index, anchorTop)
-          const element = document.querySelector(
-            `.note-${cleanNoteId}`
-          ) as HTMLElement
-
-          const top = (index + 1) * (element?.clientHeight ?? height.value)
-          scrollToNote(top)
         } 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 {

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
 }

src/modules/repo/services/repo.ts

@@ -121,12 +121,12 @@ export const queryFileContent = async (
   repo: string,
   sha: string
 ) => {
-  const octokit = await getOctokit()
-
   if (!user || !repo) {
-    null
+    return null
   }
 
+  try {
+    const octokit = await getOctokit()
     const file = await octokit.request(
       "GET /repos/{owner}/{repo}/git/blobs/{file_sha}",
       {
@@ -135,6 +135,9 @@ export const queryFileContent = async (
         file_sha: sha
       }
     )
-
     return file?.data.content ?? null
+  } catch (error) {
+    console.warn("queryFileContent failed", { user, repo, sha, error })
+    return null
+  }
 }

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 } =
+        const {
-          this.userSettings
+          chosenTitleFont,
+          chosenBodyFont,
+          chosenFontSize,
+          chosenFontFamily,
+          pageWidth
+        } = this.userSettings
         localStorage.setItem(
-          `remanso:fonts:${this.user}:${this.repo}`,
+          `remanso:layout:${this.user}:${this.repo}`,
-          JSON.stringify({ chosenTitleFont, chosenBodyFont, chosenFontSize, chosenFontFamily })
+          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}`)
+        const lsRaw = localStorage.getItem(`remanso:layout:${user}:${repo}`)
-        if (lsRaw) lsFonts = JSON.parse(lsRaw)
+        if (lsRaw) lsLayout = JSON.parse(lsRaw)
       } catch {
         // ignore
       }
 
-      if (Object.keys(lsFonts).length) {
+      if (Object.keys(lsLayout).length) {
-        if (!this.userSettings) this.userSettings = { $type: DataType.UserSettings }
+        if (!this.userSettings)
-        Object.assign(this.userSettings, lsFonts)
+          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
+        // localStorage layout choices take priority over PouchDB cache
-        this.userSettings = { ...cachedUserSettings, ...lsFonts }
+        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
+        if (cachedReadme) this.readme = cachedReadme
-        this.readme = await getMainReadme(user, repo)
+        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()
     }
   }
 })

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()
   })
 }

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 & {

src/shims-vue.d.ts

@@ -1,5 +1,5 @@
-declare module '*.vue' {
+declare module "*.vue" {
-  import type { DefineComponent } from 'vue'
+  import type { DefineComponent } from "vue"
   const component: DefineComponent<{}, {}, any>
   export default component
 }

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,
+    light --default,
-    forest --prefersdark;
+    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;
+}

src/theme.config.ts

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

src/utils/alloy.tmLanguage.json

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

src/utils/downloadFont.ts

@@ -1,33 +1,56 @@
 import FontFaceObserver from "fontfaceobserver"
 
-const assembleFontLink = (font: string) => {
+const GENERIC_FAMILIES = new Set([
-  return `https://api.fonts.coollabs.io/css2?display=swap&family=${font
+  "serif",
-    .replaceAll(",", "&family=")
+  "sans-serif",
-    .replaceAll(" ", "+")}`
+  "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
+  if (href) {
-  const existingLink = document.querySelector(`link[href="${href}"]`)
+    const alreadyLoaded = Array.from(
+      document.head.querySelectorAll<HTMLLinkElement>('link[rel="stylesheet"]')
+    ).some((link) => link.href === href)
 
-  if (!existingLink) {
+    if (!alreadyLoaded) {
       const link = document.createElement("link")
       link.href = href
       link.rel = "stylesheet"
-
       document.head.appendChild(link)
     }
 
     try {
-    await new FontFaceObserver(font).load()
+      await new FontFaceObserver(families[0]).load()
-
+    } catch {
-    document.documentElement.style.setProperty(cssVar, font)
-  } catch (error) {
       console.warn("error when loading font")
     }
+  }
+
+  document.documentElement.style.setProperty(cssVar, font)
 }

src/utils/fileLanguage.ts

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

src/views/FleetingNotes.vue

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

src/views/HomeApp.vue

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

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);
     }
   }
 

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>
 

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"