Add stuff to app header

src-web/components/Workspace.tsx

@@ -1,27 +1,60 @@
 import classnames from 'classnames';
+import { useNavigate } from 'react-router-dom';
 import { useWindowSize } from 'react-use';
+import { useActiveRequest } from '../hooks/useActiveRequest';
+import { useActiveWorkspace } from '../hooks/useActiveWorkspace';
+import { useWorkspaces } from '../hooks/useWorkspaces';
+import { Button } from './core/Button';
+import { DropdownMenuRadio, DropdownMenuTrigger } from './core/Dropdown';
+import { IconButton } from './core/IconButton';
+import { HStack } from './core/Stacks';
+import { WindowDragRegion } from './core/WindowDragRegion';
 import { RequestPane } from './RequestPane';
 import { ResponsePane } from './ResponsePane';
 import { Sidebar } from './Sidebar';
-import { HStack } from './core/Stacks';
-import { WindowDragRegion } from './core/WindowDragRegion';
-import { useActiveRequest } from '../hooks/useActiveRequest';
 
 export default function Workspace() {
+  const navigate = useNavigate();
   const activeRequest = useActiveRequest();
+  const activeWorkspace = useActiveWorkspace();
+  const workspaces = useWorkspaces();
   const { width } = useWindowSize();
   const isSideBySide = width > 900;
+  if (activeWorkspace == null) {
+    return null;
+  }
 
   return (
     <div className="grid grid-cols-[auto_1fr] grid-rows-1 h-full text-gray-900">
       <Sidebar />
-      <div className="grid grid-rows-[auto_minmax(0,1fr)] h-full">
+      <div data-tauri-drag-region className="grid grid-rows-[auto_minmax(0,1fr)] h-full">
         <HStack
           as={WindowDragRegion}
-          className="px-3 bg-gray-50 text-gray-900 border-b border-b-gray-200 pt-[1px]"
+          justifyContent="center"
+          className="pointer-events-none px-3 bg-gray-50 text-gray-900 border-b border-b-gray-200 pt-[1px]"
           alignItems="center"
         >
-          {activeRequest?.name}
+          <div className="flex-1 -ml-2">
+            <DropdownMenuRadio
+              onValueChange={(v) => {
+                navigate(`/workspaces/${v.value}`);
+              }}
+              value={activeWorkspace?.id}
+              items={workspaces.map((w) => ({ label: w.name, value: w.id }))}
+            >
+              <DropdownMenuTrigger>
+                <Button size="sm" className="!px-2 truncate" forDropdown>
+                  {activeWorkspace?.name ?? 'Unknown'}
+                </Button>
+              </DropdownMenuTrigger>
+            </DropdownMenuRadio>
+          </div>
+          <div className="flex-[2] text-center text-gray-700 text-sm truncate">
+            {activeRequest?.name}
+          </div>
+          <div className="flex-1 flex justify-end -mr-2">
+            <IconButton size="sm" title="" icon="gear" />
+          </div>
         </HStack>
         <div
           className={classnames(

src-web/components/core/Button.tsx

@@ -1,6 +1,6 @@
 import classnames from 'classnames';
 import type { HTMLAttributes } from 'react';
-import { forwardRef } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { Link } from 'react-router-dom';
 import { Icon } from './Icon';
 
@@ -39,45 +39,32 @@ export const Button = forwardRef<any, ButtonProps>(function Button(
   }: ButtonProps,
   ref,
 ) {
+  const classes = useMemo(
+    () =>
+      classnames(
+        className,
+        'outline-none pointer-events-auto',
+        'border border-transparent focus-visible:border-blue-300',
+        'rounded-md flex items-center',
+        colorStyles[color || 'default'],
+        justify === 'start' && 'justify-start',
+        justify === 'center' && 'justify-center',
+        size === 'md' && 'h-9 px-3',
+        size === 'sm' && 'h-7 px-2.5 text-sm',
+      ),
+    [color, size, justify, className],
+  );
+
   if (typeof to === 'string') {
     return (
-      <Link
+      <Link ref={ref} to={to} className={classes} {...props}>
-        ref={ref}
-        to={to}
-        className={classnames(
-          className,
-          'outline-none',
-          'border border-transparent focus-visible:border-blue-300',
-          'rounded-md flex items-center',
-          colorStyles[color || 'default'],
-          justify === 'start' && 'justify-start',
-          justify === 'center' && 'justify-center',
-          size === 'md' && 'h-9 px-3',
-          size === 'sm' && 'h-7 px-2.5 text-sm',
-        )}
-        {...props}
-      >
         {children}
         {forDropdown && <Icon icon="triangleDown" className="ml-1 -mr-1" />}
       </Link>
     );
   } else {
     return (
-      <button
+      <button ref={ref} className={classes} {...props}>
-        ref={ref}
-        className={classnames(
-          className,
-          'outline-none',
-          'border border-transparent focus-visible:border-blue-300',
-          'rounded-md flex items-center',
-          colorStyles[color || 'default'],
-          justify === 'start' && 'justify-start',
-          justify === 'center' && 'justify-center',
-          size === 'md' && 'h-9 px-3',
-          size === 'sm' && 'h-7 px-2.5 text-sm',
-        )}
-        {...props}
-      >
         {children}
         {forDropdown && <Icon icon="triangleDown" className="ml-1 -mr-1" />}
       </button>

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

@@ -1,11 +1,11 @@
 import { defaultKeymap } from '@codemirror/commands';
 import { Compartment, EditorState } from '@codemirror/state';
-import { keymap, placeholder as placeholderExt, tooltips, ViewPlugin } from '@codemirror/view';
+import { keymap, placeholder as placeholderExt, tooltips } from '@codemirror/view';
 import classnames from 'classnames';
 import { EditorView } from 'codemirror';
 import type { MutableRefObject } from 'react';
 import { useEffect, useMemo, useRef } from 'react';
-import { useMount, useUnmount } from 'react-use';
+import { useUnmount } from 'react-use';
 import { IconButton } from '../IconButton';
 import './Editor.css';
 import { baseExtensions, getLanguageExtension, multiLineExtensions } from './extensions';
@@ -67,7 +67,9 @@ export function _Editor({
   const placeholderCompartment = useRef(new Compartment());
   useEffect(() => {
     if (cm.current === null) return;
-    const effect = placeholderCompartment.current.reconfigure(placeholderExt(placeholder ?? ''));
+    const effect = placeholderCompartment.current.reconfigure(
+      placeholderExt(placeholderElFromText(placeholder ?? '')),
+    );
     cm.current?.view.dispatch({ effects: effect });
   }, [placeholder]);
 
@@ -89,7 +91,9 @@ export function _Editor({
         doc: `${defaultValue ?? ''}`,
         extensions: [
           languageCompartment.of(langExt),
-          placeholderCompartment.current.of(placeholderExt(placeholder ?? '')),
+          placeholderCompartment.current.of(
+            placeholderExt(placeholderElFromText(placeholder ?? '')),
+          ),
           ...getExtensions({
             container: wrapperRef.current,
             onChange: handleChange,
@@ -138,8 +142,9 @@ export function _Editor({
       {cmContainer}
       {format && (
         <IconButton
+          showConfirm
           size="sm"
-          title="Re-format"
+          title="Reformat contents"
           icon="magicWand"
           className="absolute bottom-2 right-0 transition-opacity opacity-0 group-hover:opacity-70"
           onClick={() => {
@@ -232,3 +237,9 @@ const syncGutterBg = ({
     gutterEl?.classList.add(...bgClasses);
   }
 };
+
+const placeholderElFromText = (text: string) => {
+  const el = document.createElement('div');
+  el.innerHTML = text.replace('\n', '<br/>');
+  return el;
+};

src-web/components/core/IconButton.tsx

@@ -1,20 +1,41 @@
 import classnames from 'classnames';
 import { forwardRef } from 'react';
+import { useTimedBoolean } from '../../hooks/useTimedBoolean';
 import type { ButtonProps } from './Button';
 import { Button } from './Button';
 import type { IconProps } from './Icon';
 import { Icon } from './Icon';
 
 type Props = IconProps &
-  ButtonProps & { iconClassName?: string; iconSize?: IconProps['size']; title: string };
+  ButtonProps & {
+    showConfirm?: boolean;
+    iconClassName?: string;
+    iconSize?: IconProps['size'];
+    title: string;
+  };
 
 export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButton(
-  { icon, spin, className, iconClassName, size = 'md', iconSize, ...props }: Props,
+  {
+    showConfirm,
+    icon,
+    spin,
+    onClick,
+    className,
+    iconClassName,
+    size = 'md',
+    iconSize,
+    ...props
+  }: Props,
   ref,
 ) {
+  const [confirmed, setConfirmed] = useTimedBoolean();
   return (
     <Button
       ref={ref}
+      onClick={(e) => {
+        if (showConfirm) setConfirmed();
+        onClick?.(e);
+      }}
       className={classnames(
         className,
         'text-gray-700 hover:text-gray-1000',
@@ -27,9 +48,13 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButt
     >
       <Icon
         size={iconSize}
-        icon={icon}
+        icon={confirmed ? 'check' : icon}
         spin={spin}
-        className={classnames(iconClassName, props.disabled && 'opacity-70')}
+        className={classnames(
+          iconClassName,
+          props.disabled && 'opacity-70',
+          confirmed && 'text-green-600',
+        )}
       />
     </Button>
   );

src-web/components/editors/GraphQLEditor.tsx

@@ -4,7 +4,6 @@ import { useUniqueKey } from '../../hooks/useUniqueKey';
 import { Divider } from '../core/Divider';
 import type { EditorProps } from '../core/Editor';
 import { Editor } from '../core/Editor';
-import { IconButton } from '../core/IconButton';
 
 type Props = Pick<EditorProps, 'heightMode' | 'onChange' | 'defaultValue' | 'className'>;
 
@@ -17,6 +16,9 @@ interface GraphQLBody {
 export function GraphQLEditor({ defaultValue, onChange, ...extraEditorProps }: Props) {
   const queryKey = useUniqueKey();
   const { query, variables } = useMemo<GraphQLBody>(() => {
+    if (!defaultValue) {
+      return { query: '', variables: {} };
+    }
     try {
       const p = JSON.parse(defaultValue ?? '{}');
       const query = p.query ?? '';
@@ -53,6 +55,7 @@ export function GraphQLEditor({ defaultValue, onChange, ...extraEditorProps }: P
         onChange={handleChangeQuery}
         contentType="application/graphql"
         format={formatSdl}
+        placeholder={`query { }`}
         {...extraEditorProps}
       />
       <Divider />

src-web/hooks/useTimedBoolean.ts

@@ -0,0 +1,19 @@
+import { useRef, useState } from 'react';
+import { useUnmount } from 'react-use';
+
+/** Returns a boolean that is true for a given number of milliseconds. */
+export function useTimedBoolean(millis = 1000): [boolean, () => void] {
+  const [value, setValue] = useState(false);
+  const timeout = useRef<NodeJS.Timeout | null>(null);
+  const reset = () => timeout.current && clearTimeout(timeout.current);
+
+  useUnmount(reset);
+
+  const setToTrue = () => {
+    setValue(true);
+    reset();
+    timeout.current = setTimeout(() => setValue(false), millis);
+  };
+
+  return [value, setToTrue];
+}