bvandeusenandClaude Opus 5
d9e5753dc2
CI & Build / Build now, or wait for Android? (push) Successful in 2s
CI & Build / Python lint (push) Successful in 3s
CI & Build / TypeScript typecheck (push) Successful in 6s
CI & Build / Python tests (push) Successful in 10s
CI & Build / integration (push) Successful in 16s
CI & Build / Build & push image (push) Skipped
Desktop (Tauri) / Tauri desktop (Linux) (push) Failing after 2m37s
Desktop (Tauri) / Windows installer (cross-compiled) (push) Successful in 2m53s
Desktop (Tauri) / Update manifest (push) Skipped
Android / Kotlin + Rust (APK) (push) Canceled after 3m25s
A tagged note was showing its tag twice — once where it was typed, once as a chip — and the duplicate was the loud copy. Now the chip row carries only what the body cannot say (a tag lifted off its own line, a label from the picker), and a `#tag` left mid-sentence is tinted in place. Which characters are a tag is asked of the CORE, the way the card already asks it which lines are checklist items: `extract_tag_spans` keeps the spans `extract_tags` throws away, and `body_tags` hands them to Kotlin. Offsets are UTF-16 code units, because `AnnotatedString` and JS both index that way and a char index lands mid-token the first time somebody writes an emoji. The web keeps its own matcher in markdown.ts, mirroring `line_tags` case for case. The inline ink is its own table, one Tailwind step deeper than the chip's. A chip brings its own -100 fill and reads against that alone; inline text sits on whatever the card is, including a gray-tagged card at neutral-200 — where the chip's -700 measured 3.98 (green), 4.11 (orange) and 4.34 (teal), under the 4.5 body text needs. At -800/-300 every hue lands 5.63-12.01 light and 7.20-10.84 dark across every palette and generated fill. Chips now carry the `#` on every surface. The via_tag branch that used to decide it is gone from the card, and Android's row said no hash at all. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
76 lines
3.5 KiB
Vue
76 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from "vue";
|
|
import { parseMarkdown } from "../notes/markdown";
|
|
import MarkdownInline from "./MarkdownInline.vue";
|
|
|
|
// `tagColors` is passed straight through to MarkdownInline — see there for why the
|
|
// card owns the lookup rather than the renderer.
|
|
const props = defineProps<{
|
|
text: string;
|
|
toggleable?: boolean;
|
|
tagColors?: Record<string, string>;
|
|
}>();
|
|
// Ticking a box rewrites a line of the note's body, which is a thing only the owner
|
|
// of that note can do — so this renders the checkbox and hands the intent up rather
|
|
// than reaching for the store itself. The card wires it; a read-only render does not
|
|
// pass `toggleable` and the boxes are inert.
|
|
const emit = defineEmits<{ toggle: [index: number, checked: boolean] }>();
|
|
const blocks = computed(() => parseMarkdown(props.text));
|
|
</script>
|
|
|
|
<template>
|
|
<div class="space-y-1.5 break-words">
|
|
<template v-for="(b, i) in blocks" :key="i">
|
|
<h3 v-if="b.type === 'h1'" class="text-base font-bold">
|
|
<MarkdownInline :tokens="b.inline ?? []" :tag-colors="tagColors" />
|
|
</h3>
|
|
<h4 v-else-if="b.type === 'h2'" class="text-sm font-bold">
|
|
<MarkdownInline :tokens="b.inline ?? []" :tag-colors="tagColors" />
|
|
</h4>
|
|
<h5 v-else-if="b.type === 'h3'" class="text-sm font-semibold">
|
|
<MarkdownInline :tokens="b.inline ?? []" :tag-colors="tagColors" />
|
|
</h5>
|
|
<blockquote
|
|
v-else-if="b.type === 'quote'"
|
|
class="whitespace-pre-wrap border-l-2 border-neutral-300 pl-2 text-neutral-600 dark:border-neutral-600 dark:text-neutral-400"
|
|
>
|
|
<MarkdownInline :tokens="b.inline ?? []" :tag-colors="tagColors" />
|
|
</blockquote>
|
|
<div v-else-if="b.type === 'task'" class="flex flex-col gap-1">
|
|
<div v-for="(it, j) in b.items ?? []" :key="j" class="flex items-start gap-2">
|
|
<!-- Not wrapped in a <label>: on a card the text is the note's own words and
|
|
clicking it opens the note, so only the box itself toggles. `.stop` for
|
|
the same reason — the card is a click target underneath. -->
|
|
<input
|
|
type="checkbox"
|
|
class="mt-0.5 h-4 w-4 shrink-0 accent-brand"
|
|
:checked="b.tasks?.[j]?.checked ?? false"
|
|
:disabled="!toggleable"
|
|
:aria-label="toggleable ? 'Toggle item' : undefined"
|
|
@click.stop
|
|
@change="emit('toggle', b.tasks?.[j]?.index ?? 0, ($event.target as HTMLInputElement).checked)"
|
|
/>
|
|
<span
|
|
class="min-w-0 flex-1"
|
|
:class="b.tasks?.[j]?.checked ? 'text-neutral-400 line-through' : ''"
|
|
>
|
|
<MarkdownInline :tokens="it" :tag-colors="tagColors" />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<ul v-else-if="b.type === 'ul'" class="list-disc space-y-0.5 pl-5">
|
|
<li v-for="(it, j) in b.items ?? []" :key="j"><MarkdownInline :tokens="it" :tag-colors="tagColors" /></li>
|
|
</ul>
|
|
<ol v-else-if="b.type === 'ol'" class="list-decimal space-y-0.5 pl-5">
|
|
<li v-for="(it, j) in b.items ?? []" :key="j"><MarkdownInline :tokens="it" :tag-colors="tagColors" /></li>
|
|
</ol>
|
|
<pre
|
|
v-else-if="b.type === 'pre'"
|
|
class="overflow-x-auto whitespace-pre-wrap rounded-md bg-black/5 p-2 font-mono text-xs dark:bg-white/10"
|
|
>{{ b.value ?? "" }}</pre
|
|
>
|
|
<p v-else class="whitespace-pre-wrap"><MarkdownInline :tokens="b.inline ?? []" :tag-colors="tagColors" /></p>
|
|
</template>
|
|
</div>
|
|
</template>
|