Revert "Merge pull request 'Complete Housekeeping migration and /ase cutover' (#52) from codex/housekeeping-complete into main"
This reverts commit488b6e57c4, reversing changes made tob506b4499a.
This commit is contained in:
Simo committed
1 parent
488b6e57c4
commit
b1ddda66ff
802 files changed
+61370
-76659
No files matched your search
@@ -0,0 +1,155 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useRef, useState } from "react";
|
||||
import { deleteFavicon, saveFavicon } from "@/actions/save-favicon";
|
||||
import { useConfirmDialog } from "@/components/admin/confirm-dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { FaviconGenerator } from "./favicon-generator";
|
||||
|
||||
export function FaviconForm({ currentUrl }: { currentUrl: string | null }) {
|
||||
const t = useTranslations("pages.admin.favicon");
|
||||
const { confirm, dialog: confirmDialog } = useConfirmDialog();
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
const [preview, setPreview] = useState<string | null>(currentUrl);
|
||||
const [message, setMessage] = useState<{
|
||||
type: "success" | "error";
|
||||
text: string;
|
||||
} | null>(null);
|
||||
const formRef = useRef<HTMLFormElement>(null);
|
||||
|
||||
async function handleUpload(formData: FormData) {
|
||||
setUploading(true);
|
||||
setMessage(null);
|
||||
const result = await saveFavicon(formData);
|
||||
setUploading(false);
|
||||
|
||||
if (result.success && result.url) {
|
||||
setPreview(result.url);
|
||||
setMessage({ type: "success", text: t("saved") });
|
||||
formRef.current?.reset();
|
||||
} else {
|
||||
setMessage({ type: "error", text: result.error ?? t("error") });
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete() {
|
||||
const ok = await confirm({
|
||||
title: t("delete"),
|
||||
description: t("confirmDelete"),
|
||||
confirmLabel: t("delete"),
|
||||
cancelLabel: t("cancel"),
|
||||
});
|
||||
if (!ok) return;
|
||||
setDeleting(true);
|
||||
setMessage(null);
|
||||
const result = await deleteFavicon();
|
||||
setDeleting(false);
|
||||
|
||||
if (result.success) {
|
||||
setPreview(null);
|
||||
setMessage({ type: "success", text: t("deleted") });
|
||||
} else {
|
||||
setMessage({ type: "error", text: result.error ?? t("error") });
|
||||
}
|
||||
}
|
||||
|
||||
async function handleGenerated(blob: Blob) {
|
||||
setUploading(true);
|
||||
setMessage(null);
|
||||
const file = new File([blob], "favicon.png", { type: "image/png" });
|
||||
const fd = new FormData();
|
||||
fd.append("file", file);
|
||||
const result = await saveFavicon(fd);
|
||||
setUploading(false);
|
||||
|
||||
if (result.success && result.url) {
|
||||
setPreview(result.url);
|
||||
setMessage({ type: "success", text: t("saved") });
|
||||
} else {
|
||||
setMessage({ type: "error", text: result.error ?? t("error") });
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
{confirmDialog}
|
||||
<div className="admin-card">
|
||||
<h3 className="text-sm font-extrabold text-[var(--admin-text)] mb-4">
|
||||
{t("uploadLabel")}
|
||||
</h3>
|
||||
{preview && (
|
||||
<div className="mb-6">
|
||||
<label
|
||||
htmlFor="favicon-current"
|
||||
className="block text-xs font-bold text-[var(--admin-text-muted)] uppercase tracking-wider mb-2"
|
||||
>
|
||||
{t("current")}
|
||||
</label>
|
||||
<div className="flex items-center gap-4">
|
||||
<Image
|
||||
id="favicon-current"
|
||||
src={preview}
|
||||
alt="Favicon preview"
|
||||
width={64}
|
||||
height={64}
|
||||
className="rounded-lg border-2 border-[var(--admin-border)] object-contain bg-[var(--admin-surface)]"
|
||||
unoptimized
|
||||
/>
|
||||
<div className="text-xs text-[var(--admin-text-muted)] break-all">
|
||||
{preview}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form action={handleUpload} ref={formRef}>
|
||||
<div className="mb-4">
|
||||
<input
|
||||
type="file"
|
||||
name="file"
|
||||
accept=".png,.jpg,.jpeg,.gif,.webp,.ico,.svg"
|
||||
required
|
||||
className="block w-full text-sm text-[var(--color-text-readable)] file:mr-3 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-[var(--admin-accent)] file:text-[var(--color-primary-foreground-readable)] cursor-pointer"
|
||||
/>
|
||||
<p className="mt-1 text-xs text-[var(--admin-text-muted)]">
|
||||
{t("uploadHint")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button type="submit" disabled={uploading} variant="default">
|
||||
{uploading ? t("uploading") : t("upload")}
|
||||
</Button>
|
||||
{preview && (
|
||||
<Button
|
||||
type="button"
|
||||
onClick={handleDelete}
|
||||
disabled={deleting}
|
||||
variant="destructive"
|
||||
>
|
||||
{deleting ? t("deleting") : t("delete")}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{message && (
|
||||
<div
|
||||
className={`mt-4 p-3 rounded-lg text-sm ${
|
||||
message.type === "success"
|
||||
? "bg-[var(--admin-success-subtle)] text-[var(--admin-success)] dark:text-[var(--admin-success)]"
|
||||
: "bg-[var(--admin-error-subtle)] text-[var(--admin-error)] dark:text-[var(--admin-error)]"
|
||||
}`}
|
||||
>
|
||||
{message.text}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<FaviconGenerator onSave={handleGenerated} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,209 @@
|
||||
"use client";
|
||||
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
const SIZE = 64;
|
||||
const HALF = SIZE / 2;
|
||||
|
||||
interface Props {
|
||||
onSave: (blob: Blob) => void;
|
||||
}
|
||||
|
||||
export function FaviconGenerator({ onSave }: Props) {
|
||||
const t = useTranslations("pages.admin.favicon.generator");
|
||||
const [bgColor, setBgColor] = useState("#6366f1");
|
||||
const [textColor, setTextColor] = useState("#ffffff");
|
||||
const [text, setText] = useState("A");
|
||||
const [rounded, setRounded] = useState(true);
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
|
||||
const render = useCallback(() => {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (!ctx) return;
|
||||
|
||||
canvas.width = SIZE;
|
||||
canvas.height = SIZE;
|
||||
|
||||
// Background
|
||||
ctx.clearRect(0, 0, SIZE, SIZE);
|
||||
ctx.fillStyle = bgColor;
|
||||
if (rounded) {
|
||||
const r = 12;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(r, 0);
|
||||
ctx.lineTo(SIZE - r, 0);
|
||||
ctx.quadraticCurveTo(SIZE, 0, SIZE, r);
|
||||
ctx.lineTo(SIZE, SIZE - r);
|
||||
ctx.quadraticCurveTo(SIZE, SIZE, SIZE - r, SIZE);
|
||||
ctx.lineTo(r, SIZE);
|
||||
ctx.quadraticCurveTo(0, SIZE, 0, SIZE - r);
|
||||
ctx.lineTo(0, r);
|
||||
ctx.quadraticCurveTo(0, 0, r, 0);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
} else {
|
||||
ctx.fillRect(0, 0, SIZE, SIZE);
|
||||
}
|
||||
|
||||
// Text
|
||||
const displayText = text.trim() || "?";
|
||||
const fontSize =
|
||||
displayText.length > 2 ? 28 : displayText.length > 1 ? 32 : 40;
|
||||
ctx.fillStyle = textColor;
|
||||
ctx.font = `bold ${fontSize}px Arial, sans-serif`;
|
||||
ctx.textAlign = "center";
|
||||
ctx.textBaseline = "middle";
|
||||
ctx.fillText(displayText, HALF, HALF + 1);
|
||||
}, [bgColor, textColor, text, rounded]);
|
||||
|
||||
useEffect(() => {
|
||||
render();
|
||||
}, [render]);
|
||||
|
||||
function handleSave() {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
canvas.toBlob((blob) => {
|
||||
if (blob) onSave(blob);
|
||||
}, "image/png");
|
||||
}
|
||||
|
||||
const swatches = [
|
||||
"#6366f1",
|
||||
"#3b82f6",
|
||||
"#06b6d4",
|
||||
"#10b981",
|
||||
"#f59e0b",
|
||||
"#ef4444",
|
||||
"#ec4899",
|
||||
"#8b5cf6",
|
||||
"#1e1b4b",
|
||||
"#1f2937",
|
||||
"#000000",
|
||||
"#ffffff",
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="admin-card">
|
||||
<h3 className="text-sm font-extrabold text-[var(--admin-text)] mb-4">
|
||||
{t("title")}
|
||||
</h3>
|
||||
|
||||
<div className="flex justify-center mb-6">
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
width={SIZE}
|
||||
height={SIZE}
|
||||
className="border-2 border-[var(--admin-border)] rounded-xl shadow-lg"
|
||||
style={{ width: 128, height: 128, imageRendering: "pixelated" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label
|
||||
htmlFor="favicon-text"
|
||||
className="block text-xs font-bold text-[var(--admin-text-muted)] uppercase tracking-wider mb-2"
|
||||
>
|
||||
{t("text")}
|
||||
</label>
|
||||
<input
|
||||
id="favicon-text"
|
||||
type="text"
|
||||
value={text}
|
||||
onChange={(e) => setText(e.target.value.slice(0, 4))}
|
||||
maxLength={4}
|
||||
className="w-full"
|
||||
placeholder="A"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="favicon-bgColor"
|
||||
className="block text-xs font-bold text-[var(--admin-text-muted)] uppercase tracking-wider mb-2"
|
||||
>
|
||||
{t("bgColor")}
|
||||
</label>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<input
|
||||
id="favicon-bgColor"
|
||||
type="color"
|
||||
value={bgColor}
|
||||
onChange={(e) => setBgColor(e.target.value)}
|
||||
className="w-10 h-10 rounded-lg cursor-pointer border border-[var(--admin-border)]"
|
||||
/>
|
||||
<span className="text-xs text-[var(--admin-text-muted)] font-mono">
|
||||
{bgColor}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{swatches.map((c) => (
|
||||
<button
|
||||
key={c}
|
||||
type="button"
|
||||
onClick={() => setBgColor(c)}
|
||||
className={`w-7 h-7 rounded-lg border-2 transition-all ${
|
||||
bgColor === c
|
||||
? "border-[var(--admin-accent)] scale-110"
|
||||
: "border-transparent"
|
||||
}`}
|
||||
style={{ backgroundColor: c }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="favicon-textColor"
|
||||
className="block text-xs font-bold text-[var(--admin-text-muted)] uppercase tracking-wider mb-2"
|
||||
>
|
||||
{t("textColor")}
|
||||
</label>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
id="favicon-textColor"
|
||||
type="color"
|
||||
value={textColor}
|
||||
onChange={(e) => setTextColor(e.target.value)}
|
||||
className="w-10 h-10 rounded-lg cursor-pointer border border-[var(--admin-border)]"
|
||||
/>
|
||||
<span className="text-xs text-[var(--admin-text-muted)] font-mono">
|
||||
{textColor}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="rounded"
|
||||
checked={rounded}
|
||||
onChange={(e) => setRounded(e.target.checked)}
|
||||
className="rounded"
|
||||
/>
|
||||
<label
|
||||
htmlFor="rounded"
|
||||
className="text-sm text-[var(--admin-text)] cursor-pointer"
|
||||
>
|
||||
{t("rounded")}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
onClick={handleSave}
|
||||
variant="default"
|
||||
className="w-full"
|
||||
>
|
||||
{t("save")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import { eq } from "drizzle-orm";
|
||||
import { redirect } from "next/navigation";
|
||||
import { db, WebsiteSetting } from "@/lib/db";
|
||||
import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
|
||||
import { FaviconForm } from "./favicon-form";
|
||||
|
||||
export default async function AdminFaviconPage() {
|
||||
const { session, permissions } = await getAdminContext();
|
||||
if (!canAccess(permissions, PERMS.SETTINGS_VIEW, session.user.rank)) {
|
||||
redirect("/admin");
|
||||
}
|
||||
|
||||
let faviconUrl: string | null = null;
|
||||
try {
|
||||
const [setting] = await db
|
||||
.select({ value: WebsiteSetting.value })
|
||||
.from(WebsiteSetting)
|
||||
.where(eq(WebsiteSetting.key, "cms_favicon"))
|
||||
.limit(1);
|
||||
faviconUrl = setting?.value ?? null;
|
||||
} catch {
|
||||
faviconUrl = null;
|
||||
}
|
||||
|
||||
return (
|
||||
<main>
|
||||
<FaviconForm currentUrl={faviconUrl} />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user