feat/enh: user status

2025-12-01 13:18:59 -05:00
parent dba86bc980
commit 51621ba91a
10 changed files with 422 additions and 8 deletions
@@ -0,0 +1,157 @@
+<script lang="ts">
+	import { getContext, createEventDispatcher, onMount } from 'svelte';
+	const i18n = getContext('i18n');
+
+	import { toast } from 'svelte-sonner';
+	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
+
+	import { updateUserStatus } from '$lib/apis/users';
+	import { settings, user } from '$lib/stores';
+
+	import Spinner from '$lib/components/common/Spinner.svelte';
+	import Modal from '$lib/components/common/Modal.svelte';
+	import XMark from '$lib/components/icons/XMark.svelte';
+	import EmojiPicker from '$lib/components/common/EmojiPicker.svelte';
+	import FaceSmile from '$lib/components/icons/FaceSmile.svelte';
+	import Emoji from '$lib/components/common/Emoji.svelte';
+
+	export let show = false;
+	export let onSave: Function = () => {};
+
+	let emoji = '';
+	let message = '';
+
+	let loading = false;
+
+	const submitHandler = async () => {
+		loading = true;
+		const res = await updateUserStatus(localStorage.token, {
+			status_emoji: emoji,
+			status_message: message
+		}).catch((error) => {
+			toast.error(`${error}`);
+			loading = false;
+			return null;
+		});
+
+		if (res) {
+			toast.success($i18n.t('Status updated successfully'));
+			onSave();
+		} else {
+			toast.error($i18n.t('Failed to update status'));
+		}
+
+		show = false;
+		loading = false;
+	};
+
+	$: if (show) {
+		init();
+	} else {
+		resetHandler();
+	}
+
+	const init = () => {
+		emoji = $user?.status_emoji || '';
+		message = $user?.status_message || '';
+	};
+
+	const resetHandler = () => {
+		emoji = '';
+		message = '';
+		loading = false;
+	};
+</script>
+
+<Modal size="sm" bind:show>
+	<div>
+		<div class=" flex justify-between dark:text-gray-300 px-5 pt-4 pb-1">
+			<div class=" text-lg font-medium self-center">
+				{$i18n.t('Set your status')}
+			</div>
+			<button
+				class="self-center"
+				on:click={() => {
+					show = false;
+				}}
+			>
+				<XMark className={'size-5'} />
+			</button>
+		</div>
+
+		<div class="flex flex-col md:flex-row w-full px-5 pb-4 md:space-x-4 dark:text-gray-200">
+			<div class=" flex flex-col w-full sm:flex-row sm:justify-center sm:space-x-6">
+				<form
+					class="flex flex-col w-full"
+					on:submit|preventDefault={() => {
+						submitHandler();
+					}}
+				>
+					<div>
+						<div class="text-xs text-gray-500 mb-1.5">
+							{$i18n.t('Status')}
+						</div>
+
+						<div
+							class="flex items-center px-2.5 py-2 gap-3 border border-gray-100/50 dark:border-gray-850/50 rounded-xl"
+						>
+							<EmojiPicker
+								onClose={() => {}}
+								onSubmit={(name) => {
+									console.log(name);
+									emoji = name;
+								}}
+							>
+								<div class=" flex items-center">
+									{#if emoji}
+										<Emoji shortCode={emoji} />
+									{:else}
+										<FaceSmile />
+									{/if}
+								</div>
+							</EmojiPicker>
+
+							<input
+								type="text"
+								bind:value={message}
+								class={`w-full flex-1 text-sm bg-transparent ${($settings?.highContrastMode ?? false) ? 'placeholder:text-gray-700 dark:placeholder:text-gray-100' : 'outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
+								placeholder={$i18n.t("What's on your mind?")}
+								autocomplete="off"
+								required
+							/>
+
+							<button
+								type="button"
+								on:click={() => {
+									emoji = '';
+									message = '';
+								}}
+							>
+								<XMark />
+							</button>
+						</div>
+					</div>
+
+					<div class="flex justify-end pt-3 text-sm font-medium gap-1.5">
+						<button
+							class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-950 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex flex-row space-x-1 items-center {loading
+								? ' cursor-not-allowed'
+								: ''}"
+							type="submit"
+							disabled={loading}
+						>
+							{$i18n.t('Save')}
+
+							{#if loading}
+								<div class="ml-2 self-center">
+									<Spinner />
+								</div>
+							{/if}
+						</button>
+					</div>
+				</form>
+			</div>
+		</div>
+	</div>
+</Modal>