redo tabs ui + minify json

UseInterstellar · Nov 3, 2024 · 5516e8b · 5516e8b
1 parent 0c03661
commit 5516e8b
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 24 deletions.
diff --git a/src/pages/ap.astro b/src/pages/ap.astro
@@ -6,7 +6,7 @@ import { PlusCircle } from "lucide-astro";
 
 export const prerender = false;
 
-const apps: Asset[] = await (await fetch(`${ASSET_URL}/json/apps.json`)).json();
+const apps: Asset[] = await (await fetch(`${ASSET_URL}/json/apps.min.json`)).json();
 const customApps = (Astro.cookies.get("asset.app")?.json() as Asset[]) ?? [];
 
 const all = [...customApps, ...apps].sort((a, b) => {

diff --git a/src/pages/ga.astro b/src/pages/ga.astro
@@ -6,7 +6,7 @@ import { PlusCircle } from "lucide-astro";
 
 export const prerender = false;
 
-const games: Asset[] = await (await fetch(`${ASSET_URL}/json/games.json`)).json();
+const games: Asset[] = await (await fetch(`${ASSET_URL}/json/games.min.json`)).json();
 const customGames = (Astro.cookies.get("asset.game")?.json() as Asset[]) ?? [];
 
 const all = [...customGames, ...games].sort((a, b) => {

diff --git a/src/pages/tb.astro b/src/pages/tb.astro
@@ -2,51 +2,60 @@
 import Layout from "@/layouts/Layout.astro";
 import { ArrowLeft, ArrowRight, Home, Loader2, Maximize2, Plus, RotateCw, Star } from "lucide-astro";
 ---
-
 <script src="@/lib/tabs.ts"></script>
 <Layout>
-  <div class="bg-background-secondary h-8 flex items-center justify-between px-4">
-    <div class="flex space-x-4">
-      <button title="New Tab">
-        <Plus class="w-6 h-6 cursor-pointer bg-accent rounded-md Plus" />
+  <div class="bg-background-secondary h-10 flex items-center border-b border-border px-2">
+    <div class="flex space-x-2">
+      <button class="flex items-center px-4 py-1.5 rounded-t-lg bg-accent text-text shadow-sm">
+        Tab 1
+      </button>
+      <button class="flex items-center px-4 py-1.5 rounded-t-lg bg-interactive text-interactive-secondary hover:bg-accent-secondary">
+        Tab 2
+      </button>
+      <button class="flex items-center px-4 py-1.5 rounded-t-lg bg-interactive text-interactive-secondary hover:bg-accent-secondary">
+        Tab 3
       </button>
     </div>
+    <div class="flex-grow"></div>
+    <button class="p-2 rounded-full bg-interactive hover:bg-accent-secondary">
+      <Plus class="w-5 h-5 text-text" />
+    </button>
   </div>
   <div class="bg-background-secondary h-12 flex items-center justify-between px-4">
-    <div class="flex items-center space-x-4">
-      <a href="/" id="home" title="Home Page">
-        <Home class="w-5 h-5 cursor-pointer" />
+    <div class="flex items-center">
+      <a href="/" id="home" title="Home Page" class="flex items-center justify-center p-2 rounded-full hover:bg-interactive">
+        <Home class="w-5 h-5 cursor-pointer text-text-secondary" />
       </a>
-      <button title="Click to go back." id="back">
-        <ArrowLeft class="w-5 h-5 cursor-pointer" />
+      <button title="Click to go back." id="back" class="flex items-center justify-center p-2 rounded-full hover:bg-interactive">
+        <ArrowLeft class="w-5 h-5 cursor-pointer text-text-secondary" />
       </button>
-      <button title="Click to go forward." id="forward">
-        <ArrowRight class="w-5 h-5 cursor-pointer" />
+      <button title="Click to go forward." id="forward" class="flex items-center justify-center p-2 rounded-full hover:bg-interactive">
+        <ArrowRight class="w-5 h-5 cursor-pointer text-text-secondary" />
       </button>
-      <button title="Click to reload this page." id="reload">
-        <RotateCw class="w-5 h-5 cursor-pointer" />
+      <button title="Click to reload this page." id="reload" class="flex items-center justify-center p-2 rounded-full hover:bg-interactive">
+        <RotateCw class="w-5 h-5 cursor-pointer text-text-secondary" />
       </button>
     </div>
     <div class="flex-grow flex items-center justify-center mx-4">
       <input
         type="text"
         placeholder="Search or enter a new URL"
         id="inp"
-        class="w-10/12 h-8 px-4 rounded-md bg-border outline-none focus:ring-2 focus:ring-accent placeholder:text-interactive-secondary"
+        class="w-10/12 h-8 px-4 rounded-md bg-interactive text-text border border-border outline-none focus:ring-2 focus:ring-accent placeholder:text-placeholder"
       />
     </div>
-    <div class="flex items-center space-x-4">
-      <button title="Click to use fullscreen." id="fullscreen">
-        <Maximize2 class="w-5 h-5 cursor-pointer" />
+    <div class="flex items-center">
+      <button title="Click to use fullscreen." id="fullscreen" class="flex items-center justify-center p-2 rounded-full hover:bg-interactive">
+        <Maximize2 class="w-5 h-5 cursor-pointer text-text-secondary" />
       </button>
-      <button title="Click to bookmark this page." id="bookmark">
-        <Star class="w-5 h-5 cursor-pointer" />
+      <button title="Click to bookmark this page." id="bookmark" class="flex items-center justify-center p-2 rounded-full hover:bg-interactive">
+        <Star class="w-5 h-5 cursor-pointer text-text-secondary" />
       </button>
     </div>
   </div>
   <div class="absolute top-0 left-0 flex flex-col w-full h-screen justify-center items-center z-[-99]">
-    <Loader2 class="w-24 h-24 animate-spin text-white-500" />
-    <h2 class="mt-2">Interstellar is loading your content!</h2>
+    <Loader2 class="w-24 h-24 animate-spin text-text" />
+    <h2 class="mt-2 text-text-secondary">Interstellar is loading your content!</h2>
   </div>
   <iframe id="frame__1" class="w-full h-[calc(100vh_-_5rem)] z-9" title=""></iframe>
 </Layout>