@axium/tasks 0.4.8 → 0.4.9

package/dist/web_hook.d.ts

@@ -0,0 +1,8 @@
+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

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

package/lib/TaskList.svelte

@@ -3,7 +3,7 @@
 	import { page } from '$app/state';
 	import { copy } from '@axium/client/gui';
 	import { AccessControlDialog, Icon, Popover } from '@axium/client/components';
-	import { fetchAPI } from '@axium/client/requests';
+	import { fetchAPI, text } from '@axium/client';
 	import type { Task, TaskList } from '@axium/tasks/common';
 	import type { WithRequired } from 'utilium';
 	import { download } from 'utilium/dom.js';
@@ -60,11 +60,13 @@
 						tasks.splice(tasks.indexOf(task), 1);
 					})}
 			>
-				<Icon i="trash" /> Delete
+				<Icon i="trash" />
+				<span>{text('generic.delete')}</span>
 			</div>
 			{#if page.data.session?.user.preferences.debug}
 				<div class="menu-item" onclick={() => copy('text/plain', task.id)}>
-					<Icon i="hashtag" --size="14px" /> Copy ID
+					<Icon i="hashtag" --size="14px" />
+					<span>{text('tasks.copy_id')}</span>
 				</div>
 			{/if}
 		</Popover>
@@ -95,7 +97,8 @@
 						else lists.splice(lists.indexOf(list), 1);
 					})}
 			>
-				<Icon i="trash" /> Delete
+				<Icon i="trash" />
+				<span>{text('generic.delete')}</span>
 			</div>
 			<div
 				class="menu-item"
@@ -108,7 +111,8 @@
 							.join('\n')
 					)}
 			>
-				<Icon i="regular/file-export" /> Export
+				<Icon i="regular/file-export" />
+				<span>{text('tasks.export_list')}</span>
 			</div>
 			<div
 				class="menu-item"
@@ -117,7 +121,8 @@
 					acl!.click();
 				}}
 			>
-				<Icon i="user-group" /> Share
+				<Icon i="user-group" />
+				<span>{text('tasks.share_list')}</span>
 			</div>
 			{#if tasks.some(t => !t.completed)}
 				<div
@@ -127,7 +132,8 @@
 						fetchAPI('POST', 'task_lists/:id', { all_completed: true }, list.id);
 					}}
 				>
-					<Icon i="regular/circle-check" /> Complete All
+					<Icon i="regular/circle-check" />
+					<span>{text('tasks.mark_all_complete')}</span>
 				</div>
 			{/if}
 			{#if tasks.some(t => t.completed)}
@@ -138,20 +144,24 @@
 						fetchAPI('POST', 'task_lists/:id', { all_completed: false }, list.id);
 					}}
 				>
-					<Icon i="regular/circle" /> Un-complete All
+					<Icon i="regular/circle" />
+					<span>{text('tasks.mark_all_pending')}</span>
 				</div>
 			{/if}
 			<div class="menu-item" onclick={() => copy('text/plain', `${location.origin}/tasks/${list.id}`)}>
