feat(board): display in chip format

Author: eliandoran

apps/client/src/widgets/attribute_widgets/PromotedAttributesDisplay.css

@@ -0,0 +1,31 @@
+.promoted-attributes {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: center;
+    margin-top: 8px;
+}
+
+.promoted-attributes .promoted-attribute {
+    padding: 2px 10px;
+    border-radius: 9999px;
+    white-space: nowrap;
+    background-color: var(--chip-bg, rgba(0, 0, 0, 0.08));
+    color: var(--chip-fg, inherit);
+    border: 1px solid var(--chip-border, rgba(0, 0, 0, 0.15));
+    font-size: 12px;
+    line-height: 1.2;
+}
+
+.promoted-attributes .promoted-attribute:hover {
+    background-color: var(--chip-bg-hover, rgba(0, 0, 0, 0.12));
+    border-color: var(--chip-border-hover, rgba(0, 0, 0, 0.22));
+}
+
+.promoted-attributes .promoted-attribute .name {
+    font-weight: 600;
+}
+
+.promoted-attributes .promoted-attribute .value {
+    opacity: 0.9;
+}

apps/client/src/widgets/attribute_widgets/PromotedAttributesDisplay.tsx

@@ -1,4 +1,5 @@
 import FNote from "../../entities/fnote";
+import "./PromotedAttributesDisplay.css";
 
 interface PromotedAttributesDisplayProps {
     note: FNote;
@@ -8,7 +9,7 @@ interface PromotedAttributesDisplayProps {
 export default function PromotedAttributesDisplay({ note, ignoredAttributes }: PromotedAttributesDisplayProps) {
     const promotedDefinitionAttributes = note.getPromotedDefinitionAttributes();
 
-    return (
+    return promotedDefinitionAttributes.length > 0 && (
         <div className="promoted-attributes">
             {promotedDefinitionAttributes.map((attr) => {
                 const def = attr.getDefinition();
@@ -19,9 +20,9 @@ export default function PromotedAttributesDisplay({ note, ignoredAttributes }: P
                 if (ignoredAttributes && ignoredAttributes.includes(name)) return null;
 
                 return (
-                    <div key={attr.name} className="promoted-attribute">
+                    <span key={attr.name} className="promoted-attribute">
                         <strong>{friendlyName}:</strong> {value}
-                    </div>
+                    </span>
                 );
             }
             )}