Implement smart capitalization based on locale (#17860)

This commit is contained in:
Nicolas Mowen
2025-04-22 16:21:09 -06:00
committed by GitHub
parent b6e0e5698a
commit f9b2db4405
44 changed files with 95 additions and 71 deletions
@@ -83,7 +83,7 @@ export default function CameraInfoDialog({
>
<DialogContent>
<DialogHeader>
<DialogTitle className="capitalize">
<DialogTitle className="smart-capitalize">
{t("cameras.info.cameraProbeInfo", {
camera: camera.name.replaceAll("_", " "),
})}
+1 -1
View File
@@ -288,7 +288,7 @@ export function ExportContent({
id={opt}
value={opt}
/>
<Label className="cursor-pointer capitalize" htmlFor={opt}>
<Label className="cursor-pointer smart-capitalize" htmlFor={opt}>
{isNaN(parseInt(opt))
? opt == "timeline"
? t("export.time.fromTimeline")
@@ -91,7 +91,7 @@ export default function FaceSelectionDialog({
)}
>
<SelectorItem
className="flex cursor-pointer gap-2 capitalize"
className="flex cursor-pointer gap-2 smart-capitalize"
onClick={() => setNewFace(true)}
>
<LuPlus />
@@ -100,7 +100,7 @@ export default function FaceSelectionDialog({
{faceNames.map((faceName) => (
<SelectorItem
key={faceName}
className="flex cursor-pointer gap-2 capitalize"
className="flex cursor-pointer gap-2 smart-capitalize"
onClick={() => onTrainAttempt(faceName)}
>
<LuScanFace />
@@ -26,7 +26,7 @@ export default function MobileCameraDrawer({
<Drawer open={cameraDrawer} onOpenChange={setCameraDrawer}>
<DrawerTrigger asChild>
<Button
className="rounded-lg capitalize"
className="rounded-lg smart-capitalize"
aria-label={t("menu.live.cameras.title")}
size="sm"
>
@@ -38,7 +38,7 @@ export default function MobileCameraDrawer({
{allCameras.map((cam) => (
<div
key={cam}
className={`mx-4 w-full py-2 text-center capitalize ${cam == selected ? "rounded-lg bg-secondary" : ""}`}
className={`mx-4 w-full py-2 text-center smart-capitalize ${cam == selected ? "rounded-lg bg-secondary" : ""}`}
onClick={() => {
onSelectCamera(cam);
setCameraDrawer(false);
@@ -324,7 +324,7 @@ export default function MobileReviewSettingsDrawer({
>
<DrawerTrigger asChild>
<Button
className="rounded-lg capitalize"
className="rounded-lg smart-capitalize"
aria-label={t("filters")}
variant={
filter?.labels || filter?.after || filter?.zones
@@ -23,7 +23,7 @@ export default function MobileTimelineDrawer({
<Drawer open={drawer} onOpenChange={setDrawer}>
<DrawerTrigger asChild>
<Button
className="rounded-lg capitalize"
className="rounded-lg smart-capitalize"
aria-label="Select timeline or events list"
size="sm"
>
@@ -32,7 +32,7 @@ export default function MobileTimelineDrawer({
</DrawerTrigger>
<DrawerContent className="mx-1 flex max-h-[75dvh] flex-col items-center gap-2 overflow-hidden rounded-t-2xl px-4 pb-4">
<div
className={`mx-4 w-full py-2 text-center capitalize ${selected == "timeline" ? "rounded-lg bg-secondary" : ""}`}
className={`mx-4 w-full py-2 text-center smart-capitalize ${selected == "timeline" ? "rounded-lg bg-secondary" : ""}`}
onClick={() => {
onSelect("timeline");
setDrawer(false);
@@ -41,7 +41,7 @@ export default function MobileTimelineDrawer({
Timeline
</div>
<div
className={`mx-4 w-full py-2 text-center capitalize ${selected == "events" ? "rounded-lg bg-secondary" : ""}`}
className={`mx-4 w-full py-2 text-center smart-capitalize ${selected == "events" ? "rounded-lg bg-secondary" : ""}`}
onClick={() => {
onSelect("events");
setDrawer(false);
@@ -572,7 +572,7 @@ export default function ObjectLifecycle({
</div>
</div>
<div className="mx-3 text-lg">
<div className="flex flex-row items-center capitalize text-primary">
<div className="flex flex-row items-center text-primary smart-capitalize">
{getLifecycleItemDescription(item)}
</div>
<div className="text-sm text-primary-variant">
@@ -616,7 +616,7 @@ export default function ObjectLifecycle({
)}
<div
key={index}
className="cursor-pointer capitalize"
className="cursor-pointer smart-capitalize"
onClick={() => setSelectedZone(zone)}
>
{zone.replaceAll("_", " ")}
@@ -722,7 +722,7 @@ export default function ObjectLifecycle({
/>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent className="capitalize">
<TooltipContent className="smart-capitalize">
{getLifecycleItemDescription(item)}
</TooltipContent>
</TooltipPortal>
@@ -100,7 +100,7 @@ export function ObjectPath({
/>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent side="top" className="capitalize">
<TooltipContent side="top" className="smart-capitalize">
{pos.lifecycle_item
? getLifecycleItemDescription(pos.lifecycle_item)
: "Tracked point"}
@@ -223,7 +223,9 @@ export default function ObjectPathPlotter() {
}}
/>
<span className="text-sm">
<strong className="mr-1 capitalize">{event.label}</strong>
<strong className="mr-1 smart-capitalize">
{event.label}
</strong>
{formatUnixTimestampToDateTime(event.start_time, {
timezone: config?.ui.timezone,
})}
@@ -233,7 +233,7 @@ export default function ReviewDetailDialog({
<div className="text-sm text-primary/40">
{t("details.camera")}
</div>
<div className="text-sm capitalize">
<div className="text-sm smart-capitalize">
{review.camera.replaceAll("_", " ")}
</div>
</div>
@@ -249,12 +249,12 @@ export default function ReviewDetailDialog({
<div className="text-sm text-primary/40">
{t("details.objects")}
</div>
<div className="scrollbar-container flex max-h-32 flex-col items-start gap-2 overflow-y-auto text-sm capitalize">
<div className="scrollbar-container flex max-h-32 flex-col items-start gap-2 overflow-y-auto text-sm smart-capitalize">
{events?.map((event) => {
return (
<div
key={event.id}
className="flex flex-row items-center gap-2 capitalize"
className="flex flex-row items-center gap-2 smart-capitalize"
>
{getIconForLabel(
event.label,
@@ -290,12 +290,12 @@ export default function ReviewDetailDialog({
<div className="text-sm text-primary/40">
{t("details.zones")}
</div>
<div className="flex flex-col items-start gap-2 text-sm capitalize">
<div className="flex flex-col items-start gap-2 text-sm smart-capitalize">
{review.data.zones.map((zone) => {
return (
<div
key={zone}
className="flex flex-row items-center gap-2 capitalize"
className="flex flex-row items-center gap-2 smart-capitalize"
>
{zone.replaceAll("_", " ")}
</div>
@@ -231,7 +231,7 @@ export default function SearchDetailDialog({
{item == "object_lifecycle" && (
<FaRotate className="size-4" />
)}
<div className="capitalize">{t(`type.${item}`)}</div>
<div className="smart-capitalize">{t(`type.${item}`)}</div>
</ToggleGroupItem>
))}
</ToggleGroup>
@@ -711,7 +711,7 @@ function ObjectDetailsTab({
<div className="flex w-full flex-col gap-3">
<div className="flex flex-col gap-1.5">
<div className="text-sm text-primary/40">{t("details.label")}</div>
<div className="flex flex-row items-center gap-2 text-sm capitalize">
<div className="flex flex-row items-center gap-2 text-sm smart-capitalize">
{getIconForLabel(search.label, "size-4 text-primary")}
{t(search.label, {
ns: "objects",
@@ -831,7 +831,7 @@ function ObjectDetailsTab({
)}
<div className="flex flex-col gap-1.5">
<div className="text-sm text-primary/40">{t("details.camera")}</div>
<div className="text-sm capitalize">
<div className="text-sm smart-capitalize">
{search.camera.replaceAll("_", " ")}
</div>
</div>