feat: new baseui popover + site controls

docs/contributing/dependencies.md

@@ -81,6 +81,7 @@ These dependencies are either used in the build process, or they are only used i
 - nuqs - Use for managing query parameters in the URL.
 - @tanstack/react-query - React Query for the frontend.
 - @chenglou/pretext - Calculate text width for the frontend.
+- @base-ui/react - UI Components for the frontend.
 
 ## Tailwind CSS Dependencies for the Frontend
 

package.json

@@ -59,6 +59,7 @@
   "devDependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.7.10",
     "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.15",
+    "@base-ui/react": "^1.4.1",
     "@chenglou/pretext": "^0.0.5",
     "@electron-toolkit/eslint-config-prettier": "^3.0.0",
     "@electron-toolkit/eslint-config-ts": "^3.1.0",

src/renderer/src/components/browser-ui/browser-sidebar/_components/address-bar.tsx

@@ -4,8 +4,9 @@ import { memo, useCallback, useRef, type MouseEvent } from "react";
 import { useAddressUrl, useFocusedTabId } from "@/components/providers/tabs-provider";
 import { simplifyUrl } from "@/lib/url";
 import { PinnedBrowserActions } from "./pinned-browser-actions";
-import { BrowserActionList } from "@/components/browser-ui/browser-sidebar/_components/browser-action-list";
 import { useBrowserSidebar } from "@/components/browser-ui/browser-sidebar/provider";
+import { BrowserActionList } from "@/components/browser-ui/browser-sidebar/_components/browser-action-list";
+// import { SiteControls } from "@/components/browser-ui/browser-sidebar/_components/site-controls";
 
 export const AddressBar = memo(function AddressBar() {
   const containerRef = useRef<HTMLDivElement>(null);
@@ -71,6 +72,8 @@ export const AddressBar = memo(function AddressBar() {
         <PinnedBrowserActions />
         <div>
           <BrowserActionList />
+          {/* TODO: Add site controls */}
+          {/* <SiteControls /> */}
         </div>
       </div>
     </div>

src/renderer/src/components/browser-ui/browser-sidebar/_components/bottom/bottom-extras-menu.tsx

@@ -1,57 +1,76 @@
-import { PortalPopover } from "@/components/portal/popover";
+import { BubbleEvent } from "@/components/logic/bubble-event";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/portal/popover";
 import { useSpaces } from "@/components/providers/spaces-provider";
 import { Button } from "@/components/ui/button";
-import { PopoverListboxItem, PopoverListboxList, usePopoverListbox } from "@/components/ui/popover-listbox";
-import { PopoverTrigger } from "@/components/ui/popover";
+import { Command, CommandItem, CommandList } from "@/components/ui/command";
 import { cn } from "@/lib/utils";
-import { ArchiveIcon, HistoryIcon, SettingsIcon } from "lucide-react";
-import { useCallback, useState } from "react";
+import { ArchiveIcon, HistoryIcon, LucideIcon, SettingsIcon } from "lucide-react";
+import { useCallback, useRef, useState } from "react";
 
-const EXTRA_ITEM_COUNT = 2;
+function BottomExtrasMenuItem({
+  id,
+  Icon,
+  label,
+  url,
+  onItemSelected
+}: {
+  id: string;
+  Icon: LucideIcon;
+  label: string;
+  url: string;
+  onItemSelected: (url: string) => void;
+}) {
+  return (
+    <CommandItem value={id} onSelect={() => onItemSelected(url)} className="text-black dark:text-white">
+      <Icon className="size-4 text-black dark:text-white" />
+      {label}
+    </CommandItem>
+  );
+}
 
 export function BottomExtrasMenu() {
   const [open, setOpen] = useState(false);
+  const commandRef = useRef<HTMLDivElement>(null);
 
-  const { isCurrentSpaceLight } = useSpaces();
-  const spaceInjectedClasses = cn(isCurrentSpaceLight ? "" : "dark");
-
-  const onActivate = useCallback((index: number) => {
-    if (index === 0) {
-      flow.tabs.newTab("flow://history", true);
-    } else if (index === 1) {
+  const onItemSelected = useCallback((url: string) => {
+    if (url === "internal://settings") {
       flow.windows.openSettingsWindow();
+    } else {
+      flow.tabs.newTab(url, true);
     }
     setOpen(false);
   }, []);
 
-  const listbox = usePopoverListbox({
-    open,
-    itemCount: EXTRA_ITEM_COUNT,
-    ariaLabel: "Sidebar extras",
-    getOptionId: (i) => `bottom-extra-${i}`,
-    onActivate,
-    initialHighlightedIndex: EXTRA_ITEM_COUNT - 1
-  });
-
+  const { isCurrentSpaceLight } = useSpaces();
+  const spaceInjectedClasses = cn(isCurrentSpaceLight ? "" : "dark");
   return (
-    <PortalPopover.Root open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button size="icon" className="size-8 bg-transparent hover:bg-black/10 dark:hover:bg-white/10">
+    <Popover open={open} onOpenChange={setOpen}>
+      <Button size="icon" className="size-8 bg-transparent hover:bg-black/10 dark:hover:bg-white/10" asChild>
+        <PopoverTrigger nativeButton={true}>
           <ArchiveIcon strokeWidth={2} className="w-4 h-4 text-black/80 dark:text-white/80" />
-        </Button>
-      </PopoverTrigger>
-      <PortalPopover.Content className={cn("w-56 p-2 select-none", spaceInjectedClasses)} {...listbox.contentProps}>
-        <PopoverListboxList listbox={listbox}>
-          <PopoverListboxItem index={0}>
-            <HistoryIcon className="w-4 h-4 shrink-0" />
-            <span>History</span>
-          </PopoverListboxItem>
-          <PopoverListboxItem index={1}>
-            <SettingsIcon className="w-4 h-4 shrink-0" />
-            <span>Settings</span>
-          </PopoverListboxItem>
-        </PopoverListboxList>
-      </PortalPopover.Content>
-    </PortalPopover.Root>
+        </PopoverTrigger>
+      </Button>
+      <PopoverContent className={cn("w-56 p-2 select-none")} positionerClassName={spaceInjectedClasses}>
+        <Command ref={commandRef} loop>
+          <BubbleEvent targetRef={commandRef} eventType="keydown" />
+          <CommandList>
+            <BottomExtrasMenuItem
+              id="history"
+              Icon={HistoryIcon}
+              label="History"
+              url="flow://history"
+              onItemSelected={onItemSelected}
+            />
+            <BottomExtrasMenuItem
+              id="settings"
+              Icon={SettingsIcon}
+              label="Settings"
+              url="internal://settings"
+              onItemSelected={onItemSelected}
+            />
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
   );
 }