andy-note-nuxt 0.2.0

package/app/components/LocalStorageChecklist.vue

@@ -0,0 +1,372 @@
+<script setup lang="ts">
+// Generic checklist with localStorage persistence for use in MDC content pages.
+// Reusable across challenges, build progression, gear upgrade lists, atlas
+// allocation tracking — anywhere a stateful checklist makes sense.
+//
+// `storageKey` is used verbatim — caller is responsible for namespacing
+// (e.g. `poe-challenges-phase-1`, `build-twshamap-checklist`). Two checklists
+// sharing a key share state.
+//
+// All styles in scoped <style> with plain CSS (no Tailwind utilities) to
+// stay independent of (a) Tailwind purge state when this file is new and
+// (b) prose-style overrides from ContentRenderer's `.content` wrapper.
+
+interface ChecklistItem {
+  id: string
+  label: string
+  hint?: string
+  group?: string
+}
+
+const props = defineProps<{
+  storageKey: string
+  title?: string
+  description?: string
+  items: ChecklistItem[]
+}>()
+
+const mounted = ref(false)
+const checked = ref<Set<string>>(new Set())
+
+function readStorage(): Set<string> {
+  try {
+    const raw = localStorage.getItem(props.storageKey)
+    if (!raw) return new Set()
+    const parsed = JSON.parse(raw) as unknown
+    if (
+      typeof parsed === 'object'
+      && parsed !== null
+      && 'checked' in parsed
+      && Array.isArray((parsed as { checked: unknown }).checked)
+    ) {
+      return new Set((parsed as { checked: string[] }).checked)
+    }
+  }
+  catch {
+    // localStorage unavailable (private mode etc.) — fall back to in-memory
+  }
+  return new Set()
+}
+
+function writeStorage(state: Set<string>): void {
+  try {
+    localStorage.setItem(props.storageKey, JSON.stringify({ checked: Array.from(state) }))
+  }
+  catch {
+    // swallow — in-memory state still works
+  }
+}
+
+onMounted(() => {
+  checked.value = readStorage()
+  mounted.value = true
+})
+
+const checkedCount = computed(() => checked.value.size)
+const totalCount = computed(() => props.items.length)
+const isComplete = computed(() => totalCount.value > 0 && checkedCount.value === totalCount.value)
+
+const hasGroups = computed(() => props.items.some(item => item.group))
+
+const groups = computed<Array<{ name: string | null; items: ChecklistItem[] }>>(() => {
+  if (!hasGroups.value) return [{ name: null, items: props.items }]
+  const map = new Map<string, ChecklistItem[]>()
+  for (const item of props.items) {
+    const key = item.group ?? ''
+    if (!map.has(key)) map.set(key, [])
+    map.get(key)!.push(item)
+  }
+  return Array.from(map.entries()).map(([name, items]) => ({ name: name || null, items }))
+})
+
+function toggle(itemId: string): void {
+  const next = new Set(checked.value)
+  if (next.has(itemId)) next.delete(itemId)
+  else next.add(itemId)
+  checked.value = next
+  writeStorage(next)
+}
+
+function reset(): void {
+  const n = checkedCount.value
+  if (n === 0) return
+  // eslint-disable-next-line no-restricted-globals
+  if (!confirm(`Reset ${n} mục đã đánh dấu?`)) return
+  checked.value = new Set()
+  writeStorage(new Set())
+}
+</script>
+
+<template>
+  <!-- All structural elements use <div>/<span> rather than prose tags
+       (ul/li/h3/p) so the surrounding ContentRenderer's `.content`
+       prose CSS (coral square ::before on li, h3 size, p margins, etc.)
+       does not target component internals. -->
+  <div class="lsc-card" role="group" :aria-label="title || 'Checklist'">
+    <div class="lsc-header">
+      <div class="lsc-header-row">
+        <div v-if="title" class="lsc-title">
+          {{ title }}
+        </div>
+        <div
+          v-if="mounted"
+          class="lsc-progress"
+          :class="{ 'lsc-progress--done': isComplete }"
+        >
+          {{ checkedCount }} / {{ totalCount }}
+        </div>
+        <button
+          v-if="mounted && checkedCount > 0"
+          type="button"
+          class="lsc-reset"
+          aria-label="Reset checklist"
+          @click="reset"
+        >
+          ↻
+        </button>
+      </div>
+      <div v-if="description" class="lsc-description">
+        {{ description }}
+      </div>
+    </div>
+
+    <div v-if="items.length === 0" class="lsc-empty">
+      No items.
+    </div>
+
+    <div v-else class="lsc-list">
+      <template v-for="group in groups" :key="group.name ?? '__flat__'">
+        <div v-if="group.name" class="lsc-group-label">
+          <span class="lsc-group-marker">▾</span>{{ group.name }}
+        </div>
+
+        <div v-for="item in group.items" :key="item.id" class="lsc-item">
+          <label class="lsc-row">
+            <input
+              type="checkbox"
+              class="lsc-checkbox"
+              :checked="mounted ? checked.has(item.id) : false"
+              @change="toggle(item.id)"
+            >
+            <span
+              class="lsc-label"
+              :class="{ 'lsc-label--checked': mounted && checked.has(item.id) }"
+            >
+              {{ item.label }}
+            </span>
+          </label>
+          <div v-if="item.hint" class="lsc-hint">
+            {{ item.hint }}
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* Plain CSS — independent of Tailwind purge state and ContentRenderer's
+   `.content` prose overrides. Colors hardcoded from theme tokens
+   in tailwind.config.js so palette stays consistent. */
+
+.lsc-card {
+  border: 3px solid #474541;
+  background: #2e2f2c;
+  box-shadow: 4px 4px 0 0 #474541;
+  margin: 1.5rem 0;
+  font-family: 'Space Grotesk', -apple-system, sans-serif;
+  color: #d5cfc5;
+}
+
+.lsc-header {
+  padding: 1rem 1rem 0.75rem;
+  border-bottom: 1px solid #474541;
+}
+
+.lsc-header-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.lsc-title {
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 0.95rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: -0.01em;
+  color: #d5cfc5;
+  line-height: 1.25;
+  margin: 0;
+  flex: 1 1 60%;
+  min-width: 0;
+}
+
+.lsc-progress {
+  font-family: 'SF Mono', Monaco, Consolas, monospace;
+  font-size: 0.625rem;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  color: #a8a298;
+  border: 1px solid #474541;
+  padding: 0.25rem 0.5rem;
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+.lsc-progress--done {
+  color: #ff7b6b;
+  border-color: #ff7b6b;
+}
+
+.lsc-reset {
+  font-family: 'SF Mono', Monaco, Consolas, monospace;
+  font-size: 0.625rem;
+  text-transform: uppercase;
+  color: #8a857c;
+  background: transparent;
+  border: 1px solid #474541;
+  padding: 0.25rem 0.5rem;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: color 0.15s, border-color 0.15s;
+}
+.lsc-reset:hover {
+  color: #ff7b6b;
+  border-color: #ff7b6b;
+}
+
+.lsc-description {
+  margin: 0.5rem 0 0;
+  font-family: 'SF Mono', Monaco, Consolas, monospace;
+  font-size: 0.875rem;
+  color: #a8a298;
+  line-height: 1.5;
+}
+
+.lsc-empty {
+  padding: 1.25rem 1rem;
+  font-family: 'SF Mono', Monaco, Consolas, monospace;
+  font-size: 0.8125rem;
+  font-style: italic;
+  color: #8a857c;
+}
+
+.lsc-list {
+  list-style: none;
+  margin: 0;
+  padding: 0.5rem 1rem;
+}
+
+.lsc-group-label {
+  font-family: 'SF Mono', Monaco, Consolas, monospace;
+  font-size: 0.8125rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: #c0b8a8;
+  margin: 1rem 0 0.375rem;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+.lsc-group-label:first-child {
+  margin-top: 0;
+}
+.lsc-group-marker {
+  color: #ff7b6b;
+}
+
+.lsc-item {
+  list-style: none;
+  margin: 0;
+  padding: 0.5rem 0;
+}
+.lsc-item + .lsc-item {
+  border-top: 1px dashed #3b3c39;
+}
+
+.lsc-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.625rem;
+  cursor: pointer;
+  user-select: none;
+  width: 100%;
+}
+
+.lsc-checkbox {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  margin: 0.1875rem 0 0;
+  border: 1.5px solid #5a5854;
+  background: #2a2a28;
+  border-radius: 0;
+  cursor: pointer;
+  position: relative;
+  transition: background 0.1s, border-color 0.1s;
+}
+.lsc-checkbox:hover {
+  border-color: #ff7b6b;
+}
+.lsc-checkbox:checked {
+  background: #ff7b6b;
+  border-color: #ff7b6b;
+}
+.lsc-checkbox:checked::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: #2a2a28;
+  clip-path: polygon(15% 50%, 40% 75%, 85% 25%, 75% 15%, 40% 55%, 25% 40%);
+}
+.lsc-checkbox:focus-visible {
+  outline: 2px solid #ff7b6b;
+  outline-offset: 2px;
+}
+
+.lsc-label {
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 0.9375rem;
+  font-weight: 500;
+  color: #d5cfc5;
+  line-height: 1.45;
+  flex: 1 1 auto;
+  min-width: 0;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  hyphens: auto;
+}
+.lsc-label--checked {
+  text-decoration: line-through;
+  opacity: 0.55;
+}
+
+.lsc-hint {
+  font-family: 'SF Mono', Monaco, Consolas, monospace;
+  font-size: 0.8125rem;
+  color: #a8a298;
+  line-height: 1.5;
+  margin: 0.375rem 0 0 1.625rem;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+/* Narrow column safety — keep readability when host column < 360px. */
+@media (max-width: 360px) {
+  .lsc-card {
+    box-shadow: 2px 2px 0 0 #474541;
+  }
+  .lsc-header,
+  .lsc-list {
+    padding-left: 0.625rem;
+    padding-right: 0.625rem;
+  }
+  .lsc-hint {
+    margin-left: 0;
+  }
+}
+</style>

package/app/components/StackedColumn.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+const props = defineProps<{
+  path: string
+  index: number
+}>()
+
+const { fullStack, handleStackClick, scrollToColumn } = useStack()
+
+
+/**
+ * Click on a column performs two things in order:
+ * 1. handleStackClick — push a new column if an internal anchor was clicked
+ *    (preventDefault is set inside useStack when this path is taken).
+ * 2. Fallthrough — if the click was NOT consumed by anchor handling
+ *    (empty space, peek-strip click, external link, etc.), bring this column
+ *    into focus by scrolling its right edge to the viewport's right edge.
+ *    Idempotent for already-active columns (scrollIntoView is a no-op).
+ */
+function onClick(event: MouseEvent) {
+  handleStackClick(event, props.index)
+  if (!event.defaultPrevented) {
+    scrollToColumn(props.index)
+  }
+}
+</script>
+
+<template>
+  <div
+    class="stacked-column flex flex-col h-full overflow-hidden bg-terminal-bg border-r-[3px] border-terminal-border"
+    :data-column-index="index"
+    :style="{ '--col-idx': index }"
+  >
+    <div class="flex-1 min-h-0" @click.capture="onClick">
+      <!--
+        :key="path" forces ContentView to remount when this slot's path
+        prop changes. Without it, a slot whose StackedColumns key is the
+        index (kept stable across stack mutations to preserve transition
+        identity) keeps the same ContentView instance — but ContentView's
+        useAsyncData baked the initial path into its cache key at setup
+        time, so the rendered content stays frozen on the original path.
+        Remounting on path change re-runs setup with the new path.
+      -->
+      <ContentView :key="path" :path="path" :no-throw="true" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* Sticky-stack layout — earlier columns peek 48px at the viewport's left
+   edge via position:sticky; z-index ascends with --col-idx so later columns
+   paint over earlier ones (otherwise col 0 would cover all subsequent
+   peeks). The last column's sticky never activates because max-scroll
+   stays below its threshold (N*col-width − viewport vs. (N−1)*(col-width
+   − peek)) for typical viewport sizes, so it stays at natural flex
+   position — exactly where the active card belongs.
+
+   No opacity/filter dim on stacked cols. Tried it — the translucency
+   bled lower-z columns through their stacked neighbors, producing visual
+   noise the user called "chồng chéo". Borders + z-index already give
+   sufficient stacking cues without compromising readability. */
+.stacked-column {
+  flex: 0 0 var(--column-width);
+  min-width: var(--column-min-width);
+  position: sticky;
+  left: calc(var(--col-idx, 0) * var(--stack-peek, 48px));
+  z-index: var(--col-idx, 0);
+  /* Left outline via box-shadow: takes no layout space, so when two columns
+     are adjacent the left shadow of the later column (higher z-index) paints
+     directly over the earlier column's right border — unified table-cell look.
+     When a column stands alone, it renders as a clean left border. */
+  box-shadow: -3px 0 0 #474541;
+}
+
+@media (max-width: 767px) {
+  .stacked-column {
+    flex: 0 0 100vw;
+    min-width: 100vw;
+    position: static;
+  }
+}
+</style>

package/app/components/StackedColumns.vue

@@ -0,0 +1,216 @@
+<script setup lang="ts">
+const containerRef = useTemplateRef<HTMLDivElement>('container')
+const { fullStack, activeIndex, stack, isMobile, scrollToColumn } = useStack()
+const route = useRoute()
+const router = useRouter()
+
+let observer: IntersectionObserver | null = null
+const ratios = new Map<number, number>()
+let activeUpdateTimer: ReturnType<typeof setTimeout> | null = null
+
+function recomputeActive() {
+  let best = -1
+  let bestRatio = 0
+  for (const [idx, ratio] of ratios) {
+    if (ratio > bestRatio) {
+      bestRatio = ratio
+      best = idx
+    }
+  }
+  if (best >= 0 && best !== activeIndex.value) {
+    activeIndex.value = best
+  }
+}
+
+/**
+ * IntersectionObserver fires many times per second during smooth scroll,
+ * which without debouncing caused activeIndex (and the .border-primary
+ * highlight on the active column) to flicker between adjacent columns
+ * mid-scroll. Wait until intersection ratios stabilize for 200ms before
+ * resolving the new active column. Programmatic scrolls from
+ * scrollToColumn already set activeIndex synchronously so the highlight
+ * is correct immediately on click — this debounce only governs the
+ * post-settle reconciliation.
+ */
+function scheduleRecomputeActive() {
+  if (activeUpdateTimer) clearTimeout(activeUpdateTimer)
+  activeUpdateTimer = setTimeout(() => {
+    recomputeActive()
+    activeUpdateTimer = null
+  }, 200)
+}
+
+function observeAllColumns() {
+  if (!observer || !containerRef.value) return
+  observer.disconnect()
+  ratios.clear()
+  const cols = containerRef.value.querySelectorAll<HTMLElement>('[data-column-index]')
+  for (const el of cols) {
+    observer.observe(el)
+  }
+}
+
+function maybeRedirectMobile() {
+  if (!isMobile.value) return
+  if (stack.value.length === 0) return
+  const last = stack.value[stack.value.length - 1]
+  if (!last) return
+  router.replace({ path: last })
+}
+
+onMounted(() => {
+  if (!containerRef.value) return
+  observer = new IntersectionObserver(
+    (entries) => {
+      for (const entry of entries) {
+        const idx = Number((entry.target as HTMLElement).dataset.columnIndex)
+        ratios.set(idx, entry.intersectionRatio)
+      }
+      scheduleRecomputeActive()
+    },
+    {
+      root: containerRef.value,
+      threshold: [0, 0.25, 0.5, 0.75, 1],
+    },
+  )
+  observeAllColumns()
+  maybeRedirectMobile()
+
+  if (!isMobile.value && fullStack.value.length > 1) {
+    scrollToColumn(fullStack.value.length - 1)
+  }
+})
+
+watch(isMobile, (now, prev) => {
+  if (now && !prev) maybeRedirectMobile()
+})
+
+onBeforeUnmount(() => {
+  if (activeUpdateTimer) clearTimeout(activeUpdateTimer)
+  observer?.disconnect()
+  observer = null
+})
+
+watch(
+  fullStack,
+  () => {
+    nextTick(() => observeAllColumns())
+  },
+  { flush: 'post' },
+)
+</script>
+
+<template>
+  <div
+    ref="container"
+    class="flex overflow-x-auto overflow-y-hidden h-full w-full"
+    data-stacked-columns
+  >
+    <!--
+      v-for is owned by this component (not the page) so TransitionGroup
+      can track keys directly without going through a slot. Key is the
+      column INDEX (not the path) — this is the load-bearing decision for
+      a clean transition story:
+
+        Stack [route, A, B, C, D] + click link in col 2 → [route, A, B, X]
+
+        With :key="path"  → C unmounts at slot 3, X mounts at slot 3, D
+                            unmounts at slot 4. Three concurrent
+                            transitions, including a crossfade collision
+                            at slot 3. Reads as flickery and confused.
+
+        With :key="index" → slot 3's path prop changes C→X (no transition,
+                            instant content swap). Only slot 4 actually
+                            disappears, fading once. Symmetric and
+                            logical — matches the user's mental model
+                            ("trailing column closes, this column shows
+                            new content"). Same applies for pure pushes
+                            (only the new last index fades in) and pure
+                            trims (only the trailing indices fade out).
+    -->
+    <TransitionGroup name="col-fade">
+      <StackedColumn
+        v-for="(p, i) in fullStack"
+        :key="i"
+        :path="p"
+        :index="i"
+      />
+    </TransitionGroup>
+  </div>
+</template>
+
+<style scoped>
+/*
+  Stack-mutation transition story.
+
+  Click a link in a middle column (e.g. [A,B,C,D,E] + click in B → [A,B,X])
+  is implemented in useStack.pushColumn as a SINGLE router.replace combining
+  trim + push. That mutation lands as one atomic stack swap on TransitionGroup,
+  which — with key=index (see v-for above) — sees:
+
+    Slot 0 (A): unchanged → no transition.
+    Slot 1 (B): unchanged → no transition.
+    Slot 2 (was C): path prop changes → C → X. ContentView's :key="path"
+                    inside the slot remounts so the new content renders;
+                    the slot itself runs NO column-level transition.
+    Slot 3 (was D): no replacement → leave-fade.
+    Slot 4 (was E): no replacement → leave-fade.
+
+  Three pathologies the design defends against:
+
+    1. Z-INDEX OCCLUSION. Leaving cols natural z-index:var(--col-idx) would
+       paint OVER the new active X during their fade. Defended by .col-fade-
+       leave-active forcing z-index:0 + pointer-events:none below.
+
+    2. SCROLLWIDTH SHRINK MID-SCROLL. Smooth scroll target depends on
+       finalFullLength, but during the leave-fade the leaving slots still
+       occupy width. useStack passes finalFullLength to scrollToColumn so
+       it clamps to the POST-fade max up front; once Vue unmounts the
+       leaving slots and scrollWidth shrinks, scrollLeft is already at the
+       new max and there is no visible clamp jump.
+
+    3. STAGGER TIMING. CSS leave-active gets a delay = (max-col-idx − col-idx)
+       × LEAVE_STAGGER_MS, so the rightmost leaving column starts fading at
+       t=0 and inner ones follow inward — tail collapses toward the clicked
+       column rather than dissolving as a block. useStack writes
+       --max-col-idx onto the container before router.replace so the calc
+       resolves correctly the first time leave-active is applied.
+
+  Constants must stay in sync with LEAVE_DURATION_MS and LEAVE_STAGGER_MS
+  in useStack.ts — search for "LEAVE_DURATION_MS" if you change them.
+*/
+.col-fade-enter-active {
+  transition: opacity 220ms ease;
+}
+.col-fade-enter-from {
+  opacity: 0;
+}
+
+.col-fade-leave-active {
+  transition: opacity 200ms ease;
+  /* Stagger: rightmost leaving col (high col-idx) goes first, leftmost
+     leaving col (low col-idx, closest to surviving stack) goes last.
+     --max-col-idx is set by useStack.pushColumn on the container before
+     trim. When unset (e.g. browser back/forward navigation that bypasses
+     pushColumn), the calc resolves to invalid and transition-delay falls
+     to 0 — every column fades at once, the correct behavior for an
+     un-orchestrated removal. */
+  transition-delay: calc((var(--max-col-idx) - var(--col-idx)) * 60ms);
+  /* Take leaving cols out of the visible stack so they can't occlude
+     surviving columns or steal clicks during the fade. */
+  z-index: 0 !important;
+  pointer-events: none;
+}
+.col-fade-leave-to {
+  opacity: 0;
+}
+
+/*
+  scroll-snap was removed. With sticky-stacking, mandatory snap-end
+  caused multiple columns to share scrollLeft=0 as their snap target
+  (clamped for any K where (K+1)*column-width ≤ viewport), so scrolling
+  toward col 0 yanked the user back to a middle column. Smooth scroll
+  via scrollIntoView({behavior:'smooth'}) handles programmatic alignment
+  on click without CSS snap.
+*/
+</style>