From fd1a66ba25e4789af2411421e3300de82e39761f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Thu, 25 Dec 2025 19:56:25 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20ui:=20overall=20typescript=20com?=
 =?UTF-8?q?pliance?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- reduce use of `as` in favor of Vue's `UnwrapRef`
- add `wait_for` helper function

⚠️ known bug: PreviewDoor (DoorChooser) onClick not working
---
 ui/src/components/Calendar.vue              |  6 ++---
 ui/src/components/LoginModal.vue            | 10 +++++---
 ui/src/components/admin/DoorMapEditor.vue   |  6 ++---
 ui/src/components/calendar/CalendarDoor.vue |  5 ++--
 ui/src/components/calendar/SVGRect.vue      |  6 ++---
 ui/src/components/editor/DoorCanvas.vue     | 11 +++++----
 ui/src/components/editor/DoorChooser.vue    |  4 +--
 ui/src/components/editor/DoorPlacer.vue     |  4 +--
 ui/src/components/editor/PreviewDoor.vue    | 24 ++++++++----------
 ui/src/lib/helpers.ts                       | 19 +++++++++++++++
 ui/src/lib/rects/door.ts                    | 27 ++++++++++-----------
 ui/src/lib/rects/rectangle.ts               |  3 ---
 12 files changed, 70 insertions(+), 55 deletions(-)

diff --git a/ui/src/components/Calendar.vue b/ui/src/components/Calendar.vue
index c5e93af..2a1a441 100644
--- a/ui/src/components/Calendar.vue
+++ b/ui/src/components/Calendar.vue
@@ -49,9 +49,9 @@
 <script setup lang="ts">
 import { API } from "@/lib/api";
 import { APIError } from "@/lib/api_error";
-import { ensure_loaded, name_door } from "@/lib/helpers";
+import { ensure_loaded, Like, name_door } from "@/lib/helpers";
 import { ImageData } from "@/lib/model";
-import { VueDoor } from "@/lib/rects/door";
+import { Door } from "@/lib/rects/door";
 import { advent22Store } from "@/lib/store";
 
 import { onBeforeUnmount } from "vue";
@@ -62,7 +62,7 @@ import CalendarDoor from "./calendar/CalendarDoor.vue";
 import ThouCanvas from "./calendar/ThouCanvas.vue";
 
 defineProps<{
-  doors: VueDoor[];
+  doors: Like<Door>[];
 }>();
 
 const store = advent22Store();
diff --git a/ui/src/components/LoginModal.vue b/ui/src/components/LoginModal.vue
index f6bc73a..4c51798 100644
--- a/ui/src/components/LoginModal.vue
+++ b/ui/src/components/LoginModal.vue
@@ -48,8 +48,9 @@
 </template>
 
 <script setup lang="ts">
+import { wait_for } from "@/lib/helpers";
 import { Credentials } from "@/lib/model";
-import { nextTick, onBeforeUnmount, onMounted, ref, useTemplateRef } from "vue";
+import { onBeforeUnmount, onMounted, ref, useTemplateRef } from "vue";
 import BulmaButton from "./bulma/Button.vue";
 
 const username_input = useTemplateRef("username_input");
