refactor: split App.svelte into components

7 files changed, 499 insertions, 0 deletions

diff --git a/ui/src/components/BottomBar.svelte b/ui/src/components/BottomBar.svelte
new file mode 100644
index 0000000..ceba5b3
--- /dev/null
+++ b/ui/src/components/BottomBar.svelte
@@ -0,0 +1,86 @@
+<script lang="ts">
+  import { authState } from "../stores/auth.svelte";
+  import { gameState } from "../stores/game.svelte";
+  import { uiState } from "../stores/ui.svelte";
+</script>
+
+<div
+  class="h-24 bg-zinc-900 border-t border-zinc-800 flex items-center px-8 justify-between z-20 shadow-2xl"
+>
+  <div class="flex items-center gap-4">
+    <div
+      class="flex items-center gap-4 cursor-pointer hover:opacity-80 transition-opacity"
+      onclick={() => authState.openLoginModal()}
+      role="button"
+      tabindex="0"
+      onkeydown={(e) => e.key === "Enter" && authState.openLoginModal()}
+    >
+      <div
+        class="w-12 h-12 rounded bg-gradient-to-tr from-indigo-500 to-purple-500 shadow-lg flex items-center justify-center text-white font-bold text-xl overflow-hidden"
+      >
+        {#if authState.currentAccount}
+          <img
+            src={`https://minotar.net/avatar/${authState.currentAccount.username}/48`}
+            alt={authState.currentAccount.username}
+            class="w-full h-full"
+          />
+        {:else}
+          ?
+        {/if}
+      </div>
+      <div>
+        <div class="font-bold text-white text-lg">
+          {authState.currentAccount ? authState.currentAccount.username : "Click to Login"}
+        </div>
+        <div class="text-xs text-zinc-400 flex items-center gap-1">
+          <span
+            class="w-1.5 h-1.5 rounded-full {authState.currentAccount
+              ? 'bg-green-500'
+              : 'bg-zinc-500'}"
+          ></span>
+          {authState.currentAccount ? "Ready" : "Guest"}
+        </div>
+      </div>
+    </div>
+    <!-- Console Toggle -->
+    <button
+      class="ml-4 text-xs text-zinc-500 hover:text-zinc-300 transition"
+      onclick={() => uiState.toggleConsole()}
+    >
+      {uiState.showConsole ? "Hide Logs" : "Show Logs"}
+    </button>
+  </div>
+
+  <div class="flex items-center gap-4">
+    <div class="flex flex-col items-end mr-2">
+      <label
+        class="text-xs text-zinc-500 mb-1 uppercase font-bold tracking-wider"
+        >Version</label
+      >
+      <select
+        bind:value={gameState.selectedVersion}
+        class="bg-zinc-950 text-zinc-200 border border-zinc-700 rounded px-4 py-2 hover:border-zinc-500 transition-colors cursor-pointer outline-none focus:ring-1 focus:ring-indigo-500 w-48"
+      >
+        {#if gameState.versions.length === 0}
+          <option>Loading...</option>
+        {:else}
+          {#each gameState.versions as version}
+            <option value={version.id}>{version.id} ({version.type})</option
+            >
+          {/each}
+        {/if}
+      </select>
+    </div>
+
+    <button
+      onclick={() => gameState.startGame()}
+      class="bg-green-600 hover:bg-green-500 text-white font-bold h-14 px-12 rounded transition-all transform active:scale-95 shadow-[0_0_15px_rgba(22,163,74,0.4)] hover:shadow-[0_0_25px_rgba(22,163,74,0.6)] flex flex-col items-center justify-center uppercase tracking-wider text-lg"
+    >
+      Play
+      <span
+        class="text-[10px] font-normal opacity-80 normal-case tracking-normal"
+        >Click to launch</span
+      >
+    </button>
+  </div>
+</div>
diff --git a/ui/src/components/HomeView.svelte b/ui/src/components/HomeView.svelte
new file mode 100644
index 0000000..e876c14
--- /dev/null
+++ b/ui/src/components/HomeView.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+  // No script needed currently, just static markup mostly
+</script>
+
+<!-- Background Image - Using gradient fallback -->
+<div
+  class="absolute inset-0 z-0 opacity-60 bg-gradient-to-br from-emerald-900 via-zinc-900 to-indigo-950 transition-transform duration-[10s] ease-linear group-hover:scale-105"
+></div>
+<div
+  class="absolute inset-0 z-0 bg-gradient-to-t from-zinc-900 via-transparent to-black/50"
+></div>
+
+<div class="absolute bottom-24 left-8 z-10 p-4">
+  <h1
+    class="text-6xl font-black mb-2 tracking-tight text-white drop-shadow-lg"
+  >
+    MINECRAFT
+  </h1>
+  <div class="flex items-center gap-2 text-zinc-300">
+    <span
+      class="bg-zinc-800 text-xs px-2 py-1 rounded border border-zinc-600"
+      >JAVA EDITION</span
+    >
+    <span class="text-lg">Release 1.20.4</span>
+  </div>
+</div>
diff --git a/ui/src/components/LoginModal.svelte b/ui/src/components/LoginModal.svelte
new file mode 100644
index 0000000..f1ac0d5
--- /dev/null
+++ b/ui/src/components/LoginModal.svelte
@@ -0,0 +1,126 @@
+<script lang="ts">
+  import { open } from "@tauri-apps/plugin-shell";
+  import { authState } from "../stores/auth.svelte";
+
+  function openLink(url: string) {
+    open(url);
+  }
+</script>
+
+{#if authState.isLoginModalOpen}
+  <div
+    class="fixed inset-0 z-[60] flex items-center justify-center bg-black/80 backdrop-blur-sm p-4"
+  >
+    <div
+      class="bg-zinc-900 border border-zinc-700 rounded-xl shadow-2xl p-6 w-full max-w-md animate-in fade-in zoom-in-0 duration-200"
+    >
+      <div class="flex justify-between items-center mb-6">
+        <h2 class="text-2xl font-bold text-white">Login</h2>
+        <button
+          onclick={() => authState.closeLoginModal()}
+          class="text-zinc-500 hover:text-white transition group"
+        >
+          ✕
+        </button>
+      </div>
+
+      {#if authState.loginMode === "select"}
+        <div class="space-y-4">
+          <button
+            onclick={() => authState.startMicrosoftLogin()}
+            class="w-full flex items-center justify-center gap-3 bg-[#2F2F2F] hover:bg-[#3F3F3F] text-white p-4 rounded-lg font-bold border border-transparent hover:border-zinc-500 transition-all group"
+          >
+            <!-- Microsoft Logo SVG -->
+            <svg
+              class="w-5 h-5"
+              viewBox="0 0 23 23"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              ><path fill="#f35325" d="M1 1h10v10H1z" /><path
+                fill="#81bc06"
+                d="M12 1h10v10H12z"
+              /><path fill="#05a6f0" d="M1 12h10v10H1z" /><path
+                fill="#ffba08"
+                d="M12 12h10v10H12z"
+              /></svg
+            >
+            Microsoft Account
+          </button>
+
+          <div class="relative py-2">
+            <div class="absolute inset-0 flex items-center">
+              <div class="w-full border-t border-zinc-700"></div>
+            </div>
+            <div class="relative flex justify-center text-xs uppercase">
+              <span class="bg-zinc-900 px-2 text-zinc-500">OR</span>
+            </div>
+          </div>
+
+          <div class="space-y-2">
+            <input
+              type="text"
+              bind:value={authState.offlineUsername}
+              placeholder="Offline Username"
+              class="w-full bg-zinc-950 border border-zinc-700 rounded p-3 text-white focus:border-indigo-500 outline-none"
+              onkeydown={(e) => e.key === "Enter" && authState.performOfflineLogin()}
+            />
+            <button
+              onclick={() => authState.performOfflineLogin()}
+              class="w-full bg-zinc-800 hover:bg-zinc-700 text-zinc-300 p-3 rounded font-medium transition-colors"
+            >
+              Offline Login
+            </button>
+          </div>
+        </div>
+      {:else if authState.loginMode === "microsoft"}
+        <div class="text-center">
+          {#if authState.msLoginLoading && !authState.deviceCodeData}
+            <div class="py-8 text-zinc-400 animate-pulse">
+              Starting login flow...
+            </div>
+          {:else if authState.deviceCodeData}
+            <div class="space-y-4">
+              <p class="text-sm text-zinc-400">1. Go to this URL:</p>
+              <button
+                onclick={() =>
+                    authState.deviceCodeData && openLink(authState.deviceCodeData.verification_uri)}
+                class="text-indigo-400 hover:text-indigo-300 underline break-all font-mono text-sm"
+              >
+                {authState.deviceCodeData.verification_uri}
+              </button>
+
+              <p class="text-sm text-zinc-400 mt-2">2. Enter this code:</p>
+              <div
+                class="bg-zinc-950 p-4 rounded border border-zinc-700 font-mono text-2xl tracking-widest text-center select-all cursor-pointer hover:border-indigo-500 transition-colors"
+                role="button"
+                tabindex="0"
+                onkeydown={(e) => e.key === 'Enter' && navigator.clipboard.writeText(authState.deviceCodeData?.user_code || "")}
+                onclick={() =>
+                  navigator.clipboard.writeText(
+                    authState.deviceCodeData?.user_code || ""
+                  )}
+              >
+                {authState.deviceCodeData.user_code}
+              </div>
+              <p class="text-xs text-zinc-500">Click code to copy</p>
+
+              <div class="pt-6 space-y-3">
+                   <div class="flex flex-col items-center gap-3">
+                       <div class="animate-spin rounded-full h-6 w-6 border-2 border-zinc-600 border-t-indigo-500"></div>
+                       <span class="text-sm text-zinc-400 font-medium break-all text-center">{authState.msLoginStatus}</span>
+                   </div>
+                   <p class="text-xs text-zinc-600">This window will update automatically.</p>
+              </div>
+              
+              <button
+                onclick={() => { authState.stopPolling(); authState.loginMode = "select"; }}
+                class="text-xs text-zinc-500 hover:text-zinc-300 mt-6 underline"
+                >Cancel</button
+              >
+            </div>
+          {/if}
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}
diff --git a/ui/src/components/SettingsView.svelte b/ui/src/components/SettingsView.svelte
new file mode 100644
index 0000000..f09be4e
--- /dev/null
+++ b/ui/src/components/SettingsView.svelte
@@ -0,0 +1,125 @@
+<script lang="ts">
+  import { settingsState } from "../stores/settings.svelte";
+</script>
+
+<div class="p-8 bg-zinc-900 h-full overflow-y-auto">
+  <h2 class="text-3xl font-bold mb-8">Settings</h2>
+
+  <div class="space-y-6 max-w-2xl">
+    <!-- Java Path -->
+    <div class="bg-zinc-800/50 p-6 rounded-lg border border-zinc-700">
+      <label
+        class="block text-sm font-bold text-zinc-400 mb-2 uppercase tracking-wide"
+        >Java Executable Path</label
+      >
+      <div class="flex gap-2">
+        <input
+          bind:value={settingsState.settings.java_path}
+          type="text"
+          class="bg-zinc-950 text-white flex-1 p-3 rounded border border-zinc-700 focus:border-indigo-500 outline-none font-mono text-sm"
+          placeholder="e.g. java, /usr/bin/java"
+        />
+        <button
+          onclick={() => settingsState.detectJava()}
+          disabled={settingsState.isDetectingJava}
+          class="bg-zinc-700 hover:bg-zinc-600 disabled:opacity-50 text-white px-4 py-2 rounded transition-colors whitespace-nowrap"
+        >
+          {settingsState.isDetectingJava ? "Detecting..." : "Auto Detect"}
+        </button>
+      </div>
+      
+      {#if settingsState.javaInstallations.length > 0}
+        <div class="mt-4 space-y-2">
+          <p class="text-xs text-zinc-400 uppercase font-bold">Detected Java Installations:</p>
+          {#each settingsState.javaInstallations as java}
+            <button
+              onclick={() => settingsState.selectJava(java.path)}
+              class="w-full text-left p-3 bg-zinc-950 rounded border transition-colors {settingsState.settings.java_path === java.path ? 'border-indigo-500 bg-indigo-950/30' : 'border-zinc-700 hover:border-zinc-500'}"
+            >
+              <div class="flex justify-between items-center">
+                <div>
+                  <span class="text-white font-mono text-sm">{java.version}</span>
+                  <span class="text-zinc-500 text-xs ml-2">{java.is_64bit ? "64-bit" : "32-bit"}</span>
+                </div>
+                {#if settingsState.settings.java_path === java.path}
+                  <span class="text-indigo-400 text-xs">Selected</span>
+                {/if}
+              </div>
+              <div class="text-zinc-500 text-xs font-mono truncate mt-1">{java.path}</div>
+            </button>
+          {/each}
+        </div>
+      {/if}
+      
+      <p class="text-xs text-zinc-500 mt-2">
+        The command or path to the Java Runtime Environment. Click "Auto Detect" to find installed Java versions.
+      </p>
+    </div>
+
+    <!-- Memory -->
+    <div class="bg-zinc-800/50 p-6 rounded-lg border border-zinc-700">
+      <label
+        class="block text-sm font-bold text-zinc-400 mb-4 uppercase tracking-wide"
+        >Memory Allocation (RAM)</label
+      >
+
+      <div class="grid grid-cols-2 gap-6">
+        <div>
+          <label class="block text-xs text-zinc-500 mb-1"
+            >Minimum (MB)</label
+          >
+          <input
+            bind:value={settingsState.settings.min_memory}
+            type="number"
+            class="bg-zinc-950 text-white w-full p-3 rounded border border-zinc-700 focus:border-indigo-500 outline-none"
+          />
+        </div>
+        <div>
+          <label class="block text-xs text-zinc-500 mb-1"
+            >Maximum (MB)</label
+          >
+          <input
+            bind:value={settingsState.settings.max_memory}
+            type="number"
+            class="bg-zinc-950 text-white w-full p-3 rounded border border-zinc-700 focus:border-indigo-500 outline-none"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- Resolution -->
+    <div class="bg-zinc-800/50 p-6 rounded-lg border border-zinc-700">
+      <label
+        class="block text-sm font-bold text-zinc-400 mb-4 uppercase tracking-wide"
+        >Game Window Size</label
+      >
+      <div class="grid grid-cols-2 gap-6">
+        <div>
+          <label class="block text-xs text-zinc-500 mb-1">Width</label>
+          <input
+            bind:value={settingsState.settings.width}
+            type="number"
+            class="bg-zinc-950 text-white w-full p-3 rounded border border-zinc-700 focus:border-indigo-500 outline-none"
+          />
+        </div>
+        <div>
+          <label class="block text-xs text-zinc-500 mb-1">Height</label>
+          <input
+            bind:value={settingsState.settings.height}
+            type="number"
+            class="bg-zinc-950 text-white w-full p-3 rounded border border-zinc-700 focus:border-indigo-500 outline-none"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div class="pt-4">
+      <button
+        onclick={() => settingsState.saveSettings()}
+        class="bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-3 px-8 rounded shadow-lg transition-transform active:scale-95"
+      >
+        Save Settings
+      </button>
+    </div>
+  </div>
+</div>
diff --git a/ui/src/components/Sidebar.svelte b/ui/src/components/Sidebar.svelte
new file mode 100644
index 0000000..a4f4e35
--- /dev/null
+++ b/ui/src/components/Sidebar.svelte
@@ -0,0 +1,66 @@
+<script lang="ts">
+  import { uiState } from '../stores/ui.svelte';
+</script>
+
+<aside
+  class="w-20 lg:w-64 bg-zinc-950 flex flex-col items-center lg:items-start transition-all duration-300 border-r border-zinc-800 shrink-0"
+>
+  <div
+    class="h-20 w-full flex items-center justify-center lg:justify-start lg:px-6 border-b border-zinc-800/50"
+  >
+    <!-- Icon Logo (Visible on small) -->
+    <div
+      class="lg:hidden text-2xl font-black bg-clip-text text-transparent bg-gradient-to-tr from-indigo-400 to-purple-400"
+    >
+      D
+    </div>
+    <!-- Full Logo (Visible on large) -->
+    <div
+      class="hidden lg:block font-bold text-xl tracking-wider text-indigo-400"
+    >
+      DROP<span class="text-white">OUT</span>
+    </div>
+  </div>
+
+  <nav class="flex-1 w-full flex flex-col gap-2 p-3">
+    <button
+      class="group flex items-center lg:gap-4 justify-center lg:justify-start w-full px-0 lg:px-4 py-3 rounded-lg hover:bg-zinc-800 {uiState.currentView ===
+      'home'
+        ? 'bg-zinc-800/80 text-white'
+        : 'text-zinc-400'} transition-all relative"
+      onclick={() => uiState.setView("home")}
+    >
+      <span class="text-xl relative z-10">🏠</span>
+      <span
+        class="hidden lg:block font-medium relative z-10 transition-opacity"
+        >Home</span
+      >
+    </button>
+    <button
+      class="group flex items-center lg:gap-4 justify-center lg:justify-start w-full px-0 lg:px-4 py-3 rounded-lg hover:bg-zinc-800 {uiState.currentView ===
+      'versions'
+        ? 'bg-zinc-800/80 text-white'
+        : 'text-zinc-400'} transition-all"
+      onclick={() => uiState.setView("versions")}
+    >
+      <span class="text-xl">📦</span>
+      <span class="hidden lg:block font-medium">Versions</span>
+    </button>
+    <button
+      class="group flex items-center lg:gap-4 justify-center lg:justify-start w-full px-0 lg:px-4 py-3 rounded-lg hover:bg-zinc-800 {uiState.currentView ===
+      'settings'
+        ? 'bg-zinc-800/80 text-white'
+        : 'text-zinc-400'} transition-all"
+      onclick={() => uiState.setView("settings")}
+    >
+      <span class="text-xl">⚙️</span>
+      <span class="hidden lg:block font-medium">Settings</span>
+    </button>
+  </nav>
+
+  <div
+    class="p-4 w-full border-t border-zinc-800 flex justify-center lg:justify-start"
+  >
+    <div class="text-xs text-zinc-600 font-mono">v{uiState.appVersion}</div>
+  </div>
+</aside>
diff --git a/ui/src/components/StatusToast.svelte b/ui/src/components/StatusToast.svelte
new file mode 100644
index 0000000..b1feffc
--- /dev/null
+++ b/ui/src/components/StatusToast.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { uiState } from "../stores/ui.svelte";
+</script>
+
+{#if uiState.status !== "Ready"}
+  <div
+    class="absolute top-12 right-12 bg-zinc-800/90 backdrop-blur border border-zinc-600 p-4 rounded-lg shadow-2xl max-w-sm animate-in fade-in slide-in-from-top-4 duration-300 z-50 group"
+  >
+    <div class="flex justify-between items-start mb-1">
+      <div class="text-xs text-zinc-400 uppercase font-bold">Status</div>
+      <button
+        onclick={() => uiState.setStatus("Ready")}
+        class="text-zinc-500 hover:text-white transition -mt-1 -mr-1 p-1"
+      >
+        ✕
+      </button>
+    </div>
+    <div class="font-mono text-sm whitespace-pre-wrap mb-2">{uiState.status}</div>
+    <div class="w-full bg-zinc-700/50 h-1 rounded-full overflow-hidden">
+      <div
+        class="h-full bg-indigo-500 animate-[progress_5s_linear_forwards] origin-left w-full"
+      ></div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  @keyframes progress {
+    from {
+      transform: scaleX(1);
+    }
+    to {
+      transform: scaleX(0);
+    }
+  }
+</style>
diff --git a/ui/src/components/VersionsView.svelte b/ui/src/components/VersionsView.svelte
new file mode 100644
index 0000000..8c0ddfe
--- /dev/null
+++ b/ui/src/components/VersionsView.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { gameState } from "../stores/game.svelte";
+</script>
+
+<div class="p-8 h-full overflow-y-auto bg-zinc-900">
+  <h2 class="text-3xl font-bold mb-6">Versions</h2>
+  <div class="grid gap-2">
+    {#if gameState.versions.length === 0}
+      <div class="text-zinc-500">Loading versions...</div>
+    {:else}
+      {#each gameState.versions as version}
+        <button
+          class="flex items-center justify-between p-4 bg-zinc-800 rounded hover:bg-zinc-700 transition text-left border border-zinc-700 {gameState.selectedVersion ===
+          version.id
+            ? 'border-green-500 bg-zinc-800/80 ring-1 ring-green-500'
+            : ''}"
+          onclick={() => (gameState.selectedVersion = version.id)}
+        >
+          <div>
+            <div class="font-bold font-mono text-lg">{version.id}</div>
+            <div class="text-xs text-zinc-400 capitalize">
+              {version.type} • {new Date(
+                version.releaseTime
+              ).toLocaleDateString()}
+            </div>
+          </div>
+          {#if gameState.selectedVersion === version.id}
+            <div class="text-green-500 font-bold text-sm">SELECTED</div>
+          {/if}
+        </button>
+      {/each}
+    {/if}
+  </div>
+</div>