@axium/tasks 0.4.14 → 0.5.1

package/dist/common.d.ts

@@ -20,13 +20,21 @@ export declare const Task: z.ZodObject<{
 }, z.core.$strip>;
 export interface Task extends z.infer<typeof Task> {
 }
+export type TaskTreeStatus = 'completed' | 'pending' | null;
+export interface TaskTreeNode {
+    task: Task;
+    subtasks: TaskTreeNode[];
+    all: TaskTreeStatus;
+    completion: number;
+}
+export declare function buildTaskTree(tasks: Task[]): TaskTreeNode[];
 export declare const TaskListInit: z.ZodObject<{
     name: z.ZodString;
     description: z.ZodOptional<z.ZodNullable<z.ZodString>>;
 }, z.core.$strip>;
 export type TaskListInit = z.infer<typeof TaskListInit>;
 export declare const TaskListUpdate: z.ZodObject<{
-    all_completed: z.ZodOptional<z.ZodBoolean>;
+    action: z.ZodLiteral<"mark_all_pending" | "delete_completed">;
 }, z.core.$strip>;
 export type TaskListUpdate = z.infer<typeof TaskListUpdate>;
 export declare const TaskList: z.ZodObject<{
@@ -45,9 +53,39 @@ export declare const TaskList: z.ZodObject<{
         id: z.ZodUUID;
         created: z.ZodCoercedDate<unknown>;
     }, z.core.$strip>>>;
+    isShared: z.ZodBoolean;
+    acl: z.ZodArray<z.ZodObject<{
+        itemId: z.ZodUUID;
+        userId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;
+        role: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+        tag: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+        user: z.ZodOptional<z.ZodNullable<z.ZodObject<{
+            id: z.ZodUUID;
+            name: z.ZodString;
+            email: z.ZodOptional<z.ZodEmail>;
+            emailVerified: z.ZodOptional<z.ZodOptional<z.ZodNullable<z.ZodCoercedDate<unknown>>>>;
+            preferences: z.ZodOptional<z.ZodLazy<z.ZodObject<{
+                debug: z.ZodDefault<z.ZodBoolean>;
+            }, z.core.$strip>>>;
+            roles: z.ZodArray<z.ZodString>;
+            tags: z.ZodOptional<z.ZodArray<z.ZodString>>;
+            registeredAt: z.ZodCoercedDate<unknown>;
+            isAdmin: z.ZodOptional<z.ZodBoolean>;
+            isSuspended: z.ZodOptional<z.ZodBoolean>;
+        }, z.core.$strip>>>;
+        createdAt: z.ZodCoercedDate<unknown>;
+    }, z.core.$catchall<z.ZodBoolean>>>;
 }, z.core.$strip>;
 export interface TaskList extends z.infer<typeof TaskList> {
 }
