diff --git a/apps/client/src/widgets/attribute_widgets/PromotedAttributesDisplay.tsx b/apps/client/src/widgets/attribute_widgets/PromotedAttributesDisplay.tsx
index 432ec4899..0d0b1c534 100644
--- a/apps/client/src/widgets/attribute_widgets/PromotedAttributesDisplay.tsx
+++ b/apps/client/src/widgets/attribute_widgets/PromotedAttributesDisplay.tsx
@@ -5,6 +5,8 @@ import { useTriliumEvent } from "../react/hooks";
import attributes from "../../services/attributes";
import { DefinitionObject } from "../../services/promoted_attribute_definition_parser";
import { formatDateTime } from "../../utils/formatters";
+import { ComponentChildren } from "preact";
+import Icon from "../react/Icon";
interface PromotedAttributesDisplayProps {
note: FNote;
@@ -26,7 +28,7 @@ export default function PromotedAttributesDisplay({ note, ignoredAttributes }: P
{promotedDefinitionAttributes?.map((attr) => {
return (
- {attr.friendlyName}: {formatLabelValue(attr)}
+ {formatLabelValue(attr)}
);
}
@@ -48,25 +50,27 @@ function useNoteAttributesWithDefinitions(note: FNote, attributesToIgnore: stri
return promotedDefinitionAttributes;
}
-function formatLabelValue(attr: AttributeWithDefinitions): string {
+function formatLabelValue(attr: AttributeWithDefinitions): ComponentChildren {
let value = attr.value;
switch (attr.def.labelType) {
case "number":
+ let formattedValue = value;
const numberValue = Number(value);
if (attr.def.numberPrecision) {
- return numberValue.toFixed(attr.def.numberPrecision);
- } else {
- return numberValue.toString();
+ formattedValue = numberValue.toFixed(attr.def.numberPrecision);
}
+ return <>{attr.friendlyName}: {formattedValue}>;
case "date":
case "datetime":
const date = new Date(value);
if (isNaN(date.getTime())) return value;
const timeFormat = attr.def.labelType === "datetime" ? "short" : "none";
- return formatDateTime(date, "short", timeFormat);
+ return <>{attr.friendlyName}: {formatDateTime(date, "short", timeFormat)}>;
+ case "boolean":
+ return <> {attr.friendlyName}>;
case "text":
default:
- return value;
+ return <>{attr.friendlyName}: {value}>;
}
}