Feat: header buttons (mostly functional)

package.json

@@ -36,8 +36,8 @@
     ]
   },
   "devDependencies": {
-    "@fontsource/inter": "^5.2.5",
     "@iconify-json/lucide": "^1.2.30",
+    "@iconify-json/material-symbols": "^1.2.17",
     "@mercuryworkshop/bare-mux": "^2.1.7",
     "@mercuryworkshop/epoxy-transport": "^2.1.27",
     "@mercuryworkshop/libcurl-transport": "^1.4.0",

pnpm-lock.yaml

@@ -45,12 +45,12 @@ importers:
         specifier: ^1.1.7
         version: 1.1.7
     devDependencies:
-      '@fontsource/inter':
-        specifier: ^5.2.5
-        version: 5.2.5
       '@iconify-json/lucide':
         specifier: ^1.2.30
         version: 1.2.30
+      '@iconify-json/material-symbols':
+        specifier: ^1.2.17
+        version: 1.2.17
       '@mercuryworkshop/bare-mux':
         specifier: ^2.1.7
         version: 2.1.7
@@ -351,12 +351,12 @@ packages:
   '@fastify/static@8.1.1':
     resolution: {integrity: sha512-TW9eyVHJLytZNpBlSIqd0bl1giJkEaRaPZG+5AT3L/OBKq9U8D7g/OYmc2NPQZnzPURGhMt3IAWuyVkvd2nOkQ==}
 
-  '@fontsource/inter@5.2.5':
-    resolution: {integrity: sha512-kbsPKj0S4p44JdYRFiW78Td8Ge2sBVxi/PIBwmih+RpSXUdvS9nbs1HIiuUSPtRMi14CqLEZ/fbk7dj7vni1Sg==}
-
   '@iconify-json/lucide@1.2.30':
     resolution: {integrity: sha512-0EaiofYbUwnp15sNC3cOJi0oD5DbbfDKbnIEA6jJ+WGHigyePgBVmx/5/S97XQmvl+Ix/Md3oGLKxkI5szL0rg==}
 
+  '@iconify-json/material-symbols@1.2.17':
+    resolution: {integrity: sha512-hKb+Ii5cqLXXefYMxUB2jIc8BNqxixQogud4KU/fn0F4puM1iCdCF2lFV+0U8wnJ6dZIx6E+w8Ree4bIT7To+A==}
+
   '@iconify/tools@4.1.2':
     resolution: {integrity: sha512-q6NzLQYEN9zkDfcyBqD3vItHcZw97w/s++3H3TBxUORr57EfHxj6tOW6fyufDjMq+Vl56WXWaPx1csBPYlI5CA==}
 
@@ -3153,12 +3153,14 @@ snapshots:
       fastq: 1.19.1
       glob: 11.0.1
 
-  '@fontsource/inter@5.2.5': {}
-
   '@iconify-json/lucide@1.2.30':
     dependencies:
       '@iconify/types': 2.0.0
 
+  '@iconify-json/material-symbols@1.2.17':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify/tools@4.1.2':
     dependencies:
       '@iconify/types': 2.0.0

src/components/Header.astro

@@ -2,24 +2,41 @@
 import { Icon } from "astro-icon/components";
 const path = Astro.url.pathname;
 ---
-<div class="h-14 fixed bg-(--background) border-b border-b-(--border) px-4 w-full z-10 flex items-center">
+<div class="h-14 fixed bg-(--background) border-b border-b-(--border) px-4 w-full z-10 flex items-center font-inter">
-    <div class="flex items-center gap-3">
+    <div class="flex items-center gap-3 w-full">
-        <button id="menu" class="cursor-pointer inline-flex items-center justify-center whitespcae-nowrap rounded-lg text-sm font-medium ring-(--offset-background) h-10 w-10 hover:bg-(--accent)">
+        <button id="menu" class="cursor-pointer inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium ring-(--offset-background) h-10 w-10 hover:bg-(--accent)">
             <Icon name="lucide:menu" class="text-(--foreground) h-7 w-7" />
         </button>
-        <a id="bhl" class="flex items-center gap-2" href="/">
+        <a id="bhl" class="flex items-center gap-2 w-full" href="/">
             <Icon name="lucide:radius" class="w-8 h-8 rotate-180 text-(--foreground)" />
             <h1 class="text-xl font-bold text-(--foreground)"> Radius </h1>
         </a>
-        <div id="phl" class="flex items-center gap-2 hidden">
+        <div id="phl" class="flex items-center w-full justify-between hidden">
-            <img id="phlImage" src="https://google.com/favicon.ico" class="w-8 h-8 text-(--foreground) rounded-2xl" />
+            <div class="flex items-center gap-2 w-1/2">
-            <h1 id="phlTitle" class="hidden md:block text-xl font-bold text-(--foreground) whitespace-nowrap"> Radius </h1>
+                <img id="phlImage" src="" class="w-8 h-8 text-(--foreground) rounded-2xl" />
+                <h1 id="phlTitle" class="hidden md:block text-xl font-bold text-(--foreground) whitespace-nowrap overflow-hidden text-ellipsis w-full"> Radius </h1>
+            </div>
+            <div class="flex items-center gap-2 flex-grow justify-end text-(--foreground) md:mr-4">
+                <button id="pal" class="font-medium rounded-lg h-10 w-10 hover:bg-(--accent) inline-flex items-center justify-center transition-colors cursor-pointer">
+                    <Icon name="lucide:arrow-left" class="h-6 w-6" />
+                </button>
+                <button id="par" class="font-medium h-10 w-10 rounded-lg hover:bg-(--accent) inline-flex items-center justify-center transition-colors cursor-pointer">
+                    <Icon name="lucide:arrow-right" class="h-6 w-6"  />
+                </button>
+                <button id="prl" class="font-medium h-10 w-10 rounded-lg hover:bg-(--accent) inline-flex items-center justify-center transition-colors cursor-pointer">
+                    <Icon name="lucide:rotate-cw" class="h-6 w-6"  />
+                </button>
+                <button id="psc" class="font-medium h-10 w-10 rounded-lg hover:bg-(--accent) inline-flex items-center justify-center transition-colors cursor-pointer">
+                    <Icon name="material-symbols:star-outline-rounded" class="h-8 w-8" id="noShortcut" />
+                    <Icon name="material-symbols:star-rounded" class="h-8 w-8 hidden" id="shortcut" />
+                </button>
+            </div>
         </div>
     </div>
     <div>
     </div>
 </div>
-<div class="fixed w-full h-full z-10 flex flex-row pointer-events-auto invisible transition duration-500" id="navigation">
+<div class="fixed w-full h-full z-10 flex flex-row pointer-events-auto invisible transition duration-500 font-inter" id="navigation">
     <div id="innerNav" class="flex flex-col gap-6 w-72 h-full bg-(--background) border-r border-r-(--border) p-6 transition duration-250 shadow-lg">
         <div class="w-full flex flex-row justify-between transition duration-250">
             <Icon name="lucide:radius" class="w-10 h-10 rotate-180 text-(--foreground)" />

src/layouts/Layout.astro

@@ -1,7 +1,6 @@
 ---
 import "@styles/themes/default.css";
 import "@styles/global.css";
-import "@fontsource/inter";
 import { ClientRouter } from "astro:transitions";
 import Loader from "@components/Loader.astro";
 import Header from "@components/Header.astro";
@@ -17,7 +16,7 @@ import Header from "@components/Header.astro";
         <title>Radius</title>
         <ClientRouter fallback="animate" />
 	</head>
-    <body class="h-full w-full bg-(--background) font-override">
+    <body class="h-full w-full bg-(--background) font-inter">
         <Header />
         <div class="h-full w-full fixed bg-(--background) text-(--foreground)">
             <slot />

src/pages/index.astro

@@ -13,7 +13,7 @@ const randomSplash = genSplash();
 ---
 
 <Layout>
-    <div class="h-full flex items-center justify-center">
+    <div class="h-full flex items-center justify-center font-inter">
         <div class="flex flex-col items-center gap-6">
             <div class="flex items-center gap-2">
                 <Icon name="lucide:radius" class="h-16 w-16 rotate-180 text-(--foreground)" />
@@ -25,7 +25,7 @@ const randomSplash = genSplash();
             </div>
             <p class="text-sm text-center sm:text-base whitespace-nowrap"> { randomSplash } </p>
         </div>
-        <iframe id="iframe" class="fixed h-[calc(100%-3.5rem)] mt-14 w-full hidden" />
+        <iframe id="iframe" class="fixed h-[calc(100%-3.5rem)] mt-14 w-full hidden bg-(--background)" />
     </div>
 </Layout>
 <script>
@@ -41,6 +41,14 @@ const randomSplash = genSplash();
         const phl = document.getElementById("phl") as HTMLDivElement;
         const phlImage = document.getElementById("phlImage") as HTMLImageElement;
         const phlTitle = document.getElementById("phlTitle") as HTMLDivElement;
+        const proxyLeft = document.getElementById("pal") as HTMLButtonElement;
+        const proxyRight = document.getElementById("par") as HTMLButtonElement;
+        const proxyReload = document.getElementById("prl") as HTMLButtonElement;
+        const proxyShortcut = {
+            button: document.getElementById("psc") as HTMLButtonElement,
+            noShortcut: document.getElementById("noShortcut") as HTMLElement,
+            shortcut: document.getElementById("shortcut") as HTMLElement
+        }
         const client = new BareClient();
         input.addEventListener("keypress", async (event: any) => {
             if (event.key === "Enter") {
@@ -63,8 +71,22 @@ const randomSplash = genSplash();
             }
         }
 
+        const buttons = () => {
+            proxyLeft.addEventListener("click", () => {
+                iframeWin!.history.back();
+            });
+            proxyRight.addEventListener("click", () => {
+                iframeWin!.history.forward();
+            });
+            proxyReload.addEventListener("click", () => {
+                iframeWin!.location.reload();
+            });
+            proxyShortcut.button.addEventListener("click", () => {
+                console.log("yet to be implemented");
+            });
+        }
+
         iframe.addEventListener("load", async () => {
-            //const url = new URL();
             phlTitle.innerHTML = iframeWin!.document.title;
             const pageURL = await getURL();
             const data = await client.fetch(`https://www.google.com/s2/favicons?domain=${pageURL}&sz=64`);
@@ -73,7 +95,7 @@ const randomSplash = genSplash();
             phlImage.src = object;
             bhl.classList.add("hidden");
             phl.classList.remove("hidden");
-            //URL.revokeObjectURL(object);
+            buttons();
         }); 
     }
 

src/styles/global.css

@@ -1,6 +1,6 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
 @import "tailwindcss";
 
-
+@theme {
-.font-override {
+    --font-inter: "Inter", sans-serif
-    font-family: var(--font-family), Inter, sans-serif;
 }