Change default archive behavior to allow patches

This commit is contained in:
Jared Schoeny
2025-12-05 21:54:09 -10:00
parent 416a736ef1
commit 549c59246b
8 changed files with 356 additions and 42 deletions

View File

@@ -46,6 +46,7 @@ export async function prepareSubmission(formData: FormData) {
const pokecommunity = (formData.get("pokecommunity") as string)?.trim();
const tags = (formData.get("tags") as string)?.split(",").map((t) => t.trim()).filter(Boolean) || [];
const original_author = (formData.get("original_author") as string)?.trim() || null;
const permission_from = (formData.get("permission_from") as string)?.trim() || null;
const isArchive = formData.get("isArchive") === "true";
// For archives, version is not required; for regular hacks, it is
@@ -85,6 +86,7 @@ export async function prepareSubmission(formData: FormData) {
approved: isArchive, // Auto-approve archives
patch_url: "",
original_author: original_author || null,
permission_from: permission_from || null,
current_patch: null, // Archives don't have patches
} as HackInsert;

View File

@@ -10,6 +10,8 @@ interface HackFormCreateProps {
mode: "create";
dummy?: boolean;
isArchive?: boolean;
permissionFrom?: string;
customCreator?: string;
}
interface HackFormEditProps {
@@ -22,7 +24,12 @@ export type HackFormProps = HackFormCreateProps | HackFormEditProps;
export default function HackForm(props: HackFormProps) {
if (props.mode === "create") {
return <HackSubmitForm dummy={props.dummy} isArchive={props.isArchive} />;
return <HackSubmitForm
dummy={props.dummy}
isArchive={props.isArchive}
permissionFrom={props.permissionFrom}
customCreator={props.customCreator}
/>;
}
return <HackEditForm slug={props.slug} initial={props.initial} />;
}

View File

@@ -61,11 +61,15 @@ function SortableCoverItem({ id, index, url, filename, onRemove }: { id: string;
interface HackSubmitFormProps {
dummy?: boolean;
isArchive?: boolean;
permissionFrom?: string;
customCreator?: string;
}
export default function HackSubmitForm({
dummy = false,
isArchive = false,
permissionFrom = undefined,
customCreator = undefined,
}: HackSubmitFormProps) {
const MAX_COVERS = 10;
const { profile, user } = useAuthContext();
@@ -101,7 +105,11 @@ export default function HackSubmitForm({
const [pokecommunity, setPokecommunity] = React.useState(() => initialDraftRef.current?.pokecommunity || "");
const [tags, setTags] = React.useState<string[]>(() => (Array.isArray(initialDraftRef.current?.tags) ? initialDraftRef.current.tags : []));
const [showMdPreview, setShowMdPreview] = React.useState<boolean>(() => !!initialDraftRef.current?.showMdPreview);
const [originalAuthor, setOriginalAuthor] = React.useState(() => initialDraftRef.current?.originalAuthor || "");
const [originalAuthor, setOriginalAuthor] = React.useState<string>(() => {
// If customCreator is provided, use it; otherwise use draft or empty string
if (customCreator) return customCreator;
return initialDraftRef.current?.originalAuthor || "";
});
const [patchFile, setPatchFile] = React.useState<File | null>(null);
const [patchMode, setPatchMode] = React.useState<"bps" | "rom">(() => (initialDraftRef.current?.patchMode === "rom" ? "rom" : "bps"));
const [genStatus, setGenStatus] = React.useState<"idle" | "generating" | "ready" | "error">("idle");
@@ -162,6 +170,13 @@ export default function HackSubmitForm({
modifiedRomInputRef.current && (modifiedRomInputRef.current.value = "");
}, [patchMode]);
// Sync originalAuthor with customCreator if provided
React.useEffect(() => {
if (customCreator) {
setOriginalAuthor(customCreator);
}
}, [customCreator]);
const uploadCovers = async (slug: string) => {
if (!newCoverFiles || newCoverFiles.length === 0) return [] as string[];
const urls: string[] = [];
@@ -291,8 +306,11 @@ export default function HackSubmitForm({
if (typeof data.pokecommunity === "string") applied = applied || !!data.pokecommunity;
if (Array.isArray(data.tags)) setTags(data.tags.filter((t: any) => typeof t === "string"));
if (Array.isArray(data.tags)) applied = applied || data.tags.length > 0;
if (typeof data.originalAuthor === "string") setOriginalAuthor(data.originalAuthor);
if (typeof data.originalAuthor === "string") applied = applied || !!data.originalAuthor;
// Only load originalAuthor from draft if customCreator is not provided
if (!customCreator && typeof data.originalAuthor === "string") {
setOriginalAuthor(data.originalAuthor);
applied = applied || !!data.originalAuthor;
}
if (data.step && Number.isInteger(data.step)) setStep(Math.min(maxSteps, Math.max(1, data.step)));
if (typeof data.showMdPreview === "boolean") setShowMdPreview(data.showMdPreview);
if (data.patchMode === "bps" || data.patchMode === "rom") setPatchMode(data.patchMode);
@@ -314,17 +332,18 @@ export default function HackSubmitForm({
if (dummy || !draftKey || hydratedFromDraftRef.current) return;
const d = initialDraftRef.current;
if (!d || typeof d !== "object") return;
// Don't count originalAuthor if customCreator is provided
const hasAny = Boolean(
d.title || d.summary || d.description || d.baseRom || d.platform || d.version || d.language || d.boxArt || d.discord || d.twitter || d.pokecommunity || (Array.isArray(d.tags) && d.tags.length > 0) || d.originalAuthor
d.title || d.summary || d.description || d.baseRom || d.platform || d.version || d.language || d.boxArt || d.discord || d.twitter || d.pokecommunity || (Array.isArray(d.tags) && d.tags.length > 0) || (!customCreator && d.originalAuthor)
);
if (hasAny) { hydratedFromDraftRef.current = true; setRestoredDraft(true); }
}, [dummy, draftKey]);
}, [dummy, draftKey, customCreator]);
React.useEffect(() => {
if (dummy || !draftKey || isHydrating) return;
const handle = setTimeout(() => {
try {
const data = {
const data: any = {
title,
summary,
description,
@@ -337,11 +356,14 @@ export default function HackSubmitForm({
twitter,
pokecommunity,
tags,
originalAuthor,
step,
showMdPreview,
patchMode,
};
// Only save originalAuthor if customCreator is not provided
if (!customCreator) {
data.originalAuthor = originalAuthor;
}
localStorage.setItem(draftKey, JSON.stringify(data));
} catch {
// ignore
@@ -366,6 +388,7 @@ export default function HackSubmitForm({
pokecommunity,
tags,
originalAuthor,
customCreator,
step,
showMdPreview,
patchMode,
@@ -402,9 +425,14 @@ export default function HackSubmitForm({
if (pokecommunity) fd.set('pokecommunity', pokecommunity);
if (tags.length) fd.set('tags', tags.join(','));
if (isArchive) {
fd.set('original_author', originalAuthor);
fd.set('isArchive', 'true');
}
if (originalAuthor) {
fd.set('original_author', originalAuthor);
}
if (permissionFrom) {
fd.set('permission_from', permissionFrom);
}
const prepared = await prepareSubmission(fd);
if (!prepared.ok) throw new Error(prepared.error || 'Failed to prepare');
@@ -521,7 +549,9 @@ export default function HackSubmitForm({
const preview = {
slug: slug || "preview",
title: title || "Your hack title",
author: isArchive ? (originalAuthor || "Unknown") : (profile?.username ? `@${profile.username}` : "You"),
author: (isArchive || customCreator) ?
(originalAuthor || "Unknown") :
(profile?.username ? `@${profile.username}` : "You"),
summary: (summary || "Short description, max 100 characters.") as string,
description: (description || "Write a longer markdown description here.") as string,
covers: coverPreviews,
@@ -551,6 +581,25 @@ export default function HackSubmitForm({
Checking for existing draft
</div>
)}
{customCreator && permissionFrom && (
<div className="flex items-center gap-3 rounded-md border border-blue-500/30 bg-blue-500/10 p-3 text-sm text-blue-900 dark:text-blue-100">
<div className="flex items-center justify-center w-2 h-full">
<div className="inline-block h-2 w-2 rounded-full bg-blue-400" />
</div>
<div className="flex flex-col gap-1">
<p className="font-semibold">
{customCreator === permissionFrom
? `Submitting on behalf of ${customCreator} with their permission.`
: `Submitting on behalf of ${customCreator}`}
</p>
{customCreator !== permissionFrom && (
<p className="text-xs text-blue-800 dark:text-blue-200">
You are submitting this hack with permission from {permissionFrom}.
</p>
)}
</div>
</div>
)}
{!isHydrating && restoredDraft && (
<div className="rounded-md border border-amber-500/30 bg-amber-500/10 p-3 text-sm text-amber-900 dark:text-amber-100 flex items-center justify-between">
<div className="flex items-center gap-2">
@@ -584,7 +633,7 @@ export default function HackSubmitForm({
setNewCoverFiles([]);
setCoverErrors([]);
setPatchFile(null);
setOriginalAuthor("");
setOriginalAuthor(customCreator || "");
setShowMdPreview(false);
setStep(1);
// Clear file inputs if present
@@ -692,8 +741,9 @@ export default function HackSubmitForm({
<input
value={originalAuthor}
onChange={(e) => setOriginalAuthor(e.target.value)}
disabled={!!customCreator}
placeholder="Name of the original hack creator"
className="h-11 rounded-md bg-[var(--surface-2)] px-3 text-sm ring-1 ring-inset ring-[var(--border)] focus:outline-none focus:ring-2 focus:ring-[var(--ring)]"
className="h-11 rounded-md bg-[var(--surface-2)] px-3 text-sm ring-1 ring-inset ring-[var(--border)] focus:outline-none focus:ring-2 focus:ring-[var(--ring)] disabled:opacity-50 disabled:cursor-not-allowed"
/>
) : (
<div role="textbox" aria-disabled className="h-11 rounded-md bg-[var(--surface-2)] px-3 text-sm ring-1 ring-inset ring-[var(--border)] flex items-center text-foreground/60 select-none">Original author name</div>

View File

@@ -1,12 +1,22 @@
"use client";
import React, { useEffect } from "react";
import React, { useEffect, useState } from "react";
type ArchiveModeSelectorProps = {
onSelect: (isArchive: boolean) => void;
onSelect: (options?: {
customCreator?: string,
permissionFrom?: string,
isArchive?: boolean,
}) => void;
};
const ArchiveModeSelector: React.FC<ArchiveModeSelectorProps> = ({ onSelect }) => {
const [currentPage, setCurrentPage] = useState<"first" | "second">("first");
const [hasPermission, setHasPermission] = useState<boolean | null>(null);
const [permissionFrom, setPermissionFrom] = useState<string | null>(null);
const [isSamePerson, setIsSamePerson] = useState<boolean | null>(null);
const [customCreator, setCustomCreator] = useState<string | null>(null);
useEffect(() => {
const html = document.documentElement;
const body = document.body;
@@ -28,39 +38,220 @@ const ArchiveModeSelector: React.FC<ArchiveModeSelectorProps> = ({ onSelect }) =
};
}, []);
const canProceed = () => {
if (hasPermission === false) return false;
if (hasPermission === true) {
if (!permissionFrom?.trim()) return false;
if (isSamePerson === true) return true;
if (isSamePerson === false && customCreator) {
return customCreator.trim().length > 0;
}
return false;
}
return false;
};
const handleGetStarted = () => {
if (!canProceed()) return;
if (isSamePerson === true) {
onSelect({
permissionFrom: permissionFrom?.trim(),
customCreator: permissionFrom?.trim(),
});
} else {
onSelect({
permissionFrom: permissionFrom?.trim(),
customCreator: customCreator?.trim(),
});
}
};
const renderFirstPage = () => (
<div className="flex flex-col gap-8 sm:gap-4">
<div>
<div className="text-xl font-semibold">What would you like to create?</div>
<p className="mt-1 text-sm text-foreground/80">
Choose whether you&apos;re creating a new hack for yourself or uploading on behalf of another creator without an account.
</p>
</div>
<div className="flex flex-col gap-3">
<button
type="button"
onClick={() => onSelect()}
className="shine-wrap btn-premium h-14 sm:h-11 w-full text-sm font-semibold rounded-md text-[var(--accent-foreground)]"
>
<span>Create my own hack</span>
</button>
<button
type="button"
onClick={() => setCurrentPage("second")}
className="inline-flex h-14 sm:h-11 w-full items-center justify-center rounded-md px-4 text-sm font-semibold ring-1 ring-[var(--border)] hover:bg-[var(--surface-2)]"
>
Submit someone else&apos;s hack
</button>
</div>
</div>
);
const renderSecondPage = () => (
<div className="flex flex-col gap-6 sm:gap-4">
<div>
<div className="text-xl font-semibold">Permission Confirmation</div>
<p className="mt-1 text-sm text-foreground/80">
We need to confirm that you have permission to upload this romhack on behalf of the original creator.
</p>
</div>
<div className="flex flex-col gap-8 my-4">
<div>
<label className="text-sm font-semibold mb-2 block">
Did you receive explicit permission to upload this hack to HackDex?
</label>
<p className="text-sm text-foreground/80">
You should be able to provide evidence of this permission if asked.
</p>
<div className="flex gap-4 mt-2">
<label className="flex items-center gap-2 cursor-pointer">
<input
type="radio"
name="hasPermission"
checked={hasPermission === true}
onChange={() => setHasPermission(true)}
className="w-4 h-4"
/>
<span className="text-sm">Yes</span>
</label>
<label className="flex items-center gap-2 cursor-pointer">
<input
type="radio"
name="hasPermission"
checked={hasPermission === false}
onChange={() => setHasPermission(false)}
className="w-4 h-4"
/>
<span className="text-sm">No</span>
</label>
</div>
</div>
{hasPermission === true && (
<>
<div>
<label className="text-sm font-semibold mb-2 block">
Who gave you this permission?
</label>
<input
type="text"
value={permissionFrom ?? ""}
onChange={(e) => setPermissionFrom(e.target.value)}
placeholder="Enter name"
className="w-full px-3 py-2 rounded-md border border-[var(--border)] bg-[var(--surface-1)] text-sm focus:outline-none focus:ring-2 focus:ring-[var(--accent)]"
/>
</div>
{permissionFrom && permissionFrom.trim() && (
<div>
<label className="text-sm font-semibold mb-2 block">
Does the person who gave permission have the same name as the original creator or team who made this hack?
</label>
<div className="flex gap-4 mt-2">
<label className="flex items-center gap-2 cursor-pointer">
<input
type="radio"
name="isSamePerson"
checked={isSamePerson === true}
onChange={() => setIsSamePerson(true)}
className="w-4 h-4"
/>
<span className="text-sm">Yes</span>
</label>
<label className="flex items-center gap-2 cursor-pointer">
<input
type="radio"
name="isSamePerson"
checked={isSamePerson === false}
onChange={() => setIsSamePerson(false)}
className="w-4 h-4"
/>
<span className="text-sm">No</span>
</label>
</div>
</div>
)}
{isSamePerson === false ? (
<div>
<label className="text-sm font-semibold mb-2 block">
What is the original creator&apos;s or team&apos;s name?
</label>
<p className="text-sm text-foreground/80 mb-2">
This will appear on the hack&apos;s page as <span className="font-semibold">by {customCreator || "username"}</span>.
</p>
<input
type="text"
value={customCreator ?? ""}
onChange={(e) => setCustomCreator(e.target.value)}
placeholder="Enter creator or team name"
className="w-full px-3 py-2 rounded-md border border-[var(--border)] bg-[var(--surface-1)] text-sm focus:outline-none focus:ring-2 focus:ring-[var(--accent)]"
/>
</div>
) : isSamePerson === true && permissionFrom && permissionFrom.trim() && (
<div>
<p className="text-sm text-foreground/80">
This will appear on the hack&apos;s page as <span className="font-semibold">by {permissionFrom}</span>.
</p>
</div>
)}
</>
)}
{hasPermission === false && (
<div className="p-4 rounded-md bg-[var(--surface-2)] border border-[var(--border)]">
<p className="text-sm text-foreground/90">
You need explicit permission from the original creator in order to upload on their behalf.
Alternatively, you could ask if they are interested in creating a Hackdex account to submit their own hack.
</p>
</div>
)}
</div>
<div className="flex flex-col gap-3 pt-2">
<button
type="button"
onClick={handleGetStarted}
disabled={!canProceed()}
className="shine-wrap btn-premium h-14 sm:h-11 w-full text-sm font-semibold rounded-md text-[var(--accent-foreground)] disabled:opacity-50 disabled:cursor-not-allowed"
>
<span>Get Started</span>
</button>
<button
type="button"
onClick={() => {
setCurrentPage("first");
setHasPermission(null);
setPermissionFrom(null);
setIsSamePerson(null);
setCustomCreator(null);
}}
className="inline-flex h-14 sm:h-11 w-full items-center justify-center rounded-md px-4 text-sm font-semibold ring-1 ring-[var(--border)] hover:bg-[var(--surface-2)]"
>
Back
</button>
</div>
</div>
);
return (
<div className="fixed left-0 right-0 top-16 bottom-0 z-[100] flex items-center justify-center p-4">
<div className="absolute inset-0 bg-black/50 dark:bg-black/60 backdrop-blur-sm" />
<div
role="dialog"
aria-modal="true"
aria-label="Select hack type"
className="relative z-[101] mb-16 card backdrop-blur-lg dark:!bg-white/6 p-6 max-w-md w-full rounded-lg"
aria-label={currentPage === "first" ? "Select hack type" : "Permission confirmation"}
className="relative z-[101] mb-16 card backdrop-blur-lg dark:!bg-white/6 p-6 max-w-md max-h-[85vh] overflow-y-auto w-full rounded-lg"
>
<div className="flex flex-col gap-8 sm:gap-4">
<div>
<div className="text-xl font-semibold">What would you like to create?</div>
<p className="mt-1 text-sm text-foreground/80">
Choose whether you&apos;re creating a new hack for yourself or archiving an existing hack for preservation purposes.
</p>
</div>
<div className="flex flex-col gap-3">
<button
type="button"
onClick={() => onSelect(false)}
className="shine-wrap btn-premium h-14 sm:h-11 w-full text-sm font-semibold rounded-md text-[var(--accent-foreground)]"
>
<span>Create new hack</span>
</button>
<button
type="button"
onClick={() => onSelect(true)}
className="inline-flex h-14 sm:h-11 w-full items-center justify-center rounded-md px-4 text-sm font-semibold ring-1 ring-[var(--border)] hover:bg-[var(--surface-2)]"
>
Create Archive hack
</button>
</div>
</div>
{currentPage === "first" ? renderFirstPage() : renderSecondPage()}
</div>
</div>
);

View File

@@ -6,11 +6,26 @@ import ArchiveModeSelector from "@/components/Submit/ArchiveModeSelector";
export default function SubmitPageClient({ canCreateArchive, dummy }: { canCreateArchive: boolean; dummy: boolean }) {
const [showModeSelector, setShowModeSelector] = React.useState(canCreateArchive);
const [customCreator, setCustomCreator] = React.useState<string | undefined>(undefined);
const [permissionFrom, setPermissionFrom] = React.useState<string | undefined>(undefined);
const [isArchive, setIsArchive] = React.useState(false);
if (showModeSelector) {
return <ArchiveModeSelector onSelect={(archive) => { setIsArchive(archive); setShowModeSelector(false); }} />;
return <ArchiveModeSelector
onSelect={(options) => {
setCustomCreator(options?.customCreator);
setPermissionFrom(options?.permissionFrom);
setIsArchive(options?.isArchive ?? false);
setShowModeSelector(false);
}}
/>;
}
return <HackForm mode="create" dummy={dummy} isArchive={isArchive} />;
return <HackForm
mode="create"
dummy={dummy}
isArchive={isArchive}
permissionFrom={permissionFrom}
customCreator={customCreator}
/>;
}

View File

@@ -144,6 +144,7 @@ export type Database = {
language: string
original_author: string | null
patch_url: string
permission_from: string | null
published: boolean
search: unknown
slug: string
@@ -168,6 +169,7 @@ export type Database = {
language: string
original_author?: string | null
patch_url: string
permission_from?: string | null
published?: boolean
search?: unknown
slug: string
@@ -192,6 +194,7 @@ export type Database = {
language?: string
original_author?: string | null
patch_url?: string
permission_from?: string | null
published?: boolean
search?: unknown
slug?: string
@@ -349,6 +352,10 @@ export type Database = {
get_my_claim: { Args: { claim: string }; Returns: Json }
get_my_claims: { Args: never; Returns: Json }
is_admin: { Args: never; Returns: boolean }
is_archive_hack_for_archiver: {
Args: { hack_slug: string }
Returns: boolean
}
is_archiver: { Args: never; Returns: boolean }
is_claims_admin: { Args: never; Returns: boolean }
set_claim: {

View File

@@ -0,0 +1 @@
alter table "public"."hacks" add column "permission_from" text;

View File

@@ -0,0 +1,41 @@
-- Helper function to check if a hack qualifies for archiver access
-- SECURITY DEFINER allows this function to bypass RLS when checking hack properties,
-- preventing circular dependencies in RLS policies
CREATE OR REPLACE FUNCTION public.is_archive_hack_for_archiver(hack_slug text)
RETURNS boolean
LANGUAGE sql
STABLE
SECURITY DEFINER
AS $$
SELECT EXISTS (
SELECT 1
FROM public.hacks h
WHERE h.slug = hack_slug
AND h.original_author IS NOT NULL
AND (h.current_patch IS NULL OR h.permission_from IS NOT NULL)
);
$$;
-- Archivers can view archive hacks (including unapproved ones)
CREATE POLICY "Archivers can view archive hacks." ON "public"."hacks" FOR SELECT USING (("public"."is_archiver"() AND "public"."is_archive_hack_for_archiver"("slug")));
-- Archivers can update archive hacks
CREATE POLICY "Archivers can update archive hacks." ON "public"."hacks" FOR UPDATE USING (("public"."is_archiver"() AND "public"."is_archive_hack_for_archiver"("slug"))) WITH CHECK (("public"."is_archiver"() AND "public"."is_archive_hack_for_archiver"("slug")));
-- Archivers can delete archive hacks
CREATE POLICY "Archivers can delete archive hacks." ON "public"."hacks" FOR DELETE USING (("public"."is_archiver"() AND "public"."is_archive_hack_for_archiver"("slug")));
-- Archivers can add covers to archive hacks
CREATE POLICY "Archivers can add covers to archive hacks." ON "public"."hack_covers" FOR INSERT WITH CHECK (("public"."is_archiver"() AND "public"."is_archive_hack_for_archiver"("hack_slug")));
-- Archivers can remove covers from archive hacks
CREATE POLICY "Archivers can remove covers from archive hacks." ON "public"."hack_covers" FOR DELETE USING (("public"."is_archiver"() AND "public"."is_archive_hack_for_archiver"("hack_slug")));
-- Archivers can update covers on archive hacks
CREATE POLICY "Archivers can update covers on archive hacks." ON "public"."hack_covers" FOR UPDATE USING (("public"."is_archiver"() AND "public"."is_archive_hack_for_archiver"("hack_slug")));
-- Archivers can add tags to archive hacks
CREATE POLICY "Archivers can add tags to archive hacks." ON "public"."hack_tags" FOR INSERT WITH CHECK (("public"."is_archiver"() AND "public"."is_archive_hack_for_archiver"("hack_slug")));
-- Archivers can remove tags from archive hacks
CREATE POLICY "Archivers can remove tags from archive hacks." ON "public"."hack_tags" FOR DELETE USING (("public"."is_archiver"() AND "public"."is_archive_hack_for_archiver"("hack_slug")));