feat: add author attribution support to status templates UI

This commit is contained in:
Aleix Soler 2026-03-18 15:07:31 +01:00
parent 3b8efa9977
commit a2fffec37c
4 changed files with 66 additions and 1 deletions

View file

@ -18,6 +18,8 @@ export const TemplateEditorModal: React.FC<TemplateEditorModalProps> = ({
}) => {
const [name, setName] = useState(template?.name || "");
const [description, setDescription] = useState(template?.description || "");
const [author, setAuthor] = useState(template?.author || "");
const [github, setGithub] = useState(template?.github || "");
const [statuses, setStatuses] = useState<NoteStatus[]>(
template?.statuses || [
{
@ -52,6 +54,8 @@ export const TemplateEditorModal: React.FC<TemplateEditorModalProps> = ({
id: templateId,
name: name.trim(),
description: description.trim(),
author: author.trim() || undefined,
github: github.trim() || undefined,
statuses: statusesWithTemplateId,
};
@ -145,6 +149,30 @@ export const TemplateEditorModal: React.FC<TemplateEditorModalProps> = ({
/>
</SettingItem>
<SettingItem
name="Author (Optional)"
description="Your name or community name"
>
<Input
variant="text"
value={author}
onChange={setAuthor}
placeholder="e.g. Jane Doe"
/>
</SettingItem>
<SettingItem
name="GitHub URL (Optional)"
description="Link to your GitHub profile or repository"
>
<Input
variant="text"
value={github}
onChange={setGithub}
placeholder="e.g. https://github.com/janedoe"
/>
</SettingItem>
<SettingItem
name="Statuses"
description="Define the statuses included in this template, including emojis and optional Lucide icons"

View file

@ -55,7 +55,25 @@ export const TemplateItem: React.FC<TemplateItemProps> = ({
)}
</div>
<div className="setting-item-description">
{template.description}:
{template.description}
{(template.author || template.github) && (
<div className="template-author-info">
By{" "}
{template.github ? (
<a
href={template.github}
target="_blank"
rel="noopener noreferrer"
onClick={(e) => e.stopPropagation()}
>
{template.author ||
template.github.split("/").pop()}
</a>
) : (
<span>{template.author}</span>
)}
</div>
)}
</div>
<div className="template-statuses">
{template.statuses.map((status, index) => (

View file

@ -229,6 +229,23 @@
transform: none;
}
.template-author-info {
display: block;
font-size: var(--font-ui-smaller);
color: var(--text-muted);
margin-top: var(--size-2-1);
font-style: italic;
}
.template-author-info a {
color: var(--text-accent);
text-decoration: none;
}
.template-author-info a:hover {
text-decoration: underline;
}
/* Responsive Design */
@media (max-width: 768px) {
.template-settings-actions {

View file

@ -19,6 +19,8 @@ export interface StatusTemplate {
id: string;
name: string;
description: string;
author?: string;
github?: string;
statuses: NoteStatus[];
}