fix(workshop): resolve remaining review feedback

.env.example

@@ -59,11 +59,11 @@ TURBO_TELEMETRY_DISABLED=1
 # ENABLE_KUBERNETES=true
 
 # Enable mock integration
-UNSAFE_ENABLE_MOCK_INTEGRATION=true
+# UNSAFE_ENABLE_MOCK_INTEGRATION=true
 
 # Community workshop (PocketBase) base URL used by the in-app "Install from Workshop" buttons
 # In production this defaults to https://store.homarr.dev — override for local dev:
-NEXT_PUBLIC_WIDGET_STORE_URL=http://localhost:8090
+# NEXT_PUBLIC_WIDGET_STORE_URL=http://localhost:8090
 # Docs site workshop URL used for "Open Workshop" links
 # In production this defaults to https://homarr.dev/workshop
 # NEXT_PUBLIC_WORKSHOP_URL=http://localhost:3003/workshop

.opencode/changelog/2026-07-03.md

@@ -8,3 +8,12 @@
 - **Tests**: `pnpm lint` passed with warnings, `pnpm typecheck` passed, `pnpm exec vitest run apps/docs/src/lib/store-schema.spec.ts` passed. Full `pnpm test` failed on unrelated timeout/external-dependency tests: Immich icon fetch, Pi-hole container, MySQL migration, and Nextcloud hook.
 - **Docs**: Updated workshop management docs with a stronger safety warning and submission guidelines.
 - **Risks**: The commit includes a large required `dev` merge, so review should distinguish upstream merge changes from the scoped CodeRabbit fixes.
+
+## PR #5984 Additional CodeRabbit Fixes
+
+- **Why**: Resolve the remaining actionable CodeRabbit comments before requesting Copilot review.
+- **What**: Commented out opt-in example env flags, pinned the PocketBase image, ignored store-local env files, documented PocketBase admin bootstrap vars, enabled GitHub OAuth only when credentials are present, indexed `comments.submission`, added reduced-motion handling for submit-step animation, added accessible comment action labels, used created vote records directly on detail pages, tracked copy-failure timers for cleanup, prevented screenshot carousel controls from navigating card links, and normalized the `useStore` utils import alias.
+- **Files**: `.env.example`, `apps/store/docker-compose.yml`, `apps/store/.gitignore`, `apps/store/README.md`, `apps/store/pb_migrations/1750000000_init_store.js`, `apps/docs/src/css/custom.css`, `apps/docs/src/components/store/DetailPage.tsx`, `apps/docs/src/components/store/StoreApp.tsx`, `apps/docs/src/components/store/useStore.ts`.
+- **Tests**: `pnpm --filter @homarr/docs typecheck`, `pnpm --filter @homarr/docs lint`, `pnpm --filter nextjs typecheck`, and `pnpm exec vitest run apps/docs/src/lib/store-schema.spec.ts` passed; docs lint still reports pre-existing warnings outside this fix set.
+- **Docs**: Updated `apps/store/README.md` with admin bootstrap variables.
+- **Risks**: PocketBase image pin assumes `ghcr.io/muchobien/pocketbase:0.26.2` remains the intended runtime version for this new store service.

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;

apps/docs/src/css/custom.css

@@ -11,7 +11,7 @@
   --breakpoint-3xl: 1697px;
 
   --font-heading: var(--font-sans);
-  --font-sans: 'Work Sans', sans-serif;
+  --font-sans: "Work Sans", sans-serif;
 
   --color-background: var(--background);
   --color-foreground: var(--foreground);
@@ -68,9 +68,9 @@
 
   --aa-primary-color-rgb: #fa5252 !important;
   --aa-muted-color-rgb: #fa5252 !important;
-  --aa-background-color-rgb: 200,200,200 !important;
+  --aa-background-color-rgb: 200, 200, 200 !important;
 
-  --ifm-font-family-base: 'Work Sans', sans-serif;
+  --ifm-font-family-base: "Work Sans", sans-serif;
   --ifm-color-content-inverse: var(--ifm-color-emphasis-100);
 
   /* Bridge Docusaurus to shadcn theme */
@@ -113,7 +113,7 @@
   --sidebar-ring: oklch(0.723 0.014 214.4);
 }
 
