mirror of
https://github.com/Dvorinka/Containr.git
synced 2026-10-28 07:41:27 +00:00
Tomas DvorakandDevin
d48d9c293a
useQuery received api fns typed (params?) => Promise<T>; React Query
passes a QueryFunctionContext, so data degraded to {} and broke tsc.
Wrap calls in () => and import Link from react-router-dom.
Authored By: TDvorak <[email protected]>
Generated with [Devin](https://devin.ai)
Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
1261 lines
48 KiB
TypeScript
1261 lines
48 KiB
TypeScript
import { useMemo, useState } from 'react';
|
|
import { Link, useSearchParams } from 'react-router-dom';
|
|
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
|
import {
|
|
createTemplate,
|
|
deleteTemplate,
|
|
deployTemplate,
|
|
getCurrentUserProfile,
|
|
getTemplateById,
|
|
listProjects,
|
|
listTemplates,
|
|
updateTemplate,
|
|
type TemplateDetailEntity,
|
|
type TemplateEntity,
|
|
type TemplateWriteInput,
|
|
} from '@/lib/api-client';
|
|
import { useAuthSession } from '@/lib/use-auth-session';
|
|
import {
|
|
Search,
|
|
Filter,
|
|
Check,
|
|
Loader2,
|
|
Sparkles,
|
|
Box,
|
|
Code,
|
|
Database,
|
|
Globe,
|
|
Layers,
|
|
Terminal,
|
|
Play,
|
|
ArrowRight,
|
|
Star,
|
|
Plus,
|
|
Pencil,
|
|
Trash2,
|
|
Upload,
|
|
X,
|
|
} from 'lucide-react';
|
|
|
|
const demoTemplates: TemplateEntity[] = [
|
|
{
|
|
id: 'tpl-react',
|
|
name: 'React Application',
|
|
description: 'Single-page frontend with Vite and static serving runtime.',
|
|
category: 'frontend',
|
|
logo: 'https://cdn.simpleicons.org/react',
|
|
configRaw: '{"runtime":"node"}',
|
|
variablesRaw: '[]',
|
|
isOfficial: true,
|
|
ownerId: null,
|
|
},
|
|
{
|
|
id: 'tpl-go',
|
|
name: 'Go API Service',
|
|
description: 'API-ready Go runtime with direct binary startup.',
|
|
category: 'web',
|
|
logo: 'https://cdn.simpleicons.org/go',
|
|
configRaw: '{"runtime":"go"}',
|
|
variablesRaw: '[]',
|
|
isOfficial: true,
|
|
ownerId: null,
|
|
},
|
|
{
|
|
id: 'tpl-postgres',
|
|
name: 'PostgreSQL Database',
|
|
description: 'Managed PostgreSQL service with credential setup variables.',
|
|
category: 'database',
|
|
logo: 'https://cdn.simpleicons.org/postgresql',
|
|
configRaw: '{"runtime":"postgres"}',
|
|
variablesRaw: '[]',
|
|
isOfficial: true,
|
|
ownerId: null,
|
|
},
|
|
{
|
|
id: 'tpl-mysql',
|
|
name: 'MySQL Database',
|
|
description: 'Managed MySQL service for transactional workloads.',
|
|
category: 'database',
|
|
logo: 'https://cdn.simpleicons.org/mysql',
|
|
configRaw: '{"runtime":"mysql"}',
|
|
variablesRaw: '[]',
|
|
isOfficial: true,
|
|
ownerId: null,
|
|
},
|
|
{
|
|
id: 'tpl-mariadb',
|
|
name: 'MariaDB Database',
|
|
description: 'Managed MariaDB service with MySQL compatibility.',
|
|
category: 'database',
|
|
logo: 'https://cdn.simpleicons.org/mariadb',
|
|
configRaw: '{"runtime":"mariadb"}',
|
|
variablesRaw: '[]',
|
|
isOfficial: true,
|
|
ownerId: null,
|
|
},
|
|
{
|
|
id: 'tpl-clickhouse',
|
|
name: 'ClickHouse Database',
|
|
description: 'Columnar analytics database template for high-speed queries.',
|
|
category: 'database',
|
|
logo: 'https://cdn.simpleicons.org/clickhouse',
|
|
configRaw: '{"runtime":"clickhouse"}',
|
|
variablesRaw: '[]',
|
|
isOfficial: true,
|
|
ownerId: null,
|
|
},
|
|
{
|
|
id: 'tpl-dragonfly',
|
|
name: 'Dragonfly Database',
|
|
description: 'Redis-compatible in-memory store powered by Dragonfly.',
|
|
category: 'database',
|
|
logo: 'https://cdn.simpleicons.org/redis',
|
|
configRaw: '{"runtime":"dragonfly"}',
|
|
variablesRaw: '[]',
|
|
isOfficial: true,
|
|
ownerId: null,
|
|
},
|
|
];
|
|
|
|
const demoTemplateDetails: Record<string, TemplateDetailEntity> = {
|
|
'tpl-react': {
|
|
template: demoTemplates[0],
|
|
config: {
|
|
type: 'web',
|
|
runtime: 'node',
|
|
buildCommand: 'npm install && npm run build',
|
|
startCommand: 'npx serve -s dist',
|
|
port: 3000,
|
|
healthCheck: '/health',
|
|
environment: {},
|
|
nixpacksConfig: {},
|
|
},
|
|
variables: [
|
|
{
|
|
key: 'VITE_API_URL',
|
|
label: 'API URL',
|
|
defaultValue: 'https://api.example.com',
|
|
required: true,
|
|
secret: false,
|
|
description: 'Public API endpoint for frontend calls',
|
|
},
|
|
],
|
|
},
|
|
'tpl-go': {
|
|
template: demoTemplates[1],
|
|
config: {
|
|
type: 'web',
|
|
runtime: 'go',
|
|
buildCommand: 'go build -o app .',
|
|
startCommand: './app',
|
|
port: 8080,
|
|
healthCheck: '/health',
|
|
environment: {},
|
|
nixpacksConfig: {},
|
|
},
|
|
variables: [
|
|
{
|
|
key: 'GO_ENV',
|
|
label: 'Go Environment',
|
|
defaultValue: 'production',
|
|
required: false,
|
|
secret: false,
|
|
description: 'Runtime environment value',
|
|
},
|
|
],
|
|
},
|
|
'tpl-postgres': {
|
|
template: demoTemplates[2],
|
|
config: {
|
|
type: 'database',
|
|
runtime: 'postgres',
|
|
buildCommand: '',
|
|
startCommand: '',
|
|
port: 5432,
|
|
healthCheck: '',
|
|
environment: {},
|
|
nixpacksConfig: {},
|
|
},
|
|
variables: [
|
|
{
|
|
key: 'POSTGRES_USER',
|
|
label: 'Username',
|
|
defaultValue: 'postgres',
|
|
required: true,
|
|
secret: false,
|
|
description: 'Database user',
|
|
},
|
|
{
|
|
key: 'POSTGRES_PASSWORD',
|
|
label: 'Password',
|
|
defaultValue: '',
|
|
required: true,
|
|
secret: true,
|
|
description: 'Database password',
|
|
},
|
|
],
|
|
},
|
|
'tpl-mysql': {
|
|
template: demoTemplates[3],
|
|
config: {
|
|
type: 'database',
|
|
runtime: 'mysql',
|
|
buildCommand: '',
|
|
startCommand: '',
|
|
port: 3306,
|
|
healthCheck: '',
|
|
environment: {},
|
|
nixpacksConfig: {},
|
|
},
|
|
variables: [
|
|
{
|
|
key: 'MYSQL_DATABASE',
|
|
label: 'Database Name',
|
|
defaultValue: 'app',
|
|
required: true,
|
|
secret: false,
|
|
description: 'Initial database to create',
|
|
},
|
|
{
|
|
key: 'MYSQL_USER',
|
|
label: 'Username',
|
|
defaultValue: 'app',
|
|
required: true,
|
|
secret: false,
|
|
description: 'Application DB user',
|
|
},
|
|
{
|
|
key: 'MYSQL_PASSWORD',
|
|
label: 'User Password',
|
|
defaultValue: '',
|
|
required: true,
|
|
secret: true,
|
|
description: 'Application DB password',
|
|
},
|
|
{
|
|
key: 'MYSQL_ROOT_PASSWORD',
|
|
label: 'Root Password',
|
|
defaultValue: '',
|
|
required: true,
|
|
secret: true,
|
|
description: 'Root account password',
|
|
},
|
|
],
|
|
},
|
|
'tpl-mariadb': {
|
|
template: demoTemplates[4],
|
|
config: {
|
|
type: 'database',
|
|
runtime: 'mariadb',
|
|
buildCommand: '',
|
|
startCommand: '',
|
|
port: 3306,
|
|
healthCheck: '',
|
|
environment: {},
|
|
nixpacksConfig: {},
|
|
},
|
|
variables: [
|
|
{
|
|
key: 'MARIADB_DATABASE',
|
|
label: 'Database Name',
|
|
defaultValue: 'app',
|
|
required: true,
|
|
secret: false,
|
|
description: 'Initial database to create',
|
|
},
|
|
{
|
|
key: 'MARIADB_USER',
|
|
label: 'Username',
|
|
defaultValue: 'app',
|
|
required: true,
|
|
secret: false,
|
|
description: 'Application DB user',
|
|
},
|
|
{
|
|
key: 'MARIADB_PASSWORD',
|
|
label: 'User Password',
|
|
defaultValue: '',
|
|
required: true,
|
|
secret: true,
|
|
description: 'Application DB password',
|
|
},
|
|
{
|
|
key: 'MARIADB_ROOT_PASSWORD',
|
|
label: 'Root Password',
|
|
defaultValue: '',
|
|
required: true,
|
|
secret: true,
|
|
description: 'Root account password',
|
|
},
|
|
],
|
|
},
|
|
'tpl-clickhouse': {
|
|
template: demoTemplates[5],
|
|
config: {
|
|
type: 'database',
|
|
runtime: 'clickhouse',
|
|
buildCommand: '',
|
|
startCommand: '',
|
|
port: 8123,
|
|
healthCheck: '',
|
|
environment: {},
|
|
nixpacksConfig: {},
|
|
},
|
|
variables: [
|
|
{
|
|
key: 'CLICKHOUSE_DB',
|
|
label: 'Database Name',
|
|
defaultValue: 'app',
|
|
required: false,
|
|
secret: false,
|
|
description: 'Default database name',
|
|
},
|
|
{
|
|
key: 'CLICKHOUSE_USER',
|
|
label: 'Username',
|
|
defaultValue: 'default',
|
|
required: false,
|
|
secret: false,
|
|
description: 'ClickHouse user',
|
|
},
|
|
{
|
|
key: 'CLICKHOUSE_PASSWORD',
|
|
label: 'Password',
|
|
defaultValue: '',
|
|
required: false,
|
|
secret: true,
|
|
description: 'ClickHouse password',
|
|
},
|
|
],
|
|
},
|
|
'tpl-dragonfly': {
|
|
template: demoTemplates[6],
|
|
config: {
|
|
type: 'database',
|
|
runtime: 'dragonfly',
|
|
buildCommand: '',
|
|
startCommand: '',
|
|
port: 6379,
|
|
healthCheck: '',
|
|
environment: {},
|
|
nixpacksConfig: {},
|
|
},
|
|
variables: [
|
|
{
|
|
key: 'DRAGONFLY_PASSWORD',
|
|
label: 'Password',
|
|
defaultValue: '',
|
|
required: false,
|
|
secret: true,
|
|
description: 'Optional Redis-compatible password',
|
|
},
|
|
],
|
|
},
|
|
};
|
|
|
|
const demoProjects = [
|
|
{ id: 'project-demo', name: 'Demo Project' },
|
|
{ id: 'project-internal', name: 'Internal Tooling' },
|
|
];
|
|
|
|
function toServiceName(value: string): string {
|
|
const normalized = value
|
|
.toLowerCase()
|
|
.trim()
|
|
.replace(/[^a-z0-9]+/g, '-')
|
|
.replace(/^-+|-+$/g, '');
|
|
|
|
return normalized || 'service';
|
|
}
|
|
|
|
function categoryLabel(category: string): string {
|
|
return category ? category[0].toUpperCase() + category.slice(1) : 'Uncategorized';
|
|
}
|
|
|
|
function safeTemplateRuntime(configRaw: string): string {
|
|
try {
|
|
const parsed = JSON.parse(configRaw || '{}') as { runtime?: string };
|
|
return parsed.runtime || 'n/a';
|
|
} catch {
|
|
return 'n/a';
|
|
}
|
|
}
|
|
|
|
function categoryIcon(category: string): typeof Box {
|
|
switch (category) {
|
|
case 'frontend':
|
|
return Globe;
|
|
case 'web':
|
|
return Code;
|
|
case 'database':
|
|
return Database;
|
|
case 'backend':
|
|
return Terminal;
|
|
default:
|
|
return Box;
|
|
}
|
|
}
|
|
|
|
const EMPTY_TEMPLATE_JSON = JSON.stringify(
|
|
{
|
|
name: 'my-template',
|
|
description: 'What this template deploys.',
|
|
category: 'app',
|
|
logo: '',
|
|
config: {
|
|
type: 'web',
|
|
runtime: 'node',
|
|
build_command: '',
|
|
start_command: '',
|
|
port: 3000,
|
|
health_check: '/health',
|
|
environment: {},
|
|
},
|
|
variables: [
|
|
{
|
|
key: 'EXAMPLE_VAR',
|
|
label: 'Example variable',
|
|
default: '',
|
|
required: false,
|
|
secret: false,
|
|
description: 'Shown at deploy time',
|
|
},
|
|
],
|
|
},
|
|
null,
|
|
2,
|
|
);
|
|
|
|
export function TemplatesPage() {
|
|
const queryClient = useQueryClient();
|
|
const [searchParams] = useSearchParams();
|
|
const isDemoMode = searchParams.get('demo') === '1';
|
|
|
|
const sessionQuery = useAuthSession({ enabled: !isDemoMode });
|
|
const signedIn = isDemoMode || Boolean(sessionQuery.data);
|
|
const profileQuery = useQuery({
|
|
queryKey: ['current-profile'],
|
|
queryFn: getCurrentUserProfile,
|
|
enabled: !isDemoMode && Boolean(sessionQuery.data),
|
|
retry: false,
|
|
});
|
|
const myUserId = profileQuery.data?.id ?? '';
|
|
const isAdmin = Boolean(profileQuery.data?.isAdmin);
|
|
|
|
const [editorOpen, setEditorOpen] = useState(false);
|
|
const [editorJson, setEditorJson] = useState(EMPTY_TEMPLATE_JSON);
|
|
const [editingTemplate, setEditingTemplate] = useState<TemplateEntity | null>(null);
|
|
const [editorError, setEditorError] = useState<string | null>(null);
|
|
|
|
const [categoryFilter, setCategoryFilter] = useState('');
|
|
const [searchFilter, setSearchFilter] = useState('');
|
|
const [selectedTemplateIdState, setSelectedTemplateId] = useState<string | null>(null);
|
|
const [deployProjectIdState, setDeployProjectId] = useState(searchParams.get('project') ?? '');
|
|
const [deployNameByTemplate, setDeployNameByTemplate] = useState<Record<string, string>>({});
|
|
const [variableValuesByTemplate, setVariableValuesByTemplate] = useState<
|
|
Record<string, Record<string, string>>
|
|
>({});
|
|
const [lastDeployment, setLastDeployment] = useState<{
|
|
projectId: string;
|
|
serviceId: string;
|
|
serviceName: string;
|
|
} | null>(null);
|
|
|
|
const templatesQuery = useQuery({
|
|
queryKey: ['templates-page', categoryFilter],
|
|
enabled: !isDemoMode,
|
|
queryFn: () => listTemplates({ category: categoryFilter || undefined }),
|
|
});
|
|
|
|
const projectsQuery = useQuery({
|
|
queryKey: ['template-projects'],
|
|
enabled: !isDemoMode,
|
|
queryFn: () => listProjects(),
|
|
});
|
|
|
|
const templates = useMemo(
|
|
() => (isDemoMode ? demoTemplates : templatesQuery.data ?? []),
|
|
[isDemoMode, templatesQuery.data],
|
|
);
|
|
|
|
const filteredTemplates = useMemo(() => {
|
|
const query = searchFilter.trim().toLowerCase();
|
|
if (!query) {
|
|
return templates;
|
|
}
|
|
|
|
return templates.filter(
|
|
(template) =>
|
|
template.name.toLowerCase().includes(query) ||
|
|
template.description.toLowerCase().includes(query) ||
|
|
template.category.toLowerCase().includes(query),
|
|
);
|
|
}, [searchFilter, templates]);
|
|
|
|
const categoryOptions = useMemo(() => {
|
|
const values = new Set<string>();
|
|
for (const template of templates) {
|
|
if (template.category) {
|
|
values.add(template.category);
|
|
}
|
|
}
|
|
|
|
return Array.from(values).sort((left, right) => left.localeCompare(right));
|
|
}, [templates]);
|
|
|
|
const selectedTemplateId = useMemo(() => {
|
|
if (filteredTemplates.length === 0) {
|
|
return null;
|
|
}
|
|
if (selectedTemplateIdState && filteredTemplates.some((template) => template.id === selectedTemplateIdState)) {
|
|
return selectedTemplateIdState;
|
|
}
|
|
return filteredTemplates[0].id;
|
|
}, [filteredTemplates, selectedTemplateIdState]);
|
|
|
|
const templateDetailQuery = useQuery({
|
|
queryKey: ['template-detail-page', selectedTemplateId],
|
|
enabled: !isDemoMode && Boolean(selectedTemplateId),
|
|
queryFn: () => getTemplateById(selectedTemplateId!),
|
|
});
|
|
|
|
const selectedDetail = isDemoMode
|
|
? selectedTemplateId
|
|
? demoTemplateDetails[selectedTemplateId] ?? null
|
|
: null
|
|
: templateDetailQuery.data ?? null;
|
|
|
|
const projectOptions = useMemo(
|
|
() =>
|
|
isDemoMode
|
|
? demoProjects
|
|
: (projectsQuery.data ?? []).map((project) => ({
|
|
id: project.id,
|
|
name: project.name,
|
|
})),
|
|
[isDemoMode, projectsQuery.data],
|
|
);
|
|
|
|
const deployProjectId = useMemo(() => {
|
|
if (projectOptions.length === 0) {
|
|
return '';
|
|
}
|
|
if (projectOptions.some((project) => project.id === deployProjectIdState)) {
|
|
return deployProjectIdState;
|
|
}
|
|
return projectOptions[0].id;
|
|
}, [deployProjectIdState, projectOptions]);
|
|
|
|
const variableDefaults = useMemo(() => {
|
|
if (!selectedDetail) {
|
|
return {} as Record<string, string>;
|
|
}
|
|
|
|
const defaults: Record<string, string> = {};
|
|
for (const variable of selectedDetail.variables) {
|
|
defaults[variable.key] = variable.defaultValue;
|
|
}
|
|
return defaults;
|
|
}, [selectedDetail]);
|
|
|
|
const deployName = useMemo(() => {
|
|
if (!selectedTemplateId || !selectedDetail) {
|
|
return '';
|
|
}
|
|
return deployNameByTemplate[selectedTemplateId] ?? toServiceName(selectedDetail.template.name);
|
|
}, [deployNameByTemplate, selectedDetail, selectedTemplateId]);
|
|
|
|
const variableValues = useMemo(() => {
|
|
if (!selectedTemplateId) {
|
|
return variableDefaults;
|
|
}
|
|
return {
|
|
...variableDefaults,
|
|
...(variableValuesByTemplate[selectedTemplateId] ?? {}),
|
|
};
|
|
}, [selectedTemplateId, variableDefaults, variableValuesByTemplate]);
|
|
|
|
const missingRequiredVariables = useMemo(() => {
|
|
if (!selectedDetail) {
|
|
return [];
|
|
}
|
|
|
|
return selectedDetail.variables.filter((variable) => {
|
|
if (!variable.required) {
|
|
return false;
|
|
}
|
|
|
|
return !(variableValues[variable.key] ?? '').trim();
|
|
});
|
|
}, [selectedDetail, variableValues]);
|
|
|
|
const deployMutation = useMutation({
|
|
mutationFn: async () => {
|
|
if (!selectedTemplateId) {
|
|
throw new Error('No template selected');
|
|
}
|
|
|
|
const variables: Record<string, string> = {};
|
|
for (const [key, value] of Object.entries(variableValues)) {
|
|
if (value.trim()) {
|
|
variables[key] = value.trim();
|
|
}
|
|
}
|
|
|
|
return deployTemplate(selectedTemplateId, {
|
|
projectId: deployProjectId,
|
|
name: deployName.trim(),
|
|
variables,
|
|
});
|
|
},
|
|
onSuccess: (result) => {
|
|
queryClient.invalidateQueries({ queryKey: ['projects'] });
|
|
queryClient.invalidateQueries({ queryKey: ['project-services'] });
|
|
setLastDeployment({
|
|
projectId: deployProjectId,
|
|
serviceId: result.serviceId,
|
|
serviceName: deployName.trim(),
|
|
});
|
|
},
|
|
});
|
|
|
|
const isDeployDisabled =
|
|
!selectedTemplateId ||
|
|
!deployProjectId ||
|
|
deployName.trim().length === 0 ||
|
|
missingRequiredVariables.length > 0 ||
|
|
deployMutation.isPending;
|
|
|
|
const canManageTemplate = (template: TemplateEntity) =>
|
|
!template.isOfficial && Boolean(template.ownerId) && (template.ownerId === myUserId || isAdmin);
|
|
|
|
const saveTemplateMutation = useMutation({
|
|
mutationFn: (input: TemplateWriteInput) =>
|
|
editingTemplate ? updateTemplate(editingTemplate.id, input) : createTemplate(input),
|
|
onSuccess: (template) => {
|
|
queryClient.invalidateQueries({ queryKey: ['templates-page'] });
|
|
setEditorOpen(false);
|
|
setEditingTemplate(null);
|
|
setEditorError(null);
|
|
setSelectedTemplateId(template.id);
|
|
},
|
|
onError: (error) => {
|
|
setEditorError(error instanceof Error ? error.message : 'Failed to save template');
|
|
},
|
|
});
|
|
|
|
const deleteMutation = useMutation({
|
|
mutationFn: (id: string) => deleteTemplate(id),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['templates-page'] });
|
|
setSelectedTemplateId(null);
|
|
},
|
|
});
|
|
|
|
const openCreateEditor = () => {
|
|
setEditingTemplate(null);
|
|
setEditorJson(EMPTY_TEMPLATE_JSON);
|
|
setEditorError(null);
|
|
setEditorOpen(true);
|
|
};
|
|
|
|
const openEditEditor = (template: TemplateEntity) => {
|
|
let config: unknown = {};
|
|
let variables: unknown = [];
|
|
try {
|
|
config = JSON.parse(template.configRaw || '{}');
|
|
} catch {
|
|
/* keep {} */
|
|
}
|
|
try {
|
|
variables = JSON.parse(template.variablesRaw || '[]');
|
|
} catch {
|
|
/* keep [] */
|
|
}
|
|
setEditingTemplate(template);
|
|
setEditorJson(
|
|
JSON.stringify(
|
|
{
|
|
name: template.name,
|
|
description: template.description,
|
|
category: template.category,
|
|
logo: template.logo,
|
|
config,
|
|
variables,
|
|
},
|
|
null,
|
|
2,
|
|
),
|
|
);
|
|
setEditorError(null);
|
|
setEditorOpen(true);
|
|
};
|
|
|
|
const submitEditor = () => {
|
|
let parsed: unknown;
|
|
try {
|
|
parsed = JSON.parse(editorJson);
|
|
} catch (err) {
|
|
setEditorError(`Invalid JSON: ${err instanceof Error ? err.message : 'parse error'}`);
|
|
return;
|
|
}
|
|
const body = parsed as Partial<TemplateWriteInput>;
|
|
if (!body || typeof body !== 'object' || !body.name || typeof body.config !== 'object' || body.config === null) {
|
|
setEditorError('Template JSON needs at least "name" and a "config" object.');
|
|
return;
|
|
}
|
|
saveTemplateMutation.mutate({
|
|
name: String(body.name),
|
|
description: body.description ?? '',
|
|
category: body.category ?? 'other',
|
|
logo: body.logo ?? '',
|
|
config: body.config as Record<string, unknown>,
|
|
variables: Array.isArray(body.variables) ? body.variables : [],
|
|
});
|
|
};
|
|
|
|
const uploadJsonFile = (file: File) => {
|
|
if (!file.name.toLowerCase().endsWith('.json') && file.type !== 'application/json') {
|
|
setEditorError('Only .json files are accepted.');
|
|
return;
|
|
}
|
|
file
|
|
.text()
|
|
.then((text) => {
|
|
JSON.parse(text);
|
|
setEditorJson(text);
|
|
setEditorError(null);
|
|
})
|
|
.catch(() => setEditorError('File is not valid JSON.'));
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen">
|
|
{/* Header */}
|
|
<div className="border-b border-[var(--border-subtle)] bg-[var(--bg-base)]/50 backdrop-blur-sm">
|
|
<div className="w-full px-8 py-4">
|
|
<div className="flex items-center justify-between gap-4">
|
|
<div>
|
|
<h1 className="v-title">Template Catalog<span className="v-cursor">_</span></h1>
|
|
<p className="text-sm text-[var(--text-secondary)]">Deploy services from pre-configured templates</p>
|
|
</div>
|
|
<div className="flex items-center gap-3 text-sm text-[var(--text-tertiary)]">
|
|
<Layers size={16} />
|
|
<span>{filteredTemplates.length} templates</span>
|
|
{signedIn && !isDemoMode ? (
|
|
<button
|
|
type="button"
|
|
onClick={openCreateEditor}
|
|
className="inline-flex h-9 items-center gap-1.5 rounded-[var(--radius-md)] bg-[var(--accent-primary)] px-3.5 text-[12.5px] font-semibold text-[var(--accent-on)]"
|
|
>
|
|
<Plus size={14} /> New template
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Demo Mode Banner */}
|
|
{isDemoMode && (
|
|
<div className="w-full px-8 py-4">
|
|
<div className="px-4 py-3 rounded-[var(--radius-md)] border border-[var(--warning-soft)] bg-[var(--warning-soft)]/50">
|
|
<div className="flex items-center gap-2 text-sm text-[var(--warning)]">
|
|
<Sparkles size={16} />
|
|
<span>Demo mode active — using sample data</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Main Content */}
|
|
<div className="w-full px-8 py-6">
|
|
<div className="grid grid-cols-1 xl:grid-cols-[380px_1fr] gap-6">
|
|
{/* Template List */}
|
|
<section className="panel overflow-hidden">
|
|
<div className="p-4 border-b border-[var(--border-subtle)]">
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<Filter size={16} className="text-[var(--text-tertiary)]" />
|
|
<span className="text-sm font-medium text-[var(--text-secondary)]">Filters</span>
|
|
</div>
|
|
<div className="space-y-3">
|
|
<div>
|
|
<label className="block text-xs font-medium uppercase tracking-wider text-[var(--text-muted)] mb-2">
|
|
Category
|
|
</label>
|
|
<select
|
|
value={categoryFilter}
|
|
onChange={(e) => setCategoryFilter(e.target.value)}
|
|
className="w-full h-10 px-3 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] text-sm focus:border-[var(--accent-primary)] transition-colors"
|
|
>
|
|
<option value="">All categories</option>
|
|
{categoryOptions.map((option) => (
|
|
<option key={option} value={option}>{categoryLabel(option)}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium uppercase tracking-wider text-[var(--text-muted)] mb-2">
|
|
Search
|
|
</label>
|
|
<div className="relative">
|
|
<Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-[var(--text-tertiary)]" />
|
|
<input
|
|
value={searchFilter}
|
|
onChange={(e) => setSearchFilter(e.target.value)}
|
|
className="w-full h-10 pl-10 pr-3 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] text-sm focus:border-[var(--accent-primary)] transition-colors"
|
|
placeholder="Search templates..."
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{!isDemoMode && templatesQuery.isLoading ? (
|
|
<div className="p-12 text-center">
|
|
<Loader2 size={24} className="animate-spin mx-auto text-[var(--text-tertiary)]" />
|
|
<p className="mt-3 text-sm text-[var(--text-muted)]">Loading templates...</p>
|
|
</div>
|
|
) : null}
|
|
|
|
{!isDemoMode && templatesQuery.isError ? (
|
|
<div className="p-8 text-center">
|
|
<div className="w-12 h-12 mx-auto mb-4 rounded-full bg-[var(--error-soft)] flex items-center justify-center">
|
|
<Box size={24} className="text-[var(--error)]" />
|
|
</div>
|
|
<p className="text-sm text-[var(--error)]">Failed to load templates</p>
|
|
</div>
|
|
) : null}
|
|
|
|
{filteredTemplates.length === 0 && !templatesQuery.isLoading ? (
|
|
<div className="p-12 text-center">
|
|
<div className="w-12 h-12 mx-auto mb-4 rounded-full bg-[var(--surface-muted)] flex items-center justify-center">
|
|
<Search size={24} className="text-[var(--text-tertiary)]" />
|
|
</div>
|
|
<p className="text-sm text-[var(--text-muted)]">No templates match filters</p>
|
|
</div>
|
|
) : null}
|
|
|
|
{filteredTemplates.length > 0 ? (
|
|
<div className="max-h-[600px] overflow-auto p-3">
|
|
<div className="grid grid-cols-1 gap-2">
|
|
{filteredTemplates.map((template) => {
|
|
const selected = template.id === selectedTemplateId;
|
|
const Icon = categoryIcon(template.category);
|
|
const categoryColor = template.category === 'database' ? '#7ab8ff' : template.category === 'frontend' ? '#f2c94c' : template.category === 'web' ? 'var(--accent-primary)' : '#9295a4';
|
|
return (
|
|
<button
|
|
key={template.id}
|
|
onClick={() => setSelectedTemplateId(template.id)}
|
|
className={`w-full p-4 rounded-[var(--radius-lg)] border text-left transition-all duration-300 group ${
|
|
selected
|
|
? 'border-[var(--accent-primary)] bg-[var(--accent-primary-soft)] shadow-lg shadow-[var(--accent-primary-glow)]'
|
|
: 'border-[var(--border-subtle)] hover:border-[var(--border-default)] hover:bg-[var(--surface-muted)]/50 card-lift'
|
|
}`}
|
|
>
|
|
<div className="flex items-start gap-3">
|
|
<div
|
|
className={`w-11 h-11 rounded-xl flex items-center justify-center transition-all duration-300 ${
|
|
selected ? 'ring-2 ring-white/20' : ''
|
|
}`}
|
|
style={{
|
|
background: selected ? categoryColor : `${categoryColor}20`,
|
|
color: selected ? 'white' : categoryColor
|
|
}}
|
|
>
|
|
<Icon size={18} />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2">
|
|
<p className={`text-sm font-semibold tracking-tight ${selected ? 'text-[var(--accent-primary)]' : 'text-[var(--text-primary)]'}`}>
|
|
{template.name}
|
|
</p>
|
|
{template.isOfficial ? (
|
|
<span className="flex items-center gap-1 px-1.5 py-0.5 rounded bg-[var(--warning-soft)] text-[var(--warning)] text-[10px] font-semibold">
|
|
<Star size={8} className="fill-[var(--warning)]" />
|
|
Official
|
|
</span>
|
|
) : template.ownerId === myUserId ? (
|
|
<span className="px-1.5 py-0.5 rounded bg-[var(--accent-primary-soft)] text-[var(--accent-primary)] text-[10px] font-semibold">
|
|
Mine
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
<div className="flex items-center gap-2 mt-1">
|
|
<span
|
|
className="text-[10px] font-semibold uppercase tracking-wider"
|
|
style={{ color: categoryColor }}
|
|
>
|
|
{categoryLabel(template.category)}
|
|
</span>
|
|
<span className="text-[10px] text-[var(--text-tertiary)]">•</span>
|
|
<span className="text-[10px] text-[var(--text-tertiary)]">{safeTemplateRuntime(template.configRaw)}</span>
|
|
</div>
|
|
<p className="text-xs text-[var(--text-tertiary)] mt-2 line-clamp-2 group-hover:text-[var(--text-secondary)] transition-colors">{template.description}</p>
|
|
</div>
|
|
<ArrowRight
|
|
size={14}
|
|
className={`text-[var(--text-tertiary)] transition-all duration-300 ${
|
|
selected ? 'opacity-100 text-[var(--accent-primary)]' : 'opacity-0 group-hover:opacity-100'
|
|
}`}
|
|
/>
|
|
</div>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</section>
|
|
|
|
{/* Template Detail */}
|
|
<section className="panel p-6">
|
|
{!selectedTemplateId ? (
|
|
<div className="py-16 text-center">
|
|
<div className="w-16 h-16 mx-auto mb-4 rounded-full bg-[var(--surface-muted)] flex items-center justify-center">
|
|
<Layers size={28} className="text-[var(--text-tertiary)]" />
|
|
</div>
|
|
<p className="text-sm text-[var(--text-muted)]">Select a template to view details and deploy</p>
|
|
</div>
|
|
) : null}
|
|
|
|
{selectedTemplateId && !isDemoMode && templateDetailQuery.isLoading ? (
|
|
<div className="py-16 text-center">
|
|
<Loader2 size={24} className="animate-spin mx-auto text-[var(--text-tertiary)]" />
|
|
<p className="mt-3 text-sm text-[var(--text-muted)]">Loading template details...</p>
|
|
</div>
|
|
) : null}
|
|
|
|
{selectedTemplateId && !isDemoMode && templateDetailQuery.isError ? (
|
|
<div className="py-16 text-center">
|
|
<div className="w-12 h-12 mx-auto mb-4 rounded-full bg-[var(--error-soft)] flex items-center justify-center">
|
|
<Box size={24} className="text-[var(--error)]" />
|
|
</div>
|
|
<p className="text-sm text-[var(--error)]">Failed to load template details</p>
|
|
</div>
|
|
) : null}
|
|
|
|
{selectedDetail ? (
|
|
<>
|
|
{/* Header */}
|
|
<div className="flex items-start justify-between gap-4 mb-6">
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-14 h-14 rounded-[var(--radius-md)] bg-[var(--accent-primary-soft)] flex items-center justify-center">
|
|
{(() => {
|
|
const Icon = categoryIcon(selectedDetail.template.category);
|
|
return <Icon size={24} className="text-[var(--accent-primary)]" />;
|
|
})()}
|
|
</div>
|
|
<div>
|
|
<div className="flex items-center gap-2">
|
|
<h2 className="text-xl font-semibold text-[var(--text-primary)]">{selectedDetail.template.name}</h2>
|
|
{selectedDetail.template.isOfficial && (
|
|
<span className="flex items-center gap-1 px-2 py-0.5 rounded-full bg-[var(--warning-soft)] text-[var(--warning)] text-xs font-medium">
|
|
<Star size={10} className="fill-[var(--warning)]" />
|
|
Official
|
|
</span>
|
|
)}
|
|
</div>
|
|
<p className="text-sm text-[var(--text-secondary)] mt-1">{selectedDetail.template.description}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="px-3 py-1 rounded-full border border-[var(--border-subtle)] text-xs text-[var(--text-tertiary)]">
|
|
{categoryLabel(selectedDetail.template.category)}
|
|
</span>
|
|
<span className="px-3 py-1 rounded-full border border-[var(--border-subtle)] text-xs text-[var(--text-tertiary)]">
|
|
{selectedDetail.config.runtime || 'n/a'}
|
|
</span>
|
|
{canManageTemplate(selectedDetail.template) ? (
|
|
<>
|
|
<button
|
|
type="button"
|
|
onClick={() => openEditEditor(selectedDetail.template)}
|
|
className="inline-flex items-center gap-1 rounded-[var(--radius-md)] border border-[var(--border-subtle)] px-2.5 py-1 text-xs text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
|
|
>
|
|
<Pencil size={11} /> Edit
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => deleteMutation.mutate(selectedDetail.template.id)}
|
|
disabled={deleteMutation.isPending}
|
|
className="inline-flex items-center gap-1 rounded-[var(--radius-md)] border border-[var(--border-subtle)] px-2.5 py-1 text-xs text-[var(--error)] hover:bg-[var(--error-soft)] disabled:opacity-50"
|
|
>
|
|
<Trash2 size={11} /> Delete
|
|
</button>
|
|
</>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Config Grid */}
|
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
|
<div className="panel-soft p-4">
|
|
<p className="text-xs font-medium uppercase tracking-wider text-[var(--text-muted)]">Type</p>
|
|
<p className="mono text-sm text-[var(--text-primary)] mt-2">{selectedDetail.config.type || '—'}</p>
|
|
</div>
|
|
<div className="panel-soft p-4">
|
|
<p className="text-xs font-medium uppercase tracking-wider text-[var(--text-muted)]">Port</p>
|
|
<p className="mono text-sm text-[var(--text-primary)] mt-2">{selectedDetail.config.port || '—'}</p>
|
|
</div>
|
|
<div className="panel-soft p-4">
|
|
<p className="text-xs font-medium uppercase tracking-wider text-[var(--text-muted)]">Build</p>
|
|
<p className="mono text-xs text-[var(--text-primary)] mt-2 truncate">{selectedDetail.config.buildCommand || '—'}</p>
|
|
</div>
|
|
<div className="panel-soft p-4">
|
|
<p className="text-xs font-medium uppercase tracking-wider text-[var(--text-muted)]">Start</p>
|
|
<p className="mono text-xs text-[var(--text-primary)] mt-2 truncate">{selectedDetail.config.startCommand || '—'}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="panel-soft p-4 mb-6">
|
|
<p className="text-xs font-medium uppercase tracking-wider text-[var(--text-muted)] mb-2">How Templates Work</p>
|
|
<p className="text-sm text-[var(--text-secondary)]">
|
|
Template defaults are merged with your variable inputs. Creating from template saves a stopped service in the selected project, then you deploy it from the service detail page.
|
|
</p>
|
|
{selectedDetail.config.type === 'database' && (
|
|
<p className="text-sm text-[var(--text-secondary)] mt-2">
|
|
Database templates create preconfigured database services with credentials and runtime settings, so you only need to provide required secrets.
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Deploy Section */}
|
|
<div className="border-t border-[var(--border-subtle)] pt-6">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="w-10 h-10 rounded-[var(--radius-md)] bg-[var(--success-soft)] flex items-center justify-center">
|
|
<Play size={18} className="text-[var(--success)]" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-[var(--text-primary)]">Deploy from Template</h3>
|
|
<p className="text-sm text-[var(--text-secondary)]">Configure and create a new service</p>
|
|
</div>
|
|
</div>
|
|
|
|
{!signedIn ? (
|
|
<div className="rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] px-4 py-5 text-center">
|
|
<p className="text-sm text-[var(--text-secondary)]">
|
|
Sign in to deploy this template into one of your projects.
|
|
</p>
|
|
<Link
|
|
to="/auth/sign-in"
|
|
className="mt-3 inline-flex items-center gap-1.5 rounded-[var(--radius-md)] bg-[var(--accent-primary)] px-4 py-2 text-[12.5px] font-semibold text-[var(--accent-on)]"
|
|
>
|
|
Sign in <ArrowRight size={13} />
|
|
</Link>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-xs font-medium uppercase tracking-wider text-[var(--text-muted)] mb-2">
|
|
Project
|
|
</label>
|
|
<select
|
|
value={deployProjectId}
|
|
onChange={(e) => setDeployProjectId(e.target.value)}
|
|
className="w-full h-10 px-3 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] text-sm focus:border-[var(--accent-primary)] transition-colors"
|
|
>
|
|
{projectOptions.length === 0 && <option value="">No projects available</option>}
|
|
{projectOptions.map((project) => (
|
|
<option key={project.id} value={project.id}>{project.name}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium uppercase tracking-wider text-[var(--text-muted)] mb-2">
|
|
Service Name
|
|
</label>
|
|
<input
|
|
value={deployName}
|
|
onChange={(e) => {
|
|
if (!selectedTemplateId) return;
|
|
setDeployNameByTemplate((current) => ({
|
|
...current,
|
|
[selectedTemplateId]: e.target.value,
|
|
}));
|
|
}}
|
|
className="w-full h-10 px-3 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] text-sm focus:border-[var(--accent-primary)] transition-colors"
|
|
placeholder="service-name"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{selectedDetail.variables.length > 0 && (
|
|
<div className="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{selectedDetail.variables.map((variable) => {
|
|
const hasError = variable.required && !(variableValues[variable.key] ?? '').trim();
|
|
return (
|
|
<div key={variable.key}>
|
|
<label className="block text-xs font-medium uppercase tracking-wider text-[var(--text-muted)] mb-2">
|
|
{variable.label}
|
|
{variable.required && <span className="text-[var(--error)] ml-1">*</span>}
|
|
</label>
|
|
<input
|
|
type={variable.secret ? 'password' : 'text'}
|
|
value={variableValues[variable.key] ?? ''}
|
|
onChange={(e) => {
|
|
if (!selectedTemplateId) return;
|
|
setVariableValuesByTemplate((current) => ({
|
|
...current,
|
|
[selectedTemplateId]: {
|
|
...(current[selectedTemplateId] ?? {}),
|
|
[variable.key]: e.target.value,
|
|
},
|
|
}));
|
|
}}
|
|
className={`w-full h-10 px-3 rounded-[var(--radius-md)] border bg-[var(--surface-muted)] text-sm transition-colors ${
|
|
hasError ? 'border-[var(--error)]' : 'border-[var(--border-subtle)] focus:border-[var(--accent-primary)]'
|
|
}`}
|
|
placeholder={variable.defaultValue}
|
|
/>
|
|
<p className="text-xs text-[var(--text-tertiary)] mt-1">
|
|
{variable.description}
|
|
</p>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
|
|
{missingRequiredVariables.length > 0 && (
|
|
<div className="mt-4 px-4 py-3 rounded-[var(--radius-md)] bg-[var(--error-soft)] text-sm text-[var(--error)]">
|
|
Fill required variables: {missingRequiredVariables.map((v) => v.key).join(', ')}
|
|
</div>
|
|
)}
|
|
|
|
{!isDemoMode && projectsQuery.isError && (
|
|
<div className="mt-4 px-4 py-3 rounded-[var(--radius-md)] bg-[var(--error-soft)] text-sm text-[var(--error)]">
|
|
Failed to load projects
|
|
</div>
|
|
)}
|
|
|
|
{deployMutation.isError && (
|
|
<div className="mt-4 px-4 py-3 rounded-[var(--radius-md)] bg-[var(--error-soft)] text-sm text-[var(--error)]">
|
|
{deployMutation.error instanceof Error ? deployMutation.error.message : 'Failed to create service'}
|
|
</div>
|
|
)}
|
|
|
|
{lastDeployment && (
|
|
<div className="mt-4 px-4 py-3 rounded-[var(--radius-md)] bg-[var(--success-soft)] text-sm text-[var(--success)]">
|
|
<div className="flex items-center gap-2">
|
|
<Check size={16} />
|
|
<span>
|
|
Service <span className="mono font-medium">{lastDeployment.serviceName}</span> created
|
|
</span>
|
|
<Link
|
|
to={`/projects/${lastDeployment.projectId}/services/${lastDeployment.serviceId}${isDemoMode ? '?demo=1' : ''}`}
|
|
className="flex items-center gap-1 ml-2 underline underline-offset-2 hover:no-underline"
|
|
>
|
|
View <ArrowRight size={12} />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="mt-6">
|
|
<button
|
|
onClick={() => deployMutation.mutate()}
|
|
disabled={isDeployDisabled}
|
|
className="flex items-center gap-2 h-11 px-6 rounded-[var(--radius-md)] text-[var(--accent-on)] text-sm font-medium shadow-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all"
|
|
style={{ background: 'var(--accent-primary)' }}
|
|
>
|
|
{deployMutation.isPending ? (
|
|
<>
|
|
<Loader2 size={16} className="animate-spin" />
|
|
Creating...
|
|
</>
|
|
) : (
|
|
<>
|
|
<Play size={16} />
|
|
Create Service
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</>
|
|
) : null}
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Template editor — JSON only */}
|
|
{editorOpen ? (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm">
|
|
<div className="flex max-h-[90vh] w-full max-w-2xl flex-col overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--bg-base)] shadow-2xl">
|
|
<div className="flex items-center justify-between border-b border-[var(--border-subtle)] px-5 py-4">
|
|
<div>
|
|
<h2 className="text-[15px] font-semibold text-[var(--text-primary)]">
|
|
{editingTemplate ? `Edit ${editingTemplate.name}` : 'New template'}
|
|
</h2>
|
|
<p className="text-xs text-[var(--text-tertiary)]">
|
|
JSON definition — name, category, config and variables.
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<label className="inline-flex cursor-pointer items-center gap-1.5 rounded-[var(--radius-md)] border border-[var(--border-default)] px-3 py-1.5 text-xs font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)]">
|
|
<Upload size={12} /> Upload .json
|
|
<input
|
|
type="file"
|
|
accept=".json,application/json"
|
|
className="hidden"
|
|
onChange={(e) => {
|
|
const file = e.target.files?.[0];
|
|
if (file) uploadJsonFile(file);
|
|
e.target.value = '';
|
|
}}
|
|
/>
|
|
</label>
|
|
<button
|
|
type="button"
|
|
onClick={() => setEditorOpen(false)}
|
|
className="flex h-8 w-8 items-center justify-center rounded-[var(--radius-md)] text-[var(--text-tertiary)] hover:bg-[var(--surface-muted)] hover:text-[var(--text-primary)]"
|
|
>
|
|
<X size={15} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<textarea
|
|
value={editorJson}
|
|
onChange={(e) => setEditorJson(e.target.value)}
|
|
spellCheck={false}
|
|
className="mono min-h-[380px] flex-1 resize-none bg-[var(--bg-void)] p-4 text-[12.5px] leading-relaxed text-[var(--text-secondary)] outline-none"
|
|
/>
|
|
{editorError ? (
|
|
<div className="border-t border-[var(--border-subtle)] bg-[var(--error-soft)] px-5 py-2.5 text-xs text-[var(--error)]">
|
|
{editorError}
|
|
</div>
|
|
) : null}
|
|
<div className="flex items-center justify-between border-t border-[var(--border-subtle)] px-5 py-3.5">
|
|
<p className="text-[11px] text-[var(--text-tertiary)]">
|
|
Saved as a user template — only you (and admins) can edit or delete it.
|
|
</p>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => setEditorOpen(false)}
|
|
className="rounded-[var(--radius-md)] px-3.5 py-2 text-xs font-medium text-[var(--text-secondary)] hover:bg-[var(--surface-muted)]"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={submitEditor}
|
|
disabled={saveTemplateMutation.isPending}
|
|
className="inline-flex items-center gap-1.5 rounded-[var(--radius-md)] bg-[var(--accent-primary)] px-4 py-2 text-xs font-semibold text-[var(--accent-on)] disabled:opacity-50"
|
|
>
|
|
{saveTemplateMutation.isPending ? <Loader2 size={13} className="animate-spin" /> : null}
|
|
{editingTemplate ? 'Save changes' : 'Create template'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|