Redesign guild treasury and territory toolbar; wallet API returns role and personal balance

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DjMbLQujBHunCCu5GpsHaT

launcher/src/pages/Home.svelte

@@ -1,17 +1,32 @@
 <script lang="ts">
-  import { SlidersHorizontal, SquareTerminal, Package, MessageCircle, Globe, ShoppingBag, CirclePlay, Tv, Code, AtSign, Link, Trophy } from '@lucide/svelte';
+  import { SlidersHorizontal, SquareTerminal, Package, MessageCircle, Globe, ShoppingBag, CirclePlay, Tv, Code, AtSign, Link, Trophy, Map as MapIcon } from '@lucide/svelte';
   import PlayButton from '../components/PlayButton.svelte';
   import ServerStatus from '../components/ServerStatus.svelte';
   import NewsFeed from '../components/NewsFeed.svelte';
   import Console from '../components/Console.svelte';
+  import LiveMapModal from '../components/LiveMapModal.svelte';
   import { abs, activeAccount, app, instances, selectedInstance } from '../lib/store.svelte';
   import { loaderName, shortLoaderVersion } from '../lib/format';
-  import { openUrl } from '../lib/tauri';
+  import { invoke, openUrl } from '../lib/tauri';
 
   const inst = $derived(selectedInstance());
   const b = $derived(app.manifest!.branding);
   // Lucide ships no brand logos, so each platform gets a recognisable generic icon.
   const linkIcon: Record<string, any> = { discord: MessageCircle, website: Globe, store: ShoppingBag, youtube: CirclePlay, twitch: Tv, github: Code, twitter: AtSign };
+  // A game server linked to this instance with the panel's Live Map switched on.
+  let mapServer = $state<{ id: number; name: string } | null>(null);
+  let mapOpen = $state(false);
+  $effect(() => {
+    const id = inst?.id;
+    mapServer = null;
+    mapOpen = false;
+    if (!id) return;
+    let alive = true;
+    invoke<{ servers: Array<{ id: number; name: string; instance_id: string; live_map?: boolean }> }>('get_public_servers')
+      .then((r) => { if (alive) mapServer = r.servers.find((s) => s.instance_id === id && s.live_map) ?? null; })
+      .catch(() => {});
+    return () => { alive = false; };
+  });
   const hour = new Date().getHours();
   const greet = hour < 5 ? 'Late night session' : hour < 12 ? 'Good morning' : hour < 18 ? 'Good afternoon' : 'Good evening';
 </script>
@@ -42,6 +57,7 @@
           <button class="glass tool" onclick={() => (app.instanceSettings = inst.id)} title="Instance settings"><SlidersHorizontal size={17} /></button>
           <button class="glass tool" class:on={app.consoleOpen} onclick={() => (app.consoleOpen = !app.consoleOpen)} title="Game console"><SquareTerminal size={17} /></button>
           <button class="glass tool" onclick={() => (app.view = 'stats')} title="Player stats & leaderboards"><Trophy size={17} /></button>
+          {#if mapServer}<button class="glass tool live" onclick={() => (mapOpen = true)} title="Open the live 3D map"><MapIcon size={17} /> <span>Live Map</span></button>{/if}
           {#if inst.server && b.features.server_status}<ServerStatus server={inst.server} />{/if}
         </div>
       </section>
@@ -66,6 +82,7 @@
   </aside>
 
   {#if app.consoleOpen}<Console />{/if}
+  {#if mapOpen && mapServer}<LiveMapModal serverId={mapServer.id} serverName={mapServer.name} onclose={() => (mapOpen = false)} />{/if}
 </div>
 
 <style>
@@ -81,6 +98,8 @@
   .actions { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 0.8rem; animation: fade 0.3s ease both; }
   .tools { flex-wrap: wrap; gap: 0.6rem; }
   .tool { width: 2.75rem; height: 2.75rem; padding: 0; border-radius: var(--radius); color: color-mix(in srgb, var(--text) 75%, transparent); background: var(--surface); }
+  .tool.live { width: auto; padding: 0 1rem; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 560; color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
+  .tool.live:hover { background: color-mix(in srgb, var(--accent) 24%, var(--surface)); }
   .tool.on { color: var(--text); border-color: var(--line-strong); background: color-mix(in srgb, var(--text) 8%, var(--surface)); }
   .side { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; min-height: 0; animation: fade 0.3s ease both; }
   .links { display: flex; flex-wrap: wrap; gap: 0.45rem; }