Merge pull request #1063 from org2AI/fix/session-creator-drag-double-border

fix(session-creator): show one drag border on composer

Author: Chloe-JY

src/app/root/services/GlobalDragDrop/index.scss

@@ -6,6 +6,9 @@
     transform 0.15s ease;
 }
 
+// One border layer only: the element's own border + ring. No inset ::after
+// duplicate — a second line inside the shell reads as a double border on the
+// session-creator composer.
 body[data-chat-file-dragging="true"] [data-chat-drop-target] {
   border-color: var(--color-primary-6) !important;
   box-shadow:
@@ -17,12 +20,3 @@ body[data-chat-file-dragging="true"] [data-chat-drop-target] {
     var(--color-bg-1)
   ) !important;
 }
-
-body[data-chat-file-dragging="true"] [data-chat-drop-target]::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border: 1px solid var(--color-primary-6);
-  border-radius: inherit;
-  pointer-events: none;
-}

src/config/inputAreaTokens.ts

@@ -43,6 +43,16 @@ export const INPUT_AREA = {
   shellInteractionClasses:
     "border border-solid border-border-2 transition-[border-color,box-shadow] duration-200 ease-in-out focus-within:border-primary-6 focus-within:shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-primary-6)_15%,transparent)] [&:not(:focus-within):hover]:border-border-3",
 
+  /**
+   * Drag-over highlight — primary border, tinted background, soft 2px primary
+   * ring. Every composer shell with `data-chat-drop-target` must apply this
+   * while a drag is over it: the `!` marks let it beat the focus/hover
+   * interaction classes above and GlobalDragDrop's scss fallback shadow, so
+   * the shell shows one ring instead of a stacked double border.
+   */
+  shellDragOverClasses:
+    "!border-primary-6 !bg-[color-mix(in_srgb,var(--color-primary-6)_5%,var(--color-chat-input))] !shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-primary-6)_20%,transparent)]",
+
   /**
    * Sent user-message card in chat history — border only, no shadow, no focus
    * ring, no primary glow. Hover shows border-3. Click opens edit mode; while

src/engines/ChatPanel/InputArea/components/InputAreaChrome.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 
+import { INPUT_AREA } from "@src/config/inputAreaTokens";
 import { ChatStatusSegmentedBar } from "@src/engines/ChatPanel/components/ChatStatusBanners";
 
 import ChatHeader from "../ChatHeader";
@@ -152,7 +153,7 @@ export const getComposerShellClassName = ({
   quietEditSurface: boolean;
 }): string | undefined => {
   if (isDragOver) {
-    return "!border-primary-6 !bg-[color-mix(in_srgb,var(--color-primary-6)_5%,var(--color-chat-input))] !shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-primary-6)_20%,transparent)]";
+    return INPUT_AREA.shellDragOverClasses;
   }
   if (!isEditMode) return "composer-breathing";
   if (quietEditSurface) {

src/engines/ChatPanel/InputArea/hooks/useContainerDrag.ts

@@ -26,9 +26,14 @@ import { useTabDragHover } from "./useTabDragHover";
  * over the chat panel. GlobalDragDrop sets `data-chat-file-dragging="true"` on
  * `document.body` during Tauri native drag events so we observe that attribute
  * via a MutationObserver rather than relying on unavailable HTML5 drag events.
+ *
+ * Exported so every composer shell with `data-chat-drop-target` can swap in
+ * the same React drag highlight during OS file drags. A shell that skips this
+ * shows GlobalDragDrop's scss fallback (hard 1px ring + inset `::after` line)
+ * stacked on its own border — which reads as a double border.
  */
-function useExternalFileDragOver(
-  containerRef: React.RefObject<HTMLDivElement | null>
+export function useExternalFileDragOver(
+  containerRef: React.RefObject<HTMLElement | null>
 ): boolean {
   const [isExternalDragOver, setIsExternalDragOver] = useState(false);
 

src/features/SessionCreator/components/EditorArea.tsx

@@ -17,27 +17,30 @@ import ComposerShell from "@src/components/ComposerShell";
 import Message from "@src/components/Message";
 import { VoiceInputButton, VoiceRecordingBar } from "@src/components/Voice";
 import {
+  INPUT_AREA,
   INPUT_AREA_EDITOR_CLASS,
   INPUT_AREA_EDITOR_HEIGHT,
 } from "@src/config/inputAreaTokens";
 import { capPillText, storePillText } from "@src/config/pillTokens";
 import type { ComposerModeEntry } from "@src/config/sessionCreatorConfig";
 import ContextMenuPortal from "@src/engines/ChatPanel/InputArea/components/ContextMenuPortal";
 import SlashCommandPortal from "@src/engines/ChatPanel/InputArea/components/SlashCommandPortal";
+import { useExternalFileDragOver } from "@src/engines/ChatPanel/InputArea/hooks/useContainerDrag";
+import { useTabDragHover } from "@src/engines/ChatPanel/InputArea/hooks/useTabDragHover";
 import { type VoiceInputError, useVoiceInput } from "@src/hooks/voice";
 import i18n from "@src/i18n";
 import {
   clearReferenceDragData,
   getReferenceDragPillData,
   hasReferenceDragData,
 } from "@src/shared/dnd/referenceDragData";
+import { useTabDragEndToPill } from "@src/shared/dnd/useTabDragEndToPill";
 import { chatAppearanceAtom } from "@src/store/config/configAtom";
 import { voiceInputEnabledAtom } from "@src/store/platform/voiceInputAtom";
 import type { RepoKind } from "@src/store/repo/types";
 import type { ChatImageAttachment } from "@src/store/ui/chatImageAtom";
 import type { SlashItem } from "@src/types/extensions";
 
-import { useTabDragDrop } from "../hooks/useTabDragDrop";
 import type { AdvancedConfig, UploadedFile } from "../types";
 import ControlButtons, { type DropdownDirection } from "./ControlButtons";
 import ImageThumbnailRow from "./ImageThumbnailRow";
@@ -300,9 +303,15 @@ const EditorArea: React.FC<EditorAreaProps> = ({
   const voiceFeatureEnabled = useAtomValue(voiceInputEnabledAtom);
   const { sendOnEnter } = useAtomValue(chatAppearanceAtom);
 
-  const isTabDragOver = useTabDragDrop(editorContainerRef, composerInputRef);
+  const isTabDragOver = useTabDragHover(editorContainerRef);
+  useTabDragEndToPill(editorContainerRef, composerInputRef);
+  // OS file drags never fire HTML5 drag events here (Tauri swallows them), so
+  // without this the shell keeps its rest border while GlobalDragDrop's scss
+  // fallback paints a second ring on top — the double-border regression.
+  const isExternalFileDragOver = useExternalFileDragOver(editorContainerRef);
   const [isReferenceDragOver, setIsReferenceDragOver] = useState(false);
-  const isDragOver = isTabDragOver || isReferenceDragOver;
+  const isDragOver =
+    isTabDragOver || isReferenceDragOver || isExternalFileDragOver;
 
   const hasReferenceDrag = useCallback(
     (types?: readonly string[]) => hasReferenceDragData(types),
@@ -518,9 +527,7 @@ const EditorArea: React.FC<EditorAreaProps> = ({
         data-chat-drop-target
         className={[
           "wp_text_area",
-          isDragOver
-            ? "!border-primary-6 !bg-[color-mix(in_srgb,var(--color-primary-6)_5%,var(--color-chat-input))] !shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-primary-6)_20%,transparent)]"
-            : "",
+          isDragOver ? INPUT_AREA.shellDragOverClasses : "",
           headerContent ? "!pt-1.5" : "",
           shellClassName ?? "",
         ]