Better tab dropdown handling

src-web/components/Sidebar.tsx

@@ -40,7 +40,9 @@ export const Sidebar = memo(function Sidebar({ className }: Props) {
     [unorderedRequests],
   );
 
-  const moveState = useRef<{ move: (e: MouseEvent) => void; up: () => void } | null>(null);
+  const moveState = useRef<{ move: (e: MouseEvent) => void; up: (e: MouseEvent) => void } | null>(
+    null,
+  );
   const unsub = () => {
     if (moveState.current !== null) {
       document.documentElement.removeEventListener('mousemove', moveState.current.move);
@@ -57,9 +59,11 @@ export const Sidebar = memo(function Sidebar({ className }: Props) {
       const startWidth = width.value;
       moveState.current = {
         move: (e: MouseEvent) => {
+          e.preventDefault(); // Prevent text selection and things
           width.set(startWidth + (e.clientX - mouseStartX));
         },
-        up: () => {
+        up: (e: MouseEvent) => {
+          e.preventDefault();
           unsub();
           setIsResizing(false);
         },
@@ -79,13 +83,13 @@ export const Sidebar = memo(function Sidebar({ className }: Props) {
       {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
       <div
         aria-hidden
-        className="group absolute z-10 right-0 w-1 top-0 bottom-0 cursor-ew-resize flex justify-end"
+        className="group absolute z-10 right-0 w-2 top-0 bottom-0 cursor-ew-resize flex justify-end"
         onMouseDown={handleResizeStart}
         onDoubleClick={width.reset}
       >
         <div // drag-divider
           className={classnames(
-            'transition-colors w-0.5 group-hover:bg-gray-300 h-full pointer-events-none',
+            'transition-colors w-1 group-hover:bg-gray-300 h-full pointer-events-none',
             isResizing && '!bg-blue-500/70',
           )}
         />

src-web/components/core/Dropdown.tsx

@@ -20,24 +20,30 @@ export type DropdownItem =
 export interface DropdownProps {
   children: ReactElement<HTMLAttributes<HTMLButtonElement>>;
   items: DropdownItem[];
+  ignoreClick?: boolean;
 }
 
-export function Dropdown({ children, items }: DropdownProps) {
+export function Dropdown({ children, items, ignoreClick }: DropdownProps) {
   const [open, setOpen] = useState<boolean>(false);
   const ref = useRef<HTMLButtonElement>(null);
-  const child = useMemo(
+  const child = useMemo(() => {
-    () =>
+    const existingChild = Children.only(children);
-      cloneElement(Children.only(children) as never, {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        ref,
+    const props: any = {
-        'aria-haspopup': 'true',
+      ...existingChild.props,
-        onClick: (e: MouseEvent<HTMLButtonElement>) => {
+      ref,
+      'aria-haspopup': 'true',
+      onClick:
+        existingChild.props?.onClick ??
+        ((e: MouseEvent<HTMLButtonElement>) => {
+          console.log('CLICK INSIDE');
           e.preventDefault();
           e.stopPropagation();
           setOpen((o) => !o);
-        },
+        }),
-      }),
+    };
-    [children],
+    return cloneElement(existingChild, props);
-  );
+  }, [children]);
 
   const handleClose = useCallback(() => {
     setOpen(false);

src-web/components/core/Tabs/Tabs.tsx

@@ -41,7 +41,7 @@ export const Tabs = memo(function Tabs({
     for (const tab of tabs ?? []) {
       const v = tab.getAttribute('data-tab');
       if (v === value) {
-        tab.setAttribute('tabindex', '0');
+        tab.setAttribute('tabindex', '-1');
         tab.setAttribute('data-state', 'active');
       } else {
         tab.setAttribute('data-state', 'inactive');
@@ -67,7 +67,7 @@ export const Tabs = memo(function Tabs({
         <HStack space={1}>
           {tabs.map((t) => {
             const isActive = t.value === value;
-            if (t.options && isActive) {
+            if (t.options) {
               return (
                 <RadioDropdown
                   key={t.value}
@@ -78,7 +78,7 @@ export const Tabs = memo(function Tabs({
                   <Button
                     color="custom"
                     size="sm"
-                    onClick={(e) => e.stopPropagation()}
+                    onClick={isActive ? undefined : () => handleTabChange(t.value)}
                     className={classnames(
                       isActive ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900',
                     )}
@@ -88,21 +88,6 @@ export const Tabs = memo(function Tabs({
                   </Button>
                 </RadioDropdown>
               );
-            } else if (t.options && !isActive) {
-              return (
-                <Button
-                  key={t.value}
-                  color="custom"
-                  size="sm"
-                  onClick={() => handleTabChange(t.value)}
-                  className={classnames(
-                    isActive ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900',
-                  )}
-                >
-                  {t.options.items.find((i) => i.value === t.options?.value)?.label ?? ''}
-                  <Icon icon="triangleDown" className="-mr-1.5 opacity-40" />
-                </Button>
-              );
             } else {
               return (
                 <Button