Launcher: scrollable command guide, profile tabs fit without scrolling, confirm before removing a friend

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

launcher/src/components/PlayerProfileModal.svelte

@@ -30,6 +30,7 @@
   let editBanner = $state('');
   let editAccent = $state('');
   let relationBusy = $state(false);
+  let confirmRemove = $state(false);
   const swatches = ['#8b6cff', '#22d3ee', '#34d399', '#fbbf24', '#fb7185', '#f472b6', '#60a5fa'];
   let savingProfile = $state(false);
 
@@ -215,7 +216,13 @@
         <div class="relation-bar">
           {#if profile.relationship === 'accepted'}
             <button class="sm primary" onclick={message}><MessageSquare size={14} /> Message</button>
-            <button class="sm ghost" disabled={relationBusy} onclick={() => relate('remove')}><UserMinus size={14} /> Remove friend</button>
+            {#if confirmRemove}
+              <span class="tiny muted">Remove {profile.username} from your friends?</span>
+              <button class="sm danger" disabled={relationBusy} onclick={() => { confirmRemove = false; relate('remove'); }}>Yes, remove</button>
+              <button class="sm ghost" onclick={() => (confirmRemove = false)}>Keep</button>
+            {:else}
+              <button class="sm ghost" disabled={relationBusy} onclick={() => (confirmRemove = true)}><UserMinus size={14} /> Remove friend</button>
+            {/if}
           {:else if profile.relationship === 'pending_incoming'}
             <span class="tiny muted">{profile.username} wants to be friends</span>
             <button class="sm primary" disabled={relationBusy} onclick={() => relate('accept')}><UserCheck size={14} /> Accept</button>
@@ -275,19 +282,19 @@
       <!-- Segmented Profile Tabs -->
       <div class="profile-tabs">
         <button class:active={activeTab === 'overview'} onclick={() => (activeTab = 'overview')}>
-          <LayoutGrid size={14} /> Overview
+          <LayoutGrid size={14} /> <span>Overview</span>
         </button>
         <button class:active={activeTab === 'feed'} onclick={() => (activeTab = 'feed')}>
-          <MessageSquare size={14} /> Posts & Feed
+          <MessageSquare size={14} /> <span>Posts</span>
         </button>
         <button class:active={activeTab === 'progression'} onclick={() => (activeTab = 'progression')}>
-          <Award size={14} /> Levels & Ranks
+          <Award size={14} /> <span>Levels</span>
         </button>
         <button class:active={activeTab === 'achievements'} onclick={() => (activeTab = 'achievements')}>
-          <Trophy size={14} /> Achievements ({profile.achievements_count ?? profile.achievements?.length ?? 0})
+          <Trophy size={14} /> <span>Awards {profile.achievements_count ?? profile.achievements?.length ?? 0}</span>
         </button>
         <button class:active={activeTab === 'stats'} onclick={() => (activeTab = 'stats')}>
-          <Swords size={14} /> Stats
+          <Swords size={14} /> <span>Stats</span>
         </button>
       </div>
 
@@ -538,7 +545,7 @@
   }
   .profile-modal {
     width: 100%;
-    max-width: 36rem;
+    max-width: 38rem;
     max-height: calc(100vh - 4rem);
     overflow-y: auto;
     background: var(--surface);
@@ -661,21 +668,24 @@
     font-size: 0.72rem;
   }
   .profile-tabs {
-    display: flex;
+    display: grid;
+    grid-template-columns: repeat(5, minmax(0, 1fr));
     border-bottom: 1px solid var(--line);
     background: color-mix(in srgb, var(--surface) 90%, black);
-    padding: 0 1rem;
-    gap: 0.3rem;
+    padding: 0 0.5rem;
+    gap: 0.15rem;
   }
   .profile-tabs button {
     display: flex;
     align-items: center;
-    gap: 0.35rem;
+    justify-content: center;
+    min-width: 0;
+    gap: 0.3rem;
     background: transparent;
     border: none;
     border-bottom: 2px solid transparent;
-    padding: 0.65rem 0.9rem;
-    font-size: 0.82rem;
+    padding: 0.65rem 0.25rem;
+    font-size: 0.8rem;
     font-weight: 560;
     color: var(--muted);
     border-radius: 0;
@@ -685,8 +695,10 @@
     color: var(--text);
     border-bottom-color: var(--pa, var(--accent));
   }
-  .profile-tabs { overflow-x: auto; }
   .profile-tabs button { white-space: nowrap; }
+  .profile-tabs button span { overflow: hidden; text-overflow: ellipsis; }
+  .profile-tabs button :global(svg) { flex-shrink: 0; }
+  @media (max-width: 34rem) { .profile-tabs button :global(svg) { display: none; } }
   .presence { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: color-mix(in srgb, var(--muted) 60%, transparent); }
   .presence.on { background: #34d399; box-shadow: 0 0 0 3px color-mix(in srgb, #34d399 25%, transparent); }
   .chips-row { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.25rem; }

launcher/src/pages/Commands.svelte

@@ -117,7 +117,7 @@
 </div>
 
 <style>
-  .page { flex: 1; display: flex; flex-direction: column; overflow-y: auto; padding: 1.6rem 2.2rem 2.5rem; gap: 1.2rem; }
+  .page { height: 100%; display: flex; flex-direction: column; overflow-y: auto; min-height: 0; padding: 1.6rem 2.2rem 2.5rem; gap: 1.2rem; }
   .head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 1rem; }
   h1 { font-size: 1.5rem; font-weight: 700; display: flex; align-items: center; gap: 0.6rem; margin: 0; }
   :global(.ic) { color: var(--accent); }

launcher/src/pages/Social.svelte

@@ -34,6 +34,9 @@
 
   // Send Game Invite Modal
   let inviteModalOpen = $state(false);
+  let removeTarget = $state<FriendInfo | null>(null);
+  let removeModalOpen = $state(false);
+  const askRemove = (friend: FriendInfo) => { removeTarget = friend; removeModalOpen = true; };
   let inviteTargetFriend = $state<FriendInfo | null>(null);
   let inviteInstanceId = $state(instances()[0]?.id ?? '');
   let sendingInvite = $state(false);
@@ -381,7 +384,7 @@
                 <button class="ghost icon sm" onclick={() => openInviteModal(friend)} title="Invite to Game">
                   <Gamepad2 size={15} />
                 </button>
-                <button class="ghost icon sm danger-hover" onclick={() => handleRemoveFriend(friend.uuid)} title="Remove Friend">
+                <button class="ghost icon sm danger-hover" onclick={() => askRemove(friend)} title="Remove Friend">
                   <UserX size={15} />
                 </button>
               </div>
@@ -625,6 +628,16 @@
 </div>
 
 <!-- Send Game Invite Modal -->
+<Modal bind:open={removeModalOpen} title="Remove {removeTarget?.username}?" width={24}>
+  <p class="muted">{removeTarget?.username} will be removed from your friends. You can send a new request later.</p>
+  {#snippet footer()}
+    <button class="ghost" onclick={() => (removeModalOpen = false)}>Keep friend</button>
+    <button class="danger" onclick={() => { const f = removeTarget; removeModalOpen = false; if (f) handleRemoveFriend(f.uuid); }}>
+      <UserX size={14} /> Remove
+    </button>
+  {/snippet}
+</Modal>
+
 <Modal bind:open={inviteModalOpen} title="Invite {inviteTargetFriend?.username} to Play" width={24}>
   <div class="invite-modal-body">
     <p class="tiny muted">