admin/rustycms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

RustyCMS: file-based headless CMS — API, Admin UI (content, types, assets), Docker/Caddy, image transform; only demo type and demo content in version control

Browse Source 
Made-with: Cursor
This commit is contained in:
Peter Meier
2026-03-12 14:21:49 +01:00
parent aad93d145f
commit 7795a238e1
278 changed files with 15551 additions and 4072 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
.dockerignore Normal file
View File

@@ -0,0 +1,7 @@
target/
.git/
admin-ui/
content/
.env*
*.md
.cursor/

13
.env.docker.example Normal file
View File

@@ -0,0 +1,13 @@
# Domains – beide müssen per DNS auf den Server zeigen
RUSTYCMS_API_DOMAIN=api.example.com
RUSTYCMS_ADMIN_DOMAIN=admin.example.com
# API Key für Schreib-Zugriff (POST/PUT/DELETE)
RUSTYCMS_API_KEY=change-me-to-something-secret
# Sprachen (erstes = Default)
RUSTYCMS_LOCALES=de,en
# Optionale Pfade zu Content/Schemas auf dem Host (Standard: ./content und ./types)
# RUSTYCMS_CONTENT_DIR=/home/user/mein-content/content
# RUSTYCMS_TYPES_DIR=/home/user/mein-content/types

13
.env.docker.local Normal file
View File

@@ -0,0 +1,13 @@
# Lokale Entwicklung – kein TLS, keine echten Domains
RUSTYCMS_API_DOMAIN=localhost
RUSTYCMS_ADMIN_DOMAIN=localhost
# API Key (lokal kann auch ein einfacher Wert reichen)
RUSTYCMS_API_KEY=local-dev-key
# Sprachen
RUSTYCMS_LOCALES=de,en
# Content und Schemas vom lokalen Repo
RUSTYCMS_CONTENT_DIR=./content
RUSTYCMS_TYPES_DIR=./types

7
.env.example
View File

@@ -16,3 +16,10 @@ RUSTYCMS_API_KEY=dein-geheimes-token
# Optional: Response cache for GET /api/content (TTL in seconds). 0 = off. Default: 60. # Optional: Response cache for GET /api/content (TTL in seconds). 0 = off. Default: 60.
# RUSTYCMS_CACHE_TTL_SECS=60 # RUSTYCMS_CACHE_TTL_SECS=60
# Optional: Public base URL of the API (e.g. https://api.example.com). Used to expand relative /api/assets/ paths in responses. Defaults to http://host:port.
# RUSTYCMS_BASE_URL=https://api.example.com
# Optional: Paths to types and content directories. Useful for keeping content in a separate repo.
# RUSTYCMS_TYPES_DIR=./types
# RUSTYCMS_CONTENT_DIR=./content

15
.gitignore vendored
View File

@@ -4,5 +4,18 @@ Cargo.lock
.DS_Store .DS_Store
*.db *.db
content.db content.db
content/
# Content: ignore all except one demo entry
content/*
!content/de/
content/de/*
!content/de/demo/
content/de/demo/*
!content/de/demo/demo-welcome.json5
# Types: ignore all except demo type
types/*
!types/demo.json5
.history .history
.cursor

25
.vscode/settings.json vendored
View File

@@ -62,6 +62,31 @@
"content/tag/*.json" "content/tag/*.json"
], ],
"url": "./schemas/tag.schema.json" "url": "./schemas/tag.schema.json"
},
{
"fileMatch": [
"content/calendar/*.json5",
"content/calendar/*.json",
"content/*/calendar/*.json5",
"content/*/calendar/*.json"
],
"url": "./schemas/calendar.schema.json"
},
{
"fileMatch": [
"content/calendar_item/*.json5",
"content/calendar_item/*.json",
"content/*/calendar_item/*.json5",
"content/*/calendar_item/*.json"
],
"url": "./schemas/calendar_item.schema.json"
},
{
"fileMatch": [
"content/*/translation_bundle/*.json5",
"content/*/translation_bundle/*.json"
],
"url": "./schemas/translation_bundle.schema.json"
} }
] ]
} }

14
@types/Contentful_Badges.ts
View File

@@ -1,14 +0,0 @@
import type { CF_ContentType } from "src/@types/Contentful_ContentType.enum";
import type { CF_ComponentListSkeleton } from "src/@types/Contentful_List";
export interface CF_ComponentBadges {
internal: string;
badges: CF_ComponentListSkeleton;
variants: "light" | "dark";
layout?: any;
}
export interface CF_ComponentBadgesSkeleton {
contentTypeId: CF_ContentType.badges;
fields: CF_ComponentBadges;
}

24
@types/Contentful_Campaign.ts
View File

@@ -1,24 +0,0 @@
import type { CF_ContentType } from "./Contentful_ContentType.enum";
import type { Asset } from "contentful";
export interface CF_Campaign {
campaignName: string;
urlPatter: string;
selector: string;
insertHtml:
| "afterbegin"
| "beforeend"
| "afterend"
| "beforebegin"
| "replace";
timeUntil?: string;
javascript?: string;
medias?: Asset[];
html?: string;
css?: string;
}
export interface CF_CampaignSkeleton {
contentTypeId: CF_ContentType.campaign;
fields: CF_Campaign;
}

13
@types/Contentful_Campaigns.ts
View File

@@ -1,13 +0,0 @@
import type { CF_ContentType } from "./Contentful_ContentType.enum";
import type { CF_CampaignSkeleton } from "./Contentful_Campaign";
export interface CF_Campaigns {
id: string;
campaigns: CF_CampaignSkeleton[];
enable: boolean;
}
export interface CF_CampaignsSkeleton {
contentTypeId: CF_ContentType.campaigns;
fields: CF_Campaigns;
}

15
@types/Contentful_CloudinaryImage.ts
View File

@@ -1,15 +0,0 @@
export interface CF_CloudinaryImage {
bytes: number;
created_at: string;
format: string;
height: number;
original_secure_url: string;
original_url: string;
public_id: string;
resource_type: string;
secure_url: string;
type: string;
url: string;
version: number;
width: number;
}

24
@types/Contentful_Content.ts
View File

@@ -1,24 +0,0 @@
import type { EntrySkeletonType } from "contentful";
export type rowJutify =
| "start"
| "end"
| "center"
| "between"
| "around"
| "evenly";
export type rowAlignItems = "start" | "end" | "center" | "baseline" | "stretch";
export interface CF_Content {
row1JustifyContent: rowJutify;
row1AlignItems: rowAlignItems;
row1Content: EntrySkeletonType<any>[];
row2JustifyContent: rowJutify;
row2AlignItems: rowAlignItems;
row2Content: EntrySkeletonType<any>[];
row3JustifyContent: rowJutify;
row3AlignItems: rowAlignItems;
row3Content: EntrySkeletonType<any>[];
}

34
@types/Contentful_ContentType.enum.ts
View File

@@ -1,34 +0,0 @@
export enum CF_ContentType {
"componentLinkList" = "componentLinkList",
"badges" = "badges",
"componentPostOverview" = "componentPostOverview",
"footer" = "footer",
"fullwidthBanner" = "fullwidthBanner",
"headline" = "headline",
"html" = "html",
"image" = "image",
"img" = "img",
"iframe" = "iframe",
"imgGallery" = "imageGallery",
"internalReference" = "internalComponent",
"link" = "link",
"list" = "list",
"markdown" = "markdown",
"navigation" = "navigation",
"page" = "page",
"pageConfig" = "pageConfig",
"picture" = "picture",
"post" = "post",
"postComponent" = "postComponent",
"quote" = "quoteComponent",
"richtext" = "richtext",
"row" = "row",
"rowLayout" = "rowLayout",
"tag" = "tag",
"youtubeVideo" = "youtubeVideo",
"campaign" = "campaign",
"campaigns" = "campaigns",
"topBanner" = "topBanner",
"textFragment" = "textFragment",
"componentSearchableText" = "componentSearchableText",
}

10
@types/Contentful_Footer.ts
View File

@@ -1,10 +0,0 @@
import type { CF_ContentType } from "src/@types/Contentful_ContentType.enum";
import type { CF_Content } from "./Contentful_Content";
export interface CF_Footer extends CF_Content {
id : string;
}
export type CF_FooterSkeleton = {
contentTypeId: CF_ContentType.footer
fields: CF_Footer
}

24
@types/Contentful_FullwidthBanner.ts
View File

@@ -1,24 +0,0 @@
import type { CF_ComponentImgSkeleton } from "src/@types/Contentful_Img";
import type { CF_CloudinaryImage } from "src/@types/Contentful_CloudinaryImage";
import type { CF_ContentType } from "src/@types/Contentful_ContentType.enum";
export enum CF_FullwidthBannerVariant {
"dark"= "dark",
"light" = "light"
}
export interface CF_FullwidthBanner {
name: string,
variant : CF_FullwidthBannerVariant,
headline : string,
subheadline: string,
text : string,
image: CF_CloudinaryImage[];
img: CF_ComponentImgSkeleton;
}
export type CF_FullwidthBannerSkeleton = {
contentTypeId: CF_ContentType.fullwidthBanner
fields: CF_FullwidthBanner
}

29
@types/Contentful_Grid.ts
View File

@@ -1,29 +0,0 @@
import type { EntrySkeletonType } from "contentful";
import type { CF_ContentType } from "src/@types/Contentful_ContentType.enum";
export type CF_justfyContent = "start" | "end" | "center" | "between" | "around" | "evenly";
export type CF_alignItems = "start" | "end" | "center" | "baseline" | "stretch"
export interface CF_Column_Alignment {
justifyContent: CF_justfyContent,
alignItems: CF_alignItems
}
export interface CF_Column_Layout<T> {
layoutMobile: T
layoutTablet: T
layoutDesktop: T
}
export type CF_Row_1_Column_Layout = "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12";
export interface CF_Row {
alignment: EntrySkeletonType<CF_Column_Alignment>
layout: EntrySkeletonType<CF_Column_Layout<CF_Row_1_Column_Layout>>
content: EntrySkeletonType<any>[]
}
export interface CF_RowSkeleton {
contentTypeId: CF_ContentType.row
fields: CF_Row
}

33
@types/Contentful_Headline.ts
View File

@@ -1,33 +0,0 @@
import type { CF_ContentType } from "src/@types/Contentful_ContentType.enum";
import type { CF_ComponentLayout } from "src/@types/Contentful_Layout";
export type CF_Component_Headline_Align =
| "left"
| "center"
| "right"
export type CF_Component_Headline_Tag =
| "h1"
| "h2"
| "h3"
| "h4"
| "h5"
| "h6"
export type CF_alignTextClasses =
| "text-left"
| "text-center"
| "text-right"
export interface CF_ComponentHeadline {
internal: string;
text: string;
tag: CF_Component_Headline_Tag,
layout: CF_ComponentLayout
align?: CF_Component_Headline_Align
}
export interface CF_ComponentHeadlineSkeleton {
contentTypeId: CF_ContentType.headline
fields: CF_ComponentHeadline
}

13
@types/Contentful_Html.ts
View File

@@ -1,13 +0,0 @@
import type { CF_ContentType } from "./Contentful_ContentType.enum";
import type { CF_ComponentLayout } from "./Contentful_Layout";
export interface CF_HTML {
id: string;
html: string;
layout: CF_ComponentLayout;
}
export type CF_HTMLSkeleton = {
contentTypeId: CF_ContentType.html;
fields: CF_HTML;
};

16
@types/Contentful_Iframe.ts
View File

@@ -1,16 +0,0 @@
import type { CF_ContentType } from "./Contentful_ContentType.enum";
import type { CF_ComponentImgSkeleton } from "./Contentful_Img";
import type { CF_ComponentLayout } from "./Contentful_Layout";
export interface CF_ComponentIframe {
name: string;
content: string;
iframe: string;
overlayImage?: CF_ComponentImgSkeleton;
layout: CF_ComponentLayout;
}
export interface CF_ComponentIframeSkeleton {
contentTypeId: CF_ContentType.iframe;
fields: CF_ComponentIframe;
}

17
@types/Contentful_Image.ts
View File

@@ -1,17 +0,0 @@
import type { CF_ContentType } from "./Contentful_ContentType.enum";
import type { CF_ComponentImgSkeleton } from "./Contentful_Img";
import type { CF_ComponentLayout } from "./Contentful_Layout";
export interface CF_ComponentImage {
name: string;
image: CF_ComponentImgSkeleton;
caption: string;
layout: CF_ComponentLayout;
maxWidth?: number;
aspectRatio?: number;
}
export interface CF_ComponentImageSkeleton {
contentTypeId: CF_ContentType.image;
fields: CF_ComponentImage;
}

15
@types/Contentful_ImageGallery.ts
View File

@@ -1,15 +0,0 @@
import type { CF_ContentType } from "./Contentful_ContentType.enum";
import type { CF_ComponentImgSkeleton } from "./Contentful_Img";
import type { CF_ComponentLayout } from "./Contentful_Layout";
export interface CF_ImageGallery {
name: string;
images: CF_ComponentImgSkeleton[];
layout: CF_ComponentLayout;
description?: string;
}
export interface CF_ImageGallerySkeleton {
contentTypeId: CF_ContentType.imgGallery
fields:CF_ImageGallery
}

26
@types/Contentful_Img.ts
View File

@@ -1,26 +0,0 @@
import type { CF_ContentType } from "./Contentful_ContentType.enum";
export interface CF_ComponentImgDetails {
size: number,
image: {
width: number,
height: number
}
}
export interface CF_ComponentImg {
title: string;
description: string;
file: {
url: string;
details: CF_ComponentImgDetails;
fileName: string;
contentType: string;
}
}
export interface CF_ComponentImgSkeleton {
contentTypeId: CF_ContentType.img
fields: CF_ComponentImg
}

14
@types/Contentful_InternalReference.ts
View File

@@ -1,14 +0,0 @@
import type { CF_ContentType } from "src/@types/Contentful_ContentType.enum";
import type { CF_ComponentLayout } from "src/@types/Contentful_Layout";
import type { EntryFieldTypes } from "contentful";
export interface CF_internalReference {
data: EntryFieldTypes.Object,
reference: string,
layout: CF_ComponentLayout
}
export type CF_internalReferenceSkeleton = {
contentTypeId: CF_ContentType.internalReference
fields: CF_internalReference
}

100
@types/Contentful_Layout.ts
View File

@@ -1,100 +0,0 @@
import type { CF_ContentType } from "src/@types/Contentful_ContentType.enum";
export type CF_Component_Layout_Width =
| "1"
| "2"
| "3"
| "4"
| "5"
| "6"
| "7"
| "8"
| "9"
| "10"
| "11"
| "12";
export type CF_widths_mobile =
| "w-full"
| "w-1/12"
| "w-2/12"
| "w-3/12"
| "w-4/12"
| "w-5/12"
| "w-6/12"
| "w-7/12"
| "w-8/12"
| "w-9/12"
| "w-10/12"
| "w-11/12";
export type CF_widths_tablet =
| ""
| "md:w-full"
| "md:w-1/12"
| "md:w-2/12"
| "md:w-3/12"
| "md:w-4/12"
| "md:w-5/12"
| "md:w-6/12"
| "md:w-7/12"
| "md:w-8/12"
| "md:w-9/12"
| "md:w-10/12"
| "md:w-11/12";
export type CF_widths_desktop =
| ""
| "lg:w-full"
| "lg:w-1/12"
| "lg:w-2/12"
| "lg:w-3/12"
| "lg:w-4/12"
| "lg:w-5/12"
| "lg:w-6/12"
| "lg:w-7/12"
| "lg:w-8/12"
| "lg:w-9/12"
| "lg:w-10/12"
| "lg:w-11/12";
export type CF_Component_Layout_Space =
| 0
| .5
| 1
| 1.5
| 2
export type CF_Component_Space =
| ""
| "mb-[0.5rem]"
| "mb-[1rem]"
| "mb-[1.5rem]"
| "mb-[2rem]"
export type CF_justfyContent =
| "justify-start"
| "justify-end"
| "justify-center"
| "justify-between"
| "justify-around"
| "justify-evenly";
export type CF_alignItems =
| "items-start"
| "items-end"
| "items-center"
| "items-baseline"
| "items-stretch";
export interface CF_ComponentLayout {
mobile: CF_Component_Layout_Width;
tablet?: CF_Component_Layout_Width;
desktop?: CF_Component_Layout_Width;
spaceBottom?: CF_Component_Layout_Space
}
export interface CF_ComponentLayoutSkeleton {
contentTypeId: CF_ContentType.rowLayout
fields: CF_ComponentLayout
}

23
@types/Contentful_Link.ts
View File

@@ -1,23 +0,0 @@
import type { CF_ContentType } from "src/@types/Contentful_ContentType.enum";
export interface CF_Link {
name: string;
internal: string;
linkName: string;
icon?: string;
color?: string;
url: string;
newTab?: boolean;
external?: boolean;
description?: string;
alt?: string;
showText?: boolean;
author: string;
date: string;
source: string;
}
export interface CF_LinkSkeleton {
contentTypeId: CF_ContentType.link;
fields: CF_Link;
}

12
@types/Contentful_Link_List.ts
View File

@@ -1,12 +0,0 @@
import type { CF_ContentType } from "./Contentful_ContentType.enum";
import type { CF_LinkSkeleton } from "./Contentful_Link";
export interface CF_Link_List {
headline: string;
links: CF_LinkSkeleton[];
}
export type CF_LinkListSkeleton = {
contentTypeId: CF_ContentType.componentLinkList;
fields: CF_Link_List;
};

11
@types/Contentful_List.ts
View File

@@ -1,11 +0,0 @@
import type { CF_ContentType } from "src/@types/Contentful_ContentType.enum";
export interface CF_ComponentList {
internal: string;
item: string[];
}
export interface CF_ComponentListSkeleton {
contentTypeId: CF_ContentType.list
fields: CF_ComponentList
}

15
@types/Contentful_Markdown.ts
View File

@@ -1,15 +0,0 @@
import type { CF_ContentType } from "src/@types/Contentful_ContentType.enum";
import type { CF_ComponentLayout } from "src/@types/Contentful_Layout";
import type { TextAlignment } from "src/@types/TextAlignment";
export interface CF_Markdown {
name: string,
content: string,
layout: CF_ComponentLayout
alignment: TextAlignment
}
export type CF_MarkdownSkeleton = {
contentTypeId: CF_ContentType.markdown
fields: CF_Markdown
}

17
@types/Contentful_Names.enum.ts
View File

@@ -1,17 +0,0 @@
export enum CF_Navigation_Keys {
"header" = "navigation-header",
"socialMedia" = "navigation-social-media",
"footer" = "navigation-footer",
}
export enum CF_PageConfigKey {
"pageConfig" = "page-config",
}
export enum CF_Footer_Keys {
"main" = "main",
}
export enum CF_Campaigns_Keys {
"campaigns" = "campaigns",
}

15
@types/Contentful_Navigation.ts
View File

@@ -1,15 +0,0 @@
import type { EntrySkeletonType } from "contentful";
import type { CF_Link } from "src/lib/contentful";
import type { CF_ContentType } from "src/@types/Contentful_ContentType.enum";
import type { CF_Page } from "./Contentful_Page";
export interface CF_Navigation {
name: string,
internal: string,
links: EntrySkeletonType<CF_Link, CF_Page>[]
}
export type CF_NavigationSkeleton = {
contentTypeId: CF_ContentType.navigation
fields: CF_Navigation
}

19
@types/Contentful_Page.ts
View File

@@ -1,19 +0,0 @@
import type { CF_ContentType } from "src/@types/Contentful_ContentType.enum";
import type { CF_FullwidthBannerSkeleton } from "src/@types/Contentful_FullwidthBanner";
import type { CF_Content } from "./Contentful_Content";
import type { CF_SEO } from "./Contentful_SEO";
export interface CF_Page extends CF_Content, CF_SEO {
slug: string;
name: string;
linkName: string;
icon?: string;
headline: string;
subheadline: string;
topFullwidthBanner: CF_FullwidthBannerSkeleton;
}
export type CF_PageSkeleton = {
contentTypeId: CF_ContentType.page;
fields: CF_Page;
};

18
@types/Contentful_PageConfig.ts
View File

@@ -1,18 +0,0 @@
import type { CF_ContentType } from "src/@types/Contentful_ContentType.enum";
import type { CF_ComponentImgSkeleton } from "./Contentful_Img";
export interface CF_PageConfig {
logo: CF_ComponentImgSkeleton;
footerText1: string;
seoTitle: string;
seoDescription: string;
blogTagPageHeadline: string;
blogPostsPageHeadline: string;
blogPostsPageSubHeadline: string;
website: string;
}
export type CF_PageConfigSkeleton = {
contentTypeId: CF_ContentType.pageConfig;
fields: CF_PageConfig;
};

7
@types/Contentful_Page_Seo.ts
View File

@@ -1,7 +0,0 @@
export interface CF_Page_Seo {
name: "page-about-seo",
title: "about",
description: "about",
metaRobotsIndex: "index",
metaRobotsFollow: "follow"
}

57
@types/Contentful_Picture.ts
View File

@@ -1,57 +0,0 @@
import type { EntryFieldTypes } from "contentful";
import type { CF_ContentType } from "src/@types/Contentful_ContentType.enum";
import type { CF_CloudinaryImage } from "src/@types/Contentful_CloudinaryImage";
export type CF_PictureWidths = 400 | 800 | 1200 | 1400
export type CF_PictureFormats = "aviv" | "jpg" | "png" | "webp"
export type CF_PictureFit = "contain" | "cover" | "fill" | "inside" | "outside"
export type CF_PicturePosition = "top"
| "right top"
| "right"
| "right bottom"
| "bottom"
| "left bottom"
| "left"
| "left top"
| "north"
| "northeast"
| "east"
| "southeast"
| "south"
| "southwest"
| "west"
| "northwest"
| "center"
| "centre"
| "cover"
| "entropy"
| "attention"
export type CF_PictureAspectRatio = 'original'
| '32:9'
| '16:9'
| '5:4'
| '4:3'
| '3:2'
| '1:1'
| '2:3'
| '3:4'
| '4:5'
export interface CF_Picture {
name: EntryFieldTypes.Text;
image: CF_CloudinaryImage[];
alt?: EntryFieldTypes.Text;
widths: Array<CF_PictureWidths>;
aspectRatio: CF_PictureAspectRatio;
formats: CF_PictureFormats;
fit: CF_PictureFit;
position: CF_PicturePosition;
layout?: any;
}
export type CF_PictureSkeleton = {
contentTypeId: CF_ContentType.picture
fields: CF_Picture
}

27
@types/Contentful_Post.ts
View File

@@ -1,27 +0,0 @@
import type { CF_ContentType } from "src/@types/Contentful_ContentType.enum";
import type { CF_ComponentImgSkeleton } from "./Contentful_Img";
import type { CF_Content } from "./Contentful_Content";
import type { CF_SEO } from "./Contentful_SEO";
import type { CF_TagSkeleton } from "./Contentful_Tag";
export interface CF_Post extends CF_Content, CF_SEO {
postImage: CF_ComponentImgSkeleton;
postTag: CF_TagSkeleton[];
slug: string;
linkName: string;
icon?: string;
headline: string;
important: boolean;
created: string;
date?: string;
subheadline: string;
excerpt: string;
content: string;
/** Show comment section (default: true) */
showCommentSection?: boolean;
}
export type CF_PostEntrySkeleton = {
contentTypeId: CF_ContentType.post;
fields: CF_Post;
};

14
@types/Contentful_Post_Component.ts
View File

@@ -1,14 +0,0 @@
import type { CF_ContentType } from "./Contentful_ContentType.enum";
import type { CF_ComponentLayout } from "./Contentful_Layout";
import type { CF_PostEntrySkeleton } from "./Contentful_Post";
export interface CF_PostComponent {
id: string;
post: CF_PostEntrySkeleton;
layout: CF_ComponentLayout;
}
export interface CF_PostComponentSkeleton {
contentTypeId: CF_ContentType.postComponent;
fields: CF_PostComponent;
}

24
@types/Contentful_Post_Overview.ts
View File

@@ -1,24 +0,0 @@
import type { CF_ContentType } from "src/@types/Contentful_ContentType.enum";
import type { CF_Content } from "./Contentful_Content";
import type { CF_SEO } from "src/@types/Contentful_SEO";
import type { CF_ComponentLayout } from "src/@types/Contentful_Layout";
import type { CF_PostEntrySkeleton } from "src/@types/Contentful_Post";
import type { CF_TagSkeleton } from "src/@types/Contentful_Tag";
import type { Document } from "@contentful/rich-text-types";
export interface CF_Post_Overview extends CF_Content, CF_SEO {
id: string;
headline: string;
text: Document;
layout: CF_ComponentLayout;
allPosts: boolean;
filterByTag: CF_TagSkeleton[];
posts: CF_PostEntrySkeleton[];
numberItems: number;
design?: "cards" | "list";
}
export type CF_Post_OverviewEntrySkeleton = {
contentTypeId: CF_ContentType.post;
fields: CF_Post_Overview;
};

14
@types/Contentful_Quote.ts
View File

@@ -1,14 +0,0 @@
import type { CF_ContentType } from "src/@types/Contentful_ContentType.enum";
import type { CF_ComponentLayout } from "src/@types/Contentful_Layout";
export interface CF_Quote {
quote: string,
author: string,
variant: 'left' | 'right',
layout: CF_ComponentLayout
}
export type CF_QuoteSkeleton = {
contentTypeId: CF_ContentType.quote
fields: CF_Quote
}

11
@types/Contentful_Richtext.ts
View File

@@ -1,11 +0,0 @@
import type { CF_ContentType } from "src/@types/Contentful_ContentType.enum";
export interface CF_ComponentRichtext {
content?: Document;
layout?: any;
}
export interface CF_ComponentRichtextSkeleton {
contentTypeId: CF_ContentType.richtext
fields: CF_ComponentRichtext
}

8
@types/Contentful_SEO.ts
View File

@@ -1,8 +0,0 @@
export type metaRobots = "index, follow" | "noindex, follow" | "index, nofollow" | "noindex, nofollow";
export interface CF_SEO {
seoTitle : string,
seoMetaRobots : metaRobots,
seoDescription : string,
}

18
@types/Contentful_SearchableText.ts
View File

@@ -1,18 +0,0 @@
import type { CF_ContentType } from "./Contentful_ContentType.enum";
import type { CF_ComponentLayout } from "./Contentful_Layout";
import type { CF_TextFragmentSkeleton } from "./Contentful_TextFragment";
import type { CF_TagSkeleton } from "./Contentful_Tag";
export interface CF_ComponentSearchableText {
id: string;
tagWhitelist?: CF_TagSkeleton[];
textFragments: CF_TextFragmentSkeleton[];
title?: string;
description?: string;
layout: CF_ComponentLayout;
}
export interface CF_ComponentSearchableTextSkeleton {
contentTypeId: CF_ContentType.componentSearchableText;
fields: CF_ComponentSearchableText;
}

6
@types/Contentful_SkeletonTypes.ts
View File

@@ -1,6 +0,0 @@
import type { CF_PostEntrySkeleton } from "src/@types/Contentful_Post";
import type { CF_NavigationSkeleton } from "src/@types/Contentful_Navigation";
import type { CF_PageSkeleton } from "src/@types/Contentful_Page";
import type { CF_PageConfigSkeleton } from "src/@types/Contentful_PageConfig";
export type CF_SkeletonTypes = CF_PostEntrySkeleton | CF_NavigationSkeleton | CF_PageSkeleton | CF_PageConfigSkeleton;

11
@types/Contentful_Tag.ts
View File

@@ -1,11 +0,0 @@
import type { CF_ContentType } from "./Contentful_ContentType.enum";
export interface CF_Tag {
name: string;
icon: string;
}
export interface CF_TagSkeleton {
contentTypeId: CF_ContentType.tag;
fields: CF_Tag;
}

14
@types/Contentful_TextFragment.ts
View File

@@ -1,14 +0,0 @@
import type { CF_ContentType } from "./Contentful_ContentType.enum";
import type { CF_TagSkeleton } from "./Contentful_Tag";
export interface CF_TextFragment {
id: string;
tags?: CF_TagSkeleton[];
title: string;
text: string;
}
export interface CF_TextFragmentSkeleton {
contentTypeId: CF_ContentType.textFragment;
fields: CF_TextFragment;
}

11
@types/Contentful_TopBanner.ts
View File

@@ -1,11 +0,0 @@
import type { CF_ContentType } from "src/@types/Contentful_ContentType.enum";
export interface CF_TopBanner {
id: string;
text: string;
}
export type CF_TopBannerSkeleton = {
contentTypeId: CF_ContentType.topBanner;
fields: CF_TopBanner;
};

16
@types/Contentful_YoutubeVideo.ts
View File

@@ -1,16 +0,0 @@
import type { CF_ContentType } from "./Contentful_ContentType.enum";
import type { CF_ComponentLayout } from "./Contentful_Layout";
export interface CF_YoutubeVideo {
id: string;
youtubeId: string;
params?: string;
title?: string;
description?: string;
layout: CF_ComponentLayout;
}
export interface CF_ComponentYoutubeVideoSkeleton {
contentTypeId: CF_ContentType.youtubeVideo;
fields: CF_YoutubeVideo;
}

91
@types/SeoProps.ts
View File

@@ -1,91 +0,0 @@
export type TwitterCardType =
| "summary"
| "summary_large_image"
| "app"
| "player";
// Link interface matching astro-seo's Link (which extends HTMLLinkElement)
// href must be string (not URL) to match astro-seo's expectations
export interface Link {
rel?: string;
href?: string; // Only string, not URL
hreflang?: string;
media?: string;
type?: string;
sizes?: string;
prefetch?: boolean;
crossorigin?: string;
as?: string;
[key: string]: any;
}
export interface Meta {
property?: string;
name?: string;
content?: string;
httpEquiv?: string;
charset?: string;
[key: string]: any;
}
export interface SeoProperties {
title?: string;
titleTemplate?: string;
titleDefault?: string;
charset?: string;
description?: string;
canonical?: URL | string;
nofollow?: boolean;
noindex?: boolean;
languageAlternates?: {
href: URL | string;
hrefLang: string;
}[];
openGraph?: {
basic: {
title: string;
type: string;
image: string;
url?: URL | string;
};
optional?: {
audio?: string;
description?: string;
determiner?: string;
locale?: string;
localeAlternate?: string[];
siteName?: string;
video?: string;
};
image?: {
url?: URL | string;
secureUrl?: URL | string;
type?: string;
width?: number;
height?: number;
alt?: string;
};
article?: {
publishedTime?: string;
modifiedTime?: string;
expirationTime?: string;
authors?: string[];
section?: string;
tags?: string[];
};
};
twitter?: {
card?: TwitterCardType;
site?: string;
creator?: string;
title?: string;
description?: string;
image?: URL | string;
imageAlt?: string;
};
extend?: {
link?: Partial<Link>[];
meta?: Partial<Meta>[];
};
surpressWarnings?: boolean;
}

6
@types/TextAlignment.ts
View File

@@ -1,6 +0,0 @@
export type TextAlignment = 'left' | 'center' | 'right';
export enum TextAlignmentClasses {
'left' = 'text-left',
'center' = 'text-center',
'right' = 'text-right'
}

6
@types/astro-imagetools.d.ts vendored
View File

@@ -1,6 +0,0 @@
declare module "astro-imagetools/api" {
export function renderImg(
options: any
): Promise<{ link: string; style: string; img: string } | null>;
export function importImage(src: string): Promise<string | null>;
}

118
CLAUDE.md Normal file
View File

