From 6027bbdf7a7fa94ba3103f580f558b9b80b03cb8 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 3 Aug 2026 16:48:57 +0000
Subject: [PATCH] feat: add server icon, edit link, and permanent tabs to
 plugin updater

Restores a few UI refinements from the pre-revert plugin-store work
(fbe520b..71d1368) that never made it back in: each server tab shows its
live favicon (or a Globe fallback) fetched via getServerStatus, tabs
linked to a real Server List listing are marked permanent so they can't
be accidentally deleted, and an external-link button next to linked tabs
opens that server's edit page. Also tightens the export button's padding
to match the rest of the toolbar row.

The external link now points at /serverlist/:slug/edit (the current
server management route) rather than the old /dashboard/servers/:slug
path from before the server list feature settled on its current routes.
---
 src/routes/resources/plugins/index.tsx | 44 ++++++++++++++++++++++++--
 src/util/serverlist/actions.ts         | 34 +++++++++++++++++++-
 2 files changed, 74 insertions(+), 4 deletions(-)

diff --git a/src/routes/resources/plugins/index.tsx b/src/routes/resources/plugins/index.tsx
index 1a338289..d4617dde 100644
--- a/src/routes/resources/plugins/index.tsx
+++ b/src/routes/resources/plugins/index.tsx
@@ -24,6 +24,8 @@ import Plus from 'lucide-icons-qwik/icons/Plus';
 import RefreshCw from 'lucide-icons-qwik/icons/RefreshCw';
 import Trash from 'lucide-icons-qwik/icons/Trash';
 import X from 'lucide-icons-qwik/icons/X';
+import { Link } from '@qwik.dev/router';
+import ExternalLink from 'lucide-icons-qwik/icons/ExternalLink';
 import { defaultDescription, generateHead } from '~/root';
 import { Label, SelectMenu, Tabs } from '@luminescent/ui-qwik';
 import PluginCard from '~/components/plugins/PluginCard';
@@ -108,6 +110,7 @@ export default component$(() => {
       name: string;
       slug: string;
       plugins: { [id: string]: PluginType } | null;
+      icon: string | null;
     }[]
   >([]);
 
@@ -300,9 +303,10 @@ export default component$(() => {
       </p>
 
       <Tabs
-        values={Object.keys(pluginsStore.servers).map((k) => ({
+        values={Object.entries(pluginsStore.servers).map(([k, v]) => ({
           name: k,
           value: k,
+          permanent: !!v.serverId,
         }))}
         value={
           pluginsStore.openServer
@@ -330,7 +334,41 @@ export default component$(() => {
             pluginsStore.openServer = serverName;
           }
         }}
-      ></Tabs>
+      >
+        {Object.keys(pluginsStore.servers).map((k, i) => {
+          const s = pluginsStore.servers[k];
+          const linked = userServers.value.find((us) => us.id === s.serverId);
+          return [
+            linked?.icon ? (
+              <img
+                key={i}
+                q:slot={`before-${k}`}
+                src={linked.icon}
+                alt={`${linked.name} icon`}
+                width={16}
+                height={16}
+                class="h-4 w-4 rounded-sm object-cover"
+                style={{ imageRendering: 'pixelated' }}
+              />
+            ) : (
+              <Globe q:slot={`before-${k}`} key={i} size={14} class="shrink-0" />
+            ),
+            ...(linked
+              ? [
+                  <Link
+                    key={`link-${i}`}
+                    q:slot={`after-${k}`}
+                    href={`/serverlist/${linked.slug}/edit`}
+                    class="lum-btn lum-bg-transparent z-10 rounded-full p-0"
+                    title={`Manage ${k} on serverlist`}
+                  >
+                    <ExternalLink size={16} />
+                  </Link>,
+                ]
+              : []),
+          ];
+        })}
+      </Tabs>
       {Object.keys(pluginsStore.servers).length < 1 && (
         <p class="text-lum-text-secondary mx-2 text-sm">
           {t(
@@ -402,7 +440,7 @@ export default component$(() => {
               </SelectMenu>
 
               <button
-                class="lum-btn lum-btn-p-2 rounded-lum-1 flex cursor-pointer items-center justify-center gap-2 border-none transition-all duration-300"
+                class="lum-btn lum-btn-p-1 rounded-lum-1 flex cursor-pointer items-center justify-center gap-2 border-none transition-all duration-300"
                 onClick$={() => {
                   if (!CurrentServer) return;
                   const exportedPlugins: { [id: string]: PluginType } = {};
diff --git a/src/util/serverlist/actions.ts b/src/util/serverlist/actions.ts
index 28ae93af..5936ffca 100644
--- a/src/util/serverlist/actions.ts
+++ b/src/util/serverlist/actions.ts
@@ -19,6 +19,7 @@ import {
 import { verifyTurnstile } from './turnstile';
 import { detectBirdflopHosted } from './birdflop';
 import { sendVotifierV2 } from './votifier';
+import { getServerStatus } from './status';
 import {
   claimServersPulseLink,
   isValidServersPulseLinkCode,
@@ -406,12 +407,43 @@ export const getUserServers = server$(async function () {
       name: servers.name,
       slug: servers.slug,
       plugins: servers.plugins,
+      edition: servers.edition,
+      javaHost: servers.javaHost,
+      javaPort: servers.javaPort,
+      bedrockHost: servers.bedrockHost,
+      bedrockPort: servers.bedrockPort,
     })
     .from(servers)
     .where(eq(servers.ownerId, session.user.id))
     .all();
 
-  return userServers;
+  return await Promise.all(
+    userServers.map(
+      async ({
+        edition,
+        javaHost,
+        javaPort,
+        bedrockHost,
+        bedrockPort,
+        ...rest
+      }) => {
+        let icon: string | null = null;
+        try {
+          const status = await getServerStatus({
+            edition,
+            javaHost,
+            javaPort,
+            bedrockHost,
+            bedrockPort,
+          });
+          icon = status?.icon ?? null;
+        } catch {
+          icon = null;
+        }
+        return { ...rest, icon };
+      }
+    )
+  );
 });
 
 export const updateServerPlugins = server$(async function (