New sidebar and folder view (#263)

src-web/components/SelectFile.tsx

@@ -1,7 +1,9 @@
+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';
@@ -51,9 +53,43 @@ export function SelectFile({
 
   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]);
 
   return (
-    <div>
+    <div ref={ref} className="w-full">
       {label && (
         <Label htmlFor={null} help={help}>
           {label}
@@ -66,8 +102,9 @@ export function SelectFile({
             'rtl mr-1.5',
             inline && 'w-full',
             filePath && inline && 'font-mono text-xs',
+            isHovering && '!border-notice',
           )}
-          color="secondary"
+          color={isHovering ? 'primary' : 'secondary'}
           onClick={handleClick}
           size={size}
           {...props}