Add warning if user is creating scratch with the same name as an exis…

frontend/src/app/(navfooter)/new/NewScratchForm.tsx

@@ -17,8 +17,12 @@ import { scratchUrl } from "@/lib/api/urls";
 import basicSetup from "@/lib/codemirror/basic-setup";
 import { cpp } from "@/lib/codemirror/cpp";
 import getTranslation from "@/lib/i18n/translate";
+import { get } from "@/lib/api/request";
 
 import styles from "./new.module.scss";
+import type { TerseScratch } from "@/lib/api/types";
+import { SingleLineScratchItem } from "@/components/ScratchList";
+import { useDebounce } from "use-debounce";
 
 function getLabels(asm: string): string[] {
     const lines = asm.split("\n");
@@ -69,6 +73,8 @@ export default function NewScratchForm({
     const [libraries, setLibraries] = useState<Library[]>([]);
     const [presetId, setPresetId] = useState<number | undefined>();
 
+    const [duplicates, setDuplicates] = useState([]);
+
     const [ready, setReady] = useState(false);
 
     const [valueVersion, incrementValueVersion] = useReducer((x) => x + 1, 0);
@@ -80,6 +86,10 @@ export default function NewScratchForm({
         return labels.length > 0 ? labels[0] : null;
     }, [asm]);
     const [label, setLabel] = useState<string>("");
+    const [debouncedLabel] = useDebounce(label, 1000, {
+        leading: false,
+        trailing: true,
+    });
 
     const setPreset = (preset: api.Preset) => {
         if (preset) {
@@ -257,6 +267,34 @@ export default function NewScratchForm({
         }
     };
 
+    useEffect(() => {
+        if (!debouncedLabel) {
+            // reset potential duplicates if no diff label
+            setDuplicates([]);
+            return;
+        }
+
+        const filterCandidates = (scratches: TerseScratch[]) => {
+            return scratches.filter((scratch: TerseScratch) => {
+                // search endpoint is greedy, so only match whole-name
+                if (scratch.name !== debouncedLabel) {
+                    return false;
+                }
+                // filter on preset if we have it
+                if (typeof presetId !== "undefined") {
+                    return scratch.preset === presetId;
+                }
+                // otherwise filter on platform
+                return scratch.platform === platform;
+            });
+        };
+
+        get(`/scratch?search=${debouncedLabel}`)
+            .then((x) => x.results)
+            .then(filterCandidates)
+            .then(setDuplicates);
+    }, [debouncedLabel, platform, presetId]);
+
     return (
         <div>
             <div>
@@ -323,6 +361,23 @@ export default function NewScratchForm({
                     spellCheck={false}
                 />
             </div>
+            {duplicates.length > 0 && (
+                <div className={styles.duplicatesContainer}>
+                    <p>
+                        The following scratches have been found that share this
+                        name:
+                    </p>
+                    <div className={styles.duplicatesList}>
+                        {duplicates.map((scratch) => (
+                            <SingleLineScratchItem
+                                key={scratchUrl(scratch)}
+                                scratch={scratch}
+                                showOwner={true}
+                            />
+                        ))}
+                    </div>
+                </div>
+            )}
             <div className={styles.editorContainer}>
                 <p className={styles.label}>
                     Target assembly <small>(required)</small>

frontend/src/app/(navfooter)/new/new.module.scss

@@ -113,3 +113,14 @@
         }
     }
 }
+
+.duplicatesContainer {
+    font-size: 0.9rem;
+    margin-top: 1em;
+
+    padding: 2px 10px;
+}
+
+.duplicatesList {
+    padding-left: 1em;
+}

frontend/src/components/Nav/Search.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useRef, useState } from "react";
 
-import Image from "next/image";
 import { useRouter } from "next/navigation";
 
 import { SearchIcon } from "@primer/octicons-react";
@@ -9,14 +8,13 @@ import { useCombobox } from "downshift";
 import { useLayer } from "react-laag";
 
 import * as api from "@/lib/api";
-import { scratchUrl, userAvatarUrl } from "@/lib/api/urls";
+import { scratchUrl } from "@/lib/api/urls";
 
 import LoadingSpinner from "../loading.svg";
 import PlatformLink from "../PlatformLink";
-import AnonymousFrogAvatar from "../user/AnonymousFrog";
 import verticalMenuStyles from "../VerticalMenu.module.scss"; // eslint-disable-line css-modules/no-unused-class
 
-import { getMatchPercentString } from "../ScratchList";
+import { getMatchPercentString, ScratchOwnerAvatar } from "../ScratchList";
 
 import styles from "./Search.module.scss";
 
@@ -170,31 +168,7 @@ function MountedSearch({ className }: { className?: string }) {
                                     <span>
                                         {getMatchPercentString(scratch)}
                                     </span>
-                                    {scratch.owner &&
-                                        (!api.isAnonUser(scratch.owner) ? (
-                                            userAvatarUrl(scratch.owner) && (
-                                                <Image
-                                                    src={userAvatarUrl(
-                                                        scratch.owner,
-                                                    )}
-                                                    alt={scratch.owner.username}
-                                                    width={16}
-                                                    height={16}
-                                                    className={
-                                                        styles.scratchOwnerAvatar
-                                                    }
-                                                />
-                                            )
-                                        ) : (
-                                            <AnonymousFrogAvatar
-                                                user={scratch.owner}
-                                                width={16}
-                                                height={16}
-                                                className={
-                                                    styles.scratchOwnerAvatar
-                                                }
-                                            />
-                                        ))}
+                                    <ScratchOwnerAvatar scratch={scratch} />
                                 </a>
                             </li>
                         );

frontend/src/components/ScratchList.tsx

@@ -2,15 +2,18 @@
 
 import { type ReactNode, useState } from "react";
 
+import Image from "next/image";
 import Link from "next/link";
 
 import classNames from "classnames";
 
 import TimeAgo from "@/components/TimeAgo";
 import * as api from "@/lib/api";
-import { presetUrl, scratchUrl } from "@/lib/api/urls";
+import { presetUrl, scratchUrl, userAvatarUrl } from "@/lib/api/urls";
+
 import getTranslation from "@/lib/i18n/translate";
 
+import AnonymousFrogAvatar from "./user/AnonymousFrog";
 import AsyncButton from "./AsyncButton";
 import Button from "./Button";
 import LoadingSpinner from "./loading.svg";
@@ -281,9 +284,34 @@ export function ScratchItemPresetList({
     );
 }
 
+export function ScratchOwnerAvatar({ scratch }: { scratch: api.TerseScratch }) {
+    return (
+        scratch.owner &&
+        (!api.isAnonUser(scratch.owner) ? (
+            userAvatarUrl(scratch.owner) && (
+                <Image
+                    src={userAvatarUrl(scratch.owner)}
+                    alt={scratch.owner.username}
+                    width={16}
+                    height={16}
+                    className={styles.scratchOwnerAvatar}
+                />
+            )
+        ) : (
+            <AnonymousFrogAvatar
+                user={scratch.owner}
+                width={16}
+                height={16}
+                className={styles.scratchOwnerAvatar}
+            />
+        ))
+    );
+}
+
 export function SingleLineScratchItem({
     scratch,
-}: { scratch: api.TerseScratch }) {
+    showOwner = false,
+}: { scratch: api.TerseScratch; showOwner?: boolean }) {
     const matchPercentString = getMatchPercentString(scratch);
 
     return (
@@ -296,6 +324,7 @@ export function SingleLineScratchItem({
                 {scratch.name}
             </Link>
             <div className={styles.metadata}>{matchPercentString}</div>
+            {showOwner && <ScratchOwnerAvatar scratch={scratch} />}
         </li>
     );
 }