mirror of
https://github.com/open-webui/open-webui.git
synced 2025-12-13 04:45:19 +00:00
feat: user list in channels
This commit is contained in:
Timothy Jaeryang Baek
parent
baa1e07aec
commit
c0e1203538
10 changed files with 521 additions and 18 deletions
|
|
@ -99,7 +99,16 @@ class UserGroupIdsModel(UserModel):
|
|||
group_ids: list[str] = []
|
||||
|
||||
|
||||
class UserModelResponse(UserModel):
|
||||
model_config = ConfigDict(extra="allow")
|
||||
|
||||
|
||||
class UserListResponse(BaseModel):
|
||||
users: list[UserModelResponse]
|
||||
total: int
|
||||
|
||||
|
||||
class UserGroupIdsListResponse(BaseModel):
|
||||
users: list[UserGroupIdsModel]
|
||||
total: int
|
||||
|
||||
|
|
@ -239,6 +248,31 @@ class UsersTable:
|
|||
)
|
||||
)
|
||||
|
||||
user_ids = filter.get("user_ids")
|
||||
if user_ids:
|
||||
query = query.filter(User.id.in_(user_ids))
|
||||
|
||||
group_ids = filter.get("group_ids")
|
||||
if group_ids:
|
||||
query = query.filter(
|
||||
exists(
|
||||
select(GroupMember.id).where(
|
||||
GroupMember.user_id == User.id,
|
||||
GroupMember.group_id.in_(group_ids),
|
||||
)
|
||||
)
|
||||
)
|
||||
|
||||
roles = filter.get("roles")
|
||||
if roles:
|
||||
include_roles = [role for role in roles if not role.startswith("!")]
|
||||
exclude_roles = [role[1:] for role in roles if role.startswith("!")]
|
||||
|
||||
if include_roles:
|
||||
query = query.filter(User.role.in_(include_roles))
|
||||
if exclude_roles:
|
||||
query = query.filter(~User.role.in_(exclude_roles))
|
||||
|
||||
order_by = filter.get("order_by")
|
||||
direction = filter.get("direction")
|
||||
|
||||
|
|
|
|||
|
|
@ -7,8 +7,17 @@ from fastapi import APIRouter, Depends, HTTPException, Request, status, Backgrou
|
|||
from pydantic import BaseModel
|
||||
|
||||
|
||||
from open_webui.socket.main import sio, get_user_ids_from_room
|
||||
from open_webui.models.users import Users, UserNameResponse
|
||||
from open_webui.socket.main import (
|
||||
sio,
|
||||
get_user_ids_from_room,
|
||||
get_active_status_by_user_id,
|
||||
)
|
||||
from open_webui.models.users import (
|
||||
UserListResponse,
|
||||
UserModelResponse,
|
||||
Users,
|
||||
UserNameResponse,
|
||||
)
|
||||
|
||||
from open_webui.models.groups import Groups
|
||||
from open_webui.models.channels import (
|
||||
|
|
@ -38,7 +47,11 @@ from open_webui.utils.chat import generate_chat_completion
|
|||
|
||||
|
||||
from open_webui.utils.auth import get_admin_user, get_verified_user
|
||||
from open_webui.utils.access_control import has_access, get_users_with_access
|
||||
from open_webui.utils.access_control import (
|
||||
has_access,
|
||||
get_users_with_access,
|
||||
get_permitted_group_and_user_ids,
|
||||
)
|
||||
from open_webui.utils.webhook import post_webhook
|
||||
from open_webui.utils.channels import extract_mentions, replace_mentions
|
||||
|
||||
|
|
@ -116,6 +129,64 @@ async def get_channel_by_id(id: str, user=Depends(get_verified_user)):
|
|||
)
|
||||
|
||||
|
||||
PAGE_ITEM_COUNT = 30
|
||||
|
||||
|
||||
@router.get("/{id}/users", response_model=UserListResponse)
|
||||
async def get_channel_users_by_id(
|
||||
id: str,
|
||||
query: Optional[str] = None,
|
||||
order_by: Optional[str] = None,
|
||||
direction: Optional[str] = None,
|
||||
page: Optional[int] = 1,
|
||||
user=Depends(get_verified_user),
|
||||
):
|
||||
|
||||
channel = Channels.get_channel_by_id(id)
|
||||
if not channel:
|
||||
raise HTTPException(
|
||||
status_code=status.HTTP_404_NOT_FOUND, detail=ERROR_MESSAGES.NOT_FOUND
|
||||
)
|
||||
|
||||
limit = PAGE_ITEM_COUNT
|
||||
|
||||
page = max(1, page)
|
||||
skip = (page - 1) * limit
|
||||
|
||||
filter = {
|
||||
"roles": ["!pending"],
|
||||
}
|
||||
|
||||
if query:
|
||||
filter["query"] = query
|
||||
if order_by:
|
||||
filter["order_by"] = order_by
|
||||
if direction:
|
||||
filter["direction"] = direction
|
||||
|
||||
permitted_ids = get_permitted_group_and_user_ids("read", channel.access_control)
|
||||
if permitted_ids:
|
||||
if permitted_ids.get("user_ids"):
|
||||
filter["user_ids"] = permitted_ids.get("user_ids")
|
||||
if permitted_ids.get("group_ids"):
|
||||
filter["group_ids"] = permitted_ids.get("group_ids")
|
||||
|
||||
result = Users.get_users(filter=filter, skip=skip, limit=limit)
|
||||
|
||||
users = result["users"]
|
||||
total = result["total"]
|
||||
|
||||
return {
|
||||
"users": [
|
||||
UserModelResponse(
|
||||
**user.model_dump(), is_active=get_active_status_by_user_id(user.id)
|
||||
)
|
||||
for user in users
|
||||
],
|
||||
"total": total,
|
||||
}
|
||||
|
||||
|
||||
############################
|
||||
# UpdateChannelById
|
||||
############################
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ from open_webui.models.chats import Chats
|
|||
from open_webui.models.users import (
|
||||
UserModel,
|
||||
UserGroupIdsModel,
|
||||
UserListResponse,
|
||||
UserGroupIdsListResponse,
|
||||
UserInfoListResponse,
|
||||
UserIdNameListResponse,
|
||||
UserRoleUpdateForm,
|
||||
|
|
@ -76,7 +76,7 @@ async def get_active_users(
|
|||
PAGE_ITEM_COUNT = 30
|
||||
|
||||
|
||||
@router.get("/", response_model=UserListResponse)
|
||||
@router.get("/", response_model=UserGroupIdsListResponse)
|
||||
async def get_users(
|
||||
query: Optional[str] = None,
|
||||
order_by: Optional[str] = None,
|
||||
|
|
|
|||
|
|
@ -105,6 +105,22 @@ def has_permission(
|
|||
return get_permission(default_permissions, permission_hierarchy)
|
||||
|
||||
|
||||
def get_permitted_group_and_user_ids(
|
||||
type: str = "write", access_control: Optional[dict] = None
|
||||
) -> Union[Dict[str, List[str]], None]:
|
||||
if access_control is None:
|
||||
return None
|
||||
|
||||
permission_access = access_control.get(type, {})
|
||||
permitted_group_ids = permission_access.get("group_ids", [])
|
||||
permitted_user_ids = permission_access.get("user_ids", [])
|
||||
|
||||
return {
|
||||
"group_ids": permitted_group_ids,
|
||||
"user_ids": permitted_user_ids,
|
||||
}
|
||||
|
||||
|
||||
def has_access(
|
||||
user_id: str,
|
||||
type: str = "write",
|
||||
|
|
@ -122,9 +138,12 @@ def has_access(
|
|||
user_groups = Groups.get_groups_by_member_id(user_id)
|
||||
user_group_ids = {group.id for group in user_groups}
|
||||
|
||||
permission_access = access_control.get(type, {})
|
||||
permitted_group_ids = permission_access.get("group_ids", [])
|
||||
permitted_user_ids = permission_access.get("user_ids", [])
|
||||
permitted_ids = get_permitted_group_and_user_ids(type, access_control)
|
||||
if permitted_ids is None:
|
||||
return False
|
||||
|
||||
permitted_group_ids = permitted_ids.get("group_ids", [])
|
||||
permitted_user_ids = permitted_ids.get("user_ids", [])
|
||||
|
||||
return user_id in permitted_user_ids or any(
|
||||
group_id in permitted_group_ids for group_id in user_group_ids
|
||||
|
|
@ -136,18 +155,20 @@ def get_users_with_access(
|
|||
type: str = "write", access_control: Optional[dict] = None
|
||||
) -> list[UserModel]:
|
||||
if access_control is None:
|
||||
result = Users.get_users()
|
||||
result = Users.get_users(filter={"roles": ["!pending"]})
|
||||
return result.get("users", [])
|
||||
|
||||
permission_access = access_control.get(type, {})
|
||||
permitted_group_ids = permission_access.get("group_ids", [])
|
||||
permitted_user_ids = permission_access.get("user_ids", [])
|
||||
permitted_ids = get_permitted_group_and_user_ids(type, access_control)
|
||||
if permitted_ids is None:
|
||||
return []
|
||||
|
||||
permitted_group_ids = permitted_ids.get("group_ids", [])
|
||||
permitted_user_ids = permitted_ids.get("user_ids", [])
|
||||
|
||||
user_ids_with_access = set(permitted_user_ids)
|
||||
|
||||
for group_id in permitted_group_ids:
|
||||
group_user_ids = Groups.get_group_user_ids_by_id(group_id)
|
||||
if group_user_ids:
|
||||
user_ids_with_access.update(group_user_ids)
|
||||
group_user_ids_map = Groups.get_group_user_ids_by_ids(permitted_group_ids)
|
||||
for user_ids in group_user_ids_map.values():
|
||||
user_ids_with_access.update(user_ids)
|
||||
|
||||
return Users.get_users_by_user_ids(list(user_ids_with_access))
|
||||
|
|
|
|||
|
|
@ -101,6 +101,60 @@ export const getChannelById = async (token: string = '', channel_id: string) =>
|
|||
return res;
|
||||
};
|
||||
|
||||
export const getChannelUsersById = async (
|
||||
token: string,
|
||||
channel_id: string,
|
||||
query?: string,
|
||||
orderBy?: string,
|
||||
direction?: string,
|
||||
page = 1
|
||||
) => {
|
||||
let error = null;
|
||||
let res = null;
|
||||
|
||||
const searchParams = new URLSearchParams();
|
||||
|
||||
searchParams.set('page', `${page}`);
|
||||
|
||||
if (query) {
|
||||
searchParams.set('query', query);
|
||||
}
|
||||
|
||||
if (orderBy) {
|
||||
searchParams.set('order_by', orderBy);
|
||||
}
|
||||
|
||||
if (direction) {
|
||||
searchParams.set('direction', direction);
|
||||
}
|
||||
|
||||
res = await fetch(
|
||||
`${WEBUI_API_BASE_URL}/channels/${channel_id}/users?${searchParams.toString()}`,
|
||||
{
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${token}`
|
||||
}
|
||||
}
|
||||
)
|
||||
.then(async (res) => {
|
||||
if (!res.ok) throw await res.json();
|
||||
return res.json();
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
error = err.detail;
|
||||
return null;
|
||||
});
|
||||
|
||||
if (error) {
|
||||
throw error;
|
||||
}
|
||||
|
||||
return res;
|
||||
};
|
||||
|
||||
export const updateChannelById = async (
|
||||
token: string = '',
|
||||
channel_id: string,
|
||||
|
|
|
|||
81
src/lib/components/channel/ChannelInfoModal.svelte
Normal file
81
src/lib/components/channel/ChannelInfoModal.svelte
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
<script lang="ts">
|
||||
import { toast } from 'svelte-sonner';
|
||||
import { getContext, onMount } from 'svelte';
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
import Spinner from '$lib/components/common/Spinner.svelte';
|
||||
import Modal from '$lib/components/common/Modal.svelte';
|
||||
|
||||
import UserPlusSolid from '$lib/components/icons/UserPlusSolid.svelte';
|
||||
import WrenchSolid from '$lib/components/icons/WrenchSolid.svelte';
|
||||
import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
|
||||
import XMark from '$lib/components/icons/XMark.svelte';
|
||||
import Hashtag from '../icons/Hashtag.svelte';
|
||||
import Lock from '../icons/Lock.svelte';
|
||||
import UserList from './ChannelInfoModal/UserList.svelte';
|
||||
|
||||
export let show = false;
|
||||
export let channel = null;
|
||||
|
||||
const submitHandler = async () => {};
|
||||
|
||||
const init = () => {};
|
||||
|
||||
$: if (show) {
|
||||
init();
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
init();
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if channel}
|
||||
<Modal size="sm" bind:show>
|
||||
<div>
|
||||
<div class=" flex justify-between dark:text-gray-100 px-5 pt-4 mb-1.5">
|
||||
<div class="self-center text-base">
|
||||
<div class="flex items-center gap-0.5 shrink-0">
|
||||
<div class=" size-4 justify-center flex items-center">
|
||||
{#if channel?.access_control === null}
|
||||
<Hashtag className="size-3.5" strokeWidth="2.5" />
|
||||
{:else}
|
||||
<Lock className="size-5.5" strokeWidth="2" />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class=" text-left self-center overflow-hidden w-full line-clamp-1 capitalize flex-1"
|
||||
>
|
||||
{channel.name}
|
||||
</div>
|
||||
</div>
|
||||
</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-4 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={(e) => {
|
||||
e.preventDefault();
|
||||
submitHandler();
|
||||
}}
|
||||
>
|
||||
<div class="flex flex-col lg:flex-row w-full h-full pb-2 lg:space-x-4">
|
||||
<UserList {channel} />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
{/if}
|
||||
230
src/lib/components/channel/ChannelInfoModal/UserList.svelte
Normal file
230
src/lib/components/channel/ChannelInfoModal/UserList.svelte
Normal file
|
|
@ -0,0 +1,230 @@
|
|||
<script>
|
||||
import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
|
||||
import { WEBUI_NAME, config, user, showSidebar } from '$lib/stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import { onMount, getContext } from 'svelte';
|
||||
|
||||
import dayjs from 'dayjs';
|
||||
import relativeTime from 'dayjs/plugin/relativeTime';
|
||||
import localizedFormat from 'dayjs/plugin/localizedFormat';
|
||||
dayjs.extend(relativeTime);
|
||||
dayjs.extend(localizedFormat);
|
||||
|
||||
import { toast } from 'svelte-sonner';
|
||||
import { getChannelUsersById } from '$lib/apis/channels';
|
||||
|
||||
import Pagination from '$lib/components/common/Pagination.svelte';
|
||||
import ChatBubbles from '$lib/components/icons/ChatBubbles.svelte';
|
||||
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||
|
||||
import EditUserModal from '$lib/components/admin/Users/UserList/EditUserModal.svelte';
|
||||
import UserChatsModal from '$lib/components/admin/Users/UserList/UserChatsModal.svelte';
|
||||
import AddUserModal from '$lib/components/admin/Users/UserList/AddUserModal.svelte';
|
||||
|
||||
import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
|
||||
import RoleUpdateConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
|
||||
|
||||
import Badge from '$lib/components/common/Badge.svelte';
|
||||
import Plus from '$lib/components/icons/Plus.svelte';
|
||||
import ChevronUp from '$lib/components/icons/ChevronUp.svelte';
|
||||
import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
|
||||
import About from '$lib/components/chat/Settings/About.svelte';
|
||||
import Banner from '$lib/components/common/Banner.svelte';
|
||||
import Markdown from '$lib/components/chat/Messages/Markdown.svelte';
|
||||
import Spinner from '$lib/components/common/Spinner.svelte';
|
||||
import ProfilePreview from '../Messages/Message/ProfilePreview.svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
export let channel = null;
|
||||
|
||||
let page = 1;
|
||||
|
||||
let users = null;
|
||||
let total = null;
|
||||
|
||||
let query = '';
|
||||
let orderBy = 'created_at'; // default sort key
|
||||
let direction = 'asc'; // default sort order
|
||||
|
||||
const setSortKey = (key) => {
|
||||
if (orderBy === key) {
|
||||
direction = direction === 'asc' ? 'desc' : 'asc';
|
||||
} else {
|
||||
orderBy = key;
|
||||
direction = 'asc';
|
||||
}
|
||||
};
|
||||
|
||||
const getUserList = async () => {
|
||||
try {
|
||||
const res = await getChannelUsersById(
|
||||
localStorage.token,
|
||||
channel.id,
|
||||
query,
|
||||
orderBy,
|
||||
direction,
|
||||
page
|
||||
).catch((error) => {
|
||||
toast.error(`${error}`);
|
||||
return null;
|
||||
});
|
||||
|
||||
if (res) {
|
||||
users = res.users;
|
||||
total = res.total;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
|
||||
$: if (page) {
|
||||
getUserList();
|
||||
}
|
||||
|
||||
$: if (query !== null && orderBy && direction) {
|
||||
getUserList();
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col">
|
||||
{#if users === null || total === null}
|
||||
<div class="my-10">
|
||||
<Spinner className="size-5" />
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex gap-1">
|
||||
<div class=" flex w-full space-x-2">
|
||||
<div class="flex flex-1">
|
||||
<div class=" self-center ml-1 mr-3">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
class="w-4 h-4"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<input
|
||||
class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-hidden bg-transparent"
|
||||
bind:value={query}
|
||||
placeholder={$i18n.t('Search')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="scrollbar-hidden relative whitespace-nowrap w-full max-w-full">
|
||||
<div class=" text-sm text-left text-gray-500 dark:text-gray-400 w-full max-w-full">
|
||||
<div
|
||||
class="text-xs text-gray-800 uppercase bg-transparent dark:text-gray-200 w-full mb-0.5"
|
||||
>
|
||||
<div
|
||||
class=" border-b-[1.5px] border-gray-50 dark:border-gray-850 flex items-center justify-between"
|
||||
>
|
||||
<button
|
||||
class="px-2.5 py-2 cursor-pointer select-none"
|
||||
on:click={() => setSortKey('name')}
|
||||
>
|
||||
<div class="flex gap-1.5 items-center">
|
||||
{$i18n.t('Name')}
|
||||
|
||||
{#if orderBy === 'name'}
|
||||
<span class="font-normal"
|
||||
>{#if direction === 'asc'}
|
||||
<ChevronUp className="size-2" />
|
||||
{:else}
|
||||
<ChevronDown className="size-2" />
|
||||
{/if}
|
||||
</span>
|
||||
{:else}
|
||||
<span class="invisible">
|
||||
<ChevronUp className="size-2" />
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="px-2.5 py-2 cursor-pointer select-none"
|
||||
on:click={() => setSortKey('role')}
|
||||
>
|
||||
<div class="flex gap-1.5 items-center">
|
||||
{$i18n.t('Role')}
|
||||
|
||||
{#if orderBy === 'role'}
|
||||
<span class="font-normal"
|
||||
>{#if direction === 'asc'}
|
||||
<ChevronUp className="size-2" />
|
||||
{:else}
|
||||
<ChevronDown className="size-2" />
|
||||
{/if}
|
||||
</span>
|
||||
{:else}
|
||||
<span class="invisible">
|
||||
<ChevronUp className="size-2" />
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
{#each users as user, userIdx}
|
||||
<div class=" dark:border-gray-850 text-xs flex items-center justify-between">
|
||||
<div class="px-3 py-1.5 font-medium text-gray-900 dark:text-white flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<ProfilePreview {user} side="right" align="center" sideOffset={6}>
|
||||
<img
|
||||
class="rounded-2xl w-6 h-6 object-cover flex-shrink-0"
|
||||
src={`${WEBUI_API_BASE_URL}/users/${user.id}/profile/image`}
|
||||
alt="user"
|
||||
/>
|
||||
</ProfilePreview>
|
||||
<Tooltip content={user.email} placement="top-start">
|
||||
<div class="font-medium truncate">{user.name}</div>
|
||||
</Tooltip>
|
||||
|
||||
{#if user?.is_active}
|
||||
<div>
|
||||
<span class="relative flex size-1.5">
|
||||
<span
|
||||
class="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"
|
||||
></span>
|
||||
<span class="relative inline-flex size-1.5 rounded-full bg-green-500"
|
||||
></span>
|
||||
</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-3 py-1">
|
||||
<div class=" translate-y-0.5">
|
||||
<Badge
|
||||
type={user.role === 'admin'
|
||||
? 'info'
|
||||
: user.role === 'user'
|
||||
? 'success'
|
||||
: 'muted'}
|
||||
content={$i18n.t(user.role)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if total > 30}
|
||||
<Pagination bind:page count={total} perPage={30} />
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
|
@ -7,6 +7,10 @@
|
|||
import UserStatusLinkPreview from './UserStatusLinkPreview.svelte';
|
||||
|
||||
export let user = null;
|
||||
|
||||
export let align = 'center';
|
||||
export let side = 'right';
|
||||
export let sideOffset = 8;
|
||||
</script>
|
||||
|
||||
<LinkPreview.Root openDelay={0} closeDelay={0}>
|
||||
|
|
@ -14,5 +18,5 @@
|
|||
<slot />
|
||||
</LinkPreview.Trigger>
|
||||
|
||||
<UserStatusLinkPreview id={user?.id} side="right" align="center" sideOffset={8} />
|
||||
<UserStatusLinkPreview id={user?.id} {side} {align} {sideOffset} />
|
||||
</LinkPreview.Root>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
|
||||
{#if user}
|
||||
<LinkPreview.Content
|
||||
class="w-full max-w-[260px] rounded-2xl border border-gray-100 dark:border-gray-800 z-999 bg-white dark:bg-gray-850 dark:text-white shadow-lg transition"
|
||||
class="w-full max-w-[260px] rounded-2xl border border-gray-100 dark:border-gray-800 z-[99999] bg-white dark:bg-gray-850 dark:text-white shadow-lg transition"
|
||||
{side}
|
||||
{align}
|
||||
{sideOffset}
|
||||
|
|
|
|||
|
|
@ -16,12 +16,16 @@
|
|||
import Hashtag from '../icons/Hashtag.svelte';
|
||||
import Lock from '../icons/Lock.svelte';
|
||||
import UserAlt from '../icons/UserAlt.svelte';
|
||||
import ChannelInfoModal from './ChannelInfoModal.svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
let showChannelInfoModal = false;
|
||||
|
||||
export let channel;
|
||||
</script>
|
||||
|
||||
<ChannelInfoModal bind:show={showChannelInfoModal} {channel} />
|
||||
<nav class="sticky top-0 z-30 w-full px-1.5 py-1 -mb-8 flex items-center drag-region">
|
||||
<div
|
||||
id="navbar-bg-gradient-to-b"
|
||||
|
|
@ -85,6 +89,10 @@
|
|||
<button
|
||||
class=" flex cursor-pointer py-1 px-1.5 border dark:border-gray-850 border-gray-50 rounded-xl text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-850 transition"
|
||||
aria-label="User Count"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
showChannelInfoModal = true;
|
||||
}}
|
||||
>
|
||||
<div class=" flex items-center gap-0.5 m-auto self-center">
|
||||
<UserAlt className=" size-4" strokeWidth="1.5" />
|
||||
|
|
|
|||
Loading…
Reference in a new issue