feat: add fullscreen button (#31)

* feat: add fullscreen button

* chore: update playwright

* chore: remove pnpm lock

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

@@ -26,9 +26,17 @@ export const RedisBrowser = ({
   url,
   hideTabs,
   storage,
+  onFullScreenClick,
 }: RedisCredentials & {
   hideTabs?: boolean
 
+  /**
+   * If defined, the databrowser will have a full screen button in the tab bar.
+   * Clicking on the button will call this function.
+   * @returns
+   */
+  onFullScreenClick?: () => void
+
   /**
    * Persistence storage for the Databrowser.
    *
@@ -60,7 +68,7 @@ export const RedisBrowser = ({
               style={{ height: "100%", display: "flex", flexDirection: "column" }}
               ref={rootRef}
             >
-              {!hideTabs && <DatabrowserTabs />}
+              {!hideTabs && <DatabrowserTabs onFullScreenClick={onFullScreenClick} />}
               <DatabrowserInstances />
             </div>
           </TooltipProvider>

src/components/databrowser/index.tsx

@@ -40,6 +40,10 @@ const App = () => {
       >
         {credentials ? (
           <RedisBrowser
+            onFullScreenClick={() => {
+              // eslint-disable-next-line no-console
+              console.log("Fullscreen button clicked")
+            }}
             storage={{
               get: () => localStorage.getItem("redis-browser-data") || "",
               set: (value) => localStorage.setItem("redis-browser-data", value),