bvandeusen/FabledScribe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 50 Wiki Activity

UI polish: hover lift, skeleton loaders, empty states, badge contrast, transitions

Browse Source 
Card & row interactions:
- NoteCard, TaskCard, ProjectCard: translateY(-2px) lift on hover + extended transitions
- Kanban task cards (ProjectView), note rows: same lift treatment
- Task rows in flat/grouped list: soft indigo bg tint on hover
- Chat conversation items: left-border accent + bg tint on hover (was border-only)
- HomeView project mini-cards: translateY(-2px) lift on hover

Global feedback:
- Buttons: scale(0.97) on :active press (theme.css, :not(:disabled) scoped)
- TagPill: color → primary + indigo bg tint on hover
- StatusBadge: increased opacity 15% → 22% + stronger text color for readability

Loading & empty states:
- TasksListView: shimmer skeleton loader (6 rows) + rich empty state with CTA
- ProjectListView: shimmer skeleton cards (4) + rich empty state with CTA
- HomeView: section-empty messages for overdue/high-priority/notes sections
- ProjectView kanban columns: dashed-border styled empty state

Transitions & graph:
- WorkspaceView panels: panel-fade opacity transition on show/hide (v-if inner wrap)
- GraphView D3 nodes: grow to r*1.3 + bold label on mouseover (150ms transition)
- Milestone action buttons: base opacity 0 → 0.35 for discoverability

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Bryan Van Deusen
2026-03-10 18:34:52 -04:00
parent 3ef0e9f2c5
commit 474ed1fe05
12 changed files with 195 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/assets/theme.css
+7
View File
@@ -128,6 +128,13 @@ a:focus-visible {
border-radius: var(--radius-sm);
}
button:not(:disabled):active,
.btn:not(:disabled):active,
[role="button"]:not(:disabled):active {
transform: scale(0.97);
transition: transform 0.08s ease;
}
/* Responsive breakpoints: 480px (phone), 768px (tablet), 1024px (desktop) */
@media (max-width: 768px) {
.hide-mobile {
frontend/src/components/NoteCard.vue
+2 -1
View File
@@ -65,10 +65,11 @@ function goEdit() {
color: inherit;
background: var(--color-bg-card);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(99, 102, 241, 0.06);
transition: box-shadow 0.2s;
transition: box-shadow 0.2s, transform 0.18s ease;
}
.note-card:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(99, 102, 241, 0.14);
transform: translateY(-2px);
}
/* Compact single-row layout */
frontend/src/components/StatusBadge.vue
+6 -6
View File
@@ -37,16 +37,16 @@ const labels: Record<TaskStatus, string> = {
letter-spacing: 0.025em;
}
.status-todo {
background: var(--color-status-todo-bg);
color: var(--color-status-todo);
background: color-mix(in srgb, var(--color-status-todo-bg) 78%, var(--color-status-todo) 22%);
color: color-mix(in srgb, var(--color-status-todo) 85%, #000 15%);
}
.status-in_progress {
background: var(--color-status-in-progress-bg);
color: var(--color-status-in-progress);
background: color-mix(in srgb, var(--color-status-in-progress-bg) 78%, var(--color-status-in-progress) 22%);
color: color-mix(in srgb, var(--color-status-in-progress) 85%, #000 15%);
}
.status-done {
background: var(--color-status-done-bg);
color: var(--color-status-done);
background: color-mix(in srgb, var(--color-status-done-bg) 78%, var(--color-status-done) 22%);
color: color-mix(in srgb, var(--color-status-done) 85%, #000 15%);
}
.clickable {
cursor: pointer;
frontend/src/components/TagPill.vue
+3 -1
View File
@@ -36,9 +36,11 @@ defineEmits<{
font-size: 0.8rem;
cursor: pointer;
white-space: nowrap;
transition: color 0.15s, background 0.15s;
}
.tag-pill:hover {
filter: brightness(0.95);
color: var(--color-primary);
background: rgba(99, 102, 241, 0.08);
}
.dismiss {
background: none;
frontend/src/components/TaskCard.vue
+2 -1
View File
@@ -102,10 +102,11 @@ function isOverdue(): boolean {
color: inherit;
background: var(--color-bg-card);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(99, 102, 241, 0.06);
transition: box-shadow 0.2s;
transition: box-shadow 0.2s, transform 0.18s ease;
}
.task-card:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(99, 102, 241, 0.14);
transform: translateY(-2px);
}
/* Compact single-row layout */
frontend/src/views/ChatView.vue
+5 -1
View File
@@ -999,13 +999,17 @@ onUnmounted(() => {
border-radius: var(--radius-sm);
cursor: pointer;
margin-bottom: 0.25rem;
border-left: 3px solid transparent;
transition: background 0.15s, border-color 0.15s;
}
.conv-item:hover {
background: var(--color-bg-card);
background: rgba(99,102,241,0.05);
border-left: 3px solid var(--color-primary);
}
.conv-item.active {
background: color-mix(in srgb, var(--color-primary) 15%, transparent);
color: var(--color-primary);
border-left: 3px solid var(--color-primary);
}
.conv-info {
flex: 1;
frontend/src/views/GraphView.vue
+16 -2
View File
@@ -258,7 +258,7 @@ function initGraph() {
openPeek(d);
}
})
.on("mouseover", (event: MouseEvent, d: GraphNode) => {
.on("mouseover", function(event: MouseEvent, d: GraphNode) {
const rect = containerRef.value!.getBoundingClientRect();
tooltip.value = {
visible: true,
@@ -266,14 +266,28 @@ function initGraph() {
y: event.clientY - rect.top - 8,
node: d,
};
select(this as SVGGElement).select("circle")
.transition().duration(150)
.attr("r", (d.radius ?? 8) * 1.3);
select(this as SVGGElement).select("text")
.transition().duration(150)
.style("font-weight", "600")
.style("font-size", "11px");
})
.on("mousemove", (event: MouseEvent) => {
const rect = containerRef.value!.getBoundingClientRect();
tooltip.value.x = event.clientX - rect.left + 12;
tooltip.value.y = event.clientY - rect.top - 8;
})
.on("mouseout", () => {
.on("mouseout", function(_event: MouseEvent, d: GraphNode) {
tooltip.value.visible = false;
select(this as SVGGElement).select("circle")
.transition().duration(150)
.attr("r", d.radius ?? 8);
select(this as SVGGElement).select("text")
.transition().duration(150)
.style("font-weight", null)
.style("font-size", null);
});
nodeSel
frontend/src/views/HomeView.vue
+14 -2
View File
@@ -397,6 +397,7 @@ function clearDashboardResponse() {
/>
</div>
</section>
<p v-else class="section-empty">All clear</p>
<section v-if="dueTodayTasks.length" class="section">
<h3 class="section-title">Due Today</h3>
@@ -439,6 +440,7 @@ function clearDashboardResponse() {
/>
</div>
</section>
<p v-else class="section-empty">All clear</p>
<section v-if="inProgressTasks.length" class="section">
<h3 class="section-title">In Progress</h3>
@@ -484,7 +486,7 @@ function clearDashboardResponse() {
/>
</div>
<div v-else class="empty-state">
<p class="empty-text">No notes yet.</p>
<p class="section-empty">No recent notes</p>
<router-link to="/notes/new" class="btn-cta">+ New Note</router-link>
</div>
</div>
@@ -691,10 +693,11 @@ function clearDashboardResponse() {
text-decoration: none;
color: inherit;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(99, 102, 241, 0.06);
transition: box-shadow 0.15s;
transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.project-mini-card:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(99, 102, 241, 0.14);
transform: translateY(-2px);
}
.project-mini-title {
font-size: 0.9rem;
@@ -748,6 +751,15 @@ function clearDashboardResponse() {
}
.muted { color: var(--color-text-muted); }
.section-empty {
text-align: center;
padding: 1rem 0.5rem;
color: var(--color-text-muted);
font-size: 0.82rem;
font-style: italic;
margin: 0;
}
.loading { color: var(--color-text-secondary); }
.empty-state { text-align: center; padding: 1.5rem 0; }
.empty-state::before {
frontend/src/views/ProjectListView.vue
+29 -29
View File
@@ -150,13 +150,16 @@ function truncate(text: string | null, max = 120): string {
</button>
</div>
<p v-if="loading" class="loading-msg">Loading...</p>
<div v-if="loading" class="skeleton-grid">
<div class="skeleton-card" v-for="i in 4" :key="i"></div>
</div>
<p v-else-if="error" class="error-msg">{{ error }}</p>
<div v-else-if="filteredProjects.length === 0" class="empty-state">
<div v-else-if="filteredProjects.length === 0" class="empty-state-rich">
<div class="empty-icon">◈</div>
<p class="empty-title">No projects yet</p>
<p class="empty-subtitle">Create your first project to organize tasks and notes.</p>
<button class="btn-cta" @click="openNewProjectModal">+ New Project</button>
<p class="empty-sub">Organise your notes and tasks into a project</p>
<button class="empty-action" @click="openNewProjectModal">New project →</button>
</div>
<div v-else class="projects-grid">
@@ -327,32 +330,28 @@ function truncate(text: string | null, max = 120): string {
color: var(--color-danger);
}
.empty-state {
text-align: center;
margin-top: 3rem;
.empty-state-rich { text-align: center; padding: 3rem 1rem; color: var(--color-text-muted); }
.empty-icon { font-size: 2.5rem; margin-bottom: 0.75rem; opacity: 0.3; }
.empty-title { font-size: 1rem; font-weight: 600; color: var(--color-text-secondary); margin: 0 0 0.35rem; }
.empty-sub { font-size: 0.85rem; margin: 0 0 1rem; }
.empty-action { display: inline-block; padding: 0.4rem 1rem; border: 1px solid var(--color-primary); border-radius: var(--radius-sm); color: var(--color-primary); background: none; cursor: pointer; font-size: 0.85rem; transition: background 0.15s, color 0.15s; }
.empty-action:hover { background: var(--color-primary); color: #fff; }
.skeleton-card {
height: 140px;
border-radius: var(--radius-md);
background: linear-gradient(90deg, var(--color-bg-secondary) 25%, var(--color-border) 50%, var(--color-bg-secondary) 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.4s ease infinite;
}
.empty-title {
font-size: 1.1rem;
font-weight: 600;
margin: 0 0 0.25rem;
color: var(--color-text);
@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.empty-subtitle {
color: var(--color-text-muted);
margin: 0 0 1rem;
font-size: 0.95rem;
}
.btn-cta {
display: inline-block;
padding: 0.45rem 1rem;
background: var(--color-primary);
color: #fff;
border: none;
border-radius: var(--radius-sm);
text-decoration: none;
font-size: 0.9rem;
cursor: pointer;
font-family: inherit;
.skeleton-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1rem;
}
.projects-grid {
@@ -367,7 +366,7 @@ function truncate(text: string | null, max = 120): string {
border-radius: var(--radius-md);
padding: 1rem 1.1rem;
cursor: pointer;
transition: border-color 0.15s, box-shadow 0.15s;
transition: border-color 0.15s, box-shadow 0.15s, transform 0.18s ease;
display: flex;
flex-direction: column;
gap: 0.5rem;
@@ -375,6 +374,7 @@ function truncate(text: string | null, max = 120): string {
.project-card:hover {
border-color: var(--color-primary);
box-shadow: 0 2px 8px var(--color-shadow);
transform: translateY(-2px);
}
.card-header {
frontend/src/views/ProjectView.vue
+11 -7
View File
@@ -1031,10 +1031,11 @@ function formatDate(dateStr?: string | null): string {
text-decoration: none;
color: var(--color-text);
font-size: 0.875rem;
transition: border-color 0.15s;
transition: border-color 0.15s, transform 0.18s ease;
}
.task-card:hover {
border-color: var(--color-primary);
transform: translateY(-2px);
}
.task-card-done .task-title {
text-decoration: line-through;
@@ -1069,11 +1070,13 @@ function formatDate(dateStr?: string | null): string {
color: var(--color-text-muted);
}
.col-empty {
font-size: 0.8rem;
color: var(--color-text-muted);
text-align: center;
padding: 0.5rem 0;
margin: 0;
padding: 1.5rem 0.5rem;
color: var(--color-text-muted);
font-size: 0.82rem;
border: 1px dashed var(--color-border);
border-radius: var(--radius-sm);
margin-top: 0.5rem;
}
/* Notes list */
@@ -1093,10 +1096,11 @@ function formatDate(dateStr?: string | null): string {
text-decoration: none;
color: var(--color-text);
font-size: 0.9rem;
transition: border-color 0.15s;
transition: border-color 0.15s, transform 0.15s ease;
}
.note-row:hover {
border-color: var(--color-primary);
transform: translateY(-1px);
}
.note-title {
font-weight: 500;
@@ -1193,7 +1197,7 @@ function formatDate(dateStr?: string | null): string {
display: flex;
gap: 0.15rem;
margin-left: 0.25rem;
opacity: 0;
opacity: 0.35;
transition: opacity 0.15s;
}
.milestone-header:hover .ms-actions {
frontend/src/views/TasksListView.vue
+67 -4
View File
@@ -247,7 +247,9 @@ function toggleGroup(key: string) {
<button class="clear-filters" @click="store.clearTagFilters()">Clear all</button>
</div>
<p v-if="store.loading">Loading...</p>
<div v-if="store.loading" class="task-list-skeleton">
<div class="skeleton-row" v-for="i in 6" :key="i"></div>
</div>
<div v-else-if="store.tasks.length === 0" class="empty-state">
<template v-if="store.searchQuery || store.activeTagFilters.length || store.statusFilter || store.priorityFilter">
@@ -255,9 +257,12 @@ function toggleGroup(key: string) {
<p class="empty-subtitle">Try adjusting your search or removing filters.</p>
</template>
<template v-else>
<p class="empty-title">No tasks yet</p>
<p class="empty-subtitle">Create your first task to get started.</p>
<router-link to="/tasks/new" class="btn-cta">+ New Task</router-link>
<div class="empty-state-rich">
<div class="empty-icon">✓</div>
<p class="empty-title">No tasks yet</p>
<p class="empty-sub">Create your first task to start tracking work</p>
<router-link to="/tasks/new" class="empty-action">New task →</router-link>
</div>
</template>
</div>
@@ -426,6 +431,23 @@ function toggleGroup(key: string) {
padding: 0;
}
/* Skeleton loading */
.task-list-skeleton {
margin-top: 1rem;
}
.skeleton-row {
height: 44px;
border-radius: var(--radius-sm);
background: linear-gradient(90deg, var(--color-bg-secondary) 25%, var(--color-border) 50%, var(--color-bg-secondary) 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.4s ease infinite;
margin-bottom: 0.3rem;
}
@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Flat compact list */
.cards-list {
display: flex;
@@ -433,6 +455,13 @@ function toggleGroup(key: string) {
gap: 0.3rem;
margin-top: 1rem;
}
.cards-list > div {
border-radius: var(--radius-sm, 6px);
transition: background 0.15s;
}
.cards-list > div:hover {
background: rgba(99,102,241,0.05);
}
/* Grouped view */
.task-group {
@@ -513,6 +542,40 @@ function toggleGroup(key: string) {
text-decoration: none;
font-size: 0.9rem;
}
.empty-state-rich {
text-align: center;
padding: 3rem 1rem;
color: var(--color-text-muted);
}
.empty-icon {
font-size: 2.5rem;
margin-bottom: 0.75rem;
opacity: 0.3;
}
.empty-state-rich .empty-title {
font-size: 1rem;
font-weight: 600;
color: var(--color-text-secondary);
margin: 0 0 0.35rem;
}
.empty-sub {
font-size: 0.85rem;
margin: 0 0 1rem;
}
.empty-action {
display: inline-block;
padding: 0.4rem 1rem;
border: 1px solid var(--color-primary);
border-radius: var(--radius-sm);
color: var(--color-primary);
text-decoration: none;
font-size: 0.85rem;
transition: background 0.15s, color 0.15s;
}
.empty-action:hover {
background: var(--color-primary);
color: #fff;
}
.kb-active-item {
outline: 2px solid var(--color-primary);
frontend/src/views/WorkspaceView.vue
+33 -10
View File
@@ -261,11 +261,15 @@ onUnmounted(async () => {
<!-- Left: Tasks -->
<div v-show="panelOpen.tasks" class="ws-panel">
<WorkspaceTaskPanel
v-if="project"
ref="taskPanelRef"
:project-id="project.id"
/>
<Transition name="panel-fade">
<div v-if="panelOpen.tasks" class="panel-inner">
<WorkspaceTaskPanel
v-if="project"
ref="taskPanelRef"
:project-id="project.id"
/>
</div>
</Transition>
</div>
<!-- Center: Chat -->
@@ -376,11 +380,15 @@ onUnmounted(async () => {
<!-- Right: Note Editor -->
<div v-show="panelOpen.notes" class="ws-panel">
<WorkspaceNoteEditor
v-if="project"
:project-id="project.id"
:active-note-id="activeNoteId"
/>
<Transition name="panel-fade">
<div v-if="panelOpen.notes" class="panel-inner">
<WorkspaceNoteEditor
v-if="project"
:project-id="project.id"
:active-note-id="activeNoteId"
/>
</div>
</Transition>
</div>
</div>
@@ -461,6 +469,21 @@ onUnmounted(async () => {
min-width: 0;
}
.panel-inner {
height: 100%;
display: flex;
flex-direction: column;
}
.panel-fade-enter-active,
.panel-fade-leave-active {
transition: opacity 0.18s ease;
}
.panel-fade-enter-from,
.panel-fade-leave-to {
opacity: 0;
}
/* Chat panel */
.ws-chat-panel {
display: flex;