Modlog/instance browsing improvements

src/lib/components/lemmy/SiteCard.svelte

@@ -5,7 +5,7 @@
   import FormattedNumber from '$lib/components/util/FormattedNumber.svelte'
   import RelativeDate from '$lib/components/util/RelativeDate.svelte'
   import { publishedToDate } from '$lib/components/util/date.js'
-  import { getClient } from '$lib/lemmy.js'
+  import { site as instance } from '$lib/lemmy.js'
   import type { PersonView, SiteView, Tagline } from 'lemmy-js-client'
   import { Button, Popover } from 'mono-svelte'
   import {
@@ -23,6 +23,10 @@
   export let taglines: Tagline[] | undefined = undefined
   export let admins: PersonView[] | undefined = undefined
   export let version: string | undefined = undefined
+
+  const siteLink = (href: string) => 
+    site.site.actor_id !== $instance?.site_view.site.actor_id ? 
+      `${href}/${new URL(site.site.actor_id).hostname}` : href
 </script>
 
 <StickyCard class="w-full {$$props.class}">
@@ -60,18 +64,18 @@
     </span>
   </div>
   <div class="flex flex-col 3xl:flex-row 3xl:items-center gap-2 3xl:gap-0">
-    <Button href="/modlog" class="3xl:rounded-r-none">
+    <Button href={siteLink("/modlog")} class="3xl:rounded-r-none">
       <Icon src={Newspaper} size="16" mini />
       Modlog
     </Button>
     <Button
-      href="/legal"
+      href={siteLink("/legal")}
       class="3xl:rounded-l-none 3xl:rounded-r-none 3xl:border-x-0"
     >
       <Icon src={BuildingOffice} size="16" mini />
       Legal
     </Button>
-    <Button href="/instances" class="3xl:rounded-l-none">
+    <Button href={siteLink("/instances")} class="3xl:rounded-l-none">
       <Icon src={ServerStack} size="16" mini />
       Instances
     </Button>

src/routes/instances/+page.svelte → src/routes/instances/[[instance]]/+page.svelte

@@ -1,14 +1,39 @@
 <script lang="ts">
   import Placeholder from '$lib/components/ui/Placeholder.svelte'
   import RelativeDate from '$lib/components/util/RelativeDate.svelte'
+  import SiteCard from '$lib/components/lemmy/SiteCard.svelte'
   import { publishedToDate } from '$lib/components/util/date.js'
-  import type { Instance } from 'lemmy-js-client'
-  import { Material, Popover } from 'mono-svelte'
+  import { getClient } from '$lib/lemmy.js';
+  import { Material, MenuButton, Modal, Popover, Spinner } from 'mono-svelte'
   import { Check, Icon, InformationCircle } from 'svelte-hero-icons'
+  import type { Instance } from 'lemmy-js-client';
 
   export let data
+
+  let instance: string | undefined = undefined
+  let modalOpen: boolean = false
+
+  const showModal = (_instance: Instance) => {
+    instance = _instance.domain
+    modalOpen = !modalOpen
+  }
 </script>
 
+<Modal bind:open={modalOpen}>
+  {#await getClient(instance).getSite()}
+    <Spinner />
+  {:then site}
+  <SiteCard
+    site={site.site_view}
+    taglines={site.taglines}
+    admins={site.admins}
+    version={site.version}
+  />
+  {:catch}
+    <p>Not a Lemmy instance</p>
+  {/await}
+</Modal>
+
 <h1 class="font-bold text-3xl mb-4">Linked Instances</h1>
 {#if data}
   <div class="flex flex-col md:flex-row gap-4">
@@ -30,16 +55,18 @@
         {#if data.linked && data.linked.length > 0}
           {#each data.linked?.sort((b, a) => b.id - a.id) as instance}
             <div class="flex justify-between items-center first:pt-0 last:pb-0">
-              <div class="flex flex-col">
-                <span class="font-medium">{instance.domain}</span>
-                <span
-                  class="text-xs text-slate-600 dark:text-zinc-400 capitalize"
-                >
-                  {instance.software ?? 'Unknown'} • <RelativeDate
-                    date={publishedToDate(instance.published)}
-                  />
-                </span>
-              </div>
+              <MenuButton on:click={() => showModal(instance)}>
+                <div class="flex flex-col">
+                  <span class="font-medium">{instance.domain}</span>
+                  <span
+                    class="text-xs text-slate-600 dark:text-zinc-400 capitalize"
+                  >
+                    {instance.software ?? 'Unknown'} • <RelativeDate
+                      date={publishedToDate(instance.published)}
+                    />
+                  </span>
+                </div>
+              </MenuButton>
             </div>
           {/each}
         {:else}

src/routes/instances/+page.ts → src/routes/instances/[[instance]]/+page.ts

@@ -2,7 +2,7 @@ import { profile } from '$lib/auth.js'
 import { getClient } from '$lib/lemmy.js'
 import { get } from 'svelte/store'
 
-export async function load({ fetch }) {
-  return (await getClient(undefined, fetch).getFederatedInstances())
+export async function load({ params, fetch }) {
+  return (await getClient(params.instance, fetch).getFederatedInstances())
     .federated_instances
 }

src/routes/legal/+page.svelte → src/routes/legal/[[instance]]/+page.svelte

@@ -4,16 +4,18 @@
   import { site } from '$lib/lemmy'
   import { Button, Modal, Spinner } from 'mono-svelte'
 
+  export let data
+
   let siteOpen: boolean = false
 </script>
 
 <div class="flex flex-row w-full">
-  {#if $site}
+  {#if data.site}
     <Modal bind:open={siteOpen}>
       <SiteCard
-        site={$site.site_view}
-        admins={$site.admins}
-        taglines={$site.taglines}
+        site={data.site.site_view}
+        admins={data.site.admins}
+        taglines={data.site.taglines}
       />
     </Modal>
 
@@ -24,7 +26,7 @@
         </span>
       </h1>
       <Markdown
-        source={$site.site_view.local_site.legal_information ??
+        source={data.site.site_view.local_site.legal_information ??
           'This instance does not have any legal information.'}
       />
     </div>

src/routes/legal/[[instance]]/+page.ts

@@ -0,0 +1,12 @@
+import { getClient, site } from '$lib/lemmy.js'
+import { get } from 'svelte/store'
+
+export async function load({ params }) {
+  const siteData = params.instance
+    ? await getClient(params.instance).getSite()
+    : get(site)
+
+  return {
+    site: siteData
+  }
+}

src/routes/modlog/+page.svelte → src/routes/modlog/[[instance]]/+page.svelte

@@ -5,8 +5,8 @@
   import ObjectAutocomplete from '$lib/components/lemmy/ObjectAutocomplete.svelte'
   import { profile } from '$lib/auth.js'
   import { userSettings } from '$lib/settings.js'
-  import ModlogItemCard from './item/ModlogItemCard.svelte'
-  import ModlogItemTable from './item/ModlogItemTable.svelte'
+  import ModlogItemCard from '../item/ModlogItemCard.svelte'
+  import ModlogItemTable from '../item/ModlogItemTable.svelte'
   import { Select } from 'mono-svelte'
   import {
     Bars3BottomRight,
@@ -74,29 +74,14 @@
     </Select>
   </div>
   <div class="flex flex-col md:flex-row md:items-center gap-2 w-full">
-    <ObjectAutocomplete
-      type="instance"
-      placeholder="Filter by instance"
-      jwt={$profile?.jwt}
-      showWhenEmpty={true}
-      label="Instance"
-      class="flex-1"
-      q={$page.url.searchParams.get('instance') || ''}
-      on:select={(e) =>
-        searchParam(
-          $page.url,
-          'instance',
-          e.detail?.domain.toString() ?? '',
-          'page', 'community', 'user', 'mod_id'
-        )}
-    />
     <ObjectAutocomplete
       placeholder="Filter by community"
       jwt={$profile?.jwt}
       listing_type="All"
       showWhenEmpty={true}
       label="Community"
       class="flex-1"
+      instance={$page.params.instance}
       q={$page.url.searchParams.get('community') ? 'Selected' : ''}
       on:select={(e) =>
         searchParam(
@@ -107,13 +92,13 @@
         )}
     />
     <UserAutocomplete
-      instance={$page.url.searchParams.get('instance') || undefined}
       placeholder="Filter by user"
       jwt={$profile?.jwt}
       listing_type="All"
       showWhenEmpty={true}
       class="flex-1"
       label="User"
+      instance={$page.params.instance}
       q={$page.url.searchParams.get('user') ? 'Selected' : ''}
       on:select={(e) =>
         searchParam($page.url, 'user', e.detail?.id.toString() ?? '', 'page')}
@@ -126,6 +111,7 @@
         showWhenEmpty={true}
         class="flex-1"
         label="Moderator"
+        instance={$page.params.instance}
         q={$page.url.searchParams.get('mod_id') ? 'Selected' : ''}
         on:select={(e) =>
           searchParam(

src/routes/modlog/+page.ts → src/routes/modlog/[[instance]]/+page.ts

@@ -202,16 +202,15 @@ export const _toModLog = (item: ModAction): ModLog => {
   }
 }
 
-export async function load({ url }) {
-  let instance = url.searchParams.get('instance') || undefined
+export async function load({ params, url }) {
   let community = Number(url.searchParams.get('community')) || undefined
   let user = Number(url.searchParams.get('user')) || undefined
   let modId = Number(url.searchParams.get('mod_id')) || undefined
   const page = Number(url.searchParams.get('page')) || 1
   let type: ModlogActionType =
     (url.searchParams.get('type') as ModlogActionType) || 'All'
 
-  const results = await getClient(instance).getModlog({
+  const results = await getClient(params.instance).getModlog({
     community_id: community,
     limit: 40,
     type_: type,