@@ -78,9 +79,10 @@ onMounted(() => {
 
   window.addEventListener("keydown", on_keydown);
 
-  nextTick(() => {
-    username_input.value?.focus();
-  });
+  wait_for(
+    () => username_input.value !== null,
+    () => username_input.value!.focus(),
+  );
 
   onBeforeUnmount(() => {
     window.removeEventListener("keydown", on_keydown);
diff --git a/ui/src/components/admin/DoorMapEditor.vue b/ui/src/components/admin/DoorMapEditor.vue
index df071ca..1a62e76 100644
--- a/ui/src/components/admin/DoorMapEditor.vue
+++ b/ui/src/components/admin/DoorMapEditor.vue
@@ -37,10 +37,10 @@
       </div>
     </div>
 
-    <DoorPlacer v-if="current_step === 0" v-model="(doors as Door[])" />
-    <DoorChooser v-if="current_step === 1" v-model="(doors as Door[])" />
+    <DoorPlacer v-if="current_step === 0" v-model="doors" />
+    <DoorChooser v-if="current_step === 1" v-model="doors" />
     <div v-if="current_step === 2" class="card-content">
-      <Calendar :doors="(doors as Door[])" />
+      <Calendar :doors="doors" />
     </div>
 
     <footer class="card-footer is-flex is-justify-content-space-around">
diff --git a/ui/src/components/calendar/CalendarDoor.vue b/ui/src/components/calendar/CalendarDoor.vue
index cf7837e..2e46ab3 100644
--- a/ui/src/components/calendar/CalendarDoor.vue
+++ b/ui/src/components/calendar/CalendarDoor.vue
@@ -14,16 +14,17 @@
 </template>
 
 <script setup lang="ts">
-import { VueDoor } from "@/lib/rects/door";
+import { Door } from "@/lib/rects/door";
 import { advent22Store } from "@/lib/store";
 
+import { Like } from "@/lib/helpers";
 import SVGRect from "./SVGRect.vue";
 
 const store = advent22Store();
 
 withDefaults(
   defineProps<{
-    door: VueDoor;
+    door: Like<Door>;
     force_visible?: boolean;
   }>(),
   {
diff --git a/ui/src/components/calendar/SVGRect.vue b/ui/src/components/calendar/SVGRect.vue
index a7878dc..e47fad4 100644
--- a/ui/src/components/calendar/SVGRect.vue
+++ b/ui/src/components/calendar/SVGRect.vue
@@ -20,8 +20,8 @@
 </template>
 
 <script setup lang="ts">
-import { loading_success } from "@/lib/helpers";
-import { VueRectangle } from "@/lib/rects/rectangle";
+import { Like, loading_success } from "@/lib/helpers";
+import { Rectangle } from "@/lib/rects/rectangle";
 import { advent22Store } from "@/lib/store";
 import { computed } from "vue";
 
@@ -39,7 +39,7 @@ withDefaults(
   defineProps<{
     variant: BulmaVariant;
     visible?: boolean;
-    rectangle: VueRectangle;
+    rectangle: Like<Rectangle>;
   }>(),
   {
     visible: true,
diff --git a/ui/src/components/editor/DoorCanvas.vue b/ui/src/components/editor/DoorCanvas.vue
index 2189e17..c99c72b 100644
--- a/ui/src/components/editor/DoorCanvas.vue
+++ b/ui/src/components/editor/DoorCanvas.vue
@@ -29,6 +29,7 @@ import { Rectangle } from "@/lib/rects/rectangle";
 import { Vector2D } from "@/lib/rects/vector2d";
 import { computed, ref } from "vue";
 
+import { Like } from "@/lib/helpers";
 import CalendarDoor from "../calendar/CalendarDoor.vue";
 import SVGRect from "../calendar/SVGRect.vue";
 import ThouCanvas from "../calendar/ThouCanvas.vue";
@@ -36,9 +37,9 @@ import ThouCanvas from "../calendar/ThouCanvas.vue";
 type CanvasState =
   | { kind: "idle" }
   | { kind: "drawing" }
-  | { kind: "dragging"; door: Door; origin: Vector2D };
+  | { kind: "dragging"; door: Like<Door>; origin: Vector2D };
 
-const model = defineModel<Door[]>({ required: true });
+const model = defineModel<Like<Door>[]>({ required: true });
 
 const MIN_RECT_AREA = 300;
 const state = ref<CanvasState>({ kind: "idle" });
@@ -46,7 +47,7 @@ const preview = ref(new Rectangle());
 
 const preview_visible = computed(() => state.value.kind !== "idle");
 
-function pop_door(point: Vector2D): Door | undefined {
+function pop_door(point: Vector2D): Like<Door> | undefined {
   const idx = model.value.findIndex((rect) => rect.position.contains(point));
 
   if (idx === -1) {
@@ -71,7 +72,7 @@ function draw_finish() {
   }
 
   if (preview.value.area >= MIN_RECT_AREA) {
-    model.value.push(new Door(preview.value as Rectangle));
+    model.value.push(new Door(preview.value));
   }
 
   state.value = { kind: "idle" };
@@ -98,7 +99,7 @@ function drag_finish() {
     return;
   }
 
-  model.value.push(new Door(preview.value as Rectangle, state.value.door.day));
+  model.value.push(new Door(preview.value, state.value.door.day));
 
   state.value = { kind: "idle" };
 }
diff --git a/ui/src/components/editor/DoorChooser.vue b/ui/src/components/editor/DoorChooser.vue
index 71817b0..643cc88 100644
--- a/ui/src/components/editor/DoorChooser.vue
+++ b/ui/src/components/editor/DoorChooser.vue
@@ -24,13 +24,13 @@
 </template>
 
 <script setup lang="ts">
-import { ensure_loaded } from "@/lib/helpers";
+import { ensure_loaded, Like } from "@/lib/helpers";
 import { Door } from "@/lib/rects/door";
 import { advent22Store } from "@/lib/store";
 
 import ThouCanvas from "../calendar/ThouCanvas.vue";
 import PreviewDoor from "./PreviewDoor.vue";
 
-const model = defineModel<Door[]>({ required: true });
+const model = defineModel<Like<Door>[]>({ required: true });
 const store = advent22Store();
 </script>
diff --git a/ui/src/components/editor/DoorPlacer.vue b/ui/src/components/editor/DoorPlacer.vue
index bc88680..9836491 100644
--- a/ui/src/components/editor/DoorPlacer.vue
+++ b/ui/src/components/editor/DoorPlacer.vue
@@ -16,12 +16,12 @@
 </template>
 
 <script setup lang="ts">
-import { ensure_loaded } from "@/lib/helpers";
+import { ensure_loaded, Like } from "@/lib/helpers";
 import { Door } from "@/lib/rects/door";
 import { advent22Store } from "@/lib/store";
 
 import DoorCanvas from "./DoorCanvas.vue";
 
-const model = defineModel<Door[]>({ required: true });
+const model = defineModel<Like<Door>[]>({ required: true });
 const store = advent22Store();
 </script>
diff --git a/ui/src/components/editor/PreviewDoor.vue b/ui/src/components/editor/PreviewDoor.vue
index c29c8a3..5dcbfd8 100644
--- a/ui/src/components/editor/PreviewDoor.vue
+++ b/ui/src/components/editor/PreviewDoor.vue
@@ -24,11 +24,12 @@
 
 <script setup lang="ts">
 import { Door } from "@/lib/rects/door";
-import { nextTick, ref, useTemplateRef } from "vue";
+import { ref, useTemplateRef } from "vue";
 
+import { Like, unwrap_like, wait_for } from "@/lib/helpers";
 import SVGRect from "../calendar/SVGRect.vue";
 
-const model = defineModel<Door>({ required: true });
+const model = defineModel<Like<Door>>({ required: true });
 const day_input = useTemplateRef("day_input");
 
 const day_str = ref("");
@@ -44,18 +45,13 @@ function on_click(event: MouseEvent) {
     return;
   }
 
-  if (!editing.value) {
-    const day_input_focus = () => {
-      if (day_input.value === null) {
-        nextTick(day_input_focus);
-        return;
-      }
-
-      day_input.value.select();
-    };
-    day_input_focus();
+  if (editing.value) {
+    unwrap_like(model.value).day = day_str.value;
   } else {
-    model.value.day = day_str.value;
+    wait_for(
+      () => day_input.value !== null,
+      () => day_input.value!.select(),
+    );
   }
 
   toggle_editing();
@@ -67,7 +63,7 @@ function on_keydown(event: KeyboardEvent) {
   }
 
   if (event.key === "Enter") {
-    model.value.day = day_str.value;
+    unwrap_like(model.value).day = day_str.value;
     toggle_editing();
   } else if (event.key === "Delete") {
     model.value.day = -1;
diff --git a/ui/src/lib/helpers.ts b/ui/src/lib/helpers.ts
index 74ef4e7..de4b307 100644
--- a/ui/src/lib/helpers.ts
+++ b/ui/src/lib/helpers.ts
@@ -1,3 +1,4 @@
+import { nextTick, UnwrapRef } from "vue";
 import { APIError } from "./api_error";
 
 export function objForEach<T>(
@@ -11,6 +12,12 @@ export function objForEach<T>(
   }
 }
 
+export type Like<T> = T | UnwrapRef<T>;
+
+export function unwrap_like<T>(value: Like<T>): T {
+  return value as T;
+}
+
 export type Loading<T> = T | "loading" | "error";
 
 export function loading_success<T>(o: Loading<T>): o is T {
@@ -26,6 +33,18 @@ export function ensure_loaded<T>(o: Loading<T>): T {
   return o;
 }
 
+export function wait_for(condition: () => boolean, action: () => void) {
+  const do_action = () => {
+    if (!condition()) {
+      nextTick(do_action);
+      return;
+    }
+
+    action();
+  };
+  do_action();
+}
+
 export function handle_error(error: unknown) {
   if (error instanceof APIError) {
     error.alert();
diff --git a/ui/src/lib/rects/door.ts b/ui/src/lib/rects/door.ts
index bac193c..87759cd 100644
--- a/ui/src/lib/rects/door.ts
+++ b/ui/src/lib/rects/door.ts
@@ -1,4 +1,4 @@
-import { UnwrapRef } from "vue";
+import { Like, unwrap_like } from "../helpers";
 import { DoorSaved } from "../model";
 import { Rectangle } from "./rectangle";
 import { Vector2D } from "./vector2d";
@@ -9,26 +9,27 @@ export class Door {
   private _day = Door.MIN_DAY;
   public position: Rectangle;
 
-  constructor(position: Rectangle);
-  constructor(position: Rectangle, day: number);
-  constructor(position: Rectangle, day = Door.MIN_DAY) {
+  constructor(position: Like<Rectangle>);
+  constructor(position: Like<Rectangle>, day: number);
+  constructor(position: Like<Rectangle>, day = Door.MIN_DAY) {
     this.day = day;
-    this.position = position;
+    this.position = unwrap_like(position);
   }
 
   public get day(): number {
     return this._day;
   }
 
-  public set day(day: unknown) {
+  public set day(value: number | string) {
     // integer coercion
-    const result = Number(day);
+    let day = Number(value);
 
-    if (isNaN(result)) {
-      this._day = Door.MIN_DAY;
-    } else {
-      this._day = Math.max(Math.floor(result), Door.MIN_DAY);
-    }
+    day =
+      !Number.isNaN(day) && Number.isFinite(day)
+        ? Math.trunc(day)
+        : Door.MIN_DAY;
+
+    this._day = Math.max(day, Door.MIN_DAY);
   }
 
   public static load(serialized: DoorSaved): Door {
@@ -51,5 +52,3 @@ export class Door {
     };
   }
 }
-
-export type VueDoor = UnwrapRef<Door>;
diff --git a/ui/src/lib/rects/rectangle.ts b/ui/src/lib/rects/rectangle.ts
index ca3be79..3c7ec63 100644
--- a/ui/src/lib/rects/rectangle.ts
+++ b/ui/src/lib/rects/rectangle.ts
@@ -1,4 +1,3 @@
-import { UnwrapRef } from "vue";
 import { Vector2D } from "./vector2d";
 
 export class Rectangle {
@@ -78,5 +77,3 @@ export class Rectangle {
     );
   }
 }
-
-export type VueRectangle = UnwrapRef<Rectangle>;