Add user clock with time format presets above login avatar

src/App.tsx

@@ -1,10 +1,11 @@
-import { defineComponent, watch } from 'vue'
+import { defineComponent, watch, computed } from 'vue'
 import { useMagicKeys, useDebounceFn, whenever } from '@vueuse/core'
 import { useAppStore } from '@/store/app'
 import { usePageStore } from '@/store/page'
 import { useQuerySync } from '@/composables/useQuerySync'
 import { focusInputPassword, setCSSVariable } from '@/utils/helper'
 import { hotkeys, toMagicKeyCombo } from '@/utils/hotkeys'
+import { initTimer } from '@/utils/time'
 
 export default defineComponent({
   name: 'MainApp',
@@ -19,7 +20,13 @@ export default defineComponent({
     }
 
     const initKeybinds = () => {
-      hotkeys.forEach(({ keys: keyList, callback }) => whenever(keys[toMagicKeyCombo(keyList)]!, callback))
+      hotkeys.forEach(({ keys: keyList, callback }) => {
+        if (!callback) return
+        whenever(
+          computed(() => !!(keys[toMagicKeyCombo(keyList)]?.value) && appStore.hotkeysEnabled),
+          callback
+        )
+      })
 
       whenever(keys.escape!, () => {
         const isFocusPassword = document.querySelector('#password:focus') as HTMLInputElement
@@ -44,6 +51,7 @@ export default defineComponent({
       })
     }
 
+    initTimer()
     appStore.setUpSettings()
     useQuerySync()
     initKeybinds()

src/components/base/LoginComponent.tsx

@@ -1,6 +1,8 @@
 import { defineComponent, computed, onMounted } from 'vue'
 import { usePageStore } from '@/store/page'
+import { useAppStore } from '@/store/app'
 import UserAvatar from './UserAvatar'
+import UserClock from './UserClock'
 import UserInput from './UserInput'
 import { focusInputPassword } from '@/utils/helper'
 
@@ -8,6 +10,7 @@ export default defineComponent({
   name: 'LoginComponent',
   setup() {
     const pageStore = usePageStore()
+    const appStore = useAppStore()
 
     const activeBlock = computed(() => pageStore.activeBlock)
 
@@ -18,6 +21,7 @@ export default defineComponent({
     return () => (
       <div class={`block-${activeBlock.value?.id}`}>
         <div class="active-interface login-view">
+          {appStore.showTime && <UserClock />}
           <UserAvatar />
           <UserInput />
         </div>

src/components/base/UserClock.tsx

@@ -0,0 +1,20 @@
+import { defineComponent, computed } from 'vue'
+import { useAppStore } from '@/store/app'
+import { usePageStore } from '@/store/page'
+import timeRef, { timePresets, type TimePreset } from '@/utils/time'
+
+export default defineComponent({
+  name: 'UserClock',
+  setup() {
+    const appStore = useAppStore()
+    const pageStore = usePageStore()
+
+    const formatted = computed(() => {
+      const preset = (appStore.timeFormat as TimePreset) || 'HH:mm'
+      const options = timePresets[preset] ?? timePresets['HH:mm']
+      return new Intl.DateTimeFormat(pageStore.locale, options).format(timeRef.time)
+    })
+
+    return () => <div class="user-clock">{formatted.value}</div>
+  }
+})

src/utils/time.ts

@@ -1,38 +1,19 @@
 import { reactive } from 'vue'
-import { usePageStore } from '@/store/page'
 
-const timeRef = reactive({
-  time: new Date(),
-  shortTime: '',
-  longTime: ''
-})
+export const timePresets = {
+  'HH:mm': { hour: 'numeric', minute: 'numeric', hour12: false },
+  'HH:mm:ss': { hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: false },
+  'short': { weekday: 'short', day: 'numeric', month: 'short', hour: 'numeric', minute: 'numeric', hour12: false },
+  'long': { weekday: 'long', day: 'numeric', month: 'long', hour: 'numeric', minute: 'numeric', hour12: false },
+} as const satisfies Record<string, Intl.DateTimeFormatOptions>
 
-const formatTime = (type: 'long' | 'short' = 'short') => {
-  const options: Intl.DateTimeFormatOptions = {
-    month: 'short',
-    day: 'numeric',
-    hour: 'numeric',
-    minute: 'numeric',
-    hour12: false
-  }
+export type TimePreset = keyof typeof timePresets
 
-  if (type === 'long') {
-    options.month = 'long'
-    options.weekday = 'long'
-  }
-
-  return new Intl.DateTimeFormat(usePageStore().locale, options).format(new Date())
-}
-
-const updateTime = () => {
-  timeRef.time = new Date()
-  timeRef.shortTime = formatTime('short')
-  timeRef.longTime = formatTime('long')
-}
+const timeRef = reactive({ time: new Date() })
 
 export const initTimer = () => {
-  updateTime()
-  setInterval(updateTime, 1000)
+  timeRef.time = new Date()
+  setInterval(() => { timeRef.time = new Date() }, 1000)
 }
 
 export default timeRef