From d86465cbd725a16f074a3287293b2a092cb1b0ea Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 8 Jan 2026 16:06:11 +0100
Subject: [PATCH] refactor(frontend): migrate view forms to FormField component

Migrate ViewEditForm and ProjectGantt components to use the new
FormField component for title, kind select, and date range fields.
---
 .../components/project/views/ProjectGantt.vue |  27 ++---
 .../components/project/views/ViewEditForm.vue | 104 ++++++------------
 2 files changed, 47 insertions(+), 84 deletions(-)

diff --git a/frontend/src/components/project/views/ProjectGantt.vue b/frontend/src/components/project/views/ProjectGantt.vue
index 578664a35..dc613208a 100644
--- a/frontend/src/components/project/views/ProjectGantt.vue
+++ b/frontend/src/components/project/views/ProjectGantt.vue
@@ -8,22 +8,16 @@
 		<template #default>
 			<Card :has-content="false">
 				<div class="gantt-options">
-					<div class="field">
-						<label
-							class="label"
-							for="range"
-						>{{ $t('project.gantt.range') }}</label>
-						<div class="control">
-							<Foo
-								id="range"
-								ref="flatPickerEl"
-								v-model="flatPickerDateRange"
-								:config="flatPickerConfig"
-								class="input"
-								:placeholder="$t('project.gantt.range')"
-							/>
-						</div>
-					</div>
+					<FormField :label="$t('project.gantt.range')">
+						<Foo
+							id="range"
+							ref="flatPickerEl"
+							v-model="flatPickerDateRange"
+							:config="flatPickerConfig"
+							class="input"
+							:placeholder="$t('project.gantt.range')"
+						/>
+					</FormField>
 					<div
 						v-if="!hasDefaultFilters"
 						class="field"
@@ -84,6 +78,7 @@ import Foo from '@/components/misc/flatpickr/Flatpickr.vue'
 import ProjectWrapper from '@/components/project/ProjectWrapper.vue'
 import FancyCheckbox from '@/components/input/FancyCheckbox.vue'
 import TaskForm from '@/components/tasks/TaskForm.vue'
+import FormField from '@/components/input/FormField.vue'
 
 import GanttChart from '@/components/gantt/GanttChart.vue'
 import {useGanttFilters} from '../../../views/project/helpers/useGanttFilters'
diff --git a/frontend/src/components/project/views/ViewEditForm.vue b/frontend/src/components/project/views/ViewEditForm.vue
index ab722ec75..5f1a8c94e 100644
--- a/frontend/src/components/project/views/ViewEditForm.vue
+++ b/frontend/src/components/project/views/ViewEditForm.vue
@@ -11,6 +11,7 @@ import {useProjectStore} from '@/stores/projects'
 import XButton from '@/components/input/Button.vue'
 import FilterInputDocs from '@/components/input/filter/FilterInputDocs.vue'
 import FilterInput from '@/components/input/filter/FilterInput.vue'
+import FormField from '@/components/input/FormField.vue'
 
 const props = withDefaults(defineProps<{
 	modelValue: IProjectView,
@@ -121,60 +122,37 @@ function handleBubbleSave() {
 
 <template>
 	<form @focusout="handleBubbleSave">
-		<div class="field">
-			<label
-				class="label"
-				for="title"
-			>
-				{{ $t('project.views.title') }}
-			</label>
-			<div class="control">
-				<input
-					id="title"
-					v-model="view.title"
-					v-focus
-					class="input"
-					:placeholder="$t('project.share.links.namePlaceholder')"
-					@blur="validateTitle"
-				>
-			</div>
-			<p
-				v-if="!titleValid"
-				class="help is-danger"
-			>
-				{{ $t('project.views.titleRequired') }}
-			</p>
-		</div>
+		<FormField
+			id="title"
+			v-model="view.title"
+			v-focus
+			:label="$t('project.views.title')"
+			:placeholder="$t('project.share.links.namePlaceholder')"
+			:error="titleValid ? null : $t('project.views.titleRequired')"
+			@blur="validateTitle"
+		/>
 
-		<div class="field">
-			<label
-				class="label"
-				for="kind"
-			>
-				{{ $t('project.views.kind') }}
-			</label>
-			<div class="control">
-				<div class="select">
-					<select
-						id="kind"
-						v-model="view.viewKind"
-					>
-						<option value="list">
-							{{ $t('project.list.title') }}
-						</option>
-						<option value="gantt">
-							{{ $t('project.gantt.title') }}
-						</option>
-						<option value="table">
-							{{ $t('project.table.title') }}
-						</option>
-						<option value="kanban">
-							{{ $t('project.kanban.title') }}
-						</option>
-					</select>
-				</div>
+		<FormField :label="$t('project.views.kind')">
+			<div class="select">
+				<select
+					id="kind"
+					v-model="view.viewKind"
+				>
+					<option value="list">
+						{{ $t('project.list.title') }}
+					</option>
+					<option value="gantt">
+						{{ $t('project.gantt.title') }}
+					</option>
+					<option value="table">
+						{{ $t('project.table.title') }}
+					</option>
+					<option value="kanban">
+						{{ $t('project.kanban.title') }}
+					</option>
+				</select>
 			</div>
-		</div>
+		</FormField>
 
 		<label
 			class="label"
@@ -248,22 +226,12 @@ function handleBubbleSave() {
 						<Icon icon="trash-alt" />
 					</button>
 					<div class="filter-bucket-form">
-						<div class="field">
-							<label
-								class="label"
-								:for="'bucket_'+index+'_title'"
-							>
-								{{ $t('project.views.title') }}
-							</label>
-							<div class="control">
-								<input
-									:id="'bucket_'+index+'_title'"
-									v-model="view.bucketConfiguration[index].title"
-									class="input"
-									:placeholder="$t('project.share.links.namePlaceholder')"
-								>
-							</div>
-						</div>
+						<FormField
+							:id="'bucket_'+index+'_title'"
+							v-model="view.bucketConfiguration[index].title"
+							:label="$t('project.views.title')"
+							:placeholder="$t('project.share.links.namePlaceholder')"
+						/>
 
 						<FilterInput
 							v-model="view.bucketConfiguration[index].filter.filter"