@@ -0,0 +1,118 @@
# RustyCMS – AI Context
> **Für AI-Tools**: Diese Datei (CLAUDE.md) wird von Claude Code gelesen.
> Cursor liest `.cursor/rules/project.mdc`.
> Beide Dateien haben identischen Inhalt — beim Ändern bitte **beide** aktualisieren.
---
## Projektstruktur
```
rustycms/
├── src/ # Rust API
│ ├── api/
│ │ ├── handlers.rs # AppState + alle Content-Handler
│ │ ├── response.rs # format_references, expand/collapse_asset_urls
│ │ ├── assets.rs # Asset-Endpoints (Upload, Serve, Delete, Folders)
│ │ └── routes.rs # Axum-Router
│ ├── schema/
│ │ └── validator.rs # normalize_reference_arrays (single + array refs)
│ └── store/ # FileStore / SqliteStore
├── types/ # Schema-Definitionen (*.json5)
├── content/ # Inhalte als JSON5-Dateien
│ └── assets/ # Bild-Assets (mit Unterordnern)
└── admin-ui/ # Next.js Admin UI (Port 3001)
├── src/components/ # React-Komponenten
├── src/lib/api.ts # API-Client
└── messages/ # i18n (en.json, de.json)
```
## Dev starten
```bash
./dev.sh # API (Port 3000) + Admin UI (Port 3001)
cd admin-ui && npm run dev # nur Admin UI
cargo run # nur API
```
## Konfiguration
Alle Optionen per Env-Variable (`.env.example` als Vorlage) oder CLI-Flag:
| Env-Variable | CLI-Flag | Default | Zweck |
|---|---|---|---|
| `RUSTYCMS_TYPES_DIR` | `--types-dir` | `./types` | Schema-Definitionen |
| `RUSTYCMS_CONTENT_DIR` | `--content-dir` | `./content` | Content-Dateien |
| `RUSTYCMS_BASE_URL` | — | `http://host:port` | Öffentliche API-URL (für Asset-URLs) |
| `RUSTYCMS_API_KEY` | — | unset | Auth für POST/PUT/DELETE |
| `RUSTYCMS_LOCALES` | — | unset | z.B. `de,en` (erstes = Default) |
| `RUSTYCMS_STORE` | — | `file` | `file` oder `sqlite` |
| `RUSTYCMS_CORS_ORIGIN` | — | `*` | Erlaubte CORS-Origin |
| `RUSTYCMS_CACHE_TTL_SECS` | — | `60` | Response-Cache TTL (0 = aus) |
## Asset-URL-Strategie
Assets werden immer mit **relativem Pfad** auf Disk gespeichert:
```
src: "/api/assets/ordner/datei.jpg"
```
Die API expandiert beim Ausliefern automatisch abhängig vom Kontext:
- **GET mit `_resolve`** (Frontend-Consumer): relativ → `https://api.example.com/api/assets/...`
- **GET ohne `_resolve`** (Admin UI bearbeitet): Pfad bleibt relativ
- **POST/PUT** (Speichern): absolute URLs werden vor dem Schreiben kollabiert
Implementierung: `src/api/response.rs` → `expand_asset_urls()` / `collapse_asset_urls()`
## Collection-Hierarchie (wichtig!)
| Collection | Zweck | Pflichtfelder |
|---|---|---|
| `img` | Rohes Bild-Asset | `src` (relativer Pfad), `description` |
| `image` | Layout-Komponente | `name`, `img` (Referenz auf `img`-Collection) |
**Regel:** `postImage` → referenziert `img` direkt. `row1Content` / `row2Content` etc. → erwarten `image`-Einträge, **nicht** `img`.
Workflow beim Hinzufügen eines Bildes zu einer Content-Row:
1. `img`-Eintrag erstellen (`src: "/api/assets/..."`)
2. `image`-Eintrag erstellen (referenziert den `img`-Eintrag)
3. `image`-Slug in `rowXContent` des Posts eintragen
## Referenz-Handling
### ReferenceOrInlineField (Admin UI)
- `value` ist String → Reference-Modus (Slug-Picker)
- `value` ist Objekt ohne `_slug` → Inline-Modus (Felder direkt eingeben)
- `value` ist Objekt mit `_slug` → aufgelöste Referenz vom API → wird automatisch zu Reference-Modus normalisiert
Normalisierung: `admin-ui/src/components/ReferenceOrInlineField.tsx` via `normalizedValue` memo.
### Normalisierung beim Schreiben (Rust)
`validator::normalize_reference_arrays()` konvertiert vor dem Speichern:
- Einzelne `reference`/`referenceOrInline`-Felder: `{_slug: "foo", ...}` → `"foo"`
- Array-Items: gleiche Normalisierung per Element
- Aufgerufen in `create_entry` und `update_entry`
## Admin UI Konventionen
- **i18n**: next-intl, Cookie-basiert. Neue Keys immer in **beiden** Dateien eintragen: `admin-ui/messages/en.json` + `messages/de.json`
- **Tailwind v4**: `@plugin "tailwindcss-animate"` (nicht `@import`)
- **Kein Dark Mode**: `@media (prefers-color-scheme: dark)` wurde entfernt, keine `dark:`-Klassen
- **Scroll**: `html, body { height: 100%; overflow: hidden }` — Sidebar scrollt unabhängig von der Seite
- **Neue Komponente**: immer prüfen ob Übersetzungs-Namespace in beiden Message-Dateien vorhanden
## Axum Routing
Literale Routen haben Vorrang vor Wildcard-Routen — Reihenfolge egal, Axum löst korrekt auf:
```rust
.route("/api/assets/folders", get(...).post(...)) // matcht vor:
.route("/api/assets/*path", get(...).delete(...))
```
## Rust-spezifisch
- `clap` braucht Feature `"env"` für Env-Var-Support bei CLI-Args
- `AppState` in `src/api/handlers.rs` — alle neuen geteilten Ressourcen hier hinzufügen
- Hot-Reload: Änderungen in `types/` werden automatisch geladen (kein Neustart nötig)
- Cache wird bei Schreib-Operationen invalidiert (`cache.invalidate_collection()`)

7
Caddyfile Normal file
View File

@@ -0,0 +1,7 @@
{$RUSTYCMS_API_DOMAIN} {
reverse_proxy rustycms:3000
}
{$RUSTYCMS_ADMIN_DOMAIN} {
reverse_proxy admin-ui:3001
}

5
Cargo.toml
View File

@@ -10,7 +10,7 @@ name = "export-json-schema"
path = "src/bin/export_json_schema.rs" path = "src/bin/export_json_schema.rs"
[dependencies] [dependencies]
axum = "0.7" axum = { version = "0.7", features = ["multipart"] }
tokio = { version = "1", features = ["full"] } tokio = { version = "1", features = ["full"] }
serde = { version = "1", features = ["derive"] } serde = { version = "1", features = ["derive"] }
serde_json = "1" serde_json = "1"
@@ -21,7 +21,7 @@ tracing = "0.1"
tracing-subscriber = { version = "0.3", features = ["env-filter"] } tracing-subscriber = { version = "0.3", features = ["env-filter"] }
indexmap = { version = "2", features = ["serde"] } indexmap = { version = "2", features = ["serde"] }
anyhow = "1" anyhow = "1"
clap = { version = "4", features = ["derive"] } clap = { version = "4", features = ["derive", "env"] }
regex = "1" regex = "1"
notify = "6" notify = "6"
async-trait = "0.1" async-trait = "0.1"
@@ -29,3 +29,4 @@ dotenvy = "0.15"
sqlx = { version = "0.8", features = ["runtime-tokio", "sqlite"] } sqlx = { version = "0.8", features = ["runtime-tokio", "sqlite"] }
reqwest = { version = "0.12", default-features = false, features = ["rustls-tls"] } reqwest = { version = "0.12", default-features = false, features = ["rustls-tls"] }
image = "0.25" image = "0.25"
webpx = { version = "0.1", default-features = false, features = ["encode", "decode"] }

17
Dockerfile Normal file
View File

@@ -0,0 +1,17 @@
# Stage 1: Build
FROM rust:1.93-slim AS builder
WORKDIR /app
# Cache dependencies
COPY Cargo.toml Cargo.lock ./
RUN mkdir -p src/bin && echo "fn main() {}" > src/main.rs && echo "fn main() {}" > src/bin/export_json_schema.rs && cargo build --release && rm -rf src
# Build actual binary
COPY src ./src
RUN touch src/main.rs && cargo build --release
# Stage 2: Minimal runtime image
FROM debian:bookworm-slim
RUN apt-get update && apt-get install -y ca-certificates && rm -rf /var/lib/apt/lists/*
COPY --from=builder /app/target/release/rustycms /usr/local/bin/rustycms
WORKDIR /data
EXPOSE 3000
CMD ["rustycms", "--host", "0.0.0.0"]

163
README.md
View File

@@ -1,6 +1,6 @@
# RustyCMS # RustyCMS
A file-based headless CMS written in Rust. Content types are defined as JSON5 schemas, content is stored as JSON5 files, and served via a REST API. A file-based headless CMS written in Rust. Content types are defined as JSON5 schemas, content is stored as JSON5 files, and served via a REST API. **Under development.**
## Features ## Features
@@ -13,8 +13,10 @@ A file-based headless CMS written in Rust. Content types are defined as JSON5 sc
- **References & _resolve**: Reference fields as `{ _type, _slug }`; embed with `?_resolve=all` - **References & _resolve**: Reference fields as `{ _type, _slug }`; embed with `?_resolve=all`
- **Reusable partials**: `reusable` schemas and `useFields` for shared field groups (e.g. layout) - **Reusable partials**: `reusable` schemas and `useFields` for shared field groups (e.g. layout)
- **Optional API auth**: Protect write access (POST/PUT/DELETE) with an API key via env - **Optional API auth**: Protect write access (POST/PUT/DELETE) with an API key via env
- **Admin UI**: Next.js web interface for browsing collections, creating and editing content; manage types (list, create, edit, delete) with schema files and JSON Schema export updated on save
- **Swagger UI**: Interactive API docs at `/swagger-ui` - **Swagger UI**: Interactive API docs at `/swagger-ui`
- **Image transformation**: `GET /api/transform` – load image from external URL, optional resize (w, h), aspect-ratio crop (e.g. 1:1), fit (fill/contain/cover), output formats jpeg, png, webp, avif; with response cache - **Asset management**: Upload, serve, and delete image files (jpg, png, webp, avif, gif, svg) stored in `content/assets/` via `GET/POST/DELETE /api/assets`; served with immutable cache headers; combinable with `/api/transform` for on-the-fly resizing
- **Image transformation**: `GET /api/transform` – load image from external URL or local asset, optional resize (w, h), aspect-ratio crop (e.g. 1:1), fit (fill/contain/cover), output formats jpeg, png, webp, avif; with response cache
- **JSON5**: Human-friendly format with comments, trailing commas, unquoted keys - **JSON5**: Human-friendly format with comments, trailing commas, unquoted keys
- **Editor validation**: Export JSON Schema from your types so VS Code/Cursor validate `content/*.json5` while you edit - **Editor validation**: Export JSON Schema from your types so VS Code/Cursor validate `content/*.json5` while you edit
- **CORS**: Open by default for frontend development - **CORS**: Open by default for frontend development
@@ -22,6 +24,7 @@ A file-based headless CMS written in Rust. Content types are defined as JSON5 sc
## Requirements ## Requirements
- [Rust](https://www.rust-lang.org/tools/install) (1.70+) - [Rust](https://www.rust-lang.org/tools/install) (1.70+)
- [Node.js](https://nodejs.org/) (for Admin UI, optional)
## Quick start ## Quick start
@@ -32,6 +35,39 @@ cargo run
The server starts at `http://127.0.0.1:3000`. The server starts at `http://127.0.0.1:3000`.
**Start API + Admin UI and open browser:**
```bash
./dev.sh
```
Runs both the API and Admin UI, waits until ready, and opens `http://localhost:2001` in the default browser. Press Ctrl+C to stop both.
### Admin UI (optional)
A Next.js web interface for managing content. Start the API server first, then:
```bash
cd admin-ui
npm install
npm run dev
```
The Admin UI runs at `http://localhost:2001` (different port to avoid conflict with the API).
**Version control:** Only a single demo type (`types/demo.json5`) and one demo content entry (`content/de/demo/demo-welcome.json5`) are tracked. All other files under `types/` and `content/` are ignored via `.gitignore`, so you can add your own types and content without committing them.
**Admin UI:** Dashboard → **Types** lists all content types; you can create a new type, edit (fields, description, category, strict, …) or delete a type. Edits are written to `types/*.json5` and the corresponding `schemas/*.schema.json` is updated. Content is managed under **Collections** (list, new entry, edit, with reference fields and Markdown editor). Schema and data preview are available on the relevant pages.
**Environment variables** (in `admin-ui/.env.local` or as env vars):
| Variable | Default | Description |
|----------|---------|-------------|
| `NEXT_PUBLIC_RUSTYCMS_API_URL` | `http://127.0.0.1:3000` | RustyCMS API base URL |
| `NEXT_PUBLIC_RUSTYCMS_API_KEY` | – | API key for write operations (same as `RUSTYCMS_API_KEY`) |
If the API requires auth, set `NEXT_PUBLIC_RUSTYCMS_API_KEY` so the Admin UI can create, update and delete entries.
### CLI options ### CLI options
| Option | Default | Description | | Option | Default | Description |
@@ -74,6 +110,11 @@ RUSTYCMS_API_KEY=your-secret-token cargo run
``` ```
rustycms/ rustycms/
├── admin-ui/ # Next.js Admin UI (optional)
│ ├── src/
│ │ ├── app/ # Dashboard, content list/edit pages
│ │ └── components/ # ContentForm, MarkdownEditor, ReferenceArrayField, Sidebar
│ └── package.json
├── Cargo.toml ├── Cargo.toml
├── src/ ├── src/
│ ├── main.rs # Entry point, CLI, server │ ├── main.rs # Entry point, CLI, server
@@ -105,6 +146,8 @@ rustycms/
│ ├── blog_post.json5 │ ├── blog_post.json5
│ ├── page.json5 # extends blog_post │ ├── page.json5 # extends blog_post
│ └── product.json5 # strict mode, constraints, unique, pattern │ └── product.json5 # strict mode, constraints, unique, pattern
├── scripts/
│ └── contentful-to-rustycms.mjs # Migration: Contentful-Export → content/de (JSON5)
├── schemas/ # Generated JSON Schema (optional, for editor) ├── schemas/ # Generated JSON Schema (optional, for editor)
└── content/ # Content files (layer 2) └── content/ # Content files (layer 2)
├── blog_post/ ├── blog_post/
@@ -134,6 +177,9 @@ Add a `.json5` file under `types/`:
// types/blog_post.json5 // types/blog_post.json5
{ {
name: "blog_post", name: "blog_post",
description: "Simple blog post with title, body, tags and publish status",
tags: ["content", "blog"],
category: "content",
fields: { fields: {
title: { title: {
type: "string", type: "string",
@@ -158,14 +204,17 @@ Add a `.json5` file under `types/`:
### Schema options ### Schema options
| Option | Type | Description | | Option | Type | Description |
|-----------|-----------------|----------------------------------------------------------| |--------------|-----------------|----------------------------------------------------------|
| `name` | string | **Required.** Content type name | | `name` | string | **Required.** Content type name |
| `description`| string | Human-readable description (Admin UI, Swagger) |
| `tags` | string[] | Tags for grouping/filtering (e.g. `["content","blog"]`) |
| `category` | string | Category for Admin UI (e.g. `"content"`, `"components"`) |
| `extends` | string / array | Parent type(s) to inherit from | | `extends` | string / array | Parent type(s) to inherit from |
| `strict` | boolean | Reject unknown fields | | `strict` | boolean | Reject unknown fields |
| `pick` | string[] | Only inherit these fields from parent (`Pick<T>`) | | `pick` | string[] | Only inherit these fields from parent (`Pick<T>`) |
| `omit` | string[] | Exclude these fields from parent (`Omit<T>`) | | `omit` | string[] | Exclude these fields from parent (`Omit<T>`) |
| `partial` | boolean | Make all inherited fields optional (`Partial<T>`) | | `partial` | boolean | Make all inherited fields optional (`Partial<T>`) |
| `reusable`| boolean | Schema only as partial (useFields), no collection/API | | `reusable` | boolean | Schema only as partial (useFields), no collection/API |
### Field options ### Field options
@@ -179,7 +228,7 @@ Add a `.json5` file under `types/`:
| `readonly` | boolean | Field cannot be changed after creation | | `readonly` | boolean | Field cannot be changed after creation |
| `nullable` | boolean | Field allows explicit `null` | | `nullable` | boolean | Field allows explicit `null` |
| `enum` | array | Allowed values | | `enum` | array | Allowed values |
| `description` | string | Description (shown in Swagger UI) | | `description` | string | Field description (Swagger UI, Admin UI) |
| `minLength` | number | Minimum string length | | `minLength` | number | Minimum string length |
| `maxLength` | number | Maximum string length | | `maxLength` | number | Maximum string length |
| `pattern` | string | Regex pattern for strings | | `pattern` | string | Regex pattern for strings |
@@ -198,7 +247,10 @@ Add a `.json5` file under `types/`:
|--------------|-----------|--------------------------------| |--------------|-----------|--------------------------------|
| `string` | string | Plain text | | `string` | string | Plain text |
| `richtext` | string | Markdown / rich text | | `richtext` | string | Markdown / rich text |
| `markdown` | string | Markdown content |
| `html` | string | Raw HTML (safely embedded) |
| `number` | number | Integer or float | | `number` | number | Integer or float |
| `integer` | number | Integer only |
| `boolean` | boolean | true / false | | `boolean` | boolean | true / false |
| `datetime` | string | ISO 8601 date/time | | `datetime` | string | ISO 8601 date/time |
| `array` | array | List (optional `items`) | | `array` | array | List (optional `items`) |
@@ -212,6 +264,9 @@ Add a `.json5` file under `types/`:
```json5 ```json5
{ {
name: "page", name: "page",
description: "Page with layout, SEO and content rows",
tags: ["content", "page"],
category: "content",
extends: "blog_post", extends: "blog_post",
fields: { fields: {
nav_order: { type: "number", min: 0 }, nav_order: { type: "number", min: 0 },
@@ -225,6 +280,9 @@ Add a `.json5` file under `types/`:
```json5 ```json5
{ {
name: "featured_article", name: "featured_article",
description: "Featured article with expiration",
tags: ["content", "blog"],
category: "content",
extends: ["blog_post", "seo_meta"], extends: ["blog_post", "seo_meta"],
fields: { fields: {
featured_until: { type: "datetime" }, featured_until: { type: "datetime" },
@@ -278,6 +336,9 @@ In strict mode, unknown fields are rejected:
```json5 ```json5
{ {
name: "product", name: "product",
description: "Product with SKU, price and optional fields",
tags: ["content", "ecommerce"],
category: "content",
strict: true, strict: true,
fields: { fields: {
title: { type: "string", required: true }, title: { type: "string", required: true },
@@ -289,9 +350,20 @@ In strict mode, unknown fields are rejected:
## Creating content ## Creating content
### Contentful-Migration
Ein Contentful-Export (z. B. `contentful-export.json`) kann nach `content/de/` überführt werden:
```bash
node scripts/contentful-to-rustycms.mjs [Pfad-zum-Export]
# Default: ../www.windwiderstand.de/contentful-export.json
```
Es werden u. a. Pages, Posts, Markdown, Link-Listen, Fullwidth-Banner, Tags, Navigation, Footer, Page-Config und Campaigns geschrieben. Nur unterstützte Row-Komponenten (markdown, link_list, fullwidth_banner, post_overview, searchable_text) landen in `row1Content`.
### Via files ### Via files
Add a `.json5` file under `content/<type>/`. The filename becomes the slug: Add a `.json5` file under `content/<type>/` or, for localized content, `content/<locale>/<type>/` (e.g. `content/de/page/`). The filename (without extension) becomes the slug.
```json5 ```json5
// content/product/laptop-pro.json5 // content/product/laptop-pro.json5
@@ -321,7 +393,7 @@ curl -X POST http://localhost:3000/api/content/product \
`_slug` sets the filename. Fields with `default` or `auto` are set automatically. `_slug` sets the filename. Fields with `default` or `auto` are set automatically.
**Note:** If `RUSTYCMS_API_KEY` is set, POST/PUT/DELETE must send the key – see section “Optional API auth”. **Note:** If `RUSTYCMS_API_KEY` is set, POST/PUT/DELETE (including schema and content) must send the key – see section “Optional API auth”.
## REST API ## REST API
@@ -331,6 +403,9 @@ curl -X POST http://localhost:3000/api/content/product \
|----------|-----------------------------|--------------------------------| |----------|-----------------------------|--------------------------------|
| `GET` | `/api/collections` | List all content types | | `GET` | `/api/collections` | List all content types |
| `GET` | `/api/collections/:type` | Get schema for a type | | `GET` | `/api/collections/:type` | Get schema for a type |
| `POST` | `/api/schemas` | Create new type (Admin UI: New type) |
| `PUT` | `/api/schemas/:type` | Update type definition (Admin UI: Edit type) |
| `DELETE` | `/api/schemas/:type` | Delete type definition (Admin UI: Delete type) |
| `GET` | `/api/content/:type` | List all entries | | `GET` | `/api/content/:type` | List all entries |
| `GET` | `/api/content/:type/:slug` | Get single entry | | `GET` | `/api/content/:type/:slug` | Get single entry |
| `POST` | `/api/content/:type` | Create entry | | `POST` | `/api/content/:type` | Create entry |
@@ -339,9 +414,79 @@ curl -X POST http://localhost:3000/api/content/product \
| `GET` | `/api` or `/api/` | API index (living docs: links to Swagger UI + endpoint overview) | | `GET` | `/api` or `/api/` | API index (living docs: links to Swagger UI + endpoint overview) |
| `GET` | `/swagger-ui` | Swagger UI | | `GET` | `/swagger-ui` | Swagger UI |
| `GET` | `/api-docs/openapi.json` | OpenAPI 3.0 spec | | `GET` | `/api-docs/openapi.json` | OpenAPI 3.0 spec |
| `GET` | `/api/assets` | List all uploaded image assets |
| `POST` | `/api/assets` | Upload an image asset (multipart/form-data) |
| `GET` | `/api/assets/:filename` | Serve an image asset |
| `DELETE` | `/api/assets/:filename` | Delete an image asset |
| `GET` | `/api/transform` | Transform image from external URL (resize, crop, format) | | `GET` | `/api/transform` | Transform image from external URL (resize, crop, format) |
| `GET` | `/health` | Health check (e.g. for K8s/Docker), always 200 + `{"status":"ok"}` | | `GET` | `/health` | Health check (e.g. for K8s/Docker), always 200 + `{"status":"ok"}` |
### Asset management
Images and other media files can be stored in `content/assets/` and served directly via the API. This is useful for logos, hero images, icons, or any static media that belongs to your content.
**Allowed file types:** `jpg`, `jpeg`, `png`, `webp`, `avif`, `gif`, `svg`
Files are stored at `{content-dir}/assets/` (default: `./content/assets/`). The directory is created automatically on first use.
#### List assets
```bash
GET /api/assets
```
```json
{
"assets": [
{ "filename": "hero.jpg", "url": "/api/assets/hero.jpg", "mime_type": "image/jpeg", "size": 102400 }
],
"total": 1
}
```
#### Upload an asset
```bash
curl -X POST http://localhost:3000/api/assets \
-H "X-API-Key: your-key" \
-F "file=@/path/to/hero.jpg"
```
Response (201):
```json
{ "filename": "hero.jpg", "url": "/api/assets/hero.jpg", "mime_type": "image/jpeg", "size": 102400 }
```
- Auth required (POST/DELETE) when `RUSTYCMS_API_KEY` is set
- Filenames are lowercased and sanitized (only letters, digits, `-`, `_`, `.`)
- Uploading a file that already exists returns `409 Conflict`
#### Serve an asset
```bash
GET /api/assets/hero.jpg
```
Returns the raw image with correct `Content-Type`. Response header:
```
Cache-Control: public, max-age=31536000, immutable
```
Browsers and CDNs cache the file for 1 year. Combine with `/api/transform` for on-the-fly resizing of uploaded assets:
```bash
GET /api/transform?url=http://localhost:3000/api/assets/hero.jpg&w=400&h=300&format=webp
```
#### Delete an asset
```bash
curl -X DELETE http://localhost:3000/api/assets/hero.jpg \
-H "X-API-Key: your-key"
```
Returns `204 No Content`.
### Image transformation (external URLs) ### Image transformation (external URLs)
`GET /api/transform` loads an image from an external URL and returns it transformed. Parameters: `GET /api/transform` loads an image from an external URL and returns it transformed. Parameters:
@@ -353,8 +498,8 @@ curl -X POST http://localhost:3000/api/content/product \
| `height` | `h` | Target height in pixels. | | `height` | `h` | Target height in pixels. |
| `aspect_ratio`| `ar` | Aspect ratio before resize, e.g. `1:1` or `16:9` (center crop). | | `aspect_ratio`| `ar` | Aspect ratio before resize, e.g. `1:1` or `16:9` (center crop). |
| `fit` | – | `fill` (exact w×h), `contain` (keep aspect ratio), `cover` (fill with crop). When **w and h** are set: default `fill`; otherwise default `contain`. | | `fit` | – | `fill` (exact w×h), `contain` (keep aspect ratio), `cover` (fill with crop). When **w and h** are set: default `fill`; otherwise default `contain`. |
| `format` | – | Output: `jpeg`, `png`, `webp` or `avif`. Default: `jpeg`. (WebP = lossless; AVIF at default quality.) | | `format` | – | Output: `jpeg`, `png`, `webp` or `avif`. Default: `jpeg`. WebP is lossy when `quality` is used. |
| `quality` | – | JPEG quality 1–100. Default: 85. | | `quality` | – | Quality 1–100 for JPEG and WebP (lossy). Default: 85. |
Example: 50×50 square from any image: Example: 50×50 square from any image:
`GET /api/transform?url=https://example.com/image.jpg&w=50&h=50&ar=1:1` `GET /api/transform?url=https://example.com/image.jpg&w=50&h=50&ar=1:1`

5
admin-ui/.dockerignore Normal file
View File

@@ -0,0 +1,5 @@
node_modules/
.next/
.git/
.env*
*.md

28
admin-ui/Dockerfile Normal file
View File

@@ -0,0 +1,28 @@
# Stage 1: Build
FROM node:22-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
ENV NEXT_TELEMETRY_DISABLED=1
# API URL is baked in at build time (NEXT_PUBLIC_ vars are static)
ARG NEXT_PUBLIC_RUSTYCMS_API_URL
ARG NEXT_PUBLIC_RUSTYCMS_API_KEY
ENV NEXT_PUBLIC_RUSTYCMS_API_URL=$NEXT_PUBLIC_RUSTYCMS_API_URL
ENV NEXT_PUBLIC_RUSTYCMS_API_KEY=$NEXT_PUBLIC_RUSTYCMS_API_KEY
RUN npm run build
# Stage 2: Minimal runtime image
FROM node:22-alpine AS runner
WORKDIR /app
ENV NODE_ENV=production
ENV NEXT_TELEMETRY_DISABLED=1
RUN addgroup --system --gid 1001 nodejs && adduser --system --uid 1001 nextjs
COPY --from=builder /app/public ./public
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
USER nextjs
EXPOSE 3001
ENV PORT=3001
ENV HOSTNAME="0.0.0.0"
CMD ["node", "server.js"]

1
admin-ui/components.json Normal file
View File

@@ -0,0 +1 @@
{"style":"new-york","rsc":true,"tsx":true,"tailwind":{"config":"","css":"src/app/globals.css","baseColor":"neutral","cssVariables":true},"aliases":{"components":"@/components","utils":"@/lib/utils","ui":"@/components/ui","lib":"@/lib","hooks":"@/hooks"}}

11
admin-ui/i18n/request.ts Normal file
View File

@@ -0,0 +1,11 @@
import { getRequestConfig } from 'next-intl/server';
import { cookies } from 'next/headers';
export default getRequestConfig(async () => {
const store = await cookies();
const locale = store.get('locale')?.value ?? 'en';
return {
locale,
messages: (await import(`../messages/${locale}.json`)).default,
};
});

263
admin-ui/messages/de.json Normal file
View File

@@ -0,0 +1,263 @@
{
"Sidebar": {
"dashboard": "Dashboard",
"types": "Typen",
"assets": "Assets",
"searchPlaceholder": "Sammlungen suchen…",
"searchAriaLabel": "Sammlungen suchen",
"closeMenu": "Menü schließen",
"loading": "Laden…",
"errorLoading": "Fehler beim Laden der Sammlungen",
"noResults": "Keine Ergebnisse für \"{query}\""
},
"ContentForm": {
"slugRequired": "Slug ist erforderlich.",
"slugInUse": "Slug bereits vergeben.",
"slugMustStartWith": "Der Slug muss mit \"{prefix}\" beginnen.",
"slugPrefix": "Präfix",
"slugSuffixPlaceholder": "z. B. meine-kampagne",
"slugSuffixAriaLabel": "Slug-Suffix (Präfix ist fest)",
"slugPlaceholder": "z. B. mein-beitrag",
"slugHint": "Kleinbuchstaben (a-z), Ziffern (0-9), Bindestriche. Leerzeichen werden zu Bindestrichen.",
"savedSuccessfully": "Erfolgreich gespeichert.",
"errorSaving": "Fehler beim Speichern",
"saving": "Speichern…",
"save": "Speichern",
"backToList": "Zurück zur Liste",
"pleaseSelect": "— Bitte auswählen —",
"removeEntry": "Entfernen",
"addEntry": "+ Eintrag hinzufügen",
"keyPlaceholder": "Schlüssel",
"valuePlaceholder": "Wert"
},
"SearchableSelect": {
"placeholder": "\u2014 Bitte ausw\u00e4hlen \u2014",
"clearLabel": "\u2014 Auswahl aufheben \u2014",
"filterPlaceholder": "Filtern\u2026",
"emptyLabel": "Keine Treffer"
},
"ReferenceField": {
"typeLabel": "Typ: {collection}",
"typesLabel": "Typen: {collections}",
"selectType": "\u2014 Typ w\u00e4hlen \u2014",
"newEntry": "Neuer Eintrag",
"noCollection": "Keine Referenz-Collection im Schema. Setze {collectionCode} oder {collectionsCode} im Typ, oder starte die API und lade die Seite neu."
},
"ReferenceArrayField": {
"typeLabel": "Typ: {collection}",
"typesLabel": "Typen: {collections}",
"componentType": "Komponententyp",
"selectType": "\u2014 Typ w\u00e4hlen \u2014",
"selectFromExisting": "\u2014 Aus vorhandenen w\u00e4hlen \u2014",
"filterPlaceholder": "Filtern\u2026",
"emptyLabel": "Keine Treffer",
"selectExistingAriaLabel": "Vorhandenen Eintrag zum Hinzuf\u00fcgen ausw\u00e4hlen",
"moveUp": "Nach oben",
"moveDown": "Nach unten",
"remove": "Entfernen",
"newComponent": "+ Neue {collection}-Komponente",
"createNewComponent": "+ Neue Komponente erstellen\u2026",
"openInNewTab": "In neuem Tab \u00f6ffnen; dann Seite neu laden.",
"noCollection": "Keine Referenz-Collection im Schema. Setze {collectionCode} oder {collectionsCode} im Typ, oder starte die API und lade die Seite neu."
},
"MarkdownEditor": {
"bold": "Fett",
"italic": "Kursiv",
"code": "Code",
"link": "Link",
"bulletList": "Aufz\u00e4hlungsliste",
"bulletListButton": "\u2022 Liste",
"placeholder": "Markdown eingeben\u2026 **fett**, *kursiv*, [Link](url), - Liste",
"preview": "Vorschau",
"emptyPreview": "Leer \u2014 Vorschau erscheint beim Tippen."
},
"PaginationLinks": {
"back": "Zur\u00fcck",
"next": "Weiter",
"pageInfo": "Seite {page} von {totalPages} ({total} Eintr\u00e4ge)"
},
"DataPreviewPanel": {
"hide": "Daten-Vorschau ausblenden",
"show": "Daten-Vorschau",
"loading": "Laden\u2026",
"errorLoading": "Fehler beim Laden"
},
"SchemaPanel": {
"hide": "Schema ausblenden",
"show": "Schema anzeigen"
},
"SchemaAndEditBar": {
"editSchema": "Schema bearbeiten"
},
"SchemaAndPreviewBar": {
"hideSchema": "Schema ausblenden",
"showSchema": "Schema anzeigen",
"editSchema": "Schema bearbeiten",
"hidePreview": "Daten-Vorschau ausblenden",
"showPreview": "Daten-Vorschau",
"loading": "Laden\u2026",
"errorLoading": "Fehler beim Laden"
},
"ReferenceOrInlineField": {
"reference": "Referenz",
"inline": "Eingebettet",
"inlineObject": "Eingebettetes Objekt (keine Referenz)",
"noInlineSchema": "Kein Inline-Schema. Seite neu laden oder API pr\u00fcfen (useFields / collection)."
},
"LocaleSwitcher": {
"label": "Sprache"
},
"ContentLocaleSwitcher": {
"label": "Inhaltssprache"
},
"Dashboard": {
"title": "Dashboard",
"subtitle": "W\u00e4hle eine Sammlung zur Inhaltsverwaltung.",
"noCollections": "Keine Sammlungen geladen. Pr\u00fcfe ob die RustyCMS-API unter {url} erreichbar ist."
},
"TypesPage": {
"title": "Typen",
"newType": "Neuer Typ",
"description": "Inhaltstypen (Sammlungen). Schema bearbeiten oder Typ l\u00f6schen. Beim L\u00f6schen wird nur die Typdefinitionsdatei entfernt; vorhandene Inhaltseintr\u00e4ge bleiben erhalten.",
"loading": "Laden\u2026",
"errorLoading": "Fehler beim Laden der Typen: {error}",
"noTypes": "Noch keine Typen vorhanden. Erstelle einen mit \"Neuer Typ\".",
"colName": "Name",
"colDescription": "Beschreibung",
"colCategory": "Kategorie",
"colActions": "Aktionen",
"confirmDelete": "\"{name}\" l\u00f6schen?",
"confirmDeleteFinal": "\"{name}\" wirklich l\u00f6schen? Dies kann nicht r\u00fcckg\u00e4ngig gemacht werden.",
"delete": "L\u00f6schen",
"yesDelete": "Ja, l\u00f6schen",
"deleting": "\u2026",
"cancel": "Abbrechen",
"edit": "Bearbeiten"
},
"NewTypePage": {
"title": "Neuen Typ anlegen",
"description": "Erstellt einen neuen Inhaltstyp (Sammlung). Die Schemadatei wird auf dem Server unter {path} gespeichert und per Hot-Reload geladen.",
"nameRequired": "Name ist erforderlich.",
"nameInvalid": "Name: nur Kleinbuchstaben, Ziffern und Unterstriche.",
"fieldRequired": "Mindestens ein Feld erforderlich.",
"fieldNamesUnique": "Feldnamen m\u00fcssen eindeutig sein.",
"errorCreating": "Fehler beim Erstellen des Typs.",
"nameLabel": "Name",
"namePlaceholder": "z.\u00a0B. produkt, blogbeitrag",
"nameHint": "Nur Kleinbuchstaben, Ziffern und Unterstriche.",
"descriptionLabel": "Beschreibung",
"categoryLabel": "Kategorie",
"categoryPlaceholder": "z.\u00a0B. inhalt",
"tagsLabel": "Tags (kommagetrennt)",
"tagsPlaceholder": "z.\u00a0B. inhalt, blog",
"strictLabel": "Strikt (unbekannte Felder ablehnen)",
"fieldsLabel": "Felder",
"addField": "Feld hinzuf\u00fcgen",
"fieldNamePlaceholder": "Feldname",
"required": "Pflichtfeld",
"removeField": "Feld entfernen",
"collectionPlaceholder": "Sammlung (z.\u00a0B. seite)",
"fieldDescriptionPlaceholder": "Feldbeschreibung (optional)",
"creating": "Erstellen\u2026",
"createType": "Typ erstellen",
"cancel": "Abbrechen"
},
"EditTypePage": {
"fieldRequired": "Mindestens ein Feld erforderlich.",
"fieldNamesUnique": "Feldnamen m\u00fcssen eindeutig sein.",
"errorSaving": "Fehler beim Speichern des Typs.",
"missingName": "Typname fehlt.",
"backToTypes": "Zur\u00fcck zu Typen",
"loading": "Laden\u2026",
"errorLoading": "Fehler beim Laden des Typs: {error}",
"title": "Typ bearbeiten: {name}",
"description": "Beschreibung, Kategorie, Tags und Felder \u00e4ndern. Die Schemadatei wird auf dem Server aktualisiert.",
"nameLabel": "Name",
"descriptionLabel": "Beschreibung",
"categoryLabel": "Kategorie",
"categoryPlaceholder": "z.\u00a0B. inhalt",
"tagsLabel": "Tags (kommagetrennt)",
"tagsPlaceholder": "z.\u00a0B. inhalt, blog",
"strictLabel": "Strikt (unbekannte Felder ablehnen)",
"fieldsLabel": "Felder",
"addField": "Feld hinzuf\u00fcgen",
"fieldNamePlaceholder": "Feldname",
"required": "Pflichtfeld",
"removeField": "Feld entfernen",
"collectionPlaceholder": "Sammlung (z.\u00a0B. seite)",
"fieldDescriptionPlaceholder": "Feldbeschreibung (optional)",
"saving": "Speichern\u2026",
"save": "Speichern",
"cancel": "Abbrechen"
},
"ErrorBoundary": {
"title": "Etwas ist schiefgelaufen",
"reload": "Seite neu laden"
},
"Breadcrumbs": {
"ariaLabel": "Breadcrumb",
"content": "Inhalte"
},
"ContentListPage": {
"title": "Einträge",
"newEntry": "Neuer Eintrag",
"colActions": "Aktionen",
"noEntries": "Keine Einträge.",
"noEntriesCreate": "Noch keine Einträge. Erstellen Sie den ersten.",
"edit": "Bearbeiten",
"searchPlaceholder": "Suchen…",
"loading": "Laden…",
"sortBy": "Sortieren nach {field}",
"sortAsc": "Aufsteigend",
"sortDesc": "Absteigend"
},
"ContentNewPage": {
"breadcrumbNew": "Neu",
"title": "Neuen Eintrag anlegen"
},
"ContentEditPage": {
"title": "Eintrag bearbeiten",
"apiLink": "API-Link (Daten-Vorschau):"
},
"AssetsPage": {
"titleAll": "Alle Assets",
"titleRoot": "Root",
"assetCount": "{count} Bild(er)",
"upload": "Hochladen",
"uploading": "Wird hochgeladen…",
"uploadedCount": "{count} Datei(en) hochgeladen.",
"dropZoneHintRoot": "Klicken oder hierher ziehen (Root)",
"dropZoneHintFolder": "Klicken oder hierher ziehen → \"{folder}\"",
"loading": "Laden…",
"errorLoading": "Fehler beim Laden der Assets",
"noAssets": "Noch keine Assets hier.",
"urlCopied": "URL kopiert.",
"copyUrl": "URL kopieren",
"confirmDelete": "\"{filename}\" löschen?",
"confirmDeleteDesc": "Dies kann nicht rückgängig gemacht werden.",
"yesDelete": "Ja, löschen",
"deleting": "…",
"cancel": "Abbrechen",
"deleted": "\"{filename}\" gelöscht.",
"folders": "Ordner",
"all": "Alle",
"root": "Root",
"newFolder": "Neuer Ordner",
"folderNamePlaceholder": "z. B. blog",
"folderCreated": "Ordner \"{name}\" erstellt.",
"folderDeleted": "Ordner \"{name}\" gelöscht.",
"confirmDeleteFolder": "Ordner \"{name}\" löschen?",
"confirmDeleteFolderDesc": "Nur leere Ordner können gelöscht werden.",
"renameTitle": "Bild umbenennen",
"renameFilenameLabel": "Dateiname",
"rename": "Umbenennen",
"renaming": "Wird umbenannt…",
"renamed": "\"{filename}\" umbenannt.",
"copyWithTransformTitle": "Kopie mit Transformation",
"copyWithTransformDesc": "Neues Asset aus diesem Bild mit Größe/Beschnitt/Format. Gleicher Ordner.",
"copyWithTransformNewName": "Neuer Dateiname",
"copyWithTransformCreate": "Kopie erstellen",
"copyWithTransformDone": "Transformierte Kopie erstellt.",
"creating": "Wird erstellt…"
}
}

263
admin-ui/messages/en.json Normal file
View File

@@ -0,0 +1,263 @@
{
"Sidebar": {
"dashboard": "Dashboard",
"types": "Types",
"assets": "Assets",
"searchPlaceholder": "Search collections…",
"searchAriaLabel": "Search collections",
"closeMenu": "Close menu",
"loading": "Loading…",
"errorLoading": "Error loading collections",
"noResults": "No results for \"{query}\""
},
"ContentForm": {
"slugRequired": "Slug is required.",
"slugInUse": "Slug already in use.",
"slugMustStartWith": "Slug must start with \"{prefix}\".",
"slugPrefix": "prefix",
"slugSuffixPlaceholder": "e.g. my-campaign",
"slugSuffixAriaLabel": "Slug suffix (prefix is fixed)",
"slugPlaceholder": "e.g. my-post",
"slugHint": "Lowercase letters (a-z), digits (0-9), hyphens. Spaces become hyphens.",
"savedSuccessfully": "Saved successfully.",
"errorSaving": "Error saving",
"saving": "Saving…",
"save": "Save",
"backToList": "Back to list",
"pleaseSelect": "— Please select —",
"removeEntry": "Remove",
"addEntry": "+ Add entry",
"keyPlaceholder": "Key",
"valuePlaceholder": "Value"
},
"SearchableSelect": {
"placeholder": "— Please select —",
"clearLabel": "— Clear selection —",
"filterPlaceholder": "Filter…",
"emptyLabel": "No matches"
},
"ReferenceField": {
"typeLabel": "Type: {collection}",
"typesLabel": "Types: {collections}",
"selectType": "— Select type —",
"newEntry": "New entry",
"noCollection": "No reference collection in schema. Set {collectionCode} or {collectionsCode} in the type, or start the API and reload the page."
},
"ReferenceArrayField": {
"typeLabel": "Type: {collection}",
"typesLabel": "Types: {collections}",
"componentType": "Component type",
"selectType": "— Select type —",
"selectFromExisting": "— Select from existing —",
"filterPlaceholder": "Filter…",
"emptyLabel": "No matches",
"selectExistingAriaLabel": "Select existing entry to add",
"moveUp": "Move up",
"moveDown": "Move down",
"remove": "Remove",
"newComponent": "+ New {collection} component",
"createNewComponent": "+ Create new component…",
"openInNewTab": "Open in new tab; then reload this page.",
"noCollection": "No reference collection in schema. Set {collectionCode} or {collectionsCode} in the type, or start the API and reload the page."
},
"MarkdownEditor": {
"bold": "Bold",
"italic": "Italic",
"code": "Code",
"link": "Link",
"bulletList": "Bullet list",
"bulletListButton": "• List",
"placeholder": "Enter markdown… **bold**, *italic*, [link](url), - list",
"preview": "Preview",
"emptyPreview": "Empty — preview appears as you type."
},
"PaginationLinks": {
"back": "Back",
"next": "Next",
"pageInfo": "Page {page} of {totalPages} ({total} entries)"
},
"DataPreviewPanel": {
"hide": "Hide data preview",
"show": "Data preview",
"loading": "Loading…",
"errorLoading": "Error loading"
},
"SchemaPanel": {
"hide": "Hide schema",
"show": "Show schema"
},
"SchemaAndEditBar": {
"editSchema": "Edit schema"
},
"SchemaAndPreviewBar": {
"hideSchema": "Hide schema",
"showSchema": "Show schema",
"editSchema": "Edit schema",
"hidePreview": "Hide data preview",
"showPreview": "Data preview",
"loading": "Loading…",
"errorLoading": "Error loading"
},
"ReferenceOrInlineField": {
"reference": "Reference",
"inline": "Inline",
"inlineObject": "Inline object (no reference)",
"noInlineSchema": "No inline schema. Reload or check API (useFields / collection)."
},
"LocaleSwitcher": {
"label": "Language"
},
"ContentLocaleSwitcher": {
"label": "Content language"
},
"Dashboard": {
"title": "Dashboard",
"subtitle": "Choose a collection to manage content.",
"noCollections": "No collections loaded. Check that the RustyCMS API is running at {url}."
},
"TypesPage": {
"title": "Types",
"newType": "New type",
"description": "Content types (collections). Edit the schema or delete a type. Deleting removes the type definition file; existing content entries are not removed.",
"loading": "Loading…",
"errorLoading": "Error loading types: {error}",
"noTypes": "No types yet. Create one with \"New type\".",
"colName": "Name",
"colDescription": "Description",
"colCategory": "Category",
"colActions": "Actions",
"confirmDelete": "Delete \"{name}\"?",
"confirmDeleteFinal": "Really delete \"{name}\"? This cannot be undone.",
"delete": "Delete",
"yesDelete": "Yes, delete",
"deleting": "…",
"cancel": "Cancel",
"edit": "Edit"
},
"NewTypePage": {
"title": "Add new type",
"description": "Creates a new content type (collection). The schema file is saved on the server at {path} and loaded via hot-reload.",
"nameRequired": "Name is required.",
"nameInvalid": "Name: only lowercase letters, digits and underscores.",
"fieldRequired": "At least one field required.",
"fieldNamesUnique": "Field names must be unique.",
"errorCreating": "Error creating type.",
"nameLabel": "Name",
"namePlaceholder": "e.g. product, blog_post",
"nameHint": "Lowercase letters, digits and underscores only.",
"descriptionLabel": "Description",
"categoryLabel": "Category",
"categoryPlaceholder": "e.g. content",
"tagsLabel": "Tags (comma-separated)",
"tagsPlaceholder": "e.g. content, blog",
"strictLabel": "Strict (reject unknown fields)",
"fieldsLabel": "Fields",
"addField": "Add field",
"fieldNamePlaceholder": "Field name",
"required": "Required",
"removeField": "Remove field",
"collectionPlaceholder": "Collection (e.g. page)",
"fieldDescriptionPlaceholder": "Field description (optional)",
"creating": "Creating…",
"createType": "Create type",
"cancel": "Cancel"
},
"EditTypePage": {
"fieldRequired": "At least one field required.",
"fieldNamesUnique": "Field names must be unique.",
"errorSaving": "Error saving type.",
"missingName": "Missing type name.",
"backToTypes": "Back to Types",
"loading": "Loading…",
"errorLoading": "Error loading type: {error}",
"title": "Edit type: {name}",
"description": "Change description, category, tags, and fields. The schema file is updated on the server.",
"nameLabel": "Name",
"descriptionLabel": "Description",
"categoryLabel": "Category",
"categoryPlaceholder": "e.g. content",
"tagsLabel": "Tags (comma-separated)",
"tagsPlaceholder": "e.g. content, blog",
"strictLabel": "Strict (reject unknown fields)",
"fieldsLabel": "Fields",
"addField": "Add field",
"fieldNamePlaceholder": "Field name",
"required": "Required",
"removeField": "Remove field",
"collectionPlaceholder": "Collection (e.g. page)",
"fieldDescriptionPlaceholder": "Field description (optional)",
"saving": "Saving…",
"save": "Save",
"cancel": "Cancel"
},
"ErrorBoundary": {
"title": "Something went wrong",
"reload": "Reload page"
},
"Breadcrumbs": {
"ariaLabel": "Breadcrumb",
"content": "Content"
},
"ContentListPage": {
"title": "Entries",
"newEntry": "New entry",
"colActions": "Actions",
"noEntries": "No entries.",
"noEntriesCreate": "No entries yet. Create the first one.",
"edit": "Edit",
"searchPlaceholder": "Search…",
"loading": "Loading…",
"sortBy": "Sort by {field}",
"sortAsc": "Ascending",
"sortDesc": "Descending"
},
"ContentNewPage": {
"breadcrumbNew": "New",
"title": "Create new entry"
},
"ContentEditPage": {
"title": "Edit entry",
"apiLink": "API link (data preview):"
},
"AssetsPage": {
"titleAll": "All assets",
"titleRoot": "Root",
"assetCount": "{count} image(s)",
"upload": "Upload",
"uploading": "Uploading…",
"uploadedCount": "Uploaded {count} file(s).",
"dropZoneHintRoot": "Click or drag & drop to upload to root",
"dropZoneHintFolder": "Click or drag & drop to upload to \"{folder}\"",
"loading": "Loading…",
"errorLoading": "Error loading assets",
"noAssets": "No assets here yet.",
"urlCopied": "URL copied.",
"copyUrl": "Copy URL",
"confirmDelete": "Delete \"{filename}\"?",
"confirmDeleteDesc": "This cannot be undone.",
"yesDelete": "Yes, delete",
"deleting": "…",
"cancel": "Cancel",
"deleted": "\"{filename}\" deleted.",
"folders": "Folders",
"all": "All",
"root": "Root",
"newFolder": "New folder",
"folderNamePlaceholder": "e.g. blog",
"folderCreated": "Folder \"{name}\" created.",
"folderDeleted": "Folder \"{name}\" deleted.",
"confirmDeleteFolder": "Delete folder \"{name}\"?",
"confirmDeleteFolderDesc": "Only empty folders can be deleted.",
"renameTitle": "Rename image",
"renameFilenameLabel": "Filename",
"rename": "Rename",
"renaming": "Renaming…",
"renamed": "\"{filename}\" renamed.",
"copyWithTransformTitle": "Copy with transformation",
"copyWithTransformDesc": "Create a new asset from this image with resize/crop/format. Same folder.",
"copyWithTransformNewName": "New filename",
"copyWithTransformCreate": "Create copy",
"copyWithTransformDone": "Transformed copy created.",
"creating": "Creating…"
}
}

10
admin-ui/next.config.ts
View File

@@ -1,7 +1,7 @@
import type { NextConfig } from "next"; import createNextIntlPlugin from 'next-intl/plugin';
const nextConfig: NextConfig = { const withNextIntl = createNextIntlPlugin('./i18n/request.ts');
/* config options here */
};
export default nextConfig; export default withNextIntl({
output: 'standalone',
});