-[data-theme='dark'] {
+[data-theme="dark"] {
   --ifm-color-primary: #fa5252;
   --ifm-color-primary-dark: #f93232;
   --ifm-color-primary-darker: #f92222;
@@ -127,7 +127,7 @@
 
   --aa-primary-color-rgb: #fa5252 !important;
   --aa-muted-color-rgb: #fa5252 !important;
-  --aa-background-color-rgb: 24,24,24 !important;
+  --aa-background-color-rgb: 24, 24, 24 !important;
 
   --background: oklch(0.148 0.004 228.8);
   --foreground: oklch(0.987 0.002 197.1);
@@ -218,7 +218,7 @@
 }
 
 .footer__copyright span.copyright_text {
-  opacity: .6;
+  opacity: 0.6;
 }
 
 .medium-zoom-overlay {
@@ -235,7 +235,7 @@
 
 .announcementBar_node_modules-\@docusaurus-theme-classic-lib-theme-AnnouncementBar-styles-module {
   background-color: transparent !important;
-  background-image: radial-gradient(circle,  rgb(253, 126, 20) 0%, rgb(250, 82, 82) 100%) !important;
+  background-image: radial-gradient(circle, rgb(253, 126, 20) 0%, rgb(250, 82, 82) 100%) !important;
   font-weight: 600;
 }
 
@@ -273,7 +273,7 @@ html[data-theme="dark"] div#__docusaurus div[role="banner"] button svg {
   color: var(--ifm-color-primary);
 }
 
-:is(p, h3, h4, h5, h6):has(+ :is(ul, ol)){
+:is(p, h3, h4, h5, h6):has(+ :is(ul, ol)) {
   margin-bottom: 4px !important;
 }
 
@@ -302,7 +302,6 @@ html[data-theme="dark"] div#__docusaurus div[role="banner"] button svg {
   padding: 6px 12px;
 }
 
-
 .hero-cards {
   transform: rotate(20deg) scale(0.8) skew(21deg);
   -webkit-transform: rotate(20deg) scale(0.8) skew(21deg);
@@ -318,7 +317,7 @@ html[data-theme="dark"] div#__docusaurus div[role="banner"] button svg {
 }
 
 .app-card img {
-  transition:  transform 0.1s ease-in-out;
+  transition: transform 0.1s ease-in-out;
 }
 
 .app-card:hover img {
@@ -326,7 +325,7 @@ html[data-theme="dark"] div#__docusaurus div[role="banner"] button svg {
 }
 
 .hover-animation {
-  animation:  hover-animation 5s ease-in-out forwards;
+  animation: hover-animation 5s ease-in-out forwards;
   animation-iteration-count: infinite;
 }
 
@@ -354,6 +353,12 @@ html[data-theme="dark"] div#__docusaurus div[role="banner"] button svg {
   --submit-step-x: -80px;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .submit-step-enter {
+    animation: none;
+  }
+}
+
 @keyframes submit-step-enter {
   from {
     transform: translateX(var(--submit-step-x, 80px));

apps/store/.gitignore

@@ -1 +1,3 @@
 pb_data/
+.env
+.env.local

apps/store/README.md

@@ -22,14 +22,13 @@ docker compose up
    - Homepage URL: `https://store.homarr.dev` (or `http://localhost:8090` in dev)
    - Authorization callback URL: `https://store.homarr.dev/api/oauth2-redirect`
      (dev: `http://localhost:8090/api/oauth2-redirect`)
-2. Provide the credentials before the first run so the init migration wires them up:
+2. Provide the GitHub credentials and initial admin credentials before the first run so the init migration wires them up and the PocketBase dashboard can be accessed:
 
 ```bash
-GITHUB_CLIENT_ID=xxx GITHUB_CLIENT_SECRET=yyy docker compose up
+GITHUB_CLIENT_ID=xxx GITHUB_CLIENT_SECRET=yyy PB_ADMIN_EMAIL=admin@example.com PB_ADMIN_PASSWORD=change-me docker compose up
 ```
 
-If you start without them, GitHub OAuth is left disabled — enable it later from the admin
-UI under **Collections -> users -> Options -> OAuth2**.
+If you start without the GitHub credentials, GitHub OAuth is left disabled — enable it later from the admin UI under **Collections -> users -> Options -> OAuth2**. `PB_ADMIN_EMAIL` and `PB_ADMIN_PASSWORD` are used by the PocketBase image to bootstrap the first superuser for the admin UI.
 
 ## Collections
 

apps/store/docker-compose.yml

@@ -1,6 +1,6 @@
 services:
   pocketbase:
-    image: ghcr.io/muchobien/pocketbase:latest
+    image: ghcr.io/muchobien/pocketbase:0.26.2
     container_name: homarr-store
     restart: unless-stopped
     environment:

apps/store/pb_migrations/1750000000_init_store.js

@@ -6,8 +6,8 @@ migrate(
 
     const githubClientId = $os.getenv("GITHUB_CLIENT_ID");
     const githubClientSecret = $os.getenv("GITHUB_CLIENT_SECRET");
-    users.oauth2.enabled = true;
     if (githubClientId && githubClientSecret) {
+      users.oauth2.enabled = true;
       users.oauth2.providers = [
         {
           name: "github",
@@ -123,6 +123,7 @@ migrate(
         { name: "updated", type: "autodate", onCreate: true, onUpdate: true },
       ],
     });
+    comments.addIndex("idx_comments_submission", false, "submission", "");
     app.save(comments);
   },
   (app) => {