@axium/tasks 0.5.7 → 0.5.9

package/db-scripts/add_task_list_sync_event.sql

@@ -0,0 +1,15 @@
+CREATE OR REPLACE FUNCTION add_task_list_sync_event()
+RETURNS TRIGGER AS $$
+BEGIN
+    IF (TG_OP = 'DELETE') THEN
+        INSERT INTO sync_events (type, id, op)
+        VALUES ('task_lists', OLD."listId", 'u');
+        RETURN OLD;
+    END IF;
+
+    INSERT INTO sync_events (type, id, op)
+    VALUES ('task_lists', NEW."listId", 'u');
+
+    RETURN NEW;
+END;
+$$ LANGUAGE plpgsql;

package/db.json

@@ -86,6 +86,22 @@
 					}
 				}
 			}
+		},
+		{
+			"delta": true,
+			"alter_tables": {
+				"tasks": {
+					"add_triggers": {
+						"sync_events": {
+							"forEach": "row",
+							"when": "after",
+							"events": ["insert", "update", "delete"],
+							"execute": "add_task_list_sync_event"
+						}
+					}
+				}
+			},
+			"scripts": [{ "when": "before", "path": "db-scripts/add_task_list_sync_event.sql" }]
 		}
 	],
 	"wipe": ["task_lists", "tasks", "acl.task_lists"],

package/dist/common.d.ts

