Refactor desktop app into separate client and proxy apps

apps/yaak-client/components/SelectFile.tsx

@@ -0,0 +1,148 @@
+import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow';
+import { open } from '@tauri-apps/plugin-dialog';
+import classNames from 'classnames';
+import mime from 'mime';
+import type { ReactNode } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import type { ButtonProps } from './core/Button';
+import { Button } from './core/Button';
+import { IconButton } from './core/IconButton';
+import { IconTooltip } from './core/IconTooltip';
+import { Label } from './core/Label';
+import { HStack } from './core/Stacks';
+
+type Props = Omit<ButtonProps, 'type'> & {
+  onChange: (value: { filePath: string | null; contentType: string | null }) => void;
+  filePath: string | null;
+  nameOverride?: string | null;
+  directory?: boolean;
+  inline?: boolean;
+  noun?: string;
+  help?: ReactNode;
+  label?: ReactNode;
+};
+
+// Special character to insert ltr text in rtl element
+const rtlEscapeChar = <>&#x200E;</>;
+
+export function SelectFile({
+  onChange,
+  filePath,
+  inline,
+  className,
+  directory,
+  noun,
+  nameOverride,
+  size = 'sm',
+  label,
+  help,
+  ...props
+}: Props) {
+  const handleClick = async () => {
+    const filePath = await open({
+      title: directory ? 'Select Folder' : 'Select File',
+      multiple: false,
+      directory,
+    });
+    if (filePath == null) return;
+    const contentType = filePath ? mime.getType(filePath) : null;
+    onChange({ filePath, contentType });
+  };
+
+  const handleClear = async () => {
+    onChange({ filePath: null, contentType: null });
+  };
+
+  const itemLabel = noun ?? (directory ? 'Folder' : 'File');
+  const selectOrChange = (filePath ? 'Change ' : 'Select ') + itemLabel;
+  const [isHovering, setIsHovering] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  // Listen for dropped files on the element
+  // NOTE: This doesn't work for Windows since native drag-n-drop can't work at the same tmie
+  //  as browser drag-n-drop.
+  useEffect(() => {
+    let unlisten: (() => void) | undefined;
+    const setup = async () => {
+      const webview = getCurrentWebviewWindow();
+      unlisten = await webview.onDragDropEvent((event) => {
+        if (event.payload.type === 'over') {
+          const p = event.payload.position;
+          const r = ref.current?.getBoundingClientRect();
+          if (r == null) return;
+          const isOver = p.x >= r.left && p.x <= r.right && p.y >= r.top && p.y <= r.bottom;
+          console.log('IS OVER', isOver);
+          setIsHovering(isOver);
+        } else if (event.payload.type === 'drop' && isHovering) {
+          console.log('User dropped', event.payload.paths);
+          const p = event.payload.paths[0];
+          if (p) onChange({ filePath: p, contentType: null });
+          setIsHovering(false);
+        } else {
+          console.log('File drop cancelled');
+          setIsHovering(false);
+        }
+      });
+    };
+    setup().catch(console.error);
+    return () => {
+      if (unlisten) unlisten();
+    };
+  }, [isHovering, onChange]);
+
+  const filePathWithNameOverride = nameOverride ? `${filePath} (${nameOverride})` : filePath;
+
+  return (
+    <div ref={ref} className="w-full">
+      {label && (
+        <Label htmlFor={null} help={help}>
+          {label}
+        </Label>
+      )}
+      <HStack className="relative justify-stretch overflow-hidden">
+        <Button
+          className={classNames(
+            className,
+            'rtl mr-1.5',
+            inline && 'w-full',
+            filePath && inline && 'font-mono text-xs',
+            isHovering && '!border-notice',
+          )}
+          color={isHovering ? 'primary' : 'secondary'}
+          onClick={handleClick}
+          size={size}
+          {...props}
+        >
+          {rtlEscapeChar}
+          {inline ? filePathWithNameOverride || selectOrChange : selectOrChange}
+        </Button>
+
+        {!inline && (
+          <>
+            {filePath && (
+              <IconButton
+                size={size === 'auto' ? 'md' : size}
+                variant="border"
+                icon="x"
+                title={`Unset ${itemLabel}`}
+                onClick={handleClear}
+              />
+            )}
+            <div
+              className={classNames(
+                'truncate rtl pl-1.5 pr-3 text-text',
+                filePath && 'font-mono',
+                size === 'xs' && filePath && 'text-xs',
+                size === 'sm' && filePath && 'text-sm',
+              )}
+            >
+              {rtlEscapeChar}
+              {filePath ?? `No ${itemLabel.toLowerCase()} selected`}
+            </div>
+            {filePath == null && help && !label && <IconTooltip content={help} />}
+          </>
+        )}
+      </HStack>
+    </div>
+  );
+}