feat: task slide-over panel, DM Sans typography, UI refinements
- TaskSlideOver: right-side panel with Next Up, Today, Upcoming, Quick Add - Dashboard: compact task trigger replaces inline tasks - Typography: DM Sans display font, antialiased rendering - Cards: subtle hover elevation, colored left accent borders - Navbar: accent-colored active states, frosted glass blur - Badges: tighter uppercase style Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Yusuf Suleman
@@ -16,9 +16,9 @@
|
||||
body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
|
||||
:root {
|
||||
/* ── Fonts ── */
|
||||
--font: 'Inter', -apple-system, system-ui, sans-serif;
|
||||
--font: 'DM Sans', -apple-system, system-ui, sans-serif;
|
||||
--mono: 'JetBrains Mono', ui-monospace, monospace;
|
||||
--transition: 180ms ease;
|
||||
--transition: 150ms ease;
|
||||
|
||||
/* ── Spacing scale (4px grid) ──
|
||||
* Use these everywhere: padding, margin, gap.
|
||||
@@ -106,16 +106,16 @@
|
||||
/* ── LIGHT MODE ── */
|
||||
:root {
|
||||
/* Surface hierarchy: canvas (page bg) → surface (sidebars, panels) → card (content containers) */
|
||||
--canvas: #F5F6F8;
|
||||
--canvas: #F4F5F7;
|
||||
--surface: #FFFFFF;
|
||||
--surface-secondary: #FAFAFB;
|
||||
--surface-secondary: #F8F9FA;
|
||||
--card: #FFFFFF;
|
||||
--card-secondary: #FAFAFB;
|
||||
--card-hover: #f0f0f3;
|
||||
--card-secondary: #F8F9FA;
|
||||
--card-hover: #F0F1F4;
|
||||
|
||||
/* Borders */
|
||||
--border: rgba(0,0,0,0.06);
|
||||
--border-strong: rgba(0,0,0,0.1);
|
||||
--border: rgba(0,0,0,0.07);
|
||||
--border-strong: rgba(0,0,0,0.12);
|
||||
|
||||
/* Text hierarchy: 1 (headings/names) → 2 (body) → 3 (labels/meta) → 4 (placeholder/disabled) */
|
||||
--text-1: #1a1a1f;
|
||||
@@ -202,6 +202,9 @@
|
||||
background: var(--canvas);
|
||||
color: var(--text-1);
|
||||
min-height: 100vh;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
transition: background var(--transition), color var(--transition);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
@@ -306,18 +309,12 @@
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: var(--shadow-sm);
|
||||
padding: var(--card-pad);
|
||||
transition: box-shadow 0.2s ease;
|
||||
}
|
||||
.module:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
transition: box-shadow 0.25s ease, transform 0.25s ease;
|
||||
}
|
||||
.module.primary {
|
||||
padding: var(--card-pad-primary);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
.module.primary:hover {
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
.module.flush { padding: 0; }
|
||||
|
||||
.module-header {
|
||||
@@ -328,11 +325,11 @@
|
||||
}
|
||||
|
||||
.module-title {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 600;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: var(--text-3);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.module-action {
|
||||
@@ -353,22 +350,22 @@
|
||||
align-items: center;
|
||||
gap: var(--inner-gap);
|
||||
padding: var(--row-pad-y) var(--row-pad-x);
|
||||
transition: background var(--transition);
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
.data-row:hover { background: var(--card-hover); }
|
||||
.data-row + .data-row { border-top: 1px solid var(--border); }
|
||||
.data-row:nth-child(even) { background: color-mix(in srgb, var(--surface) 68%, var(--card)); }
|
||||
.data-row:nth-child(even):hover { background: var(--card-hover); }
|
||||
|
||||
/* ── Badges ──
|
||||
* Semantic status badges. Variants: error, success, warning, accent, muted.
|
||||
*/
|
||||
.badge {
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 500;
|
||||
padding: 3px 10px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
padding: 2px 8px;
|
||||
border-radius: var(--radius-xs);
|
||||
flex-shrink: 0;
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.badge.error { background: var(--error-dim); color: var(--error); }
|
||||
.badge.success { background: var(--success-dim); color: var(--success); }
|
||||
@@ -412,12 +409,12 @@
|
||||
* Uppercase label above a group of content.
|
||||
*/
|
||||
.section-label {
|
||||
font-size: var(--text-xs);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--text-3);
|
||||
margin-bottom: var(--sp-1.5);
|
||||
margin-bottom: var(--sp-2);
|
||||
}
|
||||
|
||||
/* ── Page wrapper ── */
|
||||
@@ -427,24 +424,25 @@
|
||||
font-size: var(--text-xl);
|
||||
font-weight: 600;
|
||||
color: var(--text-1);
|
||||
letter-spacing: -0.01em;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: var(--leading-tight);
|
||||
}
|
||||
.page-subtitle {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
color: var(--text-3);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--accent);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
letter-spacing: 0.08em;
|
||||
margin-bottom: var(--sp-1);
|
||||
}
|
||||
.page-greeting {
|
||||
font-size: var(--text-2xl);
|
||||
font-weight: 300;
|
||||
font-weight: 400;
|
||||
color: var(--text-1);
|
||||
line-height: var(--leading-tight);
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
.page-greeting strong { font-weight: 600; }
|
||||
.page-greeting strong { font-weight: 700; }
|
||||
|
||||
/* ── App surface (centered container) ── */
|
||||
.app-surface {
|
||||
|
||||
@@ -3,6 +3,9 @@
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,300..700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
|
||||
552
frontend-v2/src/lib/components/dashboard/TaskSlideOver.svelte
Normal file
552
frontend-v2/src/lib/components/dashboard/TaskSlideOver.svelte
Normal file
@@ -0,0 +1,552 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
interface Task {
|
||||
id: string;
|
||||
title: string;
|
||||
projectId: string;
|
||||
_projectName: string;
|
||||
_projectId: string;
|
||||
startDate?: string;
|
||||
dueDate?: string;
|
||||
isAllDay?: boolean;
|
||||
priority: number;
|
||||
status: number;
|
||||
repeatFlag?: string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
onclose: () => void;
|
||||
}
|
||||
|
||||
let { open = $bindable(), onclose }: Props = $props();
|
||||
|
||||
let loading = $state(true);
|
||||
let overdueTasks = $state<Task[]>([]);
|
||||
let todayTasks = $state<Task[]>([]);
|
||||
let upcomingTasks = $state<Task[]>([]);
|
||||
let projects = $state<{ id: string; name: string }[]>([]);
|
||||
let completing = $state<Set<string>>(new Set());
|
||||
|
||||
// Quick add
|
||||
let quickTitle = $state('');
|
||||
let quickProjectId = $state('');
|
||||
let saving = $state(false);
|
||||
|
||||
async function api(path: string, opts: RequestInit = {}) {
|
||||
const res = await fetch(`/api/tasks${path}`, { credentials: 'include', ...opts });
|
||||
if (!res.ok) throw new Error(`${res.status}`);
|
||||
return res.json();
|
||||
}
|
||||
|
||||
function formatTime(task: Task): string {
|
||||
const d = task.startDate || task.dueDate;
|
||||
if (!d || task.isAllDay) return '';
|
||||
try {
|
||||
const date = new Date(d);
|
||||
const h = date.getHours(), m = date.getMinutes();
|
||||
if (h === 0 && m === 0) return '';
|
||||
const ampm = h >= 12 ? 'PM' : 'AM';
|
||||
const hour = h % 12 || 12;
|
||||
return m > 0 ? `${hour}:${String(m).padStart(2, '0')} ${ampm}` : `${hour} ${ampm}`;
|
||||
} catch { return ''; }
|
||||
}
|
||||
|
||||
function formatDueLabel(task: Task): string {
|
||||
const d = task.startDate || task.dueDate;
|
||||
if (!d) return '';
|
||||
try {
|
||||
const date = new Date(d);
|
||||
const now = new Date();
|
||||
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
|
||||
const taskDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
|
||||
const diff = Math.round((taskDate.getTime() - today.getTime()) / 86400000);
|
||||
if (diff === 0) return '';
|
||||
if (diff === 1) return 'Tomorrow';
|
||||
if (diff === -1) return 'Yesterday';
|
||||
if (diff < -1) return `${Math.abs(diff)}d overdue`;
|
||||
if (diff <= 7) return date.toLocaleDateString('en-US', { weekday: 'short' });
|
||||
return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
|
||||
} catch { return ''; }
|
||||
}
|
||||
|
||||
function isOverdue(task: Task): boolean {
|
||||
const d = task.startDate || task.dueDate;
|
||||
if (!d) return false;
|
||||
return new Date(d) < new Date(new Date().toDateString());
|
||||
}
|
||||
|
||||
async function loadAll() {
|
||||
loading = true;
|
||||
try {
|
||||
const [todayData, allData, projData] = await Promise.all([
|
||||
api('/today'),
|
||||
api('/tasks'),
|
||||
api('/projects'),
|
||||
]);
|
||||
|
||||
overdueTasks = (todayData.overdue || []).sort((a: Task, b: Task) =>
|
||||
(a.startDate || a.dueDate || '').localeCompare(b.startDate || b.dueDate || ''));
|
||||
todayTasks = (todayData.today || []).sort((a: Task, b: Task) =>
|
||||
(a.startDate || a.dueDate || '').localeCompare(b.startDate || b.dueDate || ''));
|
||||
|
||||
// Upcoming = tasks with future dates, not today
|
||||
const todayStr = new Date().toISOString().split('T')[0];
|
||||
upcomingTasks = (allData.tasks || [])
|
||||
.filter((t: Task) => {
|
||||
const d = (t.startDate || t.dueDate || '')?.slice(0, 10);
|
||||
return d > todayStr && t.status === 0;
|
||||
})
|
||||
.sort((a: Task, b: Task) =>
|
||||
(a.startDate || a.dueDate || '').localeCompare(b.startDate || b.dueDate || ''))
|
||||
.slice(0, 8);
|
||||
|
||||
projects = (projData.projects || []).map((p: any) => ({ id: p.id, name: p.name }));
|
||||
if (projects.length > 0 && !quickProjectId) quickProjectId = projects[0].id;
|
||||
} catch { /* silent */ }
|
||||
loading = false;
|
||||
completing = new Set();
|
||||
}
|
||||
|
||||
async function completeTask(task: Task) {
|
||||
completing = new Set([...completing, task.id]);
|
||||
try {
|
||||
await api(`/tasks/${task.id}/complete`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ projectId: task.projectId || task._projectId })
|
||||
});
|
||||
setTimeout(loadAll, 400);
|
||||
} catch {
|
||||
completing = new Set([...completing].filter(id => id !== task.id));
|
||||
}
|
||||
}
|
||||
|
||||
async function quickAdd() {
|
||||
if (!quickTitle.trim()) return;
|
||||
saving = true;
|
||||
try {
|
||||
const now = new Date();
|
||||
const todayStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}T00:00:00+0000`;
|
||||
await api('/tasks', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
title: quickTitle.trim(),
|
||||
projectId: quickProjectId || undefined,
|
||||
dueDate: todayStr,
|
||||
isAllDay: true,
|
||||
})
|
||||
});
|
||||
quickTitle = '';
|
||||
await loadAll();
|
||||
} catch { /* silent */ }
|
||||
saving = false;
|
||||
}
|
||||
|
||||
function handleKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape') onclose();
|
||||
}
|
||||
|
||||
function handleQuickKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Enter') quickAdd();
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
if (open) loadAll();
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:window onkeydown={open ? handleKeydown : undefined} />
|
||||
|
||||
{#if open}
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div class="so-overlay" class:so-visible={open} onclick={(e) => { if (e.target === e.currentTarget) onclose(); }} onkeydown={() => {}}>
|
||||
<div class="so-panel" class:so-enter={open}>
|
||||
|
||||
<!-- Header -->
|
||||
<div class="so-header">
|
||||
<div>
|
||||
<div class="so-label">Tasks</div>
|
||||
<div class="so-summary">
|
||||
{#if overdueTasks.length > 0}
|
||||
<span class="so-overdue-count">{overdueTasks.length} overdue</span>
|
||||
<span class="so-sep">·</span>
|
||||
{/if}
|
||||
{todayTasks.length} today
|
||||
</div>
|
||||
</div>
|
||||
<div class="so-header-actions">
|
||||
<a href="/tasks" class="so-manage" onclick={onclose}>Manage</a>
|
||||
<button class="so-close" onclick={onclose}>
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="4" y1="4" x2="14" y2="14"/><line x1="14" y1="4" x2="4" y2="14"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Body -->
|
||||
<div class="so-body">
|
||||
{#if loading}
|
||||
<div class="so-loading">
|
||||
<div class="skeleton" style="height:40px;margin-bottom:8px"></div>
|
||||
<div class="skeleton" style="height:40px;margin-bottom:8px"></div>
|
||||
<div class="skeleton" style="height:40px"></div>
|
||||
</div>
|
||||
{:else}
|
||||
|
||||
<!-- Next Up (first overdue or first today) -->
|
||||
{@const nextTask = overdueTasks[0] || todayTasks[0]}
|
||||
{#if nextTask}
|
||||
<div class="so-section">
|
||||
<div class="so-section-label">Next up</div>
|
||||
<div class="so-next" class:so-next-overdue={isOverdue(nextTask)}>
|
||||
<button class="so-check-lg" onclick={() => completeTask(nextTask)} class:so-completing={completing.has(nextTask.id)}>
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none">
|
||||
<rect x="1.5" y="1.5" width="19" height="19" rx="5" stroke="{isOverdue(nextTask) ? 'var(--error)' : 'var(--accent)'}" stroke-width="2"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="so-next-content">
|
||||
<div class="so-next-title">{nextTask.title}</div>
|
||||
<div class="so-next-meta">
|
||||
{#if formatTime(nextTask)}{formatTime(nextTask)} · {/if}{nextTask._projectName}
|
||||
{#if isOverdue(nextTask)}
|
||||
<span class="so-overdue-badge">{formatDueLabel(nextTask)}</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Today -->
|
||||
{@const restToday = nextTask ? [...overdueTasks.slice(isOverdue(nextTask) ? 1 : 0), ...todayTasks.slice(isOverdue(nextTask) ? 0 : 1)] : []}
|
||||
{#if restToday.length > 0}
|
||||
<div class="so-section">
|
||||
<div class="so-section-label">{overdueTasks.length > 0 ? 'Today & Overdue' : 'Today'} · {restToday.length}</div>
|
||||
{#each restToday as task (task.id)}
|
||||
<div class="so-row" class:so-completing={completing.has(task.id)}>
|
||||
<button class="so-check" onclick={() => completeTask(task)}>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<rect x="1" y="1" width="14" height="14" rx="3.5" stroke="{isOverdue(task) ? 'var(--error)' : 'var(--border-strong)'}" stroke-width="1.5"/>
|
||||
</svg>
|
||||
</button>
|
||||
<span class="so-row-title" class:so-row-overdue={isOverdue(task)}>{task.title}</span>
|
||||
<span class="so-row-meta">
|
||||
{#if formatTime(task)}{formatTime(task)}{:else}{task._projectName}{/if}
|
||||
</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Upcoming -->
|
||||
{#if upcomingTasks.length > 0}
|
||||
<div class="so-section">
|
||||
<div class="so-section-label">Upcoming</div>
|
||||
{#each upcomingTasks as task (task.id)}
|
||||
<div class="so-row" class:so-completing={completing.has(task.id)}>
|
||||
<button class="so-check" onclick={() => completeTask(task)}>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<rect x="1" y="1" width="14" height="14" rx="3.5" stroke="var(--border-strong)" stroke-width="1.5"/>
|
||||
</svg>
|
||||
</button>
|
||||
<span class="so-row-title">{task.title}</span>
|
||||
<span class="so-row-meta">{formatDueLabel(task)}</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Empty -->
|
||||
{#if !nextTask && restToday.length === 0 && upcomingTasks.length === 0}
|
||||
<div class="so-empty">All clear. Nothing on the agenda.</div>
|
||||
{/if}
|
||||
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Quick Add -->
|
||||
<div class="so-footer">
|
||||
<div class="so-quick-add">
|
||||
<input
|
||||
class="so-quick-input"
|
||||
placeholder="Quick add task..."
|
||||
bind:value={quickTitle}
|
||||
onkeydown={handleQuickKeydown}
|
||||
disabled={saving}
|
||||
/>
|
||||
{#if quickTitle.trim()}
|
||||
<button class="so-quick-submit" onclick={quickAdd} disabled={saving}>
|
||||
{saving ? '...' : 'Add'}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
/* ── Overlay ── */
|
||||
.so-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 90;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
.so-overlay.so-visible {
|
||||
background: var(--overlay);
|
||||
}
|
||||
|
||||
/* ── Panel ── */
|
||||
.so-panel {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 400px;
|
||||
max-width: 100vw;
|
||||
background: var(--surface);
|
||||
box-shadow: -8px 0 32px rgba(0,0,0,0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
.so-panel.so-enter {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
/* ── Header ── */
|
||||
.so-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
padding: var(--sp-6) var(--sp-6) var(--sp-4);
|
||||
border-bottom: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.so-label {
|
||||
font-size: var(--text-lg);
|
||||
font-weight: 700;
|
||||
color: var(--text-1);
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.so-summary {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-3);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.so-overdue-count { color: var(--error); font-weight: 600; }
|
||||
.so-sep { color: var(--text-4); margin: 0 2px; }
|
||||
|
||||
.so-header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-3);
|
||||
}
|
||||
|
||||
.so-manage {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
.so-manage:hover { text-decoration: underline; }
|
||||
|
||||
.so-close {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: var(--radius-md);
|
||||
border: none;
|
||||
background: none;
|
||||
color: var(--text-3);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.so-close:hover { background: var(--card-hover); color: var(--text-1); }
|
||||
|
||||
/* ── Body ── */
|
||||
.so-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: var(--sp-2) var(--sp-6);
|
||||
}
|
||||
|
||||
.so-loading { padding: var(--sp-4) 0; }
|
||||
|
||||
/* ── Section ── */
|
||||
.so-section {
|
||||
padding: var(--sp-4) 0 var(--sp-2);
|
||||
}
|
||||
|
||||
.so-section-label {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--text-4);
|
||||
margin-bottom: var(--sp-2);
|
||||
}
|
||||
|
||||
/* ── Next Up (hero task) ── */
|
||||
.so-next {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--sp-3);
|
||||
padding: var(--sp-4);
|
||||
background: var(--accent-dim);
|
||||
border-radius: var(--radius);
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
.so-next.so-next-overdue { background: var(--error-dim); }
|
||||
|
||||
.so-check-lg {
|
||||
flex-shrink: 0;
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
margin-top: 1px;
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
.so-check-lg:hover { transform: scale(1.1); }
|
||||
.so-check-lg.so-completing { opacity: 0.3; }
|
||||
.so-check-lg:hover svg rect { fill: var(--accent-dim); }
|
||||
|
||||
.so-next-content { flex: 1; min-width: 0; }
|
||||
|
||||
.so-next-title {
|
||||
font-size: var(--text-md);
|
||||
font-weight: 600;
|
||||
color: var(--text-1);
|
||||
line-height: var(--leading-snug);
|
||||
}
|
||||
|
||||
.so-next-meta {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-3);
|
||||
margin-top: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-2);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.so-overdue-badge {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: var(--error);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
/* ── Task rows ── */
|
||||
.so-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-2);
|
||||
padding: 9px 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
.so-row.so-completing { opacity: 0.15; }
|
||||
|
||||
.so-check {
|
||||
flex-shrink: 0;
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
.so-row:hover .so-check { opacity: 1; }
|
||||
.so-check:hover svg rect { stroke: var(--accent); fill: var(--accent-dim); }
|
||||
|
||||
.so-row-title {
|
||||
flex: 1;
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-1);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
min-width: 0;
|
||||
}
|
||||
.so-row-title.so-row-overdue { color: var(--error); }
|
||||
|
||||
.so-row-meta {
|
||||
flex-shrink: 0;
|
||||
font-size: 11px;
|
||||
color: var(--text-4);
|
||||
font-family: var(--mono);
|
||||
}
|
||||
|
||||
.so-empty {
|
||||
padding: var(--sp-10) var(--sp-4);
|
||||
text-align: center;
|
||||
color: var(--text-4);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
/* ── Quick Add ── */
|
||||
.so-footer {
|
||||
flex-shrink: 0;
|
||||
padding: var(--sp-4) var(--sp-6);
|
||||
border-top: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.so-quick-add {
|
||||
display: flex;
|
||||
gap: var(--sp-2);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.so-quick-input {
|
||||
flex: 1;
|
||||
padding: 10px 14px;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--surface-secondary);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-1);
|
||||
font-size: var(--text-sm);
|
||||
font-family: var(--font);
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.so-quick-input:focus { border-color: var(--accent); }
|
||||
.so-quick-input::placeholder { color: var(--text-4); }
|
||||
|
||||
.so-quick-submit {
|
||||
padding: 10px var(--sp-4);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
border: none;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
.so-quick-submit:hover { opacity: 0.9; }
|
||||
|
||||
/* ── Mobile ── */
|
||||
@media (max-width: 480px) {
|
||||
.so-panel { width: 100vw; }
|
||||
.so-header { padding: var(--sp-5) var(--sp-5) var(--sp-3); }
|
||||
.so-body { padding: var(--sp-2) var(--sp-5); }
|
||||
.so-footer { padding: var(--sp-4) var(--sp-5); }
|
||||
}
|
||||
</style>
|
||||
@@ -93,8 +93,8 @@
|
||||
z-index: 50;
|
||||
background: var(--nav-bg);
|
||||
border-bottom: 1px solid var(--border);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
backdrop-filter: blur(20px) saturate(1.4);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(1.4);
|
||||
}
|
||||
.navbar-inner {
|
||||
max-width: 1400px;
|
||||
@@ -106,15 +106,16 @@
|
||||
gap: var(--sp-5);
|
||||
}
|
||||
.navbar-logo {
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
font-size: var(--text-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-2);
|
||||
color: var(--text-1);
|
||||
flex-shrink: 0;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
.navbar-logo svg { width: 20px; height: 20px; }
|
||||
.navbar-logo svg { width: 18px; height: 18px; color: var(--accent); }
|
||||
|
||||
.navbar-links {
|
||||
display: flex;
|
||||
|
||||
@@ -5,8 +5,18 @@
|
||||
import BudgetModule from '$lib/components/dashboard/BudgetModule.svelte';
|
||||
import FitnessModule from '$lib/components/dashboard/FitnessModule.svelte';
|
||||
import IssuesModule from '$lib/components/dashboard/IssuesModule.svelte';
|
||||
import TasksPanel from '$lib/components/dashboard/TasksPanel.svelte';
|
||||
import TasksModule from '$lib/components/dashboard/TasksModule.svelte';
|
||||
import TaskSlideOver from '$lib/components/dashboard/TaskSlideOver.svelte';
|
||||
|
||||
interface QuickTask {
|
||||
id: string;
|
||||
title: string;
|
||||
startDate?: string;
|
||||
dueDate?: string;
|
||||
isAllDay?: boolean;
|
||||
_projectName: string;
|
||||
projectId: string;
|
||||
_projectId: string;
|
||||
}
|
||||
|
||||
const userName = $derived((page as any).data?.user?.display_name || 'there');
|
||||
|
||||
@@ -19,6 +29,51 @@
|
||||
let fitnessCalLogged = $state(0);
|
||||
let fitnessProtein = $state(0);
|
||||
let fitnessCarbs = $state(0);
|
||||
let headerTasks = $state<QuickTask[]>([]);
|
||||
let headerOverdue = $state(0);
|
||||
let headerTotalCount = $state(0);
|
||||
let taskPanelOpen = $state(false);
|
||||
|
||||
function getGreeting(): string {
|
||||
const h = new Date().getHours();
|
||||
if (h < 12) return 'Good morning';
|
||||
if (h < 17) return 'Good afternoon';
|
||||
return 'Good evening';
|
||||
}
|
||||
|
||||
function getDateString(): string {
|
||||
return new Date().toLocaleDateString('en-US', {
|
||||
weekday: 'long', month: 'long', day: 'numeric'
|
||||
});
|
||||
}
|
||||
|
||||
function formatTaskTime(t: QuickTask): string {
|
||||
const d = t.startDate || t.dueDate;
|
||||
if (!d || t.isAllDay) return '';
|
||||
try {
|
||||
const date = new Date(d);
|
||||
const h = date.getHours(), m = date.getMinutes();
|
||||
if (h === 0 && m === 0) return '';
|
||||
const ampm = h >= 12 ? 'PM' : 'AM';
|
||||
const hour = h % 12 || 12;
|
||||
return m > 0 ? `${hour}:${String(m).padStart(2, '0')} ${ampm}` : `${hour} ${ampm}`;
|
||||
} catch { return ''; }
|
||||
}
|
||||
|
||||
async function loadTasks() {
|
||||
try {
|
||||
const res = await fetch('/api/tasks/today', { credentials: 'include' });
|
||||
if (res.ok) {
|
||||
const t = await res.json();
|
||||
headerOverdue = t.overdueCount || 0;
|
||||
const today = t.today || [];
|
||||
const overdue = t.overdue || [];
|
||||
headerTotalCount = today.length + overdue.length;
|
||||
// First task for preview
|
||||
headerTasks = [...overdue, ...today].slice(0, 1);
|
||||
}
|
||||
} catch { /* silent */ }
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
const n = new Date();
|
||||
@@ -57,20 +112,52 @@
|
||||
fitnessCalRemaining = Math.max(0, (g.calories || 2000) - fitnessCalLogged);
|
||||
}
|
||||
} catch { /* silent */ }
|
||||
|
||||
await loadTasks();
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="page dash-page">
|
||||
<div class="dash-layout">
|
||||
<aside class="tasks-sidebar">
|
||||
<TasksPanel />
|
||||
</aside>
|
||||
<div class="page">
|
||||
<div class="app-surface">
|
||||
<div class="page-header">
|
||||
<div class="page-subtitle">Dashboard</div>
|
||||
<div class="page-greeting">Good to see you, <strong>{userName}</strong></div>
|
||||
<!-- Dashboard header with task trigger -->
|
||||
<div class="dash-header">
|
||||
<div class="dash-left">
|
||||
<div class="dash-date">{getDateString()}</div>
|
||||
<h1 class="dash-greeting">{getGreeting()}, <strong>{userName}</strong></h1>
|
||||
</div>
|
||||
<button class="task-trigger" onclick={() => taskPanelOpen = true}>
|
||||
<div class="task-trigger-icon" class:has-overdue={headerOverdue > 0}>
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
|
||||
<rect x="2" y="2" width="14" height="14" rx="3"/>
|
||||
<path d="M6 9l2 2 4-4"/>
|
||||
</svg>
|
||||
{#if headerOverdue > 0}
|
||||
<span class="task-trigger-dot"></span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="task-trigger-text">
|
||||
<span class="task-trigger-count">
|
||||
{headerTotalCount} task{headerTotalCount !== 1 ? 's' : ''}
|
||||
{#if headerOverdue > 0}
|
||||
<span class="task-trigger-overdue">· {headerOverdue} overdue</span>
|
||||
{/if}
|
||||
</span>
|
||||
{#if headerTasks[0]}
|
||||
<span class="task-trigger-next">
|
||||
Next: {headerTasks[0].title}
|
||||
{#if formatTaskTime(headerTasks[0])} · {formatTaskTime(headerTasks[0])}{/if}
|
||||
</span>
|
||||
{:else}
|
||||
<span class="task-trigger-next">All clear for today</span>
|
||||
{/if}
|
||||
</div>
|
||||
<svg class="task-trigger-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M6 4l4 4-4 4"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<TaskSlideOver bind:open={taskPanelOpen} onclose={() => { taskPanelOpen = false; loadTasks(); }} />
|
||||
|
||||
<!-- Action cards -->
|
||||
<div class="action-cards">
|
||||
<DashboardActionCard
|
||||
title="{budgetUncatCount} uncategorized transactions"
|
||||
@@ -96,8 +183,7 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<TasksModule />
|
||||
|
||||
<!-- Modules -->
|
||||
<div class="modules-grid">
|
||||
<BudgetModule />
|
||||
<div class="right-stack">
|
||||
@@ -106,59 +192,133 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.dash-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 280px 1fr;
|
||||
gap: var(--module-gap);
|
||||
max-width: 1500px;
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--sp-6);
|
||||
/* ── Dashboard header ── */
|
||||
.dash-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: var(--sp-6);
|
||||
margin-bottom: var(--section-gap);
|
||||
}
|
||||
|
||||
.tasks-sidebar {
|
||||
position: sticky;
|
||||
top: 80px;
|
||||
align-self: start;
|
||||
.dash-date {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--accent);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
margin-bottom: var(--sp-1);
|
||||
}
|
||||
|
||||
.dash-layout > :global(.app-surface) {
|
||||
padding: 0;
|
||||
max-width: none;
|
||||
.dash-greeting {
|
||||
font-size: var(--text-2xl);
|
||||
font-weight: 400;
|
||||
color: var(--text-1);
|
||||
line-height: var(--leading-tight);
|
||||
letter-spacing: -0.02em;
|
||||
margin: 0;
|
||||
}
|
||||
.dash-greeting strong { font-weight: 700; }
|
||||
|
||||
/* ── Task trigger button ── */
|
||||
.task-trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-3);
|
||||
padding: var(--sp-3) var(--sp-4);
|
||||
border-radius: var(--radius);
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: var(--shadow-sm);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
text-align: left;
|
||||
flex-shrink: 0;
|
||||
max-width: 320px;
|
||||
}
|
||||
.task-trigger:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
border-color: var(--accent-border);
|
||||
}
|
||||
.task-trigger:active { transform: scale(0.98); }
|
||||
|
||||
.task-trigger-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--accent-dim);
|
||||
color: var(--accent);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
}
|
||||
.task-trigger-icon.has-overdue {
|
||||
background: var(--error-dim);
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.dash-layout {
|
||||
.task-trigger-dot {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
right: -2px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--error);
|
||||
border: 2px solid var(--card);
|
||||
}
|
||||
|
||||
.task-trigger-text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.task-trigger-count {
|
||||
display: block;
|
||||
padding: 0;
|
||||
}
|
||||
.tasks-sidebar {
|
||||
display: none;
|
||||
}
|
||||
.dash-layout > :global(.app-surface) {
|
||||
padding: 0 var(--sp-6);
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 600;
|
||||
color: var(--text-1);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.dash-layout > :global(.app-surface) {
|
||||
padding: 0 var(--sp-5);
|
||||
}
|
||||
.task-trigger-overdue {
|
||||
color: var(--error);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.task-trigger-next {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: var(--text-3);
|
||||
margin-top: 1px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.task-trigger-arrow {
|
||||
color: var(--text-4);
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.task-trigger:hover .task-trigger-arrow {
|
||||
transform: translateX(2px);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* ── Action cards ── */
|
||||
.action-cards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--section-gap);
|
||||
margin-bottom: calc(var(--section-gap) + 8px);
|
||||
padding-top: 4px;
|
||||
gap: var(--sp-3);
|
||||
margin-bottom: var(--section-gap);
|
||||
}
|
||||
|
||||
/* ── Modules grid ── */
|
||||
.modules-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.3fr 0.7fr;
|
||||
@@ -172,6 +332,21 @@
|
||||
gap: var(--module-gap);
|
||||
}
|
||||
|
||||
/* ── Mobile ── */
|
||||
@media (max-width: 900px) {
|
||||
.dash-header {
|
||||
flex-direction: column;
|
||||
gap: var(--sp-3);
|
||||
}
|
||||
.dash-greeting {
|
||||
font-size: var(--text-xl);
|
||||
}
|
||||
.task-trigger {
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.modules-grid {
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
Reference in New Issue
Block a user