style: no more underline for header tag

pnpm 11.x reads the per-package allowBuilds boolean map, not the
pnpm 10 onlyBuiltDependencies arrays. The array form is silently
ignored, so every build script falls through as 'ignored' and
strict CI mode fails. Confirmed by reproducing locally and by
inspecting what 'pnpm approve-builds --all' writes back.

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

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,7 +13,6 @@
     "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"
   },
@@ -84,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

@@ -204,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
@@ -4052,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==}
 
@@ -10762,8 +10754,6 @@ snapshots:
 
   human-signals@4.3.1: {}
 
-  husky@9.1.7: {}
-
   ico-endec@0.1.6: {}
 
   iconv-lite@0.4.24:

pnpm-workspace.yaml

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

src/components/FluxNote.vue

@@ -5,6 +5,7 @@ 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"
@@ -44,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(() =>
@@ -104,8 +106,13 @@ onUnmounted(() => {
       <slot />
       <skeleton-loader v-if="isLoading" />
       <div v-else-if="withContent && !hasContent" class="repo-not-found">
-        <p>This repository is not accessible.</p>
-        <sign-in-github />
+        <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 && hasContent"
@@ -211,11 +218,6 @@ $header-height: 40px;
     display: flex;
     flex-direction: column;
     overflow-y: auto;
-    position: sticky;
-
-    &:not(:first-child) {
-      border-top: 1px solid rgba(18, 19, 58, 0.2);
-    }
 
     .title {
       text-align: left;
@@ -223,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;
@@ -239,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);
     }
   }
 }
@@ -257,6 +266,7 @@ $header-height: 40px;
 
   .note {
     width: 100vw;
+    height: 100svh;
     overflow-y: visible;
   }
 

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

@@ -18,18 +18,28 @@ import {
   runMermaid,
   useShikiji
 } from "@/hooks/useMarkdown.hook"
-import { getFileLanguage, isMarkdownPath } from "@/utils/fileLanguage"
+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")
 )
@@ -104,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], () => {
@@ -132,7 +166,43 @@ watch([content, mode], () => {
   })
 })
 
+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
 
@@ -141,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>
@@ -174,72 +275,77 @@ watch(mode, async (newMode) => {
       [`note-${sha}`]: true
     }"
   >
-    <a
-      class="title-stacked-note-link"
-      @click.prevent="scrollToFocusedNote({ noteId: 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
-        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 v-if="mode === 'edit' && isMarkdown" class="edit">
         <edit-note v-model="rawContent" />
       </div>
@@ -250,6 +356,12 @@ watch(mode, async (newMode) => {
       ></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>
 
@@ -267,7 +379,7 @@ $border-color: rgba(18, 19, 58, 0.2);
   }
 
   section {
-    padding: 0 0.5rem 2rem;
+    padding: 0 0.5rem;
   }
 }
 
@@ -281,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 {
@@ -296,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;
@@ -313,9 +435,10 @@ $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;
     }
 
@@ -330,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);
   }
@@ -341,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

@@ -130,7 +130,7 @@ $border-color: rgba(18, 19, 58, 0.2);
   }
 
   section {
-    padding: 0 0.5rem 2rem;
+    padding: 0 0.5rem;
   }
 }
 
@@ -144,7 +144,6 @@ $border-color: rgba(18, 19, 58, 0.2);
   background-color: var(--color-base-100);
   color: var(--color-base-content);
   font-size: 0.8em;
