yaak/src-web/components/SelectFile.tsx

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>
  );
}