Merge branch 'master' into DX-2190

Author: ytkimirti

bun.lockb

@@ -58,7 +58,7 @@
     "zustand": "5.0.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.53.1",
+    "@playwright/test": "^1.56.1",
     "@types/node": "^22.8.4",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",

package.json

@@ -14,7 +14,7 @@ import {
 import { restrictToHorizontalAxis } from "@dnd-kit/modifiers"
 import { horizontalListSortingStrategy, SortableContext, useSortable } from "@dnd-kit/sortable"
 import { CSS } from "@dnd-kit/utilities"
-import { IconChevronDown, IconPlus } from "@tabler/icons-react"
+import { IconChevronDown, IconMaximize, IconPlus } from "@tabler/icons-react"
 
 import { Button } from "@/components/ui/button"
 import {
@@ -122,7 +122,7 @@ const SortableTab = ({ id }: { id: TabId }) => {
   )
 }
 
-export const DatabrowserTabs = () => {
+export const DatabrowserTabs = ({ onFullScreenClick }: { onFullScreenClick?: () => void }) => {
   const { tabs, reorderTabs, selectedTab, selectTab } = useDatabrowserStore()
 
   // Sort tabs with pinned tabs first
@@ -262,6 +262,17 @@ export const DatabrowserTabs = () => {
         <div className="flex items-center gap-1 pl-1">
           {isOverflow && <AddTabButton />}
           {tabs.length > 1 && <TabsListButton tabs={tabs} onSelectTab={selectTab} />}
+          {onFullScreenClick && (
+            <Button
+              aria-label="Toggle fullscreen"
+              variant="secondary"
+              size="icon-sm"
+              onClick={onFullScreenClick}
+              className="flex-shrink-0 bg-blue-100 hover:bg-blue-600 hover:text-white"
+            >
+              <IconMaximize size={16} />
+            </Button>
+          )}
         </div>
       </div>
     </div>

src/components/databrowser/components/databrowser-tabs.tsx

@@ -42,7 +42,7 @@ export function DeleteAlertDialog({
         <AlertDialogFooter>
           <AlertDialogCancel type="button">Cancel</AlertDialogCancel>
           <AlertDialogAction
-            className="bg-red-500 text-gray-50 hover:bg-red-600"
+            className="bg-red-500 text-zinc-50 hover:bg-red-600"
             onClick={onDeleteConfirm}
           >
             Yes, Delete

src/components/databrowser/components/display/delete-alert-dialog.tsx

@@ -18,7 +18,7 @@ export const DataDisplay = () => {
       ) : !type ? (
         query.isLoading ? (
           <div className="flex h-full items-center justify-center">
-            <span className="text-gray-500">Loading...</span>
+            <span className="text-zinc-500">Loading...</span>
           </div>
         ) : (
           <div />

src/components/databrowser/components/display/index.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef } from "react"
+import { useTheme } from "@/dark-mode-context"
 import { useTab } from "@/tab-provider"
 import { Editor, useMonaco } from "@monaco-editor/react"
 
@@ -23,6 +24,7 @@ export const CustomEditor = ({
   const { active } = useTab()
   const monaco = useMonaco()
   const editorRef = useRef()
+  const theme = useTheme()
 
   useEffect(() => {
     if (!active || !monaco || !editorRef.current) {
@@ -35,6 +37,7 @@ export const CustomEditor = ({
 
   const editor = (
     <Editor
+      theme={theme === "dark" ? "vs-dark" : "light"}
       loading={undefined}
       onMount={(editor) => {
         // @ts-expect-error not typing the editor type
@@ -68,7 +71,9 @@ export const CustomEditor = ({
         scrollBeyondLastLine: false,
         renderLineHighlight: "none",
         unusualLineTerminators: "auto",
+        padding: { top: 0, bottom: 0 },
       }}
+      className="[&_.monaco-editor-background]:!bg-transparent [&_.monaco-editor]:!bg-transparent"
     />
   )
 

src/components/databrowser/components/display/input/custom-editor.tsx

@@ -28,7 +28,7 @@ export function Sidebar() {
           <div className="flex gap-1">
             <Button
               aria-label="Refresh"
-              className="h-7 w-7 px-0"
+              className="h-7 w-7 px-0 text-zinc-500"
               onClick={() => {
                 queryClient.invalidateQueries({
                   queryKey: [FETCH_KEYS_QUERY_KEY],

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

@@ -1,3 +1,4 @@
+import { useTab } from "@/tab-provider"
 import type { DataType, RedisKey } from "@/types"
 
 import { cn } from "@/lib/utils"
@@ -6,7 +7,6 @@ import { TypeTag } from "@/components/databrowser/components/type-tag"
 
 import { useKeys } from "../../hooks/use-keys"
 import { SidebarContextMenu } from "../sidebar-context-menu"
-import { useTab } from "@/tab-provider"
 
 export const KeysList = () => {
   const { keys } = useKeys()

src/components/databrowser/components/sidebar/keys-list.tsx

@@ -134,7 +134,7 @@ export const SearchInput = () => {
           type="button"
           variant="link"
           size="icon"
-          className="absolute right-1 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"
+          className="absolute right-1 top-1/2 h-5 w-5 -translate-y-1/2 text-zinc-500 hover:text-zinc-900"
           onClick={() => {
             setSearchKey("")
             setState("")

src/components/databrowser/components/sidebar/search-input.tsx

@@ -13,13 +13,13 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const iconsMap = {
-  string: <IconQuote size={15} stroke={1.3} />,
-  set: <IconLayersIntersect size={15} stroke={1.3} />,
-  hash: <IconHash size={15} stroke={1.3} />,
-  json: <IconCodeDots size={15} stroke={1.3} />,
-  zset: <IconArrowsSort size={15} stroke={1.3} />,
-  list: <IconList size={15} stroke={1.3} />,
-  stream: <IconList size={15} stroke={1.3} />,
+  string: <IconQuote size={15} stroke={1.2} />,
+  set: <IconLayersIntersect size={15} stroke={1.2} />,
+  hash: <IconHash size={15} stroke={1.2} />,
+  json: <IconCodeDots size={15} stroke={1.2} />,
+  zset: <IconArrowsSort size={15} stroke={1.2} />,
+  list: <IconList size={15} stroke={1.2} />,
+  stream: <IconList size={15} stroke={1.2} />,
 } as const
 
 const tagVariants = cva("inline-flex shrink-0 items-center rounded-md justify-center", {