@@ -67,6 +67,7 @@ export declare const TaskList: z.ZodObject<{
             emailVerified: z.ZodOptional<z.ZodOptional<z.ZodNullable<z.ZodCoercedDate<unknown>>>>;
             preferences: z.ZodOptional<z.ZodLazy<z.ZodObject<{
                 debug: z.ZodDefault<z.ZodBoolean>;
+                theme: z.ZodDefault<z.ZodLiteral<"default" | "light" | "forest" | "midnight" | "beach" | "cherry" | "volcano">>;
             }, z.core.$strip>>>;
             roles: z.ZodArray<z.ZodString>;
             tags: z.ZodOptional<z.ZodArray<z.ZodString>>;
@@ -119,6 +120,7 @@ declare const TasksAPI: {
                     emailVerified: z.ZodOptional<z.ZodOptional<z.ZodNullable<z.ZodCoercedDate<unknown>>>>;
                     preferences: z.ZodOptional<z.ZodLazy<z.ZodObject<{
                         debug: z.ZodDefault<z.ZodBoolean>;
+                        theme: z.ZodDefault<z.ZodLiteral<"default" | "light" | "forest" | "midnight" | "beach" | "cherry" | "volcano">>;
                     }, z.core.$strip>>>;
                     roles: z.ZodArray<z.ZodString>;
                     tags: z.ZodOptional<z.ZodArray<z.ZodString>>;
@@ -162,6 +164,7 @@ declare const TasksAPI: {
                     emailVerified: z.ZodOptional<z.ZodOptional<z.ZodNullable<z.ZodCoercedDate<unknown>>>>;
                     preferences: z.ZodOptional<z.ZodLazy<z.ZodObject<{
                         debug: z.ZodDefault<z.ZodBoolean>;
+                        theme: z.ZodDefault<z.ZodLiteral<"default" | "light" | "forest" | "midnight" | "beach" | "cherry" | "volcano">>;
                     }, z.core.$strip>>>;
                     roles: z.ZodArray<z.ZodString>;
                     tags: z.ZodOptional<z.ZodArray<z.ZodString>>;
@@ -204,6 +207,7 @@ declare const TasksAPI: {
                     emailVerified: z.ZodOptional<z.ZodOptional<z.ZodNullable<z.ZodCoercedDate<unknown>>>>;
                     preferences: z.ZodOptional<z.ZodLazy<z.ZodObject<{
                         debug: z.ZodDefault<z.ZodBoolean>;
+                        theme: z.ZodDefault<z.ZodLiteral<"default" | "light" | "forest" | "midnight" | "beach" | "cherry" | "volcano">>;
                     }, z.core.$strip>>>;
                     roles: z.ZodArray<z.ZodString>;
                     tags: z.ZodOptional<z.ZodArray<z.ZodString>>;
@@ -247,6 +251,7 @@ declare const TasksAPI: {
                     emailVerified: z.ZodOptional<z.ZodOptional<z.ZodNullable<z.ZodCoercedDate<unknown>>>>;
                     preferences: z.ZodOptional<z.ZodLazy<z.ZodObject<{
                         debug: z.ZodDefault<z.ZodBoolean>;
+                        theme: z.ZodDefault<z.ZodLiteral<"default" | "light" | "forest" | "midnight" | "beach" | "cherry" | "volcano">>;
                     }, z.core.$strip>>>;
                     roles: z.ZodArray<z.ZodString>;
                     tags: z.ZodOptional<z.ZodArray<z.ZodString>>;
@@ -306,6 +311,7 @@ declare const TasksAPI: {
                     emailVerified: z.ZodOptional<z.ZodOptional<z.ZodNullable<z.ZodCoercedDate<unknown>>>>;
                     preferences: z.ZodOptional<z.ZodLazy<z.ZodObject<{
                         debug: z.ZodDefault<z.ZodBoolean>;
+                        theme: z.ZodDefault<z.ZodLiteral<"default" | "light" | "forest" | "midnight" | "beach" | "cherry" | "volcano">>;
                     }, z.core.$strip>>>;
                     roles: z.ZodArray<z.ZodString>;
                     tags: z.ZodOptional<z.ZodArray<z.ZodString>>;

package/lib/TaskList.svelte

@@ -2,8 +2,9 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 	import { fetchAPI, preferences, text } from '@axium/client';
+	import { contextMenu, dynamicRows, type ContextMenuItem } from '@axium/client/attachments';
 	import { AccessControlDialog, Icon, Popover } from '@axium/client/components';
-	import { copy } from '@axium/client/gui';
+	import { copy } from '@axium/client/web';
 	import { toastStatus } from '@axium/client/toast';
 	import { buildTaskTree, type Task, type TaskList, type TaskTreeNode } from '@axium/tasks/common';
 	import type { WithRequired } from 'utilium';
@@ -19,8 +20,9 @@
 
 	const { user } = page.data.session || {};
 
-	let tasks = $state(list.tasks),
-		open = $state(false);
+	const tasks = $derived(list.tasks);
+
+	let open = $state(false);
 
 	const { show_completed_subtasks } = user ? await preferences.get(user.id, 'tasks') : {};
 	const showCompletedInline = show_completed_subtasks == 'inline';
@@ -39,6 +41,30 @@
 		return `[${task.completed ? 'x' : ' '}] ${task.summary}` + children;
 	}
 
+	function taskActions(task: Task): WithRequired<ContextMenuItem, 'i'>[] {
+		const actions: WithRequired<ContextMenuItem, 'i'>[] = [
+			{
+				i: 'arrow-turn-down-right',
+				text: text('tasks.add_subtask'),
+				action: () => fetchAPI('PUT', 'task_lists/:id', { summary: '', parentId: task.id }, list.id).then(t => tasks.push(t)),
+			},
+			{
+				i: 'trash',
+				text: text('generic.delete'),
+				action: () =>
+					toastStatus(
+						fetchAPI('DELETE', 'tasks/:id', {}, task.id).then(() => {
+							tasks.splice(tasks.indexOf(task), 1);
+						}),
+						text('tasks.toast_task_deleted')
+					),
+			},
+		];
+		if (user?.preferences?.debug)
+			actions.push({ i: 'hashtag', text: text('tasks.copy_id'), action: () => copy('text/plain', task.id) });
+		return actions;
+	}
+
 	let acl = $state<HTMLDialogElement>();
 </script>
 
@@ -75,48 +101,30 @@
 {/snippet}
 
 {#snippet task_tree(node: TaskTreeNode, depth: number = 0, isCompletedMirror: boolean = false)}
-	{const task = $derived(node.task)}
-	<div class="task" style:margin-left="{depth * 1.75}em">
+	{const task = $derived(node.task),
+		actions = $derived(taskActions(task))}
+	<div class="task" style:margin-left="{depth * 1.75}em" {@attach contextMenu(...actions)}>
 		{@render task_checkbox(node, !showCompletedInline && isCompletedMirror != task.completed)}
-		<input
-			type="text"
+		<textarea
 			name="summary"
 			class="editable-text"
+			rows="1"
 			bind:value={task.summary}
+			onkeydown={e => {
+				if (e.key == 'Enter' && !e.isComposing) e.preventDefault();
+			}}
 			oninput={e => {
-				task.summary = e.currentTarget.value;
+				task.summary = e.currentTarget.value.replaceAll('\n', ' ');
 				fetchAPI('PATCH', 'tasks/:id', { summary: task.summary }, task.id);
 			}}
-		/>
+			{@attach dynamicRows(40, 1)}></textarea>
 		<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={() =>
-					toastStatus(
-						fetchAPI('DELETE', 'tasks/:id', {}, task.id).then(() => {
-							tasks.splice(tasks.indexOf(task), 1);
-						}),
-						text('tasks.toast_task_deleted')
-					)}
-			>
-				<Icon i="trash" />
-				<span>{text('generic.delete')}</span>
-			</div>
-			{#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>
+			{#each actions as item}
+				<div class="menu-item" onclick={item.action}>
+					<Icon i={item.i} />
+					<span>{item.text}</span>
 				</div>
-			{/if}
+			{/each}
 		</Popover>
 	</div>
 	{#each node.subtasks as sub (sub.task.id)}
@@ -211,7 +219,7 @@
 				<div
 					class="menu-item"
 					onclick={() => {
-						tasks = tasks.filter(task => !task.completed);
+						list.tasks = tasks.filter(task => !task.completed);
 						toastStatus(
 							fetchAPI('POST', 'task_lists/:id', { action: 'delete_completed' }, list.id),
 							text('tasks.toast_delete_completed')
@@ -313,8 +321,9 @@
 			}
 		}
 
-		input {
+		textarea {
 			padding: 0.125em 0.25em;
+			width: 100%;
 		}
 	}
 

package/lib/tsconfig.json

@@ -7,7 +7,7 @@
 		"moduleResolution": "Bundler",
 		"types": ["@sveltejs/kit"]
 	},
-	"include": ["**/*.svelte", "**/*.ts"],
+	"include": ["**/*.svelte", "**/*.ts", "../src/.*.ts", "../../client/dist/.*.ts"],
 	"exclude": [],
 	"references": [{ "path": ".." }]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/tasks",
-	"version": "0.5.7",
+	"version": "0.5.9",
 	"author": "James Prevett <axium@jamespre.dev>",
 	"description": "Tasks for Axium",
 	"funding": {
@@ -26,6 +26,7 @@
 		"./components/*": "./lib/*.svelte"
 	},
 	"files": [
+		"db-scripts",
 		"dist",
 		"lib",
 		"routes",
@@ -36,9 +37,9 @@
 		"build": "tsc"
 	},
 	"peerDependencies": {
-		"@axium/client": ">=0.27.0",
-		"@axium/core": ">=0.23.0",
-		"@axium/server": ">=0.47.0",
+		"@axium/client": ">=0.39.0",
+		"@axium/core": ">=0.41.0",
+		"@axium/server": ">=0.55.0",
 		"@sveltejs/kit": "^2.27.3",
 		"kysely": "^0.29.0",
 		"utilium": "^3.0.0"
@@ -47,11 +48,12 @@
 		"zod": "^4.0.5"
 	},
 	"axium": {
+		"locales": "locales",
 		"server": {
 			"routes": "routes",
 			"hooks": "./dist/hooks.js",
 			"db": "./db.json",
-			"web_client_hooks": "./dist/web_hook.js"
+			"web_client_hooks": "./dist/common.js"
 		},
 		"apps": [
 			{

package/routes/tasks/+layout.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { text } from '@axium/client';
+	import { TopBarContent } from '@axium/client/components';
+
+	const { children } = $props();
+</script>
+
+<TopBarContent name={text('app_name.tasks')} icon="list-check" href="/tasks" />
+
+{@render children()}

package/routes/tasks/+layout.ts

@@ -1,12 +1,19 @@
-import { getCurrentSession } from '@axium/client/user';
+import { connect } from '@axium/client/socket';
+import { schemas } from '@axium/client/sync';
+import { currentSession } from '@axium/client/user';
 import type { Session, UserPublic } from '@axium/core';
+import { TaskList } from '@axium/tasks/common';
+
+schemas.set('task_lists', TaskList);
 
 export const ssr = false;
 
 export async function load({ parent }) {
 	let { session }: { session?: (Session & { user: UserPublic }) | null } = await parent();
 
-	session ||= await getCurrentSession().catch(() => null);
+	session ||= await currentSession();
+
+	if (session) await connect().catch(() => null);
 
 	return { session };
 }

package/routes/tasks/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-	import { FormDialog, Icon, AppPreferencesDialog } from '@axium/client/components';
 	import { fetchAPI, text } from '@axium/client';
+	import { AppPreferencesDialog, FormDialog, Icon } from '@axium/client/components';
+	import { syncObjects } from '@axium/client/reactive';
 	import { TaskListInit, TasksPreferences } from '@axium/tasks/common';
 	import { TaskList } from '@axium/tasks/components';
 
@@ -8,15 +9,17 @@
 
 	let lists = $state(data.lists);
 	let dialog = $state<HTMLDialogElement>();
+
+	const onfocusout = syncObjects(lists, 'task_lists');
 </script>
 
+<svelte:window {onfocusout} />
+
 <svelte:head>
 	<title>{text('app_name.tasks')}</title>
 </svelte:head>
 
 <div id="tasks-main">
-	<h1>{text('app_name.tasks')}</h1>
-
 	<div>
 		<AppPreferencesDialog appId="tasks" userId={data.session.userId} schema={TasksPreferences} />
 

package/routes/tasks/+page.ts

@@ -1,8 +1,6 @@
 import { fetchAPI } from '@axium/client/requests';
 import { redirect } from '@sveltejs/kit';
 
-export const ssr = false;
-
 export async function load({ parent }) {
 	const { session } = await parent();
 

package/routes/tasks/[id]/+page.svelte

@@ -1,10 +1,16 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
 	import { text } from '@axium/client';
 	import { Icon } from '@axium/client/components';
+	import { syncObject } from '@axium/client/reactive';
 	import { TaskList } from '@axium/tasks/components';
 
 	const { data } = $props();
 
+	let list = $state(data.list);
+
+	syncObject(list, () => goto('/tasks'), 'task_lists');
+
 	let opener = $state.raw<Window | null>(window.opener);
 
 	opener?.addEventListener('beforeunload', () => (opener = null));
@@ -15,7 +21,7 @@
 </script>
 
 <svelte:head>
-	<title>{text('tasks.list_page_title', { name: data.list.name })}</title>
+	<title>{text('tasks.list_page_title', list)}</title>
 </svelte:head>
 
 <div class="list-container">
@@ -34,7 +40,7 @@
 		</div>
 	{/if}
 
-	<TaskList list={data.list} user={data.session?.user} />
+	<TaskList bind:list />
 </div>
 
 <style>

package/routes/tasks/[id]/+page.ts

@@ -1,8 +1,6 @@
 import { fetchAPI } from '@axium/client/requests';
 import type { LoadEvent } from '@sveltejs/kit';
 
-export const ssr = false;
-
 export async function load({ params }: LoadEvent) {
 	const list = await fetchAPI('GET', 'task_lists/:id', {}, params.id!);
 

package/routes/tsconfig.json

@@ -7,6 +7,6 @@
 		"target": "esnext",
 		"rootDir": ".."
 	},
-	"include": ["**/*", "../lib/*"],
+	"include": ["**/*", "../lib/*", "../src/.*.ts", "../../client/dist/.*.ts"],
 	"references": [{ "path": ".." }]
 }

package/dist/web_hook.d.ts

@@ -1,8 +0,0 @@
-import en from '../locales/en.json';
-import './common.js';
-type en = typeof en;
-declare module '@axium/client/locales' {
-    interface Locale extends en {
-    }
-}
-export {};

package/dist/web_hook.js

@@ -1,4 +0,0 @@
-import { extendLocale } from '@axium/client';
-import en from '../locales/en.json' with { type: 'json' };
-import './common.js';
-extendLocale('en', en);