mx369 · mx369 · Jan 27, 2026
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,6 @@
+node_modules
+.dist
+.dist-ssr
+coverage
+.vite
+.env
diff --git a/README.md b/README.md
@@ -1 +1,10 @@
-# note
+# Orbit API Studio
+
+## Run
+
+```bash
+pnpm install
+pnpm dev
+```
+
+Open http://localhost:5173 in your browser.
diff --git a/index.html b/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Orbit API Studio</title>
+  </head>
+  <body class="bg-background text-foreground">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "note-postman-clone",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "lucide-react": "^0.473.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.2",
+    "zustand": "^4.5.5"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.41",
+    "tailwindcss": "^3.4.10",
+    "typescript": "^5.5.4",
+    "vite": "^5.4.1"
+  }
+}
diff --git a/postcss.config.cjs b/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,35 @@
+import { Route, Routes } from "react-router-dom";
+import { useEffect } from "react";
+import { AppLayout } from "./components/layout/AppLayout";
+import { useThemeStore } from "./store/useThemeStore";
+import { ToastProvider } from "./components/ui/toast";
+
+const Workspace = () => {
+  return <AppLayout />;
+};
+
+const NotFound = () => (
+  <div className="flex min-h-screen items-center justify-center">
+    <div className="text-center">
+      <h1 className="text-2xl font-semibold">404</h1>
+      <p className="text-muted-foreground">Page not found.</p>
+    </div>
+  </div>
+);
+
+export default function App() {
+  const { theme } = useThemeStore();
+
+  useEffect(() => {
+    document.documentElement.classList.toggle("dark", theme === "dark");
+  }, [theme]);
+
+  return (
+    <ToastProvider>
+      <Routes>
+        <Route path="/" element={<Workspace />} />
+        <Route path="*" element={<NotFound />} />
+      </Routes>
+    </ToastProvider>
+  );
+}
diff --git a/src/components/commands/CommandPalette.tsx b/src/components/commands/CommandPalette.tsx
@@ -0,0 +1,96 @@
+import { useEffect, useMemo, useState } from "react";
+import { Search } from "lucide-react";
+import { useAppStore } from "../../store/useAppStore";
+import { Input } from "../ui/input";
+
+export const CommandPalette = () => {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const { requests, history, environments, globals, openRequestInTab } = useAppStore(
+    (state) => state
+  );
+
+  useEffect(() => {
+    const handler = (event: KeyboardEvent) => {
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
+        event.preventDefault();
+        setOpen((prev) => !prev);
+      }
+      if (event.key === "Escape") {
+        setOpen(false);
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, []);
+
+  const results = useMemo(() => {
+    const lower = query.toLowerCase();
+    const requestItems = requests
+      .filter((item) => item.name.toLowerCase().includes(lower) || item.url.includes(lower))
+      .map((item) => ({
+        id: item.id,
+        label: `Request · ${item.name}`,
+        action: () => openRequestInTab(item.id),
+      }));
+    const historyItems = history
+      .filter((item) => item.request.name.toLowerCase().includes(lower))
+      .slice(0, 4)
+      .map((item) => ({
+        id: item.id,
+        label: `History · ${item.request.name}`,
+        action: () => openRequestInTab(item.request.id),
+      }));
+    const variableItems = [
+      ...globals,
+      ...environments.flatMap((env) => env.variables),
+    ]
+      .filter((item) => item.key.toLowerCase().includes(lower))
+      .slice(0, 4)
+      .map((item) => ({ id: item.id, label: `Var · ${item.key}`, action: () => {} }));
+
+    return [...requestItems, ...historyItems, ...variableItems].slice(0, 8);
+  }, [query, requests, history, environments, globals, openRequestInTab]);
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-start justify-center bg-black/40 p-8">
+      <div className="w-full max-w-xl rounded-xl border border-border bg-card p-4 shadow-soft">
+        <div className="flex items-center gap-2 rounded-md border border-border px-3 py-2">
+          <Search className="h-4 w-4 text-muted-foreground" />
+          <Input
+            className="border-0 px-0 py-1"
+            placeholder="Search requests, history, variables..."
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
+            autoFocus
+          />
+        </div>
+        <div className="mt-3 space-y-2">
+          {results.length === 0 && (
+            <div className="rounded-lg border border-dashed border-border p-4 text-xs text-muted-foreground">
+              No results. Try searching by request name, URL, or variable.
+            </div>
+          )}
+          {results.map((item) => (
+            <button
+              key={item.id}
+              className="flex w-full items-center justify-between rounded-md border border-border bg-background px-3 py-2 text-sm hover:bg-secondary"
+              onClick={() => {
+                item.action();
+                setOpen(false);
+                setQuery("");
+              }}
+            >
+              {item.label}
+            </button>
+          ))}
+        </div>
+        <p className="mt-3 text-xs text-muted-foreground">
+          Tip: Cmd/Ctrl+Enter to send request. Esc to close.
+        </p>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/layout/AppLayout.tsx b/src/components/layout/AppLayout.tsx
@@ -0,0 +1,60 @@
+import { useEffect, useMemo, useRef } from "react";
+import { useAppStore } from "../../store/useAppStore";
+import { TopBar } from "./TopBar";
+import { Sidebar } from "../sidebar/Sidebar";
+import { RequestWorkspace } from "../request/RequestWorkspace";
+import { ResponsePanel } from "../response/ResponsePanel";
+import { CommandPalette } from "../commands/CommandPalette";
+import { useToast } from "../ui/toast";
+
+export const AppLayout = () => {
+  const { notify } = useToast();
+  const activeTabId = useAppStore((state) => state.activeTabId);
+  const tabs = useAppStore((state) => state.tabs);
+  const setResponse = useAppStore((state) => state.setResponse);
+  const isSending = useAppStore((state) => state.isSending);
+  const setSending = useAppStore((state) => state.setSending);
+  const responseRef = useRef<HTMLDivElement>(null);
+
+  const activeTab = useMemo(
+    () => tabs.find((tab) => tab.id === activeTabId) ?? tabs[0],
+    [tabs, activeTabId]
+  );
+
+  useEffect(() => {
+    if (!activeTab) return;
+    if (!activeTabId) {
+      useAppStore.setState({ activeTabId: activeTab.id });
+    }
+  }, [activeTab, activeTabId]);
+
+  useEffect(() => {
+    const handler = (event: KeyboardEvent) => {
+      if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+        event.preventDefault();
+        document.dispatchEvent(new CustomEvent("send-request"));
+      }
+      if (event.key === "Escape" && isSending) {
+        event.preventDefault();
+        document.dispatchEvent(new CustomEvent("cancel-request"));
+        notify({ title: "Request cancelled", description: "Abort signal sent." });
+        setSending(false);
+        setResponse(undefined);
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [isSending, notify, setResponse, setSending]);
+
+  return (
+    <div className="flex min-h-screen flex-col bg-background">
+      <TopBar />
+      <div className="flex flex-1 overflow-hidden">
+        <Sidebar />
+        <RequestWorkspace scrollRef={responseRef} />
+        <ResponsePanel scrollRef={responseRef} />
+      </div>
+      <CommandPalette />
+    </div>
+  );
+};
diff --git a/src/components/layout/TopBar.tsx b/src/components/layout/TopBar.tsx
@@ -0,0 +1,136 @@
+import { useMemo, useRef } from "react";
+import { Download, Upload, Sun, Moon, Users, User } from "lucide-react";
+import { Button } from "../ui/button";
+import { Select } from "../ui/select";
+import { useThemeStore } from "../../store/useThemeStore";
+import { useAppStore } from "../../store/useAppStore";
+import { exportState, importState, saveState } from "../../utils/storage";
+import { useToast } from "../ui/toast";
+
+export const TopBar = () => {
+  const { toggle, theme } = useThemeStore();
+  const { notify } = useToast();
+  const {
+    workspace,
+    setWorkspace,
+    environments,
+    activeEnvironmentId,
+    setActiveEnvironment,
+    requests,
+    history,
+    collections,
+    globals,
+  } = useAppStore((state) => state);
+  const fileRef = useRef<HTMLInputElement>(null);
+
+  const exportPayload = useMemo(
+    () => ({
+      version: 1,
+      requests,
+      history,
+      collections,
+      environments,
+      globals,
+      workspace,
+    }),
+    [collections, environments, globals, history, requests, workspace]
+  );
+
+  const handleExport = async () => {
+    const blob = await exportState(exportPayload);
+    const url = URL.createObjectURL(blob);
+    const anchor = document.createElement("a");
+    anchor.href = url;
+    anchor.download = "orbit-api-export.json";
+    anchor.click();
+    URL.revokeObjectURL(url);
+    notify({ title: "Export ready", description: "JSON export generated." });
+  };
+
+  const handleImport = async (file?: File) => {
+    if (!file) return;
+    const state = await importState(file);
+    if (!state) {
+      notify({ title: "Import failed", description: "Invalid JSON bundle.", variant: "error" });
+      return;
+    }
+    useAppStore.setState({
+      requests: state.requests,
+      history: state.history,
+      collections: state.collections,
+      environments: state.environments,
+      globals: state.globals,
+      workspace: state.workspace,
+    });
+    saveState(state);
+    notify({ title: "Import complete", description: "Workspace restored." });
+  };
+
+  return (
+    <header className="flex items-center justify-between border-b border-border bg-card px-4 py-3">
+      <div className="flex items-center gap-4">
+        <div>
+          <p className="text-sm font-semibold">Orbit API Studio</p>
+          <p className="text-xs text-muted-foreground">Modern API workspace</p>
+        </div>
+        <div className="flex items-center gap-2 rounded-md border border-border bg-background p-1">
+          <button
+            className={`flex items-center gap-1 rounded-md px-2 py-1 text-xs ${
+              workspace === "personal" ? "bg-primary text-primary-foreground" : "text-muted-foreground"
+            }`}
+            onClick={() => setWorkspace("personal")}
+          >
+            <User className="h-4 w-4" />
+            Personal
+          </button>
+          <button
+            className={`flex items-center gap-1 rounded-md px-2 py-1 text-xs ${
+              workspace === "team" ? "bg-primary text-primary-foreground" : "text-muted-foreground"
+            }`}
+            onClick={() => setWorkspace("team")}
+          >
+            <Users className="h-4 w-4" />
+            Team
+          </button>
+        </div>
+      </div>
+      <div className="flex items-center gap-3">
+        <div className="min-w-[180px]">
+          <Select
+            value={activeEnvironmentId}
+            onChange={(event) => setActiveEnvironment(event.target.value)}
+          >
+            {environments.map((env) => (
+              <option key={env.id} value={env.id}>
+                {env.name}
+              </option>
+            ))}
+            <option value="">No Environment</option>
+          </Select>
+        </div>
+        <Button variant="secondary" size="sm" onClick={handleExport}>
+          <Download className="h-4 w-4" />
+          Export
+        </Button>
+        <Button variant="secondary" size="sm" onClick={() => fileRef.current?.click()}>
+          <Upload className="h-4 w-4" />
+          Import
+        </Button>
+        <input
+          ref={fileRef}
+          type="file"
+          className="hidden"
+          accept="application/json"
+          onChange={(event) => {
+            const file = event.target.files?.[0];
+            handleImport(file);
+            event.target.value = "";
+          }}
+        />
+        <Button variant="secondary" size="sm" onClick={toggle}>
+          {theme === "dark" ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+        </Button>
+      </div>
+    </header>
+  );
+};