feat: add community cards with a hacky slot parameter

package.json

@@ -1,6 +1,6 @@
 {
   "name": "photon-lemmy",
-  "version": "1.17.4",
+  "version": "1.18.0",
   "private": true,
   "scripts": {
     "dev": "vite dev",

src/app.d.ts

@@ -1,12 +1,22 @@
 // See https://kit.svelte.dev/docs/types#app
+
+import type { ComponentType, SvelteComponent } from 'svelte'
+
 // for information about these interfaces
 declare global {
   namespace App {
     // interface Error {}
     interface Locals {
       instance?: string
     }
-    // interface PageData {}
+    interface PageData {
+      slots?: {
+        sidebar?: {
+          component?: ComponentType
+          props?: any
+        }
+      }
+    }
     // interface Platform {}
   }
   declare const __VERSION__: string

src/lib/auth.ts

@@ -253,8 +253,8 @@ instance.subscribe(async (i) => {
 export async function setUserID(id: number) {
   const pd = get(profileData)
   if (id == -1) {
-    instance.set(DEFAULT_INSTANCE_URL)
     resetProfile()
+    instance.set(DEFAULT_INSTANCE_URL)
     return
   }
 

src/lib/components/lemmy/SiteCard.svelte

@@ -25,7 +25,7 @@
   export let version: string | undefined = undefined
 </script>
 
-<StickyCard>
+<StickyCard class="w-full {$$props.class}">
   <div class="flex flex-row gap-3 items-center">
     {#if site.site.icon}
       <Avatar width={42} url={site.site.icon} alt={site.site.name} />
@@ -59,20 +59,19 @@
       <FormattedNumber number={site.counts.communities} />
     </span>
   </div>
-  <div class="flex flex-row items-center">
-    <Button href="/modlog" size="sm" class="rounded-r-none">
+  <div class="flex flex-col 3xl:flex-row 3xl:items-center gap-2 3xl:gap-0">
+    <Button href="/modlog" class="3xl:rounded-r-none">
       <Icon src={Newspaper} size="16" mini />
       Modlog
     </Button>
     <Button
       href="/legal"
-      size="sm"
-      class="rounded-l-none rounded-r-none border-x-0"
+      class="3xl:rounded-l-none 3xl:rounded-r-none 3xl:border-x-0"
     >
       <Icon src={BuildingOffice} size="16" mini />
       Legal
     </Button>
-    <Button href="/instances" size="sm" class="rounded-l-none">
+    <Button href="/instances" class="3xl:rounded-l-none">
       <Icon src={ServerStack} size="16" mini />
       Instances
     </Button>

src/lib/components/lemmy/community/CommunityCard.svelte

@@ -141,18 +141,21 @@
   </Modal>
 {/if}
 
-<StickyCard>
+<StickyCard class="min-w-full {$$props.class}">
   <div class="flex flex-row gap-3 items-center">
     <div class="flex-shrink-0">
       <Avatar
-        width={48}
+        width={42}
         url={community_view.community.icon}
         alt={community_view.community.name}
       />
     </div>
     <div class="flex flex-col gap-0">
       <h1 class="font-bold text-xl">{community_view.community.title}</h1>
-      <span class="dark:text-zinc-400 text-slate-600 text-sm">
+      <span
+        class="dark:text-zinc-400 text-slate-600 text-sm break-words max-w-full"
+        style="word-break: break-all;"
+      >
         !{community_view.community.name}@{new URL(
           community_view.community.actor_id
         ).hostname}
@@ -209,7 +212,6 @@
     <div class="w-full mt-2 flex flex-col gap-2">
       <Button
         href="/create/post"
-        color="ghost"
         size="lg"
         disabled={community_view.community.posting_restricted_to_mods}
       >
@@ -219,7 +221,6 @@
       <Button
         disabled={loading.subscribing}
         loading={loading.subscribing}
-        color="ghost"
         size="lg"
         on:click={subscribe}
       >

src/lib/components/ui/layout/Shell.svelte

@@ -29,8 +29,8 @@
   >
     <slot
       name="sidebar"
-      class="hidden md:flex sticky top-16 justify-self-end left-0 w-full max-w-full"
-      style="grid-area: sidebar; max-width: 20rem;"
+      class="hidden md:flex sticky top-16 left-0 w-full max-w-full"
+      style="grid-area: sidebar; width: 100% !important;"
     />
     <slot
       name="main"
@@ -39,8 +39,8 @@
     />
     <slot
       name="suffix"
-      class="hidden xl:flex w-full justify-self-start"
-      style="grid-area: suffix; max-width: 20rem;"
+      class="max-xl:hidden w-full"
+      style="grid-area: suffix;"
     />
   </div>
 </div>
@@ -76,13 +76,13 @@
 
   @media (min-width: 1280px) {
     .content {
-      grid-template-columns: 1fr 3fr 1fr;
+      grid-template-columns: 20% 1fr 20%;
       justify-items: end center start;
       grid-template-areas: 'sidebar main suffix';
     }
   }
 
   .limit-width {
-    max-width: 96rem;
+    max-width: 100rem;
   }
 </style>

src/routes/+layout.svelte

@@ -112,7 +112,13 @@
     <slot />
   </main>
   <div slot="suffix" let:class={c} let:style={s} class={c} style={s}>
-    {#if $site}
+    {#if $page.data.slots?.sidebar?.component}
+      <svelte:component
+        this={$page.data.slots.sidebar.component}
+        {...$page.data.slots.sidebar.props}
+        class={c}
+      />
+    {:else if $site}
       <SiteCard
         site={$site.site_view}
         taglines={$site.taglines}

src/routes/c/[name]/+layout.ts

@@ -1,29 +1,25 @@
 import { profile } from '$lib/auth.js'
+import CommunityCard from '$lib/components/lemmy/community/CommunityCard.svelte'
 import { getClient } from '$lib/lemmy.js'
 import { userSettings } from '$lib/settings.js'
 import type { ListingType, SortType } from 'lemmy-js-client'
 import { get } from 'svelte/store'
 
 export async function load(req: any) {
-  const cursor: string | undefined = req.url.searchParams.get('cursor')
-  const page = Number(req.url.searchParams.get('page')) || undefined
-
-  const sort: SortType =
-    (req.url.searchParams.get('sort') as SortType) ||
-    get(userSettings).defaultSort.sort
+  const community = await getClient(undefined, req.fetch).getCommunity({
+    name: req.params.name,
+  })
 
   return {
-    sort: sort,
-    page: page || 1,
-    posts: getClient(undefined, req.fetch).getPosts({
-      limit: 40,
-      community_name: req.params.name,
-      page: page,
-      sort: sort,
-      page_cursor: cursor
-    }),
-    community: getClient(undefined, req.fetch).getCommunity({
-      name: req.params.name,
-    }),
+    community: community,
+    slots: {
+      sidebar: {
+        component: CommunityCard,
+        props: {
+          community_view: community.community_view,
+          moderators: community.moderators,
+        },
+      },
+    },
   }
 }

src/routes/c/[name]/+page.ts

@@ -0,0 +1,27 @@
+import { client } from '$lib/lemmy.js'
+import { userSettings } from '$lib/settings.js'
+import type { SortType } from 'lemmy-js-client'
+import { get } from 'svelte/store'
+
+export async function load({ params, fetch, url }) {
+  const cursor: string | undefined = url.searchParams.get('cursor') as
+    | string
+    | undefined
+  const page = Number(url.searchParams.get('page')) || undefined
+
+  const sort: SortType =
+    (url.searchParams.get('sort') as SortType) ||
+    get(userSettings).defaultSort.sort
+
+  return {
+    sort: sort,
+    page: page || 1,
+    posts: client({ func: fetch }).getPosts({
+      limit: 40,
+      community_name: params.name,
+      page: page,
+      sort: sort,
+      page_cursor: cursor,
+    }),
+  }
+}