+
+
+
{mentionCount()?.toLocaleString()}
-
-
+
+
-
-
+
+
- )
+ );
}
-function GuildMajorLink(props: { icon: IconElement, label: string, href: string, active: boolean }) {
+function GuildMajorLink(props: {
+ icon: IconElement;
+ label: string;
+ href: string;
+ active: boolean;
+}) {
return (
-
+
-
+
{props.label}
- )
+ );
}
export default function GuildSidebar() {
- const params = useParams()
- const navigate = useNavigate()
- const guildId = createMemo(() => BigInt(params.guildId))
- const channelId = createMemo(() => params.channelId && BigInt(params.channelId))
- const contextMenu = useContextMenu()!
- const {showModal} = useModal()
+ const params = useParams();
+ const navigate = useNavigate();
+ const guildId = createMemo(() => BigInt(params.guildId));
+ const channelId = createMemo(
+ () => params.channelId && BigInt(params.channelId),
+ );
+ const contextMenu = useContextMenu()!;
+ const { showModal } = useModal();
- const api = getApi()!
- const guild = createMemo(() => api.cache!.guilds.get(guildId())!)
- if (!guild()) return
+ const api = getApi()!;
+ const guild = createMemo(() => api.cache!.guilds.get(guildId())!);
+ if (!guild()) return;
- const [dropdownExpanded, setDropdownExpanded] = createSignal(false)
- const isOwner = createMemo(() => guild().owner_id === api.cache?.clientUser?.id)
+ const [dropdownExpanded, setDropdownExpanded] = createSignal(false);
+ const isOwner = createMemo(
+ () => guild().owner_id === api.cache?.clientUser?.id,
+ );
- let dropdownRef: HTMLUListElement | undefined
- let toggleRef: HTMLDivElement | undefined
+ let dropdownRef: HTMLUListElement | undefined;
+ let toggleRef: HTMLDivElement | undefined;
onMount(() => {
const handleClick = (e: MouseEvent) => {
- if (!dropdownExpanded()) return
+ if (!dropdownExpanded()) return;
if (
!dropdownRef?.contains(e.target as Node) &&
!toggleRef?.contains(e.target as Node)
) {
- setDropdownExpanded(false)
+ setDropdownExpanded(false);
}
- }
+ };
- document.addEventListener("click", handleClick)
- onCleanup(() => document.removeEventListener("click", handleClick))
- })
+ document.addEventListener("click", handleClick);
+ onCleanup(() => document.removeEventListener("click", handleClick));
+ });
const BaseContextMenu = () => (
-
+
showModal(ModalId.CreateInvite, guild())}
/>
- )
- const guildPermissions = createMemo(() => api.cache?.getClientPermissions(guildId()))
+ );
+ const guildPermissions = createMemo(() =>
+ api.cache?.getClientPermissions(guildId()),
+ );
const channels = createMemo(() => {
const channels = api.cache?.guildChannelReactor
?.get(guildId())
- ?.map(id => api.cache!.channels.get(id) as GuildChannel)
- ?.filter(c => c && api.cache?.getClientPermissions(guildId(), c.id).has('VIEW_CHANNEL'))
- if (!channels) return
+ ?.map((id) => api.cache!.channels.get(id) as GuildChannel)
+ ?.filter(
+ (c) =>
+ c &&
+ api.cache?.getClientPermissions(guildId(), c.id).has("VIEW_CHANNEL"),
+ );
+ if (!channels) return;
- const groups = new Map([
+ const groups = new Map<
+ bigint | null,
+ { category: GuildChannel; children: GuildChannel[] }
+ >([
[null, { category: null, children: [] }] as any,
...channels
- ?.filter(c => c.type === 'category')
- ?.map(c => [c.id, { category: c, children: [] }])
- ])
- channels.forEach(c => groups.get(c.parent_id ? BigInt(c.parent_id) : null)?.children.push(c))
- groups.forEach(group => group.children.sort((a, b) => {
- const aIsCategory = a.type === 'category'
- const bIsCategory = b.type === 'category'
- if (aIsCategory && !bIsCategory) return 1
- if (!aIsCategory && bIsCategory) return -1
- return a.position - b.position
- }))
- return groups
- })
- const collapsed = new ReactiveSet()
+ ?.filter((c) => c.type === "category")
+ ?.map((c) => [c.id, { category: c, children: [] }]),
+ ]);
+ channels.forEach((c) =>
+ groups.get(c.parent_id ? BigInt(c.parent_id) : null)?.children.push(c),
+ );
+ groups.forEach((group) =>
+ group.children.sort((a, b) => {
+ const aIsCategory = a.type === "category";
+ const bIsCategory = b.type === "category";
+ if (aIsCategory && !bIsCategory) return 1;
+ if (!aIsCategory && bIsCategory) return -1;
+ return a.position - b.position;
+ }),
+ );
+ return groups;
+ });
+ const collapsed = new ReactiveSet();
- const RenderChannel = (props: { channel: GuildChannel, collapsed?: boolean }) => (
-
-
-
- }>
-
+ const RenderChannel = (props: {
+ channel: GuildChannel;
+ collapsed?: boolean;
+ }) => (
+
+
+
+ }
+ >
+
- )
-
+ );
+
const RenderCategory = (props: {
- id: bigint, group: { category: GuildChannel, children: GuildChannel[] }
+ id: bigint;
+ group: { category: GuildChannel; children: GuildChannel[] };
}) => {
return (
-
0
- || (props.id ? api.cache!.getClientPermissions(guildId(), props.id) : guildPermissions())?.has('MANAGE_CHANNELS')
- }>
+ 0 ||
+ (props.id
+ ? api.cache!.getClientPermissions(guildId(), props.id)
+ : guildPermissions()
+ )?.has("MANAGE_CHANNELS")
+ }
+ >
window.navigator.clipboard.writeText(props.id.toString())}
+ onClick={() =>
+ window.navigator.clipboard.writeText(props.id.toString())
+ }
/>
-
+
showModal(ModalId.DeleteChannel, props.group.category)}
+ onClick={() =>
+ showModal(ModalId.DeleteChannel, props.group.category)
+ }
/>
-
+ ,
)}
>
-
-
-
- Empty Category
-