fix: darkmode revision for the databrowser to improve usability

playwright.config.ts

@@ -40,17 +40,17 @@ export default defineConfig({
   projects: [
     {
       name: "chromium",
-      use: { ...devices["Desktop Chrome"], viewport: { width: 1280, height: 1500 } },
+      use: { ...devices["Desktop Chrome"], viewport: { width: 1280, height: 1280 } },
     },
 
     {
       name: "firefox",
-      use: { ...devices["Desktop Firefox"], viewport: { width: 1280, height: 1500 } },
+      use: { ...devices["Desktop Firefox"], viewport: { width: 1280, height: 1280 } },
     },
 
     {
       name: "webkit",
-      use: { ...devices["Desktop Safari"], viewport: { width: 1280, height: 1500 } },
+      use: { ...devices["Desktop Safari"], viewport: { width: 1280, height: 1280 } },
     },
 
     /* Test against mobile viewports. */

src/components/databrowser/components/add-key-modal.tsx

@@ -25,6 +25,7 @@ import {
 import { Spinner } from "@/components/ui/spinner"
 import { TypeTag } from "@/components/databrowser/components/type-tag"
 import { useAddKey } from "@/components/databrowser/hooks/use-add-key"
+import { SimpleTooltip } from "@/components/ui/tooltip"
 
 export function AddKeyModal() {
   const { setSelectedKey } = useTab()
@@ -62,10 +63,12 @@ export function AddKeyModal() {
         setOpen(open)
       }}
     >
-      <DialogTrigger asChild>
-        <Button variant="primary" size="icon-sm" aria-label="Add key">
-          <PlusIcon className="size-4" />
-        </Button>
+      <DialogTrigger>
+        <SimpleTooltip content="Add key">
+          <Button variant="primary" size="icon-sm" data-testid="add-key-button">
+            <PlusIcon className="size-4" />
+          </Button>
+        </SimpleTooltip>
       </DialogTrigger>
 
       <DialogContent className="max-w-[400px]">

src/components/databrowser/components/display/display-header.tsx

@@ -3,6 +3,7 @@ import { type DataType } from "@/types"
 import { IconPlus } from "@tabler/icons-react"
 
 import { Button } from "@/components/ui/button"
+import { SimpleTooltip } from "@/components/ui/tooltip"
 
 import { TypeTag } from "../type-tag"
 import { HeaderTTLBadge, LengthBadge, SizeBadge } from "./header-badges"
@@ -36,9 +37,11 @@ export const DisplayHeader = ({
 
         <div className="flex items-center gap-1">
           {type !== "string" && type !== "json" && (
-            <Button onClick={handleAddItem} size="icon-sm" aria-label="Add item">
-              <IconPlus className="size-4 text-zinc-500" />
-            </Button>
+            <SimpleTooltip content="Add item">
+              <Button onClick={handleAddItem} size="icon-sm" aria-label="Add item">
+                <IconPlus className="size-4 text-zinc-500 dark:text-zinc-600" />
+              </Button>
+            </SimpleTooltip>
           )}
 
           <KeyActions dataKey={dataKey} content={content} />

src/components/databrowser/components/display/display-list.tsx

@@ -84,7 +84,9 @@ export const ListItems = ({
           onClick={() => {
             setSelectedListItem({ key })
           }}
-          className={cn("h-10 border-b border-b-zinc-100 transition-colors hover:bg-zinc-100")}
+          className={cn(
+            "h-10 border-b border-b-zinc-100 transition-colors hover:bg-zinc-100 dark:border-b-zinc-200 dark:hover:bg-zinc-200"
+          )}
         >
           <td
             className={cn(
@@ -103,7 +105,7 @@ export const ListItems = ({
           )}
           {type !== "stream" && (
             <td
-              className="w-0 min-w-0 p-0"
+              className="w-0 min-w-0 p-0 pr-2"
               onClick={(e) => {
                 e.stopPropagation()
               }}

src/components/databrowser/components/display/header-badges.tsx

@@ -59,8 +59,8 @@ export const HeaderTTLBadge = ({ dataKey }: { dataKey: string }) => {
 }
 
 export const Badge = ({ children, label }: { children: React.ReactNode; label: string }) => (
-  <div className="flex h-6 items-center gap-0.5 rounded-md bg-white px-2 text-xs text-zinc-700">
-    <span className="text-zinc-500">{label}</span>
+  <div className="flex h-6 items-center gap-0.5 rounded-md bg-white px-2 text-xs text-zinc-700 dark:bg-zinc-200">
+    <span className="text-zinc-500 dark:text-zinc-600">{label}</span>
     <span className="font-medium">{children}</span>
   </div>
 )

src/components/databrowser/components/display/key-actions.tsx

@@ -19,7 +19,7 @@ export function KeyActions({ dataKey, content }: { dataKey: string; content?: st
     <DropdownMenu modal={false}>
       <DropdownMenuTrigger asChild>
         <Button size="icon-sm" aria-label="Key actions">
-          <IconDotsVertical className="size-4 text-zinc-500" />
+          <IconDotsVertical className="size-4 text-zinc-500 dark:text-zinc-600" />
         </Button>
       </DropdownMenuTrigger>
 

src/components/databrowser/components/sidebar/index.tsx

@@ -1,8 +1,4 @@
-import { IconRefresh } from "@tabler/icons-react"
-
 import { queryClient } from "@/lib/clients"
-import { Button } from "@/components/ui/button"
-import { Spinner } from "@/components/ui/spinner"
 
 import { FETCH_LIST_ITEMS_QUERY_KEY, FETCH_SIMPLE_KEY_QUERY_KEY } from "../../hooks"
 import { FETCH_KEY_TYPE_QUERY_KEY } from "../../hooks/use-fetch-key-type"
@@ -12,6 +8,7 @@ import { DisplayDbSize, FETCH_DB_SIZE_QUERY_KEY } from "./db-size"
 import { Empty } from "./empty"
 import { InfiniteScroll } from "./infinite-scroll"
 import { KeysList } from "./keys-list"
+import { ReloadButton } from "./reload-button"
 import { SearchInput } from "./search-input"
 import { LoadingSkeleton } from "./skeleton-buttons"
 import { DataTypeSelector } from "./type-selector"
@@ -26,9 +23,7 @@ export function Sidebar() {
         <div className="flex h-10 items-center justify-between pl-1">
           <DisplayDbSize />
           <div className="flex gap-1">
-            <Button
-              aria-label="Refresh"
-              className="h-7 w-7 px-0 text-zinc-500 dark:text-zinc-600"
+            <ReloadButton
               onClick={() => {
                 queryClient.invalidateQueries({
                   queryKey: [FETCH_KEYS_QUERY_KEY],
@@ -46,11 +41,8 @@ export function Sidebar() {
                   queryKey: [FETCH_KEY_TYPE_QUERY_KEY],
                 })
               }}
-            >
-              <Spinner isLoading={query.isFetching}>
-                <IconRefresh size={16} />
-              </Spinner>
-            </Button>
+              isLoading={query.isFetching}
+            />
             <AddKeyModal />
           </div>
         </div>

src/components/databrowser/components/sidebar/reload-button.tsx

@@ -1,8 +1,8 @@
 import { useState } from "react"
-import { ReloadIcon } from "@radix-ui/react-icons"
 
-import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
+import { SimpleTooltip } from "@/components/ui/tooltip"
+import { IconLoader2, IconRefresh } from "@tabler/icons-react"
 
 export const ReloadButton = ({
   onClick,
@@ -23,14 +23,20 @@ export const ReloadButton = ({
 
   return (
     <div>
-      <Button
-        variant="outline"
-        size="icon-sm"
-        onClick={handleClick}
-        disabled={isLoading || isLoadingProp}
-      >
-        <ReloadIcon className={cn("size-4", isLoading || isLoadingProp ? "animate-spin" : "")} />
-      </Button>
+      <SimpleTooltip content="Refresh">
+        <Button
+          variant="outline"
+          size="icon-sm"
+          onClick={handleClick}
+          disabled={isLoading || isLoadingProp}
+        >
+          {isLoading ? (
+            <IconLoader2 className="animate-spin text-zinc-500" size={16} />
+          ) : (
+            <IconRefresh className="text-zinc-500 dark:text-zinc-600" size={16} />
+          )}
+        </Button>
+      </SimpleTooltip>
     </div>
   )
 }

tests/test.spec.ts

@@ -78,11 +78,7 @@ describe("keys", () => {
 
   test("can add a string key", async ({ page }) => {
     await page.getByRole("main").click()
-    await page
-      .getByRole("button", {
-        name: "Add key",
-      })
-      .click()
+    await page.getByTestId("add-key-button").click()
     await page.getByRole("textbox", { name: "mykey" }).click()
     await page.getByRole("textbox", { name: "mykey" }).fill("----added-key")
     await page.getByRole("button", { name: "Create" }).click()
@@ -99,11 +95,7 @@ describe("keys", () => {
   })
 
   test("can add a json key", async ({ page }) => {
-    await page
-      .getByRole("button", {
-        name: "Add key",
-      })
-      .click()
+    await page.getByTestId("add-key-button").click()
     await page.getByRole("combobox").click()
     await page.getByRole("option", { name: "JSON" }).click()
     await page.getByRole("textbox", { name: "mykey" }).click()