Added torrent file upload support

app/pages/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import MagnetCard from "~/components/MagnetCard.vue";
 import { ref } from "vue";
+import IndexHero from "~/components/IndexHero.vue";
 
 interface MaxedMagnetResponse {
   totalTrackers: number;
@@ -43,61 +44,69 @@ async function getMaxedMagnetUrl(magnet: string) {
     loading.value = false; // Reset loading state
   }
 }
+
+async function getMaxedMagnetFromTorrent(file: File) {
+  error.value = null; // Clear any previous error
+  loading.value = true; // Set loading to true
+
+  try {
+    const form = new FormData();
+    form.append("file", file);
+
+    const res = await fetch("/api/torrent", {
+      method: "POST",
+      body: form,
+    });
+
+    const data = await res.json();
+    if (!res.ok) throw new Error(data.message || `HTTP ${res.status}`);
+
+    maxedMagnet.value = data;
+  } catch (e: any) {
+    error.value = e.message || "Upload failed";
+  } finally {
+    loading.value = false;
+  }
+}
 </script>
 
 <template>
   <div class="flex flex-col min-h-screen bg-base-300">
     <div class="grow flex items-start justify-center pt-40 px-4">
-      <div class="w-full max-w-2xl space-y-6">
-        <div class="hero">
-          <div class="hero-content text-center">
-            <div class="max-w-md">
-              <h1 class="text-5xl font-bold drop-shadow-xl">TorrentMax</h1>
-              <p class="py-6">
-                Paste a magnet link below and TorrentMax will enrich it with
-                additional trackers
-              </p>
-            </div>
-          </div>
+      <div class="w-full max-w-2xl" >
+        <IndexHero />
+        <div v-if="!maxedMagnet" class="space-y-6">
+          <SearchBar @submit="getMaxedMagnetUrl" />
+          <div class="divider divider-neutral">OR</div>
+          <TorrentUpload @submit="getMaxedMagnetFromTorrent" />
         </div>
-        <SearchBar @submit="getMaxedMagnetUrl" />
 
-        <!-- Loading indicator -->
         <div
-          v-motion-fade
           v-if="loading"
+          v-motion-fade
           class="flex justify-center items-center p-8"
         >
-          <span class="loading loading-infinity loading-lg"></span>
+          <span class="loading loading-infinity loading-lg" />
         </div>
 
         <!-- Error message display -->
-        <div v-if="error && !loading" class="max-w-2xl mx-auto p-4">
-          <div class="alert alert-error">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="stroke-current shrink-0 h-6 w-6"
-              fill="none"
-              viewBox="0 0 24 24"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
-              />
-            </svg>
-            <span>{{ error }}</span>
-          </div>
-        </div>
+        <AlertError v-if="error && !loading" :message="error" />
 
         <MagnetCard
+          v-if="maxedMagnet && !loading && !error"
           v-motion-fade
-          v-if="maxedMagnet && !loading"
           :name="maxedMagnet.name || 'Unknown Torrent'"
           :total-trackers="maxedMagnet.totalTrackers"
           :magnet-url="maxedMagnet.maxedMagnet"
         />
+        <div v-if="maxedMagnet" class="flex justify-center pt-5">
+          <button
+            class="btn btn-primary text-accent"
+            @click="maxedMagnet = null"
+          >
+            Max Another Torrent
+          </button>
+        </div>
       </div>
     </div>
   </div>