feat/enh: user status

src/lib/components/layout/Sidebar/UserMenu.svelte

@@ -7,10 +7,12 @@
 	import { fade, slide } from 'svelte/transition';
 
 	import { getUsage } from '$lib/apis';
-	import { userSignOut } from '$lib/apis/auths';
+	import { getSessionUser, userSignOut } from '$lib/apis/auths';
 
 	import { showSettings, mobile, showSidebar, showShortcuts, user } from '$lib/stores';
 
+	import { WEBUI_API_BASE_URL } from '$lib/constants';
+
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import ArchiveBox from '$lib/components/icons/ArchiveBox.svelte';
 	import QuestionMarkCircle from '$lib/components/icons/QuestionMarkCircle.svelte';
@@ -21,16 +23,27 @@
 	import Code from '$lib/components/icons/Code.svelte';
 	import UserGroup from '$lib/components/icons/UserGroup.svelte';
 	import SignOut from '$lib/components/icons/SignOut.svelte';
+	import FaceSmile from '$lib/components/icons/FaceSmile.svelte';
+	import UserStatusModal from './UserStatusModal.svelte';
+	import Emoji from '$lib/components/common/Emoji.svelte';
+	import XMark from '$lib/components/icons/XMark.svelte';
+	import { updateUserStatus } from '$lib/apis/users';
+	import { toast } from 'svelte-sonner';
 
 	const i18n = getContext('i18n');
 
 	export let show = false;
 	export let role = '';
+
+	export let profile = false;
 	export let help = false;
+
 	export let className = 'max-w-[240px]';
 
 	export let showActiveUsers = true;
 
+	let showUserStatusModal = false;
+
 	const dispatch = createEventDispatcher();
 
 	let usage = null;
@@ -52,6 +65,12 @@
 </script>
 
 <ShortcutsModal bind:show={$showShortcuts} />
+<UserStatusModal
+	bind:show={showUserStatusModal}
+	onSave={async () => {
+		user.set(await getSessionUser(localStorage.token));
+	}}
+/>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <DropdownMenu.Root
@@ -72,6 +91,116 @@
 			align="end"
 			transition={(e) => fade(e, { duration: 100 })}
 		>
+			{#if profile}
+				<div class=" flex gap-3.5 w-full p-2.5 items-center">
+					<div class=" items-center flex shrink-0">
+						<img
+							src={`${WEBUI_API_BASE_URL}/users/${$user?.id}/profile/image`}
+							class=" size-10 object-cover rounded-full"
+							alt="profile"
+						/>
+					</div>
+
+					<div class=" flex flex-col w-full flex-1">
+						<div class="font-medium line-clamp-1 pr-2">
+							{$user.name}
+						</div>
+
+						<div class=" flex items-center gap-2">
+							{#if $user?.is_active ?? true}
+								<div>
+									<span class="relative flex size-2">
+										<span
+											class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"
+										/>
+										<span class="relative inline-flex rounded-full size-2 bg-green-500" />
+									</span>
+								</div>
+
+								<span class="text-xs"> {$i18n.t('Active')} </span>
+							{:else}
+								<div>
+									<span class="relative flex size-2">
+										<span class="relative inline-flex rounded-full size-2 bg-gray-500" />
+									</span>
+								</div>
+
+								<span class="text-xs"> {$i18n.t('Away')} </span>
+							{/if}
+						</div>
+					</div>
+				</div>
+
+				{#if $user?.status_emoji || $user?.status_message}
+					<div class="mx-1">
+						<button
+							class="mb-1 w-full gap-2 px-2.5 py-1.5 rounded-xl bg-gray-50 dark:text-white dark:bg-gray-900/50 text-black transition text-xs flex items-center"
+							type="button"
+							on:click={() => {
+								showUserStatusModal = true;
+							}}
+						>
+							{#if $user?.status_emoji}
+								<div class=" self-center shrink-0">
+									<Emoji className="size-4" shortCode={$user?.status_emoji} />
+								</div>
+							{/if}
+
+							<Tooltip
+								content={$user?.status_message}
+								className=" self-center line-clamp-2 flex-1 text-left"
+							>
+								{$user?.status_message}
+							</Tooltip>
+
+							<div class="self-start">
+								<Tooltip content={$i18n.t('Clear status')}>
+									<button
+										type="button"
+										on:click={async (e) => {
+											e.preventDefault();
+											e.stopPropagation();
+											e.stopImmediatePropagation();
+
+											const res = await updateUserStatus(localStorage.token, {
+												status_emoji: '',
+												status_message: ''
+											});
+
+											if (res) {
+												toast.success($i18n.t('Status cleared successfully'));
+												user.set(await getSessionUser(localStorage.token));
+											} else {
+												toast.error($i18n.t('Failed to clear status'));
+											}
+										}}
+									>
+										<XMark className="size-4 opacity-50" strokeWidth="2" />
+									</button>
+								</Tooltip>
+							</div>
+						</button>
+					</div>
+				{:else}
+					<div class="mx-1">
+						<button
+							class="mb-1 w-full px-3 py-1.5 gap-1 rounded-xl bg-gray-50 dark:text-white dark:bg-gray-900/50 text-black transition text-xs flex items-center justify-center"
+							type="button"
+							on:click={() => {
+								showUserStatusModal = true;
+							}}
+						>
+							<div class=" self-center">
+								<FaceSmile className="size-4" strokeWidth="1.5" />
+							</div>
+							<div class=" self-center truncate">{$i18n.t('Update your status')}</div>
+						</button>
+					</div>
+				{/if}
+
+				<hr class=" border-gray-50/30 dark:border-gray-800/30 my-1.5 p-0" />
+			{/if}
+
 			<DropdownMenu.Item
 				class="flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition cursor-pointer"
 				on:click={async () => {