Kristian WindandClaude Opus 5
7094e05ddd
"Do it today" is the most-made rescheduling there is, and the sidebar is where the pointer already is when you have picked a task up. Only that one of the two date views. "Kommende" is a range rather than a day — it starts today and runs a week — so a drop on it would have to invent a date its own label does not name. The month grid inside it takes a drop per cell, which is where a specific day is actually on offer. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
1177 lines
32 KiB
Svelte
1177 lines
32 KiB
Svelte
<script>
|
|
import { app, sidebar } from '$lib/stores.svelte.js';
|
|
import { api } from '$lib/api.js';
|
|
import { TASK, PROJECT, GROUP, startDrag, carries, dragged, accept } from '$lib/dnd.js';
|
|
import { COLORS, colorVar } from '$lib/colors.js';
|
|
import { page } from '$app/stores';
|
|
import { goto } from '$app/navigation';
|
|
|
|
let { onnavigate } = $props();
|
|
|
|
let adding = $state(false);
|
|
let newName = $state('');
|
|
|
|
async function createProject(event) {
|
|
event.preventDefault();
|
|
const name = newName.trim();
|
|
if (!name) return;
|
|
newName = '';
|
|
adding = false;
|
|
const project = await app.createProject(name);
|
|
if (project) goto(`/projekt/${project.id}`);
|
|
}
|
|
|
|
async function signOut() {
|
|
await api.logout();
|
|
location.href = '/';
|
|
}
|
|
|
|
let filters = $state([]);
|
|
let labels = $state([]);
|
|
|
|
// Reads app.labelsChanged so the effect re-runs when a label is created,
|
|
// renamed or deleted anywhere — including in another tab, or by Claude
|
|
// through the connector.
|
|
$effect(() => {
|
|
app.labelsChanged;
|
|
api.listFilters().then((r) => (filters = r.filters)).catch(() => {});
|
|
api.listLabels().then((r) => (labels = r.labels)).catch(() => {});
|
|
});
|
|
|
|
// Split by who owns it, not by whether anybody else is in it.
|
|
//
|
|
// The two headings say "Projekter" and "Delt med mig", and the split used to be
|
|
// on `shared`, which only means the project has more than one member. So the
|
|
// moment you invited somebody to a project of your own it moved under "Delt med
|
|
// mig" — where it lost its place in the order, stopped being draggable, and
|
|
// could not be filed under a group. Sharing your own project is not the same
|
|
// event as somebody sharing theirs with you.
|
|
let shared = $derived(app.projects.filter((p) => !p.is_inbox && p.role !== 'owner'));
|
|
// Sorted here rather than relying on the order the server sent, so a drag
|
|
// settles the moment it is dropped instead of after the round trip.
|
|
let own = $derived(
|
|
app.projects
|
|
.filter((p) => !p.is_inbox && p.role === 'owner')
|
|
.sort((a, b) => a.sort_order - b.sort_order)
|
|
);
|
|
let current = $derived($page.url.pathname);
|
|
|
|
// --- groups -------------------------------------------------------------------
|
|
|
|
let groups = $derived([...app.groups].sort((a, b) => a.sort_order - b.sort_order));
|
|
let groupIds = $derived(new Set(groups.map((g) => g.id)));
|
|
|
|
/**
|
|
* Which heading a project renders under — '' for the loose ones at the top.
|
|
*
|
|
* It is not simply `group_id`, and the difference is not paranoia: a group
|
|
* deleted in another tab arrives as one event, without a second one per
|
|
* project, so for a moment the projects here still name a heading that no
|
|
* longer renders. Filing by the raw id would drop them out of the sidebar
|
|
* entirely — under a group that is not drawn, which is nowhere.
|
|
*/
|
|
const bucketOf = (p) => (p.group_id && groupIds.has(p.group_id) ? p.group_id : '');
|
|
|
|
let ungrouped = $derived(own.filter((p) => bucketOf(p) === ''));
|
|
const inGroup = (id) => own.filter((p) => p.group_id === id);
|
|
|
|
let addingGroup = $state(false);
|
|
let newGroupName = $state('');
|
|
let renamingGroup = $state(null);
|
|
let groupName = $state('');
|
|
/** The group whose swatches are open, if any. */
|
|
let coloringGroup = $state(null);
|
|
|
|
async function createGroup(event) {
|
|
event.preventDefault();
|
|
const name = newGroupName.trim();
|
|
if (!name) return;
|
|
newGroupName = '';
|
|
addingGroup = false;
|
|
await app.createGroup(name);
|
|
}
|
|
|
|
async function renameGroup(event, group) {
|
|
event.preventDefault();
|
|
const name = groupName.trim();
|
|
renamingGroup = null;
|
|
if (!name || name === group.name) return;
|
|
await app.renameGroup(group.id, name);
|
|
}
|
|
|
|
async function removeGroup(group) {
|
|
const count = inGroup(group.id).length;
|
|
// Says what happens to the projects, because "slet gruppen" reads like it
|
|
// might take them with it. It does not: only the heading goes.
|
|
const kept =
|
|
count === 1
|
|
? 'Projektet i den bliver, men ligger bagefter uden gruppe.'
|
|
: `De ${count} projekter bliver, men ligger bagefter uden gruppe.`;
|
|
if (!confirm(count ? `Slet gruppen "${group.name}"? ${kept}` : `Slet gruppen "${group.name}"?`))
|
|
return;
|
|
await app.deleteGroup(group.id);
|
|
}
|
|
|
|
// --- resizing -------------------------------------------------------------------
|
|
|
|
let resizing = $state(false);
|
|
|
|
/**
|
|
* Pointer events rather than mouse events, so a trackpad, a mouse and a stylus
|
|
* all work. Capturing the pointer means the drag keeps following even when it
|
|
* leaves the handle, which at 4px wide it does constantly.
|
|
*/
|
|
function startResize(event) {
|
|
event.preventDefault();
|
|
resizing = true;
|
|
event.currentTarget.setPointerCapture(event.pointerId);
|
|
}
|
|
|
|
function onResize(event) {
|
|
if (!resizing) return;
|
|
sidebar.setWidth(event.clientX);
|
|
}
|
|
|
|
function endResize(event) {
|
|
if (!resizing) return;
|
|
resizing = false;
|
|
event.currentTarget.releasePointerCapture?.(event.pointerId);
|
|
}
|
|
|
|
// --- reordering ---------------------------------------------------------------
|
|
|
|
let draggingId = $state(null);
|
|
let overId = $state(null);
|
|
let overBelow = $state(false);
|
|
/** The group whose heading is lit up as a drop target. */
|
|
let overGroup = $state(null);
|
|
let draggingGroup = $state(null);
|
|
|
|
function clearDrag() {
|
|
draggingId = null;
|
|
draggingGroup = null;
|
|
overId = null;
|
|
overGroup = null;
|
|
overProject = null;
|
|
}
|
|
|
|
function onDragStart(event, project) {
|
|
draggingId = project.id;
|
|
startDrag(event, PROJECT, project.id);
|
|
}
|
|
|
|
function onDragOver(event, project) {
|
|
if (!carries(event, PROJECT) || draggingId === project.id) return;
|
|
accept(event);
|
|
|
|
const box = event.currentTarget.getBoundingClientRect();
|
|
overId = project.id;
|
|
overGroup = null;
|
|
overBelow = event.clientY > box.top + box.height / 2;
|
|
}
|
|
|
|
/**
|
|
* Dropping onto a project puts the dragged one in that gap — and into the same
|
|
* group, which is what makes dragging between two headings work without a
|
|
* separate gesture. The order is one write and the group is another; each is
|
|
* meaningful on its own, and neither can leave the other half-applied.
|
|
*/
|
|
async function onDrop(event, target) {
|
|
event.preventDefault();
|
|
const id = dragged(event, PROJECT) || draggingId;
|
|
const below = overBelow;
|
|
clearDrag();
|
|
if (!id || id === target.id) return;
|
|
|
|
const moved = own.find((p) => p.id === id);
|
|
if (!moved) return;
|
|
|
|
const without = own.filter((p) => p.id !== id);
|
|
const at = without.findIndex((p) => p.id === target.id);
|
|
if (at < 0) return;
|
|
|
|
const ordered = [...without];
|
|
ordered.splice(below ? at + 1 : at, 0, moved);
|
|
|
|
await app.setProjectGroup(id, bucketOf(target));
|
|
await app.reorderProjects(ordered.map((p) => p.id));
|
|
}
|
|
|
|
/**
|
|
* Dropping onto a heading files the project under it and puts it last.
|
|
*
|
|
* Last rather than first: a heading is a wide target and dropping on it is the
|
|
* coarse gesture — "somewhere in here" — where dropping on a row is the precise
|
|
* one. Landing at the top would push whatever is already there down, which is a
|
|
* rearrangement nobody asked for.
|
|
*/
|
|
async function onDropInGroup(event, groupID) {
|
|
event.preventDefault();
|
|
const id = dragged(event, PROJECT) || draggingId;
|
|
clearDrag();
|
|
if (!id) return;
|
|
|
|
const moved = own.find((p) => p.id === id);
|
|
if (!moved) return;
|
|
|
|
await app.setProjectGroup(id, groupID);
|
|
|
|
// Everything else keeps the order it already had; the dragged project is
|
|
// reinserted after the last one already under that heading.
|
|
const others = own.filter((p) => p.id !== id);
|
|
const ordered = [...others];
|
|
ordered.splice(others.findLastIndex((p) => bucketOf(p) === groupID) + 1, 0, moved);
|
|
await app.reorderProjects(ordered.map((p) => p.id));
|
|
}
|
|
|
|
// --- a task dropped on "I dag" ---------------------------------------------------
|
|
|
|
/**
|
|
* "Gør det i dag" is the most-made rescheduling there is, and the sidebar is
|
|
* where the pointer already goes.
|
|
*
|
|
* Only this one of the two date views. "Kommende" is a range rather than a
|
|
* day — it starts today and runs a week — so a drop on it would have to invent
|
|
* a date the label does not name. The month grid inside it takes drops per
|
|
* cell, which is where a specific day is actually offered.
|
|
*/
|
|
let overToday = $state(false);
|
|
|
|
function todayISO() {
|
|
const now = new Date();
|
|
return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(
|
|
now.getDate()
|
|
).padStart(2, '0')}`;
|
|
}
|
|
|
|
async function onDropOnToday(event) {
|
|
event.preventDefault();
|
|
const id = dragged(event, TASK);
|
|
overToday = false;
|
|
if (!id) return;
|
|
await app.reschedule(id, todayISO());
|
|
}
|
|
|
|
// --- a task dropped on a project ------------------------------------------------
|
|
|
|
/** The project row lit up because a task is hovering over it. */
|
|
let overProject = $state(null);
|
|
|
|
/**
|
|
* A viewer can open a project but not write to it, so it is not a place a task
|
|
* can be dropped. Refusing here rather than letting the server refuse is the
|
|
* difference between a row that does not light up and a task that visibly moves
|
|
* and then jumps back.
|
|
*/
|
|
const canReceive = (project) => project.role === 'owner' || project.role === 'editor';
|
|
|
|
function onTaskDragOver(event, project) {
|
|
if (!carries(event, TASK) || !canReceive(project)) return;
|
|
accept(event);
|
|
overProject = project.id;
|
|
}
|
|
|
|
async function onTaskDrop(event, project) {
|
|
event.preventDefault();
|
|
const id = dragged(event, TASK);
|
|
overProject = null;
|
|
if (!id || !canReceive(project)) return;
|
|
await app.moveToProject(id, project.id);
|
|
}
|
|
|
|
function onGroupDragStart(event, group) {
|
|
draggingGroup = group.id;
|
|
startDrag(event, GROUP, group.id);
|
|
}
|
|
|
|
/**
|
|
* A heading takes two kinds of drop, so it has to say which one it is showing.
|
|
* A project joins the group; another heading reorders against it.
|
|
*/
|
|
function onGroupDragOver(event, group) {
|
|
if (carries(event, GROUP)) {
|
|
if (draggingGroup === group.id) return;
|
|
accept(event);
|
|
const box = event.currentTarget.getBoundingClientRect();
|
|
overId = group.id;
|
|
overGroup = null;
|
|
overBelow = event.clientY > box.top + box.height / 2;
|
|
return;
|
|
}
|
|
if (!carries(event, PROJECT)) return;
|
|
accept(event);
|
|
overGroup = group.id;
|
|
overId = null;
|
|
}
|
|
|
|
async function onGroupDrop(event, group) {
|
|
if (carries(event, GROUP)) {
|
|
event.preventDefault();
|
|
const id = dragged(event, GROUP) || draggingGroup;
|
|
const below = overBelow;
|
|
clearDrag();
|
|
if (!id || id === group.id) return;
|
|
|
|
const without = groups.filter((g) => g.id !== id);
|
|
const at = without.findIndex((g) => g.id === group.id);
|
|
if (at < 0) return;
|
|
const ordered = [...without];
|
|
ordered.splice(below ? at + 1 : at, 0, groups.find((g) => g.id === id));
|
|
await app.reorderGroups(ordered.map((g) => g.id));
|
|
return;
|
|
}
|
|
await onDropInGroup(event, group.id);
|
|
}
|
|
</script>
|
|
|
|
<nav class="sidebar" aria-label="Hovedmenu">
|
|
<div class="brand">
|
|
<!-- Verdande's mark: the rune Wunjo, which is the letter the Norn's name
|
|
starts with in the elder futhark. One glyph, no wordmark beside it —
|
|
the name is in the tab and everywhere else already. -->
|
|
<span class="rune" aria-hidden="true">ᚹ</span>
|
|
<span class="name">verdande</span>
|
|
</div>
|
|
|
|
<div class="views">
|
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
<a
|
|
href="/"
|
|
class:active={current === '/'}
|
|
class:receiving={overToday}
|
|
onclick={onnavigate}
|
|
ondragover={(e) => {
|
|
if (!carries(e, TASK)) return;
|
|
accept(e);
|
|
overToday = true;
|
|
}}
|
|
ondragleave={() => (overToday = false)}
|
|
ondrop={onDropOnToday}
|
|
>
|
|
<span class="dot today" aria-hidden="true"></span>
|
|
I dag
|
|
</a>
|
|
<a href="/upcoming" class:active={current === '/upcoming'} onclick={onnavigate}>
|
|
<span class="dot" aria-hidden="true"></span>
|
|
Kommende
|
|
</a>
|
|
{#if app.projects.some((p) => p.shared)}
|
|
<!-- Only where delegating is possible at all. On an instance with one
|
|
person this view can never have anything in it, and a permanent empty
|
|
entry is a question the sidebar keeps asking and answering "no". -->
|
|
<a href="/uddelegeret" class:active={current === '/uddelegeret'} onclick={onnavigate}>
|
|
<span class="dot" aria-hidden="true"></span>
|
|
Venter på andre
|
|
</a>
|
|
{/if}
|
|
{#if app.inbox}
|
|
{@render projectRow(app.inbox, false)}
|
|
{/if}
|
|
</div>
|
|
|
|
<!-- One row for every project the sidebar shows — your own, the Inbox and the
|
|
shared ones — because all three are somewhere a task can be dropped, and
|
|
three copies of that would be three chances to fix a bug in two of them.
|
|
Only your own reorder: `sort_order` is a column on the project, so a shared
|
|
one stays where its owner put it. -->
|
|
{#snippet projectRow(project, sortable)}
|
|
<a
|
|
href="/projekt/{project.id}"
|
|
class:sortable
|
|
class:active={current === `/projekt/${project.id}`}
|
|
class:dragging={draggingId === project.id}
|
|
class:drop-above={sortable && overId === project.id && !overBelow}
|
|
class:drop-below={sortable && overId === project.id && overBelow}
|
|
class:receiving={overProject === project.id}
|
|
onclick={onnavigate}
|
|
draggable={sortable}
|
|
ondragstart={(e) => sortable && onDragStart(e, project)}
|
|
ondragend={clearDrag}
|
|
ondragover={(e) => {
|
|
if (carries(e, TASK)) onTaskDragOver(e, project);
|
|
else if (sortable) onDragOver(e, project);
|
|
}}
|
|
ondragleave={() => {
|
|
overId = null;
|
|
overProject = null;
|
|
}}
|
|
ondrop={(e) => (carries(e, TASK) ? onTaskDrop(e, project) : sortable && onDrop(e, project))}
|
|
>
|
|
<span class="dot" style="background: {colorVar(project.color)}" aria-hidden="true"></span>
|
|
{project.name}
|
|
{#if project.shared}
|
|
<span class="count">{project.member_count}</span>
|
|
{/if}
|
|
</a>
|
|
{/snippet}
|
|
|
|
<div class="group">
|
|
<!-- The heading is also the drop target for "no group": without it, a project
|
|
dragged into a group could only be got out again by emptying the group,
|
|
and with every project filed there would be no loose row left to aim at. -->
|
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
<div
|
|
class="group-head"
|
|
class:over={overGroup === ''}
|
|
ondragover={(e) => {
|
|
if (!carries(e, PROJECT)) return;
|
|
accept(e);
|
|
overGroup = '';
|
|
overId = null;
|
|
}}
|
|
ondragleave={() => (overGroup = null)}
|
|
ondrop={(e) => onDropInGroup(e, '')}
|
|
>
|
|
<h2>Projekter</h2>
|
|
<button
|
|
class="icon"
|
|
onclick={() => {
|
|
adding = !adding;
|
|
addingGroup = false;
|
|
}}
|
|
aria-label="Nyt projekt">+</button
|
|
>
|
|
<button
|
|
class="icon new-group"
|
|
onclick={() => {
|
|
addingGroup = !addingGroup;
|
|
adding = false;
|
|
newGroupName = '';
|
|
}}
|
|
aria-label="Ny gruppe"
|
|
title="Ny gruppe"
|
|
>
|
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{#if adding}
|
|
<form onsubmit={createProject}>
|
|
<!-- svelte-ignore a11y_autofocus -->
|
|
<input
|
|
bind:value={newName}
|
|
autofocus
|
|
placeholder="Projektnavn"
|
|
aria-label="Projektnavn"
|
|
onblur={() => !newName.trim() && (adding = false)}
|
|
onkeydown={(e) => e.key === 'Escape' && (adding = false)}
|
|
/>
|
|
</form>
|
|
{/if}
|
|
|
|
{#if addingGroup}
|
|
<form onsubmit={createGroup}>
|
|
<!-- svelte-ignore a11y_autofocus -->
|
|
<input
|
|
bind:value={newGroupName}
|
|
autofocus
|
|
placeholder="Gruppens navn"
|
|
aria-label="Gruppens navn"
|
|
onblur={() => !newGroupName.trim() && (addingGroup = false)}
|
|
onkeydown={(e) => e.key === 'Escape' && (addingGroup = false)}
|
|
/>
|
|
</form>
|
|
{/if}
|
|
|
|
{#each ungrouped as project (project.id)}
|
|
{@render projectRow(project, true)}
|
|
{/each}
|
|
|
|
{#if own.length === 0 && !adding}
|
|
<p class="empty">Ingen projekter endnu.</p>
|
|
{/if}
|
|
</div>
|
|
|
|
{#each groups as group (group.id)}
|
|
{@const inside = inGroup(group.id)}
|
|
<div class="group folder">
|
|
<!-- Draggable, except while it is being renamed: a draggable ancestor stops
|
|
the pointer from selecting text in the field it contains. -->
|
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
<div
|
|
class="group-head folder-head"
|
|
class:over={overGroup === group.id}
|
|
class:drop-above={overId === group.id && !overBelow}
|
|
class:drop-below={overId === group.id && overBelow}
|
|
class:dragging={draggingGroup === group.id}
|
|
draggable={renamingGroup !== group.id}
|
|
ondragstart={(e) => onGroupDragStart(e, group)}
|
|
ondragend={clearDrag}
|
|
ondragover={(e) => onGroupDragOver(e, group)}
|
|
ondragleave={() => {
|
|
overGroup = null;
|
|
overId = null;
|
|
}}
|
|
ondrop={(e) => onGroupDrop(e, group)}
|
|
>
|
|
{#if renamingGroup === group.id}
|
|
<form onsubmit={(e) => renameGroup(e, group)}>
|
|
<!-- svelte-ignore a11y_autofocus -->
|
|
<input
|
|
bind:value={groupName}
|
|
autofocus
|
|
aria-label="Gruppens navn"
|
|
onblur={() => (renamingGroup = null)}
|
|
onkeydown={(e) => e.key === 'Escape' && (renamingGroup = null)}
|
|
/>
|
|
</form>
|
|
{:else}
|
|
<!-- The button sits inside the heading, not around it, the same way a
|
|
project's title does: a group *is* a heading in the sidebar, and
|
|
wrapping an h2 in a button both invalidates the markup and takes
|
|
the heading away from a screen reader. The whole heading folds —
|
|
at this size a lone chevron is a target you miss, and the name is
|
|
where the eye already is. -->
|
|
<!-- The dot is the control as well as the preview: what you press is
|
|
the thing you are about to change. It also keeps the heading's
|
|
actions down to two — they carry `opacity: 0` rather than
|
|
`display: none`, so they take their width whether or not you can
|
|
see them, and a third one squeezed the group's name until it
|
|
truncated. -->
|
|
<button
|
|
class="dot group-dot"
|
|
style="background: {colorVar(group.color)}"
|
|
onclick={() => (coloringGroup = coloringGroup === group.id ? null : group.id)}
|
|
aria-expanded={coloringGroup === group.id}
|
|
aria-label="Farve på {group.name}"
|
|
title="Farve"
|
|
></button>
|
|
<h2 class="fold">
|
|
<button onclick={() => app.toggleGroup(group.id)} aria-expanded={!group.collapsed}>
|
|
<svg
|
|
class="chevron"
|
|
class:collapsed={group.collapsed}
|
|
viewBox="0 0 24 24"
|
|
aria-hidden="true"
|
|
>
|
|
<path d="M6 9l6 6 6-6" />
|
|
</svg>
|
|
{group.name}
|
|
</button>
|
|
</h2>
|
|
<span class="count">{inside.length}</span>
|
|
<button
|
|
class="group-action"
|
|
onclick={() => {
|
|
renamingGroup = group.id;
|
|
groupName = group.name;
|
|
}}>Omdøb</button
|
|
>
|
|
<button class="group-action remove" onclick={() => removeGroup(group)}>Slet</button>
|
|
{/if}
|
|
</div>
|
|
|
|
{#if coloringGroup === group.id}
|
|
<div class="swatches" role="group" aria-label="Farve på {group.name}">
|
|
{#each COLORS as color (color.id)}
|
|
<button
|
|
class="swatch"
|
|
class:chosen={(group.color ?? 'graphite') === color.id}
|
|
style="background: {colorVar(color.id)}"
|
|
title={color.name}
|
|
aria-label={color.name}
|
|
aria-pressed={(group.color ?? 'graphite') === color.id}
|
|
onclick={() => {
|
|
app.setGroupColor(group.id, color.id);
|
|
coloringGroup = null;
|
|
}}
|
|
></button>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
|
|
{#if !group.collapsed}
|
|
{#each inside as project (project.id)}
|
|
{@render projectRow(project, true)}
|
|
{/each}
|
|
{#if !inside.length}
|
|
<p class="empty">Tom — træk et projekt herop.</p>
|
|
{/if}
|
|
{/if}
|
|
</div>
|
|
{/each}
|
|
|
|
{#if shared.length}
|
|
<div class="group">
|
|
<div class="group-head"><h2>Delt med mig</h2></div>
|
|
{#each shared as project (project.id)}
|
|
{@render projectRow(project, false)}
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
|
|
{#if filters.length}
|
|
<div class="group">
|
|
<div class="group-head"><h2>Filtre</h2></div>
|
|
{#each filters as filter (filter.id)}
|
|
<a
|
|
href="/filter/{filter.id}"
|
|
class:active={current === `/filter/${filter.id}`}
|
|
onclick={onnavigate}
|
|
>
|
|
<span class="dot" aria-hidden="true"></span>
|
|
{filter.name}
|
|
</a>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
|
|
{#if labels.length}
|
|
<div class="group">
|
|
<div class="group-head"><h2>Etiketter</h2></div>
|
|
{#each labels.filter((l) => l.task_count > 0) as label (label.id)}
|
|
<a
|
|
href="/etiket/{encodeURIComponent(label.name)}"
|
|
class:active={current === `/etiket/${encodeURIComponent(label.name)}`}
|
|
onclick={onnavigate}
|
|
>
|
|
<span class="dot" aria-hidden="true"></span>
|
|
{label.name}
|
|
<span class="count">{label.task_count}</span>
|
|
</a>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
|
|
<div class="foot">
|
|
<a
|
|
href="/indstillinger"
|
|
class="settings"
|
|
class:active={current.startsWith('/indstillinger')}
|
|
onclick={onnavigate}
|
|
>
|
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
<circle cx="12" cy="12" r="3" />
|
|
<path
|
|
d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 11-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 11-4 0v-.09A1.65 1.65 0 008 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06A1.65 1.65 0 004.6 15a1.65 1.65 0 00-1.51-1H3a2 2 0 110-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06A1.65 1.65 0 009 4.6a1.65 1.65 0 001-1.51V3a2 2 0 114 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06A1.65 1.65 0 0019.4 9v0a1.65 1.65 0 001.51 1H21a2 2 0 110 4h-.09a1.65 1.65 0 00-1.51 1z"
|
|
/>
|
|
</svg>
|
|
Indstillinger
|
|
</a>
|
|
|
|
<!-- A quiet indicator, not an alarm: losing the socket for a moment is
|
|
normal, and the app keeps working without it. -->
|
|
{#if !app.connected}
|
|
<span class="offline" title="Ændringer fra andre vises ikke lige nu">Offline</span>
|
|
{/if}
|
|
<button class="user" onclick={signOut}>
|
|
<span class="avatar" style="background: {app.user?.avatar_color}">
|
|
{app.user?.name?.[0]?.toUpperCase() ?? '?'}
|
|
</span>
|
|
<span class="user-name">{app.user?.name}</span>
|
|
<span class="signout">Log ud</span>
|
|
</button>
|
|
</div>
|
|
<!-- Also a slider for the keyboard: arrow keys move it, and Home puts it back.
|
|
A drag handle with no keyboard equivalent is a setting some people simply
|
|
cannot reach. -->
|
|
<div
|
|
class="resize"
|
|
class:resizing
|
|
role="separator"
|
|
aria-orientation="vertical"
|
|
aria-label="Bredde på sidebjælken"
|
|
tabindex="0"
|
|
onpointerdown={startResize}
|
|
onpointermove={onResize}
|
|
onpointerup={endResize}
|
|
onpointercancel={endResize}
|
|
ondblclick={() => sidebar.reset()}
|
|
onkeydown={(e) => {
|
|
if (e.key === 'ArrowLeft') sidebar.setWidth(sidebar.width - 16);
|
|
else if (e.key === 'ArrowRight') sidebar.setWidth(sidebar.width + 16);
|
|
else if (e.key === 'Home') sidebar.reset();
|
|
else return;
|
|
e.preventDefault();
|
|
}}
|
|
></div>
|
|
</nav>
|
|
|
|
<style>
|
|
.sidebar {
|
|
width: var(--sidebar-width);
|
|
flex: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--s5);
|
|
padding: var(--s4) var(--s3);
|
|
background: var(--surface-sunken);
|
|
border-right: 1px solid var(--line);
|
|
overflow-y: auto;
|
|
padding-left: max(var(--s3), env(safe-area-inset-left));
|
|
position: relative;
|
|
}
|
|
|
|
/* Sits on the border, wider than it looks: a 1px target is a target you miss.
|
|
The visible line stays the border; this only widens what the pointer hits. */
|
|
.resize {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: -3px;
|
|
width: 7px;
|
|
cursor: col-resize;
|
|
z-index: 10;
|
|
}
|
|
|
|
.resize::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0 3px;
|
|
background: var(--accent);
|
|
opacity: 0;
|
|
transition: opacity var(--fast) var(--ease);
|
|
}
|
|
|
|
.resize:hover::after,
|
|
.resize:focus-visible::after,
|
|
.resize.resizing::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
.resize:focus-visible {
|
|
outline: none;
|
|
}
|
|
|
|
@media (max-width: 820px) {
|
|
/* The drawer has a fixed width and no room to drag against. */
|
|
.resize {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--s2);
|
|
padding: 0 var(--s2);
|
|
}
|
|
|
|
.rune {
|
|
font-size: var(--text-xl);
|
|
color: var(--accent);
|
|
line-height: 1;
|
|
}
|
|
|
|
.name {
|
|
font-size: var(--text-lg);
|
|
font-weight: 560;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.views,
|
|
.group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1px;
|
|
}
|
|
|
|
.group-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 var(--s2) var(--s2);
|
|
}
|
|
|
|
h2 {
|
|
font-size: var(--text-xs);
|
|
font-weight: 560;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--ink-faint);
|
|
}
|
|
|
|
/* Only the square icon buttons — "+" and the folder — and asked for by class
|
|
rather than by "a button in a heading". A group's heading also has Omdøb and
|
|
Slet in it, and they are words: a selector that reached them squeezed both
|
|
into a 20px box, where they overflowed and were drawn on top of each other.
|
|
The class is the boundary, so the next text button added here is safe. */
|
|
.group-head > button.icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
display: grid;
|
|
place-items: center;
|
|
border-radius: var(--radius-sm);
|
|
color: var(--ink-faint);
|
|
font-size: var(--text-lg);
|
|
line-height: 1;
|
|
flex: none;
|
|
}
|
|
|
|
.group-head > button.icon:hover {
|
|
color: var(--ink);
|
|
background: var(--surface-raised);
|
|
}
|
|
|
|
.new-group svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 1.6;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
/* --- groups ------------------------------------------------------------- */
|
|
|
|
.folder {
|
|
margin-top: calc(var(--s3) * -1);
|
|
}
|
|
|
|
.folder-head {
|
|
position: relative;
|
|
gap: var(--s1);
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.folder-head.dragging {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
/* The heading lights up as a whole, because the whole heading is the target —
|
|
unlike a project row, where the target is the gap next to it. Both headings
|
|
do it: "Projekter" is where a project goes to leave its group. */
|
|
.group-head.over {
|
|
background: var(--surface-raised);
|
|
box-shadow: inset 0 0 0 1px var(--accent);
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.folder-head::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: var(--s2);
|
|
right: var(--s2);
|
|
height: 2px;
|
|
background: var(--accent);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.folder-head.drop-above::before {
|
|
top: -1px;
|
|
opacity: 1;
|
|
}
|
|
|
|
.folder-head.drop-below::before {
|
|
bottom: -1px;
|
|
opacity: 1;
|
|
}
|
|
|
|
.fold {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.fold button {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--s1);
|
|
width: 100%;
|
|
min-width: 0;
|
|
font: inherit;
|
|
letter-spacing: inherit;
|
|
text-transform: inherit;
|
|
color: inherit;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.fold button:hover {
|
|
color: var(--ink);
|
|
}
|
|
|
|
.chevron {
|
|
width: 11px;
|
|
height: 11px;
|
|
flex: none;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 2.4;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
transition: transform var(--fast) var(--ease);
|
|
}
|
|
|
|
.chevron.collapsed {
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
/* Hidden until the heading is hovered, like the section actions on a project
|
|
page: two buttons permanently beside a label stop it reading as a label. */
|
|
.group-action {
|
|
font-size: var(--text-xs);
|
|
color: var(--ink-faint);
|
|
padding: 0 var(--s1);
|
|
flex: none;
|
|
opacity: 0;
|
|
transition: opacity var(--fast) var(--ease);
|
|
}
|
|
|
|
.folder-head:hover .group-action,
|
|
.group-action:focus-visible {
|
|
opacity: 1;
|
|
}
|
|
|
|
.group-action:hover {
|
|
color: var(--ink);
|
|
}
|
|
|
|
.group-action.remove:hover {
|
|
color: var(--danger);
|
|
}
|
|
|
|
.folder-head .count {
|
|
margin-left: 0;
|
|
}
|
|
|
|
/* The group's own mark, in front of the chevron so the colours of the headings
|
|
line up with each other rather than with the projects underneath. */
|
|
.group-dot {
|
|
margin-left: var(--s2);
|
|
padding: 0;
|
|
box-shadow: 0 0 0 2px var(--surface-sunken);
|
|
transition: box-shadow var(--fast) var(--ease);
|
|
}
|
|
|
|
.group-dot:hover,
|
|
.group-dot:focus-visible {
|
|
box-shadow:
|
|
0 0 0 2px var(--surface-sunken),
|
|
0 0 0 3px var(--line-strong);
|
|
outline: none;
|
|
}
|
|
|
|
/* Projects inside a group are indented to the group's name, not to its dot:
|
|
the eye follows the text, and lining up under the dot leaves the names
|
|
looking a step short of where the heading starts. */
|
|
.folder > a {
|
|
padding-left: calc(var(--s2) + var(--s4));
|
|
}
|
|
|
|
/* The line is indented with them, so a drop between two projects in a group
|
|
reads as landing in the group rather than across the whole sidebar. */
|
|
.folder > a.sortable::before {
|
|
left: calc(var(--s2) + var(--s4));
|
|
}
|
|
|
|
.folder > .empty {
|
|
padding-left: calc(var(--s2) + var(--s4));
|
|
}
|
|
|
|
.swatches {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--s2);
|
|
padding: var(--s2) var(--s2) var(--s3);
|
|
}
|
|
|
|
.swatch {
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: var(--radius-full);
|
|
flex: none;
|
|
/* A ring in the ground colour, so the chosen one reads as selected without
|
|
the swatch changing size and shuffling the row as you move along it. */
|
|
box-shadow: 0 0 0 2px var(--surface-sunken);
|
|
transition: box-shadow var(--fast) var(--ease);
|
|
}
|
|
|
|
.swatch:hover,
|
|
.swatch:focus-visible {
|
|
box-shadow:
|
|
0 0 0 2px var(--surface-sunken),
|
|
0 0 0 3px var(--line-strong);
|
|
outline: none;
|
|
}
|
|
|
|
.swatch.chosen {
|
|
box-shadow:
|
|
0 0 0 2px var(--surface-sunken),
|
|
0 0 0 3px var(--ink);
|
|
}
|
|
|
|
.folder-head form {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
a {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--s3);
|
|
padding: var(--s2) var(--s2);
|
|
border-radius: var(--radius);
|
|
color: var(--ink-muted);
|
|
text-decoration: none;
|
|
font-size: var(--text-sm);
|
|
transition:
|
|
background var(--fast) var(--ease),
|
|
color var(--fast) var(--ease);
|
|
}
|
|
|
|
a:hover {
|
|
background: var(--surface);
|
|
color: var(--ink);
|
|
}
|
|
|
|
a.active {
|
|
background: var(--surface-raised);
|
|
color: var(--ink);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Only your own projects reorder. A shared one sits where its owner put it —
|
|
sort_order is a column on the project, not a preference per viewer. */
|
|
a.sortable {
|
|
position: relative;
|
|
}
|
|
|
|
a.sortable.dragging {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
/* A line in the gap rather than a highlighted row: the gap is the target. */
|
|
a.sortable::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: var(--s2);
|
|
right: var(--s2);
|
|
height: 2px;
|
|
background: var(--accent);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity var(--fast) var(--ease);
|
|
}
|
|
|
|
a.sortable.drop-above::before {
|
|
top: -1px;
|
|
opacity: 1;
|
|
}
|
|
|
|
a.sortable.drop-below::before {
|
|
bottom: -1px;
|
|
opacity: 1;
|
|
}
|
|
|
|
/* A task hovering over a project lights the whole row, where a project hovering
|
|
between two rows draws a line in the gap. Two different questions — "into
|
|
this one" and "between these two" — so two different marks. */
|
|
a.receiving {
|
|
background: var(--surface-raised);
|
|
box-shadow: inset 0 0 0 1px var(--accent);
|
|
color: var(--ink);
|
|
}
|
|
|
|
.dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: var(--radius-full);
|
|
background: var(--line-strong);
|
|
flex: none;
|
|
}
|
|
|
|
a.active .dot,
|
|
.dot.today {
|
|
background: var(--accent);
|
|
}
|
|
|
|
.count {
|
|
margin-left: auto;
|
|
font-size: var(--text-xs);
|
|
color: var(--ink-faint);
|
|
}
|
|
|
|
.empty {
|
|
margin: 0;
|
|
padding: var(--s2);
|
|
font-size: var(--text-sm);
|
|
color: var(--ink-faint);
|
|
}
|
|
|
|
form input {
|
|
width: 100%;
|
|
padding: var(--s2);
|
|
background: var(--surface);
|
|
border: 1px solid var(--accent);
|
|
border-radius: var(--radius);
|
|
font-size: var(--text-sm);
|
|
outline: none;
|
|
}
|
|
|
|
.foot {
|
|
margin-top: auto;
|
|
padding-top: var(--s4);
|
|
border-top: 1px solid var(--line);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--s2);
|
|
}
|
|
|
|
.settings svg {
|
|
width: 15px;
|
|
height: 15px;
|
|
flex: none;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 1.6;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.offline {
|
|
font-size: var(--text-xs);
|
|
color: var(--ink-faint);
|
|
padding: 0 var(--s2);
|
|
}
|
|
|
|
.user {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--s2);
|
|
padding: var(--s2);
|
|
border-radius: var(--radius);
|
|
font-size: var(--text-sm);
|
|
color: var(--ink-muted);
|
|
width: 100%;
|
|
}
|
|
|
|
.user:hover {
|
|
background: var(--surface);
|
|
}
|
|
|
|
.avatar {
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: var(--radius-full);
|
|
display: grid;
|
|
place-items: center;
|
|
font-size: var(--text-xs);
|
|
font-weight: 560;
|
|
color: #fff;
|
|
flex: none;
|
|
}
|
|
|
|
.user-name {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.signout {
|
|
margin-left: auto;
|
|
font-size: var(--text-xs);
|
|
color: var(--ink-faint);
|
|
opacity: 0;
|
|
transition: opacity var(--fast) var(--ease);
|
|
}
|
|
|
|
.user:hover .signout {
|
|
opacity: 1;
|
|
}
|
|
</style>
|