Merge workspace templates

Author: stefan-ernst

api/openapi.json

@@ -18,6 +18,7 @@ export const workspaces = {
     }),
   getStatuses: (id) => fetchAPI(`/workspaces/${id}/statuses`),
   getItemTypes: (id) => fetchAPI(`/workspaces/${id}/item-types`),
+  getTemplates: () => fetchAPI('/workspace-templates'),
   // Allowed status transitions for every (item_type_id, status_id) pair in the
   // workspace, keyed "<itemTypeId>:<statusId>". One request replaces the
   // board's per-pair /items/{id}/available-status-transitions preload.

api/openapi.yaml

@@ -87,9 +87,15 @@
   let workspaceFormData = $state({
     name: '',
     key: '',
-    description: ''
+    description: '',
+    template_workspace_id: null
   });
 
+  let workspaceTemplateOptions = $state([]);
+  let workspaceTemplatesLoading = $state(false);
+  let workspaceTemplatesError = $state(null);
+  let workspaceTemplatesLoaded = $state(false);
+
   let collectionFormData = $state({
     name: '',
     description: '',
@@ -147,7 +153,8 @@
     workspaceFormData = {
       name: '',
       key: '',
-      description: ''
+      description: '',
+      template_workspace_id: null
     };
 
     collectionFormData = {
@@ -167,6 +174,23 @@
     }
   }
 
+  async function loadWorkspaceTemplates() {
+    if (workspaceTemplatesLoaded || workspaceTemplatesLoading) return;
+    workspaceTemplatesLoading = true;
+    workspaceTemplatesError = null;
+    try {
+      const templates = await api.workspaces.getTemplates();
+      workspaceTemplateOptions = Array.isArray(templates) ? templates : [];
+      workspaceTemplatesLoaded = true;
+    } catch (error) {
+      console.error('Failed to load workspace templates:', error);
+      workspaceTemplateOptions = [];
+      workspaceTemplatesError = error?.message || String(error);
+    } finally {
+      workspaceTemplatesLoading = false;
+    }
+  }
+
   async function uploadPendingDescriptionImages(itemId, description) {
     if (workItemFormStore.pendingDescriptionImages.length === 0) {
       return description;
@@ -247,14 +271,18 @@
         navigate('/milestones');
         close();
       } else if (selectedType === 'workspace') {
-        const result = await api.workspaces.create({
+        const payload = {
           name: workspaceFormData.name,
           key: workspaceFormData.key,
           description: workspaceFormData.description || '',
           icon: 'Package',
           color: '#3b82f6',
           active: true
-        });
+        };
+        if (workspaceFormData.template_workspace_id) {
+          payload.template_workspace_id = workspaceFormData.template_workspace_id;
+        }
+        const result = await api.workspaces.create(payload);
 
         window.dispatchEvent(new CustomEvent('refresh-workspaces'));
         if (!skipNavigate) {
@@ -318,6 +346,18 @@
     }
   });
 
+  // Load template summaries when the workspace form opens for a user who may
+  // create workspaces. Blank creation works without them.
+  $effect(() => {
+    if (
+      isOpen &&
+      selectedType === 'workspace' &&
+      ($permissionStore.userPermissionKeys?.has('workspace.create') || $isSystemAdmin)
+    ) {
+      loadWorkspaceTemplates();
+    }
+  });
+
   // Sync selectedType when initialType prop changes (e.g. before modal opens)
   $effect(() => {
     selectedType = initialType;
@@ -507,6 +547,9 @@
           <WorkspaceForm
             bind:this={workspaceFormRef}
             bind:formData={workspaceFormData}
+            templates={workspaceTemplateOptions}
+            templatesLoading={workspaceTemplatesLoading}
+            templatesError={workspaceTemplatesError}
             bind:nameInputRef={nameInputRef}
           />
         {:else if selectedType === 'collection'}

frontend/src/lib/api/workspaces.js

@@ -439,7 +439,7 @@
           <!-- Table Body -->
           <div>
             {#each filteredItems as item (item.id)}
-              <div class="px-4 py-3 list-row transition-colors" style="border-top: 1px solid var(--ds-border);" data-item-row data-item-id={item.id}>
+              <div class="px-4 py-3 list-row transition-colors" style="border-top: 1px solid var(--ds-border);" data-item-row data-item-id={item.id} data-testid={`workspace-item-row-${item.id}`}>
                 <LazyRender>
                   {#snippet children()}
                     <div

frontend/src/lib/dialogs/CreateModal.svelte

@@ -141,7 +141,7 @@
           </div>
         {/if}
       {/if}
-      <div class="flex-1 min-w-0">
+      <div class="flex-1 min-w-0" data-testid={`workspace-item-title-${item.id}`}>
         {#if canEdit}
           <InlineFieldEditor
             {item}

frontend/src/lib/features/collections/CollectionList.svelte

@@ -2,13 +2,20 @@
   import { t } from '../stores/i18n.svelte.js';
   import MilkdownEditor from '../editors/LazyMilkdownEditor.svelte';
   import Input from '../components/Input.svelte';
+  import ChipPicker from '../pickers/ChipPicker.svelte';
+  import Spinner from '../components/Spinner.svelte';
+  import { LayoutTemplate } from '@lucide/svelte';
 
   let {
     formData = $bindable({
       name: '',
       key: '',
-      description: ''
+      description: '',
+      template_workspace_id: null
     }),
+    templates = [],
+    templatesLoading = false,
+    templatesError = null,
     nameInputRef = $bindable(null)
   } = $props();
 
@@ -34,6 +41,14 @@
     formData.key = e.target.value.toUpperCase();
   }
 
+  let templatePickerItems = $derived.by(() => {
+    if (templates.length === 0) return [];
+    return [
+      { id: null, name: t('createModal.workspaceTemplateBlank') },
+      ...templates
+    ];
+  });
+
   export function validate() {
     return formData.name.trim() !== '' && formData.key.trim() !== '';
   }
@@ -43,15 +58,17 @@
       name: formData.name,
       key: formData.key,
       description: formData.description || '',
-      active: true
+      active: true,
+      template_workspace_id: formData.template_workspace_id ?? null
     };
   }
 
   export function reset() {
     formData = {
       name: '',
       key: '',
-      description: ''
+      description: '',
+      template_workspace_id: null
     };
     keyManuallyEdited = false;
   }
@@ -87,6 +104,60 @@
     placeholder={t('createModal.workspaceKeyPlaceholder')}
   />
 
+  <!-- Template picker: blank workspace is the default and preserves the
+       legacy creation flow. -->
+  {#if templatesLoading}
+    <div
+      data-testid="workspace-template-loading"
+      class="flex items-center gap-2 text-sm px-2 py-1.5 rounded"
+      style="color: var(--ds-text-subtle);"
+    >
+      <Spinner size="sm" />
+      <span>{t('createModal.workspaceTemplateLoading')}</span>
+    </div>
+  {:else if templatesError}
+    <div
+      data-testid="workspace-template-error"
+      class="text-sm px-2 py-1.5 rounded"
+      style="color: var(--ds-text-danger, #dc2626);"
+    >
+      {t('createModal.workspaceTemplateError')}
+    </div>
+  {:else if templatePickerItems.length > 0}
+    <div data-testid="workspace-template-section" class="pt-1">
+      <ChipPicker
+        value={formData.template_workspace_id}
+        items={templatePickerItems}
+        getValue={(tpl) => tpl.id}
+        getLabel={(tpl) => tpl.name}
+        icon={LayoutTemplate}
+        placeholder={t('createModal.workspaceTemplate')}
+        searchable={true}
+        searchFields={['name']}
+        testId="workspace-template-picker"
+        onSelect={(tpl) => {
+          formData.template_workspace_id = tpl?.id ?? null;
+        }}
+      >
+        {#snippet itemSnippet({ item })}
+          <LayoutTemplate size={14} style="color: var(--ds-text-subtle); flex-shrink: 0;" />
+          <span class="truncate">{item.name}</span>
+          {#if item.id !== null && item.id !== undefined}
+            <span
+              class="text-xs ml-auto pl-2 flex-shrink-0"
+              style="color: var(--ds-text-subtle);"
+            >
+              {t('createModal.workspaceTemplateMeta', {
+                templates: item.template_count ?? 0,
+                items: item.item_count ?? 0
+              })}
+            </span>
+          {/if}
+        {/snippet}
+      </ChipPicker>
+    </div>
+  {/if}
+
   <!-- Description -->
   <div class="min-h-[60px]">
     <MilkdownEditor

frontend/src/lib/features/collections/ListCellRenderer.svelte

@@ -741,6 +741,11 @@ export default {
     workspaceName: 'اسم {type}',
     workspaceKeyPlaceholder: 'مفتاح مساحة العمل (مثال: PROJ، TEAM)',
     addDescription: 'إضافة وصف...',
+    workspaceTemplate: 'قالب',
+    workspaceTemplateBlank: 'مساحة عمل فارغة',
+    workspaceTemplateLoading: 'جارٍ تحميل القوالب...',
+    workspaceTemplateError: 'فشل تحميل قوالب مساحات العمل',
+    workspaceTemplateMeta: '{templates} قوالب · {items} عناصر',
     // Field labels
     type: 'النوع',
     priority: 'الأولوية',

frontend/src/lib/forms/WorkspaceForm.svelte

@@ -3,6 +3,7 @@ export default {
     title: 'مساحات العمل',
     subtitle: 'إدارة مساحات العمل والمشاريع',
     workspace: 'مساحة عمل',
+    template: 'قالب',
     workspaces_one: '{count} مساحة عمل',
     workspaces_other: '{count} مساحات عمل',
     createWorkspace: 'إنشاء مساحة عمل',
@@ -595,6 +596,9 @@ export default {
     failedToUploadAvatar: 'فشل رفع الصورة الرمزية: {error}',
     enableInternalComments: 'تفعيل التعليقات الداخلية',
     enableInternalCommentsHint: 'السماح بتحديد التعليقات كملاحظات داخلية على جميع العناصر، وليس فقط طلبات البوابة.',
+    availableAsTemplate: 'متاح كقالب',
+    availableAsTemplateHelp:
+      'يمكن لمنشئي مساحات العمل بدء مساحة جديدة من نسخة لمجموعة الإعدادات وقوالب عناصر العمل والعناصر الحالية لهذه المساحة. لا يتم نسخ الأعضاء أو السجل أو الملفات أبدًا.',
   },
   lookAndFeel: {
     title: 'المظهر والتصميم',

frontend/src/lib/locales/ar/misc.js

@@ -493,6 +493,11 @@ export default {
     workspaceName: '{type}-Name',
     workspaceKeyPlaceholder: 'Arbeitsbereichs-Schlüssel (z.B. PROJ, TEAM)',
     addDescription: 'Beschreibung hinzufügen...',
+    workspaceTemplate: 'Vorlage',
+    workspaceTemplateBlank: 'Leerer Arbeitsbereich',
+    workspaceTemplateLoading: 'Vorlagen werden geladen...',
+    workspaceTemplateError: 'Arbeitsbereich-Vorlagen konnten nicht geladen werden',
+    workspaceTemplateMeta: '{templates} Vorlagen · {items} Elemente',
     type: 'Typ',
     priority: 'Priorität',
     noPriority: 'Keine Priorität',