From 3de5206dd4d80521a35fb451eab66ce99ebd6bc6 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Tue, 24 Mar 2026 19:49:41 +0100
Subject: [PATCH] feat(templates): add templates sidebar, template picker,
 save-as-template action, and i18n keys

---
 frontend/src/components/home/Navigation.vue   | 15 ++++++
 .../project/ProjectSettingsDropdown.vue       | 23 ++++++++++
 frontend/src/i18n/lang/en.json                |  8 ++++
 frontend/src/views/project/NewProject.vue     | 46 +++++++++++++++++--
 4 files changed, 89 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/home/Navigation.vue b/frontend/src/components/home/Navigation.vue
index b287362a2..649e25007 100644
--- a/frontend/src/components/home/Navigation.vue
+++ b/frontend/src/components/home/Navigation.vue
@@ -108,6 +108,20 @@
 					:can-collapse="true"
 				/>
 			</nav>
+
+			<nav
+				v-if="templateProjects.length"
+				class="menu"
+			>
+				<span class="menu-label">
+					{{ $t('project.template.title') }}
+				</span>
+				<ProjectsNavigation
+					:model-value="templateProjects"
+					:can-edit-order="false"
+					:can-collapse="true"
+				/>
+			</nav>
 		</template>
 
 		<PoweredByLink
@@ -146,6 +160,7 @@ const {sidebarWidth, isResizing, startResize, isMobile} = useSidebarResize()
 const projects = computed(() => projectStore.notArchivedRootProjects as IProject[])
 const favoriteProjects = computed(() => projectStore.favoriteProjects as IProject[])
 const savedFilterProjects = computed(() => projectStore.savedFilterProjects as IProject[])
+const templateProjects = computed(() => projectStore.templateProjects as IProject[])
 </script>
 
 <style lang="scss" scoped>
diff --git a/frontend/src/components/project/ProjectSettingsDropdown.vue b/frontend/src/components/project/ProjectSettingsDropdown.vue
index d9154b2d3..1b66125bc 100644
--- a/frontend/src/components/project/ProjectSettingsDropdown.vue
+++ b/frontend/src/components/project/ProjectSettingsDropdown.vue
@@ -81,6 +81,12 @@
 			>
 				{{ $t('menu.duplicate') }}
 			</DropdownItem>
+			<DropdownItem
+				icon="copy"
+				@click="saveAsTemplate"
+			>
+				{{ $t('project.template.saveAsTemplate') }}
+			</DropdownItem>
 			<DropdownItem
 				v-tooltip="isDefaultProject ? $t('menu.cantArchiveIsDefault') : ''"
 				:to="{ name: 'project.settings.archive', params: { projectId: project.id } }"
@@ -140,6 +146,9 @@ import {useConfigStore} from '@/stores/config'
 import {useProjectStore} from '@/stores/projects'
 import {useAuthStore} from '@/stores/auth'
 import {PERMISSIONS} from '@/constants/permissions'
