Spaces:
Paused
Paused
File size: 2,383 Bytes
55bd140 |
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 |
<script lang="ts">
import { toast } from 'svelte-sonner';
import { onMount, getContext, tick, onDestroy } from 'svelte';
const i18n = getContext('i18n');
import { page } from '$app/stores';
import { mobile, showSidebar, user } from '$lib/stores';
import { updateChannelById } from '$lib/apis/channels';
import Cog6 from '$lib/components/icons/Cog6.svelte';
import ChannelModal from './ChannelModal.svelte';
import Lock from '$lib/components/icons/Lock.svelte';
import Hashtag from '$lib/components/icons/Hashtag.svelte';
export let onUpdate: Function = () => {};
export let className = '';
export let channel;
let showEditChannelModal = false;
let itemElement;
</script>
<ChannelModal
bind:show={showEditChannelModal}
{channel}
edit={true}
{onUpdate}
onSubmit={async ({ name, access_control }) => {
const res = await updateChannelById(localStorage.token, channel.id, {
name,
access_control
}).catch((error) => {
toast.error(error.message);
});
if (res) {
toast.success($i18n.t('Channel updated successfully'));
}
onUpdate();
}}
/>
<div
id="sidebar-channel-item"
bind:this={itemElement}
class=" w-full {className} rounded-xl flex relative group hover:bg-gray-100 dark:hover:bg-gray-900 {$page
.url.pathname === `/channels/${channel.id}`
? 'bg-gray-100 dark:bg-gray-900 selected'
: ''} px-2.5 py-1"
>
<a
class=" w-full flex justify-between"
href="/channels/{channel.id}"
on:click={() => {
console.log(channel);
if ($mobile) {
showSidebar.set(false);
}
}}
draggable="false"
>
<div class="flex items-center gap-1 shrink-0">
<div class=" size-4 justify-center flex items-center">
{#if channel?.access_control === null}
<Hashtag className="size-3" strokeWidth="2.5" />
{:else}
<Lock className="size-[15px]" strokeWidth="2" />
{/if}
</div>
<div class=" text-left self-center overflow-hidden w-full line-clamp-1 flex-1">
{channel.name}
</div>
</div>
</a>
{#if $user?.role === 'admin'}
<div
class="absolute z-10 right-2 invisible group-hover:visible self-center flex items-center dark:text-gray-300"
on:click={(e) => {
e.stopPropagation();
showEditChannelModal = true;
}}
>
<button class="p-0.5 dark:hover:bg-gray-850 rounded-lg touch-auto" on:click={(e) => {}}>
<Cog6 className="size-3.5" />
</button>
</div>
{/if}
</div>
|