mirror of
https://github.com/YuzuZensai/Pien-Studio.git
synced 2026-09-02 14:18:35 +00:00
♻️ refactor!: massive refactor
This commit is contained in:
+259
-107
@@ -2,12 +2,24 @@
|
||||
|
||||
import React from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { addLayer, createLayer, createProject, parseProjectFile, setCanvasSize } from "@pien-studio/editor-core";
|
||||
import {
|
||||
addLayer,
|
||||
createLayer,
|
||||
createProject,
|
||||
parseProjectFile,
|
||||
setCanvasSize,
|
||||
} from "@pien-studio/editor-core";
|
||||
import type { Project } from "@pien-studio/types";
|
||||
import { deleteProject, duplicateProject, loadProjects, upsertProject } from "@pien-studio/storage";
|
||||
import { localProjectRepository } from "../lib/project-repository";
|
||||
import { useEditorStore } from "../store/editor-store";
|
||||
import { useUiStore, isDarkTheme } from "../store/ui-store";
|
||||
import { accentButtonClass, cx, mutedSurfaceClass, subtleButtonClass, surfaceClass } from "../lib/theme";
|
||||
import {
|
||||
accentButtonClass,
|
||||
cx,
|
||||
mutedSurfaceClass,
|
||||
subtleButtonClass,
|
||||
surfaceClass,
|
||||
} from "../lib/theme";
|
||||
import { UiPreferences } from "../components/ui-preferences";
|
||||
import { useAssetCleanupJob } from "../hooks/use-asset-cleanup-job";
|
||||
import { useTranslations } from "../hooks/use-translations";
|
||||
@@ -20,19 +32,20 @@ export default function HomePage() {
|
||||
const { t } = useTranslations();
|
||||
const [projects, setProjects] = React.useState<Project[]>([]);
|
||||
const [showWipModal, setShowWipModal] = React.useState(true);
|
||||
const [projectPendingDelete, setProjectPendingDelete] = React.useState<Project | null>(null);
|
||||
const [projectPendingDelete, setProjectPendingDelete] =
|
||||
React.useState<Project | null>(null);
|
||||
const projectInputRef = React.useRef<HTMLInputElement | null>(null);
|
||||
const imageInputRef = React.useRef<HTMLInputElement | null>(null);
|
||||
const isDark = isDarkTheme(theme);
|
||||
|
||||
const refreshProjects = React.useCallback(async () => {
|
||||
setProjects(await loadProjects());
|
||||
setProjects(await localProjectRepository.listProjects());
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
let canceled = false;
|
||||
hydrate();
|
||||
loadProjects().then((loadedProjects) => {
|
||||
localProjectRepository.listProjects().then((loadedProjects) => {
|
||||
if (!canceled) setProjects(loadedProjects);
|
||||
});
|
||||
return () => {
|
||||
@@ -47,25 +60,27 @@ export default function HomePage() {
|
||||
|
||||
async function confirmDeleteProject() {
|
||||
if (!projectPendingDelete) return;
|
||||
await deleteProject(projectPendingDelete.id);
|
||||
await localProjectRepository.deleteProject(projectPendingDelete.id);
|
||||
await refreshProjects();
|
||||
setProjectPendingDelete(null);
|
||||
}
|
||||
|
||||
async function handleNewProject() {
|
||||
const project = createProject(t("home.untitledProject"));
|
||||
await upsertProject(project);
|
||||
await localProjectRepository.upsertProject(project);
|
||||
openProject(project);
|
||||
}
|
||||
|
||||
async function handleImportProjectFile(event: React.ChangeEvent<HTMLInputElement>) {
|
||||
async function handleImportProjectFile(
|
||||
event: React.ChangeEvent<HTMLInputElement>,
|
||||
) {
|
||||
const file = event.target.files?.[0];
|
||||
if (!file) return;
|
||||
const raw = await file.text();
|
||||
try {
|
||||
const parsed = parseProjectFile(raw);
|
||||
if (!parsed.ok) return;
|
||||
await upsertProject(parsed.project);
|
||||
await localProjectRepository.upsertProject(parsed.project);
|
||||
await refreshProjects();
|
||||
openProject(parsed.project);
|
||||
} finally {
|
||||
@@ -80,34 +95,44 @@ export default function HomePage() {
|
||||
const reader = new FileReader();
|
||||
reader.onload = async () => {
|
||||
try {
|
||||
const sourceUri = typeof reader.result === "string" ? reader.result : undefined;
|
||||
const sourceUri =
|
||||
typeof reader.result === "string" ? reader.result : undefined;
|
||||
if (!sourceUri) return;
|
||||
|
||||
const imageSize = await new Promise<{ width: number; height: number }>((resolve) => {
|
||||
const image = new Image();
|
||||
image.onload = () => {
|
||||
resolve({
|
||||
width: Math.max(1, Math.round(image.naturalWidth)),
|
||||
height: Math.max(1, Math.round(image.naturalHeight)),
|
||||
});
|
||||
};
|
||||
image.onerror = () => resolve({ width: 1, height: 1 });
|
||||
image.src = sourceUri;
|
||||
});
|
||||
const imageSize = await new Promise<{ width: number; height: number }>(
|
||||
(resolve) => {
|
||||
const image = new Image();
|
||||
image.onload = () => {
|
||||
resolve({
|
||||
width: Math.max(1, Math.round(image.naturalWidth)),
|
||||
height: Math.max(1, Math.round(image.naturalHeight)),
|
||||
});
|
||||
};
|
||||
image.onerror = () => resolve({ width: 1, height: 1 });
|
||||
image.src = sourceUri;
|
||||
},
|
||||
);
|
||||
|
||||
const base = createProject(title, "free");
|
||||
const projectWithImageCanvas = setCanvasSize(base, imageSize.width, imageSize.height);
|
||||
const projectWithImageCanvas = setCanvasSize(
|
||||
base,
|
||||
imageSize.width,
|
||||
imageSize.height,
|
||||
);
|
||||
|
||||
const project = addLayer(projectWithImageCanvas, createLayer("raster", {
|
||||
name: file.name,
|
||||
sourceUri,
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: imageSize.width,
|
||||
height: imageSize.height,
|
||||
}));
|
||||
const project = addLayer(
|
||||
projectWithImageCanvas,
|
||||
createLayer("raster", {
|
||||
name: file.name,
|
||||
asset: { kind: "inline", uri: sourceUri },
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: imageSize.width,
|
||||
height: imageSize.height,
|
||||
}),
|
||||
);
|
||||
|
||||
await upsertProject(project);
|
||||
await localProjectRepository.upsertProject(project);
|
||||
await refreshProjects();
|
||||
openProject(project);
|
||||
} finally {
|
||||
@@ -120,15 +145,33 @@ export default function HomePage() {
|
||||
return (
|
||||
<>
|
||||
{showWipModal ? (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/45 p-4" onClick={() => setShowWipModal(false)}>
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-black/45 p-4"
|
||||
onClick={() => setShowWipModal(false)}
|
||||
>
|
||||
<div
|
||||
className={cx("w-full max-w-lg rounded-2xl border p-5 shadow-2xl", surfaceClass(isDark))}
|
||||
className={cx(
|
||||
"w-full max-w-lg rounded-2xl border p-5 shadow-2xl",
|
||||
surfaceClass(isDark),
|
||||
)}
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
>
|
||||
<h2 className="text-lg font-semibold">{t("home.wipTitle")}</h2>
|
||||
<p className={cx("mt-2 text-sm leading-relaxed", isDark ? "text-[#c9ced8]" : "text-[#545d6d]")}>{t("home.wipBody")}</p>
|
||||
<p className={cx("mt-3 text-sm leading-relaxed", isDark ? "text-[#c9ced8]" : "text-[#545d6d]")}>
|
||||
{t("home.wipSupportPrefix")} {" "}
|
||||
<p
|
||||
className={cx(
|
||||
"mt-2 text-sm leading-relaxed",
|
||||
isDark ? "text-[#c9ced8]" : "text-[#545d6d]",
|
||||
)}
|
||||
>
|
||||
{t("home.wipBody")}
|
||||
</p>
|
||||
<p
|
||||
className={cx(
|
||||
"mt-3 text-sm leading-relaxed",
|
||||
isDark ? "text-[#c9ced8]" : "text-[#545d6d]",
|
||||
)}
|
||||
>
|
||||
{t("home.wipSupportPrefix")}{" "}
|
||||
<a
|
||||
href="https://github.com/sponsors/YuzuZensai"
|
||||
target="_blank"
|
||||
@@ -142,7 +185,10 @@ export default function HomePage() {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowWipModal(false)}
|
||||
className={cx("rounded border px-3 py-1.5 text-sm font-semibold", accentButtonClass())}
|
||||
className={cx(
|
||||
"rounded border px-3 py-1.5 text-sm font-semibold",
|
||||
accentButtonClass(),
|
||||
)}
|
||||
>
|
||||
{t("home.wipAcknowledge")}
|
||||
</button>
|
||||
@@ -152,20 +198,38 @@ export default function HomePage() {
|
||||
) : null}
|
||||
|
||||
{projectPendingDelete ? (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/45 p-4" onClick={() => setProjectPendingDelete(null)}>
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-black/45 p-4"
|
||||
onClick={() => setProjectPendingDelete(null)}
|
||||
>
|
||||
<div
|
||||
className={cx("w-full max-w-md rounded-2xl border p-5 shadow-2xl", surfaceClass(isDark))}
|
||||
className={cx(
|
||||
"w-full max-w-md rounded-2xl border p-5 shadow-2xl",
|
||||
surfaceClass(isDark),
|
||||
)}
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
>
|
||||
<h2 className="text-lg font-semibold">Delete project?</h2>
|
||||
<p className={cx("mt-2 text-sm leading-relaxed", isDark ? "text-[#c9ced8]" : "text-[#545d6d]")}>
|
||||
This will permanently delete <span className="font-semibold">{projectPendingDelete.title}</span> from local storage.
|
||||
<p
|
||||
className={cx(
|
||||
"mt-2 text-sm leading-relaxed",
|
||||
isDark ? "text-[#c9ced8]" : "text-[#545d6d]",
|
||||
)}
|
||||
>
|
||||
This will permanently delete{" "}
|
||||
<span className="font-semibold">
|
||||
{projectPendingDelete.title}
|
||||
</span>{" "}
|
||||
from local storage.
|
||||
</p>
|
||||
<div className="mt-5 flex justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setProjectPendingDelete(null)}
|
||||
className={cx("rounded border px-3 py-1.5 text-sm font-semibold", subtleButtonClass(isDark))}
|
||||
className={cx(
|
||||
"rounded border px-3 py-1.5 text-sm font-semibold",
|
||||
subtleButtonClass(isDark),
|
||||
)}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
@@ -188,74 +252,162 @@ export default function HomePage() {
|
||||
isDark ? "bg-[#1b1d21] text-[#e8eaed]" : "bg-[#f5f6f8] text-[#1f2430]"
|
||||
}`}
|
||||
>
|
||||
<section className={cx("rounded-xl border p-4 sm:p-5", surfaceClass(isDark))}>
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<div>
|
||||
<p className={cx("text-[10px] uppercase tracking-[0.2em]", isDark ? "text-[#a8abb2]" : "text-[#6c7382]")}>pien.studio</p>
|
||||
<h1 className="text-2xl font-semibold">{t("home.projectHub")}</h1>
|
||||
<p className={cx("text-sm", isDark ? "text-[#b9bec8]" : "text-[#5f6672]")}>{t("home.createOpenManage")}</p>
|
||||
</div>
|
||||
<UiPreferences />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="mt-4 grid gap-3 sm:grid-cols-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleNewProject}
|
||||
className={cx("rounded border px-3 py-2 text-sm font-semibold", accentButtonClass())}
|
||||
<section
|
||||
className={cx("rounded-xl border p-4 sm:p-5", surfaceClass(isDark))}
|
||||
>
|
||||
{t("home.newProject")}
|
||||
</button>
|
||||
<button type="button" onClick={() => projectInputRef.current?.click()} className={cx("rounded border px-3 py-2 text-sm font-semibold", subtleButtonClass(isDark))}>
|
||||
{t("home.openProjectFile")}
|
||||
</button>
|
||||
<button type="button" onClick={() => imageInputRef.current?.click()} className={cx("rounded border px-3 py-2 text-sm font-semibold", subtleButtonClass(isDark))}>
|
||||
{t("home.openImage")}
|
||||
</button>
|
||||
<input ref={projectInputRef} type="file" accept=".json,.pien.json,application/json" className="hidden" onChange={handleImportProjectFile} />
|
||||
<input ref={imageInputRef} type="file" accept="image/*" className="hidden" onChange={handleOpenImage} />
|
||||
</section>
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<div>
|
||||
<p
|
||||
className={cx(
|
||||
"text-[10px] uppercase tracking-[0.2em]",
|
||||
isDark ? "text-[#a8abb2]" : "text-[#6c7382]",
|
||||
)}
|
||||
>
|
||||
pien.studio
|
||||
</p>
|
||||
<h1 className="text-2xl font-semibold">{t("home.projectHub")}</h1>
|
||||
<p
|
||||
className={cx(
|
||||
"text-sm",
|
||||
isDark ? "text-[#b9bec8]" : "text-[#5f6672]",
|
||||
)}
|
||||
>
|
||||
{t("home.createOpenManage")}
|
||||
</p>
|
||||
</div>
|
||||
<UiPreferences />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className={cx("mt-4 rounded-xl border p-4", surfaceClass(isDark))}>
|
||||
<h2 className={cx("mb-3 text-sm font-semibold uppercase tracking-wide", isDark ? "text-[#c5cad3]" : "text-[#6c7382]")}>{t("home.myProjects")}</h2>
|
||||
{projects.length === 0 ? <p className={cx("text-sm", isDark ? "text-[#aeb3bc]" : "text-[#5f6672]")}>{t("home.noProjectsYet")}</p> : null}
|
||||
<div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
|
||||
{projects.map((project) => (
|
||||
<article key={project.id} className={cx("rounded border p-3", mutedSurfaceClass(isDark))}>
|
||||
<p className={cx("truncate text-sm font-semibold", isDark ? "text-[#f3f5f8]" : "text-[#1f2430]")}>{project.title}</p>
|
||||
<p className={cx("mt-1 text-xs", isDark ? "text-[#aeb3bc]" : "text-[#5f6672]")}>{new Date(project.updatedAt).toLocaleString()}</p>
|
||||
<div className="mt-3 flex flex-wrap gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => openProject(project)}
|
||||
className={cx("rounded border px-2 py-1 text-xs font-semibold", accentButtonClass())}
|
||||
<section className="mt-4 grid gap-3 sm:grid-cols-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleNewProject}
|
||||
className={cx(
|
||||
"rounded border px-3 py-2 text-sm font-semibold",
|
||||
accentButtonClass(),
|
||||
)}
|
||||
>
|
||||
{t("home.newProject")}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => projectInputRef.current?.click()}
|
||||
className={cx(
|
||||
"rounded border px-3 py-2 text-sm font-semibold",
|
||||
subtleButtonClass(isDark),
|
||||
)}
|
||||
>
|
||||
{t("home.openProjectFile")}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => imageInputRef.current?.click()}
|
||||
className={cx(
|
||||
"rounded border px-3 py-2 text-sm font-semibold",
|
||||
subtleButtonClass(isDark),
|
||||
)}
|
||||
>
|
||||
{t("home.openImage")}
|
||||
</button>
|
||||
<input
|
||||
ref={projectInputRef}
|
||||
type="file"
|
||||
accept=".json,.pien.json,application/json"
|
||||
className="hidden"
|
||||
onChange={handleImportProjectFile}
|
||||
/>
|
||||
<input
|
||||
ref={imageInputRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
className="hidden"
|
||||
onChange={handleOpenImage}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section
|
||||
className={cx("mt-4 rounded-xl border p-4", surfaceClass(isDark))}
|
||||
>
|
||||
<h2
|
||||
className={cx(
|
||||
"mb-3 text-sm font-semibold uppercase tracking-wide",
|
||||
isDark ? "text-[#c5cad3]" : "text-[#6c7382]",
|
||||
)}
|
||||
>
|
||||
{t("home.myProjects")}
|
||||
</h2>
|
||||
{projects.length === 0 ? (
|
||||
<p
|
||||
className={cx(
|
||||
"text-sm",
|
||||
isDark ? "text-[#aeb3bc]" : "text-[#5f6672]",
|
||||
)}
|
||||
>
|
||||
{t("home.noProjectsYet")}
|
||||
</p>
|
||||
) : null}
|
||||
<div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
|
||||
{projects.map((project) => (
|
||||
<article
|
||||
key={project.id}
|
||||
className={cx("rounded border p-3", mutedSurfaceClass(isDark))}
|
||||
>
|
||||
<p
|
||||
className={cx(
|
||||
"truncate text-sm font-semibold",
|
||||
isDark ? "text-[#f3f5f8]" : "text-[#1f2430]",
|
||||
)}
|
||||
>
|
||||
{t("home.open")}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
void duplicateProject(project.id).then(refreshProjects);
|
||||
}}
|
||||
className={cx("rounded border px-2 py-1 text-xs font-semibold", subtleButtonClass(isDark))}
|
||||
{project.title}
|
||||
</p>
|
||||
<p
|
||||
className={cx(
|
||||
"mt-1 text-xs",
|
||||
isDark ? "text-[#aeb3bc]" : "text-[#5f6672]",
|
||||
)}
|
||||
>
|
||||
{t("home.duplicate")}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setProjectPendingDelete(project);
|
||||
}}
|
||||
className="rounded border border-red-400/30 bg-red-400/10 px-2 py-1 text-xs font-semibold text-red-200"
|
||||
>
|
||||
{t("home.delete")}
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
{new Date(project.updatedAt).toLocaleString()}
|
||||
</p>
|
||||
<div className="mt-3 flex flex-wrap gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => openProject(project)}
|
||||
className={cx(
|
||||
"rounded border px-2 py-1 text-xs font-semibold",
|
||||
accentButtonClass(),
|
||||
)}
|
||||
>
|
||||
{t("home.open")}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
void localProjectRepository
|
||||
.duplicateProject(project.id)
|
||||
.then(refreshProjects);
|
||||
}}
|
||||
className={cx(
|
||||
"rounded border px-2 py-1 text-xs font-semibold",
|
||||
subtleButtonClass(isDark),
|
||||
)}
|
||||
>
|
||||
{t("home.duplicate")}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setProjectPendingDelete(project);
|
||||
}}
|
||||
className="rounded border border-red-400/30 bg-red-400/10 px-2 py-1 text-xs font-semibold text-red-200"
|
||||
>
|
||||
{t("home.delete")}
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user