@axium/contacts 0.0.1

package/lib/Field.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	interface Props {
+		text: string;
+		isDefault?: boolean;
+		label?: string | null;
+		link?: string;
+	}
+
+	const { text, isDefault, label, link }: Props = $props();
+</script>
+
+{#snippet content()}
+	{#each text.split('\n') as line, i}
+		{#if i}<br />{/if}
+		<span>{line}</span>
+	{/each}
+{/snippet}
+
+<span>
+	{#if link}
+		<a href={link} target="_blank" rel="noopener noreferrer">{@render content()}</a>
+	{:else}
+		{@render content()}
+	{/if}
+	{#if label}
+		<span class="subtle"> • {label}</span>
+	{/if}
+	{#if isDefault}
+		<span class="subtle"> (default)</span>
+	{/if}
+</span>

package/lib/InitForm.svelte

@@ -0,0 +1,264 @@
+<script lang="ts">
+	import { text } from '@axium/client';
+	import { dynamicRows } from '@axium/client/attachments';
+	import { Icon, LocationSelect, ZodInput } from '@axium/client/components';
+	import { ContactURL, Custom, Email, Init, Phone, Relationship, SigDate, type Contact } from '@axium/contacts';
+	import ContactPicture from './ContactPicture.svelte';
+	import DateSelect from './DateSelect.svelte';
+	import Discovery from './Discovery.svelte';
+
+	let showDetailed = $state(false);
+
+	let {
+		init = $bindable<Init & Partial<Contact>>(),
+		save,
+		back = '/contacts',
+	}: { init: Init & Partial<Contact>; save(init: Init): unknown; back?: string } = $props();
+
+	let more = $state({
+		names: false,
+		job: false,
+	});
+
+	type ArrayField = 'emails' | 'phones' | 'addresses' | 'relationships' | 'urls' | 'dates' | 'custom';
+
+	function updateValue() {}
+</script>
+
+{#snippet zod(name: keyof Init, showMore?: boolean, detailed?: boolean)}
+	{#if !detailed || showMore || init[name]}
+		<ZodInput bind:rootValue={init} path={name} schema={Init.shape[name]} {updateValue} noLabel="placeholder" />
+	{/if}
+{/snippet}
+
+{#snippet moreToggle(key: keyof typeof more)}
+	<button class="reset icon-text toggle" onclick={() => (more[key] = !more[key])}>
+		<Icon i="chevron-{more[key] ? 'up' : 'down'}" />
+	</button>
+{/snippet}
+
+{#snippet add(field: ArrayField)}
+	{#if init[field].length}<span />{/if}
+	<button class="icon-text" onclick={() => init[field].push({} as any)}>
+		<Icon i="plus" />
+		<span>{text('contacts.init.add.' + field)}</span>
+	</button>
+	<span />
+{/snippet}
+
+<div class="contact-init-actions">
+	<a href={back}>
+		<button class="icon-text">
+			<Icon i="arrow-left" />
+			<span>{text('contacts.back')}</span>
+		</button>
+	</a>
+
+	<button class="icon-text save" onclick={() => save(init)}>
+		<span>{text('contacts.init.save')}</span>
+	</button>
+</div>
+
+{#if init.id}
+	<div class="contact-init-header">
+		<ContactPicture contact={init as typeof init & { id: string }} --size="100px" />
+	</div>
+{/if}
+
+<div class="contact-init">
+	<Icon i="user" />
+	<div class="section">
+		{@render zod('display', more.names, true)}
+		{@render zod('prefix', more.names, true)}
+		{@render zod('givenName', more.names)}
+		{@render zod('givenName2', more.names, true)}
+		{@render zod('surname', more.names)}
+		{@render zod('suffix', more.names, true)}
+		{@render zod('nickname', more.names, true)}
+	</div>
+	{@render moreToggle('names')}
+
+	<Icon i="regular/buildings" />
+	<div class="section">
+		{@render zod('company', more.job)}
+		{@render zod('jobTitle', more.job)}
+		{@render zod('department', more.job, true)}
+	</div>
+	{@render moreToggle('job')}
+
+	<Icon i="regular/envelope" />
+	{#each init.emails, i}
+		{#if i}<span />{/if}
+		<div class={['email', init.emails.length > 1 && 'with-label']}>
+			<ZodInput bind:rootValue={init} path="emails.{i}.email" schema={Email.shape.email} {updateValue} noLabel="placeholder" />
+			{#if init.emails.length > 1}
+				<ZodInput bind:rootValue={init} path="emails.{i}.label" schema={Email.shape.label} {updateValue} noLabel="placeholder" />
+			{/if}
+		</div>
+		<Icon i="xmark" onclick={() => init.emails.splice(i, 1)} />
+	{/each}
+	{@render add('emails')}
+
+	<Icon i="phone" />
+	{#each init.phones, i}
+		{#if i}<span />{/if}
+		<div class={['phone', init.phones.length > 1 && 'with-label']}>
+			<ZodInput bind:rootValue={init} path="phones.{i}.country" schema={Phone.shape.country} {updateValue} noLabel="placeholder" />
+			<ZodInput bind:rootValue={init} path="phones.{i}.number" schema={Phone.shape.number} {updateValue} noLabel="placeholder" />
+			{#if init.phones.length > 1}
+				<ZodInput bind:rootValue={init} path="phones.{i}.label" schema={Phone.shape.label} {updateValue} noLabel="placeholder" />
+			{/if}
+		</div>
+		<Icon i="xmark" onclick={() => init.phones.splice(i, 1)} />
+	{/each}
+	{@render add('phones')}
+
+	<Icon i="regular/location-dot" />
+	{#each init.addresses, i}
+		{#if i}<span />{/if}
+		<div class="section">
+			<LocationSelect bind:value={init.addresses[i]} />
+		</div>
+		<Icon i="xmark" onclick={() => init.addresses.splice(i, 1)} />
+	{/each}
+
+	{@render add('addresses')}
+
+	<Icon i="cake-candles" />
+	<div class="section">
+		<DateSelect bind:day={init.birthDay} bind:month={init.birthMonth} bind:year={init.birthYear} />
+	</div>
+	<span />
+
+	{#if showDetailed}
+		<Icon i="regular/circle-nodes" />
+		{#each init.relationships as rel, i}
+			{#if i}<span />{/if}
+			<div class="section">
+				<Discovery
+					exclude={[init.id, ...init.relationships.map(r => r.to)].filter((v): v is string => !!v)}
+					onSelect={id => (rel.to = id)}
+				/>
+				<ZodInput
+					bind:rootValue={init}
+					path="relationships.{i}.label"
+					schema={Relationship.shape.label}
+					{updateValue}
+					noLabel="placeholder"
+				/>
+			</div>
+			<Icon i="xmark" onclick={() => init.relationships.splice(i, 1)} />
+		{/each}
+		{@render add('relationships')}
+
+		<Icon i="regular/calendar-day" />
+		{#each init.dates, i}
+			{#if i}<span />{/if}
+			<div class="section">
+				<ZodInput bind:rootValue={init} path="dates.{i}" schema={SigDate} {updateValue} noLabel="placeholder" />
+			</div>
+			<Icon i="xmark" onclick={() => init.dates.splice(i, 1)} />
+		{/each}
+		{@render add('dates')}
+
+		<Icon i="link-simple" />
+		{#each init.urls, i}
+			{#if i}<span />{/if}
+			<div class="section">
+				<ZodInput bind:rootValue={init} path="urls.{i}" schema={ContactURL} {updateValue} noLabel="placeholder" />
+			</div>
+			<Icon i="xmark" onclick={() => init.urls.splice(i, 1)} />
+		{/each}
+		{@render add('urls')}
+
+		<Icon i="regular/input-text" />
+		{#each init.custom, i}
+			{#if i}<span />{/if}
+			<div class="section">
+				<ZodInput bind:rootValue={init} path="custom.{i}" schema={Custom} {updateValue} noLabel="placeholder" />
+			</div>
+			<Icon i="xmark" onclick={() => init.custom.splice(i, 1)} />
+		{/each}
+		{@render add('custom')}
+	{/if}
+
+	<Icon i="regular/note" />
+	<textarea bind:value={init.notes} {@attach dynamicRows(50, 3)}></textarea>
+	<span />
+
+	<span />
+	<div>
+		<button onclick={() => (showDetailed = !showDetailed)}>
+			<span>{text('contacts.init.show_' + (showDetailed ? 'less' : 'more'))}</span>
+		</button>
+	</div>
+	<span />
+</div>
+
+<style>
+	.contact-init-header,
+	.contact-init,
+	.contact-init-actions {
+		padding: 2em;
+		width: 700px;
+
+		@media (width < 700px) {
+			width: 100%;
+		}
+	}
+
+	.contact-init-header {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.contact-init-actions {
+		display: flex;
+		gap: 1em;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.contact-init {
+		display: grid;
+		grid-template-columns: 1em 1fr 1em;
+		gap: 1em;
+
+		button.toggle {
+			height: 1em;
+		}
+
+		:global(.ZodInput) {
+			display: flex;
+			flex-direction: column;
+			gap: 1em;
+		}
+	}
+
+	.section {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25em;
+	}
+
+	.email {
+		display: grid;
+		gap: 0.5em;
+		grid-template-columns: 1fr;
+
+		&.with-label {
+			grid-template-columns: 1fr 1fr;
+		}
+	}
+
+	.phone {
+		display: grid;
+		gap: 0.5em;
+		grid-template-columns: 4em 1fr;
+
+		&.with-label {
+			grid-template-columns: 4em 1fr 1fr;
+		}
+	}
+</style>

package/lib/List.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { text } from '@axium/client';
+	import '@axium/client/styles/list';
+	import type { Contact } from '@axium/contacts';
+	import { format } from '@axium/contacts/client';
+	import ContactPicture from './ContactPicture.svelte';
+
+	const { contacts }: { contacts: Contact[] } = $props();
+</script>
+
+<div class="list">
+	<div class="list-item list-header">
+		<span></span>
+		<span>{text('contacts.list.name')}</span>
+		<span>{text('contacts.list.email')}</span>
+		<span>{text('contacts.list.phone')}</span>
+		<span>{text('contacts.list.job')}</span>
+	</div>
+
+	{#each contacts as contact (contact.id)}
+		<div class="list-item" onclick={() => (location.href = `/contacts/${contact.id}`)}>
+			<ContactPicture {contact} />
+			<span>{format.name(contact)}</span>
+			<span>{format.emailDefault(contact)}</span>
+			<span>{format.phoneDefault(contact)}</span>
+			<span>{format.job(contact)}</span>
+		</div>
+	{:else}
+		<p class="list-empty">{text('contacts.list.empty')}</p>
+	{/each}
+</div>
+
+<style>
+	.list-item {
+		grid-template-columns: 2em 2fr minmax(10em, 25em) minmax(10em, 20em) 1fr;
+	}
+</style>

package/lib/index.ts

@@ -0,0 +1,7 @@
+export { default as ContactCard } from './ContactCard.svelte';
+export { default as ContactPicture } from './ContactPicture.svelte';
+export { default as DateSelect } from './DateSelect.svelte';
+export { default as Discovery } from './Discovery.svelte';
+export { default as Field } from './Field.svelte';
+export { default as InitForm } from './InitForm.svelte';
+export { default as List } from './List.svelte';

package/lib/tsconfig.json

@@ -0,0 +1,13 @@
+{
+	"extends": ["../tsconfig.json", "../.svelte-kit/tsconfig.json"],
+	"compilerOptions": {
+		"rootDir": "..",
+		"noEmit": true,
+		"module": "preserve",
+		"moduleResolution": "Bundler",
+		"types": ["@sveltejs/kit"]
+	},
+	"include": ["**/*.svelte", "**/*.ts"],
+	"exclude": [],
+	"references": [{ "path": ".." }]
+}

package/locales/en.json

@@ -0,0 +1,72 @@
+{
+	"app_name": {
+		"contacts": "Contacts"
+	},
+	"contacts": {
+		"back": "Back",
+		"edit": "Edit",
+		"edit_title": "Contacts — Edit",
+		"delete": "Delete",
+		"export": "Export",
+		"new_button": "New Contact",
+		"field_loading": "Loading...",
+		"named_title": "Contacts — {name}",
+		"list": {
+			"name": "Name",
+			"email": "Email",
+			"phone": "Phone number",
+			"job": "Job title and company",
+			"empty": "No contacts"
+		},
+		"init": {
+			"title": "Contacts — New",
+			"save": "Save",
+			"add": {
+				"emails": "Add email",
+				"phones": "Add phone number",
+				"addresses": "Add address",
+				"relationships": "Add relationship",
+				"dates": "Add significant date",
+				"urls": "Add website",
+				"custom": "Add custom field"
+			},
+			"show_more": "Show more",
+			"show_less": "Show less"
+		},
+		"image": {
+			"update": "Upload",
+			"remove": "Remove",
+			"toast_updated": "Updated contact picture",
+			"toast_removed": "Removed contact picture"
+		},
+		"Discovery": {
+			"placeholder": "Search for a contact",
+			"no_results": "No contacts found"
+		}
+	},
+	"contact": {
+		"label": "Label",
+		"default": "Default",
+		"email": "Email",
+		"phone": {
+			"number": "Number"
+		},
+		"relationship": {
+			"to": "To"
+		},
+		"custom": {
+			"value": "Value"
+		},
+		"display": "Display as",
+		"prefix": "Prefix",
+		"given_name": "First name",
+		"given_name_2": "Middle name",
+		"surname": "Last name",
+		"suffix": "Suffix",
+		"nickname": "Nickname",
+		"company": "Company",
+		"job_title": "Job title",
+		"department": "Department",
+		"notes": "Notes"
+	}
+}

package/package.json

@@ -0,0 +1,69 @@
+{
+	"name": "@axium/contacts",
+	"version": "0.0.1",
+	"author": "James Prevett <axium@jamespre.dev>",
+	"description": "Contacts for Axium",
+	"funding": {
+		"type": "individual",
+		"url": "https://github.com/sponsors/james-pre"
+	},
+	"license": "LGPL-3.0-or-later",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/james-pre/axium.git"
+	},
+	"homepage": "https://github.com/james-pre/axium#readme",
+	"bugs": {
+		"url": "https://github.com/james-pre/axium/issues"
+	},
+	"type": "module",
+	"main": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"exports": {
+		".": "./dist/index.js",
+		"./client": "./dist/client/index.js",
+		"./server": "./dist/server/index.js",
+		"./*": "./dist/*.js",
+		"./components": "./lib/index.js",
+		"./components/*": "./lib/*.svelte"
+	},
+	"files": [
+		"dist",
+		"lib",
+		"routes",
+		"locales",
+		"db.json"
+	],
+	"scripts": {
+		"build": "tsc"
+	},
+	"peerDependencies": {
+		"@axium/client": ">=0.22.0",
+		"@axium/core": ">=0.26.0",
+		"@axium/server": ">=0.42.0",
+		"@sveltejs/kit": "^2.27.3",
+		"utilium": "^2.4.0"
+	},
+	"dependencies": {
+		"zod": "^4.0.5"
+	},
+	"axium": {
+		"server": {
+			"routes": "routes",
+			"hooks": "./dist/server/hooks.js",
+			"db": "./db.json",
+			"web_client_hooks": "./dist/client/web_hook.js"
+		},
+		"apps": [
+			{
+				"id": "contacts",
+				"name": "Contacts",
+				"icon": "address-book"
+			}
+		],
+		"update_checks": true,
+		"config": {
+			"auto_link": true
+		}
+	}
+}

package/routes/contacts/+layout.ts

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

package/routes/contacts/+page.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { text } from '@axium/client';
+	import { Icon } from '@axium/client/components';
+	import { List as ContactList } from '@axium/contacts/components';
+
+	const { data } = $props();
+</script>
+
+<svelte:head>
+	<title>{text('app_name.contacts')}</title>
+</svelte:head>
+
+<div class="contact-list-container">
+	<div>
+		<a href="/contacts/new">
+			<button class="icon-text">
+				<Icon i="plus" />
+				<span>{text('contacts.new_button')}</span>
+			</button>
+		</a>
+	</div>
+	<ContactList contacts={data.contacts} />
+</div>
+
+<style>
+	.contact-list-container {
+		margin: 2em;
+	}
+</style>

package/routes/contacts/+page.ts

@@ -0,0 +1,15 @@
+import { fetchAPI } from '@axium/client/requests';
+import type {} from '@axium/contacts/common';
+import { redirect } from '@sveltejs/kit';
+
+export const ssr = false;
+
+export async function load({ parent }) {
+	let { session } = await parent();
+
+	if (!session) redirect(307, '/login?after=/contacts');
+
+	const contacts = await fetchAPI('GET', 'users/:id/contacts', {}, session.userId);
+
+	return { contacts, session };
+}

package/routes/contacts/[id]/+layout.ts

@@ -0,0 +1,12 @@
+import type { Contact } from '@axium/contacts';
+import { getContact } from '@axium/contacts/client';
+
+export const ssr = false;
+
+export async function load({ parent, params }) {
+	let { session } = await parent();
+
+	const contact: Contact = await getContact(params.id);
+
+	return { session, contact };
+}