From 42a0181cbf286e57b01cce30f68c2f926dfc6aec Mon Sep 17 00:00:00 2001
From: Huakun Shen <huakun.shen@huakunshen.com>
Date: Sat, 1 Jun 2024 08:32:31 -0400
Subject: [PATCH] Fix ip-info extension scroll bar color bug.

---
 extensions/ip-info/src/App.vue | 263 ++++++++++++++++-----------------
 1 file changed, 128 insertions(+), 135 deletions(-)

diff --git a/extensions/ip-info/src/App.vue b/extensions/ip-info/src/App.vue
index a174b84..ff8c015 100644
--- a/extensions/ip-info/src/App.vue
+++ b/extensions/ip-info/src/App.vue
@@ -125,141 +125,134 @@ function onIpSearch(e: Event) {
   }
 }
 </script>
+
 <template>
   <Toaster />
-  <main class="h-screen bg-background text-foreground flex flex-col">
-    <div class="h-8" data-tauri-drag-region />
-
-    <!-- <ModeToggle /> -->
-    <Command class="rounded-lg border-none shadow-md text-xl">
-      <div class="flex gap-1.5 px-2">
-        <span class="grow"><CommandInput placeholder="Type to search..." class="" /></span>
-        <form class="flex w-full items-center gap-1.5 max-w-xs" @submit="onIpSearch">
-          <Input id="IP Address" type="text" placeholder="IP Address" v-model="ipSearchTerm" />
-          <Button type="submit" variant="outline">Search</Button>
-        </form>
-      </div>
-      <CommandList>
-        <CommandEmpty>No results found.</CommandEmpty>
-        <CommandGroup v-if="ip" heading="IP Info">
-          <CommandItem value="Public IP" class="space-x-3" @select="() => onSelect(ip!.query)">
-            <Icon icon="mdi:web" class="w-4 h-4" />
-            <span class="font-bold">Public IPv4</span>
-            <span class="text-muted-foreground">{{ ip.query }}</span>
-          </CommandItem>
-          <CommandItem value="continent" class="space-x-3" @select="() => onSelect(ip!.continent)">
-            <Icon icon="mdi:earth" class="w-4 h-4" />
-            <span class="font-bold">Continent</span>
-            <span class="text-muted-foreground">{{ ip.continent }}</span>
-          </CommandItem>
-          <CommandItem value="country" class="space-x-3" @select="() => onSelect(ip!.country)">
-            <Icon icon="gis:search-country" class="w-4 h-4" />
-            <span class="font-bold">Country</span>
-            <span class="text-muted-foreground">{{ ip.country }}</span>
-          </CommandItem>
-          <CommandItem
-            value="countryCode"
-            class="space-x-3"
-            @select="() => onSelect(ip!.countryCode)"
-          >
-            <Icon icon="ic:baseline-code" class="w-4 h-4" />
-            <span class="font-bold">Country Code</span>
-            <span class="text-muted-foreground">{{ ip.countryCode }}</span>
-          </CommandItem>
-          <CommandItem value="region" class="space-x-3" @select="() => onSelect(ip!.region)">
-            <Icon icon="mdi:web" class="w-4 h-4" />
-            <span class="font-bold">Region</span>
-            <span class="text-muted-foreground">{{ ip.region }}</span>
-          </CommandItem>
-          <CommandItem
-            value="regionName"
-            class="space-x-3"
-            @select="() => onSelect(ip!.regionName)"
-          >
-            <Icon icon="oui:vis-map-region" class="w-4 h-4" />
-            <span class="font-bold">Region Name</span>
-            <span class="text-muted-foreground">{{ ip.regionName }}</span>
-          </CommandItem>
-          <CommandItem value="city" class="space-x-3" @select="() => onSelect(ip!.city)">
-            <Icon icon="solar:city-bold" class="w-4 h-4" />
-            <span class="font-bold">City</span>
-            <span class="text-muted-foreground">{{ ip.city }}</span>
-          </CommandItem>
-          <CommandItem value="district" class="space-x-3" @select="() => onSelect(ip!.district)">
-            <Icon icon="oui:vis-map-region" class="w-4 h-4" />
-            <span class="font-bold">District</span>
-            <span class="text-muted-foreground">{{ ip.district }}</span>
-          </CommandItem>
-          <CommandItem value="zip" class="space-x-3" @select="() => onSelect(ip!.zip)">
-            <Icon icon="tabler:zip" class="w-4 h-4" />
-            <span class="font-bold">ZIP</span>
-            <span class="text-muted-foreground">{{ ip.zip }}</span>
-          </CommandItem>
-          <CommandItem
-            value="lat"
-            class="space-x-3"
-            @select="() => onSelect(`${ip!.lat}, ${ip!.lon}`)"
-          >
-            <Icon icon="pepicons-pop:map" class="w-4 h-4" />
-            <span class="font-bold">GeoCoordinates</span>
-            <span class="text-muted-foreground">{{ ip.lat }}, {{ ip.lon }}</span>
-          </CommandItem>
-          <CommandItem value="timezone" class="space-x-3" @select="() => onSelect(ip!.timezone)">
-            <Icon icon="mdi:timezone" class="w-4 h-4" />
-            <span class="font-bold">Timezone</span>
-            <span class="text-muted-foreground">{{ ip.timezone }}</span>
-          </CommandItem>
-          <CommandItem
-            value="offset"
-            class="space-x-3"
-            @select="() => onSelect(`${ip!.offset / 3600} hrs`)"
-          >
-            <Icon icon="mdi:clock" class="w-4 h-4" />
-            <span class="font-bold">Offset</span>
-            <span class="text-muted-foreground">{{ ip.offset / 3600 }} hrs</span>
-          </CommandItem>
-          <CommandItem value="currency" class="space-x-3" @select="() => onSelect(ip!.currency)">
-            <Icon icon="simple-icons:bitcoinsv" class="w-4 h-4" />
-            <span class="font-bold">Currency</span>
-            <span class="text-muted-foreground">{{ ip.currency }}</span>
-          </CommandItem>
-          <CommandItem value="isp" class="space-x-3" @select="() => onSelect(ip!.isp)">
-            <Icon icon="carbon:container-services" class="w-4 h-4" />
-            <span class="font-bold">ISP</span>
-            <span class="text-muted-foreground">{{ ip.isp }}</span>
-          </CommandItem>
-          <CommandItem value="org" class="space-x-3" @select="() => onSelect(ip!.org)">
-            <Icon icon="clarity:organization-solid" class="w-4 h-4" />
-            <span class="font-bold">Org</span>
-            <span class="text-muted-foreground">{{ ip.org }}</span>
-          </CommandItem>
-          <CommandItem value="as" class="space-x-3" @select="() => onSelect(ip!.as)">
-            <Icon icon="carbon:container-services" class="w-4 h-4" />
-            <span class="font-bold">AS Number</span>
-            <span class="text-muted-foreground">{{ ip.as }}</span>
-          </CommandItem>
-          <CommandItem value="asname" class="space-x-3" @select="() => onSelect(ip!.asname)">
-            <Icon icon="carbon:container-services" class="w-4 h-4" />
-            <span class="font-bold">AS Name</span>
-            <span class="text-muted-foreground">{{ ip.asname }}</span>
-          </CommandItem>
-          <CommandItem value="reverse" class="space-x-3" @select="() => onSelect(ip!.reverse)">
-            <Icon icon="material-symbols:dns" class="w-4 h-4" />
-            <span class="font-bold">Reverse DNS</span>
-            <span class="text-muted-foreground">{{ ip.reverse }}</span>
-          </CommandItem>
-          <CommandItem value="proxy" class="space-x-3" @select="() => onSelect(ip!.proxy)">
-            <Icon icon="mdi:proxy" class="w-4 h-4" />
-            <span class="font-bold">Proxy, VPN or Tor exit Address</span>
-            <span class="text-muted-foreground">{{ ip.proxy }}</span>
-          </CommandItem>
-          <CommandItem value="hosting" class="space-x-3" @select="() => onSelect(ip!.hosting)">
-            <Icon icon="clarity:host-solid" class="w-4 h-4" />
-            <span class="font-bold">Hosting, colocated or data center</span>
-            <span class="text-muted-foreground">{{ ip.hosting }}</span>
-          </CommandItem>
-        </CommandGroup>
-      </CommandList>
-    </Command>
-  </main>
+  <div class="h-8" data-tauri-drag-region />
+  <Command class="rounded-lg border-none shadow-md text-xl">
+    <div class="flex gap-1.5 px-2">
+      <span class="grow"><CommandInput placeholder="Type to search..." class="" /></span>
+      <form class="flex w-full items-center gap-1.5 max-w-xs" @submit="onIpSearch">
+        <Input id="IP Address" type="text" placeholder="IP Address" v-model="ipSearchTerm" />
+        <Button type="submit" variant="outline">Search</Button>
+      </form>
+    </div>
+    <CommandList>
+      <CommandEmpty>No results found.</CommandEmpty>
+      <CommandGroup v-if="ip" heading="IP Info">
+        <CommandItem value="Public IP" class="space-x-3" @select="() => onSelect(ip!.query)">
+          <Icon icon="mdi:web" class="w-4 h-4" />
+          <span class="font-bold">Public IPv4</span>
+          <span class="text-muted-foreground">{{ ip.query }}</span>
+        </CommandItem>
+        <CommandItem value="continent" class="space-x-3" @select="() => onSelect(ip!.continent)">
+          <Icon icon="mdi:earth" class="w-4 h-4" />
+          <span class="font-bold">Continent</span>
+          <span class="text-muted-foreground">{{ ip.continent }}</span>
+        </CommandItem>
+        <CommandItem value="country" class="space-x-3" @select="() => onSelect(ip!.country)">
+          <Icon icon="gis:search-country" class="w-4 h-4" />
+          <span class="font-bold">Country</span>
+          <span class="text-muted-foreground">{{ ip.country }}</span>
+        </CommandItem>
+        <CommandItem
+          value="countryCode"
+          class="space-x-3"
+          @select="() => onSelect(ip!.countryCode)"
+        >
+          <Icon icon="ic:baseline-code" class="w-4 h-4" />
+          <span class="font-bold">Country Code</span>
+          <span class="text-muted-foreground">{{ ip.countryCode }}</span>
+        </CommandItem>
+        <CommandItem value="region" class="space-x-3" @select="() => onSelect(ip!.region)">
+          <Icon icon="mdi:web" class="w-4 h-4" />
+          <span class="font-bold">Region</span>
+          <span class="text-muted-foreground">{{ ip.region }}</span>
+        </CommandItem>
+        <CommandItem value="regionName" class="space-x-3" @select="() => onSelect(ip!.regionName)">
+          <Icon icon="oui:vis-map-region" class="w-4 h-4" />
+          <span class="font-bold">Region Name</span>
+          <span class="text-muted-foreground">{{ ip.regionName }}</span>
+        </CommandItem>
+        <CommandItem value="city" class="space-x-3" @select="() => onSelect(ip!.city)">
+          <Icon icon="solar:city-bold" class="w-4 h-4" />
+          <span class="font-bold">City</span>
+          <span class="text-muted-foreground">{{ ip.city }}</span>
+        </CommandItem>
+        <CommandItem value="district" class="space-x-3" @select="() => onSelect(ip!.district)">
+          <Icon icon="oui:vis-map-region" class="w-4 h-4" />
+          <span class="font-bold">District</span>
+          <span class="text-muted-foreground">{{ ip.district }}</span>
+        </CommandItem>
+        <CommandItem value="zip" class="space-x-3" @select="() => onSelect(ip!.zip)">
+          <Icon icon="tabler:zip" class="w-4 h-4" />
+          <span class="font-bold">ZIP</span>
+          <span class="text-muted-foreground">{{ ip.zip }}</span>
+        </CommandItem>
+        <CommandItem
+          value="lat"
+          class="space-x-3"
+          @select="() => onSelect(`${ip!.lat}, ${ip!.lon}`)"
+        >
+          <Icon icon="pepicons-pop:map" class="w-4 h-4" />
+          <span class="font-bold">GeoCoordinates</span>
+          <span class="text-muted-foreground">{{ ip.lat }}, {{ ip.lon }}</span>
+        </CommandItem>
+        <CommandItem value="timezone" class="space-x-3" @select="() => onSelect(ip!.timezone)">
+          <Icon icon="mdi:timezone" class="w-4 h-4" />
+          <span class="font-bold">Timezone</span>
+          <span class="text-muted-foreground">{{ ip.timezone }}</span>
+        </CommandItem>
+        <CommandItem
+          value="offset"
+          class="space-x-3"
+          @select="() => onSelect(`${ip!.offset / 3600} hrs`)"
+        >
+          <Icon icon="mdi:clock" class="w-4 h-4" />
+          <span class="font-bold">Offset</span>
+          <span class="text-muted-foreground">{{ ip.offset / 3600 }} hrs</span>
+        </CommandItem>
+        <CommandItem value="currency" class="space-x-3" @select="() => onSelect(ip!.currency)">
+          <Icon icon="simple-icons:bitcoinsv" class="w-4 h-4" />
+          <span class="font-bold">Currency</span>
+          <span class="text-muted-foreground">{{ ip.currency }}</span>
+        </CommandItem>
+        <CommandItem value="isp" class="space-x-3" @select="() => onSelect(ip!.isp)">
+          <Icon icon="carbon:container-services" class="w-4 h-4" />
+          <span class="font-bold">ISP</span>
+          <span class="text-muted-foreground">{{ ip.isp }}</span>
+        </CommandItem>
+        <CommandItem value="org" class="space-x-3" @select="() => onSelect(ip!.org)">
+          <Icon icon="clarity:organization-solid" class="w-4 h-4" />
+          <span class="font-bold">Org</span>
+          <span class="text-muted-foreground">{{ ip.org }}</span>
+        </CommandItem>
+        <CommandItem value="as" class="space-x-3" @select="() => onSelect(ip!.as)">
+          <Icon icon="carbon:container-services" class="w-4 h-4" />
+          <span class="font-bold">AS Number</span>
+          <span class="text-muted-foreground">{{ ip.as }}</span>
+        </CommandItem>
+        <CommandItem value="asname" class="space-x-3" @select="() => onSelect(ip!.asname)">
+          <Icon icon="carbon:container-services" class="w-4 h-4" />
+          <span class="font-bold">AS Name</span>
+          <span class="text-muted-foreground">{{ ip.asname }}</span>
+        </CommandItem>
+        <CommandItem value="reverse" class="space-x-3" @select="() => onSelect(ip!.reverse)">
+          <Icon icon="material-symbols:dns" class="w-4 h-4" />
+          <span class="font-bold">Reverse DNS</span>
+          <span class="text-muted-foreground">{{ ip.reverse }}</span>
+        </CommandItem>
+        <CommandItem value="proxy" class="space-x-3" @select="() => onSelect(ip!.proxy)">
+          <Icon icon="mdi:proxy" class="w-4 h-4" />
+          <span class="font-bold">Proxy, VPN or Tor exit Address</span>
+          <span class="text-muted-foreground">{{ ip.proxy }}</span>
+        </CommandItem>
+        <CommandItem value="hosting" class="space-x-3" @select="() => onSelect(ip!.hosting)">
+          <Icon icon="clarity:host-solid" class="w-4 h-4" />
+          <span class="font-bold">Hosting, colocated or data center</span>
+          <span class="text-muted-foreground">{{ ip.hosting }}</span>
+        </CommandItem>
+      </CommandGroup>
+    </CommandList>
+  </Command>
 </template>