+import AbstractService from '@/services/abstractService'
+import {success} from '@/message'
+import {useI18n} from 'vue-i18n'
 
 const props = withDefaults(defineProps<{
 	project: IProject
@@ -168,4 +177,18 @@ function setSubscriptionInStore(sub: ISubscription) {
 
 const authStore = useAuthStore()
 const isDefaultProject = computed(() => props.project?.id === authStore.settings.defaultProjectId)
+
+const {t} = useI18n({useScope: 'global'})
+
+async function saveAsTemplate() {
+	const templateService = new AbstractService({
+		create: '/projects/{projectId}/template',
+	})
+	const response = await templateService.create({projectId: props.project.id})
+	if (response.project) {
+		projectStore.setProject(response.project)
+	}
+	await projectStore.loadAllProjects()
+	success({message: t('project.template.saveAsTemplateSuccess')})
+}
 </script>
diff --git a/frontend/src/i18n/lang/en.json b/frontend/src/i18n/lang/en.json
index 3b90d69ed..e10f53a44 100644
--- a/frontend/src/i18n/lang/en.json
+++ b/frontend/src/i18n/lang/en.json
@@ -394,6 +394,14 @@
       "text": "Select a parent project which should hold the duplicated project:",
       "success": "The project was successfully duplicated."
     },
+    "template": {
+      "title": "Templates",
+      "saveAsTemplate": "Save as Template",
+      "saveAsTemplateSuccess": "Project saved as template successfully.",
+      "useTemplate": "Use a template",
+      "selectTemplate": "Select a template...",
+      "createFromTemplate": "Creating project from template..."
+    },
     "edit": {
       "header": "Edit This Project",
       "title": "Edit \"{project}\"",
diff --git a/frontend/src/views/project/NewProject.vue b/frontend/src/views/project/NewProject.vue
index 452533191..2f017f487 100644
--- a/frontend/src/views/project/NewProject.vue
+++ b/frontend/src/views/project/NewProject.vue
@@ -5,6 +5,18 @@
 		:primary-disabled="project.title === ''"
 		@create="createProject()"
 	>
+		<FormField
+			v-if="projectStore.hasTemplates"
+			:label="$t('project.template.useTemplate')"
+		>
+			<Multiselect
+				v-model="selectedTemplate"
+				:options="templateOptions"
+				:placeholder="$t('project.template.selectTemplate')"
+				label="title"
+				track-by="id"
+			/>
+		</FormField>
 		<FormField
 			v-model="project.title"
 			v-focus
@@ -31,14 +43,18 @@
 </template>
 
 <script setup lang="ts">
-import {ref, reactive, shallowReactive, watch} from 'vue'
+import {ref, reactive, shallowReactive, computed, watch} from 'vue'
 import {useI18n} from 'vue-i18n'
+import {useRouter} from 'vue-router'
 
 import ProjectService from '@/services/project'
 import ProjectModel from '@/models/project'
+import ProjectDuplicateService from '@/services/projectDuplicateService'
+import ProjectDuplicateModel from '@/models/projectDuplicateModel'
 import CreateEdit from '@/components/misc/CreateEdit.vue'
 import ColorPicker from '@/components/input/ColorPicker.vue'
 import FormField from '@/components/input/FormField.vue'
+import Multiselect from '@/components/input/Multiselect.vue'
 
 import {success} from '@/message'
 import {useTitle} from '@/composables/useTitle'
@@ -51,6 +67,7 @@ const props = defineProps<{
 }>()
 
 const {t} = useI18n({useScope: 'global'})
+const router = useRouter()
 
 useTitle(() => t('project.create.header'))
 
@@ -60,6 +77,9 @@ const projectService = shallowReactive(new ProjectService())
 const projectStore = useProjectStore()
 const parentProject = ref<IProject | null>(null)
 const isSubmitting = ref(false)
+const selectedTemplate = ref<IProject | null>(null)
+
+const templateOptions = computed(() => projectStore.templateProjects as IProject[])
 
 watch(
 	() => props.parentProjectId,
@@ -85,8 +105,28 @@ async function createProject() {
 	}
 
 	try {
-		await projectStore.createProject(project)
-		success({message: t('project.create.createdSuccess')})
+		if (selectedTemplate.value) {
+			const duplicateService = new ProjectDuplicateService()
+			const duplicate = new ProjectDuplicateModel({
+				projectId: selectedTemplate.value.id,
+				parentProjectId: project.parentProjectId,
+			})
+			const response = await duplicateService.create(duplicate)
+			const newProject = response.duplicatedProject
+			if (newProject) {
+				if (project.title !== selectedTemplate.value.title) {
+					const updatedProject = await projectService.update({...newProject, title: project.title})
+					projectStore.setProject(updatedProject)
+				} else {
+					projectStore.setProject(newProject)
+				}
+				router.push({name: 'project.index', params: {projectId: newProject.id}})
+			}
+			success({message: t('project.create.createdSuccess')})
+		} else {
+			await projectStore.createProject(project)
+			success({message: t('project.create.createdSuccess')})
+		}
 	} finally {
 		isSubmitting.value = false
 	}