add hover indicator

src/components/DragDropIndicator.scss

@@ -0,0 +1,20 @@
+@import "../variables.scss";
+
+.drag-drop-indicator {
+    pointer-events: none;
+    --uno: fixed w-full h-full left-0 top-0;
+    --uno: border-0 border-solid box-border;
+
+    border-color: transparent;
+
+    &.hover {
+        --uno: border-12 border-solid box-border;
+        border-color: rgba($theme-primary-3, 0.5);
+    }
+
+    transition: all 0.05s ease-in-out;
+
+    &.hover {
+        transition: all 0.05s ease-in-out;
+    }
+}

src/components/DragDropIndicator.tsx

@@ -0,0 +1,15 @@
+import { JSX, createEffect, createMemo, createSignal, mergeProps, splitProps } from "solid-js";
+import './DragDropIndicator.scss';
+
+interface DragDropIndicatorProps {
+    hover: boolean,
+    [key: string]: any,
+}
+
+
+export default function DragDropIndicator(props: DragDropIndicatorProps): JSX.Element {
+    return (
+        <div class={'drag-drop-indicator ' + (props.class ?? "") + (props.hover ? "hover" : "")}
+        />
+    );
+}

src/pages/renaming/RenamePatternInput.tsx

@@ -37,7 +37,7 @@ function RenamePatternInput(props: RenamePattern): JSX.Element {
                 <ValidatedInput id="rename_pattern" class={input_classes}
                     value={pattern()}
                     onInput={ (value) => setPattern(value) }
-                    validator={(value) => { return true }}
+                    validator={(_value) => { return true }}
                 />
             </li>
         </ul>

src/pages/renaming/Renamer.tsx

@@ -10,8 +10,16 @@ import { PathItem } from "./path_item";
 import { createSettingsSignal } from "../../settings/settings_signal";
 import RenameTarget, { RenameResult } from "./rename_target";
 import RenameTargetView from "./RenameTargetView";
+import DragDropIndicator from "../../components/DragDropIndicator";
 
+enum DragDropState {
+    Hover,
+    Drop,
+    Cancel,
+    None
+}
 
+let [dragDropState, setDragDropState] = createSignal(DragDropState.None);
 let [filesRaw, setFilesRaw] = createSignal([] as string[]);
 let [renameTargets, setRenameTargets] = createSignal([] as RenameTarget[]);
 
@@ -78,14 +86,17 @@ export default function Renamer(): JSX.Element {
             switch (payload.type) {
                 case 'hover': {
                     setFilesRaw(payload.paths);
+                    setDragDropState(DragDropState.Hover);
                 } break;
                 case 'drop': {
                     if (untrack(() => optionsVal.renameWhenDropped)) {
                         renameFiles(true);
                     }
+                    setDragDropState(DragDropState.Drop);
                 } break;
                 case 'cancel': {
                     setFilesRaw([]);
+                    setDragDropState(DragDropState.Cancel);
                 } break;
             }
         });
@@ -166,6 +177,7 @@ export default function Renamer(): JSX.Element {
 
     return (
         <>
+            <DragDropIndicator hover={dragDropState() == DragDropState.Hover} />
             <Show when={errorMsg().length > 0}>
                 <div class="info info-error">{errorMsg()}</div>
             </Show>

src/pages/settings/AppInfo.tsx

@@ -1,4 +1,4 @@
-import { JSX, createResource, lazy } from "solid-js";
+import { JSX, createResource } from "solid-js";
 
 import { getName, getTauriVersion, getVersion } from '@tauri-apps/api/app';
 import './AppInfo.scss';

src/variables.scss

@@ -14,7 +14,6 @@ $theme-error-1: #e44;
 $theme-error-2: #c22;
 $theme-error-3: #a00;
 
-
 $theme-error-bg-1: #fdd;
 $theme-error-bg-2: #eaa;
 $theme-error-bg-3: #d99;