From 87a5b99e50db3510d286bf0925ef14be3382fba9 Mon Sep 17 00:00:00 2001 From: JustTemmie <47639983+JustTemmie@users.noreply.github.com> Date: Sat, 12 Jul 2025 18:49:28 +0200 Subject: [PATCH 1/6] feat: add radio buttons and start integrating them into time format setting --- components/MessageArea.vue | 3 +- components/RadioButtons.vue | 70 +++++++++++++++++++ .../Settings/AppSettings/Appearance.vue | 17 +++-- 3 files changed, 85 insertions(+), 5 deletions(-) create mode 100644 components/RadioButtons.vue diff --git a/components/MessageArea.vue b/components/MessageArea.vue index e97a2af..b2338f5 100644 --- a/components/MessageArea.vue +++ b/components/MessageArea.vue @@ -3,7 +3,7 @@
>({}); const messagesType = ref>({}); const messageGroupingMaxDifference = useRuntimeConfig().public.messageGroupingMaxDifference +const timeFormat = settingLoad("timeFormat") ?? "24" const messagesRes: MessageResponse[] | undefined = await fetchWithApi( `${props.channelUrl}/messages`, diff --git a/components/RadioButtons.vue b/components/RadioButtons.vue new file mode 100644 index 0000000..9c3ce3b --- /dev/null +++ b/components/RadioButtons.vue @@ -0,0 +1,70 @@ + + + + + \ No newline at end of file diff --git a/components/Settings/AppSettings/Appearance.vue b/components/Settings/AppSettings/Appearance.vue index a35e719..39e7410 100644 --- a/components/Settings/AppSettings/Appearance.vue +++ b/components/Settings/AppSettings/Appearance.vue @@ -17,11 +17,15 @@
-

ICONS

-
+ + +

TIME FORMAT

+
+
- -
@@ -70,6 +74,11 @@ async function fetchThemes() { } await fetchThemes() + + +async function onTimeFormatClicked(index: number) { + console.log(index) +} \ No newline at end of file From eb4945075646eb595404ad743b6d39be418dc728 Mon Sep 17 00:00:00 2001 From: JustTemmie <47639983+JustTemmie@users.noreply.github.com> Date: Sat, 12 Jul 2025 20:43:25 +0200 Subject: [PATCH 4/6] feat: support 12 and 24 hour formats --- components/Message.vue | 3 ++- components/MessageArea.vue | 2 +- utils/getPreferredTimeFormat.ts | 11 +++++++++++ 3 files changed, 14 insertions(+), 2 deletions(-) create mode 100644 utils/getPreferredTimeFormat.ts diff --git a/components/Message.vue b/components/Message.vue index a8329dd..db08258 100644 --- a/components/Message.vue +++ b/components/Message.vue @@ -46,7 +46,8 @@ Yesterday at {{ date.toLocaleDateString(undefined) }}, - {{ date.toLocaleTimeString(undefined, { timeStyle: "short" }) }} + + {{ date.toLocaleTimeString(undefined, { hour12: props.format=="12", timeStyle: "short" }) }}
diff --git a/components/MessageArea.vue b/components/MessageArea.vue index b2338f5..d59b862 100644 --- a/components/MessageArea.vue +++ b/components/MessageArea.vue @@ -49,7 +49,7 @@ const me = await fetchWithApi("/me") as UserResponse; const messageTimestamps = ref>({}); const messagesType = ref>({}); const messageGroupingMaxDifference = useRuntimeConfig().public.messageGroupingMaxDifference -const timeFormat = settingLoad("timeFormat") ?? "24" +const timeFormat = getPreferredTimeFormat() const messagesRes: MessageResponse[] | undefined = await fetchWithApi( `${props.channelUrl}/messages`, diff --git a/utils/getPreferredTimeFormat.ts b/utils/getPreferredTimeFormat.ts new file mode 100644 index 0000000..4cf03e0 --- /dev/null +++ b/utils/getPreferredTimeFormat.ts @@ -0,0 +1,11 @@ +export default (): "12" | "24" => { + const format = settingLoad("timeFormat").timeFormat ?? "auto" + + if (format == "12-hour") { + return "12" + } else if (format == "24-hour") { + return "24" + } + + return "24" +} \ No newline at end of file From 195322f3b04711bafe34fcbd1379a76c60e3f735 Mon Sep 17 00:00:00 2001 From: JustTemmie <47639983+JustTemmie@users.noreply.github.com> Date: Sat, 12 Jul 2025 22:39:26 +0200 Subject: [PATCH 5/6] feat: make settings typed and store "12" and "24" over "12-hour" and "24-hour" internally --- app.vue | 3 +-- components/Settings/AppSettings/Appearance.vue | 17 ++++++++++++++--- types/settings.ts | 9 +++++++++ utils/getPreferredTimeFormat.ts | 6 +++--- utils/{settingLoad.ts => settingsLoad.ts} | 8 +++++--- 5 files changed, 32 insertions(+), 11 deletions(-) create mode 100644 types/settings.ts rename utils/{settingLoad.ts => settingsLoad.ts} (66%) diff --git a/app.vue b/app.vue index beab80b..686a15e 100644 --- a/app.vue +++ b/app.vue @@ -8,7 +8,6 @@ diff --git a/types/settings.ts b/types/settings.ts new file mode 100644 index 0000000..28e3bfc --- /dev/null +++ b/types/settings.ts @@ -0,0 +1,9 @@ +export interface ClientSettings { + selectedThemeId?: string, // the ID of the theme, not the URL, for example "dark" + timeFormat?: TimeFormat +} + +export interface TimeFormat { + index: number, + format: "auto" | "12" | "24" +} \ No newline at end of file diff --git a/utils/getPreferredTimeFormat.ts b/utils/getPreferredTimeFormat.ts index 4cf03e0..86b9635 100644 --- a/utils/getPreferredTimeFormat.ts +++ b/utils/getPreferredTimeFormat.ts @@ -1,9 +1,9 @@ export default (): "12" | "24" => { - const format = settingLoad("timeFormat").timeFormat ?? "auto" + const format = settingsLoad().timeFormat?.format ?? "auto" - if (format == "12-hour") { + if (format == "12") { return "12" - } else if (format == "24-hour") { + } else if (format == "24") { return "24" } diff --git a/utils/settingLoad.ts b/utils/settingsLoad.ts similarity index 66% rename from utils/settingLoad.ts rename to utils/settingsLoad.ts index d0f315c..e7fdfaf 100644 --- a/utils/settingLoad.ts +++ b/utils/settingsLoad.ts @@ -1,10 +1,12 @@ -export default (key: string): any => { +import type { ClientSettings } from "~/types/settings" + +export default (): ClientSettings => { let clientSettingsItem: string | null = localStorage.getItem("clientSettings") if (typeof clientSettingsItem != "string") { clientSettingsItem = "{}" } - let clientSettings: { [key: string]: any } = {} + let clientSettings: ClientSettings = {} try { clientSettings = JSON.parse(clientSettingsItem) } catch { @@ -15,5 +17,5 @@ export default (key: string): any => { clientSettings = {} } - return clientSettings[key] + return clientSettings } \ No newline at end of file From 885fc5f9064e960477f1dba12739072c24a79af7 Mon Sep 17 00:00:00 2001 From: JustTemmie <47639983+JustTemmie@users.noreply.github.com> Date: Sat, 12 Jul 2025 22:40:54 +0200 Subject: [PATCH 6/6] fix: PR complaints --- components/Message.vue | 2 +- components/UserInterface/RadioButtons.vue | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/components/Message.vue b/components/Message.vue index db08258..15d656f 100644 --- a/components/Message.vue +++ b/components/Message.vue @@ -47,7 +47,7 @@ Yesterday at {{ date.toLocaleDateString(undefined) }}, - {{ date.toLocaleTimeString(undefined, { hour12: props.format=="12", timeStyle: "short" }) }} + {{ date.toLocaleTimeString(undefined, { hour12: props.format == "12", timeStyle: "short" }) }}
diff --git a/components/UserInterface/RadioButtons.vue b/components/UserInterface/RadioButtons.vue index a43a80a..c36b5d0 100644 --- a/components/UserInterface/RadioButtons.vue +++ b/components/UserInterface/RadioButtons.vue @@ -1,6 +1,6 @@