feat: add linked instances page

package.json

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

src/lib/components/lemmy/SiteCard.svelte

@@ -60,14 +60,22 @@
     </span>
   </div>
   <div class="flex flex-row items-center">
-    <Button href="/modlog" size="md" class="rounded-r-none">
+    <Button href="/modlog" size="sm" class="rounded-r-none">
       <Icon src={Newspaper} size="16" mini />
       Modlog
     </Button>
-    <Button href="/legal" size="md" class="rounded-l-none border-l-0">
+    <Button
+      href="/legal"
+      size="sm"
+      class="rounded-l-none rounded-r-none border-x-0"
+    >
       <Icon src={BuildingOffice} size="16" mini />
       Legal
     </Button>
+    <Button href="/instances" size="sm" class="rounded-l-none">
+      <Icon src={ServerStack} size="16" mini />
+      Instances
+    </Button>
   </div>
 
   {#if admins}

src/routes/instances/+page.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+  import Placeholder from '$lib/components/ui/Placeholder.svelte'
+  import RelativeDate from '$lib/components/util/RelativeDate.svelte'
+  import { publishedToDate } from '$lib/components/util/date.js'
+  import type { Instance } from 'lemmy-js-client'
+  import { Material, Popover } from 'mono-svelte'
+  import { Check, Icon, InformationCircle } from 'svelte-hero-icons'
+
+  export let data
+</script>
+
+<h1 class="font-bold text-3xl mb-4">Linked Instances</h1>
+{#if data}
+  <div class="flex flex-col md:flex-row gap-4">
+    <div class="flex-1 w-full max-h-[42rem] h-full flex flex-col gap-2">
+      <h2 class="font-bold text-xl flex flex-row items-center gap-1">
+        Linked
+        <Popover openOnHover>
+          <Icon src={InformationCircle} mini size="20" slot="target" />
+          <p class="font-normal">
+            These are the instances your instance can see and interact with
+            content from.
+          </p>
+        </Popover>
+      </h2>
+      <Material
+        class="h-full overflow-auto divide-y [&>*]:py-3 divide-slate-200 dark:divide-zinc-800"
+        color="distinct"
+      >
+        {#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>
+            </div>
+          {/each}
+        {:else}
+          <Placeholder
+            icon={Check}
+            title="No linked instances"
+            description="This instance likely has federation disabled."
+          />
+        {/if}
+      </Material>
+    </div>
+    <div class="flex-1 w-full max-h-[42rem] h-full flex flex-col gap-2">
+      <h2 class="font-bold text-xl flex flex-row items-center gap-1">
+        Blocked
+
+        <Popover openOnHover origin="bottom-center">
+          <Icon src={InformationCircle} mini size="20" slot="target" />
+          <p class="font-normal">
+            These are the instances your instance is explicitly blocking content
+            from.
+          </p>
+        </Popover>
+      </h2>
+      <Material
+        class="h-full overflow-auto divide-y [&>*]:py-3 divide-slate-200 dark:divide-zinc-800"
+        color="distinct"
+      >
+        {#if data.blocked && data.blocked.length > 0}
+          {#each data.blocked?.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>
+            </div>
+          {/each}
+        {:else}
+          <Placeholder
+            icon={Check}
+            title="No blocked instances"
+            description="Blocking an instance will hide submissions from that instance."
+          />
+        {/if}
+      </Material>
+    </div>
+  </div>
+{/if}

src/routes/instances/+page.ts

@@ -0,0 +1,11 @@
+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({
+      auth: get(profile)?.jwt,
+    })
+  ).federated_instances
+}