Spaces:
Runtime error
Runtime error
File size: 4,012 Bytes
9e93b10 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 | <script lang="ts">
import { getContext, onMount } from "svelte";
const i18n = getContext("i18n");
import { user as _user, channels, socket } from "$lib/stores";
import { REXPRO_API_BASE_URL, REXPRO_BASE_URL } from "$lib/constants";
import { getChannels, getDMChannelByUserId } from "$lib/apis/channels";
import ChatBubbles from "$lib/components/icons/ChatBubbles.svelte";
import ChatBubble from "$lib/components/icons/ChatBubble.svelte";
import ChatBubbleOval from "$lib/components/icons/ChatBubbleOval.svelte";
import { goto } from "$app/navigation";
import Emoji from "$lib/components/common/Emoji.svelte";
import Tooltip from "$lib/components/common/Tooltip.svelte";
export let user = null;
const directMessageHandler = async () => {
if (!user) {
return;
}
const res = await getDMChannelByUserId(
localStorage.token,
user.id,
).catch((error) => {
console.error("Error fetching DM channel:", error);
return null;
});
if (res) {
goto(`/channels/${res.id}`);
}
};
</script>
{#if user}
<div class="py-3">
<div class=" flex gap-3.5 w-full px-3 items-center">
<div class=" items-center flex shrink-0">
<img
src={`${REXPRO_API_BASE_URL}/users/${user?.id}/profile/image`}
class=" size-14 object-cover rounded-xl"
alt="profile"
/>
</div>
<div class=" flex flex-col w-full flex-1">
<div class="mb-0.5 font-medium line-clamp-1 pr-2">
{user.name}
</div>
<div class=" flex items-center gap-2">
{#if user?.is_active}
<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-2 mt-2">
<Tooltip content={user?.status_message}>
<div
class="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"
>
{#if user?.status_emoji}
<div class=" self-center shrink-0">
<Emoji
className="size-4"
shortCode={user?.status_emoji}
/>
</div>
{/if}
<div class=" self-center line-clamp-2 flex-1 text-left">
{user?.status_message}
</div>
</div>
</Tooltip>
</div>
{/if}
{#if user?.bio}
<div class="mx-3.5 mt-2">
<Tooltip content={user?.bio}>
<div
class=" self-center line-clamp-3 flex-1 text-left text-xs"
>
{user?.bio}
</div>
</Tooltip>
</div>
{/if}
{#if (user?.groups ?? []).length > 0}
<div
class="mx-3.5 mt-2 flex flex-wrap gap-0.5 max-h-20 overflow-y-auto"
>
{#each user.groups as group}
<div
class="px-1.5 py-0.5 rounded-lg bg-gray-50 dark:text-white dark:bg-gray-900/50 text-black transition text-xs"
>
{group.name}
</div>
{/each}
</div>
{/if}
{#if $_user?.id !== user.id}
<hr class="border-gray-100/50 dark:border-gray-800/50 my-2.5" />
<div class=" flex flex-col w-full px-2.5 items-center">
<button
class="w-full text-left px-3 py-1.5 rounded-xl border border-gray-100/50 dark:border-gray-800/50 hover:bg-gray-50 dark:hover:bg-gray-850 transition flex items-center gap-2 text-sm"
type="button"
on:click={() => {
directMessageHandler();
}}
>
<div>
<ChatBubbleOval className="size-4" />
</div>
<div class="font-medium">
{$i18n.t("Message")}
</div>
</button>
</div>
{/if}
</div>
{/if}
|