bvandeusenandClaude Opus 4.6
22a3a3c1d1
Vue 3 + TypeScript frontend with Pinia stores, markdown rendering (marked + DOMPurify), wikilink/tag linkification, and autocomplete. Quart async backend with SQLAlchemy 2.0, PostgreSQL ARRAY columns, task-note companion linking, backlinks, and note-to-task conversion. Docker Compose setup with PostgreSQL 16 and Ollama. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
58 lines
1.2 KiB
Vue
58 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import type { TaskStatus } from "@/types/task";
|
|
|
|
const props = defineProps<{
|
|
status: TaskStatus;
|
|
clickable?: boolean;
|
|
}>();
|
|
|
|
defineEmits<{ click: [] }>();
|
|
|
|
const labels: Record<TaskStatus, string> = {
|
|
todo: "Todo",
|
|
in_progress: "In Progress",
|
|
done: "Done",
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<span
|
|
:class="['status-badge', `status-${props.status}`, { clickable }]"
|
|
@click="clickable ? $emit('click') : undefined"
|
|
:role="clickable ? 'button' : undefined"
|
|
:tabindex="clickable ? 0 : undefined"
|
|
>
|
|
{{ labels[props.status] }}
|
|
</span>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.status-badge {
|
|
display: inline-block;
|
|
padding: 0.15rem 0.5rem;
|
|
border-radius: 12px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.025em;
|
|
}
|
|
.status-todo {
|
|
background: var(--color-status-todo-bg);
|
|
color: var(--color-status-todo);
|
|
}
|
|
.status-in_progress {
|
|
background: var(--color-status-in-progress-bg);
|
|
color: var(--color-status-in-progress);
|
|
}
|
|
.status-done {
|
|
background: var(--color-status-done-bg);
|
|
color: var(--color-status-done);
|
|
}
|
|
.clickable {
|
|
cursor: pointer;
|
|
}
|
|
.clickable:hover {
|
|
filter: brightness(0.9);
|
|
}
|
|
</style>
|