+farbiger status

views/routes/almanach/edit/body.gohtml

@@ -642,7 +642,7 @@ type AlmanachResult struct {
 		<!-- Right Column -->
 		<div class="w-[28rem] shrink-0 flex flex-col gap-3">
 			<div>
-				{{ template "_status_edit" (Arr $model.result.Entry "type" "type") }}
+				{{ template "_status_edit" (Arr $model.result.Entry "type" "type" "almanach") }}
 			</div>
 
 			<div>

views/routes/components/_status_edit.gohtml

@@ -1,6 +1,11 @@
 {{- $entity := index . 0 -}}
 {{- $fieldName := index . 1 -}}
 {{- $fieldId := index . 2 -}}
+{{- $context := "" -}}
+{{- if gt (len .) 3 -}}
+	{{- $context = index . 3 -}}
+{{- end -}}
+{{- $isAlmanach := eq $context "almanach" -}}
 
 <div class="flex flex-col gap-4">
 	<!-- Status -->
@@ -8,13 +13,21 @@
 		<div class="inputlabelrow">
 		<label for="{{ $fieldId }}" class="inputlabel">Status</label>
 		</div>
-		<select name="{{ $fieldName }}" id="{{ $fieldId }}" autocomplete="off" class="inputselect font-bold">
+		<div class="relative">
-			<option value="Unknown" {{ if eq $entity.EditState "Unknown" }}selected{{ end }}>Unbekannt</option>
+			<select name="{{ $fieldName }}" id="{{ $fieldId }}" autocomplete="off" class="inputselect
+			font-bold status-select py-2 pl-8" data-status="{{ $entity.EditState }}">
+				<option value="Unknown" {{ if eq $entity.EditState "Unknown" }}selected{{ end }}>{{ if $isAlmanach }}Gesucht{{ else }}Unbekannt{{ end }}</option>
 				<option value="ToDo" {{ if eq $entity.EditState "ToDo" }}selected{{ end }}>Zu erledigen</option>
 				<option value="Review" {{ if eq $entity.EditState "Review" }}selected{{ end }}>Überprüfen</option>
+				{{- if $isAlmanach -}}
 				<option value="Seen" {{ if eq $entity.EditState "Seen" }}selected{{ end }}>Autopsiert</option>
 				<option value="Edited" {{ if eq $entity.EditState "Edited" }}selected{{ end }}>Vollständig Erfasst</option>
+				{{- else -}}
+				<option value="Edited" {{ if eq $entity.EditState "Edited" }}selected{{ end }}>Erfasst</option>
+				{{- end -}}
 			</select>
+			<i class="status-icon absolute left-2 top-[calc(50%-1px)] -translate-y-1/2 pointer-events-none {{- if eq $entity.EditState "Edited" }} ri-checkbox-circle-line{{- else if eq $entity.EditState "Seen" }} ri-information-line{{- else if eq $entity.EditState "Review" }} ri-search-line{{- else if eq $entity.EditState "ToDo" }} ri-list-check{{- else }} ri-forbid-2-line{{- end }}"></i>
+		</div>
 	</div>
 
 	<!-- Bearbeitungsvermerk -->

views/transform/almanach-edit.js

@@ -28,9 +28,55 @@ export class AlmanachEditPage extends HTMLElement {
 			this._initForm();
 			this._initPlaces();
 			this._initSaveHandling();
+			this._initStatusSelect();
 		}, 0);
 	}
 
