Bug fixes and performance improvements

components/Browser.tsx

@@ -1,15 +1,11 @@
 import { CpuChipIcon, GlobeAltIcon } from '@heroicons/react/24/outline';
 import { Header } from './Header';
 import { InfoRow } from './Info';
-import type { HostInfo } from '@/utils/types';
 
-export const BrowserResourceView = ({ data }: { data: HostInfo }) => {
+export const BrowserResourceView = ({ url }: { url: string }) => {
   return (
     <div className="w-80 bg-white dark:bg-gray-950 font-sans">
-      <Header
-        title="System Resource"
-        flagCode="unknown"
-      />
+      <Header title="System Resource" flagCode={null} />
       <div className="p-5">
         <InfoRow
           icon={CpuChipIcon}
@@ -20,7 +16,7 @@ export const BrowserResourceView = ({ data }: { data: HostInfo }) => {
         <InfoRow
           icon={GlobeAltIcon}
           label="URL"
-          value={data.url}
+          value={url}
           iconColor="text-gray-400"
         />
       </div>

components/CopyButton.tsx

@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import { CheckIcon, ClipboardDocumentIcon } from '@heroicons/react/24/outline';
 
 export const CopyButton = ({ text }: { text: string }) => {

components/Header.tsx

@@ -1,10 +1,8 @@
-import { browser } from 'wxt/browser';
-
 export const Header = ({ title, flagCode }: { title: string, flagCode?: string | null }) => {
   const getFlagUrl = (code?: string | null) => {
     if (!code) return '';
     try {
-      const path = `/${code.toLowerCase()}.webp`;
+      const path = `/${code.toLowerCase()}.png`;
       return browser.runtime.getURL(path as any);
     } catch {
       return '';

components/Local.tsx

@@ -1,13 +1,13 @@
 import { CpuChipIcon, ServerIcon } from '@heroicons/react/24/outline';
 import { Header } from './Header';
 import { InfoRow } from './Info';
-import type { HostInfo } from '@/utils/types';
+import type { GeoData } from '@/utils/types';
 
-export const LocalNetworkView = ({ data }: { data: HostInfo }) => {
+export const LocalNetworkView = ({ data, domain }: { data: GeoData, domain: string }) => {
   return (
     <div className="w-80 bg-white dark:bg-gray-950 font-sans">
       <Header
-        title={data.domain}
+        title={domain}
         flagCode="unknown"
       />
       <div className="p-5">
@@ -20,7 +20,7 @@ export const LocalNetworkView = ({ data }: { data: HostInfo }) => {
         <InfoRow
           icon={ServerIcon}
           label="IP Address"
-          value={data.network?.ip || null}
+          value={data.ip}
           canCopy
           iconColor="text-blue-500"
         />

components/Public.tsx

@@ -1,59 +1,50 @@
-import {
-  ServerIcon,
-  MapPinIcon,
-  GlobeAltIcon,
-  BuildingOfficeIcon
-} from '@heroicons/react/24/outline';
+import { ServerIcon, MapPinIcon, GlobeAltIcon, BuildingOfficeIcon } from '@heroicons/react/24/outline';
 import { Header } from './Header';
 import { InfoRow } from './Info';
-import type { HostInfo } from '@/utils/types';
-
-export const PublicNetworkView = ({ data }: { data: HostInfo }) => {
-  const { network, location, domain } = data;
-
-  if (!network) return null;
+import type { GeoData } from '@/utils/types';
 
+export const PublicNetworkView = ({ data, domain }: { data: GeoData, domain: string }) => {
   return (
     <div className="w-80 bg-white dark:bg-gray-950 font-sans text-gray-900 dark:text-gray-100">
       <Header
         title="Host Information"
-        flagCode={location?.countryCode || 'unknown'}
+        flagCode={data.countryCode}
       />
 
       <div className="p-5 space-y-0.5">
         <InfoRow
           icon={ServerIcon}
           label="IP Address"
-          value={network.ip}
-          href={`https://ip.albert.lol/${network.ip}`}
+          value={data.ip}
+          href={`https://ip.albert.lol/${data.ip}`}
           canCopy
           iconColor="text-blue-500"
         />
         <InfoRow
           icon={GlobeAltIcon}
           label="Hostname"
-          value={network.hostname}
+          value={domain}
           canCopy
           iconColor="text-indigo-500"
         />
         <InfoRow
           icon={MapPinIcon}
           label="Location"
-          value={location?.countryName || 'Unknown Location'}
+          value={data.countryName || 'Unknown Location'}
           iconColor="text-emerald-500"
         />
         <InfoRow
           icon={BuildingOfficeIcon}
           label="Organization / ASN"
-          value={network.org}
-          href={network.asn ? `https://bgp.he.net/${network.asn}` : undefined}
+          value={data.org}
+          href={data.asn ? `https://bgp.he.net/${data.asn}` : undefined}
           iconColor="text-violet-500"
         />
       </div>
 
       <div className="px-5 pb-5 pt-2">
         <a
-          href={`https://platform.censys.io/search?q=${network.hostname || domain}`}
+          href={`https://search.censys.io/hosts/${data.ip}`}
           target="_blank"
           rel="noreferrer"
           className="flex items-center justify-center w-full py-2 px-4 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300 rounded-md transition-all text-xs font-medium shadow-sm hover:shadow cursor-pointer"

components/ServerInfo.tsx

@@ -1,27 +1,31 @@
-import type { HostInfo } from '@/utils/types';
+import type { TabState } from '@/utils/types';
 import Error from './Error';
 import { BrowserResourceView } from './Browser';
 import { LocalNetworkView } from './Local';
 import { PublicNetworkView } from './Public';
 
-export default function ServerInfo({ data }: { data: HostInfo }) {
-  const { network, isBrowserResource } = data;
+export default function ServerInfo({ state }: { state: TabState }) {
 
-  // Browser Resource View
-  if (isBrowserResource) {
-    return <BrowserResourceView data={data} />;
+  if (state.status === 'error') {
+    return <Error error={state.errorMessage || 'Unknown Error'} />;
   }
 
-  // Fallback if network data is missing
-  if (!network) {
-    return <Error error="Host information unavailable." />;
+  if (state.status === 'success' && !state.data) {
+    return <BrowserResourceView url={state.url} />;
   }
 
-  // Local Network View
-  if (network.isLocal) {
-    return <LocalNetworkView data={data} />;
+  if (state.status === 'loading' || !state.data) {
+    return (
+      <div className="w-80 h-64 flex flex-col items-center justify-center space-y-3 bg-white dark:bg-gray-950">
+        <div className="w-6 h-6 border-2 border-gray-200 dark:border-gray-700 border-t-blue-600 rounded-full animate-spin"></div>
+        <span className="text-xs text-gray-400 font-medium">Analyzing Network...</span>
+      </div>
+    );
   }
 
-  // Public Internet View
-  return <PublicNetworkView data={data} />;
+  if (state.data.isLocal || state.data.isBogon) {
+    return <LocalNetworkView data={state.data} domain={state.domain} />;
+  }
+
+  return <PublicNetworkView data={state.data} domain={state.domain} />;
 }