After theme update features

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "Alexandrite",
-	"version": "0.8.14",
+	"version": "0.8.15",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev --host 0.0.0.0",
@@ -29,7 +29,7 @@
 		"prettier": "^3.0.3",
 		"prettier-plugin-svelte": "^3.0.3",
 		"sass": "^1.69.4",
-		"sheodox-ui": "^0.20.4",
+		"sheodox-ui": "^0.20.6",
 		"svelte": "^4.2.2",
 		"svelte-check": "^3.5.2",
 		"tslib": "^2.6.2",
@@ -41,7 +41,7 @@
 	"dependencies": {
 		"@fortawesome/fontawesome-free": "^6.4.2",
 		"date-fns": "^2.30.0",
-		"lemmy-js-client": "^0.19.0-rc.19",
+		"lemmy-js-client": "^0.19.6",
 		"markdown-it": "^13.0.2",
 		"markdown-it-container": "^3.0.0",
 		"markdown-it-footnote": "^3.0.3",

src/lib/CommunitySidebar.svelte

@@ -1,6 +1,11 @@
 <article>
 	{#if community && communityView}
-		<Sidebar description={community.description ?? ''} bannerImageSrc={community.banner} context="Community">
+		<Sidebar
+			description={community.description ?? ''}
+			bannerImageSrc={community.banner}
+			context="Community"
+			bind:descriptionOpen={$descriptionOpen}
+		>
 			<a href={communityHref} slot="name">
 				<NameAtInstance place={community} prefix="!" />
 			</a>
@@ -10,32 +15,43 @@
 					{#if communityView}
 						<CommunityCounts {communityView} />
 					{/if}
-					<Stack dir="r" gap={2} align="center">
-						<ExternalLink href={community.actor_id} cl="inline-link">
-							<Icon icon="arrow-up-right-from-square" />
-							View on {communityInstance}
-						</ExternalLink>
-					</Stack>
 				</Stack>
 			</div>
 			<div slot="end">
-				<Stack dir="c" gap={2}>
+				<Accordion bind:open={$communityDetailsOpen}>
+					<span slot="title"><Icon icon="users" /> Community Details</span>
+					<ul class="sx-list">
+						{#each communityStats as stat}
+							<li class="sx-list-item two-columns">
+								<span class="column">{stat.label}</span>
+								<span class="column text-align-right">{stat.value.toLocaleString()} <Icon icon={stat.icon} /></span>
+							</li>
+						{/each}
+						<li class="sx-list-item">
+							<ModlogLink
+								communityId={community.id}
+								highlight={userModerates ?? false}
+								highlightColor="green"
+								warn={warnModlog}
+							/>
+						</li>
+						<li class="sx-list-item">
+							<ExternalLink href={community.actor_id} cl="inline-link">
+								<Icon icon="arrow-up-right-from-square" />
+								View on {communityInstance}
+							</ExternalLink>
+						</li>
+					</ul>
+
 					{#if moderators}
-						<Accordion buttonClasses="tertiary">
-							<span slot="title">Moderation</span>
+						<Accordion>
+							<span slot="title">Moderators</span>
 							<Stack dir="c" gap={2}>
-								<Stack dir="r" gap={2} align="center" justify="between">
-									<h3 class="m-0">Moderators</h3>
-									<ModlogLink
-										communityId={community.id}
-										highlight={userModerates ?? false}
-										highlightColor="green"
-										warn={warnModlog}
-									/>
-								</Stack>
-								<ul class="p-0 hover-list" style="list-style: none">
+								<ul class="sx-list">
 									{#each moderators as mod}
-										<ModeratorRow hasSeniority={hasModSeniority(moderators, mod.moderator.id)} {mod} />
+										<li class="sx-list-item">
+											<ModeratorRow hasSeniority={hasModSeniority(moderators, mod.moderator.id)} {mod} />
+										</li>
 									{/each}
 								</ul>
 								{#if userModerates && !userIsHeadMod}
@@ -48,7 +64,7 @@
 							</Stack>
 						</Accordion>
 					{/if}
-				</Stack>
+				</Accordion>
 			</div>
 		</Sidebar>
 	{/if}
@@ -69,6 +85,7 @@
 	import { getCommunityContext } from './community-context/community-context';
 	import { getModActionPending, getModContext } from './mod/mod-context';
 	import { readable } from 'svelte/store';
+	import { localStorageBackedStore } from './utils';
 
 	export let communityName: string;
 
@@ -81,6 +98,43 @@
 	$: userModerates = moderators?.some((mod) => mod.moderator.id === $siteMeta.my_user?.local_user_view.person.id);
 	$: userIsHeadMod = moderators?.[0]?.moderator.id === $userId;
 	$: warnModlog = userModerates ? $showModlogWarningModerated : $showModlogWarning;
+	$: communityStats = [
+		{
+			label: 'Posts',
+			value: communityView?.counts.posts ?? 0,
+			icon: 'file-lines'
+		},
+		{
+			label: 'Comments',
+			value: communityView?.counts.comments ?? 0,
+			icon: 'comments'
+		},
+		{
+			label: 'Subscribers',
+			value: communityView?.counts.subscribers ?? 0,
+			icon: 'users'
+		},
+		{
+			label: 'Daily Active Users',
+			value: communityView?.counts.users_active_day ?? 0,
+			icon: 'users'
+		},
+		{
+			label: 'Weekly Active Users',
+			value: communityView?.counts.users_active_week ?? 0,
+			icon: 'users'
+		},
+		{
+			label: 'Montly Active Users',
+			value: communityView?.counts.users_active_month ?? 0,
+			icon: 'users'
+		},
+		{
+			label: 'Half-Year Active Users',
+			value: communityView?.counts.users_active_half_year ?? 0,
+			icon: 'users'
+		}
+	];
 
 	$: communityInstance = community ? new URL(community.actor_id).host : null;
 
@@ -89,6 +143,9 @@
 	const { hasModSeniority } = getCommunityContext();
 	const modContext = getModContext();
 
+	const descriptionOpen = localStorageBackedStore('community-sidebar-description-open', true);
+	const communityDetailsOpen = localStorageBackedStore('community-sidebar-community-details-open', true);
+
 	const userModResignPending = community
 		? getModActionPending('add-mod', `${community.id}-${userId}`)
 		: readable(false);