Implement a new component to input run tags

Author: myftija

apps/webapp/app/components/runs/v3/RunTag.tsx

@@ -3,11 +3,21 @@ import tagLeftPath from "./tag-left.svg";
 import { SimpleTooltip } from "~/components/primitives/Tooltip";
 import { Link } from "@remix-run/react";
 import { cn } from "~/utils/cn";
-import { ClipboardCheckIcon, ClipboardIcon } from "lucide-react";
+import { ClipboardCheckIcon, ClipboardIcon, XIcon } from "lucide-react";
 
 type Tag = string | { key: string; value: string };
 
-export function RunTag({ tag, to, tooltip }: { tag: string; to?: string; tooltip?: string }) {
+export function RunTag({
+  tag,
+  to,
+  tooltip,
+  action = { type: "copy" },
+}: {
+  tag: string;
+  action?: { type: "copy" } | { type: "delete"; onDelete: (tag: string) => void };
+  to?: string;
+  tooltip?: string;
+}) {
   const tagResult = useMemo(() => splitTag(tag), [tag]);
   const [isHovered, setIsHovered] = useState(false);
 
@@ -57,7 +67,11 @@ export function RunTag({ tag, to, tooltip }: { tag: string; to?: string; tooltip
   return (
     <div className="group relative inline-flex shrink-0" onMouseLeave={() => setIsHovered(false)}>
       {tagContent}
-      <CopyButton textToCopy={tag} isHovered={isHovered} />
+      {action.type === "delete" ? (
+        <DeleteButton tag={tag} onDelete={action.onDelete} isHovered={isHovered} />
+      ) : (
+        <CopyButton textToCopy={tag} isHovered={isHovered} />
+      )}
     </div>
   );
 }
@@ -105,6 +119,45 @@ function CopyButton({ textToCopy, isHovered }: { textToCopy: string; isHovered:
   );
 }
 
+function DeleteButton({
+  tag,
+  onDelete,
+  isHovered,
+}: {
+  tag: string;
+  onDelete: (tag: string) => void;
+  isHovered: boolean;
+}) {
+  const handleDelete = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      onDelete(tag);
+    },
+    [tag, onDelete]
+  );
+
+  return (
+    <SimpleTooltip
+      button={
+        <span
+          onClick={handleDelete}
+          onMouseDown={(e) => e.stopPropagation()}
+          className={cn(
+            "absolute -right-6 top-0 z-10 size-6 items-center justify-center rounded-r-sm border-y border-r border-charcoal-650 bg-charcoal-750",
+            isHovered ? "flex" : "hidden",
+            "text-text-dimmed hover:border-charcoal-600 hover:bg-charcoal-700 hover:text-rose-400"
+          )}
+        >
+          <XIcon className="size-3.5" />
+        </span>
+      }
+      content="Remove tag"
+      disableHoverableContent
+    />
+  );
+}
+
 /** Takes a string and turns it into a tag
  *
  * If the string has 12 or fewer alpha characters followed by an underscore or colon then we return an object with a key and value

apps/webapp/app/components/runs/v3/RunTagInput.tsx

@@ -0,0 +1,81 @@
+import { useCallback, useState, type KeyboardEvent } from "react";
+import { Input } from "~/components/primitives/Input";
+import { RunTag } from "./RunTag";
+
+interface TagInputProps {
+  id?: string; // used for the hidden input for form submission
+  name?: string; // used for the hidden input for form submission
+  defaultTags?: string[];
+  placeholder?: string;
+  variant?: "small" | "medium";
+  onTagsChange?: (tags: string[]) => void;
+}
+
+export function RunTagInput({
+  id,
+  name,
+  defaultTags = [],
+  placeholder = "Type and press Enter to add tags",
+  variant = "small",
+  onTagsChange,
+}: TagInputProps) {
+  const [tags, setTags] = useState<string[]>(defaultTags);
+  const [inputValue, setInputValue] = useState("");
+
+  const addTag = useCallback(
+    (tagText: string) => {
+      const trimmedTag = tagText.trim();
+      if (trimmedTag && !tags.includes(trimmedTag)) {
+        const newTags = [...tags, trimmedTag];
+        setTags(newTags);
+        onTagsChange?.(newTags);
+      }
+      setInputValue("");
+    },
+    [tags, onTagsChange]
+  );
+
+  const removeTag = useCallback(
+    (tagToRemove: string) => {
+      const newTags = tags.filter((tag) => tag !== tagToRemove);
+      setTags(newTags);
+      onTagsChange?.(newTags);
+    },
+    [tags, onTagsChange]
+  );
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        addTag(inputValue);
+      } else if (e.key === "Backspace" && inputValue === "" && tags.length > 0) {
+        removeTag(tags[tags.length - 1]);
+      }
+    },
+    [inputValue, addTag, removeTag, tags]
+  );
+
+  return (
+    <div className="flex flex-col gap-2">
+      <input type="hidden" name={name} id={id} value={tags.join(",")} />
+
+      <Input
+        type="text"
+        value={inputValue}
+        onChange={(e) => setInputValue(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder={placeholder}
+        variant={variant}
+      />
+
+      {tags.length > 0 && (
+        <div className="mt-1 flex flex-wrap items-center gap-1 text-xs">
+          {tags.map((tag, i) => (
+            <RunTag key={tag} tag={tag} action={{ type: "delete", onDelete: removeTag }} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}