+export declare const TasksPreferences: z.ZodObject<{
+    show_completed_subtasks: z.ZodDefault<z.ZodLiteral<"inline" | "mirror">>;
+}, z.core.$strip>;
+declare module '@axium/core/apps' {
+    interface $AppPreferences {
+        tasks: typeof TasksPreferences;
+    }
+}
 declare const TasksAPI: {
     readonly 'users/:id/task_lists': {
         readonly GET: z.ZodArray<z.ZodObject<{
@@ -66,6 +104,28 @@ declare const TasksAPI: {
                 id: z.ZodUUID;
                 created: z.ZodCoercedDate<unknown>;
             }, z.core.$strip>>>>;
+            isShared: z.ZodBoolean;
+            acl: z.ZodArray<z.ZodObject<{
+                itemId: z.ZodUUID;
+                userId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;
+                role: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+                tag: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+                user: z.ZodOptional<z.ZodNullable<z.ZodObject<{
+                    id: z.ZodUUID;
+                    name: z.ZodString;
+                    email: z.ZodOptional<z.ZodEmail>;
+                    emailVerified: z.ZodOptional<z.ZodOptional<z.ZodNullable<z.ZodCoercedDate<unknown>>>>;
+                    preferences: z.ZodOptional<z.ZodLazy<z.ZodObject<{
+                        debug: z.ZodDefault<z.ZodBoolean>;
+                    }, z.core.$strip>>>;
+                    roles: z.ZodArray<z.ZodString>;
+                    tags: z.ZodOptional<z.ZodArray<z.ZodString>>;
+                    registeredAt: z.ZodCoercedDate<unknown>;
+                    isAdmin: z.ZodOptional<z.ZodBoolean>;
+                    isSuspended: z.ZodOptional<z.ZodBoolean>;
+                }, z.core.$strip>>>;
+                createdAt: z.ZodCoercedDate<unknown>;
+            }, z.core.$catchall<z.ZodBoolean>>>;
         }, z.core.$strip>>;
         readonly PUT: readonly [z.ZodObject<{
             name: z.ZodString;
@@ -86,6 +146,28 @@ declare const TasksAPI: {
                 id: z.ZodUUID;
                 created: z.ZodCoercedDate<unknown>;
             }, z.core.$strip>>>;
+            isShared: z.ZodBoolean;
+            acl: z.ZodArray<z.ZodObject<{
+                itemId: z.ZodUUID;
+                userId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;
+                role: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+                tag: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+                user: z.ZodOptional<z.ZodNullable<z.ZodObject<{
+                    id: z.ZodUUID;
+                    name: z.ZodString;
+                    email: z.ZodOptional<z.ZodEmail>;
+                    emailVerified: z.ZodOptional<z.ZodOptional<z.ZodNullable<z.ZodCoercedDate<unknown>>>>;
+                    preferences: z.ZodOptional<z.ZodLazy<z.ZodObject<{
+                        debug: z.ZodDefault<z.ZodBoolean>;
+                    }, z.core.$strip>>>;
+                    roles: z.ZodArray<z.ZodString>;
+                    tags: z.ZodOptional<z.ZodArray<z.ZodString>>;
+                    registeredAt: z.ZodCoercedDate<unknown>;
+                    isAdmin: z.ZodOptional<z.ZodBoolean>;
+                    isSuspended: z.ZodOptional<z.ZodBoolean>;
+                }, z.core.$strip>>>;
+                createdAt: z.ZodCoercedDate<unknown>;
+            }, z.core.$catchall<z.ZodBoolean>>>;
         }, z.core.$strip>];
     };
     readonly 'task_lists/:id': {
@@ -105,6 +187,28 @@ declare const TasksAPI: {
                 id: z.ZodUUID;
                 created: z.ZodCoercedDate<unknown>;
             }, z.core.$strip>>>>;
+            isShared: z.ZodBoolean;
+            acl: z.ZodArray<z.ZodObject<{
+                itemId: z.ZodUUID;
+                userId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;
+                role: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+                tag: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+                user: z.ZodOptional<z.ZodNullable<z.ZodObject<{
+                    id: z.ZodUUID;
+                    name: z.ZodString;
+                    email: z.ZodOptional<z.ZodEmail>;
+                    emailVerified: z.ZodOptional<z.ZodOptional<z.ZodNullable<z.ZodCoercedDate<unknown>>>>;
+                    preferences: z.ZodOptional<z.ZodLazy<z.ZodObject<{
+                        debug: z.ZodDefault<z.ZodBoolean>;
+                    }, z.core.$strip>>>;
+                    roles: z.ZodArray<z.ZodString>;
+                    tags: z.ZodOptional<z.ZodArray<z.ZodString>>;
+                    registeredAt: z.ZodCoercedDate<unknown>;
+                    isAdmin: z.ZodOptional<z.ZodBoolean>;
+                    isSuspended: z.ZodOptional<z.ZodBoolean>;
+                }, z.core.$strip>>>;
+                createdAt: z.ZodCoercedDate<unknown>;
+            }, z.core.$catchall<z.ZodBoolean>>>;
         }, z.core.$strip>;
         readonly PATCH: readonly [z.ZodObject<{
             name: z.ZodString;
@@ -125,9 +229,31 @@ declare const TasksAPI: {
                 id: z.ZodUUID;
                 created: z.ZodCoercedDate<unknown>;
             }, z.core.$strip>>>;
+            isShared: z.ZodBoolean;
+            acl: z.ZodArray<z.ZodObject<{
+                itemId: z.ZodUUID;
+                userId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;
+                role: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+                tag: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+                user: z.ZodOptional<z.ZodNullable<z.ZodObject<{
+                    id: z.ZodUUID;
+                    name: z.ZodString;
+                    email: z.ZodOptional<z.ZodEmail>;
+                    emailVerified: z.ZodOptional<z.ZodOptional<z.ZodNullable<z.ZodCoercedDate<unknown>>>>;
+                    preferences: z.ZodOptional<z.ZodLazy<z.ZodObject<{
+                        debug: z.ZodDefault<z.ZodBoolean>;
+                    }, z.core.$strip>>>;
+                    roles: z.ZodArray<z.ZodString>;
+                    tags: z.ZodOptional<z.ZodArray<z.ZodString>>;
+                    registeredAt: z.ZodCoercedDate<unknown>;
+                    isAdmin: z.ZodOptional<z.ZodBoolean>;
+                    isSuspended: z.ZodOptional<z.ZodBoolean>;
+                }, z.core.$strip>>>;
+                createdAt: z.ZodCoercedDate<unknown>;
+            }, z.core.$catchall<z.ZodBoolean>>>;
         }, z.core.$strip>];
         readonly POST: readonly [z.ZodObject<{
-            all_completed: z.ZodOptional<z.ZodBoolean>;
+            action: z.ZodLiteral<"mark_all_pending" | "delete_completed">;
         }, z.core.$strip>, z.ZodUnknown];
         readonly PUT: readonly [z.ZodObject<{
             summary: z.ZodOptional<z.ZodString>;
@@ -161,6 +287,28 @@ declare const TasksAPI: {
                 id: z.ZodUUID;
                 created: z.ZodCoercedDate<unknown>;
             }, z.core.$strip>>>;
+            isShared: z.ZodBoolean;
+            acl: z.ZodArray<z.ZodObject<{
+                itemId: z.ZodUUID;
+                userId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;
+                role: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+                tag: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+                user: z.ZodOptional<z.ZodNullable<z.ZodObject<{
+                    id: z.ZodUUID;
+                    name: z.ZodString;
+                    email: z.ZodOptional<z.ZodEmail>;
+                    emailVerified: z.ZodOptional<z.ZodOptional<z.ZodNullable<z.ZodCoercedDate<unknown>>>>;
+                    preferences: z.ZodOptional<z.ZodLazy<z.ZodObject<{
+                        debug: z.ZodDefault<z.ZodBoolean>;
+                    }, z.core.$strip>>>;
+                    roles: z.ZodArray<z.ZodString>;
+                    tags: z.ZodOptional<z.ZodArray<z.ZodString>>;
+                    registeredAt: z.ZodCoercedDate<unknown>;
+                    isAdmin: z.ZodOptional<z.ZodBoolean>;
+                    isSuspended: z.ZodOptional<z.ZodBoolean>;
+                }, z.core.$strip>>>;
+                createdAt: z.ZodCoercedDate<unknown>;
+            }, z.core.$catchall<z.ZodBoolean>>>;
         }, z.core.$strip>;
     };
     readonly 'tasks/:id': {

package/dist/common.js

@@ -1,4 +1,5 @@
-import { $API } from '@axium/core';
+import { $API, AccessControl, appPreferences } from '@axium/core';
+import { zKeys } from '@axium/core/locales';
 import * as z from 'zod';
 export const TaskInit = z.object({
     summary: z.string().max(100).optional(),
@@ -12,19 +13,59 @@ export const Task = TaskInit.extend({
     id: z.uuid(),
     created: z.coerce.date(),
 });
+function computeStats(node, force = false) {
+    if (node.all && node.completion !== undefined && !force)
+        return;
+    let all = node.task.completed ? 'completed' : 'pending', completion = node.subtasks.length ? 0 : node.task.completed ? 1 : 0;
+    for (const sub of node.subtasks) {
+        computeStats(sub, force);
+        if (!sub.all || sub.all !== all)
+            all = null;
+        completion += sub.completion / node.subtasks.length;
+    }
+    node.all = all;
+    node.completion = completion;
+}
+export function buildTaskTree(tasks) {
+    const nodes = new Map();
+    const roots = [];
+    for (const task of tasks)
+        nodes.set(task.id, { task, subtasks: [], all: null, completion: 0 });
+    for (const task of tasks) {
+        const node = nodes.get(task.id);
+        if (task.parentId)
+            nodes.get(task.parentId)?.subtasks.push(node);
+        else
+            roots.push(node);
+    }
+    for (const node of roots)
+        computeStats(node);
+    return roots;
+}
 export const TaskListInit = z.object({
     name: z.string().min(1).max(50),
     description: z.string().max(500).nullish(),
 });
 export const TaskListUpdate = z.object({
-    all_completed: z.boolean().optional(),
+    action: z.literal(['mark_all_pending', 'delete_completed']),
 });
 export const TaskList = TaskListInit.extend({
     id: z.uuid(),
     userId: z.uuid(),
     created: z.coerce.date(),
     tasks: Task.array().optional(),
+    isShared: z.boolean(),
+    acl: AccessControl.array(),
 });
+export const TasksPreferences = z
+    .object({
+    show_completed_subtasks: z
+        .literal(['inline', 'mirror'])
+        .default('inline')
+        .register(zKeys, { prefix: 'tasks.show_completed_subtasks' }),
+})
+    .register(zKeys, { prefix: 'tasks.preferences' });
+appPreferences.set('tasks', TasksPreferences);
 const TasksAPI = {
     'users/:id/task_lists': {
         GET: TaskList.required({ tasks: true }).array(),

package/dist/server.js

@@ -1,3 +1,4 @@
+import * as acl from '@axium/server/acl';
 import { authRequestForItem, checkAuthForUser } from '@axium/server/auth';
 import { database } from '@axium/server/database';
 import { parseBody, withError } from '@axium/server/requests';
@@ -9,14 +10,17 @@ addRoute({
     path: '/api/users/:id/task_lists',
     params: { id: z.uuid() },
     async GET(request, { id: userId }) {
-        await checkAuthForUser(request, userId);
+        const { user } = await checkAuthForUser(request, userId);
+        const shared = acl.existsIn('task_lists', user, { alias: 'list' });
         const lists = await database
-            .selectFrom('task_lists')
-            .selectAll()
-            .select(eb => jsonArrayFrom(eb.selectFrom('tasks').selectAll().whereRef('tasks.listId', '=', 'task_lists.id'))
+            .selectFrom('task_lists as list')
+            .selectAll('list')
+            .select(eb => jsonArrayFrom(eb.selectFrom('tasks').selectAll().whereRef('tasks.listId', '=', 'list.id'))
             .$castTo()
             .as('tasks'))
-            .where('userId', '=', userId)
+            .select(acl.from('task_lists', { alias: 'list' }))
+            .select(eb => shared(eb).$castTo().as('isShared'))
+            .where(eb => eb.or([eb('userId', '=', userId), shared(eb)]))
             .execute()
             .catch(withError('Could not get task lists'));
         return lists;
@@ -24,71 +28,79 @@ addRoute({
     async PUT(request, { id: userId }) {
         const init = await parseBody(request, TaskListInit);
         await checkAuthForUser(request, userId);
-        return await database
+        return Object.assign(await database
             .insertInto('task_lists')
             .values({ ...init, userId })
             .returningAll()
             .executeTakeFirstOrThrow()
-            .catch(withError('Could not create task list'));
+            .catch(withError('Could not create task list')), { isShared: false, acl: [] });
     },
 });
 addRoute({
     path: '/api/task_lists/:id',
     params: { id: z.uuid() },
     async GET(request, { id }) {
-        const { item } = await authRequestForItem(request, 'task_lists', id, { read: true });
+        const { item, fromACL } = await authRequestForItem(request, 'task_lists', id, { read: true });
         const tasks = await database
             .selectFrom('tasks')
             .selectAll()
             .where('listId', '=', id)
             .execute()
             .catch(withError('Could not get tasks'));
-        return Object.assign(item, { tasks });
+        return Object.assign(item, { tasks, isShared: fromACL });
     },
     async PUT(request, { id: listId }) {
         const init = await parseBody(request, TaskInit.omit({ listId: true }));
-        await authRequestForItem(request, 'task_lists', listId, { edit: true });
-        return await database
+        const { fromACL } = await authRequestForItem(request, 'task_lists', listId, { edit: true });
+        return Object.assign(await database
             .insertInto('tasks')
             .values({ summary: '', ...init, listId })
             .returningAll()
             .executeTakeFirstOrThrow()
-            .catch(withError('Could not update task list'));
+            .catch(withError('Could not update task list')), { isShared: fromACL });
     },
     async PATCH(request, { id }) {
-        await authRequestForItem(request, 'task_lists', id, { edit: true });
         const init = await parseBody(request, TaskListInit);
-        return await database
+        const { item, fromACL } = await authRequestForItem(request, 'task_lists', id, { edit: true });
+        return Object.assign(await database
             .updateTable('task_lists')
             .set(init)
             .where('id', '=', id)
             .returningAll()
             .executeTakeFirstOrThrow()
-            .catch(withError('Could not update task list'));
+            .catch(withError('Could not update task list')), { isShared: fromACL, acl: item.acl });
     },
     async POST(request, { id }) {
         const body = await parseBody(request, TaskListUpdate);
         await authRequestForItem(request, 'task_lists', id, { edit: true });
-        if (typeof body.all_completed == 'boolean') {
-            await database
-                .updateTable('tasks')
-                .set('completed', body.all_completed)
-                .where('listId', '=', id)
-                .where('completed', '=', !body.all_completed)
-                .returningAll()
-                .executeTakeFirstOrThrow()
-                .catch(withError('Could not update task list'));
+        switch (body.action) {
+            case 'mark_all_pending':
+                await database
+                    .updateTable('tasks')
+                    .set('completed', false)
+                    .where('listId', '=', id)
+                    .executeTakeFirstOrThrow()
+                    .catch(withError('Could not update task list'));
+                break;
+            case 'delete_completed':
+                await database
+                    .deleteFrom('tasks')
+                    .where('listId', '=', id)
+                    .where('completed', '=', true)
+                    .executeTakeFirstOrThrow()
+                    .catch(withError('Could not update task list'));
+                break;
         }
         return {};
     },
     async DELETE(request, { id }) {
-        await authRequestForItem(request, 'task_lists', id, { manage: true });
-        return await database
+        const { item, fromACL } = await authRequestForItem(request, 'task_lists', id, { manage: true });
+        return Object.assign(await database
             .deleteFrom('task_lists')
             .where('id', '=', id)
             .returningAll()
             .executeTakeFirstOrThrow()
-            .catch(withError('Could not delete task list'));
+            .catch(withError('Could not delete task list')), { isShared: fromACL, acl: item.acl });
     },
 });
 addRoute({

package/lib/TaskList.svelte

@@ -1,22 +1,33 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
-	import { copy } from '@axium/client/gui';
-	import type { UserPublic } from '@axium/core';
+	import { fetchAPI, getAppPreferences, text } from '@axium/client';
 	import { AccessControlDialog, Icon, Popover } from '@axium/client/components';
-	import { fetchAPI, text } from '@axium/client';
-	import type { Task, TaskList } from '@axium/tasks/common';
+	import { copy } from '@axium/client/gui';
+	import { toastStatus } from '@axium/client/toast';
+	import { buildTaskTree, type Task, type TaskList, type TaskTreeNode } from '@axium/tasks/common';
 	import type { WithRequired } from 'utilium';
 	import { download } from 'utilium/dom';
-	import { toastStatus } from '@axium/client/toast';
 
 	let {
 		list = $bindable(),
 		lists = $bindable(),
-		user,
-	}: { list: WithRequired<TaskList, 'tasks'>; lists?: WithRequired<TaskList, 'tasks'>[]; user?: UserPublic } = $props();
+	}: {
+		list: WithRequired<TaskList, 'tasks'>;
+		lists?: WithRequired<TaskList, 'tasks'>[];
+	} = $props();
+
+	const { user } = page.data.session;
+
+	let tasks = $state(list.tasks),
+		open = $state(false);
+
+	const preferences = await getAppPreferences(user.id, 'tasks');
+	const showCompletedInline = preferences.show_completed_subtasks == 'inline';
 
-	let tasks = $state(list.tasks);
+	const tree = $derived(buildTaskTree(tasks));
+
+	const completed: TaskTreeNode[] = $derived(tree.filter(node => node.all == 'completed'));
 
 	function exportTask(task: Task): string {
 		const children = tasks
@@ -31,22 +42,42 @@
 	let acl = $state<HTMLDialogElement>();
 </script>
 
-{#snippet task_tree(task: Task)}
-	<div class="task">
-		<label for="task-completed#{task.id}" style:cursor="pointer">
-			<Icon i="regular/circle{task.completed ? '-check' : ''}" --size="20px" />
-		</label>
-		<input
-			type="checkbox"
-			name="completed"
-			bind:checked={task.completed}
-			id="task-completed#{task.id}"
-			style:display="none"
-			oninput={e => {
-				task.completed = e.currentTarget.checked;
-				fetchAPI('PATCH', 'tasks/:id', { completed: task.completed }, task.id);
-			}}
-		/>
+{#snippet task_checkbox(node: TaskTreeNode, isMirror: boolean = false)}
+	{@const task = node.task}
+	{@const directCompletion = node.subtasks.length ? node.subtasks.filter(s => s.task.completed).length / node.subtasks.length : 0}
+
+	<span
+		class="task-checkbox"
+		class:has-progress={node.subtasks.length && node.completion}
+		class:mirror-marker={isMirror}
+		style:--completion="{node.completion * 100}%"
+		style:--direct-completion="{directCompletion * 100}%"
+	>
+		{#if isMirror}
+			<Icon i="regular/circle{task.completed ? '-check' : ''}" --size="1.25em" />
+		{:else}
+			<label for="task-completed#{task.id}" style:cursor="pointer" style:display="contents">
+				<Icon i="regular/circle{task.completed ? '-check' : ''}" --size="1.25em" />
+			</label>
+			<input
+				type="checkbox"
+				name="completed"
+				bind:checked={task.completed}
+				id="task-completed#{task.id}"
+				style:display="none"
+				oninput={e => {
+					task.completed = e.currentTarget.checked;
+					fetchAPI('PATCH', 'tasks/:id', { completed: task.completed }, task.id);
+				}}
+			/>
+		{/if}
+	</span>
+{/snippet}
+
+{#snippet task_tree(node: TaskTreeNode, depth: number = 0, isCompletedMirror: boolean = false)}
+	{@const task = node.task}
+	<div class="task" style:margin-left="{depth * 1.75}em">
+		{@render task_checkbox(node, !showCompletedInline && isCompletedMirror != task.completed)}
 		<input
 			type="text"
 			name="summary"
@@ -58,6 +89,15 @@
 			}}
 		/>
 		<Popover showToggle="hover">
+			<div
+				class="menu-item"
+				onclick={() => {
+					fetchAPI('PUT', 'task_lists/:id', { summary: '', parentId: task.id }, list.id).then(t => tasks.push(t));
+				}}
+			>
+				<Icon i="arrow-turn-down-right" />
+				<span>{text('tasks.add_subtask')}</span>
+			</div>
 			<div
 				class="menu-item"
 				onclick={() =>
@@ -71,7 +111,7 @@
 				<Icon i="trash" />
 				<span>{text('generic.delete')}</span>
 			</div>
-			{#if page.data.session?.user.preferences.debug}
+			{#if user.preferences.debug}
 				<div class="menu-item" onclick={() => copy('text/plain', task.id)}>
 					<Icon i="hashtag" --size="14px" />
 					<span>{text('tasks.copy_id')}</span>
@@ -79,10 +119,29 @@
 			{/if}
 		</Popover>
 	</div>
-
-	{#each tasks.filter(task => task.parentId == task.id) as task (task.id)}
-		{@render task_tree(task)}
+	{#each node.subtasks as sub (sub.task.id)}
+		{#if sub.all != (isCompletedMirror ? 'pending' : 'completed')}
+			{@render task_tree(sub, depth + 1, isCompletedMirror)}
+		{/if}
 	{/each}
+	{@const completedSubs = node.subtasks.filter(sub => sub.all == 'completed')}
+	{#if showCompletedInline && completedSubs.length}
+		{#snippet inside()}
+			{#each completedSubs as sub (sub.task.id)}
+				{@render task_tree(sub, depth + 1, isCompletedMirror)}
+			{/each}
+		{/snippet}
+		{#if node.all == 'completed'}
+			{@render inside()}
+		{:else}
+			<details>
+				<summary style:margin-left="{depth * 1.75 + 1}em" class="completed-subtasks subtle"
+					>{text('tasks.completed_heading', { count: completedSubs.length })}</summary
+				>
+				{@render inside()}
+			</details>
+		{/if}
+	{/if}
 {/snippet}
 
 <div class="task-list">
@@ -135,31 +194,32 @@
 				<Icon i="user-group" />
 				<span>{text('tasks.share_list')}</span>
 			</div>
-			{#if tasks.some(t => !t.completed)}
+			{#if tasks.some(t => t.completed)}
 				<div
 					class="menu-item"
 					onclick={() => {
-						for (const task of tasks) task.completed = true;
+						for (const task of tasks) task.completed = false;
 						toastStatus(
-							fetchAPI('POST', 'task_lists/:id', { all_completed: true }, list.id),
-							text('tasks.toast_all_completed')
+							fetchAPI('POST', 'task_lists/:id', { action: 'mark_all_pending' }, list.id),
+							text('tasks.toast_all_pending')
 						);
 					}}
 				>
-					<Icon i="regular/circle-check" />
-					<span>{text('tasks.mark_all_complete')}</span>
+					<Icon i="regular/circle" />
+					<span>{text('tasks.mark_all_pending')}</span>
 				</div>
-			{/if}
-			{#if tasks.some(t => t.completed)}
 				<div
 					class="menu-item"
 					onclick={() => {
-						for (const task of tasks) task.completed = false;
-						toastStatus(fetchAPI('POST', 'task_lists/:id', { all_completed: false }, list.id), text('tasks.toast_all_pending'));
+						tasks = tasks.filter(task => !task.completed);
+						toastStatus(
+							fetchAPI('POST', 'task_lists/:id', { action: 'delete_completed' }, list.id),
+							text('tasks.toast_delete_completed')
+						);
 					}}
 				>
-					<Icon i="regular/circle" />
-					<span>{text('tasks.mark_all_pending')}</span>
+					<Icon i="regular/trash-can-check" />
+					<span>{text('tasks.delete_completed')}</span>
 				</div>
 			{/if}
 			<div class="menu-item" onclick={() => copy('text/plain', `${location.origin}/tasks/${list.id}`)}>
@@ -167,12 +227,12 @@
 				<span>{text('tasks.copy_link')}</span>
 			</div>
 			{#if lists}
-				<div class="menu-item" onclick={() => open(`/tasks/${list.id}`)}>
+				<div class="menu-item" onclick={() => window.open(`/tasks/${list.id}`)}>
 					<Icon i="arrow-up-right-from-square" />
 					<span>{text('tasks.open_new_tab')}</span>
 				</div>
 			{/if}
-			{#if page.data.session?.user.preferences.debug}
+			{#if user.preferences.debug}
 				<div class="menu-item" onclick={() => copy('text/plain', list.id)}>
 					<Icon i="hashtag" --size="14px" />
 					<span>{text('tasks.copy_id')}</span>
@@ -187,18 +247,31 @@
 			<span>{text('tasks.new_task')}</span>
 		</button>
 	</div>
-	<h4>{text('tasks.pending_heading')}</h4>
-	{#each tasks.filter(task => !task.parentId && !task.completed) as task (task.id)}
-		{@render task_tree(task)}
+
+	{#each tree.filter(node => node.all != 'completed') as node (node.task.id)}
+		{@render task_tree(node)}
 	{:else}
 		<i class="subtle">{text('tasks.pending_empty')}</i>
 	{/each}
-	<h4>{text('tasks.completed_heading')}</h4>
-	{#each tasks.filter(task => !task.parentId && task.completed) as task (task.id)}
-		{@render task_tree(task)}
-	{:else}
-		<i class="subtle">{text('tasks.completed_empty')}</i>
-	{/each}
+
+	{#if completed.length || (!showCompletedInline && tasks.some(t => t.completed))}
+		<details bind:open>
+			<summary
+				>{text('tasks.completed_heading', {
+					count: (showCompletedInline ? completed : tasks.filter(t => t.completed)).length,
+				})}</summary
+			>
+			{#if showCompletedInline}
+				{#each completed as node (node.task.id)}
+					{@render task_tree(node)}
+				{/each}
+			{:else}
+				{#each tree.filter(node => node.all != 'pending') as node (node.task.id)}
+					{@render task_tree(node, 0, true)}
+				{/each}
+			{/if}
+		</details>
+	{/if}
 </div>
 
 <style>
@@ -209,12 +282,39 @@
 
 	.task {
 		display: grid;
-		grid-template-columns: 1em 1fr 2em;
+		grid-template-columns: 1.25em 1fr 2em;
 		align-items: center;
-		gap: 1em;
+		gap: 0.5em;
+
+		.task-checkbox {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			position: relative;
+			border-radius: 50%;
+
+			&.mirror-marker {
+				opacity: 69%;
+			}
+
+			&.has-progress::before {
+				content: '';
+				position: absolute;
+				inset: 2px;
+				border-radius: 50%;
+				background: conic-gradient(
+					var(--fg-strong) 0% var(--completion),
+					var(--fg-accent) 0% var(--direct-completion),
+					transparent 0% 100%
+				);
+				opacity: 0.65;
+				z-index: 0;
+				pointer-events: none;
+			}
+		}
 
-		.task {
-			padding-left: 1em;
+		input {
+			padding: 0.125em 0.25em;
 		}
 	}
 
@@ -239,4 +339,12 @@
 			padding: 0;
 		}
 	}
+
+	summary {
+		margin-bottom: 0.5em;
+	}
+
+	summary:not(.completed-subtasks) {
+		font-weight: bold;
+	}
 </style>

package/locales/en.json

@@ -11,21 +11,27 @@
 			"name": "Name",
 			"description": "Description <span class='subtle'>(optional)</span>"
 		},
+		"add_subtask": "Add Subtask",
 		"copy_id": "Copy ID",
 		"copy_link": "Copy Link",
 		"export_list": "Export",
 		"share_list": "Share",
-		"mark_all_complete": "Complete All",
-		"mark_all_pending": "Un-complete All",
+		"mark_all_pending": "Un-complete all",
+		"delete_completed": "Delete completed",
 		"open_new_tab": "Open in New Tab",
 		"new_task": "Add Task",
-		"pending_heading": "Pending",
 		"pending_empty": "No pending tasks.",
-		"completed_heading": "Completed",
-		"completed_empty": "No completed tasks.",
-		"toast_all_completed": "All tasks marked as complete",
+		"completed_heading": "Completed ({count})",
 		"toast_all_pending": "All tasks marked as pending",
 		"toast_task_deleted": "Task deleted",
-		"toast_list_deleted": "Task list deleted"
+		"toast_list_deleted": "Task list deleted",
+		"toast_delete_completed": "Removed completed tasks",
+		"preferences": {
+			"show_completed_subtasks": "Show completed subtasks"
+		},
+		"show_completed_subtasks": {
+			"inline": "Inline with pending",
+			"mirror": "In completed section"
+		}
 	}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/tasks",
-	"version": "0.4.14",
+	"version": "0.5.1",
 	"author": "James Prevett <axium@jamespre.dev>",
 	"description": "Tasks for Axium",
 	"funding": {
@@ -36,7 +36,7 @@
 		"build": "tsc"
 	},
 	"peerDependencies": {
-		"@axium/client": ">=0.20.0",
+		"@axium/client": ">=0.27.0",
 		"@axium/core": ">=0.23.0",
 		"@axium/server": ">=0.35.0",
 		"@sveltejs/kit": "^2.27.3",

package/routes/tasks/+layout.ts

@@ -1,7 +1,9 @@
 import { getCurrentSession } from '@axium/client/user';
 import type { Session, UserPublic } from '@axium/core';
 
-export async function load({ parent, url }) {
+export const ssr = false;
+
+export async function load({ parent }) {
 	let { session }: { session?: (Session & { user: UserPublic }) | null } = await parent();
 
 	session ||= await getCurrentSession().catch(() => null);

package/routes/tasks/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { FormDialog, Icon } from '@axium/client/components';
+	import { FormDialog, Icon, AppPreferencesDialog } from '@axium/client/components';
 	import { fetchAPI, text } from '@axium/client';
-	import { TaskListInit } from '@axium/tasks/common';
+	import { TaskListInit, TasksPreferences } from '@axium/tasks/common';
 	import { TaskList } from '@axium/tasks/components';
 
 	const { data } = $props();
@@ -17,14 +17,18 @@
 <div id="tasks-main">
 	<h1>{text('app_name.tasks')}</h1>
 
-	<button id="create-task-list" class="icon-text mobile-float-right" onclick={() => dialog!.showModal()}>
-		<Icon i="plus" />
-		<span>{text('tasks.new_list')}</span>
-	</button>
+	<div>
+		<AppPreferencesDialog appId="tasks" userId={data.session.userId} schema={TasksPreferences} />
+
+		<button id="create-task-list" class="icon-text mobile-float-right" onclick={() => dialog!.showModal()}>
+			<Icon i="plus" />
+			<span>{text('tasks.new_list')}</span>
+		</button>
+	</div>
 
 	<div class="lists-container">
 		{#each lists as list}
-			<TaskList {list} bind:lists user={data.session?.user} />
+			<TaskList {list} bind:lists />
 		{/each}
 	</div>
 </div>
@@ -71,6 +75,7 @@
 	@media (width < 700px) {
 		#tasks-main {
 			padding: 1em;
+			padding-bottom: 5em;
 			align-content: center;
 		}
 

package/routes/tasks/+page.ts

@@ -10,5 +10,5 @@ export async function load({ parent }) {
 
 	const lists = await fetchAPI('GET', 'users/:id/task_lists', {}, session.userId);
 
-	return { lists };
+	return { session, lists };
 }