@axium/contacts 0.2.4 → 0.2.6

package/lib/ContactPicture.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
+	import { origin, userInfo } from '@axium/client';
+	import UserPFP from '@axium/client/components/UserPFP';
 	import type { InitNoExternal } from '@axium/contacts';
-	import { colorHashRGB } from '@axium/core/color';
 	import { name as formatName } from '@axium/contacts/client/format';
-	import UserPFP from '@axium/client/components/UserPFP';
-	import { userInfo } from '@axium/client';
+	import { colorHashRGB } from '@axium/core/color';
 
 	let { contact, isDefault = $bindable() }: { contact: InitNoExternal & { id: string }; isDefault?: boolean } = $props();
 
@@ -15,7 +15,7 @@
 	</svg>`.replaceAll(/[\t\n]/g, '')
 	);
 
-	let src = $state(`/raw/contacts/pfp/${contact.id}`);
+	let src = $state(`${origin}/raw/contacts/pfp/${contact.id}`);
 </script>
 
 {#if contact.linkedUserId}

package/lib/InitForm.svelte

@@ -39,12 +39,12 @@
 {/snippet}
 
 {#snippet add(field: ArrayField)}
-	{#if init[field].length}<span />{/if}
+	{#if init[field].length}<span></span>{/if}
 	<button class="icon-text" onclick={() => init[field].push({} as any)}>
 		<Icon i="plus" />
 		<span>{text('contacts.init.add.' + field)}</span>
 	</button>
-	<span />
+	<span></span>
 {/snippet}
 
 <div class="contact-init-actions">
@@ -71,6 +71,7 @@
 
 <div class="contact-init">
 	<Icon i="user" />
+
 	<div class="section">
 		{@render zod('display', more.names, true)}
 		{@render zod('prefix', more.names, true)}
@@ -92,7 +93,7 @@
 
 	<Icon i="regular/envelope" />
 	{#each init.emails, i}
-		{#if i}<span />{/if}
+		{#if i}<span></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}
@@ -105,7 +106,7 @@
 
 	<Icon i="phone" />
 	{#each init.phones, i}
-		{#if i}<span />{/if}
+		{#if i}<span></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" />
@@ -119,7 +120,7 @@
 
 	<Icon i="regular/location-dot" />
 	{#each init.addresses, i}
-		{#if i}<span />{/if}
+		{#if i}<span></span>{/if}
 		<div class="section">
 			<LocationSelect bind:value={init.addresses[i]} />
 		</div>
@@ -132,12 +133,12 @@
 	<div class="section">
 		<DateSelect bind:day={init.birthDay} bind:month={init.birthMonth} bind:year={init.birthYear} />
 	</div>
-	<span />
+	<span></span>
 
 	{#if showDetailed}
 		<Icon i="regular/circle-nodes" />
 		{#each init.relationships as rel, i}
-			{#if i}<span />{/if}
+			{#if i}<span></span>{/if}
 			<div class="section">
 				<Discovery
 					onSelect={result => (rel.to = result.contact.id)}
@@ -160,7 +161,7 @@
 
 		<Icon i="regular/calendar-day" />
 		{#each init.dates, i}
-			{#if i}<span />{/if}
+			{#if i}<span></span>{/if}
 			<div class="section">
 				<ZodInput bind:rootValue={init} path="dates.{i}" schema={SigDate} {updateValue} noLabel="placeholder" />
 			</div>
@@ -170,7 +171,7 @@
 
 		<Icon i="link-simple" />
 		{#each init.urls, i}
-			{#if i}<span />{/if}
+			{#if i}<span></span>{/if}
 			<div class="section">
 				<ZodInput bind:rootValue={init} path="urls.{i}" schema={ContactURL} {updateValue} noLabel="placeholder" />
 			</div>
@@ -180,7 +181,7 @@
 
 		<Icon i="regular/input-text" />
 		{#each init.custom, i}
-			{#if i}<span />{/if}
+			{#if i}<span></span>{/if}
 			<div class="section">
 				<ZodInput bind:rootValue={init} path="custom.{i}" schema={Custom} {updateValue} noLabel="placeholder" />
 			</div>
@@ -191,15 +192,15 @@
 
 	<Icon i="regular/note" />
 	<textarea bind:value={init.notes} {@attach dynamicRows(50, 3)}></textarea>
-	<span />
+	<span></span>
 
-	<span />
+	<span></span>
 	<div>
 		<button onclick={() => (showDetailed = !showDetailed)}>
 			<span>{text('contacts.init.show_' + (showDetailed ? 'less' : 'more'))}</span>
 		</button>
 	</div>
-	<span />
+	<span></span>
 </div>
 
 <style>
@@ -243,7 +244,8 @@
 		background-color: var(--bg-menu);
 
 		button.toggle {
-			height: 1em;
+			height: 2em;
+			padding: 0.5em 0;
 		}
 
 		:global(.ZodInput) {
@@ -251,6 +253,10 @@
 			flex-direction: column;
 			gap: 1em;
 		}
+
+		:global(& > .Icon) {
+			margin: 0.5em 0;
+		}
 	}
 
 	.section {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/contacts",
-	"version": "0.2.4",
+	"version": "0.2.6",
 	"author": "James Prevett <axium@jamespre.dev>",
 	"description": "Contacts for Axium",
 	"funding": {
@@ -38,7 +38,7 @@
 		"build": "tsc"
 	},
 	"peerDependencies": {
-		"@axium/client": ">=0.23.1",
+		"@axium/client": ">=0.25.0",
 		"@axium/core": ">=0.26.0",
 		"@axium/server": ">=0.43.0",
 		"@sveltejs/kit": "^2.27.3",

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { fetchAPI, text } from '@axium/client';
+	import { fetchAPI, origin, text } from '@axium/client';
 	import { FormDialog, Icon, Popover } from '@axium/client/components';
 	import { toast, toastStatus } from '@axium/client/toast';
 	import { toVCard } from '@axium/contacts';
@@ -15,7 +15,7 @@
 	async function updatePicture() {
 		try {
 			const file = await upload('image/*');
-			const response = await fetch('/raw/contacts/pfp/' + contact.id, {
+			const response = await fetch(`${origin}/raw/contacts/pfp/${contact.id}`, {
 				method: 'POST',
 				headers: { 'content-type': file.type, 'content-length': file.size.toString() },
 				body: file,
@@ -95,7 +95,10 @@
 				<div
 					class="menu-item"
 					onclick={() =>
-						toastStatus(fetch('/raw/contacts/pfp/' + contact.id, { method: 'DELETE' }), text('contacts.image.toast_removed'))}
+						toastStatus(
+							fetch(`${origin}/raw/contacts/pfp/${contact.id}`, { method: 'DELETE' }),
+							text('contacts.image.toast_removed')
+						)}
 				>
 					<Icon i="trash" />
 					<span>{text('contacts.image.remove')}</span>
@@ -247,15 +250,15 @@
 		border-radius: 1em;
 		background-color: var(--bg-menu);
 
-		button.toggle {
-			height: 1em;
-		}
-
 		:global(.ZodInput) {
 			display: flex;
 			flex-direction: column;
 			gap: 1em;
 		}
+
+		:global(& > .Icon) {
+			margin: 0.25em 0;
+		}
 	}
 
 	.section {