Pandore/homarr
Public Access
1
0 Fork 0
Code Actions Activity

fix(workshop): resolve remaining review feedback

Browse Source
This commit is contained in:
ajnart committed 2026-07-03 22:51:46 +02:00
1 parent b0429f9287
commit f1e4866a8b
10 files changed
+67 -32
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/docs/src/components/store/DetailPage.tsx
+14 -9
View File
@@ -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
+17 -3
View File
@@ -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
+1 -1
View File
@@ -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
+16 -11
View File
@@ -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));