Files
FabledGrimoire/frontend/src/components/NoteCard.vue
T
bvandeusenandClaude Opus 4.6 fb18d2c41d Add note context visibility in chat and standardize UI design tokens
Improve chat context: build_context() now returns metadata about auto-found
notes, emitted as an SSE event so the frontend can display context pills
showing which notes influenced the response. Users can promote notes for
deeper context (+) or exclude irrelevant ones (x). A note picker lets users
manually attach notes. Multi-word search uses per-term AND matching, and
auto-search iterates keywords individually for broader OR-style coverage.

Standardize styling: introduce CSS design tokens (--radius-sm/md/lg/pill,
--color-success/warning/overlay, --focus-ring) and migrate all components
to use them. Fix header alignment to full-width, add active nav link state,
replace hardcoded colors with CSS variables, and normalize button padding.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-11 06:49:12 -05:00

68 lines
1.6 KiB
Vue

<script setup lang="ts">
import type { Note } from "@/types/note";
import TagPill from "@/components/TagPill.vue";
import { relativeTime } from "@/composables/useRelativeTime";
import { renderPreview } from "@/utils/markdown";
defineProps<{ note: Note }>();
const emit = defineEmits<{ "tag-click": [tag: string] }>();
function onTagClick(tag: string) {
emit("tag-click", tag);
}
</script>
<template>
<router-link :to="`/notes/${note.id}`" class="note-card">
<h3 class="note-title">{{ note.title || "Untitled" }}</h3>
<div v-if="note.body" class="note-preview prose" v-html="renderPreview(note.body)"></div>
<div class="note-meta">
<TagPill
v-for="tag in note.tags"
:key="tag"
:tag="tag"
@click.stop="onTagClick(tag)"
/>
<span class="timestamp">{{ relativeTime(note.updated_at) }}</span>
</div>
</router-link>
</template>
<style scoped>
.note-card {
display: block;
padding: 1rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
text-decoration: none;
color: inherit;
background: var(--color-bg-card);
transition: box-shadow 0.15s;
}
.note-card:hover {
box-shadow: 0 2px 8px var(--color-shadow);
}
.note-title {
margin: 0 0 0.25rem;
font-size: 1.1rem;
}
.note-preview {
margin: 0 0 0.5rem;
color: var(--color-text-secondary);
font-size: 0.9rem;
max-height: 7.5em;
overflow: hidden;
}
.note-meta {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.timestamp {
margin-left: auto;
font-size: 0.75rem;
color: var(--color-text-muted);
}
</style>