From 3e93114dbe73926b939c922636be33ef831f4397 Mon Sep 17 00:00:00 2001
From: N48LL <58626061+thisisvv@users.noreply.github.com>
Date: Mon, 4 May 2026 21:30:10 +0200
Subject: [PATCH 1/5] feat: adjust modals for responsive design with isMobile
 check

---
 app/components/editor/IconBrowserCustom.vue  | 5 ++++-
 app/components/editor/IconBrowserIconify.vue | 5 ++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/app/components/editor/IconBrowserCustom.vue b/app/components/editor/IconBrowserCustom.vue
index a53df4b..7291a27 100644
--- a/app/components/editor/IconBrowserCustom.vue
+++ b/app/components/editor/IconBrowserCustom.vue
@@ -9,6 +9,8 @@ const emit = defineEmits<{
 
 const open = defineModel<boolean>('open', { default: false })
 
+const isMobile = useMediaQuery('(max-width: 768px)')
+
 const toast = useToast()
 const searchQuery = ref('')
 const selectedIcon = ref('')
@@ -66,7 +68,8 @@ async function deleteIcon(filename: string) {
 <template>
   <UModal
     v-model:open="open"
-    fullscreen
+    :fullscreen="isMobile"
+    :ui="{ content: 'sm:max-w-3xl sm:h-[80vh]' }"
     title="Custom Icons"
   >
     <template #body>
diff --git a/app/components/editor/IconBrowserIconify.vue b/app/components/editor/IconBrowserIconify.vue
index fde07dd..4376b93 100644
--- a/app/components/editor/IconBrowserIconify.vue
+++ b/app/components/editor/IconBrowserIconify.vue
@@ -9,6 +9,8 @@ const emit = defineEmits<{
 
 const open = defineModel<boolean>('open', { default: false })
 
+const isMobile = useMediaQuery('(max-width: 768px)')
+
 const searchQuery = ref('')
 const activeCollection = ref('lucide')
 const selectedIcon = ref('')
@@ -117,7 +119,8 @@ function confirm() {
 <template>
   <UModal
     v-model:open="open"
-    fullscreen
+    :fullscreen="isMobile"
+    :ui="{ content: 'sm:max-w-4xl sm:h-[80vh]' }"
     title="Browse Icons"
   >
     <template #body>

From ae3dc04569aadaed19adbfdc63fa72d4f04db448 Mon Sep 17 00:00:00 2001
From: N48LL <58626061+thisisvv@users.noreply.github.com>
Date: Mon, 4 May 2026 21:39:28 +0200
Subject: [PATCH 2/5] feat: add size customization for ClockWidget and update
 default options

---
 .../editor/EditorWidgetSettings.vue           | 12 +++++++
 app/components/widgets/ClockWidget.vue        | 31 +++++++++++++++++--
 app/composables/useWidgetRegistry.ts          |  7 +++--
 server/plugins/seed.ts                        |  5 +--
 shared/types/index.ts                         |  1 +
 5 files changed, 48 insertions(+), 8 deletions(-)

diff --git a/app/components/editor/EditorWidgetSettings.vue b/app/components/editor/EditorWidgetSettings.vue
index 61c56a4..a3a357b 100644
--- a/app/components/editor/EditorWidgetSettings.vue
+++ b/app/components/editor/EditorWidgetSettings.vue
@@ -234,6 +234,18 @@ function handleSave() {
         </template>
 
         <template v-if="widget.kind === 'clock'">
+          <UFormField label="Size">
+            <USelect
+              :model-value="(localOptions.size as string) || 'md'"
+              :items="[
+                { label: 'Small', value: 'sm' },
+                { label: 'Medium', value: 'md' },
+                { label: 'Large', value: 'lg' },
+                { label: 'Extra Large', value: 'xl' }
+              ]"
+              @update:model-value="localOptions.size = $event"
+            />
+          </UFormField>
           <USwitch
             :model-value="(localOptions.format24h as boolean)"
             label="24-hour format"
diff --git a/app/components/widgets/ClockWidget.vue b/app/components/widgets/ClockWidget.vue
index 0ffaf53..c38d7a6 100644
--- a/app/components/widgets/ClockWidget.vue
+++ b/app/components/widgets/ClockWidget.vue
@@ -17,24 +17,49 @@ const timeFormat = computed(() => {
 
 const time = useDateFormat(now, timeFormat)
 const date = useDateFormat(now, 'dddd, MMMM D, YYYY')
+
+const timeSizeClass = computed(() => {
+  switch (props.options.size) {
+    case 'sm': return 'text-xl'
+    case 'lg': return 'text-4xl'
+    case 'xl': return 'text-6xl'
+    default: return 'text-2xl'
+  }
+})
+
+const dateSizeClass = computed(() => {
+  switch (props.options.size) {
+    case 'sm': return 'text-xs'
+    case 'lg': return 'text-base'
+    case 'xl': return 'text-lg'
+    default: return 'text-sm'
+  }
+})
 </script>
 
 <template>
   <ClientOnly>
     <div class="text-center">
-      <p class="text-2xl font-mono font-bold tabular-nums">
+      <p
+        class="font-mono font-bold tabular-nums"
+        :class="timeSizeClass"
+      >
         {{ time }}
       </p>
       <p
         v-if="options.showDate"
-        class="text-sm text-dimmed mt-1"
+        class="text-dimmed mt-1"
+        :class="dateSizeClass"
       >
         {{ date }}
       </p>
     </div>
     <template #fallback>
       <div class="text-center">
-        <p class="text-2xl font-mono font-bold tabular-nums">
+        <p
+          class="font-mono font-bold tabular-nums"
+          :class="timeSizeClass"
+        >
 &nbsp;
         </p>
       </div>
diff --git a/app/composables/useWidgetRegistry.ts b/app/composables/useWidgetRegistry.ts
index da175df..a43a436 100644
--- a/app/composables/useWidgetRegistry.ts
+++ b/app/composables/useWidgetRegistry.ts
@@ -24,9 +24,10 @@ const widgetDefinitions: WidgetDefinition[] = [
     icon: 'i-lucide-clock',
     description: 'Shows current date and time',
     defaultOptions: {
-      format24h: false,
-      showSeconds: true,
-      showDate: true
+      format24h: true,
+      showSeconds: false,
+      showDate: true,
+      size: 'md'
     }
   },
   {
diff --git a/server/plugins/seed.ts b/server/plugins/seed.ts
index 64b8a65..bb4781b 100644
--- a/server/plugins/seed.ts
+++ b/server/plugins/seed.ts
@@ -23,9 +23,10 @@ const DEFAULT_BOARD: Board = {
           kind: 'clock',
           span: 1,
           options: {
-            format24h: false,
+            format24h: true,
             showSeconds: false,
-            showDate: true
+            showDate: true,
+            size: 'md'
           },
           plugins: {}
         },
diff --git a/shared/types/index.ts b/shared/types/index.ts
index 1579353..ef7c55b 100644
--- a/shared/types/index.ts
+++ b/shared/types/index.ts
@@ -87,6 +87,7 @@ export interface ClockOptions {
   format24h: boolean
   showSeconds: boolean
   showDate: boolean
+  size?: 'sm' | 'md' | 'lg' | 'xl'
   timezone?: string
 }
 

From 1d64daf93f086cd7537a1395dfa2e98fface9c1f Mon Sep 17 00:00:00 2001
From: N48LL <58626061+thisisvv@users.noreply.github.com>
Date: Tue, 5 May 2026 17:50:27 +0200
Subject: [PATCH 3/5] feat: more significant text sizing differences

---
 app/components/widgets/ClockWidget.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/components/widgets/ClockWidget.vue b/app/components/widgets/ClockWidget.vue
index c38d7a6..0cafd0b 100644
--- a/app/components/widgets/ClockWidget.vue
+++ b/app/components/widgets/ClockWidget.vue
@@ -20,19 +20,19 @@ const date = useDateFormat(now, 'dddd, MMMM D, YYYY')
 
 const timeSizeClass = computed(() => {
   switch (props.options.size) {
-    case 'sm': return 'text-xl'
-    case 'lg': return 'text-4xl'
-    case 'xl': return 'text-6xl'
-    default: return 'text-2xl'
+    case 'sm': return 'text-2xl'
+    case 'lg': return 'text-6xl'
+    case 'xl': return 'text-8xl'
+    default: return 'text-4xl'
   }
 })
 
 const dateSizeClass = computed(() => {
   switch (props.options.size) {
-    case 'sm': return 'text-xs'
-    case 'lg': return 'text-base'
-    case 'xl': return 'text-lg'
-    default: return 'text-sm'
+    case 'sm': return 'text-sm'
+    case 'lg': return 'text-xl'
+    case 'xl': return 'text-2xl'
+    default: return 'text-base'
   }
 })
 </script>

From a6e70b67be9dafc5a672b15511067e8eba4061b3 Mon Sep 17 00:00:00 2001
From: N48LL <58626061+thisisvv@users.noreply.github.com>
Date: Tue, 5 May 2026 17:58:47 +0200
Subject: [PATCH 4/5] feat: show response time

---
 app/components/plugins/HealthDot.vue         | 23 ++++++++++++++++----
 app/components/plugins/HealthDotSettings.vue | 10 +++++++++
 app/plugins/health-check.ts                  |  3 ++-
 3 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/app/components/plugins/HealthDot.vue b/app/components/plugins/HealthDot.vue
index a904171..1de6d51 100644
--- a/app/components/plugins/HealthDot.vue
+++ b/app/components/plugins/HealthDot.vue
@@ -35,13 +35,28 @@ const tooltip = computed(() => {
     ? `Offline (HTTP ${result.value.status})`
     : 'Offline (unreachable)'
 })
+
+const showLatency = computed(() => Boolean(props.config.showLatency))
+
+const latencyText = computed(() => {
+  if (!showLatency.value) return ''
+  if (result.value.loading) return ''
+  if (!result.value.online) return ''
+  return `${result.value.latency}ms`
+})
 </script>
 
 <template>
   <UTooltip :text="tooltip">
-    <span
-      class="block size-3 rounded-full ring-2 ring-white dark:ring-gray-900"
-      :class="dotColor"
-    />
+    <div class="inline-flex items-center gap-1.5">
+      <span
+        class="block size-3 rounded-full ring-2 ring-white dark:ring-gray-900"
+        :class="dotColor"
+      />
+      <span
+        v-if="latencyText"
+        class="text-xs font-medium text-muted tabular-nums"
+      >{{ latencyText }}</span>
+    </div>
   </UTooltip>
 </template>
diff --git a/app/components/plugins/HealthDotSettings.vue b/app/components/plugins/HealthDotSettings.vue
index 13c86f6..f7a7291 100644
--- a/app/components/plugins/HealthDotSettings.vue
+++ b/app/components/plugins/HealthDotSettings.vue
@@ -11,6 +11,11 @@ const intervalSeconds = computed({
   get: () => (config.value.intervalSeconds as number) || 30,
   set: (val: number) => { config.value = { ...config.value, intervalSeconds: val } }
 })
+
+const showLatency = computed({
+  get: () => Boolean(config.value.showLatency),
+  set: (val: boolean) => { config.value = { ...config.value, showLatency: val } }
+})
 </script>
 
 <template>
@@ -33,5 +38,10 @@ const intervalSeconds = computed({
         :step="10"
       />
     </UFormField>
+    <USwitch
+      v-model="showLatency"
+      label="Show response time"
+      description="Display latency in ms next to the status dot"
+    />
   </div>
 </template>
diff --git a/app/plugins/health-check.ts b/app/plugins/health-check.ts
index 1119dc2..8f21661 100644
--- a/app/plugins/health-check.ts
+++ b/app/plugins/health-check.ts
@@ -10,7 +10,8 @@ export default defineNuxtPlugin(() => {
     icon: 'i-lucide-activity',
     defaultPosition: 'top-left',
     defaultConfig: {
-      intervalSeconds: 30
+      intervalSeconds: 30,
+      showLatency: false
     },
     compatibleWith: ['service-link'],
     component: HealthDot,

From 65c8b81665660bc4b7185442fa27a130b0d58b40 Mon Sep 17 00:00:00 2001
From: N48LL <58626061+thisisvv@users.noreply.github.com>
Date: Tue, 5 May 2026 18:04:44 +0200
Subject: [PATCH 5/5] feat: increase icon gap, move healthcheck to right side

---
 app/components/widgets/ServiceLink.vue   | 2 +-
 app/components/widgets/WidgetWrapper.vue | 3 ++-
 app/plugins/health-check.ts              | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/app/components/widgets/ServiceLink.vue b/app/components/widgets/ServiceLink.vue
index fdfe923..b34fee0 100644
--- a/app/components/widgets/ServiceLink.vue
+++ b/app/components/widgets/ServiceLink.vue
@@ -30,7 +30,7 @@ const linkAttrs = computed(() => {
   <component
     :is="isEditing ? 'div' : 'a'"
     v-bind="linkAttrs"
-    class="flex items-center gap-3 min-w-0"
+    class="flex items-center gap-4 min-w-0"
   >
     <div
       v-if="options.iconBackground"
diff --git a/app/components/widgets/WidgetWrapper.vue b/app/components/widgets/WidgetWrapper.vue
index 6a03b09..e7a5ca6 100644
--- a/app/components/widgets/WidgetWrapper.vue
+++ b/app/components/widgets/WidgetWrapper.vue
@@ -73,7 +73,8 @@ function pluginsAt(position: string) {
       </div>
       <div
         v-if="pluginsAt('top-right').length"
-        class="absolute top-2 right-2 flex gap-1"
+        class="absolute top-2 flex gap-1"
+        :class="isEditing ? 'right-12' : 'right-2'"
       >
         <PluginSlot
           v-for="p in pluginsAt('top-right')"
diff --git a/app/plugins/health-check.ts b/app/plugins/health-check.ts
index 8f21661..49df1c9 100644
--- a/app/plugins/health-check.ts
+++ b/app/plugins/health-check.ts
@@ -8,7 +8,7 @@ export default defineNuxtPlugin(() => {
     id: 'health-check',
     label: 'Health Check',
     icon: 'i-lucide-activity',
-    defaultPosition: 'top-left',
+    defaultPosition: 'top-right',
     defaultConfig: {
       intervalSeconds: 30,
       showLatency: false