first functionable

src/App.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { useRequestStore } from './stores/requestStore';
+import RequestPanel from './components/RequestPanel.vue';
+import ResponsePanel from './components/ResponsePanel.vue';
+import MethodBadge from './components/MethodBadge.vue';
+import { History, Layers, Zap } from 'lucide-vue-next';
+
+const store = useRequestStore();
+</script>
+
+<template>
+  <div class="flex h-screen w-full bg-slate-950 text-slate-200 font-sans overflow-hidden">
+    <!-- Sidebar -->
+    <aside class="w-64 flex-shrink-0 border-r border-slate-800 flex flex-col bg-slate-950">
+      <!-- Header -->
+      <div class="h-14 flex items-center px-4 border-b border-slate-800 gap-2">
+        <div class="bg-indigo-500/20 p-1.5 rounded-lg">
+          <Zap class="w-5 h-5 text-indigo-400" />
+        </div>
+        <span class="font-bold text-slate-100 tracking-tight">LiteRequest</span>
+      </div>
+
+      <!-- Nav Tabs -->
+      <div class="flex p-2 gap-1">
+        <button class="flex-1 flex items-center justify-center gap-2 py-1.5 text-xs font-medium bg-slate-900 text-slate-200 rounded border border-slate-800 shadow-sm">
+          <History class="w-3.5 h-3.5" /> History
+        </button>
+        <button class="flex-1 flex items-center justify-center gap-2 py-1.5 text-xs font-medium text-slate-500 hover:bg-slate-900 hover:text-slate-300 rounded transition-colors">
+          <Layers class="w-3.5 h-3.5" /> Collections
+        </button>
+      </div>
+
+      <!-- History List -->
+      <div class="flex-1 overflow-y-auto">
+        <div v-if="store.history.length === 0" class="p-8 text-center text-slate-600 text-xs">
+          No history yet. Make a request!
+        </div>
+        <div v-else class="flex flex-col">
+          <button 
+            v-for="item in store.history" 
+            :key="item.timestamp"
+            @click="store.loadRequest(item)"
+            class="text-left px-3 py-3 border-b border-slate-800/50 hover:bg-slate-900 transition-colors group flex flex-col gap-1.5"
+          >
+            <div class="flex items-center gap-2 overflow-hidden w-full">
+              <MethodBadge :method="item.method" />
+              <span class="text-xs text-slate-400 truncate font-mono opacity-75">{{ new Date(item.timestamp).toLocaleTimeString() }}</span>
+            </div>
+            <div class="text-sm text-slate-300 truncate px-1 font-medium" :title="item.url">
+              {{ item.url || 'No URL' }}
+            </div>
+          </button>
+        </div>
+      </div>
+    </aside>
+
+    <!-- Main Workspace -->
+    <main class="flex-1 flex flex-col min-w-0 bg-slate-900">
+      <div class="flex-1 min-h-0">
+        <RequestPanel />
+      </div>
+      <div class="h-1/2 border-t border-slate-800 min-h-0">
+        <ResponsePanel />
+      </div>
+    </main>
+  </div>
+</template>