From 2627b9035d4bc737c30a913b9654732514cfa9bc Mon Sep 17 00:00:00 2001 From: Dan Ditomaso Date: Sat, 8 Feb 2025 23:11:54 -0500 Subject: [PATCH 1/4] feat: adding pluralizer util. fix: measurement unit in marker popup --- .../PageComponents/Map/NodeDetail.tsx | 8 ++++- src/core/utils/string.ts | 31 +++++++++++++++++++ 2 files changed, 38 insertions(+), 1 deletion(-) create mode 100644 src/core/utils/string.ts diff --git a/src/components/PageComponents/Map/NodeDetail.tsx b/src/components/PageComponents/Map/NodeDetail.tsx index 5203d077..23112f34 100644 --- a/src/components/PageComponents/Map/NodeDetail.tsx +++ b/src/components/PageComponents/Map/NodeDetail.tsx @@ -1,6 +1,7 @@ import { Separator } from "@app/components/UI/Seperator"; import { H5 } from "@app/components/UI/Typography/H5.tsx"; import { Subtle } from "@app/components/UI/Typography/Subtle.tsx"; +import { formatQuantity } from "@app/core/utils/string"; import { Avatar } from "@components/UI/Avatar"; import { Mono } from "@components/generic/Mono.tsx"; import { TimeAgo } from "@components/generic/Table/tmp/TimeAgo.tsx"; @@ -132,7 +133,12 @@ export const NodeDetail = ({ node }: NodeDetailProps) => { className="ml-2 mr-1" aria-label="Elevation" /> -
{node.position?.altitude} ft
+
+ {formatQuantity(node.position?.altitude, { + one: "meter", + other: "meters", + })} +
)} diff --git a/src/core/utils/string.ts b/src/core/utils/string.ts new file mode 100644 index 00000000..2cabf70d --- /dev/null +++ b/src/core/utils/string.ts @@ -0,0 +1,31 @@ +interface PluralForms { + one: string; + other: string; + [key: string]: string; +} + +interface FormatOptions { + locale?: string; + pluralRules?: Intl.PluralRulesOptions; + numberFormat?: Intl.NumberFormatOptions; +} + +export function formatQuantity( + value: number, + forms: PluralForms, + options: FormatOptions = {}, +) { + const { + locale = "en-US", + pluralRules: pluralOptions = { type: "cardinal" }, + numberFormat: numberOptions = {}, + } = options; + + const pluralRules = new Intl.PluralRules(locale, pluralOptions); + const numberFormat = new Intl.NumberFormat(locale, numberOptions); + + const pluralCategory = pluralRules.select(value); + const word = forms[pluralCategory]; + + return `${numberFormat.format(value)} ${word}`; +} From 467effa62e1cc21c5000440bc57d6775735caac5 Mon Sep 17 00:00:00 2001 From: Dan Ditomaso Date: Mon, 10 Feb 2025 12:24:57 -0500 Subject: [PATCH 2/4] fix: prevent empty/blank messages from being sent. fix: count chars during copy/paste action --- .../PageComponents/Messages/MessageInput.tsx | 29 +++++++++++++------ 1 file changed, 20 insertions(+), 9 deletions(-) diff --git a/src/components/PageComponents/Messages/MessageInput.tsx b/src/components/PageComponents/Messages/MessageInput.tsx index 2e7954c9..d1cbc5ee 100644 --- a/src/components/PageComponents/Messages/MessageInput.tsx +++ b/src/components/PageComponents/Messages/MessageInput.tsx @@ -4,7 +4,13 @@ import { Input } from "@components/UI/Input.tsx"; import { useDevice } from "@core/stores/deviceStore.ts"; import type { Types } from "@meshtastic/js"; import { SendIcon } from "lucide-react"; -import { type JSX, useCallback, useMemo, useState } from "react"; +import { + type JSX, + startTransition, + useCallback, + useMemo, + useState, +} from "react"; export interface MessageInputProps { to: Types.Destination; @@ -63,11 +69,11 @@ export const MessageInput = ({ const handleInputChange = (e: React.ChangeEvent) => { const newValue = e.target.value; - const byteLength = new Blob([newValue]).size; - if (byteLength <= maxBytes) { + const messageLength = newValue.length; + if (messageLength <= maxBytes) { setLocalDraft(newValue); debouncedSetMessageDraft(newValue); - setMessageBytes(maxBytes - byteLength); + setMessageBytes(maxBytes - messageLength); } }; @@ -75,11 +81,15 @@ export const MessageInput = ({
{ - e.preventDefault(); - sendText(localDraft); - setLocalDraft(""); - setMessageDraft(""); + action={async (formData: FormData) => { + // prevent user from sending blank/empty message + if (localDraft === "") return; + const message = formData.get("messageInput") as string; + startTransition(() => { + sendText(message); + setLocalDraft(""); + setMessageDraft(""); + }); }} >
@@ -87,6 +97,7 @@ export const MessageInput = ({ Date: Fri, 14 Feb 2025 11:26:12 -0500 Subject: [PATCH 3/4] fix: fixed issue with toast background opacity in light mode --- src/components/UI/Toast.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/UI/Toast.tsx b/src/components/UI/Toast.tsx index b2fd7131..c0eba845 100644 --- a/src/components/UI/Toast.tsx +++ b/src/components/UI/Toast.tsx @@ -28,7 +28,7 @@ const toastVariants = cva( variants: { variant: { default: - "border bg-background text-foreground dark:bg-slate-700 dark:border-slate-600 dark:text-slate-50", + "border bg-backgroundPrimary text-foreground dark:bg-slate-700 dark:border-slate-600 dark:text-slate-50", destructive: "group destructive bg-red-600 text-white dark:border-red-900 dark:bg-red-900 dark:text-red-50", }, From 1c59d0451a552a0e0f6e0f17c309a8e9371aa7c6 Mon Sep 17 00:00:00 2001 From: Dan Ditomaso Date: Fri, 14 Feb 2025 11:30:28 -0500 Subject: [PATCH 4/4] fix: lighted border of outline button in dark mode --- src/components/UI/Button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/UI/Button.tsx b/src/components/UI/Button.tsx index 18861065..1c332689 100644 --- a/src/components/UI/Button.tsx +++ b/src/components/UI/Button.tsx @@ -15,7 +15,7 @@ const buttonVariants = cva( success: "bg-green-500 text-white hover:bg-green-600 dark:hover:bg-green-600", outline: - "bg-transparent border border-slate-200 hover:bg-slate-100 dark:border-slate-700 dark:text-slate-100", + "bg-transparent border border-slate-200 hover:bg-slate-100 dark:border-slate-400 dark:text-slate-100", subtle: "bg-slate-100 text-slate-900 hover:bg-slate-200 dark:bg-slate-700 dark:text-slate-100", ghost: