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>
48 lines
961 B
Vue
48 lines
961 B
Vue
<script setup lang="ts">
|
|
import type { TaskPriority } from "@/types/task";
|
|
|
|
const props = defineProps<{
|
|
priority: TaskPriority;
|
|
}>();
|
|
|
|
const labels: Record<TaskPriority, string> = {
|
|
none: "",
|
|
low: "Low",
|
|
medium: "Medium",
|
|
high: "High",
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<span
|
|
v-if="props.priority !== 'none'"
|
|
:class="['priority-badge', `priority-${props.priority}`]"
|
|
>
|
|
{{ labels[props.priority] }}
|
|
</span>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.priority-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;
|
|
}
|
|
.priority-low {
|
|
background: var(--color-priority-low-bg);
|
|
color: var(--color-priority-low);
|
|
}
|
|
.priority-medium {
|
|
background: var(--color-priority-medium-bg);
|
|
color: var(--color-priority-medium);
|
|
}
|
|
.priority-high {
|
|
background: var(--color-priority-high-bg);
|
|
color: var(--color-priority-high);
|
|
}
|
|
</style>
|