@axium/tasks 0.5.8 → 0.5.9

package/lib/TaskList.svelte

@@ -2,6 +2,7 @@
 	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/web';
 	import { toastStatus } from '@axium/client/toast';
@@ -40,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>
 
@@ -76,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)}
@@ -314,8 +321,9 @@
 			}
 		}
 
-		input {
+		textarea {
 			padding: 0.125em 0.25em;
+			width: 100%;
 		}
 	}
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/tasks",
-	"version": "0.5.8",
+	"version": "0.5.9",
 	"author": "James Prevett <axium@jamespre.dev>",
 	"description": "Tasks for Axium",
 	"funding": {
@@ -37,8 +37,8 @@
 		"build": "tsc"
 	},
 	"peerDependencies": {
-		"@axium/client": ">=0.37.0",
-		"@axium/core": ">=0.39.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",

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,6 +1,6 @@
 import { connect } from '@axium/client/socket';
 import { schemas } from '@axium/client/sync';
-import { getCurrentSession } from '@axium/client/user';
+import { currentSession } from '@axium/client/user';
 import type { Session, UserPublic } from '@axium/core';
 import { TaskList } from '@axium/tasks/common';
 
@@ -11,7 +11,7 @@ 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);
 

package/routes/tasks/+page.svelte

@@ -20,8 +20,6 @@
 </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.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!);