+	_initStatusSelect() {
+		const statusSelect = this.querySelector(".status-select");
+		if (!statusSelect) {
+			return;
+		}
+		const statusIcon = this.querySelector(".status-icon");
+		statusSelect.addEventListener("change", (event) => {
+			const newStatus = event.target.value;
+			statusSelect.setAttribute("data-status", newStatus);
+			if (statusIcon) {
+				this._updateStatusIcon(statusIcon, newStatus);
+			}
+		});
+	}
+
+	_updateStatusIcon(iconElement, status) {
+		// Remove all status icon classes
+		iconElement.classList.remove(
+			"ri-checkbox-circle-line",
+			"ri-information-line",
+			"ri-search-line",
+			"ri-list-check",
+			"ri-forbid-2-line"
+		);
+		// Add the appropriate icon class
+		switch (status) {
+			case "Edited":
+				iconElement.classList.add("ri-checkbox-circle-line");
+				break;
+			case "Seen":
+				iconElement.classList.add("ri-information-line");
+				break;
+			case "Review":
+				iconElement.classList.add("ri-search-line");
+				break;
+			case "ToDo":
+				iconElement.classList.add("ri-list-check");
+				break;
+			case "Unknown":
+			default:
+				iconElement.classList.add("ri-forbid-2-line");
+				break;
+		}
+	}
+
 	disconnectedCallback() {
 		this._teardownSaveHandling();
 	}

views/transform/edit-page.js

@@ -6,9 +6,55 @@ export class EditPage extends HTMLElement {
 				window.FormLoad(form);
 			}
 			this._setupDelete();
+			this._setupStatusSelect();
 		}, 0);
 	}
 
+	_setupStatusSelect() {
+		const statusSelect = this.querySelector(".status-select");
+		if (!statusSelect) {
+			return;
+		}
+		const statusIcon = this.querySelector(".status-icon");
+		statusSelect.addEventListener("change", (event) => {
+			const newStatus = event.target.value;
+			statusSelect.setAttribute("data-status", newStatus);
+			if (statusIcon) {
+				this._updateStatusIcon(statusIcon, newStatus);
+			}
+		});
+	}
+
+	_updateStatusIcon(iconElement, status) {
+		// Remove all status icon classes
+		iconElement.classList.remove(
+			"ri-checkbox-circle-line",
+			"ri-information-line",
+			"ri-search-line",
+			"ri-list-check",
+			"ri-forbid-2-line"
+		);
+		// Add the appropriate icon class
+		switch (status) {
+			case "Edited":
+				iconElement.classList.add("ri-checkbox-circle-line");
+				break;
+			case "Seen":
+				iconElement.classList.add("ri-information-line");
+				break;
+			case "Review":
+				iconElement.classList.add("ri-search-line");
+				break;
+			case "ToDo":
+				iconElement.classList.add("ri-list-check");
+				break;
+			case "Unknown":
+			default:
+				iconElement.classList.add("ri-forbid-2-line");
+				break;
+		}
+	}
+
 	_setupDelete() {
 		const form = this.querySelector("form");
 		if (!form) {

views/transform/form.css

@@ -44,6 +44,40 @@
 		@apply mt-1 block w-full rounded-md focus:border-none focus:outline-none
 					disabled:opacity-50 py-1 px-3;
 	}
+
+	/* Status select color coding */
+	.status-select[data-status="Edited"] {
+		@apply bg-green-100 text-green-900;
+	}
+	.status-select[data-status="Seen"] {
+		@apply bg-blue-100 text-blue-900;
+	}
+	.status-select[data-status="Review"] {
+		@apply bg-orange-100 text-orange-900;
+	}
+	.status-select[data-status="ToDo"] {
+		@apply bg-red-100 text-red-900;
+	}
+	.status-select[data-status="Unknown"] {
+		@apply bg-gray-300 text-gray-900;
+	}
+
+	/* Status icon colors to match status */
+	.status-select[data-status="Edited"] + .status-icon {
+		@apply text-green-900;
+	}
+	.status-select[data-status="Seen"] + .status-icon {
+		@apply text-blue-900;
+	}
+	.status-select[data-status="Review"] + .status-icon {
+		@apply text-orange-900;
+	}
+	.status-select[data-status="ToDo"] + .status-icon {
+		@apply text-red-900;
+	}
+	.status-select[data-status="Unknown"] + .status-icon {
+		@apply text-gray-900;
+	}
 	.dbform .submitbutton {
 		@apply w-full inline-flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-slate-700 hover:bg-slate-800 cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500 active:bg-slate-900 transition-all duration-75;
 	}