feat(settings/clock/time): implement

app/components/Settings/BottomScreen/Menus/Clock/Time.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { SettingsBottomScreenNumberInput as NumberInput } from "#components";
+import { useIntervalFn } from "@vueuse/core";
+
+const store = useSettingsStore();
+const { assets } = useAssets();
+const { onRender } = useScreen();
+
+const now = ref(new Date());
+
+useIntervalFn(() => {
+  now.value = new Date();
+}, 1000);
+
+const handleCancel = () => {
+  store.closeSubMenu();
+};
+
+const handleConfirm = () => {
+  store.closeSubMenu();
+};
+
+onRender((ctx) => {
+  assets.images.settings.bottomScreen.clock.timeColon.draw(ctx, 113, 62);
+});
+
+defineOptions({ render: () => null });
+</script>
+
+<template>
+  <NumberInput
+    :model-value="now.getHours()"
+    title="Hour"
+    :x="4 * 16"
+    :disabled="true"
+  />
+  <NumberInput
+    :model-value="now.getMinutes()"
+    title="Minute"
+    :x="9 * 16"
+    :disabled="true"
+  />
+
+  <CommonButtons
+    :y-offset="0"
+    b-label="Cancel"
+    a-label="Confirm"
+    @activate-b="handleCancel"
+    @activate-a="handleConfirm"
+  />
+</template>

app/components/Settings/BottomScreen/Menus/Menus.vue

@@ -10,6 +10,7 @@ import UserBirthday from "./User/Birthday.vue";
 
 import ClockMenu from "./Clock/Menu.vue";
 import ClockDate from "./Clock/Date.vue";
+import ClockTime from "./Clock/Time.vue";
 import TouchScreenMenu from "./TouchScreen/Menu.vue";
 import Selector from "~/components/Common/ButtonSelector.vue";
 
@@ -166,6 +167,7 @@ const viewComponents: Record<string, Component> = {
   optionsGbaMode: OptionsGbaMode,
 
   clockDate: ClockDate,
+  clockTime: ClockTime,
 
   userColor: UserColor,
   userBirthday: UserBirthday,