fix(workshop): resolve remaining review feedback

apps/docs/src/components/store/DetailPage.tsx

@@ -29,7 +29,7 @@ import type { SubmissionType } from "@site/src/lib/store-schema";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { cn, errorMessage } from "@/lib/utils";
+import { cn, errorMessage } from "@site/src/lib/utils";
 
 const typeLabels: Record<SubmissionType, string> = { css: "CSS", widget: "Widget" };
 const typeDotColors: Record<SubmissionType, string> = { css: "bg-blue-500", widget: "bg-yellow-500" };
@@ -284,6 +284,7 @@ const CommentsSection = ({
                   <div className="ml-auto flex gap-0.5">
                     <button
                       className="rounded p-1 hover:bg-accent"
+                      aria-label="Edit comment"
                       onClick={() => {
                         setEditingId(comment.id);
                         setEditContent(comment.content);
@@ -293,6 +294,7 @@ const CommentsSection = ({
                     </button>
                     <button
                       className="rounded p-1 hover:bg-destructive/20 hover:text-destructive"
+                      aria-label="Delete comment"
                       onClick={() => void handleDelete(comment.id)}
                     >
                       <IconTrash size={12} />
@@ -311,10 +313,10 @@ const CommentsSection = ({
                       if (e.key === "Enter") void handleUpdate(comment.id);
                     }}
                   />
-                  <Button size="icon-sm" onClick={() => void handleUpdate(comment.id)}>
+                  <Button size="icon-sm" aria-label="Save comment" onClick={() => void handleUpdate(comment.id)}>
                     <IconCheck size={12} />
                   </Button>
-                  <Button variant="ghost" size="icon-sm" onClick={() => setEditingId(null)}>
+                  <Button variant="ghost" size="icon-sm" aria-label="Cancel editing" onClick={() => setEditingId(null)}>
                     <IconX size={12} />
                   </Button>
                 </div>
@@ -378,6 +380,7 @@ const MarketplaceDetail = ({ storeUrl }: { storeUrl: string }) => {
   const [copied, setCopied] = useState(false);
   const [copyFailed, setCopyFailed] = useState(false);
   const copyTimer = useRef<ReturnType<typeof setTimeout>>(null);
+  const copyFailedTimer = useRef<ReturnType<typeof setTimeout>>(null);
   const voting = useRef(false);
 
   const requireUserId = useCallback(
@@ -411,6 +414,7 @@ const MarketplaceDetail = ({ storeUrl }: { storeUrl: string }) => {
   useEffect(
     () => () => {
       if (copyTimer.current) clearTimeout(copyTimer.current);
+      if (copyFailedTimer.current) clearTimeout(copyFailedTimer.current);
     },
     [],
   );
@@ -485,11 +489,10 @@ const MarketplaceDetail = ({ storeUrl }: { storeUrl: string }) => {
 
     try {
       if (!prev) {
-        await pb.collection("votes").create({ submission: submission.id, value, user: userId });
-        const votes = await pb.collection("votes").getFullList<StoreVote>({
-          filter: pb.filter("user = {:uid} && submission = {:sid}", { uid: userId, sid: submission.id }),
-        });
-        setUserVote(votes[0]);
+        const created = await pb
+          .collection("votes")
+          .create<StoreVote>({ submission: submission.id, value, user: userId });
+        setUserVote(created);
       } else if (isToggleOff) {
         await pb.collection("votes").delete(prev.id);
       } else {
@@ -521,10 +524,12 @@ const MarketplaceDetail = ({ storeUrl }: { storeUrl: string }) => {
       setCopied(true);
       setCopyFailed(false);
       if (copyTimer.current) clearTimeout(copyTimer.current);
+      if (copyFailedTimer.current) clearTimeout(copyFailedTimer.current);
       copyTimer.current = setTimeout(() => setCopied(false), 1500);
     } catch {
       setCopyFailed(true);
-      setTimeout(() => setCopyFailed(false), 2000);
+      if (copyFailedTimer.current) clearTimeout(copyFailedTimer.current);
+      copyFailedTimer.current = setTimeout(() => setCopyFailed(false), 2000);
     }
   };
 

apps/docs/src/components/store/StoreApp.tsx

@@ -87,6 +87,11 @@ const downloadJson = (s: StoreSubmission) => {
   URL.revokeObjectURL(url);
 };
 
+const stopCardNavigation = (event: React.MouseEvent<HTMLButtonElement>) => {
+  event.preventDefault();
+  event.stopPropagation();
+};
+
 export const StoreApp = ({ storeUrl }: { storeUrl: string }) => {
   const store = useStore(storeUrl);
   const [typeFilter, setTypeFilter] = useState<TypeFilter>("all");
@@ -496,14 +501,20 @@ const ScreenshotGallery = ({ urls, title }: { urls: string[]; title: string }) =
         <>
           <button
             className="absolute left-2 top-1/2 flex size-6 -translate-y-1/2 items-center justify-center rounded-md bg-background/80 opacity-60 shadow transition-opacity hover:opacity-100"
-            onClick={() => setIdx((i) => (i - 1 + urls.length) % urls.length)}
+            onClick={(event) => {
+              stopCardNavigation(event);
+              setIdx((i) => (i - 1 + urls.length) % urls.length);
+            }}
             aria-label="Previous screenshot"
           >
             <IconChevronLeft size={14} />
           </button>
           <button
             className="absolute right-2 top-1/2 flex size-6 -translate-y-1/2 items-center justify-center rounded-md bg-background/80 opacity-60 shadow transition-opacity hover:opacity-100"
-            onClick={() => setIdx((i) => (i + 1) % urls.length)}
+            onClick={(event) => {
+              stopCardNavigation(event);
+              setIdx((i) => (i + 1) % urls.length);
+            }}
             aria-label="Next screenshot"
           >
             <IconChevronRight size={14} />
@@ -512,7 +523,10 @@ const ScreenshotGallery = ({ urls, title }: { urls: string[]; title: string }) =
             {urls.map((_, i) => (
               <button
                 key={i}
-                onClick={() => setIdx(i)}
+                onClick={(event) => {
+                  stopCardNavigation(event);
+                  setIdx(i);
+                }}
                 aria-label={`Screenshot ${i + 1}`}
                 className={cn("size-1.5 rounded-full transition-all", dotClass[Number(i === idx)])}
               />

apps/docs/src/components/store/useStore.ts

@@ -4,7 +4,7 @@ import type { StoreComment, StoreSubmission, StoreVote } from "@site/src/lib/poc
 import { getPocketBase } from "@site/src/lib/pocketbase";
 import type { SubmissionType } from "@site/src/lib/store-schema";
 import { schemaVersionByType, validateSubmissionContent } from "@site/src/lib/store-schema";
-import { errorMessage } from "@/lib/utils";
+import { errorMessage } from "@site/src/lib/utils";
 
 export type SortKey = "top" | "new";
 export type TypeFilter = "all" | "yours" | SubmissionType;