From 5d3f8683a4ad9d5ba51b014ac18e7154fc6fcc6a Mon Sep 17 00:00:00 2001 From: Bryan Van Deusen Date: Wed, 11 Mar 2026 11:11:41 -0400 Subject: [PATCH] ProjectView UI overhaul: Fraunces title, gradient CTA, stat chips, kanban colors - Gradient 'Open Workspace' CTA replacing flat button - Fraunces serif project title input (1.75rem, borderless underline) - Summary stat chips with colored status dots (todo/in-progress/done/notes) - Kanban columns with 3px color-coded top border (muted/blue/green) - Task cards with left-border priority indicator (high=red, med=amber, low=blue) - Activity timestamp with clock icon via relativeTime composable - Shimmer skeleton loader during project fetch - Quieter danger-outline delete button - Milestone chevron/edit/delete use SVG icons - Notes tab uses relative timestamps + document icon - Remove unused priorityClass/formatDate functions Co-Authored-By: Claude Sonnet 4.6 --- frontend/src/views/ProjectView.vue | 1033 +++++++++++++--------------- 1 file changed, 487 insertions(+), 546 deletions(-) diff --git a/frontend/src/views/ProjectView.vue b/frontend/src/views/ProjectView.vue index fccea9d..6887cbf 100644 --- a/frontend/src/views/ProjectView.vue +++ b/frontend/src/views/ProjectView.vue @@ -3,6 +3,7 @@ import { ref, computed, onMounted, watch } from "vue"; import { useRoute, useRouter } from "vue-router"; import { apiGet, apiPatch, apiDelete, apiPost } from "@/api/client"; import { useToastStore } from "@/stores/toast"; +import { relativeTime } from "@/composables/useRelativeTime"; interface Milestone { id: number; @@ -279,131 +280,124 @@ async function confirmDelete() { } } -function priorityClass(priority?: string): string { - if (priority === "high") return "priority-high"; - if (priority === "medium") return "priority-medium"; - if (priority === "low") return "priority-low"; - return ""; -} -function formatDate(dateStr?: string | null): string { - if (!dateStr) return ""; - return new Date(dateStr).toLocaleDateString(); -}