-				<Icon i="link-horizontal" /> Copy Link
+				<Icon i="link-horizontal" />
+				<span>{text('tasks.copy_link')}</span>
 			</div>
 			{#if lists}
 				<div class="menu-item" onclick={() => open(`/tasks/${list.id}`)}>
-					<Icon i="arrow-up-right-from-square" /> Open in New Tab
+					<Icon i="arrow-up-right-from-square" />
+					<span>{text('tasks.open_new_tab')}</span>
 				</div>
 			{/if}
 			{#if page.data.session?.user.preferences.debug}
 				<div class="menu-item" onclick={() => copy('text/plain', list.id)}>
-					<Icon i="hashtag" --size="14px" /> Copy ID
+					<Icon i="hashtag" --size="14px" />
+					<span>{text('tasks.copy_id')}</span>
 				</div>
 			{/if}
 		</Popover>
@@ -165,20 +175,21 @@
 					.then(t => t)
 					.then(tasks.push.bind(tasks))}
 		>
-			<Icon i="regular/circle-plus" /> Add Task
+			<Icon i="regular/circle-plus" />
+			<span>{text('tasks.new_task')}</span>
 		</button>
 	</div>
-	<h4>Pending</h4>
+	<h4>{text('tasks.pending_heading')}</h4>
 	{#each tasks.filter(task => !task.parentId && !task.completed) as task (task.id)}
 		{@render task_tree(task)}
 	{:else}
-		<i class="subtle">No pending tasks.</i>
+		<i class="subtle">{text('tasks.pending_empty')}</i>
 	{/each}
-	<h4>Completed</h4>
+	<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">No completed tasks.</i>
+		<i class="subtle">{text('tasks.completed_empty')}</i>
 	{/each}
 </div>
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/tasks",
-	"version": "0.4.8",
+	"version": "0.4.9",
 	"author": "James Prevett <axium@jamespre.dev>",
 	"description": "Tasks for Axium",
 	"funding": {
@@ -49,7 +49,7 @@
 			"routes": "routes",
 			"hooks": "./dist/hooks.js",
 			"db": "./db.json",
-			"web_client_hooks": "./dist/common.js"
+			"web_client_hooks": "./dist/web_hook.js"
 		},
 		"apps": [
 			{

package/routes/tasks/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { FormDialog, Icon } from '@axium/client/components';
-	import { fetchAPI } from '@axium/client/requests';
+	import { fetchAPI, text } from '@axium/client';
 	import { TaskListInit } from '@axium/tasks/common';
 	import { TaskList } from '@axium/tasks/components';
 
@@ -11,14 +11,15 @@
 </script>
 
 <svelte:head>
-	<title>Tasks</title>
+	<title>{text('app_name.tasks')}</title>
 </svelte:head>
 
 <div id="tasks-main">
-	<h1>Tasks</h1>
+	<h1>{text('app_name.tasks')}</h1>
 
 	<button id="create-task-list" class="icon-text mobile-float-right" onclick={() => dialog!.showModal()}>
-		<Icon i="plus" /> New List
+		<Icon i="plus" />
+		<span>{text('tasks.new_list')}</span>
 	</button>
 
 	<div class="lists-container">
@@ -30,7 +31,7 @@
 
 <FormDialog
 	bind:dialog
-	submitText="Create List"
+	submitText={text('tasks.list_init.submit')}
 	submit={async rawInit => {
 		const init = TaskListInit.parse(rawInit);
 		const result = await fetchAPI('PUT', 'users/:id/task_lists', init, data.session!.userId);
@@ -38,11 +39,11 @@
 	}}
 >
 	<div>
-		<label for="name">Name</label>
+		<label for="name">{text('tasks.list_init.name')}</label>
 		<input name="name" type="text" required />
 	</div>
 	<div>
-		<label for="description">Description <span class="subtle">(optional)</span></label>
+		<label for="description">{@html text('tasks.list_init.description', { $html: true })}</label>
 		<input name="description" type="text" />
 	</div>
 </FormDialog>

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { text } from '@axium/client';
 	import { Icon } from '@axium/client/components';
 	import { TaskList } from '@axium/tasks/components';
 
@@ -14,7 +15,7 @@
 </script>
 
 <svelte:head>
-	<title>Tasks — {data.list.name}</title>
+	<title>{text('tasks.list_page_title', { name: data.list.name })}</title>
 </svelte:head>
 
 <div class="list-container">
@@ -27,7 +28,8 @@
 					close();
 				}}
 			>
-				<Icon i="arrow-left-from-bracket" /> Back to Tasks
+				<Icon i="arrow-left-from-bracket" />
+				<span>{text('tasks.back_to_main')}</span>
 			</button>
 		</div>
 	{/if}