Files
FabledScribe/frontend/src/components/WordCount.vue
T
bvandeusen ef141f07f8 UI polish pass: word count, slash commands, task lists, graph peek, bulk delete, export
- WordCount component (toggle words/chars vs read time, persisted mode)
- TipTap: TaskList/TaskItem extensions, slash command menu (H1-H3, lists, code, quote, task)
- Markdown serializer: task list → `- [ ]` / `- [x]` roundtrip
- GraphView: slide-in peek panel for note/task nodes (body, tags, linked nodes); tag nodes still navigate
- ChatView: bulk-select conversations with two-click confirm delete + chat retention policy (default 90d)
- NoteEditorView: pill tab bar with animated edit/preview toggle + WordCount in toolbar
- WorkspaceNoteEditor: inline search with tag matching, inline new-note creation, WordCount
- WorkspaceTaskPanel: task body rendered in slide-over + Edit link
- Settings: data export (Markdown ZIP / JSON) via GET /api/export
- Accessibility: skip-to-content link, aria-labels on all icon-only buttons
- Fix: export route used non-existent fabledassistant.database — corrected to async_session()
- Fix: ToolCallRecord.status type now includes "running" (was causing TS build error)
- Dockerfile: upgrade npm to latest before install to suppress major-version notice
- npm audit fix: patched minimatch (ReDoS) and rollup (path traversal) — 0 vulnerabilities

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-07 23:15:01 -05:00

61 lines
1.6 KiB
Vue

<script setup lang="ts">
import { computed, ref } from "vue";
const props = defineProps<{ body: string }>();
const STORAGE_KEY = "word_count_mode";
const mode = ref<"words" | "time">(
(localStorage.getItem(STORAGE_KEY) as "words" | "time") ?? "words"
);
function toggle() {
mode.value = mode.value === "words" ? "time" : "words";
localStorage.setItem(STORAGE_KEY, mode.value);
}
const plainText = computed(() =>
props.body
.replace(/```[\s\S]*?```/g, " ")
.replace(/`[^`]*`/g, " ")
.replace(/!?\[.*?\]\(.*?\)/g, " ")
.replace(/\[\[([^\]]*)\]\]/g, "$1")
.replace(/[#*_~>|\\]/g, " ")
.trim()
);
const wordCount = computed(() => {
if (!plainText.value) return 0;
return plainText.value.split(/\s+/).filter(Boolean).length;
});
const charCount = computed(() => props.body.length);
const readingTime = computed(() => Math.max(1, Math.ceil(wordCount.value / 200)));
const label = computed(() => {
if (!props.body.trim()) return "";
if (mode.value === "time") return `~${readingTime.value} min read`;
return `${wordCount.value.toLocaleString()} words · ${charCount.value.toLocaleString()} chars`;
});
</script>
<template>
<button v-if="label" class="word-count" @click="toggle" :title="mode === 'words' ? 'Switch to reading time' : 'Switch to word count'">
{{ label }}
</button>
</template>
<style scoped>
.word-count {
background: none;
border: none;
font-size: 0.72rem;
color: var(--color-text-muted);
cursor: pointer;
padding: 0;
white-space: nowrap;
flex-shrink: 0;
}
.word-count:hover { color: var(--color-text); }
</style>