Allow for logos to be used as instance names

panel/web/src/components/LauncherPreview.svelte

@@ -4,7 +4,7 @@
   import { Play, Settings } from '@lucide/svelte';
   import type { Branding } from '../lib/types';
 
-  let { b, instanceName = 'Survival SMP' }: { b: Branding; instanceName?: string } = $props();
+  let { b, instanceName = 'Survival SMP', instanceLogo = null }: { b: Branding; instanceName?: string; instanceLogo?: string | null } = $props();
 
   const fontFamily = $derived(`'${b.font} Variable', '${b.font}', 'Inter Variable', sans-serif`);
   const media = $derived(b.background.kind !== 'gradient' && b.background.url ? b.background.url : null);
@@ -53,7 +53,11 @@
     <div class="main">
       <div class="hero">
         <div class="chips"><span>1.21.1</span><span>Fabric</span></div>
-        <h1>{instanceName}</h1>
+        {#if instanceLogo}
+          <img class="hero-logo" src={instanceLogo} alt={instanceName} />
+        {:else}
+          <h1>{instanceName}</h1>
+        {/if}
         <p>{b.tagline}</p>
         <div class="row">
           <span class="play"><Play size={9} fill="currentColor" /> Play</span>
@@ -103,6 +107,7 @@
   .avatar { width: 55%; aspect-ratio: 1; border-radius: 25%; background: #3fb97c; }
   .main { position: absolute; left: 6.2%; top: 5.6%; right: 0; bottom: 0; padding: 4% 4%; z-index: 1; display: flex; gap: 6%; }
   .hero { flex: 1; align-self: flex-end; display: flex; flex-direction: column; gap: 0.6em; }
+  .hero-logo { max-height: 2.8em; max-width: 80%; object-fit: contain; object-position: left bottom; }
   .hero h1 { font-size: 3.1em; line-height: 1.05; margin: 0; letter-spacing: -0.025em; font-weight: 700; }
   .hero p { color: var(--mut); font-size: 0.95em; margin: 0; }
   .chips { display: flex; gap: 0.4em; }