3527
admin-ui/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

13
admin-ui/package.json
View File

@@ -9,12 +9,23 @@
"lint": "eslint" "lint": "eslint"
}, },
"dependencies": { "dependencies": {
"@fontsource-variable/space-grotesk": "^5.2.10",
"@iconify/react": "^6.0.2",
"@tanstack/react-query": "^5.90.21", "@tanstack/react-query": "^5.90.21",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"cmdk": "^1.1.1",
"lucide-react": "^0.577.0",
"next": "16.1.6", "next": "16.1.6",
"next-intl": "^4.8.3",
"radix-ui": "^1.4.3",
"react": "19.2.3", "react": "19.2.3",
"react-dom": "19.2.3", "react-dom": "19.2.3",
"react-hook-form": "^7.71.1", "react-hook-form": "^7.71.1",
"react-markdown": "^10.1.0" "react-markdown": "^10.1.0",
"sonner": "^2.0.7",
"tailwind-merge": "^3.5.0",
"tailwindcss-animate": "^1.0.7"
}, },
"devDependencies": { "devDependencies": {
"@tailwindcss/postcss": "^4", "@tailwindcss/postcss": "^4",

189
admin-ui/src/app/admin/new-type/page.tsx
View File

@@ -3,21 +3,25 @@
import { useState } from "react"; import { useState } from "react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import Link from "next/link"; import Link from "next/link";
import { Icon } from "@iconify/react";
import { useQueryClient } from "@tanstack/react-query"; import { useQueryClient } from "@tanstack/react-query";
import { useTranslations } from "next-intl";
import { createSchema, type SchemaDefinition, type FieldDefinition } from "@/lib/api"; import { createSchema, type SchemaDefinition, type FieldDefinition } from "@/lib/api";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
const FIELD_TYPES = [ const FIELD_TYPES = [
"string", "string", "number", "integer", "boolean", "datetime",
"number", "richtext", "html", "markdown", "reference", "array", "object",
"integer",
"boolean",
"datetime",
"richtext",
"html",
"markdown",
"reference",
"array",
"object",
] as const; ] as const;
type FieldRow = { type FieldRow = {
@@ -34,6 +38,7 @@ function nextId() {
} }
export default function NewTypePage() { export default function NewTypePage() {
const t = useTranslations("NewTypePage");
const router = useRouter(); const router = useRouter();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const [name, setName] = useState(""); const [name, setName] = useState("");
@@ -59,45 +64,29 @@ export default function NewTypePage() {
}; };
const updateField = (id: string, patch: Partial<FieldRow>) => { const updateField = (id: string, patch: Partial<FieldRow>) => {
setFields((prev) => setFields((prev) => prev.map((f) => (f.id === id ? { ...f, ...patch } : f)));
prev.map((f) => (f.id === id ? { ...f, ...patch } : f))
);
}; };
const handleSubmit = async (e: React.FormEvent) => { const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault();
setError(null); setError(null);
const nameTrim = name.trim().toLowerCase().replace(/\s+/g, "_"); const nameTrim = name.trim().toLowerCase().replace(/\s+/g, "_");
if (!nameTrim) { if (!nameTrim) { setError(t("nameRequired")); return; }
setError("Name is required."); if (!/^[a-z0-9_]+$/.test(nameTrim)) { setError(t("nameInvalid")); return; }
return;
}
if (!/^[a-z0-9_]+$/.test(nameTrim)) {
setError("Name: only lowercase letters, digits and underscores.");
return;
}
const fieldNames = fields.map((f) => f.name.trim()).filter(Boolean); const fieldNames = fields.map((f) => f.name.trim()).filter(Boolean);
if (fieldNames.length === 0) { if (fieldNames.length === 0) { setError(t("fieldRequired")); return; }
setError("At least one field required."); if (new Set(fieldNames).size !== fieldNames.length) { setError(t("fieldNamesUnique")); return; }
return;
}
const unique = new Set(fieldNames);
if (unique.size !== fieldNames.length) {
setError("Field names must be unique.");
return;
}
const fieldsObj: Record<string, FieldDefinition> = {}; const fieldsObj: Record<string, FieldDefinition> = {};
for (const row of fields) { for (const row of fields) {
const fn = row.name.trim(); const fn = row.name.trim();
if (!fn) continue; if (!fn) continue;
const def: FieldDefinition = { fieldsObj[fn] = {
type: row.type, type: row.type,
required: row.required, required: row.required,
description: row.description.trim() || undefined, description: row.description.trim() || undefined,
collection: row.type === "reference" && row.collection.trim() ? row.collection.trim() : undefined, collection: row.type === "reference" && row.collection.trim() ? row.collection.trim() : undefined,
}; };
fieldsObj[fn] = def;
} }
const schema: SchemaDefinition = { const schema: SchemaDefinition = {
@@ -117,17 +106,16 @@ export default function NewTypePage() {
router.push(`/content/${nameTrim}`); router.push(`/content/${nameTrim}`);
router.refresh(); router.refresh();
} catch (err) { } catch (err) {
setError(err instanceof Error ? err.message : "Error creating type."); setError(err instanceof Error ? err.message : t("errorCreating"));
setSubmitting(false); setSubmitting(false);
} }
}; };
return ( return (
<div className="max-w-2xl"> <div className="max-w-2xl">
<h1 className="mb-6 text-2xl font-semibold text-gray-900">Add new type</h1> <h1 className="mb-6 text-2xl font-semibold text-gray-900">{t("title")}</h1>
<p className="mb-6 text-sm text-gray-600"> <p className="mb-6 text-sm text-gray-600">
Creates a new content type (collection). The schema file is saved on the server at{" "} {t("description", { path: "types/<name>.json" })}
<code className="rounded bg-gray-100 px-1">types/&lt;name&gt;.json</code> and loaded via hot-reload.
</p> </p>
<form onSubmit={handleSubmit} className="space-y-6"> <form onSubmit={handleSubmit} className="space-y-6">
@@ -136,78 +124,67 @@ export default function NewTypePage() {
)} )}
<div> <div>
<label className="mb-1 block text-sm font-medium text-gray-700"> <Label className="mb-1 block">
Name <span className="text-red-500">*</span> {t("nameLabel")} <span className="text-red-500">*</span>
</label> </Label>
<input <Input
type="text" type="text"
value={name} value={name}
onChange={(e) => setName(e.target.value)} onChange={(e) => setName(e.target.value)}
placeholder="e.g. product, blog_post" placeholder={t("namePlaceholder")}
className="block w-full rounded border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900"
required required
/> />
<p className="mt-0.5 text-xs text-gray-500"> <p className="mt-0.5 text-xs text-gray-500">{t("nameHint")}</p>
Lowercase letters, digits and underscores only.
</p>
</div> </div>
<div> <div>
<label className="mb-1 block text-sm font-medium text-gray-700">Description</label> <Label className="mb-1 block">{t("descriptionLabel")}</Label>
<input <Input
type="text" type="text"
value={description} value={description}
onChange={(e) => setDescription(e.target.value)} onChange={(e) => setDescription(e.target.value)}
className="block w-full rounded border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900"
/> />
</div> </div>
<div className="grid gap-4 sm:grid-cols-2"> <div className="grid gap-4 sm:grid-cols-2">
<div> <div>
<label className="mb-1 block text-sm font-medium text-gray-700">Category</label> <Label className="mb-1 block">{t("categoryLabel")}</Label>
<input <Input
type="text" type="text"
value={category} value={category}
onChange={(e) => setCategory(e.target.value)} onChange={(e) => setCategory(e.target.value)}
placeholder="e.g. content" placeholder={t("categoryPlaceholder")}
className="block w-full rounded border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900"
/> />
</div> </div>
<div> <div>
<label className="mb-1 block text-sm font-medium text-gray-700">Tags (comma-separated)</label> <Label className="mb-1 block">{t("tagsLabel")}</Label>
<input <Input
type="text" type="text"
value={tagsStr} value={tagsStr}
onChange={(e) => setTagsStr(e.target.value)} onChange={(e) => setTagsStr(e.target.value)}
placeholder="e.g. content, blog" placeholder={t("tagsPlaceholder")}
className="block w-full rounded border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900"
/> />
</div> </div>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<input <Checkbox
type="checkbox"
id="strict" id="strict"
checked={strict} checked={strict}
onChange={(e) => setStrict(e.target.checked)} onCheckedChange={(checked) => setStrict(!!checked)}
className="h-4 w-4 rounded border-gray-300"
/> />
<label htmlFor="strict" className="text-sm text-gray-700"> <label htmlFor="strict" className="text-sm text-gray-700">
Strict (reject unknown fields) {t("strictLabel")}
</label> </label>
</div> </div>
<div> <div>
<div className="mb-2 flex items-center justify-between"> <div className="mb-2 flex items-center justify-between">
<label className="text-sm font-medium text-gray-700">Fields</label> <Label>{t("fieldsLabel")}</Label>
<button <Button type="button" variant="outline" size="sm" onClick={addField}>
type="button" <Icon icon="mdi:plus" className="size-4" aria-hidden />
onClick={addField} {t("addField")}
className="rounded border border-gray-300 bg-white px-2 py-1 text-sm text-gray-700 hover:bg-gray-50" </Button>
>
+ Add field
</button>
</div> </div>
<div className="space-y-3 rounded-lg border border-gray-200 bg-gray-50/50 p-4"> <div className="space-y-3 rounded-lg border border-gray-200 bg-gray-50/50 p-4">
{fields.map((f) => ( {fields.map((f) => (
@@ -215,56 +192,57 @@ export default function NewTypePage() {
key={f.id} key={f.id}
className="grid gap-2 rounded border border-gray-200 bg-white p-3 sm:grid-cols-[1fr_1fr_auto_auto]" className="grid gap-2 rounded border border-gray-200 bg-white p-3 sm:grid-cols-[1fr_1fr_auto_auto]"
> >
<input <Input
type="text" type="text"
value={f.name} value={f.name}
onChange={(e) => updateField(f.id, { name: e.target.value })} onChange={(e) => updateField(f.id, { name: e.target.value })}
placeholder="Field name" placeholder={t("fieldNamePlaceholder")}
className="rounded border border-gray-300 px-2 py-1.5 text-sm" className="h-8 text-sm"
/> />
<select <Select
value={f.type} value={f.type}
onChange={(e) => updateField(f.id, { type: e.target.value })} onValueChange={(v) => updateField(f.id, { type: v })}
className="rounded border border-gray-300 px-2 py-1.5 text-sm"
> >
{FIELD_TYPES.map((t) => ( <SelectTrigger className="h-8 text-sm">
<option key={t} value={t}> <SelectValue />
{t} </SelectTrigger>
</option> <SelectContent>
{FIELD_TYPES.map((type) => (
<SelectItem key={type} value={type}>{type}</SelectItem>
))} ))}
</select> </SelectContent>
<label className="flex items-center gap-1 text-sm"> </Select>
<input <label className="flex items-center gap-1 text-sm text-foreground">
type="checkbox" <Checkbox
checked={f.required} checked={f.required}
onChange={(e) => updateField(f.id, { required: e.target.checked })} onCheckedChange={(checked) => updateField(f.id, { required: !!checked })}
className="h-4 w-4 rounded border-gray-300"
/> />
Required {t("required")}
</label> </label>
<button <button
type="button" type="button"
onClick={() => removeField(f.id)} onClick={() => removeField(f.id)}
className="rounded px-2 py-1 text-sm text-red-600 hover:bg-red-50" title={t("removeField")}
title="Remove field" aria-label={t("removeField")}
className="rounded p-1.5 text-red-600 hover:bg-red-50"
> >
Entfernen <Icon icon="mdi:delete-outline" className="size-5" aria-hidden />
</button> </button>
{f.type === "reference" && ( {f.type === "reference" && (
<input <Input
type="text" type="text"
value={f.collection} value={f.collection}
onChange={(e) => updateField(f.id, { collection: e.target.value })} onChange={(e) => updateField(f.id, { collection: e.target.value })}
placeholder="Collection (e.g. page)" placeholder={t("collectionPlaceholder")}
className="sm:col-span-2 rounded border border-gray-300 px-2 py-1.5 text-sm" className="h-8 text-sm sm:col-span-2"
/> />
)} )}
<input <Input
type="text" type="text"
value={f.description} value={f.description}
onChange={(e) => updateField(f.id, { description: e.target.value })} onChange={(e) => updateField(f.id, { description: e.target.value })}
placeholder="Field description (optional)" placeholder={t("fieldDescriptionPlaceholder")}
className="sm:col-span-2 rounded border border-gray-300 px-2 py-1.5 text-sm" className="h-8 text-sm sm:col-span-2"
/> />
</div> </div>
))} ))}
@@ -272,19 +250,12 @@ export default function NewTypePage() {
</div> </div>
<div className="flex gap-3"> <div className="flex gap-3">
<button <Button type="submit" disabled={submitting}>
type="submit" {submitting ? t("creating") : t("createType")}
disabled={submitting} </Button>
className="rounded-lg bg-gray-900 px-4 py-2 text-sm font-medium text-white hover:bg-gray-800 disabled:opacity-50" <Button variant="outline" asChild>
> <Link href="/">{t("cancel")}</Link>
{submitting ? "Creating…" : "Create type"} </Button>
</button>
<Link
href="/"
className="rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
>
Cancel
</Link>
</div> </div>
</form> </form>
</div> </div>

303
admin-ui/src/app/admin/types/[name]/edit/page.tsx Normal file
View File

@@ -0,0 +1,303 @@
"use client";
import { useState, useEffect } from "react";
import { useRouter, useParams } from "next/navigation";
import Link from "next/link";
import { Icon } from "@iconify/react";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { useTranslations } from "next-intl";
import { fetchSchema, updateSchema, type SchemaDefinition, type FieldDefinition } from "@/lib/api";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
const FIELD_TYPES = [
"string", "number", "integer", "boolean", "datetime",
"richtext", "html", "markdown", "reference", "array", "object",
"textOrRef", "referenceOrInline",
] as const;
type FieldRow = {
id: string;
name: string;
type: string;
required: boolean;
description: string;
collection: string;
original?: FieldDefinition;
};
function nextId() {
return Math.random().toString(36).slice(2, 9);
}
function schemaToFieldRows(schema: SchemaDefinition): FieldRow[] {
const fields = schema.fields ?? {};
return Object.entries(fields).map(([name, def]) => ({
id: nextId(),
name,
type: def.type ?? "string",
required: !!def.required,
description: (def.description as string) ?? "",
collection: (def.collection as string) ?? "",
original: def,
}));
}
export default function EditTypePage() {
const t = useTranslations("EditTypePage");
const router = useRouter();
const params = useParams();
const name = typeof params.name === "string" ? params.name : "";
const queryClient = useQueryClient();
const { data: schema, isLoading, error: fetchError } = useQuery({
queryKey: ["schema", name],
queryFn: () => fetchSchema(name),
enabled: !!name,
});
const [description, setDescription] = useState("");
const [category, setCategory] = useState("");
const [tagsStr, setTagsStr] = useState("");
const [strict, setStrict] = useState(false);
const [fields, setFields] = useState<FieldRow[]>([]);
const [error, setError] = useState<string | null>(null);
const [submitting, setSubmitting] = useState(false);
useEffect(() => {
if (schema) {
setDescription(schema.description ?? "");
setCategory(schema.category ?? "");
setTagsStr(schema.tags?.length ? schema.tags.join(", ") : "");
setStrict(!!schema.strict);
setFields(schemaToFieldRows(schema));
}
}, [schema]);
const addField = () => {
setFields((prev) => [
...prev,
{ id: nextId(), name: "", type: "string", required: false, description: "", collection: "" },
]);
};
const removeField = (id: string) => {
setFields((prev) => (prev.length <= 1 ? prev : prev.filter((f) => f.id !== id)));
};
const updateField = (id: string, patch: Partial<FieldRow>) => {
setFields((prev) => prev.map((f) => (f.id === id ? { ...f, ...patch } : f)));
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setError(null);
const fieldNames = fields.map((f) => f.name.trim()).filter(Boolean);
if (fieldNames.length === 0) { setError(t("fieldRequired")); return; }
if (new Set(fieldNames).size !== fieldNames.length) { setError(t("fieldNamesUnique")); return; }
const fieldsObj: Record<string, FieldDefinition> = {};
for (const row of fields) {
const fn = row.name.trim();
if (!fn) continue;
const base = row.original ?? {};
fieldsObj[fn] = {
...base,
type: row.type,
required: row.required,
description: row.description.trim() || undefined,
collection: row.type === "reference" && row.collection.trim() ? row.collection.trim() : undefined,
};
}
const payload: SchemaDefinition = {
...schema!,
name,
description: description.trim() || undefined,
category: category.trim() || undefined,
tags: tagsStr.trim() ? tagsStr.split(",").map((t) => t.trim()).filter(Boolean) : undefined,
strict,
fields: fieldsObj,
};
setSubmitting(true);
try {
await updateSchema(name, payload);
await queryClient.invalidateQueries({ queryKey: ["collections"] });
await queryClient.invalidateQueries({ queryKey: ["schema", name] });
router.push("/admin/types");
router.refresh();
} catch (err) {
setError(err instanceof Error ? err.message : t("errorSaving"));
setSubmitting(false);
}
};
if (!name) {
return (
<div>
<p className="text-gray-500">{t("missingName")}</p>
<Link href="/admin/types" className="link-accent mt-2 inline-block">{t("backToTypes")}</Link>
</div>
);
}
if (isLoading || !schema) {
return <p className="text-gray-500">{t("loading")}</p>;
}
if (fetchError) {
return (
<div>
<p className="text-red-600">{t("errorLoading", { error: String(fetchError) })}</p>
<Link href="/admin/types" className="link-accent mt-2 inline-block">{t("backToTypes")}</Link>
</div>
);
}
return (
<div className="max-w-2xl">
<h1 className="mb-6 text-2xl font-semibold text-gray-900">{t("title", { name })}</h1>
<p className="mb-6 text-sm text-gray-600">{t("description")}</p>
<form onSubmit={handleSubmit} className="space-y-6">
{error && (
<div className="rounded-lg bg-red-50 p-3 text-sm text-red-700">{error}</div>
)}
<div>
<Label className="mb-1 block">{t("nameLabel")}</Label>
<Input type="text" value={name} readOnly className="bg-gray-100 text-gray-600" />
</div>
<div>
<Label className="mb-1 block">{t("descriptionLabel")}</Label>
<Input
type="text"
value={description}
onChange={(e) => setDescription(e.target.value)}
/>
</div>
<div className="grid gap-4 sm:grid-cols-2">
<div>
<Label className="mb-1 block">{t("categoryLabel")}</Label>
<Input
type="text"
value={category}
onChange={(e) => setCategory(e.target.value)}
placeholder={t("categoryPlaceholder")}
/>
</div>
<div>
<Label className="mb-1 block">{t("tagsLabel")}</Label>
<Input
type="text"
value={tagsStr}
onChange={(e) => setTagsStr(e.target.value)}
placeholder={t("tagsPlaceholder")}
/>
</div>
</div>
<div className="flex items-center gap-2">
<Checkbox
id="strict"
checked={strict}
onCheckedChange={(checked) => setStrict(!!checked)}
/>
<label htmlFor="strict" className="text-sm text-gray-700">{t("strictLabel")}</label>
</div>
<div>
<div className="mb-2 flex items-center justify-between">
<Label>{t("fieldsLabel")}</Label>
<Button type="button" variant="outline" size="sm" onClick={addField}>
<Icon icon="mdi:plus" className="size-4" aria-hidden />
{t("addField")}
</Button>
</div>
<div className="space-y-3 rounded-lg border border-gray-200 bg-gray-50/50 p-4">
{fields.map((f) => (
<div
key={f.id}
className="grid gap-2 rounded border border-gray-200 bg-white p-3 sm:grid-cols-[1fr_1fr_auto_auto]"
>
<Input
type="text"
value={f.name}
onChange={(e) => updateField(f.id, { name: e.target.value })}
placeholder={t("fieldNamePlaceholder")}
className="h-8 text-sm"
/>
<Select
value={f.type}
onValueChange={(v) => updateField(f.id, { type: v })}
>
<SelectTrigger className="h-8 text-sm">
<SelectValue />
</SelectTrigger>
<SelectContent>
{FIELD_TYPES.map((type) => (
<SelectItem key={type} value={type}>{type}</SelectItem>
))}
</SelectContent>
</Select>
<label className="flex items-center gap-1 text-sm text-foreground">
<Checkbox
checked={f.required}
onCheckedChange={(checked) => updateField(f.id, { required: !!checked })}
/>
{t("required")}
</label>
<button
type="button"
onClick={() => removeField(f.id)}
title={t("removeField")}
aria-label={t("removeField")}
className="rounded p-1.5 text-red-600 hover:bg-red-50"
>
<Icon icon="mdi:delete-outline" className="size-5" aria-hidden />
</button>
{f.type === "reference" && (
<Input
type="text"
value={f.collection}
onChange={(e) => updateField(f.id, { collection: e.target.value })}
placeholder={t("collectionPlaceholder")}
className="h-8 text-sm sm:col-span-2"
/>
)}
<Input
type="text"
value={f.description}
onChange={(e) => updateField(f.id, { description: e.target.value })}
placeholder={t("fieldDescriptionPlaceholder")}
className="h-8 text-sm sm:col-span-2"
/>
</div>
))}
</div>
</div>
<div className="flex gap-3">
<Button type="submit" disabled={submitting}>
{submitting ? t("saving") : t("save")}
</Button>
<Button variant="outline" asChild>
<Link href="/admin/types">{t("cancel")}</Link>
</Button>
</div>
</form>
</div>
);
}

149
admin-ui/src/app/admin/types/page.tsx Normal file
View File

@@ -0,0 +1,149 @@
"use client";
import { useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { Icon } from "@iconify/react";
import { useTranslations } from "next-intl";
import { toast } from "sonner";
import { fetchCollections, deleteSchema } from "@/lib/api";
import type { CollectionMeta } from "@/lib/api";
import { Button } from "@/components/ui/button";
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
export default function TypesPage() {
const t = useTranslations("TypesPage");
const router = useRouter();
const queryClient = useQueryClient();
const [pendingDelete, setPendingDelete] = useState<string | null>(null);
const [deleting, setDeleting] = useState(false);
const { data, isLoading, error: fetchError } = useQuery({
queryKey: ["collections"],
queryFn: fetchCollections,
});
const types = data?.collections ?? [];
const handleDoDelete = async () => {
if (!pendingDelete) return;
setDeleting(true);
try {
await deleteSchema(pendingDelete);
await queryClient.invalidateQueries({ queryKey: ["collections"] });
setPendingDelete(null);
router.refresh();
} catch (e) {
toast.error(e instanceof Error ? e.message : "Delete failed.");
} finally {
setDeleting(false);
}
};
return (
<div>
<div className="mb-6 flex items-center justify-between">
<h1 className="text-2xl font-semibold text-gray-900">{t("title")}</h1>
<Button asChild>
<Link href="/admin/new-type">
<Icon icon="mdi:plus" className="size-5" aria-hidden />
{t("newType")}
</Link>
</Button>
</div>
<p className="mb-6 text-sm text-gray-600">{t("description")}</p>
{isLoading && <p className="text-gray-500">{t("loading")}</p>}
{fetchError && (
<p className="text-red-600">{t("errorLoading", { error: String(fetchError) })}</p>
)}
{!isLoading && !fetchError && types.length === 0 && (
<p className="text-gray-500">{t("noTypes")}</p>
)}
{!isLoading && !fetchError && types.length > 0 && (
<div className="overflow-x-auto -mx-4 px-4 sm:mx-0 sm:px-0 rounded-lg border border-gray-200">
<Table className="min-w-[400px]">
<TableHeader>
<TableRow>
<TableHead>{t("colName")}</TableHead>
<TableHead>{t("colDescription")}</TableHead>
<TableHead>{t("colCategory")}</TableHead>
<TableHead className="text-right">{t("colActions")}</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{types.map((c: CollectionMeta) => (
<TableRow key={c.name}>
<TableCell className="font-medium">{c.name}</TableCell>
<TableCell className="max-w-xs truncate text-gray-600" title={c.description}>
{c.description ?? "—"}
</TableCell>
<TableCell className="text-gray-600">{c.category ?? "—"}</TableCell>
<TableCell className="text-right">
<div className="flex items-center justify-end gap-2">
<Button variant="outline" size="sm" asChild>
<Link href={`/admin/types/${encodeURIComponent(c.name)}/edit`}>
<Icon icon="mdi:pencil-outline" className="size-4" aria-hidden />
{t("edit")}
</Link>
</Button>
<Button
variant="outline"
size="sm"
onClick={() => setPendingDelete(c.name)}
className="border-red-200 text-red-700 hover:bg-red-50 hover:text-red-800"
>
<Icon icon="mdi:delete-outline" className="size-4" aria-hidden />
{t("delete")}
</Button>
</div>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
)}
<AlertDialog open={!!pendingDelete} onOpenChange={(o) => !o && setPendingDelete(null)}>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>{t("confirmDelete", { name: pendingDelete ?? "" })}</AlertDialogTitle>
<AlertDialogDescription>
{t("confirmDeleteFinal", { name: pendingDelete ?? "" })}
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel disabled={deleting}>{t("cancel")}</AlertDialogCancel>
<AlertDialogAction
onClick={handleDoDelete}
disabled={deleting}
className="bg-destructive text-white hover:bg-destructive/90"
>
{deleting ? t("deleting") : t("yesDelete")}
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</div>
);
}

838
admin-ui/src/app/assets/page.tsx Normal file
View File

@@ -0,0 +1,838 @@
"use client";
import { useRef, useState } from "react";
import Image from "next/image";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { Icon } from "@iconify/react";
import { useTranslations } from "next-intl";
import { toast } from "sonner";
import {
fetchAssets,
fetchFolders,
uploadAsset,
deleteAsset,
renameAsset as apiRenameAsset,
copyAssetWithTransformation,
getTransformedFilename,
createFolder,
deleteFolder,
} from "@/lib/api";
import type { Asset, AssetFolder, TransformParams } from "@/lib/api";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
const API_BASE = process.env.NEXT_PUBLIC_RUSTYCMS_API_URL ?? "http://127.0.0.1:3000";
const ALL = "__all__";
const ROOT = "";
function formatBytes(n: number) {
if (n < 1024) return `${n} B`;
if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
return `${(n / 1024 / 1024).toFixed(1)} MB`;
}
function assetPath(asset: Asset) {
return asset.folder ? `${asset.folder}/${asset.filename}` : asset.filename;
}
export default function AssetsPage() {
const t = useTranslations("AssetsPage");
const qc = useQueryClient();
const fileInputRef = useRef<HTMLInputElement>(null);
// Folder navigation: ALL | ROOT ("") | folder name
const [selected, setSelected] = useState<string>(ALL);
// Upload
const [uploading, setUploading] = useState(false);
const [dragOver, setDragOver] = useState(false);
// Delete asset
const [pendingDeleteAsset, setPendingDeleteAsset] = useState<Asset | null>(null);
const [deletingAsset, setDeletingAsset] = useState(false);
// Preview
const [previewAsset, setPreviewAsset] = useState<Asset | null>(null);
// Delete folder
const [pendingDeleteFolder, setPendingDeleteFolder] = useState<AssetFolder | null>(null);
const [deletingFolder, setDeletingFolder] = useState(false);
// New folder
const [newFolderOpen, setNewFolderOpen] = useState(false);
const [newFolderName, setNewFolderName] = useState("");
const [creatingFolder, setCreatingFolder] = useState(false);
// Rename
const [renameTarget, setRenameTarget] = useState<Asset | null>(null);
const [renameFilename, setRenameFilename] = useState("");
const [renaming, setRenaming] = useState(false);
// Copy with transformation
const [copyTransformTarget, setCopyTransformTarget] = useState<Asset | null>(null);
const [copyTransformParams, setCopyTransformParams] = useState<TransformParams>({ format: "webp" });
const [copyTransformLoading, setCopyTransformLoading] = useState(false);
// Assets query: undefined = all, "" = root, "name" = folder
const assetsFolder = selected === ALL ? undefined : selected;
const { data: assetsData, isLoading: assetsLoading, error: assetsError } = useQuery({
queryKey: ["assets", assetsFolder],
queryFn: () => fetchAssets(assetsFolder),
});
const { data: foldersData, isLoading: foldersLoading } = useQuery({
queryKey: ["folders"],
queryFn: fetchFolders,
});
const assets = assetsData?.assets ?? [];
const folders = foldersData?.folders ?? [];
// ── Upload ──────────────────────────────────────────────────────────────
async function handleFiles(files: FileList | null) {
if (!files || files.length === 0) return;
setUploading(true);
const targetFolder = selected === ALL || selected === ROOT ? undefined : selected;
let ok = 0;
for (const file of Array.from(files)) {
try {
await uploadAsset(file, targetFolder);
ok++;
} catch (e) {
toast.error(`${file.name}: ${e instanceof Error ? e.message : "Upload failed"}`);
}
}
if (ok > 0) {
toast.success(t("uploadedCount", { count: ok }));
await qc.invalidateQueries({ queryKey: ["assets"] });
await qc.invalidateQueries({ queryKey: ["folders"] });
}
setUploading(false);
if (fileInputRef.current) fileInputRef.current.value = "";
}
// ── Delete asset ─────────────────────────────────────────────────────────
async function handleDeleteAsset() {
if (!pendingDeleteAsset) return;
setDeletingAsset(true);
try {
await deleteAsset(assetPath(pendingDeleteAsset));
toast.success(t("deleted", { filename: pendingDeleteAsset.filename }));
await qc.invalidateQueries({ queryKey: ["assets"] });
await qc.invalidateQueries({ queryKey: ["folders"] });
setPendingDeleteAsset(null);
} catch (e) {
toast.error(e instanceof Error ? e.message : "Delete failed");
} finally {
setDeletingAsset(false);
}
}
// ── Delete folder ────────────────────────────────────────────────────────
async function handleDeleteFolder() {
if (!pendingDeleteFolder) return;
setDeletingFolder(true);
try {
await deleteFolder(pendingDeleteFolder.name);
toast.success(t("folderDeleted", { name: pendingDeleteFolder.name }));
await qc.invalidateQueries({ queryKey: ["folders"] });
await qc.invalidateQueries({ queryKey: ["assets"] });
if (selected === pendingDeleteFolder.name) setSelected(ALL);
setPendingDeleteFolder(null);
} catch (e) {
toast.error(e instanceof Error ? e.message : "Delete folder failed");
} finally {
setDeletingFolder(false);
}
}
// ── Create folder ────────────────────────────────────────────────────────
async function handleCreateFolder(e: React.FormEvent) {
e.preventDefault();
if (!newFolderName.trim()) return;
setCreatingFolder(true);
try {
await createFolder(newFolderName.trim());
toast.success(t("folderCreated", { name: newFolderName.trim() }));
await qc.invalidateQueries({ queryKey: ["folders"] });
setSelected(newFolderName.trim().toLowerCase());
setNewFolderName("");
setNewFolderOpen(false);
} catch (e) {
toast.error(e instanceof Error ? e.message : "Create folder failed");
} finally {
setCreatingFolder(false);
}
}
// ── Copy URL ──────────────────────────────────────────────────────────────
function copyUrl(asset: Asset) {
navigator.clipboard.writeText(`${API_BASE}${asset.url}`);
toast.success(t("urlCopied"));
}
// ── Rename ───────────────────────────────────────────────────────────────
async function handleRename(e: React.FormEvent) {
e.preventDefault();
if (!renameTarget || !renameFilename.trim()) return;
setRenaming(true);
try {
const path = assetPath(renameTarget);
await apiRenameAsset(path, renameFilename.trim());
toast.success(t("renamed", { filename: renameFilename.trim() }));
await qc.invalidateQueries({ queryKey: ["assets"] });
await qc.invalidateQueries({ queryKey: ["folders"] });
setRenameTarget(null);
setRenameFilename("");
} catch (err) {
toast.error(err instanceof Error ? err.message : "Rename failed");
} finally {
setRenaming(false);
}
}
// ── Copy with transformation ──────────────────────────────────────────────
async function handleCopyWithTransform(e: React.FormEvent) {
e.preventDefault();
if (!copyTransformTarget) return;
setCopyTransformLoading(true);
try {
const folder = copyTransformTarget.folder ?? undefined;
await copyAssetWithTransformation(copyTransformTarget, copyTransformParams, folder);
toast.success(t("copyWithTransformDone"));
await qc.invalidateQueries({ queryKey: ["assets"] });
await qc.invalidateQueries({ queryKey: ["folders"] });
setCopyTransformTarget(null);
} catch (err) {
toast.error(err instanceof Error ? err.message : "Copy failed");
} finally {
setCopyTransformLoading(false);
}
}
// ── Upload hint ───────────────────────────────────────────────────────────
const uploadHint =
selected === ALL || selected === ROOT
? t("dropZoneHintRoot")
: t("dropZoneHintFolder", { folder: selected });
// ── Render ────────────────────────────────────────────────────────────────
const folderOptions = [
{ value: ALL, label: t("all") },
{ value: ROOT, label: t("root") },
...folders.map((f) => ({ value: f.name, label: f.name })),
];
return (
<div className="-m-4 flex h-full min-h-0 flex-col md:-m-6 md:flex-row">
{/* ── Folder sidebar (desktop) ── */}
<aside className="hidden w-52 shrink-0 flex-col border-r border-border bg-accent-50/40 md:flex">
<div className="flex items-center justify-between px-4 py-3">
<span className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
{t("folders")}
</span>
</div>
<nav className="flex-1 overflow-y-auto px-2 pb-2">
<FolderItem
label={t("all")}
icon="mdi:layers-outline"
active={selected === ALL}
onClick={() => setSelected(ALL)}
/>
<FolderItem
label={t("root")}
icon="mdi:folder-home-outline"
active={selected === ROOT}
onClick={() => setSelected(ROOT)}
/>
{foldersLoading && (
<p className="px-2 py-1 text-xs text-muted-foreground">{t("loading")}</p>
)}
{folders.length > 0 && <div className="my-1 border-t border-border/50" />}
{folders.map((f) => (
<FolderItem
key={f.name}
label={f.name}
count={f.count}
icon="mdi:folder-outline"
active={selected === f.name}
onClick={() => setSelected(f.name)}
onDelete={() => setPendingDeleteFolder(f)}
/>
))}
</nav>
<div className="border-t border-border px-2 py-2">
{newFolderOpen ? (
<form onSubmit={handleCreateFolder} className="flex gap-1">
<Input
value={newFolderName}
onChange={(e) => setNewFolderName(e.target.value)}
placeholder={t("folderNamePlaceholder")}
className="h-7 text-xs"
autoFocus
disabled={creatingFolder}
/>
<Button type="submit" size="sm" className="h-7 px-2" disabled={creatingFolder || !newFolderName.trim()}>
<Icon icon="mdi:check" className="size-3.5" />
</Button>
<Button
type="button"
size="sm"
variant="ghost"
className="h-7 px-2"
onClick={() => { setNewFolderOpen(false); setNewFolderName(""); }}
>
<Icon icon="mdi:close" className="size-3.5" />
</Button>
</form>
) : (
<button
type="button"
onClick={() => setNewFolderOpen(true)}
className="flex w-full items-center gap-1.5 rounded px-2 py-1.5 text-xs text-muted-foreground hover:bg-accent-100 hover:text-foreground"
>
<Icon icon="mdi:folder-plus-outline" className="size-4 shrink-0" aria-hidden />
{t("newFolder")}
</button>
)}
</div>
</aside>
{/* ── Mobile folder selector ── */}
<div className="shrink-0 border-b border-border bg-accent-50/40 px-4 py-3 md:hidden">
<div className="flex flex-wrap items-center gap-2">
<span className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
{t("folders")}:
</span>
<select
value={selected}
onChange={(e) => setSelected(e.target.value)}
className="min-h-[44px] flex-1 rounded-md border border-input bg-background px-3 py-2 text-sm font-medium touch-manipulation min-w-[120px]"
aria-label={t("folders")}
>
{folderOptions.map((opt) => (
<option key={opt.value} value={opt.value}>
{opt.label}
</option>
))}
</select>
{!newFolderOpen ? (
<Button
type="button"
variant="outline"
size="sm"
className="min-h-[44px] shrink-0"
onClick={() => setNewFolderOpen(true)}
>
<Icon icon="mdi:folder-plus-outline" className="size-4" aria-hidden />
{t("newFolder")}
</Button>
) : null}
</div>
{newFolderOpen && (
<form onSubmit={handleCreateFolder} className="mt-3 flex gap-2">
<Input
value={newFolderName}
onChange={(e) => setNewFolderName(e.target.value)}
placeholder={t("folderNamePlaceholder")}
className="min-h-[44px] flex-1 text-sm"
autoFocus
disabled={creatingFolder}
/>
<Button type="submit" size="sm" className="min-h-[44px] shrink-0" disabled={creatingFolder || !newFolderName.trim()}>
<Icon icon="mdi:check" className="size-4" aria-hidden />
</Button>
<Button
type="button"
size="sm"
variant="ghost"
className="min-h-[44px] shrink-0"
onClick={() => { setNewFolderOpen(false); setNewFolderName(""); }}
>
<Icon icon="mdi:close" className="size-4" aria-hidden />
</Button>
</form>
)}
</div>
{/* ── Main content ── */}
<div className="flex min-w-0 flex-1 flex-col overflow-hidden">
{/* Header */}
<div className="flex flex-col gap-3 border-b border-border px-4 py-3 sm:flex-row sm:items-center sm:justify-between md:px-6">
<div className="min-w-0">
<h1 className="truncate text-base font-semibold text-foreground sm:text-lg">
{selected === ALL ? t("titleAll") : selected === ROOT ? t("titleRoot") : selected}
</h1>
<p className="text-xs text-muted-foreground">
{t("assetCount", { count: assetsData?.total ?? 0 })}
</p>
</div>
<Button
onClick={() => fileInputRef.current?.click()}
disabled={uploading}
size="sm"
className="min-h-[44px] w-full shrink-0 sm:w-auto"
>
<Icon icon="mdi:upload" className="size-4" aria-hidden />
{uploading ? t("uploading") : t("upload")}
</Button>
</div>
{/* Hidden file input */}
<input
ref={fileInputRef}
type="file"
accept="image/jpeg,image/png,image/webp,image/avif,image/gif,image/svg+xml"
multiple
className="hidden"
onChange={(e) => handleFiles(e.target.files)}
/>
{/* Scrollable grid area */}
<div className="flex-1 overflow-y-auto p-4 md:p-6">
{/* Drop zone */}
<div
onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}
onDragLeave={() => setDragOver(false)}
onDrop={(e) => { e.preventDefault(); setDragOver(false); handleFiles(e.dataTransfer.files); }}
onClick={() => fileInputRef.current?.click()}
className={`mb-4 flex min-h-[56px] cursor-pointer items-center justify-center rounded-lg border-2 border-dashed px-4 py-4 transition-colors md:mb-6 md:py-5 md:px-6 touch-manipulation ${
dragOver
? "border-primary bg-primary/5"
: "border-accent-200 hover:border-accent-300 hover:bg-accent-50"
}`}
>
<div className="flex items-center gap-3 text-center text-sm text-muted-foreground sm:text-left">
<Icon icon="mdi:image-plus" className="size-5 shrink-0 text-accent-400" aria-hidden />
<span>{uploadHint}</span>
</div>
</div>
{/* Loading / error */}
{assetsLoading && <p className="text-sm text-muted-foreground">{t("loading")}</p>}
{assetsError && <p className="text-sm text-destructive">{t("errorLoading")}</p>}
{/* Empty */}
{!assetsLoading && !assetsError && assets.length === 0 && (
<p className="text-sm text-muted-foreground">{t("noAssets")}</p>
)}
{/* Grid */}
{assets.length > 0 && (
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3 sm:gap-4 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
{assets.map((asset) => (
<AssetCard
key={assetPath(asset)}
asset={asset}
showFolder={selected === ALL}
onPreview={() => setPreviewAsset(asset)}
onCopy={() => copyUrl(asset)}
onRename={() => { setRenameTarget(asset); setRenameFilename(asset.filename); }}
onCopyTransform={() => { setCopyTransformTarget(asset); setCopyTransformParams({ format: "webp" }); }}
onDelete={() => setPendingDeleteAsset(asset)}
/>
))}
</div>
)}
</div>
</div>
{/* ── Rename dialog ── */}
<Dialog open={!!renameTarget} onOpenChange={(o) => { if (!o) { setRenameTarget(null); setRenameFilename(""); } }}>
<DialogContent className="sm:max-w-md" showCloseButton>
<DialogHeader>
<DialogTitle>{t("renameTitle")}</DialogTitle>
</DialogHeader>
<form onSubmit={handleRename} className="flex flex-col gap-4">
<div>
<label htmlFor="rename-filename" className="mb-1 block text-sm font-medium text-foreground">
{t("renameFilenameLabel")}
</label>
<Input
id="rename-filename"
value={renameFilename}
onChange={(e) => setRenameFilename(e.target.value)}
placeholder="image.jpg"
disabled={renaming}
/>
</div>
<div className="flex justify-end gap-2">
<Button type="button" variant="outline" onClick={() => { setRenameTarget(null); setRenameFilename(""); }}>
{t("cancel")}
</Button>
<Button type="submit" disabled={renaming || !renameFilename.trim()}>
{renaming ? t("renaming") : t("rename")}
</Button>
</div>
</form>
</DialogContent>
</Dialog>
{/* ── Copy with transformation dialog ── */}
<Dialog open={!!copyTransformTarget} onOpenChange={(o) => { if (!o) setCopyTransformTarget(null); }}>
<DialogContent className="sm:max-w-md" showCloseButton>
<DialogHeader>
<DialogTitle>{t("copyWithTransformTitle")}</DialogTitle>
</DialogHeader>
<form onSubmit={handleCopyWithTransform} className="flex flex-col gap-4">
<p className="text-sm text-muted-foreground">{t("copyWithTransformDesc")}</p>
<div className="grid grid-cols-2 gap-3">
<div>
<label htmlFor="tw" className="mb-1 block text-xs font-medium text-foreground">Width</label>
<Input
id="tw"
type="number"
min={1}
placeholder="—"
value={copyTransformParams.w ?? ""}
onChange={(e) => setCopyTransformParams((p) => ({ ...p, w: e.target.value ? Number(e.target.value) : undefined }))}
className="h-8 text-sm"
/>
</div>
<div>
<label htmlFor="th" className="mb-1 block text-xs font-medium text-foreground">Height</label>
<Input
id="th"
type="number"
min={1}
placeholder="—"
value={copyTransformParams.h ?? ""}
onChange={(e) => setCopyTransformParams((p) => ({ ...p, h: e.target.value ? Number(e.target.value) : undefined }))}
className="h-8 text-sm"
/>
</div>
<div>
<label htmlFor="tar" className="mb-1 block text-xs font-medium text-foreground">Aspect (e.g. 1:1)</label>
<Input
id="tar"
placeholder="—"
value={copyTransformParams.ar ?? ""}
onChange={(e) => setCopyTransformParams((p) => ({ ...p, ar: e.target.value || undefined }))}
className="h-8 text-sm"
/>
</div>
<div>
<label htmlFor="tfit" className="mb-1 block text-xs font-medium text-foreground">Fit</label>
<select
id="tfit"
value={copyTransformParams.fit ?? "contain"}
onChange={(e) => setCopyTransformParams((p) => ({ ...p, fit: e.target.value as TransformParams["fit"] }))}
className="h-8 w-full rounded-md border border-input bg-background px-3 py-1 text-sm"
>
<option value="contain">contain</option>
<option value="cover">cover</option>
<option value="fill">fill</option>
</select>
</div>
<div className="col-span-2">
<label htmlFor="tformat" className="mb-1 block text-xs font-medium text-foreground">Format</label>
<select
id="tformat"
value={copyTransformParams.format ?? "webp"}
onChange={(e) => setCopyTransformParams((p) => ({ ...p, format: e.target.value as TransformParams["format"] }))}
className="h-8 w-full rounded-md border border-input bg-background px-3 py-1 text-sm"
>
<option value="jpeg">JPEG</option>
<option value="png">PNG</option>
<option value="webp">WebP</option>
<option value="avif">AVIF</option>
</select>
</div>
</div>
{copyTransformTarget && (
<p className="text-xs text-muted-foreground">
{t("copyWithTransformNewName")}: <span className="font-mono">{getTransformedFilename(copyTransformTarget.filename, copyTransformParams)}</span>
</p>
)}
<div className="flex justify-end gap-2">
<Button type="button" variant="outline" onClick={() => setCopyTransformTarget(null)}>
{t("cancel")}
</Button>
<Button type="submit" disabled={copyTransformLoading}>
{copyTransformLoading ? t("creating") : t("copyWithTransformCreate")}
</Button>
</div>
</form>
</DialogContent>
</Dialog>
{/* ── Preview dialog ── */}
<Dialog open={!!previewAsset} onOpenChange={(o) => { if (!o) setPreviewAsset(null); }}>
<DialogContent className="flex max-h-[90vh] max-w-4xl flex-col overflow-hidden" showCloseButton>
{previewAsset && (
<>
<DialogHeader className="shrink-0">
<DialogTitle className="truncate pr-8" title={previewAsset.filename}>
{previewAsset.filename}
</DialogTitle>
</DialogHeader>
<div className="flex min-h-0 flex-1 flex-col gap-4 overflow-hidden">
<div className="flex min-h-0 flex-1 justify-center overflow-hidden rounded-md bg-accent-50 p-4">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src={`${API_BASE}${previewAsset.url}`}
alt={previewAsset.filename}
className="max-h-[60vh] max-w-full object-contain"
/>
</div>
<p className="text-xs text-muted-foreground">
{formatBytes(previewAsset.size)}
{previewAsset.folder && (
<span className="ml-2 rounded bg-accent-100 px-1.5 py-0.5 text-accent-700">
{previewAsset.folder}
</span>
)}
</p>
<Button
variant="outline"
size="sm"
onClick={() => previewAsset && copyUrl(previewAsset)}
>
<Icon icon="mdi:content-copy" className="size-4" aria-hidden />
{t("copyUrl")}
</Button>
</div>
</>
)}
</DialogContent>
</Dialog>
{/* ── Delete asset dialog ── */}
<AlertDialog
open={!!pendingDeleteAsset}
onOpenChange={(o) => { if (!o) setPendingDeleteAsset(null); }}
>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>{t("confirmDelete", { filename: pendingDeleteAsset?.filename ?? "" })}</AlertDialogTitle>
<AlertDialogDescription>{t("confirmDeleteDesc")}</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel disabled={deletingAsset}>{t("cancel")}</AlertDialogCancel>
<AlertDialogAction
onClick={handleDeleteAsset}
disabled={deletingAsset}
className="bg-destructive text-white hover:bg-destructive/90"
>
{deletingAsset ? t("deleting") : t("yesDelete")}
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
{/* ── Delete folder dialog ── */}
<AlertDialog
open={!!pendingDeleteFolder}
onOpenChange={(o) => { if (!o) setPendingDeleteFolder(null); }}
>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>{t("confirmDeleteFolder", { name: pendingDeleteFolder?.name ?? "" })}</AlertDialogTitle>
<AlertDialogDescription>{t("confirmDeleteFolderDesc")}</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel disabled={deletingFolder}>{t("cancel")}</AlertDialogCancel>
<AlertDialogAction
onClick={handleDeleteFolder}
disabled={deletingFolder}
className="bg-destructive text-white hover:bg-destructive/90"
>
{deletingFolder ? t("deleting") : t("yesDelete")}
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</div>
);
}
// ── Sub-components ──────────────────────────────────────────────────────────
function FolderItem({
label,
icon,
count,
active,
onClick,
onDelete,
}: {
label: string;
icon: string;
count?: number;
active: boolean;
onClick: () => void;
onDelete?: () => void;
}) {
return (
<div
className={`group flex items-center justify-between rounded px-2 py-1.5 text-sm cursor-pointer ${
active
? "bg-accent-200/70 font-medium text-gray-900"
: "text-gray-700 hover:bg-accent-100/80 hover:text-gray-900"
}`}
onClick={onClick}
>
<span className="flex min-w-0 items-center gap-2">
<Icon icon={icon} className="size-4 shrink-0" aria-hidden />
<span className="truncate">{label}</span>
</span>
<span className="flex shrink-0 items-center gap-1">
{count !== undefined && (
<span className="text-xs text-muted-foreground tabular-nums">{count}</span>
)}
{onDelete && (
<button
type="button"
onClick={(e) => { e.stopPropagation(); onDelete(); }}
className="rounded p-0.5 opacity-0 hover:bg-destructive/10 hover:text-destructive group-hover:opacity-100"
title="Delete folder"
>
<Icon icon="mdi:trash-can-outline" className="size-3.5" aria-hidden />
</button>
)}
</span>
</div>
);
}
function AssetCard({
asset,
showFolder,
onPreview,
onCopy,
onRename,
onCopyTransform,
onDelete,
}: {
asset: Asset;
showFolder: boolean;
onPreview: () => void;
onCopy: () => void;
onRename: () => void;
onCopyTransform: () => void;
onDelete: () => void;
}) {
return (
<div className="group relative overflow-hidden rounded-lg border border-border bg-white shadow-xs">
{/* Thumbnail (click to preview) */}
<button
type="button"
onClick={onPreview}
className="relative aspect-square w-full cursor-pointer bg-accent-50 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-inset touch-manipulation"
>
{asset.mime_type === "image/svg+xml" ? (
// eslint-disable-next-line @next/next/no-img-element
<img
src={`${API_BASE}${asset.url}`}
alt={asset.filename}
className="h-full w-full object-contain p-2"
/>
) : (
<Image
src={`${API_BASE}${asset.url}`}
alt={asset.filename}
fill
className="object-cover"
sizes="(max-width: 640px) 50vw, 200px"
unoptimized
/>
)}
</button>
{/* Info */}
<div className="px-2 py-1.5">
<p className="truncate text-xs font-medium text-foreground" title={asset.filename}>
{asset.filename}
</p>
<p className="text-xs text-muted-foreground">
{showFolder && asset.folder && (
<span className="mr-1 rounded bg-accent-100 px-1 text-accent-700">{asset.folder}</span>
)}
{formatBytes(asset.size)}
</p>
</div>
{/* Mobile: always-visible action row (touch-friendly) */}
<div className="flex items-center justify-end gap-1 border-t border-border/50 px-2 py-1.5 md:hidden">
<button type="button" onClick={(e) => { e.stopPropagation(); onCopy(); }} className="inline-flex size-9 shrink-0 items-center justify-center rounded-md border border-border bg-white text-gray-700 hover:bg-accent-50 touch-manipulation" title="Copy URL" aria-label="Copy URL">
<Icon icon="mdi:content-copy" className="size-4" aria-hidden />
</button>
<button type="button" onClick={(e) => { e.stopPropagation(); onRename(); }} className="inline-flex size-9 shrink-0 items-center justify-center rounded-md border border-border bg-white text-gray-700 hover:bg-accent-50 touch-manipulation" title="Rename" aria-label="Rename">
<Icon icon="mdi:pencil" className="size-4" aria-hidden />
</button>
<button type="button" onClick={(e) => { e.stopPropagation(); onCopyTransform(); }} className="inline-flex size-9 shrink-0 items-center justify-center rounded-md border border-border bg-white text-gray-700 hover:bg-accent-50 touch-manipulation" title="Copy with transformation" aria-label="Copy with transformation">
<Icon icon="mdi:image-multiple-outline" className="size-4" aria-hidden />
</button>
<button type="button" onClick={(e) => { e.stopPropagation(); onDelete(); }} className="inline-flex size-9 shrink-0 items-center justify-center rounded-md border border-border bg-white text-gray-700 hover:bg-destructive hover:text-white touch-manipulation" title="Delete" aria-label="Delete">
<Icon icon="mdi:trash-can-outline" className="size-4" aria-hidden />
</button>
</div>
{/* Hover actions – stopPropagation so click doesn’t trigger thumbnail preview */}
<div className="absolute inset-x-0 top-0 hidden flex-wrap justify-end gap-0.5 p-1 opacity-0 transition-opacity group-hover:opacity-100 md:flex">
<button
type="button"
onClick={(e) => { e.stopPropagation(); onCopy(); }}
title="Copy URL"
className="rounded bg-white/90 p-1 shadow-sm hover:bg-white"
>
<Icon icon="mdi:content-copy" className="size-4 text-gray-700" aria-hidden />
</button>
<button
type="button"
onClick={(e) => { e.stopPropagation(); onRename(); }}
title="Rename"
className="rounded bg-white/90 p-1 shadow-sm hover:bg-white"
>
<Icon icon="mdi:pencil" className="size-4 text-gray-700" aria-hidden />
</button>
<button
type="button"
onClick={(e) => { e.stopPropagation(); onCopyTransform(); }}
title="Copy with transformation"
className="rounded bg-white/90 p-1 shadow-sm hover:bg-white"
>
<Icon icon="mdi:image-multiple-outline" className="size-4 text-gray-700" aria-hidden />
</button>
<button
type="button"
onClick={(e) => { e.stopPropagation(); onDelete(); }}
title="Delete"
className="rounded bg-white/90 p-1 shadow-sm hover:bg-destructive hover:text-white"
>
<Icon icon="mdi:trash-can-outline" className="size-4" aria-hidden />
</button>
</div>
</div>
);
}

148
admin-ui/src/app/content/[collection]/[slug]/page.tsx Normal file
View File

@@ -0,0 +1,148 @@
"use client";
import { useEffect } from "react";
import Link from "next/link";
import { useParams, useSearchParams } from "next/navigation";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { Icon } from "@iconify/react";
import { useTranslations } from "next-intl";
import { fetchSchema, fetchEntry, fetchLocales } from "@/lib/api";
import { ContentForm } from "@/components/ContentForm";
import { SchemaAndPreviewBar } from "@/components/SchemaAndPreviewBar";
import { ContentLocaleSwitcher } from "@/components/ContentLocaleSwitcher";
import { Breadcrumbs } from "@/components/Breadcrumbs";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
export default function ContentEditPage() {
const t = useTranslations("ContentEditPage");
const tList = useTranslations("ContentForm");
const params = useParams();
const searchParams = useSearchParams();
const queryClient = useQueryClient();
const collection = typeof params.collection === "string" ? params.collection : "";
const slug = typeof params.slug === "string" ? params.slug : "";
const locale = searchParams.get("_locale") ?? undefined;
const { data: schema, isLoading: schemaLoading, error: schemaError } = useQuery({
queryKey: ["schema", collection],
queryFn: () => fetchSchema(collection),
enabled: !!collection,
});
const {
data: entry,
isLoading: entryLoading,
error: entryError,
} = useQuery({
queryKey: ["entry", collection, slug, locale ?? ""],
queryFn: () =>
fetchEntry(collection, slug, {
...(locale ? { _locale: locale } : {}),
}),
enabled: !!collection && !!slug,
});
const { data: localesData } = useQuery({
queryKey: ["locales"],
queryFn: fetchLocales,
});
const locales = localesData?.locales ?? [];
const defaultLocale = localesData?.default ?? null;
const onSuccess = () => {
void queryClient.invalidateQueries({ queryKey: ["entry", collection, slug] });
void queryClient.invalidateQueries({ queryKey: ["content", collection] });
};
if (!collection || !slug) {
return (
<div className="rounded bg-amber-50 p-4 text-amber-800">
Missing collection or slug.
</div>
);
}
const localeQ = locale ? `?_locale=${locale}` : "";
const listHref = `/content/${collection}${localeQ}`;
const isLoading = schemaLoading || entryLoading;
const error = schemaError ?? entryError;
const tBread = useTranslations("Breadcrumbs");
useEffect(() => {
document.title = schema && entry
? `${slug} — ${collection} — RustyCMS Admin`
: "RustyCMS Admin";
return () => {
document.title = "RustyCMS Admin";
};
}, [collection, slug, schema, entry]);
return (
<div>
<Breadcrumbs
items={[
{ label: tBread("content"), href: "/" },
{ label: collection, href: listHref },
{ label: slug },
]}
/>
<div className="mb-4 flex flex-wrap items-center justify-between gap-3">
<div className="flex flex-wrap items-center gap-3">
<Button variant="outline" size="sm" asChild>
<Link href={listHref}>
<Icon icon="mdi:arrow-left" className="size-4" aria-hidden />
{tList("backToList")}
</Link>
</Button>
<ContentLocaleSwitcher
locales={locales}
defaultLocale={defaultLocale}
currentLocale={locale}
/>
</div>
<SchemaAndPreviewBar
schema={schema ?? null}
collection={collection}
slug={slug}
locale={locale}
/>
</div>
<h1 className="mb-6 text-2xl font-semibold text-gray-900">
{t("title")} — {slug}
</h1>
{isLoading && (
<div className="max-w-2xl space-y-8">
<Skeleton className="h-10 w-full" />
<Skeleton className="h-24 w-full" />
<Skeleton className="h-24 w-full" />
<Skeleton className="h-32 w-full" />
</div>
)}
{error && (
<p className="text-red-600" role="alert">
{error instanceof Error ? error.message : String(error)}
</p>
)}
{!isLoading && !error && schema && entry && (
<ContentForm
collection={collection}
schema={schema}
initialValues={entry as Record<string, unknown>}
slug={slug}
locale={locale}
onSuccess={onSuccess}
/>
)}
{!isLoading && !error && schema && !entry && (
<p className="text-amber-700">
Entry not found. It may have been deleted or the slug is wrong.
</p>
)}
</div>
);
}

102
admin-ui/src/app/content/[collection]/new/page.tsx Normal file
View File

@@ -0,0 +1,102 @@
"use client";
import { useEffect } from "react";
import Link from "next/link";
import { useParams, useSearchParams } from "next/navigation";
import { useQuery } from "@tanstack/react-query";
import { Icon } from "@iconify/react";
import { useTranslations } from "next-intl";
import { fetchSchema, fetchLocales } from "@/lib/api";
import { ContentForm } from "@/components/ContentForm";
import { SchemaAndEditBar } from "@/components/SchemaAndEditBar";
import { ContentLocaleSwitcher } from "@/components/ContentLocaleSwitcher";
import { Breadcrumbs } from "@/components/Breadcrumbs";
import { Button } from "@/components/ui/button";
export default function ContentNewPage() {
const t = useTranslations("ContentNewPage");
const tList = useTranslations("ContentForm");
const params = useParams();
const searchParams = useSearchParams();
const collection = typeof params.collection === "string" ? params.collection : "";
const locale = searchParams.get("_locale") ?? undefined;
const { data: schema, isLoading: schemaLoading, error: schemaError } = useQuery({
queryKey: ["schema", collection],
queryFn: () => fetchSchema(collection),
enabled: !!collection,
});
const { data: localesData } = useQuery({
queryKey: ["locales"],
queryFn: fetchLocales,
});
const locales = localesData?.locales ?? [];
const defaultLocale = localesData?.default ?? null;
if (!collection) {
return (
<div className="rounded bg-amber-50 p-4 text-amber-800">
Missing collection name.
</div>
);
}
const localeQ = locale ? `?_locale=${locale}` : "";
const listHref = `/content/${collection}${localeQ}`;
const tBread = useTranslations("Breadcrumbs");
const tNew = useTranslations("ContentNewPage");
useEffect(() => {
document.title = collection ? `New — ${collection} — RustyCMS Admin` : "RustyCMS Admin";
return () => {
document.title = "RustyCMS Admin";
};
}, [collection]);
return (
<div>
<Breadcrumbs
items={[
{ label: tBread("content"), href: "/" },
{ label: collection, href: listHref },
{ label: tNew("breadcrumbNew") },
]}
/>
<div className="mb-4 flex flex-wrap items-center justify-between gap-3">
<div className="flex flex-wrap items-center gap-3">
<Button variant="outline" size="sm" asChild>
<Link href={listHref}>
<Icon icon="mdi:arrow-left" className="size-4" aria-hidden />
{tList("backToList")}
</Link>
</Button>
<ContentLocaleSwitcher
locales={locales}
defaultLocale={defaultLocale}
currentLocale={locale}
/>
</div>
<SchemaAndEditBar schema={schema ?? null} collection={collection} />
</div>
<h1 className="mb-6 text-2xl font-semibold text-gray-900">
{t("title")} — {collection}
</h1>
{schemaLoading && <p className="text-gray-500">Loading…</p>}
{schemaError && (
<p className="text-red-600" role="alert">
{schemaError instanceof Error ? schemaError.message : String(schemaError)}
</p>
)}
{!schemaLoading && !schemaError && schema && (
<ContentForm
collection={collection}
schema={schema}
locale={locale}
/>
)}
</div>
);
}

233
admin-ui/src/app/content/[collection]/page.tsx Normal file
View File

@@ -0,0 +1,233 @@
"use client";
import { useEffect } from "react";
import Link from "next/link";
import { useParams, useSearchParams } from "next/navigation";
import { useQuery } from "@tanstack/react-query";
import { Icon } from "@iconify/react";
import { useTranslations } from "next-intl";
import { fetchContentList, fetchLocales } from "@/lib/api";
import { Button } from "@/components/ui/button";
import { SearchBar } from "@/components/SearchBar";
import { PaginationLinks } from "@/components/PaginationLinks";
import { ContentLocaleSwitcher } from "@/components/ContentLocaleSwitcher";
import { Breadcrumbs } from "@/components/Breadcrumbs";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { Skeleton } from "@/components/ui/skeleton";
const PER_PAGE = 20;
export default function ContentListPage() {
const t = useTranslations("ContentListPage");
const params = useParams();
const searchParams = useSearchParams();
const collection = typeof params.collection === "string" ? params.collection : "";
const page = Math.max(1, parseInt(searchParams.get("_page") ?? "1", 10) || 1);
const sort = searchParams.get("_sort") ?? undefined;
const order = (searchParams.get("_order") ?? "asc") as "asc" | "desc";
const q = searchParams.get("_q") ?? undefined;
const locale = searchParams.get("_locale") ?? undefined;
const { data: localesData } = useQuery({
queryKey: ["locales"],
queryFn: fetchLocales,
});
const locales = localesData?.locales ?? [];
const defaultLocale = localesData?.default ?? null;
const listParams = {
_page: page,
_per_page: PER_PAGE,
...(sort ? { _sort: sort, _order: order } : {}),
...(q?.trim() ? { _q: q.trim() } : {}),
...(locale ? { _locale: locale } : {}),
};
const { data, isLoading, error } = useQuery({
queryKey: ["content", collection, listParams],
queryFn: () => fetchContentList(collection, listParams),
enabled: !!collection,
});
if (!collection) {
return (
<div className="rounded bg-amber-50 p-4 text-amber-800">
Missing collection name.
</div>
);
}
const items = data?.items ?? [];
const total = data?.total ?? 0;
const totalPages = data?.total_pages ?? 1;
const localeQ = locale ? `_locale=${locale}` : "";
const baseQuery = new URLSearchParams();
if (locale) baseQuery.set("_locale", locale);
if (q?.trim()) baseQuery.set("_q", q.trim());
const sortQuery = (field: string, order: "asc" | "desc") => {
const p = new URLSearchParams(baseQuery);
p.set("_sort", field);
p.set("_order", order);
return p.toString();
};
const isSortSlug = sort === "_slug" || !sort;
const nextSlugOrder = isSortSlug && order === "asc" ? "desc" : "asc";
const tBread = useTranslations("Breadcrumbs");
useEffect(() => {
document.title = collection ? `${collection} — RustyCMS Admin` : "RustyCMS Admin";
return () => {
document.title = "RustyCMS Admin";
};
}, [collection]);
return (
<div>
<Breadcrumbs
items={[
{ label: tBread("content"), href: "/" },
{ label: collection },
]}
/>
<div className="mb-6 flex flex-col gap-4 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between">
<h1 className="text-xl font-semibold text-gray-900 sm:text-2xl truncate">
{collection}
</h1>
<div className="flex flex-wrap items-center gap-3">
<ContentLocaleSwitcher
locales={locales}
defaultLocale={defaultLocale}
currentLocale={locale}
/>
<SearchBar
placeholder={t("searchPlaceholder")}
paramName="_q"
/>
<Button asChild className="min-h-[44px] sm:min-h-0">
<Link href={`/content/${collection}/new${localeQ ? `?${localeQ}` : ""}`}>
<Icon icon="mdi:plus" className="size-5" aria-hidden />
{t("newEntry")}
</Link>
</Button>
</div>
</div>
{isLoading && (
<div className="space-y-3">
<Skeleton className="h-10 w-full max-w-md" />
<div className="rounded-lg border border-gray-200">
<Table>
<TableHeader>
<TableRow>
<TableHead>_slug</TableHead>
<TableHead className="w-24 text-right">{t("colActions")}</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{[1, 2, 3, 4, 5].map((i) => (
<TableRow key={i}>
<TableCell><Skeleton className="h-5 w-48" /></TableCell>
<TableCell className="text-right"><Skeleton className="ml-auto h-8 w-16" /></TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
</div>
)}
{error && (
<p className="text-red-600" role="alert">
{error instanceof Error ? error.message : String(error)}
</p>
)}
{!isLoading && !error && items.length === 0 && (
<div
className="mx-auto max-w-md rounded-xl border border-gray-200 bg-gray-50/80 px-8 text-center shadow-sm"
style={{ marginTop: "1.25rem", marginBottom: "1.25rem", paddingTop: "2rem", paddingBottom: "2.5rem" }}
>
<p className="text-base text-gray-600" style={{ marginBottom: "1.5rem" }}>
{t("noEntriesCreate")}
</p>
<div className="flex justify-center" style={{ marginBottom: "1rem" }}>
<Button asChild className="min-h-[44px] sm:min-h-0">
<Link href={`/content/${collection}/new${localeQ ? `?${localeQ}` : ""}`}>
<Icon icon="mdi:plus" className="size-5" aria-hidden />
{t("newEntry")}
</Link>
</Button>
</div>
</div>
)}
{!isLoading && !error && items.length > 0 && (
<>
<div className="overflow-x-auto -mx-4 px-4 sm:mx-0 sm:px-0 rounded-lg border border-gray-200">
<Table className="min-w-[280px]">
<TableHeader>
<TableRow>
<TableHead>
<Link
href={`/content/${collection}?${sortQuery("_slug", nextSlugOrder)}`}
className="inline-flex items-center gap-1 font-medium hover:underline"
title={t("sortBy", { field: "_slug" })}
>
_slug
{isSortSlug && (
<Icon
icon={order === "asc" ? "mdi:chevron-up" : "mdi:chevron-down"}
className="size-4"
aria-label={order === "asc" ? t("sortAsc") : t("sortDesc")}
/>
)}
</Link>
</TableHead>
<TableHead className="w-24 text-right">{t("colActions")}</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{items.map((entry: Record<string, unknown>) => {
const slug = entry._slug as string | undefined;
if (slug == null) return null;
const editHref = `/content/${collection}/${encodeURIComponent(slug)}${localeQ ? `?${localeQ}` : ""}`;
return (
<TableRow key={slug}>
<TableCell className="font-mono text-sm">{slug}</TableCell>
<TableCell className="text-right">
<Button variant="outline" size="sm" asChild className="min-h-[44px] sm:min-h-0">
<Link href={editHref}>
<Icon icon="mdi:pencil-outline" className="size-4" aria-hidden />
{t("edit")}
</Link>
</Button>
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</div>
<PaginationLinks
collection={collection}
page={page}
totalPages={totalPages}
total={total}
locale={locale ?? undefined}
sort={sort}
order={order}
q={q ?? undefined}
/>
</>
)}
</div>
);
}

117
admin-ui/src/app/globals.css
View File

@@ -1,34 +1,125 @@
@import "tailwindcss"; @import "tailwindcss";
@plugin "tailwindcss-animate";
@import "@fontsource-variable/space-grotesk";
:root { :root {
--background: #ffffff; --background: #ffffff;
--foreground: #171717; --foreground: #171717;
--font-sans: "Space Grotesk Variable", ui-sans-serif, system-ui, sans-serif;
/* Rose/Rost Accent-Skala (bleibt erhalten für bestehende Tailwind-Utilities) */
--accent-50: #fff1f2;
--accent-100: #ffe4e6;
--accent-200: #fecdd3;
--accent-300: #fda4af;
--accent-400: #fb7185;
--accent-500: #f43f5e;
--accent-600: #e11d48;
--accent-700: #be123c;
--accent-800: #9f1239;
--accent-900: #881337;
/* shadcn semantische Variablen — primary = rose */
--primary: #e11d48;
--primary-foreground: #ffffff;
--secondary: #fff1f2;
--secondary-foreground: #9f1239;
--muted: #f9fafb;
--muted-foreground: #6b7280;
--card: #ffffff;
--card-foreground: #171717;
--popover: #ffffff;
--popover-foreground: #171717;
--border: #d1d5db;
--input: #d1d5db;
--ring: #fda4af;
--destructive: #dc2626;
--destructive-foreground: #ffffff;
--radius: 0.5rem;
/* shadcn accent = subtiler Hover-Hintergrund (z.B. SelectItem, CommandItem) */
--shadcn-accent: #fff1f2;
--shadcn-accent-foreground: #881337;
} }
@theme inline { @theme inline {
--color-background: var(--background); --color-background: var(--background);
--color-foreground: var(--foreground); --color-foreground: var(--foreground);
--font-sans: var(--font-geist-sans); --font-sans: var(--font-sans);
--font-mono: var(--font-geist-mono);
/* Accent-Skala für bestehende Utilities */
--color-accent-50: var(--accent-50);
--color-accent-100: var(--accent-100);
--color-accent-200: var(--accent-200);
--color-accent-300: var(--accent-300);
--color-accent-400: var(--accent-400);
--color-accent-500: var(--accent-500);
--color-accent-600: var(--accent-600);
--color-accent-700: var(--accent-700);
--color-accent-800: var(--accent-800);
--color-accent-900: var(--accent-900);
/* shadcn semantische Tokens */
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
/* shadcn accent Utility-Klassen (bg-accent, text-accent-foreground) */
--color-accent: var(--shadcn-accent);
--color-accent-foreground: var(--shadcn-accent-foreground);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
} }
@media (prefers-color-scheme: dark) { html, body {
:root { height: 100%;
--background: #0a0a0a; overflow: hidden;
--foreground: #ededed; }
/* Safe area for notched devices (e.g. iPhone) */
@supports (padding: env(safe-area-inset-top)) {
body {
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
} }
} }
body { body {
background: var(--background); background: var(--background);
color: var(--foreground); color: var(--foreground);
font-family: Arial, Helvetica, sans-serif; font-family: var(--font-sans);
} }
/* Lesbare Eingabefelder: dunkler Text, heller Hintergrund */ /* Links: exclude elements used as buttons (Slot.Root forwards data-slot) */
input:not([type="checkbox"]):not([type="radio"]), a:not([data-slot="button"]) {
textarea, color: var(--accent-700);
select { text-decoration: underline;
color: #111827; /* gray-900 */ text-underline-offset: 2px;
background-color: #ffffff; }
a:not([data-slot="button"]):hover {
color: var(--accent-800);
}
/* Text-Links (Rostrot) */
.link-accent {
color: var(--accent-700);
text-decoration: underline;
text-underline-offset: 2px;
}
.link-accent:hover {
color: var(--accent-800);
} }

110
admin-ui/src/app/globals.css.bak Normal file
View File

@@ -0,0 +1,110 @@
@import "tailwindcss";
@import "@fontsource-variable/space-grotesk";
/* Accent (Rost/Rose) – zentral für Buttons, Links, Hover; hier anpassen für neues Look */
:root {
--background: #ffffff;
--foreground: #171717;
--font-sans: "Space Grotesk Variable", ui-sans-serif, system-ui, sans-serif;
--accent-50: #fff1f2;
--accent-100: #ffe4e6;
--accent-200: #fecdd3;
--accent-300: #fda4af;
--accent-400: #fb7185;
--accent-500: #f43f5e;
--accent-600: #e11d48;
--accent-700: #be123c;
--accent-800: #9f1239;
--accent-900: #881337;
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-sans);
--font-mono: var(--font-geist-mono);
--color-accent-50: var(--accent-50);
--color-accent-100: var(--accent-100);
--color-accent-200: var(--accent-200);
--color-accent-300: var(--accent-300);
--color-accent-400: var(--accent-400);
--color-accent-500: var(--accent-500);
--color-accent-600: var(--accent-600);
--color-accent-700: var(--accent-700);
--color-accent-800: var(--accent-800);
--color-accent-900: var(--accent-900);
}
/* Primär-Button (z.B. „Speichern“, „New entry“) */
.btn-primary {
@apply shrink-0 whitespace-nowrap rounded-lg px-4 py-2 text-sm font-medium text-white transition-colors;
background-color: var(--accent-600);
}
.btn-primary:hover:not(:disabled) {
background-color: var(--accent-700);
}
.btn-primary:disabled {
@apply opacity-50;
}
/* Sekundär-Button / Outline (z.B. „Abbrechen“, „Back“) */
.btn-secondary {
@apply rounded-lg border px-4 py-2 text-sm font-medium transition-colors;
border-color: var(--accent-200);
color: var(--accent-800);
background-color: #fff;
}
.btn-secondary:hover {
background-color: var(--accent-50);
}
/* Kleine Outline-Buttons / Links (z.B. Schema bearbeiten, Pagination) */
.btn-outline {
@apply inline-flex items-center gap-2 rounded border px-3 py-1.5 text-sm font-medium transition-colors;
border-color: var(--accent-200);
color: var(--accent-800);
background-color: #fff;
}
.btn-outline:hover {
background-color: var(--accent-50);
}
/* Text-Links (Rostrot, zentral steuerbar) – Klasse für Inline-Links */
.link-accent {
color: var(--accent-700);
text-decoration: underline;
text-underline-offset: 2px;
}
.link-accent:hover {
color: var(--accent-800);
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}
body {
background: var(--background);
color: var(--foreground);
font-family: var(--font-sans);
}
a {
color: var(--accent-700);
text-decoration: underline;
text-underline-offset: 2px;
}
a:hover {
color: var(--accent-800);
}
/* Lesbare Eingabefelder: dunkler Text, heller Hintergrund */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
color: #111827; /* gray-900 */
background-color: #ffffff;
}

39
admin-ui/src/app/layout.tsx
View File

@@ -1,14 +1,12 @@
import type { Metadata } from "next"; import type { Metadata, Viewport } from "next";
import { Geist, Geist_Mono } from "next/font/google"; import { Geist_Mono } from "next/font/google";
import { NextIntlClientProvider } from "next-intl";
import { getLocale, getMessages } from "next-intl/server";
import { Providers } from "./providers"; import { Providers } from "./providers";
import { Sidebar } from "@/components/Sidebar"; import { AppShell } from "@/components/AppShell";
import { Toaster } from "sonner";
import "./globals.css"; import "./globals.css";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({ const geistMono = Geist_Mono({
variable: "--font-geist-mono", variable: "--font-geist-mono",
subsets: ["latin"], subsets: ["latin"],
@@ -19,22 +17,29 @@ export const metadata: Metadata = {
description: "RustyCMS admin interface", description: "RustyCMS admin interface",
}; };
export default function RootLayout({ export const viewport: Viewport = {
width: "device-width",
initialScale: 1,
viewportFit: "cover",
};
export default async function RootLayout({
children, children,
}: Readonly<{ }: Readonly<{
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
const locale = await getLocale();
const messages = await getMessages();
return ( return (
<html lang="en"> <html lang={locale}>
<body <body className={`${geistMono.variable} font-sans antialiased`}>
className={`${geistSans.variable} ${geistMono.variable} antialiased`} <NextIntlClientProvider messages={messages}>
>
<Providers> <Providers>
<div className="flex h-screen overflow-hidden bg-white"> <AppShell locale={locale}>{children}</AppShell>
<Sidebar /> <Toaster richColors position="top-right" />
<main className="min-h-0 flex-1 overflow-auto p-6">{children}</main>
</div>
</Providers> </Providers>
</NextIntlClientProvider>
</body> </body>
</html> </html>
); );

17
admin-ui/src/app/page.tsx
View File

@@ -1,7 +1,9 @@
import Link from "next/link"; import Link from "next/link";
import { getTranslations } from "next-intl/server";
import { fetchCollections } from "@/lib/api"; import { fetchCollections } from "@/lib/api";
export default async function DashboardPage() { export default async function DashboardPage() {
const t = await getTranslations("Dashboard");
let collections: { name: string }[] = []; let collections: { name: string }[] = [];
try { try {
const res = await fetchCollections(); const res = await fetchCollections();
@@ -12,16 +14,16 @@ export default async function DashboardPage() {
return ( return (
<div> <div>
<h1 className="mb-6 text-2xl font-semibold text-gray-900">Dashboard</h1> <h1 className="mb-6 text-2xl font-semibold text-gray-900">{t("title")}</h1>
<p className="mb-6 text-gray-600"> <p className="mb-6 text-gray-600">
Choose a collection to manage content. {t("subtitle")}
</p> </p>
<ul className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3"> <ul className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
{collections.map((c) => ( {collections.map((c) => (
<li key={c.name}> <li key={c.name}>
<Link <Link
href={`/content/${c.name}`} href={`/content/${c.name}`}
className="block rounded-lg border border-gray-200 bg-gray-50 px-4 py-3 font-medium text-gray-900 hover:border-gray-300 hover:bg-gray-100" className="block min-h-[48px] rounded-lg border border-accent-200 bg-accent-50/50 px-4 py-3 font-medium text-gray-900 hover:border-accent-300 hover:bg-accent-100/80 active:bg-accent-200/60 [touch-action:manipulation]"
> >
{c.name} {c.name}
</Link> </Link>
@@ -30,12 +32,9 @@ export default async function DashboardPage() {
</ul> </ul>
{collections.length === 0 && ( {collections.length === 0 && (
<p className="text-gray-500"> <p className="text-gray-500">
No collections loaded. Check that the RustyCMS API is running at{" "} {t("noCollections", {
<code className="rounded bg-gray-100 px-1"> url: process.env.NEXT_PUBLIC_RUSTYCMS_API_URL ?? "http://127.0.0.1:3000",
{process.env.NEXT_PUBLIC_RUSTYCMS_API_URL ?? })}
"http://127.0.0.1:3000"}
</code>
.
</p> </p>
)} )}
</div> </div>

52
admin-ui/src/components/AppShell.tsx Normal file
View File

@@ -0,0 +1,52 @@
"use client";
import { useState } from "react";
import { Sidebar } from "@/components/Sidebar";
import { ErrorBoundary } from "@/components/ErrorBoundary";
type AppShellProps = {
locale: string;
children: React.ReactNode;
};
export function AppShell({ locale, children }: AppShellProps) {
const [sidebarOpen, setSidebarOpen] = useState(false);
return (
<div className="flex h-screen overflow-hidden bg-white">
{/* Mobile backdrop */}
{sidebarOpen && (
<button
type="button"
onClick={() => setSidebarOpen(false)}
className="fixed inset-0 z-30 bg-black/50 md:hidden"
aria-label="Close menu"
/>
)}
<Sidebar
locale={locale}
mobileOpen={sidebarOpen}
onClose={() => setSidebarOpen(false)}
/>
<div className="flex min-w-0 flex-1 flex-col">
{/* Mobile menu button */}
<header className="flex shrink-0 items-center gap-3 border-b border-gray-200 bg-white px-4 py-3 md:hidden">
<button
type="button"
onClick={() => setSidebarOpen(true)}
className="inline-flex size-11 items-center justify-center rounded-lg border border-gray-200 bg-gray-50 text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-accent-300"
aria-label="Open menu"
>
<svg className="size-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<span className="text-sm font-semibold text-gray-900 truncate">RustyCMS Admin</span>
</header>
<main className="min-h-0 flex-1 overflow-auto p-4 sm:p-5 md:p-6">
<ErrorBoundary>{children}</ErrorBoundary>
</main>
</div>
</div>
);
}

18
admin-ui/src/components/BackButton.tsx Normal file
View File

@@ -0,0 +1,18 @@
"use client";
import { useRouter } from "next/navigation";
import { Icon } from "@iconify/react";
export function BackButton({ label = "Back" }: { label?: string }) {
const router = useRouter();
return (
<button
type="button"
onClick={() => router.back()}
className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
>
<Icon icon="mdi:arrow-left" className="size-4" aria-hidden />
{label}
</button>
);
}

44
admin-ui/src/components/Breadcrumbs.tsx Normal file
View File

@@ -0,0 +1,44 @@
"use client";
import Link from "next/link";
import { useTranslations } from "next-intl";
export type BreadcrumbItem = { label: string; href?: string };
type Props = { items: BreadcrumbItem[] };
export function Breadcrumbs({ items }: Props) {
if (items.length === 0) return null;
const t = useTranslations("Breadcrumbs");
return (
<nav aria-label={t("ariaLabel")} className="mb-4 text-sm text-gray-600">
<ol className="flex flex-wrap items-center gap-1">
{items.map((item, i) => {
const isLast = i === items.length - 1;
return (
<li key={i} className="flex items-center gap-1">
{i > 0 && (
<span className="text-gray-400" aria-hidden>
/
</span>
)}
{item.href != null && !isLast ? (
<Link
href={item.href}
className="text-gray-600 underline decoration-gray-300 underline-offset-2 hover:text-gray-900 hover:decoration-gray-500"
>
{item.label}
</Link>
) : (
<span className={isLast ? "font-medium text-gray-900" : undefined}>
{item.label}
</span>
)}
</li>
);
})}
</ol>
</nav>
);
}

669
admin-ui/src/components/ContentForm.tsx
View File

@@ -1,12 +1,30 @@
"use client"; "use client";
import { useId } from "react"; import { useId, useEffect, useRef } from "react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { useForm, Controller } from "react-hook-form"; import { useForm, Controller } from "react-hook-form";
import { Icon } from "@iconify/react";
import { useTranslations } from "next-intl";
import { toast } from "sonner";
import type { SchemaDefinition, FieldDefinition } from "@/lib/api"; import type { SchemaDefinition, FieldDefinition } from "@/lib/api";
import { checkSlug } from "@/lib/api"; import { checkSlug } from "@/lib/api";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { ReferenceArrayField } from "./ReferenceArrayField"; import { ReferenceArrayField } from "./ReferenceArrayField";
import { ReferenceField } from "./ReferenceField";
import { ReferenceOrInlineField } from "./ReferenceOrInlineField";
import { MarkdownEditor } from "./MarkdownEditor"; import { MarkdownEditor } from "./MarkdownEditor";
import { CollapsibleSection } from "./ui/collapsible";
type Props = { type Props = {
collection: string; collection: string;
@@ -17,34 +35,75 @@ type Props = {
onSuccess?: () => void; onSuccess?: () => void;
}; };
/** _slug field with format and duplicate check via API. */ /** Slug prefix for new entries: collection name with underscores → hyphens, plus trailing hyphen (e.g. calendar_item → calendar-item-). */
export function slugPrefixForCollection(collection: string): string {
return collection.replace(/_/g, "-") + "-";
}
/** _slug field with format and duplicate check via API. When slugPrefix is set, shows prefix as fixed text + input for the rest. */
function SlugField({ function SlugField({
collection, collection,
currentSlug, currentSlug,
slugPrefix,
locale, locale,
register, register,
setValue,
setError, setError,
clearErrors, clearErrors,
error, error,
slugValue,
}: { }: {
collection: string; collection: string;
currentSlug?: string; currentSlug?: string;
slugPrefix?: string;
locale?: string; locale?: string;
register: ReturnType<typeof useForm>["register"]; register: ReturnType<typeof useForm>["register"];
setValue: ReturnType<typeof useForm>["setValue"];
setError: ReturnType<typeof useForm>["setError"]; setError: ReturnType<typeof useForm>["setError"];
clearErrors: ReturnType<typeof useForm>["clearErrors"]; clearErrors: ReturnType<typeof useForm>["clearErrors"];
error: ReturnType<typeof useForm>["formState"]["errors"]["_slug"]; error: ReturnType<typeof useForm>["formState"]["errors"]["_slug"];
slugValue: string | undefined;
}) { }) {
const { ref, onChange, onBlur, name } = register("_slug", { const t = useTranslations("ContentForm");
required: "Slug is required.", const registered = register("_slug", {
required: t("slugRequired"),
validate:
slugPrefix && !currentSlug
? (v) => {
const val = (v ?? "").trim();
if (!val) return true;
const normalized = val.toLowerCase();
if (!normalized.startsWith(slugPrefix.toLowerCase())) {
return t("slugMustStartWith", { prefix: slugPrefix });
}
return true;
}
: undefined,
}); });
const fullSlug = (slugValue ?? "").trim();
const suffix =
slugPrefix && fullSlug.toLowerCase().startsWith(slugPrefix.toLowerCase())
? fullSlug.slice(slugPrefix.length)
: slugPrefix
? fullSlug
: fullSlug;
const handleSuffixChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const v = e.target.value;
const normalized = slugPrefix
? v.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-]/g, "")
: v;
setValue("_slug", slugPrefix ? slugPrefix + normalized : v, { shouldValidate: true });
};
const handleBlur = async (e: React.FocusEvent<HTMLInputElement>) => { const handleBlur = async (e: React.FocusEvent<HTMLInputElement>) => {
onBlur(e); const value = slugPrefix ? slugPrefix + (e.target.value ?? "") : (e.target.value ?? "");
const value = e.target.value?.trim(); const full = value.trim();
if (!value) return; if (!full) return;
if (slugPrefix && !full.toLowerCase().startsWith(slugPrefix.toLowerCase())) return;
try { try {
const res = await checkSlug(collection, value, { const res = await checkSlug(collection, full, {
exclude: currentSlug ?? undefined, exclude: currentSlug ?? undefined,
_locale: locale, _locale: locale,
}); });
@@ -53,36 +112,60 @@ function SlugField({
return; return;
} }
if (!res.available) { if (!res.available) {
setError("_slug", { setError("_slug", { type: "server", message: t("slugInUse") });
type: "server",
message: "Slug already in use.",
});
return; return;
} }
clearErrors("_slug"); clearErrors("_slug");
} catch { } catch {
// Network error etc. – no setError, user will see it on submit // Network error etc.
} }
}; };
const suffixPlaceholder = slugPrefix ? t("slugSuffixPlaceholder") : t("slugPlaceholder");
if (slugPrefix) {
return ( return (
<div> <div>
<label className="mb-1 block text-sm font-medium text-gray-700"> <Label className="mb-1 block font-medium">
_slug <span className="text-red-500">*</span> _slug <span className="text-red-500">*</span>
</label> </Label>
<div className="flex h-9 items-center rounded-md border border-input bg-background font-mono text-sm shadow-xs ring-offset-background focus-within:ring-[3px] focus-within:ring-ring/50">
<span className="shrink-0 border-r border-input bg-muted/50 px-3 py-2 text-muted-foreground">
{slugPrefix}
</span>
<input <input
type="text" type="text"
ref={ref} value={suffix}
name={name} onChange={handleSuffixChange}
onChange={onChange}
onBlur={handleBlur} onBlur={handleBlur}
placeholder="e.g. my-post" placeholder={suffixPlaceholder}
className="block w-full rounded border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 font-mono" className="h-full flex-1 min-w-0 border-0 bg-transparent px-3 py-1 text-base outline-none placeholder:text-muted-foreground md:text-sm"
autoComplete="off"
aria-label={t("slugSuffixAriaLabel")}
/>
</div>
<p className="mt-1 text-xs text-gray-500">{t("slugHint")}</p>
{error ? (
<p className="mt-1 text-sm text-red-600">{String(error.message)}</p>
) : null}
</div>
);
}
return (
<div>
<Label className="mb-1 block font-medium">
_slug <span className="text-red-500">*</span>
</Label>
<Input
type="text"
{...registered}
onBlur={handleBlur}
placeholder={t("slugPlaceholder")}
className="font-mono"
autoComplete="off" autoComplete="off"
/> />
<p className="mt-1 text-xs text-gray-500"> <p className="mt-1 text-xs text-gray-500">{t("slugHint")}</p>
Lowercase letters (a-z), digits (0-9), hyphens. Spaces become hyphens.
</p>
{error ? ( {error ? (
<p className="mt-1 text-sm text-red-600">{String(error.message)}</p> <p className="mt-1 text-sm text-red-600">{String(error.message)}</p>
) : null} ) : null}
@@ -113,11 +196,11 @@ function buildDefaultValues(
: ""; : "";
continue; continue;
} }
if ( if (def?.type === "array" && Array.isArray(value)) {
def?.type === "array" && const items = def.items as FieldDefinition | undefined;
def.items?.type === "reference" && const isRefArray =
Array.isArray(value) items?.type === "reference" || items?.type === "referenceOrInline";
) { if (isRefArray) {
out[key] = value.map((v) => out[key] = value.map((v) =>
typeof v === "object" && v !== null && "_slug" in v typeof v === "object" && v !== null && "_slug" in v
? (v as { _slug: string })._slug ? (v as { _slug: string })._slug
@@ -125,6 +208,7 @@ function buildDefaultValues(
); );
continue; continue;
} }
}
if ( if (
def?.type === "object" && def?.type === "object" &&
def.fields && def.fields &&
@@ -138,6 +222,25 @@ function buildDefaultValues(
); );
continue; continue;
} }
if (
def?.type === "object" &&
def.additionalProperties &&
typeof value === "object" &&
value !== null &&
!Array.isArray(value)
) {
out[key] = value;
continue;
}
if (
typeof value === "object" &&
value !== null &&
"_slug" in value &&
(def?.type === "reference" || !def)
) {
out[key] = String((value as { _slug?: string })._slug ?? "");
continue;
}
out[key] = value; out[key] = value;
} }
} }
@@ -153,24 +256,25 @@ function buildDefaultValues(
!Array.isArray(def.default) !Array.isArray(def.default)
) { ) {
out[key] = buildDefaultValues( out[key] = buildDefaultValues(
{ { name: key, fields: def.fields as Record<string, FieldDefinition> },
name: key,
fields: def.fields as Record<string, FieldDefinition>,
},
def.default as Record<string, unknown>, def.default as Record<string, unknown>,
); );
} else { } else {
out[key] = def.default; out[key] = def.default;
} }
} else if (def?.type === "boolean") out[key] = false; } else if (def?.type === "boolean") out[key] = false;
else if (def?.type === "array") else if (def?.type === "array") {
out[key] = const items = (def as FieldDefinition).items;
(def as FieldDefinition).items?.type === "reference" ? [] : ""; const isRefArray =
else if (def?.type === "object" && def.fields) items?.type === "reference" || items?.type === "referenceOrInline";
out[key] = isRefArray ? [] : "";
} else if (def?.type === "object" && def.fields)
out[key] = buildDefaultValues( out[key] = buildDefaultValues(
{ name: key, fields: def.fields as Record<string, FieldDefinition> }, { name: key, fields: def.fields as Record<string, FieldDefinition> },
{}, {},
); );
else if (def?.type === "object" && def.additionalProperties)
out[key] = {};
else out[key] = ""; else out[key] = "";
} }
} }
@@ -185,32 +289,45 @@ export function ContentForm({
locale, locale,
onSuccess, onSuccess,
}: Props) { }: Props) {
const t = useTranslations("ContentForm");
const router = useRouter(); const router = useRouter();
const isEdit = !!slug; const isEdit = !!slug;
const defaultValues = buildDefaultValues(schema, initialValues); const defaultValues = buildDefaultValues(schema, initialValues);
if (!isEdit && !initialValues?._slug && defaultValues._slug === undefined) {
defaultValues._slug = slugPrefixForCollection(collection);
}
const { const {
register, register,
handleSubmit, handleSubmit,
setValue,
setError, setError,
clearErrors, clearErrors,
control, control,
formState: { errors, isSubmitting }, watch,
} = useForm({ formState: { errors, isSubmitting, isDirty },
defaultValues, } = useForm({ defaultValues });
});
// Unsaved changes: warn when leaving (browser or in-app)
useEffect(() => {
const onBeforeUnload = (e: BeforeUnloadEvent) => {
if (isDirty) e.preventDefault();
};
window.addEventListener("beforeunload", onBeforeUnload);
return () => window.removeEventListener("beforeunload", onBeforeUnload);
}, [isDirty]);
const onSubmit = async (data: Record<string, unknown>) => { const onSubmit = async (data: Record<string, unknown>) => {
const payload: Record<string, unknown> = {}; const payload: Record<string, unknown> = {};
for (const [key, value] of Object.entries(data)) { for (const [key, value] of Object.entries(data)) {
const def = schema.fields?.[key]; const def = schema.fields?.[key];
if (def?.type === "array" && def.items?.type === "reference") { const items = def?.type === "array" ? def.items : undefined;
const isRefArray =
items?.type === "reference" || items?.type === "referenceOrInline";
if (def?.type === "array" && isRefArray) {
payload[key] = Array.isArray(value) payload[key] = Array.isArray(value)
? value ? value
: typeof value === "string" : typeof value === "string"
? value ? value.split(/[\n,]+/).map((s) => s.trim()).filter(Boolean)
.split(/[\n,]+/)
.map((s) => s.trim())
.filter(Boolean)
: []; : [];
} else { } else {
payload[key] = value; payload[key] = value;
@@ -220,10 +337,13 @@ export function ContentForm({
delete payload._slug; delete payload._slug;
} }
try { try {
delete payload._contentSource;
const params = locale ? { _locale: locale } : {}; const params = locale ? { _locale: locale } : {};
if (isEdit) { if (isEdit) {
const { updateEntry } = await import("@/lib/api"); const { updateEntry } = await import("@/lib/api");
await updateEntry(collection, slug!, payload, params); await updateEntry(collection, slug!, payload, params);
clearErrors("root");
toast.success(t("savedSuccessfully"));
onSuccess?.(); onSuccess?.();
} else { } else {
const { createEntry } = await import("@/lib/api"); const { createEntry } = await import("@/lib/api");
@@ -232,28 +352,89 @@ export function ContentForm({
const newSlug = payload._slug as string | undefined; const newSlug = payload._slug as string | undefined;
const q = locale ? `?_locale=${locale}` : ""; const q = locale ? `?_locale=${locale}` : "";
if (newSlug) { if (newSlug) {
router.push( router.push(`/content/${collection}/${encodeURIComponent(newSlug)}${q}`);
`/content/${collection}/${encodeURIComponent(newSlug)}${q}`,
);
} else { } else {
router.push(`/content/${collection}${q}`); router.push(`/content/${collection}${q}`);
} }
} }
} catch (err) { } catch (err) {
setError("root", { const apiErrors = (err as Error & { apiErrors?: string[] }).apiErrors;
message: err instanceof Error ? err.message : "Error saving", if (Array.isArray(apiErrors) && apiErrors.length > 0) {
}); const fieldErrRe = /^Field '([^']+)': (.+)$/;
for (const line of apiErrors) {
const m = line.match(fieldErrRe);
if (m) setError(m[1] as Parameters<typeof setError>[0], { type: "server", message: m[2] });
}
const msg = apiErrors.join(" ");
setError("root", { message: msg });
toast.error(msg);
} else {
const msg = err instanceof Error ? err.message : t("errorSaving");
setError("root", { message: msg });
toast.error(msg);
}
} }
}; };
const onSubmitRef = useRef(onSubmit);
onSubmitRef.current = onSubmit;
useEffect(() => {
const onKeyDown = (e: KeyboardEvent) => {
if ((e.metaKey || e.ctrlKey) && e.key === "s") {
e.preventDefault();
if (isDirty) handleSubmit((data) => onSubmitRef.current(data))();
}
};
window.addEventListener("keydown", onKeyDown);
return () => window.removeEventListener("keydown", onKeyDown);
}, [isDirty, handleSubmit]);
const fields = schema.fields ?? {}; const fields = schema.fields ?? {};
const slugParam = locale ? `?_locale=${locale}` : ""; const slugParam = locale ? `?_locale=${locale}` : "";
const showSlugField = !isEdit && !(fields._slug != null); const showSlugField = !isEdit && !(fields._slug != null);
type FormItem =
| { kind: "object"; name: string; def: FieldDefinition }
| { kind: "section"; title: string; entries: [string, FieldDefinition][] };
const hasSection = Object.entries(fields).some(
([, def]) =>
def &&
(def as FieldDefinition).type !== "object" &&
(def as FieldDefinition).section != null &&
(def as FieldDefinition).section !== "",
);
const formItems: FormItem[] = [];
if (hasSection) {
let currentTitle: string | null = null;
let currentEntries: [string, FieldDefinition][] = [];
const flush = () => {
if (currentEntries.length > 0) {
formItems.push({ kind: "section", title: currentTitle ?? "Details", entries: currentEntries });
currentEntries = [];
}
currentTitle = null;
};
for (const [name, def] of Object.entries(fields)) {
const fd = def as FieldDefinition;
if (fd.type === "object" && fd.fields) {
flush();
formItems.push({ kind: "object", name, def: fd });
} else {
const title = fd.section ?? "Details";
if (currentTitle !== null && currentTitle !== title) {
flush();
}
currentTitle = title;
currentEntries.push([name, fd]);
}
}
flush();
}
return ( return (
<form onSubmit={handleSubmit(onSubmit)} className="max-w-2xl space-y-4"> <form onSubmit={handleSubmit(onSubmit)} className="max-w-2xl space-y-8">
{errors.root && ( {errors.root && (
<div className="rounded bg-red-50 p-3 text-sm text-red-700"> <div className="rounded bg-red-50 p-3 text-sm text-red-700" role="alert">
{errors.root.message} {errors.root.message}
</div> </div>
)} )}
@@ -261,16 +442,53 @@ export function ContentForm({
<SlugField <SlugField
collection={collection} collection={collection}
currentSlug={slug} currentSlug={slug}
slugPrefix={!isEdit ? slugPrefixForCollection(collection) : undefined}
locale={locale} locale={locale}
register={register} register={register}
setValue={setValue}
setError={setError} setError={setError}
clearErrors={clearErrors} clearErrors={clearErrors}
error={errors._slug} error={errors._slug}
slugValue={watch("_slug") as string | undefined}
/> />
)} )}
{Object.entries(fields).map(([name, def]) => {hasSection
(def as FieldDefinition).type === "object" && ? formItems.map((item) =>
(def as FieldDefinition).fields ? ( item.kind === "object" ? (
<ObjectFieldSet
key={item.name}
name={item.name}
def={item.def}
register={register}
control={control}
errors={errors}
isEdit={isEdit}
locale={locale}
/>
) : (
<CollapsibleSection
key={item.title}
title={item.title}
defaultOpen={true}
contentClassName="space-y-4"
>
{item.entries.map(([name, def]) => (
<Field
key={name}
name={name}
def={def}
register={register}
control={control}
errors={errors}
isEdit={isEdit}
locale={locale}
/>
))}
</CollapsibleSection>
),
)
: Object.entries(fields).map(([name, def]) =>
(def as FieldDefinition).type === "object" && (def as FieldDefinition).fields ? (
<ObjectFieldSet <ObjectFieldSet
key={name} key={name}
name={name} name={name}
@@ -294,28 +512,22 @@ export function ContentForm({
/> />
), ),
)} )}
<div className="flex gap-3 pt-4"> <div className="flex flex-wrap gap-3 pt-6">
<button <Button type="submit" disabled={isSubmitting} className="min-h-[44px] sm:min-h-0">
type="submit" {isSubmitting ? t("saving") : t("save")}
disabled={isSubmitting} </Button>
className="rounded-lg bg-gray-900 px-4 py-2 text-sm font-medium text-white hover:bg-gray-800 disabled:opacity-50"
>
{isSubmitting ? "Saving…" : "Save"}
</button>
{isEdit && ( {isEdit && (
<a <Button variant="outline" asChild className="min-h-[44px] sm:min-h-0">
href={`/content/${collection}${slugParam}`} <a href={`/content/${collection}${slugParam}`}>
className="rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50" {t("backToList")}
>
Back to list
</a> </a>
</Button>
)} )}
</div> </div>
</form> </form>
); );
} }
/** Get error for path "layout.mobile" from errors.layout.mobile */
function getFieldError(errors: Record<string, unknown>, name: string): unknown { function getFieldError(errors: Record<string, unknown>, name: string): unknown {
const parts = name.split("."); const parts = name.split(".");
let current: unknown = errors; let current: unknown = errors;
@@ -347,12 +559,9 @@ function ObjectFieldSet({
}) { }) {
const nestedFields = def.fields ?? {}; const nestedFields = def.fields ?? {};
const displayName = name.split(".").pop() ?? name; const displayName = name.split(".").pop() ?? name;
const title = (def.description as string) || displayName;
return ( return (
<fieldset className="rounded border border-gray-200 bg-gray-50/50 p-4"> <CollapsibleSection title={title} defaultOpen={true} contentClassName="space-y-4">
<legend className="mb-3 text-sm font-medium text-gray-700">
{displayName}
</legend>
<div className="space-y-4">
{Object.entries(nestedFields).map(([subName, subDef]) => ( {Object.entries(nestedFields).map(([subName, subDef]) => (
<Field <Field
key={subName} key={subName}
@@ -365,8 +574,96 @@ function ObjectFieldSet({
locale={locale} locale={locale}
/> />
))} ))}
</CollapsibleSection>
);
}
function StringMapField({
value,
onChange,
label,
description,
error,
}: {
value: Record<string, string>;
onChange: (v: Record<string, string>) => void;
label: React.ReactNode;
description?: string | null;
error?: unknown;
}) {
const t = useTranslations("ContentForm");
const obj =
value && typeof value === "object" && !Array.isArray(value) ? value : {};
const baseEntries = Object.entries(obj);
const entries: [string, string][] =
baseEntries.length > 0 && baseEntries[baseEntries.length - 1][0] === ""
? baseEntries
: [...baseEntries, ["", ""]];
const update = (pairs: [string, string][]) => {
const next: Record<string, string> = {};
for (const [k, v] of pairs) {
const key = k.trim();
if (key !== "") next[key] = v;
}
onChange(next);
};
const setRow = (i: number, key: string, val: string) => {
const next = entries.map((e, idx) =>
idx === i ? ([key, val] as [string, string]) : e,
);
update(next);
};
const removeRow = (i: number) => {
update(entries.filter((_, idx) => idx !== i));
};
const addRow = () => update([...entries, ["", ""]]);
return (
<div>
{label}
{description ? <p className="mt-0.5 text-xs text-gray-500">{description}</p> : null}
<div className="mt-2 space-y-2 rounded border border-gray-200 bg-white p-3">
{entries.map(([k, v], i) => (
<div key={i} className="flex flex-wrap items-center gap-2">
<input
type="text"
value={k}
onChange={(e) => setRow(i, e.target.value, v)}
placeholder={t("keyPlaceholder")}
className="min-w-[120px] flex-1 rounded border border-gray-300 px-2 py-1.5 text-sm font-mono"
/>
<span className="text-gray-400">→</span>
<input
type="text"
value={v}
onChange={(e) => setRow(i, k, e.target.value)}
placeholder={t("valuePlaceholder")}
className="min-w-[160px] flex-2 rounded border border-gray-300 px-2 py-1.5 text-sm"
/>
<button
type="button"
onClick={() => removeRow(i)}
title={t("removeEntry")}
aria-label={t("removeEntry")}
className="rounded border border-gray-300 bg-gray-100 p-1.5 text-gray-600 hover:bg-gray-200 hover:text-gray-900"
>
<Icon icon="mdi:delete-outline" className="size-5" />
</button>
</div>
))}
<button
type="button"
onClick={addRow}
className="rounded border border-dashed border-gray-300 bg-gray-50 px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-100"
>
{t("addEntry")}
</button>
</div>
{error ? (
<p className="mt-1 text-sm text-red-600">
{String((error as { message?: string })?.message)}
</p>
) : null}
</div> </div>
</fieldset>
); );
} }
@@ -387,6 +684,7 @@ function Field({
isEdit: boolean; isEdit: boolean;
locale?: string; locale?: string;
}) { }) {
const t = useTranslations("ContentForm");
const type = (def.type ?? "string") as string; const type = (def.type ?? "string") as string;
const required = !!def.required; const required = !!def.required;
const isSlug = name === "_slug"; const isSlug = name === "_slug";
@@ -400,10 +698,10 @@ function Field({
const label = ( const label = (
<> <>
<label className="mb-1 block text-sm font-bold text-gray-700"> <Label className="mb-1 block font-bold">
{name.split(".").pop()} {name.split(".").pop()}
{required && <span className="text-red-500"> *</span>} {required && <span className="text-red-500"> *</span>}
</label> </Label>
{fieldDescription} {fieldDescription}
</> </>
); );
@@ -412,16 +710,19 @@ function Field({
return ( return (
<div> <div>
<div className="flex items-start gap-2"> <div className="flex items-start gap-2">
<input <Controller
type="checkbox" name={name}
control={control!}
render={({ field }) => (
<Checkbox
id={fieldId} id={fieldId}
{...register(name)} checked={!!field.value}
className="mt-0.5 h-5 w-5 rounded border-gray-300 focus:ring-gray-400" onCheckedChange={(checked) => field.onChange(!!checked)}
className="mt-0.5"
/> />
<label )}
htmlFor={fieldId} />
className="cursor-pointer text-sm font-medium text-gray-700" <label htmlFor={fieldId} className="cursor-pointer text-sm font-medium text-gray-700">
>
{name.split(".").pop()} {name.split(".").pop()}
{required && <span className="text-red-500"> *</span>} {required && <span className="text-red-500"> *</span>}
</label> </label>
@@ -435,11 +736,10 @@ function Field({
return ( return (
<div> <div>
{label} {label}
<input <Input
type="number" type="number"
step="any" step="any"
{...register(name, { valueAsNumber: true, required })} {...register(name, { valueAsNumber: true, required })}
className="block w-full rounded border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900"
/> />
{fieldError ? ( {fieldError ? (
<p className="mt-1 text-sm text-red-600"> <p className="mt-1 text-sm text-red-600">
@@ -454,11 +754,10 @@ function Field({
return ( return (
<div> <div>
{label} {label}
<input <Input
type="number" type="number"
step={1} step={1}
{...register(name, { valueAsNumber: true, required })} {...register(name, { valueAsNumber: true, required })}
className="block w-full rounded border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900"
/> />
{fieldError ? ( {fieldError ? (
<p className="mt-1 text-sm text-red-600"> <p className="mt-1 text-sm text-red-600">
@@ -469,8 +768,7 @@ function Field({
); );
} }
/* Markdown: editor with live preview */ if (type === "textOrRef" || type === "markdown") {
if (type === "markdown") {
return ( return (
<Controller <Controller
name={name} name={name}
@@ -491,16 +789,15 @@ function Field({
); );
} }
/* Lange Texte: richtext, html → Textarea */
if (type === "richtext" || type === "html") { if (type === "richtext" || type === "html") {
return ( return (
<div> <div>
{label} {label}
<textarea <Textarea
{...register(name, { required })} {...register(name, { required })}
rows={10} rows={10}
readOnly={readonly} readOnly={readonly}
className="block w-full rounded border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 font-mono" className="font-mono"
/> />
{fieldError ? ( {fieldError ? (
<p className="mt-1 text-sm text-red-600"> <p className="mt-1 text-sm text-red-600">
@@ -512,14 +809,49 @@ function Field({
} }
if (type === "datetime") { if (type === "datetime") {
const parseDatetime = (v: unknown): { date: string; time: string } => {
if (v == null || v === "") return { date: "", time: "" };
const s = typeof v === "string" ? v.trim() : String(v);
if (!s) return { date: "", time: "" };
const match = s.match(/^(\d{4}-\d{2}-\d{2})T?(\d{2}:\d{2})?/);
if (match) return { date: match[1] ?? "", time: match[2] ?? "00:00" };
return { date: "", time: "" };
};
return ( return (
<div> <div>
{label} {label}
<input <Controller
type="datetime-local" name={name}
{...register(name, { required })} control={control!}
rules={{ required }}
render={({ field }) => {
const { date, time } = parseDatetime(field.value);
const update = (newDate: string, newTime: string) => {
if (newDate && newTime) field.onChange(`${newDate}T${newTime}:00`);
else if (newDate) field.onChange(`${newDate}T00:00:00`);
else field.onChange("");
};
return (
<div className="flex flex-wrap items-center gap-3">
<Input
type="date"
value={date}
onChange={(e) => update(e.target.value, time)}
onBlur={field.onBlur}
readOnly={readonly} readOnly={readonly}
className="block w-full rounded border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900" className="w-auto"
/>
<Input
type="time"
value={time}
onChange={(e) => update(date, e.target.value)}
onBlur={field.onBlur}
readOnly={readonly}
className="w-auto"
/>
</div>
);
}}
/> />
{fieldError ? ( {fieldError ? (
<p className="mt-1 text-sm text-red-600"> <p className="mt-1 text-sm text-red-600">
@@ -530,7 +862,10 @@ function Field({
); );
} }
if (type === "array" && def.items?.type === "reference") { const isRefArray =
type === "array" &&
(def.items?.type === "reference" || def.items?.type === "referenceOrInline");
if (isRefArray) {
return ( return (
<Controller <Controller
name={name} name={name}
@@ -554,25 +889,58 @@ function Field({
if (type === "reference") { if (type === "reference") {
return ( return (
<div> <Controller
{label} name={name}
<input control={control!}
type="text" rules={{ required }}
{...register(name, { required })} render={({ field }) => (
placeholder="Slug of referenced entry" <ReferenceField
name={name}
def={def}
value={typeof field.value === "string" ? field.value : ""}
onChange={field.onChange}
required={required}
error={fieldError}
locale={locale}
label={label}
readOnly={readonly} readOnly={readonly}
className="block w-full rounded border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 font-mono"
/> />
{fieldError ? ( )}
<p className="mt-1 text-sm text-red-600"> />
{String((fieldError as { message?: string })?.message)} );
</p> }
) : null}
</div> if (type === "referenceOrInline") {
return (
<Controller
name={name}
control={control!}
rules={{ required }}
render={({ field }) => (
<ReferenceOrInlineField
name={name}
def={def}
value={
typeof field.value === "string"
? field.value
: field.value != null &&
typeof field.value === "object" &&
!Array.isArray(field.value)
? (field.value as Record<string, unknown>)
: ""
}
onChange={field.onChange}
required={required}
error={fieldError}
locale={locale}
label={label}
readOnly={readonly}
/>
)}
/>
); );
} }
/* Nested objects (e.g. file.details, file.details.image) recursively as fieldset */
if (type === "object" && def.fields) { if (type === "object" && def.fields) {
return ( return (
<ObjectFieldSet <ObjectFieldSet
@@ -587,23 +955,55 @@ function Field({
); );
} }
// string, default const additionalProps = def.additionalProperties as FieldDefinition | undefined;
if (type === "object" && additionalProps) {
return (
<Controller
name={name}
control={control!}
rules={{ required }}
render={({ field }) => (
<StringMapField
value={
field.value &&
typeof field.value === "object" &&
!Array.isArray(field.value)
? (field.value as Record<string, string>)
: {}
}
onChange={field.onChange}
label={label}
error={fieldError}
/>
)}
/>
);
}
const enumValues = def.enum as string[] | undefined; const enumValues = def.enum as string[] | undefined;
if (Array.isArray(enumValues) && enumValues.length > 0) { if (Array.isArray(enumValues) && enumValues.length > 0) {
return ( return (
<div> <div>
{label} {label}
<select <Controller
{...register(name, { required })} name={name}
className="block w-full rounded border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900" control={control!}
> rules={{ required }}
<option value="">— Please select —</option> render={({ field }) => (
<Select value={field.value as string} onValueChange={field.onChange}>
<SelectTrigger className="w-full">
<SelectValue placeholder={t("pleaseSelect")} />
</SelectTrigger>
<SelectContent>
{enumValues.map((v) => ( {enumValues.map((v) => (
<option key={String(v)} value={String(v)}> <SelectItem key={String(v)} value={String(v)}>
{String(v)} {String(v)}
</option> </SelectItem>
))} ))}
</select> </SelectContent>
</Select>
)}
/>
{fieldError ? ( {fieldError ? (
<p className="mt-1 text-sm text-red-600"> <p className="mt-1 text-sm text-red-600">
{String((fieldError as { message?: string })?.message)} {String((fieldError as { message?: string })?.message)}
@@ -613,14 +1013,31 @@ function Field({
); );
} }
const safeStringValue = (v: unknown): string => {
if (v == null) return "";
if (typeof v === "string") return v;
if (typeof v === "object" && "_slug" in v)
return String((v as { _slug?: string })._slug ?? "");
return String(v);
};
return ( return (
<div> <div>
{label} {label}
<input <Controller
name={name}
control={control!}
rules={{ required }}
render={({ field }) => (
<Input
type="text" type="text"
{...register(name, { required })} name={field.name}
value={safeStringValue(field.value)}
onChange={(e) => field.onChange(e.target.value)}
onBlur={field.onBlur}
readOnly={readonly} readOnly={readonly}
className="block w-full rounded border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900" />
)}
/> />
{fieldError ? ( {fieldError ? (
<p className="mt-1 text-sm text-red-600"> <p className="mt-1 text-sm text-red-600">

61
admin-ui/src/components/ContentLocaleSwitcher.tsx Normal file
View File

@@ -0,0 +1,61 @@
"use client";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { useTranslations } from "next-intl";
import { useCallback } from "react";
type Props = {
locales: string[];
defaultLocale: string | null;
currentLocale: string | undefined;
};
export function ContentLocaleSwitcher({ locales, defaultLocale, currentLocale }: Props) {
const t = useTranslations("ContentLocaleSwitcher");
const pathname = usePathname();
const searchParams = useSearchParams();
const router = useRouter();
const switchLocale = useCallback(
(locale: string) => {
const params = new URLSearchParams(searchParams.toString());
// Remove pagination on locale switch
params.delete("_page");
if (locale === defaultLocale) {
params.delete("_locale");
} else {
params.set("_locale", locale);
}
const qs = params.toString();
router.push(`${pathname}${qs ? `?${qs}` : ""}`);
},
[pathname, searchParams, router, defaultLocale]
);
if (locales.length <= 1) return null;
const active = currentLocale ?? defaultLocale ?? locales[0];
return (
<div className="flex items-center gap-2">
<span className="text-xs font-medium text-gray-500 uppercase tracking-wide">
{t("label")}:
</span>
<div className="flex gap-1">
{locales.map((locale) => (
<button
key={locale}
onClick={() => switchLocale(locale)}
className={`rounded px-2 py-0.5 text-xs font-semibold uppercase transition-colors ${
locale === active
? "bg-accent-700 text-white hover:bg-accent-800"
: "bg-gray-100 text-gray-600 hover:bg-gray-200"
}`}
>
{locale}
</button>
))}
</div>
</div>
);
}

69
admin-ui/src/components/DataPreviewPanel.tsx Normal file
View File

@@ -0,0 +1,69 @@
"use client";
import { useState } from "react";
import { Icon } from "@iconify/react";
import { useQuery } from "@tanstack/react-query";
import { useTranslations } from "next-intl";
import { fetchEntry } from "@/lib/api";
import { Button } from "@/components/ui/button";
type Props = {
collection: string;
slug: string;
locale?: string;
className?: string;
};
export function DataPreviewPanel({
collection,
slug,
locale,
className = "",
}: Props) {
const t = useTranslations("DataPreviewPanel");
const [open, setOpen] = useState(false);
const { data, isLoading, error, isFetching } = useQuery({
queryKey: ["entry-preview", collection, slug, locale ?? ""],
queryFn: () =>
fetchEntry(collection, slug, {
_resolve: "all",
...(locale ? { _locale: locale } : {}),
}),
enabled: open,
});
const json = data != null ? JSON.stringify(data, null, 2) : "";
return (
<div className={className}>
<Button
type="button"
variant="outline"
size="sm"
onClick={() => setOpen((v) => !v)}
aria-expanded={open}
>
<Icon icon="mdi:code-json" className="size-4 text-gray-500" aria-hidden />
{open ? t("hide") : t("show")}
</Button>
{open && (
<div className="mt-3 overflow-hidden rounded-lg border border-gray-200 bg-gray-50">
<div className="max-h-[60vh] overflow-auto p-4">
{isLoading || isFetching ? (
<p className="text-sm text-gray-500">{t("loading")}</p>
) : error ? (
<p className="text-sm text-red-600">
{error instanceof Error ? error.message : t("errorLoading")}
</p>
) : (
<pre className="whitespace-pre-wrap break-words font-mono text-xs text-gray-800">
{json}
</pre>
)}
</div>
</div>
)}
</div>
);
}

52
admin-ui/src/components/ErrorBoundary.tsx Normal file
View File

@@ -0,0 +1,52 @@
"use client";
import { Component, type ReactNode } from "react";
import { Icon } from "@iconify/react";
import { useTranslations } from "next-intl";
type Props = { children: ReactNode };
type State = { hasError: boolean; error: Error | null };
export class ErrorBoundary extends Component<Props, State> {
constructor(props: Props) {
super(props);
this.state = { hasError: false, error: null };
}
static getDerivedStateFromError(error: Error): State {
return { hasError: true, error };
}
render() {
if (this.state.hasError && this.state.error) {
return <ErrorFallback error={this.state.error} />;
}
return this.props.children;
}
}
function ErrorFallback({ error }: { error: Error }) {
const t = useTranslations("ErrorBoundary");
return (
<div className="rounded-lg border border-red-200 bg-red-50 p-6" role="alert">
<div className="flex items-start gap-3">
<span className="flex size-10 shrink-0 items-center justify-center rounded-full bg-red-200 text-red-700">
<Icon icon="mdi:alert-circle" className="size-6" aria-hidden />
</span>
<div className="min-w-0 flex-1">
<h2 className="font-semibold text-red-900">{t("title")}</h2>
<p className="mt-1 text-sm text-red-800">{error.message}</p>
<button
type="button"
onClick={() => window.location.reload()}
className="mt-4 rounded-md bg-red-700 px-3 py-1.5 text-sm font-medium text-white hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-red-500"
>
{t("reload")}
</button>
</div>
</div>
</div>
);
}

38
admin-ui/src/components/LocaleSwitcher.tsx Normal file
View File

@@ -0,0 +1,38 @@
"use client";
import { useRouter } from "next/navigation";
import { useTranslations } from "next-intl";
export function LocaleSwitcher({ locale }: { locale: string }) {
const router = useRouter();
const t = useTranslations("LocaleSwitcher");
const set = (l: string) => {
// eslint-disable-next-line react-hooks/immutability
document.cookie = `locale=${l}; path=/; max-age=31536000`;
router.refresh();
};
return (
<div className="mt-auto shrink-0 border-t border-accent-200/50 px-4 py-3">
<p className="mb-1.5 text-xs font-medium text-gray-500">{t("label")}</p>
<div className="flex gap-1">
{(["en", "de"] as const).map((l) => (
<button
key={l}
type="button"
onClick={() => set(l)}
className={`rounded px-2.5 py-1 text-xs font-medium transition-colors ${
locale === l
? "bg-accent-200/70 text-gray-900"
: "text-gray-600 hover:bg-accent-100/80 hover:text-gray-900"
}`}
aria-pressed={locale === l}
>
{l.toUpperCase()}
</button>
))}
</div>
</div>
);
}

24
admin-ui/src/components/MarkdownEditor.tsx
View File

@@ -2,6 +2,7 @@
import { useId, useRef } from "react"; import { useId, useRef } from "react";
import ReactMarkdown from "react-markdown"; import ReactMarkdown from "react-markdown";
import { useTranslations } from "next-intl";
type Props = { type Props = {
value: string; value: string;
@@ -52,6 +53,7 @@ export function MarkdownEditor({
readOnly, readOnly,
rows = 12, rows = 12,
}: Props) { }: Props) {
const t = useTranslations("MarkdownEditor");
const id = useId(); const id = useId();
const previewId = `${id}-preview`; const previewId = `${id}-preview`;
const textareaRef = useRef<HTMLTextAreaElement>(null); const textareaRef = useRef<HTMLTextAreaElement>(null);
@@ -96,7 +98,7 @@ export function MarkdownEditor({
type="button" type="button"
onClick={() => handleToolbar("**", "**", "bold")} onClick={() => handleToolbar("**", "**", "bold")}
className="rounded px-2 py-1 text-sm font-bold text-gray-700 hover:bg-gray-200" className="rounded px-2 py-1 text-sm font-bold text-gray-700 hover:bg-gray-200"
title="Bold" title={t("bold")}
> >
B B
</button> </button>
@@ -104,7 +106,7 @@ export function MarkdownEditor({
type="button" type="button"
onClick={() => handleToolbar("*", "*", "italic")} onClick={() => handleToolbar("*", "*", "italic")}
className="rounded px-2 py-1 text-sm italic text-gray-700 hover:bg-gray-200" className="rounded px-2 py-1 text-sm italic text-gray-700 hover:bg-gray-200"
title="Italic" title={t("italic")}
> >
I I
</button> </button>
@@ -112,7 +114,7 @@ export function MarkdownEditor({
type="button" type="button"
onClick={() => handleToolbar("`", "`", "code")} onClick={() => handleToolbar("`", "`", "code")}
className="rounded px-2 py-1 font-mono text-sm text-gray-700 hover:bg-gray-200" className="rounded px-2 py-1 font-mono text-sm text-gray-700 hover:bg-gray-200"
title="Code" title={t("code")}
> >
&lt;/&gt; &lt;/&gt;
</button> </button>
@@ -120,17 +122,17 @@ export function MarkdownEditor({
type="button" type="button"
onClick={() => handleInsert("[Link-Text](url)", 10)} onClick={() => handleInsert("[Link-Text](url)", 10)}
className="rounded px-2 py-1 text-sm text-gray-700 hover:bg-gray-200" className="rounded px-2 py-1 text-sm text-gray-700 hover:bg-gray-200"
title="Link" title={t("link")}
> >
Link {t("link")}
</button> </button>
<button <button
type="button" type="button"
onClick={() => handleInsert("\n- ", 3)} onClick={() => handleInsert("\n- ", 3)}
className="rounded px-2 py-1 text-sm text-gray-700 hover:bg-gray-200" className="rounded px-2 py-1 text-sm text-gray-700 hover:bg-gray-200"
title="Bullet list" title={t("bulletList")}
> >
• List {t("bulletListButton")}
</button> </button>
</div> </div>
)} )}
@@ -143,7 +145,7 @@ export function MarkdownEditor({
readOnly={readOnly} readOnly={readOnly}
required={required} required={required}
aria-describedby={previewId} aria-describedby={previewId}
placeholder="Enter markdown… **bold**, *italic*, [link](url), - list" placeholder={t("placeholder")}
className="block w-full rounded border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 font-mono focus:border-gray-400 focus:outline-none focus:ring-1 focus:ring-gray-400" className="block w-full rounded border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 font-mono focus:border-gray-400 focus:outline-none focus:ring-1 focus:ring-gray-400"
/> />
{error ? ( {error ? (
@@ -153,16 +155,16 @@ export function MarkdownEditor({
) : null} ) : null}
<div className="mt-3"> <div className="mt-3">
<span className="mb-1 block text-xs font-medium text-gray-500"> <span className="mb-1 block text-xs font-medium text-gray-500">
Preview {t("preview")}
</span> </span>
<div <div
id={previewId} id={previewId}
className="min-h-[120px] rounded border border-gray-200 bg-gray-50 px-3 py-2 text-sm text-gray-800 [&_ul]:list-inside [&_ul]:list-disc [&_ol]:list-inside [&_ol]:list-decimal [&_pre]:overflow-x-auto [&_pre]:rounded [&_pre]:bg-gray-200 [&_pre]:p-2 [&_code]:rounded [&_code]:bg-gray-200 [&_code]:px-1 [&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_h1]:text-lg [&_h1]:font-bold [&_h2]:text-base [&_h2]:font-bold [&_h3]:text-sm [&_h3]:font-bold [&_a]:text-blue-600 [&_a]:underline" className="min-h-[120px] rounded border border-gray-200 bg-gray-50 px-3 py-2 text-sm text-gray-800 [&_ul]:list-inside [&_ul]:list-disc [&_ol]:list-inside [&_ol]:list-decimal [&_pre]:overflow-x-auto [&_pre]:rounded [&_pre]:bg-gray-200 [&_pre]:p-2 [&_code]:rounded [&_code]:bg-gray-200 [&_code]:px-1 [&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_h1]:text-lg [&_h1]:font-bold [&_h2]:text-base [&_h2]:font-bold [&_h3]:text-sm [&_h3]:font-bold [&_a]:text-accent-700 [&_a]:underline [&_a:hover]:text-accent-800"
> >
{(value ?? "").trim() ? ( {(value ?? "").trim() ? (
<ReactMarkdown>{value}</ReactMarkdown> <ReactMarkdown>{value}</ReactMarkdown>
) : ( ) : (
<span className="text-gray-400">Empty — preview appears as you type.</span> <span className="text-gray-400">{t("emptyPreview")}</span>
)} )}
</div> </div>
</div> </div>

68
admin-ui/src/components/PaginationLinks.tsx Normal file
View File

@@ -0,0 +1,68 @@
"use client";
import Link from "next/link";
import { Icon } from "@iconify/react";
import { useTranslations } from "next-intl";
import { Button } from "@/components/ui/button";
type Props = {
collection: string;
page: number;
totalPages: number;
total: number;
locale?: string;
sort?: string;
order?: string;
q?: string;
};
export function PaginationLinks({
collection,
page,
totalPages,
total,
locale,
sort,
order,
q,
}: Props) {
const t = useTranslations("PaginationLinks");
const base = `/content/${collection}`;
const localeQ = locale ? `&_locale=${locale}` : "";
const sortQ = sort ? `&_sort=${sort}&_order=${order ?? "asc"}` : "";
const searchQ = q ? `&_q=${encodeURIComponent(q)}` : "";
return (
<div className="mt-6 flex flex-wrap items-center gap-3 sm:gap-4">
{page > 1 ? (
<Button variant="outline" asChild className="min-h-[44px] sm:min-h-0">
<Link href={`${base}?_page=${page - 1}${localeQ}${sortQ}${searchQ}`}>
<Icon icon="mdi:chevron-left" className="size-5" aria-hidden />
{t("back")}
</Link>
</Button>
) : (
<Button variant="outline" disabled className="min-h-[44px] sm:min-h-0">
<Icon icon="mdi:chevron-left" className="size-5" aria-hidden />
{t("back")}
</Button>
)}
<span className="text-sm text-gray-600 shrink-0">
{t("pageInfo", { page, totalPages, total })}
</span>
{page < totalPages ? (
<Button variant="outline" asChild className="min-h-[44px] sm:min-h-0">
<Link href={`${base}?_page=${page + 1}${localeQ}${sortQ}${searchQ}`}>
{t("next")}
<Icon icon="mdi:chevron-right" className="size-5" aria-hidden />
</Link>
</Button>
) : (
<Button variant="outline" disabled className="min-h-[44px] sm:min-h-0">
{t("next")}
<Icon icon="mdi:chevron-right" className="size-5" aria-hidden />
</Button>
)}
</div>
);
}

197
admin-ui/src/components/ReferenceArrayField.tsx
View File

@@ -3,8 +3,22 @@
import { useState } from "react"; import { useState } from "react";
import Link from "next/link"; import Link from "next/link";
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { useTranslations } from "next-intl";
import { fetchContentList, fetchCollections } from "@/lib/api"; import { fetchContentList, fetchCollections } from "@/lib/api";
import type { FieldDefinition } from "@/lib/api"; import type { FieldDefinition } from "@/lib/api";
import { getOptionLabel } from "@/lib/referenceOptionLabel";
import {
SearchableSelect,
type SearchableSelectOption,
} from "./SearchableSelect";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Button } from "@/components/ui/button";
type Props = { type Props = {
name: string; name: string;
@@ -37,19 +51,35 @@ export function ReferenceArrayField({
locale, locale,
label, label,
}: Props) { }: Props) {
const t = useTranslations("ReferenceArrayField");
const schemaCollections = getCollections(def); const schemaCollections = getCollections(def);
const singleCollection = const singleCollection =
schemaCollections.length === 1 ? schemaCollections[0] : null; schemaCollections.length === 1 ? schemaCollections[0] : null;
const multipleCollections = const multipleCollections =
schemaCollections.length > 1 ? schemaCollections : []; schemaCollections.length > 1 ? schemaCollections : [];
const valueList: string[] = Array.isArray(value)
? value /** Normalise to string[]: API may return resolved refs as objects with _slug. */
: typeof value === "string" function toSlugList(raw: unknown): string[] {
? value if (Array.isArray(raw)) {
return raw
.map((v) =>
typeof v === "object" && v !== null && "_slug" in v
? String((v as { _slug?: string })._slug ?? "")
: typeof v === "string"
? v.trim()
: "",
)
.filter(Boolean);
}
if (typeof raw === "string") {
return raw
.split(/[\n,]+/) .split(/[\n,]+/)
.map((s) => s.trim()) .map((s) => s.trim())
.filter(Boolean) .filter(Boolean);
: []; }
return [];
}
const valueList: string[] = toSlugList(value);
const [pickedCollection, setPickedCollection] = useState<string>( const [pickedCollection, setPickedCollection] = useState<string>(
singleCollection ?? multipleCollections[0] ?? "", singleCollection ?? multipleCollections[0] ?? "",
@@ -130,6 +160,24 @@ export function ReferenceArrayField({
add(slug); add(slug);
}; };
/** Options for the "add existing" SearchableSelect: full label, exclude already selected. */
const addSelectOptions: SearchableSelectOption[] =
multipleCollections.length > 1 && multiQueries.data
? multiQueries.data.flatMap(({ collection: coll, items: list }) =>
(list as Record<string, unknown>[])
.filter((i) => !valueList.includes(String(i._slug ?? "")))
.map((i) => ({
value: `${coll}:${i._slug ?? ""}`,
label: getOptionLabel(i),
}))
)
: ((singleQuery.data?.items ?? []) as Record<string, unknown>[])
.filter((i) => !valueList.includes(String(i._slug ?? "")))
.map((i) => ({
value: String(i._slug ?? ""),
label: getOptionLabel(i),
}));
const remove = (index: number) => { const remove = (index: number) => {
onChange(valueList.filter((_, i) => i !== index)); onChange(valueList.filter((_, i) => i !== index));
}; };
@@ -153,33 +201,47 @@ export function ReferenceArrayField({
return ( return (
<div> <div>
<div className="mb-1 flex items-center justify-between"> <div className="mb-1">
<span className="text-sm font-medium text-gray-700">{label}</span> {label}
{schemaCollections.length > 0 ? ( {schemaCollections.length > 0 ? (
<span className="text-xs text-gray-500"> <p className="mt-0.5 text-xs text-gray-500">
{schemaCollections.length === 1 {schemaCollections.length === 1
? `Typ: ${schemaCollections[0]}` ? t("typeLabel", { collection: schemaCollections[0] })
: `Typen: ${schemaCollections.join(", ")}`} : t("typesLabel", { collections: schemaCollections.join(", ") })}
</span> </p>
) : null} ) : null}
</div> </div>
{/* Selected entries */} {/* Selected entries */}
<ul className="mb-2 space-y-1.5"> <ul className="mb-2 space-y-1.5">
{valueList.map((slug, index) => ( {valueList.map((slug, index) => {
const collForSlug =
options.find((o) => o.slug === slug)?.collection ??
effectiveCollection ??
null;
return (
<li <li
key={`${slug}-${index}`} key={`${slug}-${index}`}
className="flex items-center gap-2 rounded border border-gray-200 bg-gray-50 px-3 py-2 text-sm" className="flex items-center gap-2 rounded border border-gray-200 bg-gray-50 px-3 py-2 text-sm"
> >
<span className="flex-1 font-mono text-gray-900">{slug}</span> <span className="flex-1 font-mono text-gray-900">{slug}</span>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
{collForSlug && (
<Link
href={`/content/${collForSlug}/${encodeURIComponent(slug)}${locale ? `?_locale=${locale}` : ""}`}
className="rounded p-1 text-accent-700 hover:bg-accent-50 hover:text-accent-900"
title="Open entry"
>
→
</Link>
)}
<button <button
type="button" type="button"
onClick={() => move(index, -1)} onClick={() => move(index, -1)}
disabled={index === 0} disabled={index === 0}
className="rounded p-1 text-gray-500 hover:bg-gray-200 hover:text-gray-700 disabled:opacity-40" className="rounded p-1 text-gray-500 hover:bg-gray-200 hover:text-gray-700 disabled:opacity-40"
title="Move up" title={t("moveUp")}
aria-label="Move up" aria-label={t("moveUp")}
> >
<svg <svg
className="h-4 w-4" className="h-4 w-4"
@@ -200,8 +262,8 @@ export function ReferenceArrayField({
onClick={() => move(index, 1)} onClick={() => move(index, 1)}
disabled={index === valueList.length - 1} disabled={index === valueList.length - 1}
className="rounded p-1 text-gray-500 hover:bg-gray-200 hover:text-gray-700 disabled:opacity-40" className="rounded p-1 text-gray-500 hover:bg-gray-200 hover:text-gray-700 disabled:opacity-40"
title="Move down" title={t("moveDown")}
aria-label="Move down" aria-label={t("moveDown")}
> >
<svg <svg
className="h-4 w-4" className="h-4 w-4"
@@ -221,8 +283,8 @@ export function ReferenceArrayField({
type="button" type="button"
onClick={() => remove(index)} onClick={() => remove(index)}
className="rounded p-1 text-red-600 hover:bg-red-50 hover:text-red-700" className="rounded p-1 text-red-600 hover:bg-red-50 hover:text-red-700"
title="Remove" title={t("remove")}
aria-label="Remove" aria-label={t("remove")}
> >
<svg <svg
className="h-4 w-4" className="h-4 w-4"
@@ -240,7 +302,8 @@ export function ReferenceArrayField({
</button> </button>
</div> </div>
</li> </li>
))} );
})}
</ul> </ul>
{/* Without schema collection: choose component type first */} {/* Without schema collection: choose component type first */}
@@ -249,57 +312,41 @@ export function ReferenceArrayField({
availableCollections.length > 0 ? ( availableCollections.length > 0 ? (
<div className="mb-2"> <div className="mb-2">
<label className="mb-1 block text-xs font-medium text-gray-500"> <label className="mb-1 block text-xs font-medium text-gray-500">
Component type {t("componentType")}
</label> </label>
<select <Select value={pickedCollection} onValueChange={setPickedCollection}>
value={pickedCollection} <SelectTrigger className="w-full">
onChange={(e) => setPickedCollection(e.target.value)} <SelectValue placeholder={t("selectType")} />
className="block w-full rounded border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900" </SelectTrigger>
> <SelectContent>
<option value="">— Select type —</option>
{availableCollections.map((c) => ( {availableCollections.map((c) => (
<option key={c} value={c}> <SelectItem key={c} value={c}>{c}</SelectItem>
{c}
</option>
))} ))}
</select> </SelectContent>
</Select>
</div> </div>
) : null} ) : null}
{/* Add: select from existing + create new component */} {/* Add: select from existing + create new component */}
{effectiveCollection || multipleCollections.length > 1 ? ( {effectiveCollection || multipleCollections.length > 1 ? (
<div className="flex flex-col gap-2 sm:flex-row sm:items-start"> <div className="flex flex-col gap-2 sm:flex-row sm:items-start">
<select <div className="min-w-0 flex-1">
<SearchableSelect
value="" value=""
onChange={(e) => { onChange={(v) => v && addFromOption(v)}
const v = e.target.value; options={addSelectOptions}
if (v) addFromOption(v); placeholder={t("selectFromExisting")}
e.target.value = ""; clearable={false}
}} filterPlaceholder={t("filterPlaceholder")}
className="block flex-1 rounded border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900" emptyLabel={t("emptyLabel")}
disabled={isLoading} disabled={isLoading}
> ariaLabel={t("selectExistingAriaLabel")}
<option value="">— Select from existing —</option> />
{options.map((item) => { </div>
const key =
multipleCollections.length > 1
? `${item.collection}:${item.slug}`
: item.slug;
const alreadySelected = valueList.includes(item.slug);
const label =
multipleCollections.length > 1
? `${item.slug} (${item.collection})`
: item.slug;
return (
<option key={key} value={key} disabled={alreadySelected}>
{alreadySelected ? `${label} (already selected)` : label}
</option>
);
})}
</select>
{collectionsForNew.length > 0 ? ( {collectionsForNew.length > 0 ? (
<span className="flex shrink-0 flex-col gap-0.5"> <span className="flex shrink-0 flex-col gap-0.5">
{collectionsForNew.length === 1 ? ( {collectionsForNew.length === 1 ? (
<Button variant="outline" size="sm" asChild>
<Link <Link
href={ href={
collectionsForNew[0] collectionsForNew[0]
@@ -308,34 +355,32 @@ export function ReferenceArrayField({
} }
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="inline-flex items-center justify-center gap-1 rounded border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
> >
<span aria-hidden>+</span> New {collectionsForNew[0]} component {t("newComponent", { collection: collectionsForNew[0] })}
</Link> </Link>
</Button>
) : ( ) : (
<select <Select
className="rounded border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900"
value="" value=""
onChange={(e) => { onValueChange={(c) => {
const c = e.target.value; if (c) window.open(
if (c)
window.open(
`/content/${c}/new${locale ? `?_locale=${locale}` : ""}`, `/content/${c}/new${locale ? `?_locale=${locale}` : ""}`,
"_blank", "_blank",
); );
e.target.value = "";
}} }}
> >
<option value="">+ Create new component…</option> <SelectTrigger className="w-full">
<SelectValue placeholder={t("createNewComponent")} />
</SelectTrigger>
<SelectContent>
{collectionsForNew.map((c) => ( {collectionsForNew.map((c) => (
<option key={c} value={c}> <SelectItem key={c} value={c}>{c}</SelectItem>
{c}
</option>
))} ))}
</select> </SelectContent>
</Select>
)} )}
<span className="text-xs text-gray-500"> <span className="text-xs text-gray-500">
Open in new tab; then reload this page. {t("openInNewTab")}
</span> </span>
</span> </span>
) : null} ) : null}
@@ -344,10 +389,10 @@ export function ReferenceArrayField({
{schemaCollections.length === 0 && availableCollections.length === 0 ? ( {schemaCollections.length === 0 && availableCollections.length === 0 ? (
<p className="text-xs text-amber-600"> <p className="text-xs text-amber-600">
No reference collection in schema. Set{" "} {t("noCollection", {
<code className="rounded bg-gray-100 px-1">items.collection</code> or{" "} collectionCode: "items.collection",
<code className="rounded bg-gray-100 px-1">items.collections</code>{" "} collectionsCode: "items.collections",
in the type, or start the API and reload the page. })}
</p> </p>
) : null} ) : null}

240
admin-ui/src/components/ReferenceField.tsx Normal file
View File

@@ -0,0 +1,240 @@
"use client";
import { useState } from "react";
import Link from "next/link";
import { useQuery } from "@tanstack/react-query";
import { useTranslations } from "next-intl";
import { fetchContentList, fetchCollections } from "@/lib/api";
import type { FieldDefinition } from "@/lib/api";
import { getOptionLabel } from "@/lib/referenceOptionLabel";
import { SearchableSelect } from "./SearchableSelect";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Button } from "@/components/ui/button";
type Props = {
name: string;
def: FieldDefinition;
value: string;
onChange: (value: string) => void;
required?: boolean;
error?: unknown;
locale?: string;
label: React.ReactNode;
readOnly?: boolean;
};
/** Target collection(s) from schema: single collection or list for polymorphic. */
function getCollections(def: FieldDefinition): string[] {
if (def.collection) return [def.collection];
if (Array.isArray(def.collections) && def.collections.length > 0)
return def.collections;
return [];
}
export function ReferenceField({
name,
def,
value,
onChange,
required,
error,
locale,
label,
readOnly = false,
}: Props) {
const t = useTranslations("ReferenceField");
const schemaCollections = getCollections(def);
const singleCollection =
schemaCollections.length === 1 ? schemaCollections[0] : null;
const multipleCollections =
schemaCollections.length > 1 ? schemaCollections : [];
const [pickedCollection, setPickedCollection] = useState<string>(
singleCollection ?? multipleCollections[0] ?? "",
);
const { data: collectionsData } = useQuery({
queryKey: ["collections"],
queryFn: fetchCollections,
enabled: schemaCollections.length === 0,
});
const availableCollections =
schemaCollections.length > 0
? schemaCollections
: (collectionsData?.collections ?? [])
.map((c) => c.name)
.filter(
(n) =>
n !== "content_layout" && n !== "component_layout" && n !== "seo",
);
const effectiveCollection = singleCollection ?? pickedCollection;
const listParams = { _per_page: 200, ...(locale ? { _locale: locale } : {}) };
const singleQuery = useQuery({
queryKey: ["content", effectiveCollection, listParams],
queryFn: () => fetchContentList(effectiveCollection!, listParams),
enabled: !!effectiveCollection && schemaCollections.length <= 1,
});
const multiQueries = useQuery({
queryKey: ["content-multi", multipleCollections, listParams],
queryFn: async () => {
const results = await Promise.all(
multipleCollections.map((coll) => fetchContentList(coll, listParams)),
);
return multipleCollections.map((coll, i) => ({
collection: coll,
items: results[i]?.items ?? [],
}));
},
enabled: multipleCollections.length > 1,
});
type OptionItem = { slug: string; collection: string; label: string };
const options: OptionItem[] =
multipleCollections.length > 1 && multiQueries.data
? multiQueries.data.flatMap(({ collection: coll, items }) =>
(items as Record<string, unknown>[])
.map((o) => ({
slug: String(o._slug ?? ""),
collection: coll,
label:
multipleCollections.length > 1
? `${o._slug} (${coll})`
: getOptionLabel(o),
}))
.filter((o) => o.slug),
)
: ((singleQuery.data?.items ?? []) as Record<string, unknown>[])
.map((o) => ({
slug: String(o._slug ?? ""),
collection: effectiveCollection ?? "",
label: getOptionLabel(o),
}))
.filter((o) => o.slug);
const isLoading =
schemaCollections.length <= 1
? singleQuery.isLoading
: multiQueries.isLoading;
/** Stored value: for single collection only slug, for multi "collection:slug". */
const currentValue = typeof value === "string" ? value.trim() : "";
const selectOptions = options.map((o) => ({
value:
multipleCollections.length > 1
? `${o.collection}:${o.slug}`
: o.slug,
label: o.label,
}));
if (readOnly) {
return (
<div>
{label}
<div className="block w-full rounded border border-gray-200 bg-gray-50 px-3 py-2 text-sm font-mono text-gray-700">
{currentValue || "—"}
</div>
{error ? (
<p className="mt-1 text-sm text-red-600">
{String((error as { message?: string })?.message ?? error)}
</p>
) : null}
</div>
);
}
return (
<div>
<div className="mb-1 flex items-center justify-between">
<span className="text-sm font-medium text-gray-700">{label}</span>
{schemaCollections.length > 0 ? (
<span className="text-xs text-gray-500">
{schemaCollections.length === 1
? t("typeLabel", { collection: schemaCollections[0] })
: t("typesLabel", { collections: schemaCollections.join(", ") })}
</span>
) : null}
</div>
{/* Without schema collection: choose type first */}
{!singleCollection &&
schemaCollections.length === 0 &&
availableCollections.length > 0 ? (
<div className="mb-2">
<Select value={pickedCollection} onValueChange={setPickedCollection}>
<SelectTrigger className="w-full">
<SelectValue placeholder={t("selectType")} />
</SelectTrigger>
<SelectContent>
{availableCollections.map((c) => (
<SelectItem key={c} value={c}>{c}</SelectItem>
))}
</SelectContent>
</Select>
</div>
) : null}
<div className="flex flex-col gap-2 sm:flex-row sm:items-start">
<div className="min-w-0 flex-1">
<SearchableSelect
name={name}
value={currentValue}
onChange={onChange}
options={selectOptions}
clearable
disabled={isLoading}
ariaLabel={typeof label === "string" ? label : t("newEntry")}
/>
</div>
<div className="flex shrink-0 gap-1">
{currentValue && effectiveCollection && (
<Button variant="outline" size="sm" asChild>
<Link
href={`/content/${effectiveCollection}/${encodeURIComponent(currentValue.includes(":") ? currentValue.split(":")[1] : currentValue)}${locale ? `?_locale=${locale}` : ""}`}
>
<span aria-hidden>→</span>
</Link>
</Button>
)}
{effectiveCollection ? (
<Button variant="outline" size="sm" asChild className="shrink-0">
<Link
href={`/content/${effectiveCollection}/new${locale ? `?_locale=${locale}` : ""}`}
target="_blank"
rel="noopener noreferrer"
>
<span aria-hidden>+</span> {t("newEntry")}
</Link>
</Button>
) : null}
</div>
</div>
{schemaCollections.length === 0 && availableCollections.length === 0 ? (
<p className="mt-1 text-xs text-amber-600">
{t("noCollection", {
collectionCode: "collection",
collectionsCode: "collections",
})}
</p>
) : null}
{error ? (
<p className="mt-1 text-sm text-red-600">
{String((error as { message?: string })?.message ?? error)}
</p>
) : null}
</div>
);
}

171
admin-ui/src/components/ReferenceOrInlineField.tsx Normal file
View File

@@ -0,0 +1,171 @@
"use client";
import { useMemo } from "react";
import { useTranslations } from "next-intl";
import type { FieldDefinition } from "@/lib/api";
import { ReferenceField } from "./ReferenceField";
type Props = {
name: string;
def: FieldDefinition;
value: string | Record<string, unknown>;
onChange: (value: string | Record<string, unknown>) => void;
required?: boolean;
error?: unknown;
locale?: string;
label: React.ReactNode;
readOnly?: boolean;
};
/** Synthetic def for reference-only mode (ReferenceField expects type "reference"). */
function refDef(def: FieldDefinition): FieldDefinition {
return {
...def,
type: "reference",
};
}
/**
* ReferenceOrInline: either a reference (slug) to an entry in def.collection,
* or an inline object matching the schema from def.fields (resolved by API).
*/
export function ReferenceOrInlineField({
name,
def,
value,
onChange,
required,
error,
locale,
label,
readOnly = false,
}: Props) {
const t = useTranslations("ReferenceOrInlineField");
// API may return a resolved reference as {_slug, _type, ...} — treat as reference.
const normalizedValue = useMemo<string | Record<string, unknown>>(() => {
if (
value != null &&
typeof value === "object" &&
!Array.isArray(value) &&
"_slug" in (value as Record<string, unknown>)
) {
return String((value as Record<string, unknown>)._slug ?? "");
}
return value as string | Record<string, unknown>;
}, [value]);
const isReference = typeof normalizedValue === "string";
const inlineFields = (def.fields as Record<string, FieldDefinition> | undefined) ?? {};
const inlineValue = useMemo(
() =>
normalizedValue != null && typeof normalizedValue === "object" && !Array.isArray(normalizedValue)
? (normalizedValue as Record<string, unknown>)
: {},
[normalizedValue],
);
if (readOnly) {
return (
<div>
{label}
<div className="block w-full rounded border border-gray-200 bg-gray-50 px-3 py-2 text-sm font-mono text-gray-700">
{isReference ? normalizedValue || "—" : "(inline object)"}
</div>
{error ? (
<p className="mt-1 text-sm text-red-600">
{String((error as { message?: string })?.message ?? error)}
</p>
) : null}
</div>
);
}
return (
<div className="space-y-3">
<div className="mb-1 flex items-center justify-between">
<span className="text-sm font-medium text-gray-700">{label}</span>
</div>
{/* Mode switch: Reference | Inline */}
<div className="flex gap-4 border-b border-gray-200 pb-2">
<label className="flex cursor-pointer items-center gap-2">
<input
type="radio"
name={`${name}-mode`}
checked={isReference}
onChange={() => onChange("")}
className="h-4 w-4 border-gray-300 text-accent-600 focus:ring-accent-500"
/>
<span className="text-sm text-gray-700">{t("reference")}</span>
</label>
<label className="flex cursor-pointer items-center gap-2">
<input
type="radio"
name={`${name}-mode`}
checked={!isReference}
onChange={() => onChange({})}
className="h-4 w-4 border-gray-300 text-accent-600 focus:ring-accent-500"
/>
<span className="text-sm text-gray-700">{t("inline")}</span>
</label>
</div>
{isReference ? (
<ReferenceField
name={name}
def={refDef(def)}
value={normalizedValue as string}
onChange={(v) => onChange(v)}
required={required}
error={error}
locale={locale}
label={null}
/>
) : (
<div className="rounded border border-gray-200 bg-gray-50/50 p-4">
<p className="mb-3 text-xs text-gray-500">{t("inlineObject")}</p>
<div className="space-y-3">
{Object.entries(inlineFields).map(([subName, subDef]) => {
const sub = subDef as FieldDefinition;
const subValue = inlineValue[subName];
const val = subValue != null ? String(subValue) : "";
const isReq = !!sub.required;
return (
<div key={subName}>
<label className="mb-1 block text-xs font-medium text-gray-700">
{subName}
{isReq && <span className="text-red-500"> *</span>}
</label>
<input
type="text"
value={val}
onChange={(e) =>
onChange({
...inlineValue,
[subName]: e.target.value,
})
}
className="block w-full rounded border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900"
placeholder={sub.description ?? subName}
/>
</div>
);
})}
{Object.keys(inlineFields).length === 0 ? (
<p className="text-xs text-amber-600">
{t("noInlineSchema")}
</p>
) : null}
</div>
</div>
)}
{error ? (
<p className="mt-1 text-sm text-red-600">
{String((error as { message?: string })?.message ?? error)}
</p>
) : null}
</div>
);
}

31
admin-ui/src/components/SchemaAndEditBar.tsx Normal file
View File

@@ -0,0 +1,31 @@
"use client";
import Link from "next/link";
import { Icon } from "@iconify/react";
import { useTranslations } from "next-intl";
import { SchemaPanel } from "@/components/SchemaPanel";
import type { SchemaDefinition } from "@/lib/api";
import { Button } from "@/components/ui/button";
type Props = {
schema: SchemaDefinition | null;
collection: string;
className?: string;
};
export function SchemaAndEditBar({ schema, collection, className = "" }: Props) {
const t = useTranslations("SchemaAndEditBar");
return (
<div className={`flex flex-wrap items-center gap-2 ${className}`}>
<SchemaPanel schema={schema} />
{schema && (
<Button variant="outline" size="sm" asChild>
<Link href={`/admin/types/${encodeURIComponent(collection)}/edit`}>
<Icon icon="mdi:pencil-outline" className="size-4 text-gray-500" aria-hidden />
{t("editSchema")}
</Link>
</Button>
)}
</div>
);
}

115
admin-ui/src/components/SchemaAndPreviewBar.tsx Normal file
View File

@@ -0,0 +1,115 @@
"use client";
import { useState } from "react";
import Link from "next/link";
import { Icon } from "@iconify/react";
import { useQuery } from "@tanstack/react-query";
import { useTranslations } from "next-intl";
import { fetchEntry } from "@/lib/api";
import type { SchemaDefinition } from "@/lib/api";
import { Button } from "@/components/ui/button";
type Props = {
schema: SchemaDefinition | null;
collection: string;
slug: string;
locale?: string;
className?: string;
};
const boxClass = "overflow-hidden rounded-lg border border-gray-200 bg-gray-50";
const innerClass = "max-h-[60vh] overflow-auto p-4";
const preClass = "whitespace-pre-wrap break-words font-mono text-xs text-gray-800";
export function SchemaAndPreviewBar({
schema,
collection,
slug,
locale,
className = "",
}: Props) {
const t = useTranslations("SchemaAndPreviewBar");
const [schemaOpen, setSchemaOpen] = useState(false);
const [previewOpen, setPreviewOpen] = useState(false);
const { data: previewData, isLoading, error, isFetching } = useQuery({
queryKey: ["entry-preview", collection, slug, locale ?? ""],
queryFn: () =>
fetchEntry(collection, slug, {
_resolve: "all",
...(locale ? { _locale: locale } : {}),
}),
enabled: previewOpen,
});
const schemaJson = schema ? JSON.stringify(schema, null, 2) : "";
const previewJson = previewData != null ? JSON.stringify(previewData, null, 2) : "";
return (
<div className={className}>
<div className="flex flex-wrap items-center gap-2">
{schema && (
<>
<Button
type="button"
variant="outline"
size="sm"
onClick={() => setSchemaOpen((v) => !v)}
aria-expanded={schemaOpen}
>
<Icon
icon={schemaOpen ? "mdi:eye-off-outline" : "mdi:eye-outline"}
className="size-4 text-gray-500"
aria-hidden
/>
{schemaOpen ? t("hideSchema") : t("showSchema")}
</Button>
<Button variant="outline" size="sm" asChild>
<Link href={`/admin/types/${encodeURIComponent(collection)}/edit`}>
<Icon icon="mdi:pencil-outline" className="size-4 text-gray-500" aria-hidden />
{t("editSchema")}
</Link>
</Button>
</>
)}
<Button
type="button"
variant="outline"
size="sm"
onClick={() => setPreviewOpen((v) => !v)}
aria-expanded={previewOpen}
>
<Icon icon="mdi:code-json" className="size-4 text-gray-500" aria-hidden />
{previewOpen ? t("hidePreview") : t("showPreview")}
</Button>
</div>
{(schemaOpen || previewOpen) && (
<div className="mt-3 flex flex-col gap-3">
{schemaOpen && (
<div className={boxClass}>
<div className={innerClass}>
<pre className={preClass}>{schemaJson}</pre>
</div>
</div>
)}
{previewOpen && (
<div className={boxClass}>
<div className={innerClass}>
{isLoading || isFetching ? (
<p className="text-sm text-gray-500">{t("loading")}</p>
) : error ? (
<p className="text-sm text-red-600">
{error instanceof Error ? error.message : t("errorLoading")}
</p>
) : (
<pre className={preClass}>{previewJson}</pre>
)}
</div>
</div>
)}
</div>
)}
</div>
);
}

49
admin-ui/src/components/SchemaPanel.tsx Normal file
View File

@@ -0,0 +1,49 @@
"use client";
import { useState } from "react";
import { Icon } from "@iconify/react";
import { useTranslations } from "next-intl";
import type { SchemaDefinition } from "@/lib/api";
import { Button } from "@/components/ui/button";
type Props = {
schema: SchemaDefinition | null;
className?: string;
};
export function SchemaPanel({ schema, className = "" }: Props) {
const t = useTranslations("SchemaPanel");
const [open, setOpen] = useState(false);
if (!schema) return null;
const json = JSON.stringify(schema, null, 2);
return (
<div className={className}>
<Button
type="button"
variant="outline"
size="sm"
onClick={() => setOpen((v) => !v)}
aria-expanded={open}
>
<Icon
icon={open ? "mdi:eye-off-outline" : "mdi:eye-outline"}
className="size-4 text-gray-500"
aria-hidden
/>
{open ? t("hide") : t("show")}
</Button>
{open && (
<div className="mt-3 overflow-hidden rounded-lg border border-gray-200 bg-gray-50">
<div className="max-h-[60vh] overflow-auto p-4">
<pre className="whitespace-pre-wrap break-words font-mono text-xs text-gray-800">
{json}
</pre>
</div>
</div>
)}
</div>
);
}

63
admin-ui/src/components/SearchBar.tsx Normal file
View File

@@ -0,0 +1,63 @@
"use client";
import { useCallback, useEffect, useState } from "react";
import { useRouter, useSearchParams, usePathname } from "next/navigation";
import { Icon } from "@iconify/react";
export function SearchBar({
placeholder = "Search…",
paramName = "_q",
}: {
placeholder?: string;
paramName?: string;
}) {
const router = useRouter();
const pathname = usePathname();
const searchParams = useSearchParams();
const [value, setValue] = useState(searchParams.get(paramName) ?? "");
// Sync when URL changes externally
useEffect(() => {
setValue(searchParams.get(paramName) ?? "");
}, [searchParams, paramName]);
const push = useCallback(
(q: string) => {
const sp = new URLSearchParams(searchParams.toString());
if (q.trim()) {
sp.set(paramName, q.trim());
} else {
sp.delete(paramName);
}
sp.set("_page", "1");
router.push(`${pathname}?${sp.toString()}`);
},
[router, pathname, searchParams, paramName]
);
// Debounce: push URL 300ms after typing stops
useEffect(() => {
const timer = setTimeout(() => {
const current = searchParams.get(paramName) ?? "";
if (value.trim() !== current) push(value);
}, 300);
return () => clearTimeout(timer);
}, [value]); // eslint-disable-line react-hooks/exhaustive-deps
return (
<div className="relative w-full min-w-0 sm:w-56">
<Icon
icon="mdi:magnify"
className="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
aria-hidden
/>
<input
type="search"
value={value}
onChange={(e) => setValue(e.target.value)}
placeholder={placeholder}
className="h-10 w-full min-w-0 rounded-md border border-input bg-background pl-8 pr-3 text-base text-foreground placeholder:text-muted-foreground focus:border-ring focus:outline-none focus:ring-[3px] focus:ring-ring/50 sm:h-9 sm:text-sm [touch-action:manipulation]"
/>
</div>
);
}

124
admin-ui/src/components/SearchableSelect.tsx Normal file
View File

@@ -0,0 +1,124 @@
"use client";
import * as React from "react";
import { Check, ChevronsUpDown } from "lucide-react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
} from "@/components/ui/command";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
export type SearchableSelectOption = {
value: string;
label: string;
};
type Props = {
name?: string;
value: string;
onChange: (value: string) => void;
options: SearchableSelectOption[];
placeholder?: string;
clearLabel?: string;
filterPlaceholder?: string;
emptyLabel?: string;
clearable?: boolean;
disabled?: boolean;
ariaLabel?: string;
listMaxHeight?: string;
className?: string;
};
export function SearchableSelect({
name,
value,
onChange,
options,
placeholder = "— Please select —",
clearLabel = "— Clear selection —",
filterPlaceholder = "Filter…",
emptyLabel = "No matches",
clearable = true,
disabled = false,
ariaLabel,
className = "",
}: Props) {
const [open, setOpen] = React.useState(false);
const selectedOption = options.find((o) => o.value === value);
return (
<div className={cn("relative min-w-0", className)}>
{name && <input type="hidden" name={name} value={value ?? ""} />}
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
role="combobox"
aria-expanded={open}
aria-label={ariaLabel}
disabled={disabled}
className="w-full justify-between font-normal"
>
<span className="truncate">
{selectedOption ? selectedOption.label : placeholder}
</span>
<ChevronsUpDown className="ml-2 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent
className="w-[var(--radix-popover-trigger-width)] p-0"
align="start"
>
<Command>
<CommandInput placeholder={filterPlaceholder} />
<CommandList>
<CommandEmpty>{emptyLabel}</CommandEmpty>
<CommandGroup>
{clearable && (
<CommandItem
value={clearLabel}
onSelect={() => {
onChange("");
setOpen(false);
}}
className="italic text-muted-foreground"
>
{clearLabel}
</CommandItem>
)}
{options.map((option) => (
<CommandItem
key={option.value}
value={option.label}
onSelect={() => {
onChange(option.value);
setOpen(false);
}}
>
<Check
className={cn(
"mr-2",
value === option.value ? "opacity-100" : "opacity-0"
)}
/>
{option.label}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
);
}

106
admin-ui/src/components/Sidebar.tsx
View File

@@ -3,10 +3,22 @@
import { useState, useMemo } from "react"; import { useState, useMemo } from "react";
import Link from "next/link"; import Link from "next/link";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
import { Icon } from "@iconify/react";
import { useQueries, useQuery } from "@tanstack/react-query"; import { useQueries, useQuery } from "@tanstack/react-query";
import { useTranslations } from "next-intl";
import { fetchCollections, fetchContentList } from "@/lib/api"; import { fetchCollections, fetchContentList } from "@/lib/api";
import { LocaleSwitcher } from "./LocaleSwitcher";
export function Sidebar() { const navLinkClass = "inline-flex items-center gap-2 rounded-lg px-3 py-2.5 text-sm font-medium min-h-[44px] md:min-h-0 md:py-2";
type SidebarProps = {
locale: string;
mobileOpen?: boolean;
onClose?: () => void;
};
export function Sidebar({ locale, mobileOpen = false, onClose }: SidebarProps) {
const t = useTranslations("Sidebar");
const pathname = usePathname(); const pathname = usePathname();
const [search, setSearch] = useState(""); const [search, setSearch] = useState("");
const { data, isLoading, error } = useQuery({ const { data, isLoading, error } = useQuery({
@@ -38,37 +50,91 @@ export function Sidebar() {
const formatCount = (n: number) => (n >= 100 ? "99+" : String(n)); const formatCount = (n: number) => (n >= 100 ? "99+" : String(n));
const tSidebar = useTranslations("Sidebar");
const isDrawer = typeof onClose === "function";
const asideClass =
"flex h-screen flex-col overflow-hidden border-r border-accent-200/50 bg-gradient-to-b from-violet-50/95 via-accent-50/90 to-amber-50/85 shadow-[2px_0_16px_-2px_rgba(225,29,72,0.06)] " +
(isDrawer
? "fixed left-0 top-0 z-40 w-72 max-w-[85vw] transition-transform duration-200 ease-out md:relative md:z-auto md:w-56 md:shrink-0 md:translate-x-0 " +
(mobileOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0")
: "w-56 shrink-0");
return ( return (
<aside className="flex h-full w-56 shrink-0 flex-col overflow-y-auto border-r border-gray-200 bg-gray-50 p-4"> <aside className={asideClass}>
<nav className="flex flex-col gap-1"> <nav className="flex flex-1 min-h-0 flex-col p-4">
{/* Brand / logo row */}
<div className="flex shrink-0 items-center gap-2 pb-3">
<Link <Link
href="/" href="/"
className={`rounded px-3 py-2 text-sm font-bold ${pathname === "/" ? "bg-gray-200 text-gray-900" : "text-gray-600 hover:bg-gray-100 hover:text-gray-900"}`} onClick={onClose}
className="flex min-w-0 flex-1 items-center gap-2 rounded-lg py-2 pr-1 text-gray-900 no-underline outline-none focus-visible:ring-2 focus-visible:ring-accent-300"
> >
Dashboard <span className="flex size-9 shrink-0 items-center justify-center rounded-md bg-accent-200/80 text-accent-800">
<Icon icon="mdi:cog-outline" className="size-5" aria-hidden />
</span>
<span className="truncate text-lg font-bold tracking-tight">RustyCMS</span>
</Link> </Link>
<hr /> {isDrawer && (
<div className="px-1 py-2"> <button
type="button"
onClick={onClose}
className="inline-flex size-10 shrink-0 items-center justify-center rounded-lg text-gray-600 hover:bg-accent-100/80 hover:text-gray-900 md:hidden"
aria-label={tSidebar("closeMenu")}
>
<Icon icon="mdi:close" className="size-6" aria-hidden />
</button>
)}
</div>
<div className="flex shrink-0 flex-col gap-1">
<Link
href="/"
onClick={onClose}
className={`${navLinkClass} font-bold ${pathname === "/" ? "bg-accent-200/70 text-gray-900" : "text-gray-700 hover:bg-accent-100/80 hover:text-gray-900"}`}
>
<Icon icon="mdi:view-dashboard-outline" className="size-5 shrink-0" aria-hidden />
{t("dashboard")}
</Link>
<Link
href="/admin/types"
onClick={onClose}
className={`${navLinkClass} ${pathname?.startsWith("/admin/types") ? "bg-accent-200/70 text-gray-900" : "text-gray-700 hover:bg-accent-100/80 hover:text-gray-900"}`}
>
<Icon icon="mdi:shape-outline" className="size-5 shrink-0" aria-hidden />
{t("types")}
</Link>
<Link
href="/assets"
onClick={onClose}
className={`${navLinkClass} ${pathname?.startsWith("/assets") ? "bg-accent-200/70 text-gray-900" : "text-gray-700 hover:bg-accent-100/80 hover:text-gray-900"}`}
>
<Icon icon="mdi:image-multiple-outline" className="size-5 shrink-0" aria-hidden />
{t("assets")}
</Link>
</div>
<hr className="my-3 shrink-0 border-accent-200/50" />
<div className="shrink-0 px-1 pb-2">
<input <input
type="search" type="search"
placeholder="Search collections…" placeholder={t("searchPlaceholder")}
value={search} value={search}
onChange={(e) => setSearch(e.target.value)} onChange={(e) => setSearch(e.target.value)}
className="w-full rounded border border-gray-200 bg-white px-2 py-1.5 text-sm text-gray-900 placeholder:text-gray-400 focus:border-gray-300 focus:outline-none focus:ring-1 focus:ring-gray-300" className="w-full rounded border border-accent-200/60 bg-white/90 px-2 py-1.5 text-sm text-gray-900 placeholder:text-gray-500 focus:border-accent-300 focus:outline-none focus:ring-1 focus:ring-accent-200/80"
aria-label="Search collections" aria-label={t("searchAriaLabel")}
/> />
</div> </div>
<div className="min-h-0 flex-1 overflow-y-auto overscroll-contain">
{isLoading && ( {isLoading && (
<div className="px-3 py-2 text-sm text-gray-400">Loading…</div> <div className="px-3 py-2 text-sm text-gray-400">{t("loading")}</div>
)} )}
{error && ( {error && (
<div className="px-3 py-2 text-sm text-red-600"> <div className="px-3 py-2 text-sm text-red-600">
Error loading collections {t("errorLoading")}
</div> </div>
)} )}
{!isLoading && !error && search.trim() && filteredCollections.length === 0 && ( {!isLoading && !error && search.trim() && filteredCollections.length === 0 && (
<div className="px-3 py-2 text-sm text-gray-500"> <div className="px-3 py-2 text-sm text-gray-500">
No results for "{search.trim()}" {t("noResults", { query: search.trim() })}
</div> </div>
)} )}
{filteredCollections.map((c, i) => { {filteredCollections.map((c, i) => {
@@ -83,8 +149,9 @@ export function Sidebar() {
<Link <Link
key={c.name} key={c.name}
href={href} href={href}
onClick={onClose}
title={c.description ?? undefined} title={c.description ?? undefined}
className={`rounded px-3 py-2 text-sm font-medium ${active ? "bg-gray-200 text-gray-900" : "text-gray-600 hover:bg-gray-100 hover:text-gray-900"}`} className={`flex flex-col justify-center rounded-lg px-3 py-2.5 text-sm font-medium min-h-[44px] md:min-h-0 md:py-2 ${active ? "bg-accent-200/70 text-gray-900" : "text-gray-700 hover:bg-accent-100/80 hover:text-gray-900"}`}
> >
<span className="flex items-center justify-between gap-2"> <span className="flex items-center justify-between gap-2">
<span className="min-w-0 truncate">{c.name}</span> <span className="min-w-0 truncate">{c.name}</span>
@@ -97,7 +164,7 @@ export function Sidebar() {
{hasMeta && ( {hasMeta && (
<span className="mt-0.5 block text-xs font-normal text-gray-500"> <span className="mt-0.5 block text-xs font-normal text-gray-500">
{c.category && ( {c.category && (
<span className="rounded bg-gray-200 px-1"> <span className="rounded bg-accent-200/50 px-1">
{c.category} {c.category}
</span> </span>
)} )}
@@ -112,14 +179,9 @@ export function Sidebar() {
</Link> </Link>
); );
})} })}
<hr className="my-2" /> </div>
<Link
href="/admin/new-type"
className="rounded px-3 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100 hover:text-gray-900"
>
+ Add new type…
</Link>
</nav> </nav>
<LocaleSwitcher locale={locale} />
</aside> </aside>
); );
} }

196
admin-ui/src/components/ui/alert-dialog.tsx Normal file
View File

@@ -0,0 +1,196 @@
"use client"
import * as React from "react"
import { AlertDialog as AlertDialogPrimitive } from "radix-ui"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
function AlertDialog({
...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
}
function AlertDialogTrigger({
...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
return (
<AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
)
}
function AlertDialogPortal({
...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
return (
<AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
)
}
function AlertDialogOverlay({
className,
...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
return (
<AlertDialogPrimitive.Overlay
data-slot="alert-dialog-overlay"
className={cn(
"fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
className
)}
{...props}
/>
)
}
function AlertDialogContent({
className,
size = "default",
...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
size?: "default" | "sm"
}) {
return (
<AlertDialogPortal>
<AlertDialogOverlay />
<AlertDialogPrimitive.Content
data-slot="alert-dialog-content"
data-size={size}
className={cn(
"group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 data-[size=sm]:max-w-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[size=default]:sm:max-w-lg",
className
)}
{...props}
/>
</AlertDialogPortal>
)
}
function AlertDialogHeader({
className,
...props
}: React.ComponentProps<"div">) {
return (
<div
data-slot="alert-dialog-header"
className={cn(
"grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
className
)}
{...props}
/>
)
}
function AlertDialogFooter({
className,
...props
}: React.ComponentProps<"div">) {
return (
<div
data-slot="alert-dialog-footer"
className={cn(
"flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
className
)}
{...props}
/>
)
}
function AlertDialogTitle({
className,
...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
return (
<AlertDialogPrimitive.Title
data-slot="alert-dialog-title"
className={cn(
"text-lg font-semibold sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
className
)}
{...props}
/>
)
}
function AlertDialogDescription({
className,
...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
return (
<AlertDialogPrimitive.Description
data-slot="alert-dialog-description"
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
)
}
function AlertDialogMedia({
className,
...props
}: React.ComponentProps<"div">) {
return (
<div
data-slot="alert-dialog-media"
className={cn(
"mb-2 inline-flex size-16 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
className
)}
{...props}
/>
)
}
function AlertDialogAction({
className,
variant = "default",
size = "default",
...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &
Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
return (
<Button variant={variant} size={size} asChild>
<AlertDialogPrimitive.Action
data-slot="alert-dialog-action"
className={cn(className)}
{...props}
/>
</Button>
)
}
function AlertDialogCancel({
className,
variant = "outline",
size = "default",
...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
return (
<Button variant={variant} size={size} asChild>
<AlertDialogPrimitive.Cancel
data-slot="alert-dialog-cancel"
className={cn(className)}
{...props}
/>
</Button>
)
}
export {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogMedia,
AlertDialogOverlay,
AlertDialogPortal,
AlertDialogTitle,
AlertDialogTrigger,
}

48
admin-ui/src/components/ui/badge.tsx Normal file
View File

@@ -0,0 +1,48 @@
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { Slot } from "radix-ui"
import { cn } from "@/lib/utils"
const badgeVariants = cva(
"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
secondary:
"bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
destructive:
"bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
outline:
"border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
link: "text-primary underline-offset-4 [a&]:hover:underline",
},
},
defaultVariants: {
variant: "default",
},
}
)
function Badge({
className,
variant = "default",
asChild = false,
...props
}: React.ComponentProps<"span"> &
VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
const Comp = asChild ? Slot.Root : "span"
return (
<Comp
data-slot="badge"
data-variant={variant}
className={cn(badgeVariants({ variant }), className)}
{...props}
/>
)
}
export { Badge, badgeVariants }

65
admin-ui/src/components/ui/button.tsx Normal file
View File

@@ -0,0 +1,65 @@
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { Slot } from "radix-ui"
import { cn } from "@/lib/utils"
const buttonVariants = cva(
"inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 no-underline",
{
variants: {
variant: {
default:
"bg-accent-700 text-white hover:bg-accent-800 focus-visible:ring-accent-500/40",
destructive:
"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
outline:
"border border-accent-200 bg-background text-accent-800 shadow-xs hover:bg-accent-50 dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
secondary:
"bg-accent-100 text-accent-800 border border-accent-200/80 hover:bg-accent-200/80 hover:border-accent-300",
ghost:
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
link: "text-accent-700 underline-offset-4 hover:text-accent-800 hover:underline",
},
size: {
default: "h-9 px-4 py-2 has-[>svg]:px-3",
xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
icon: "size-9",
"icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
"icon-sm": "size-8",
"icon-lg": "size-10",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
)
function Button({
className,
variant = "default",
size = "default",
asChild = false,
...props
}: React.ComponentProps<"button"> &
VariantProps<typeof buttonVariants> & {
asChild?: boolean
}) {
const Comp = asChild ? Slot.Root : "button"
return (
<Comp
data-slot="button"
data-variant={variant}
data-size={size}
className={cn(buttonVariants({ variant, size, className }))}
{...props}
/>
)
}
export { Button, buttonVariants }

32
admin-ui/src/components/ui/checkbox.tsx Normal file
View File

@@ -0,0 +1,32 @@
"use client"
import * as React from "react"
import { CheckIcon } from "lucide-react"
import { Checkbox as CheckboxPrimitive } from "radix-ui"
import { cn } from "@/lib/utils"
function Checkbox({
className,
...props
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
return (
<CheckboxPrimitive.Root
data-slot="checkbox"
className={cn(
"peer size-4 shrink-0 rounded-[4px] border border-input bg-background shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:aria-invalid:ring-destructive/40",
className
)}
{...props}
>
<CheckboxPrimitive.Indicator
data-slot="checkbox-indicator"
className="grid place-content-center text-current transition-none"
>
<CheckIcon className="size-3.5" />
</CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root>
)
}
export { Checkbox }

42
admin-ui/src/components/ui/collapsible.tsx Normal file
View File

@@ -0,0 +1,42 @@
"use client";
import { Collapsible as CollapsiblePrimitive } from "radix-ui";
import { Icon } from "@iconify/react";
import { cn } from "@/lib/utils";
const Collapsible = CollapsiblePrimitive.Root;
const CollapsibleTrigger = CollapsiblePrimitive.Trigger;
const CollapsibleContent = CollapsiblePrimitive.Content;
/** Section with collapsible content and a clickable header (label + chevron). */
function CollapsibleSection({
title,
children,
defaultOpen = true,
className,
contentClassName,
}: {
title: React.ReactNode;
children: React.ReactNode;
defaultOpen?: boolean;
className?: string;
contentClassName?: string;
}) {
return (
<Collapsible defaultOpen={defaultOpen} className={cn("group rounded border border-gray-200 bg-gray-50/50", className)}>
<CollapsibleTrigger className="flex w-full items-center justify-between gap-2 px-4 py-3 text-left text-sm font-medium text-gray-700 hover:bg-gray-100/80 focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 rounded-t-[inherit] data-[state=open]:rounded-b-none">
{title}
<Icon
icon="mdi:chevron-down"
className="size-5 shrink-0 text-gray-500 transition-transform group-data-[state=open]:rotate-180"
aria-hidden
/>
</CollapsibleTrigger>
<CollapsibleContent>
<div className={cn("border-t border-gray-200 px-4 py-4", contentClassName)}>{children}</div>
</CollapsibleContent>
</Collapsible>
);
}
export { Collapsible, CollapsibleTrigger, CollapsibleContent, CollapsibleSection };

184
admin-ui/src/components/ui/command.tsx Normal file
View File

@@ -0,0 +1,184 @@
"use client"
import * as React from "react"
import { Command as CommandPrimitive } from "cmdk"
import { SearchIcon } from "lucide-react"
import { cn } from "@/lib/utils"
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog"
function Command({
className,
...props
}: React.ComponentProps<typeof CommandPrimitive>) {
return (
<CommandPrimitive
data-slot="command"
className={cn(
"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
className
)}
{...props}
/>
)
}
function CommandDialog({
title = "Command Palette",
description = "Search for a command to run...",
children,
className,
showCloseButton = true,
...props
}: React.ComponentProps<typeof Dialog> & {
title?: string
description?: string
className?: string
showCloseButton?: boolean
}) {
return (
<Dialog {...props}>
<DialogHeader className="sr-only">
<DialogTitle>{title}</DialogTitle>
<DialogDescription>{description}</DialogDescription>
</DialogHeader>
<DialogContent
className={cn("overflow-hidden p-0", className)}
showCloseButton={showCloseButton}
>
<Command className="**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
{children}
</Command>
</DialogContent>
</Dialog>
)
}
function CommandInput({
className,
...props
}: React.ComponentProps<typeof CommandPrimitive.Input>) {
return (
<div
data-slot="command-input-wrapper"
className="flex h-9 items-center gap-2 border-b px-3"
>
<SearchIcon className="size-4 shrink-0 opacity-50" />
<CommandPrimitive.Input
data-slot="command-input"
className={cn(
"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
className
)}
{...props}
/>
</div>
)
}
function CommandList({
className,
...props
}: React.ComponentProps<typeof CommandPrimitive.List>) {
return (
<CommandPrimitive.List
data-slot="command-list"
className={cn(
"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
className
)}
{...props}
/>
)
}
function CommandEmpty({
...props
}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
return (
<CommandPrimitive.Empty
data-slot="command-empty"
className="py-6 text-center text-sm"
{...props}
/>
)
}
function CommandGroup({
className,
...props
}: React.ComponentProps<typeof CommandPrimitive.Group>) {
return (
<CommandPrimitive.Group
data-slot="command-group"
className={cn(
"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
className
)}
{...props}
/>
)
}
function CommandSeparator({
className,
...props
}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
return (
<CommandPrimitive.Separator
data-slot="command-separator"
className={cn("-mx-1 h-px bg-border", className)}
{...props}
/>
)
}
function CommandItem({
className,
...props
}: React.ComponentProps<typeof CommandPrimitive.Item>) {
return (
<CommandPrimitive.Item
data-slot="command-item"
className={cn(
"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
className
)}
{...props}
/>
)
}
function CommandShortcut({
className,
...props
}: React.ComponentProps<"span">) {
return (
<span
data-slot="command-shortcut"
className={cn(
"ml-auto text-xs tracking-widest text-muted-foreground",
className
)}
{...props}
/>
)
}
export {
Command,
CommandDialog,
CommandInput,
CommandList,
CommandEmpty,
CommandGroup,
CommandItem,
CommandShortcut,
CommandSeparator,
}

158
admin-ui/src/components/ui/dialog.tsx Normal file
View File

@@ -0,0 +1,158 @@
"use client"
import * as React from "react"
import { XIcon } from "lucide-react"
import { Dialog as DialogPrimitive } from "radix-ui"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
function Dialog({
...props
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
return <DialogPrimitive.Root data-slot="dialog" {...props} />
}
function DialogTrigger({
...props
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
}
function DialogPortal({
...props
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
}
function DialogClose({
...props
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
}
function DialogOverlay({
className,
...props
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
return (
<DialogPrimitive.Overlay
data-slot="dialog-overlay"
className={cn(
"fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
className
)}
{...props}
/>
)
}
function DialogContent({
className,
children,
showCloseButton = true,
...props
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
showCloseButton?: boolean
}) {
return (
<DialogPortal data-slot="dialog-portal">
<DialogOverlay />
<DialogPrimitive.Content
data-slot="dialog-content"
className={cn(
"fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
className
)}
{...props}
>
{children}
{showCloseButton && (
<DialogPrimitive.Close
data-slot="dialog-close"
className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
>
<XIcon />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
)}
</DialogPrimitive.Content>
</DialogPortal>
)
}
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="dialog-header"
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
{...props}
/>
)
}
function DialogFooter({
className,
showCloseButton = false,
children,
...props
}: React.ComponentProps<"div"> & {
showCloseButton?: boolean
}) {
return (
<div
data-slot="dialog-footer"
className={cn(
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
className
)}
{...props}
>
{children}
{showCloseButton && (
<DialogPrimitive.Close asChild>
<Button variant="outline">Close</Button>
</DialogPrimitive.Close>
)}
</div>
)
}
function DialogTitle({
className,
...props
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
return (
<DialogPrimitive.Title
data-slot="dialog-title"
className={cn("text-lg leading-none font-semibold", className)}
{...props}
/>
)
}
function DialogDescription({
className,
...props
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
return (
<DialogPrimitive.Description
data-slot="dialog-description"
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
)
}
export {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogOverlay,
DialogPortal,
DialogTitle,
DialogTrigger,
}

21
admin-ui/src/components/ui/input.tsx Normal file
View File

@@ -0,0 +1,21 @@
import * as React from "react"
import { cn } from "@/lib/utils"
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
return (
<input
type={type}
data-slot="input"
className={cn(
"h-9 w-full min-w-0 rounded-md border border-input bg-background text-foreground px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
"aria-invalid:border-destructive aria-invalid:ring-destructive/20",
className
)}
{...props}
/>
)
}
export { Input }

Some files were not shown because too many files have changed in this diff Show More