refactor(web): remove old routes and BottomNav for single-screen redesign
Delete /tasks/new, /tasks/[uuid], /projects, /tags routes and BottomNav component. Simplify layout to slot-only with 100dvh flexbox. Remove nav-height CSS variable and .page padding rules. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,32 +1,16 @@
|
||||
<script>
|
||||
import '../app.css';
|
||||
import BottomNav from '$lib/components/BottomNav.svelte';
|
||||
import { authStore } from '$lib/stores/auth.js';
|
||||
import { page } from '$app/stores';
|
||||
|
||||
// Check if on auth pages (don't show nav)
|
||||
$: isAuthPage = $page.url.pathname.startsWith('/auth');
|
||||
</script>
|
||||
|
||||
<div class="app">
|
||||
<main class="main">
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
{#if $authStore.isAuthenticated && !isAuthPage}
|
||||
<BottomNav />
|
||||
{/if}
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.app {
|
||||
min-height: 100vh;
|
||||
height: 100dvh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +0,0 @@
|
||||
<div class="page">
|
||||
<div class="container">
|
||||
<h1>Projects</h1>
|
||||
<p class="text-secondary">Projects view coming soon...</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,6 +0,0 @@
|
||||
<div class="page">
|
||||
<div class="container">
|
||||
<h1>Tags</h1>
|
||||
<p class="text-secondary">Tags view coming soon...</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,26 +0,0 @@
|
||||
<script>
|
||||
import { page } from '$app/stores';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
$: uuid = $page.params.uuid;
|
||||
</script>
|
||||
|
||||
<div class="page">
|
||||
<div class="container">
|
||||
<h1>Task Detail</h1>
|
||||
<p class="text-secondary">UUID: {uuid}</p>
|
||||
<p class="text-secondary mb-lg">Task detail view coming in next iteration...</p>
|
||||
<a href="/" class="btn-link">← Back to tasks</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.btn-link {
|
||||
display: inline-block;
|
||||
padding: 0.75rem 1.5rem;
|
||||
background-color: var(--color-primary);
|
||||
color: white;
|
||||
border-radius: var(--border-radius);
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
@@ -1,172 +0,0 @@
|
||||
<script>
|
||||
import { goto } from '$app/navigation';
|
||||
import { tasksStore } from '$lib/stores/tasks.js';
|
||||
import { generateUUID } from '$lib/utils/uuid.js';
|
||||
import { toUnix } from '$lib/utils/dates.js';
|
||||
import Button from '$lib/components/ui/Button.svelte';
|
||||
import Input from '$lib/components/ui/Input.svelte';
|
||||
import Select from '$lib/components/ui/Select.svelte';
|
||||
|
||||
let description = '';
|
||||
let project = '';
|
||||
let priority = '1';
|
||||
let dueDate = '';
|
||||
let tags = '';
|
||||
let saving = false;
|
||||
let error = '';
|
||||
|
||||
const priorityOptions = [
|
||||
{ value: '0', label: 'Low' },
|
||||
{ value: '1', label: 'Default' },
|
||||
{ value: '2', label: 'Medium' },
|
||||
{ value: '3', label: 'High' }
|
||||
];
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!description.trim()) {
|
||||
error = 'Description is required';
|
||||
return;
|
||||
}
|
||||
|
||||
saving = true;
|
||||
error = '';
|
||||
|
||||
try {
|
||||
/** @type {Partial<import('$lib/api/types.js').Task>} */
|
||||
const task = {
|
||||
uuid: generateUUID(),
|
||||
description: description.trim(),
|
||||
status: /** @type {'P'} */ ('P'),
|
||||
priority: /** @type {0|1|2|3} */ (parseInt(priority)),
|
||||
created: toUnix(new Date()),
|
||||
modified: toUnix(new Date()),
|
||||
tags: tags.trim() ? tags.split(',').map(t => t.trim()).filter(t => t) : [],
|
||||
project: project.trim() || null,
|
||||
due: dueDate ? toUnix(new Date(dueDate)) : null
|
||||
};
|
||||
|
||||
await tasksStore.add(task);
|
||||
goto('/');
|
||||
} catch (err) {
|
||||
error = err instanceof Error ? err.message : 'Failed to create task';
|
||||
} finally {
|
||||
saving = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="page">
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<a href="/" class="back-btn">
|
||||
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
Back
|
||||
</a>
|
||||
<h1>New Task</h1>
|
||||
</div>
|
||||
|
||||
<form on:submit|preventDefault={handleSubmit} class="task-form">
|
||||
{#if error}
|
||||
<div class="error-banner">{error}</div>
|
||||
{/if}
|
||||
|
||||
<Input
|
||||
label="Description"
|
||||
placeholder="What needs to be done?"
|
||||
bind:value={description}
|
||||
required
|
||||
id="description"
|
||||
/>
|
||||
|
||||
<Input
|
||||
label="Project"
|
||||
placeholder="Optional"
|
||||
bind:value={project}
|
||||
id="project"
|
||||
/>
|
||||
|
||||
<Select
|
||||
label="Priority"
|
||||
options={priorityOptions}
|
||||
bind:value={priority}
|
||||
id="priority"
|
||||
/>
|
||||
|
||||
<Input
|
||||
label="Due Date"
|
||||
type="date"
|
||||
bind:value={dueDate}
|
||||
id="due"
|
||||
/>
|
||||
|
||||
<Input
|
||||
label="Tags"
|
||||
placeholder="Comma separated (e.g., work, urgent)"
|
||||
bind:value={tags}
|
||||
id="tags"
|
||||
/>
|
||||
|
||||
<div class="actions">
|
||||
<Button type="button" variant="secondary" on:click={() => goto('/')}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" loading={saving}>
|
||||
Create Task
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
color: var(--color-primary);
|
||||
text-decoration: none;
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.task-form {
|
||||
background-color: var(--bg-primary);
|
||||
border-radius: var(--border-radius);
|
||||
padding: var(--spacing-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.error-banner {
|
||||
background-color: #fee2e2;
|
||||
color: var(--color-danger);
|
||||
padding: var(--spacing-md);
|
||||
border-radius: var(--border-radius);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
margin-top: var(--spacing-md);
|
||||
}
|
||||
|
||||
.actions > :global(button) {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user