-  overflow: hidden;
 
   ul,
   li {
@@ -178,7 +177,7 @@ $border-color: rgba(18, 19, 58, 0.2);
     padding: 0 0.75rem 1rem;
 
     section {
-      padding: 1rem 0 2rem;
+      padding: 1rem 0;
       overflow-x: auto;
     }
 
@@ -193,6 +192,8 @@ $border-color: rgba(18, 19, 58, 0.2);
   .stacked-note {
     border-top: 0;
     border-left: 1px solid $border-color;
+    position: sticky;
+    top: 0;
   }
 
   .title-stacked-note {

src/components/WelcomeWorld.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import fontColorContrast from "font-color-contrast"
 import { getHex } from "pastel-color"
-import { computed, ref } from "vue"
+import { computed, onMounted, ref } from "vue"
 import { useRouter } from "vue-router"
 
 import SignInAtproto from "@/components/SignInAtproto.vue"
@@ -10,9 +10,12 @@ import ThemeSwap from "@/components/ThemeSwap.vue"
 import { useATProtoLogin } from "@/hooks/useATProtoLogin.hook"
 import { useForm } from "@/hooks/useForm.hook"
 import { useGitHubLogin } from "@/hooks/useGitHubLogin.hook"
+import { usePublicNoteList } from "@/hooks/usePublicNoteList.hook"
+import { toShortDid } from "@/modules/atproto/shortDid"
 import { useNeedReviewCards } from "@/modules/card/hooks/useNeedReviewCards"
 import { useLastVisitedRepos } from "@/modules/history/hooks/useLastVisitedRepos.hook"
 import { useFavoriteRepos } from "@/modules/repo/hooks/useFavoriteRepos.hook"
+import { slugify } from "@/utils/slugify"
 
 const { username, accessToken } = useGitHubLogin()
 const { isLoggedIn: isATProtoLoggedIn, handle, avatarUrl } = useATProtoLogin()
@@ -82,6 +85,40 @@ const reviewRepo = computed(() => savedFavoriteRepos.value[0] ?? null)
 const showReviewCard = computed(
   () => cardsToReview.value.length > 0 && reviewRepo.value !== null
 )
+
+const {
+  notes: publicNotes,
+  isLoading: publicNotesLoading,
+  onLoadMore: loadPublicNotes,
+  getAuthor: getPublicAuthor
+} = usePublicNoteList()
+const recentPublicNotes = computed(() => publicNotes.value.slice(0, 5))
+const sidebarPublicNotes = computed(() => publicNotes.value.slice(0, 3))
+const hasPublicNotes = computed(() => recentPublicNotes.value.length > 0)
+const publicNotesLoadFailed = computed(
+  () => !publicNotesLoading.value && publicNotes.value.length === 0
+)
+const formatPublicDate = (iso: string) =>
+  new Date(iso).toLocaleDateString(undefined, {
+    month: "short",
+    day: "numeric"
+  })
+const publicNoteHandle = (did: string) => {
+  const handle = getPublicAuthor(did)
+  return handle ? `@${handle}` : toShortDid(did)
+}
+const publicNoteRoute = (note: { did: string; rkey: string; title: string }) => ({
+  name: "PublicNoteView",
+  params: {
+    shortDid: toShortDid(note.did),
+    rkey: note.rkey,
+    slug: slugify(note.title)
+  }
+})
+
+onMounted(() => {
+  loadPublicNotes()
+})
 </script>
 
 <template>
@@ -310,12 +347,43 @@ const showReviewCard = computed(
                 </div>
               </template>
 
-              <div class="section-label mono">§ from the network</div>
+              <div class="section-label mono">§ drifting in</div>
+              <ul
+                v-if="hasPublicNotes"
+                class="network-side-list"
+              >
+                <li
+                  v-for="note in sidebarPublicNotes"
+                  :key="`${note.did}-${note.rkey}`"
+                >
+                  <router-link
+                    :to="publicNoteRoute(note)"
+                    class="network-side-link"
+                  >
+                    <span class="network-side-title">{{ note.title }}</span>
+                    <span class="mono network-side-meta">
+                      {{ publicNoteHandle(note.did) }}
+                      <span class="li-dot">·</span>
+                      {{ formatPublicDate(note.publishedAt) }}
+                    </span>
+                  </router-link>
+                </li>
+              </ul>
+              <ul
+                v-else-if="publicNotesLoading"
+                class="network-side-list"
+                aria-hidden="true"
+              >
+                <li v-for="i in 3" :key="i" class="network-side-skel">
+                  <span class="skel skel-title" />
+                  <span class="skel skel-date" />
+                </li>
+              </ul>
               <router-link
                 :to="{ name: 'PublicNoteListView' }"
-                class="hw-btn pub-notes-btn"
+                class="network-side-all"
               >
-                Browse public notes →
+                See all public notes →
               </router-link>
             </aside>
           </div>
@@ -376,23 +444,62 @@ const showReviewCard = computed(
                   </button>
                 </form>
               </div>
-              <!-- CTA 02: Public notes -->
-              <div class="hero-ed-path">
+              <!-- CTA 02: Public notes (live preview) -->
+              <div class="hero-ed-path hero-ed-path-network">
                 <div class="hep-head">
                   <span class="hep-n mono">02</span>
                   <div>
                     <div class="hep-t">From the open network</div>
                     <div class="hep-d">
-                      Your `.pub.md` files become public. Read public notes
-                      published via ATProto — no account needed.
+                      Live notes published via ATProto. No account needed —
+                      tap one and read.
                     </div>
                   </div>
                 </div>
+                <div
+                  v-if="hasPublicNotes"
+                  class="network-strip"
+                  role="list"
+                >
+                  <router-link
+                    v-for="note in recentPublicNotes"
+                    :key="`${note.did}-${note.rkey}`"
+                    :to="publicNoteRoute(note)"
+                    class="network-card"
+                    role="listitem"
+                  >
+                    <span class="mono network-card-handle">{{
+                      publicNoteHandle(note.did)
+                    }}</span>
+                    <span class="network-card-title">{{ note.title }}</span>
+                    <span class="mono network-card-date">{{
+                      formatPublicDate(note.publishedAt)
+                    }}</span>
+                  </router-link>
+                </div>
+                <div
+                  v-else-if="publicNotesLoading"
+                  class="network-strip"
+                  aria-hidden="true"
+                >
+                  <div
+                    v-for="i in 3"
+                    :key="i"
+                    class="network-card network-card--skel"
+                  >
+                    <span class="skel skel-handle" />
+                    <span class="skel skel-title" />
+                    <span class="skel skel-date" />
+                  </div>
+                </div>
+                <div v-else-if="publicNotesLoadFailed" class="network-empty">
+                  The pool is quiet right now.
+                </div>
                 <router-link
                   :to="{ name: 'PublicNoteListView' }"
-                  class="hw-btn hw-btn-pink hep-btn"
+                  class="network-all"
                 >
-                  Browse public notes →
+                  Browse all public notes →
                 </router-link>
               </div>
             </div>
@@ -438,7 +545,23 @@ const showReviewCard = computed(
           </p>
           <div class="feature-row">
             <div class="feat">
-              <span class="feat-icon">≣</span>
+              <span class="feat-icon" aria-hidden="true">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path d="M12 4l-8 4l8 4l8 -4l-8 -4" />
+                  <path d="M4 12l8 4l8 -4" />
+                  <path d="M4 16l8 4l8 -4" />
+                </svg>
+              </span>
               <h4>Stacked notes</h4>
               <p>
                 Click a link and the next note slides in beside the current one.
@@ -447,7 +570,22 @@ const showReviewCard = computed(
               </p>
             </div>
             <div class="feat">
-              <span class="feat-icon">↹</span>
+              <span class="feat-icon" aria-hidden="true">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path d="M9 14l-4 -4l4 -4" />
+                  <path d="M5 10h11a4 4 0 1 1 0 8h-1" />
+                </svg>
+              </span>
               <h4>Automatic backlinks</h4>
               <p>
                 Every mention becomes a two-way link. See every note that points
@@ -455,7 +593,29 @@ const showReviewCard = computed(
               </p>
             </div>
             <div class="feat">
-              <span class="feat-icon">◈</span>
+              <span class="feat-icon" aria-hidden="true">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path d="M15 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+                  <path d="M11 8a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+                  <path d="M11 16a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+                  <path d="M12 15v-6" />
+                  <path d="M15 11l-2 -2" />
+                  <path d="M11 7l-1.9 -1.9" />
+                  <path
+                    d="M13.446 2.6l7.955 7.954a2.045 2.045 0 0 1 0 2.892l-7.955 7.955a2.045 2.045 0 0 1 -2.892 0l-7.955 -7.955a2.045 2.045 0 0 1 0 -2.892l7.955 -7.955a2.045 2.045 0 0 1 2.892 0"
+                  />
+                </svg>
+              </span>
               <h4>Your files, your Git</h4>
               <p>
                 Remanso reads GitHub directly. Edit in your favourite editor.
@@ -602,8 +762,7 @@ const showReviewCard = computed(
                 <h4>Link, don't nest.</h4>
                 <p>
                   Folders calcify. Links compound. Every
-                  <code>[like this](new-idea.md)</code> becomes a door to a new
-                  idea.
+                  <code>[link](note.md)</code> becomes a door to a new idea.
                 </p>
               </div>
             </li>
@@ -612,8 +771,8 @@ const showReviewCard = computed(
               <div>
                 <h4>Let the web emerge.</h4>
                 <p>
-                  Don't plan the structure. Write, link, re-read. Structure is a
-                  consequence of attention.
+                  Don't plan the structure. Write, link, re-read. Structure
+                  emerges from what you return to.
                 </p>
               </div>
             </li>
@@ -662,7 +821,13 @@ const showReviewCard = computed(
             <div class="footer-h">Learn</div>
             <a href="#about" class="footer-link">What is Remanso?</a>
             <a href="#zk" class="footer-link">Zettelkasten</a>
-            <a href="#" class="footer-link">ATProto &amp; Bluesky</a>
+            <a
+              href="https://atproto.com/"
+              target="_blank"
+              rel="noreferrer"
+              class="footer-link"
+              >atproto</a
+            >
           </div>
         </div>
       </div>
@@ -1098,8 +1263,8 @@ main {
 }
 
 .hero-ed-paths {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
+  display: flex;
+  flex-direction: column;
   gap: 1rem;
   margin-top: 0.5rem;
 }
@@ -1124,6 +1289,163 @@ main {
   }
 }
 
+.hero-ed-path-network {
+  gap: 1.25rem;
+
+  &:hover {
+    transform: none;
+    border-color: var(--hw-rule);
+    box-shadow: none;
+  }
+}
+
+.network-strip {
+  display: flex;
+  gap: 0.85rem;
+  overflow-x: auto;
+  padding: 0.25rem 0.25rem 0.75rem;
+  margin: 0 -0.25rem;
+  scroll-snap-type: x proximity;
+  scrollbar-width: thin;
+
+  &::-webkit-scrollbar {
+    height: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--hw-pink-wash-2);
+    border-radius: 999px;
+  }
+}
+
+.network-card {
+  flex: 0 0 220px;
+  scroll-snap-align: start;
+  display: flex;
+  flex-direction: column;
+  gap: 0.45rem;
+  padding: 0.9rem 1rem 0.85rem;
+  background: var(--hw-paper);
+  border: 1px solid var(--hw-rule);
+  border-radius: 4px;
+  text-decoration: none;
+  color: var(--hw-ink);
+  position: relative;
+  min-height: 130px;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
+  transition:
+    transform 0.15s ease,
+    border-color 0.15s ease,
+    box-shadow 0.2s ease;
+
+  &:hover {
+    transform: translateY(-2px);
+    border-color: var(--hw-pink-wash-2);
+    box-shadow: 0 14px 24px -18px rgba(201, 74, 125, 0.35);
+
+    .network-card-title {
+      color: var(--hw-pink-deep);
+    }
+  }
+}
+
+.network-card-handle {
+  font-size: 0.72rem;
+  color: var(--hw-ink-faint);
+  letter-spacing: 0.02em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.network-card-title {
+  font-family: var(--hw-serif);
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--hw-ink);
+  flex: 1;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  transition: color 0.15s ease;
+}
+
+.network-card-date {
+  font-size: 0.7rem;
+  color: var(--hw-ink-faint);
+  letter-spacing: 0.04em;
+  text-transform: lowercase;
+  margin-top: auto;
+}
+
+.network-card--skel {
+  pointer-events: none;
+}
+
+.skel {
+  display: block;
+  border-radius: 3px;
+  background: linear-gradient(
+    90deg,
+    var(--hw-pink-wash) 0%,
+    var(--hw-pink-wash-2) 50%,
+    var(--hw-pink-wash) 100%
+  );
+  background-size: 200% 100%;
+  animation: skel-shimmer 1.4s ease-in-out infinite;
+}
+
+.skel-handle {
+  height: 0.6rem;
+  width: 60%;
+}
+
+.skel-title {
+  height: 0.95rem;
+  width: 90%;
+  margin-top: 0.1rem;
+}
+
+.skel-date {
+  height: 0.55rem;
+  width: 30%;
+  margin-top: auto;
+}
+
+@keyframes skel-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+.network-empty {
+  font-size: 0.9rem;
+  color: var(--hw-ink-faint);
+  font-style: italic;
+  padding: 0.5rem 0;
+}
+
+.network-all {
+  align-self: flex-start;
+  font-family: var(--hw-mono);
+  font-size: 0.82rem;
+  letter-spacing: 0.04em;
+  color: var(--hw-pink-deep);
+  text-decoration: none;
+  border-bottom: 1px dashed var(--hw-pink-wash-2);
+  padding-bottom: 1px;
+
+  &:hover {
+    color: var(--hw-pink-deep);
+    border-bottom-color: var(--hw-pink);
+  }
+}
+
 .hep-head {
   display: flex;
   gap: 0.85rem;
@@ -1174,6 +1496,10 @@ main {
   }
 }
 
+.hero-ed-left {
+  min-width: 0;
+}
+
 .hero-ed-right {
   display: flex;
   justify-content: center;
@@ -1278,16 +1604,19 @@ main {
 }
 
 .feat-icon {
-  width: 28px;
-  height: 28px;
+  width: 32px;
+  height: 32px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-family: var(--hw-mono);
-  font-size: 0.75rem;
   color: var(--hw-pink-deep);
   border: 1px solid var(--hw-pink);
   border-radius: 50%;
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
 }
 
 /* ── Demo notes ─────────────────────────────────────────────── */
@@ -1794,10 +2123,79 @@ img {
   padding: 0.35rem 0.8rem;
 }
 
-.pub-notes-btn {
-  width: 100%;
-  justify-content: center;
+.network-side-list {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 0.75rem;
+
+  li {
+    border-bottom: 1px dashed var(--hw-rule);
+
+    &:last-child {
+      border-bottom: 0;
+    }
+  }
+}
+
+.network-side-link {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  padding: 0.65rem 0;
+  text-decoration: none;
+  color: var(--hw-ink);
+  transition: color 0.15s ease;
+
+  &:hover {
+    .network-side-title {
+      color: var(--hw-pink-deep);
+    }
+  }
+}
+
+.network-side-title {
+  font-family: var(--hw-serif);
+  font-size: 0.95rem;
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--hw-ink);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  transition: color 0.15s ease;
+}
+
+.network-side-meta {
+  font-size: 0.72rem;
+  color: var(--hw-ink-faint);
+  display: flex;
+  gap: 0.4rem;
+  align-items: center;
+  letter-spacing: 0.02em;
+}
+
+.network-side-skel {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  padding: 0.65rem 0;
+}
+
+.network-side-all {
+  display: inline-block;
   margin-top: 0.25rem;
+  font-family: var(--hw-mono);
+  font-size: 0.78rem;
+  letter-spacing: 0.04em;
+  color: var(--hw-pink-deep);
+  text-decoration: none;
+  border-bottom: 1px dashed var(--hw-pink-wash-2);
+  padding-bottom: 1px;
+
+  &:hover {
+    border-bottom-color: var(--hw-pink);
+  }
 }
 
 /* ── Footer ─────────────────────────────────────────────────── */
@@ -1956,10 +2354,6 @@ img {
     height: 160px;
   }
 
-  .hero-ed-paths {
-    grid-template-columns: 1fr;
-  }
-
   .feature-row {
     grid-template-columns: 1fr;
     gap: 1.5rem;

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/useGitHubContent.hook.ts

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

src/hooks/useMarkdown.hook.ts

@@ -11,8 +11,8 @@ 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 type { LanguageRegistration } from "shikiji-core"
 import mermaid from "mermaid"
+import type { LanguageRegistration } from "shikiji-core"
 import { Ref, toValue } from "vue"
 
 import alloyGrammar from "@/utils/alloy.tmLanguage.json"
@@ -97,16 +97,11 @@ const md = new MarkdownIt({
     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"
@@ -126,8 +121,11 @@ export const useShikiji = async () => {
           aliases: ["als"]
         } as unknown as LanguageRegistration
       ]
+    }).then((plugin) => {
+      md.use(plugin)
     })
-  )
+  }
+  return shikijiPromise
 }
 
 let mermaidInitialized = false

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/useOverlay.hook.ts

@@ -40,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/useResizeContainer.hook.ts

@@ -18,7 +18,9 @@ export const useResizeContainer = (
       return
     }
 
-    if (!isMobile.value) {
+    if (isMobile.value) {
+      container.style.height = `${(stackedNotes.value.length + 1) * 100}svh`
+    } else {
       container.style.minWidth = `${
         getNoteWidth() * (stackedNotes.value.length + 1)
       }px`

src/hooks/useRouteQueryStackedNotes.hook.ts

@@ -18,7 +18,7 @@ export const useRouteQueryStackedNotes = () => {
   })
   const { height } = useWindowSize()
 
-  const { scrollToNote, isMobile } = useOverlay(false)
+  const { scrollToNote, scrollToElement, isMobile } = useOverlay(false)
 
   const scrollToHashInNote = (
     cleanSha: string,
@@ -50,24 +50,25 @@ export const useRouteQueryStackedNotes = () => {
   const scrollToNoteElement = (
     cleanNoteId: string,
     index: number,
+    anchorTop?: number,
     attempts = 30
   ) => {
-    if (attempts <= 0) {
-      scrollToNote((index + 1) * height.value)
-      return
-    }
-
     const element = document.querySelector(
       `.note-${cleanNoteId}`
     ) as HTMLElement | null
 
     if (element) {
-      scrollToNote(element.offsetTop)
+      scrollToElement(element, anchorTop)
+      return
+    }
+
+    if (attempts <= 0) {
+      scrollToNote((index + 1) * height.value)
       return
     }
 
     requestAnimationFrame(() => {
-      scrollToNoteElement(cleanNoteId, index, attempts - 1)
+      scrollToNoteElement(cleanNoteId, index, anchorTop, attempts - 1)
     })
   }
 
@@ -76,20 +77,22 @@ export const useRouteQueryStackedNotes = () => {
     notes?: string[]
     hash?: string
     smoothHash?: boolean
+    anchorTop?: number
   }
 
   const scrollToFocusedNote = ({
     noteId = null,
     notes = stackedNotes.value,
     hash,
-    smoothHash = false
+    smoothHash = false,
+    anchorTop
   }: ScrollToFocusedNoteOptions = {}) => {
     nextTick(() => {
       const index = noteId ? notes.findIndex((nid) => nid === noteId) : 0
 
       if (isMobile.value) {
         if (noteId) {
-          scrollToNoteElement(noteId.replaceAll(":", "-"), index)
+          scrollToNoteElement(noteId.replaceAll(":", "-"), index, anchorTop)
         } else {
           scrollToNote(0)
         }
@@ -114,11 +117,15 @@ export const useRouteQueryStackedNotes = () => {
     selector?: string,
     hash?: string
   ) => {
+    const anchorTop =
+      document.getElementById("main-app")?.scrollTop ?? undefined
+
     if (stackedNotes.value.includes(sha)) {
       scrollToFocusedNote({
         noteId: selector ?? sha,
         hash,
-        smoothHash: true
+        smoothHash: true,
+        anchorTop
       })
       return
     }
@@ -139,7 +146,7 @@ export const useRouteQueryStackedNotes = () => {
       stackedNotes.value = newStackedNotes
     }
 
-    scrollToFocusedNote({ noteId: selector ?? sha, hash })
+    scrollToFocusedNote({ noteId: selector ?? sha, hash, anchorTop })
   }
 
   return {

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

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

@@ -1,5 +1,5 @@
-import { toRaw } from "vue"
 import { defineStore } from "pinia"
+import { toRaw } from "vue"
 
 import { data, generateId } from "@/data/data"
 import { DataType } from "@/data/DataType.enum"
@@ -166,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) {

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/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';
@@ -89,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;

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'
 }

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

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"