From e00150a87603e536c95d96ba1f6101476b73970e Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Sun, 15 Feb 2026 19:46:08 +0200
Subject: [PATCH 1/5] ui/cards: do not include nesting level CSS variables if
 not necessary

---
 apps/client/src/widgets/react/Card.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/client/src/widgets/react/Card.tsx b/apps/client/src/widgets/react/Card.tsx
index 26b52040be..7296433bf7 100644
--- a/apps/client/src/widgets/react/Card.tsx
+++ b/apps/client/src/widgets/react/Card.tsx
@@ -31,7 +31,7 @@ export function CardSection(props: {children: ComponentChildren} & CardSectionPr
                     "tn-card-section-nested": nestingLevel > 0,
                     "tn-card-section-highlight-on-hover": props.highlightOnHover || props.onAction
                  })}
-                 style={{"--tn-card-section-nesting-level": nestingLevel}}
+                 style={{"--tn-card-section-nesting-level": (nestingLevel) ? nestingLevel : null}}
                  onClick={props.onAction}>
             {props.children}
         </section>

From 4ee9d45dfc4fdc869dc69f45dc865de16f5db368 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Sun, 15 Feb 2026 20:06:01 +0200
Subject: [PATCH 2/5] ui/cards: implement card titles (heading)

---
 apps/client/src/widgets/react/Card.css |  8 ++++++++
 apps/client/src/widgets/react/Card.tsx | 10 +++++++---
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/widgets/react/Card.css b/apps/client/src/widgets/react/Card.css
index ce6bf6dc61..5bbe0f6ab4 100644
--- a/apps/client/src/widgets/react/Card.css
+++ b/apps/client/src/widgets/react/Card.css
@@ -6,6 +6,14 @@
     --card-nested-section-indent: 30px;
 }
 
+.tn-card-heading {
+    margin-bottom: 10px;
+    font-size: .75rem;
+    font-weight: 600;
+    letter-spacing: .4pt;
+    text-transform: uppercase;
+}
+
 .tn-card {
     display: flex;
     flex-direction: column;
diff --git a/apps/client/src/widgets/react/Card.tsx b/apps/client/src/widgets/react/Card.tsx
index 7296433bf7..3a805ff731 100644
--- a/apps/client/src/widgets/react/Card.tsx
+++ b/apps/client/src/widgets/react/Card.tsx
@@ -6,12 +6,16 @@ import clsx from "clsx";
 
 interface CardProps {
     className?: string;
+    heading?: string;
 }
 
 export function Card(props: {children: ComponentChildren} & CardProps) {
-    return <div className={clsx(["tn-card", props.className])}>
-        {props.children}
-    </div>;
+    return <>
+        {props.heading && <h5 class="tn-card-heading">{props.heading}</h5>}
+        <div className={clsx(["tn-card", props.className])}>
+            {props.children}
+        </div>
+    </>;
 }
 
 interface CardSectionProps {

From 48013dc264ff5dd8cf2bb829775e429c33f15f09 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Sun, 15 Feb 2026 20:14:14 +0200
Subject: [PATCH 3/5] ui/cards: use a better HTML structure

---
 apps/client/src/widgets/react/Card.css | 2 +-
 apps/client/src/widgets/react/Card.tsx | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/client/src/widgets/react/Card.css b/apps/client/src/widgets/react/Card.css
index 5bbe0f6ab4..1472dc135a 100644
--- a/apps/client/src/widgets/react/Card.css
+++ b/apps/client/src/widgets/react/Card.css
@@ -14,7 +14,7 @@
     text-transform: uppercase;
 }
 
-.tn-card {
+.tn-card-body {
     display: flex;
     flex-direction: column;
     gap: var(--card-section-gap);
diff --git a/apps/client/src/widgets/react/Card.tsx b/apps/client/src/widgets/react/Card.tsx
index 3a805ff731..6f41a2e6f3 100644
--- a/apps/client/src/widgets/react/Card.tsx
+++ b/apps/client/src/widgets/react/Card.tsx
@@ -10,12 +10,12 @@ interface CardProps {
 }
 
 export function Card(props: {children: ComponentChildren} & CardProps) {
-    return <>
+    return <div class={clsx("tn-card", props.className)}>
         {props.heading && <h5 class="tn-card-heading">{props.heading}</h5>}
-        <div className={clsx(["tn-card", props.className])}>
+        <div className="tn-card-body">
             {props.children}
         </div>
-    </>;
+    </div>;
 }
 
 interface CardSectionProps {

From 489a88b8da96d2e28a499770477775b3099e07c4 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Sun, 15 Feb 2026 20:23:19 +0200
Subject: [PATCH 4/5] ui/cards: refactor

---
 apps/client/src/widgets/react/Card.css |  1 -
 apps/client/src/widgets/react/Card.tsx | 24 ++++++++++++++++--------
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/apps/client/src/widgets/react/Card.css b/apps/client/src/widgets/react/Card.css
index 1472dc135a..cabc4a0889 100644
--- a/apps/client/src/widgets/react/Card.css
+++ b/apps/client/src/widgets/react/Card.css
@@ -43,6 +43,5 @@
             background-color: var(--card-background-hover-color);
             transition: background-color .2s ease-out;
         }
-
     }
 }
\ No newline at end of file
diff --git a/apps/client/src/widgets/react/Card.tsx b/apps/client/src/widgets/react/Card.tsx
index 6f41a2e6f3..01b40ee306 100644
--- a/apps/client/src/widgets/react/Card.tsx
+++ b/apps/client/src/widgets/react/Card.tsx
@@ -4,7 +4,9 @@ import { JSX } from "preact";
 import { useContext } from "preact/hooks";
 import clsx from "clsx";
 
-interface CardProps {
+// #region Card
+
+export interface CardProps {
     className?: string;
     heading?: string;
 }
@@ -18,7 +20,11 @@ export function Card(props: {children: ComponentChildren} & CardProps) {
     </div>;
 }
 
-interface CardSectionProps {
+// #endregion
+
+// #region Card Section
+
+export interface CardSectionProps {
     className?: string;
     subSections?: JSX.Element | JSX.Element[];
     subSectionsVisible?: boolean;
@@ -26,6 +32,12 @@ interface CardSectionProps {
     onAction?: () => void;
 }
 
+interface CardSectionContextType {
+    nestingLevel: number;
+}
+
+const CardSectionContext = createContext<CardSectionContextType | undefined>(undefined);
+
 export function CardSection(props: {children: ComponentChildren} & CardSectionProps) {
     const parentContext = useContext(CardSectionContext);
     const nestingLevel = (parentContext && parentContext.nestingLevel + 1) ?? 0;
@@ -40,7 +52,7 @@ export function CardSection(props: {children: ComponentChildren} & CardSectionPr
             {props.children}
         </section>
 
-        {props.subSectionsVisible &&
+        {props.subSectionsVisible && props.subSections &&
             <CardSectionContext.Provider value={{nestingLevel}}>
                 {props.subSections}
             </CardSectionContext.Provider>
@@ -48,8 +60,4 @@ export function CardSection(props: {children: ComponentChildren} & CardSectionPr
     </>;
 }
 
-interface CardSectionContextType {
-    nestingLevel: number;
-}
-
-export const CardSectionContext = createContext<CardSectionContextType | undefined>(undefined);
\ No newline at end of file
+// #endregion
\ No newline at end of file

From 7551d0e04437a3f5441b43d56d7eeec637e7c07d Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Sun, 15 Feb 2026 20:32:01 +0200
Subject: [PATCH 5/5] ui/cards: fix attribute name

---
 apps/client/src/widgets/react/Card.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/client/src/widgets/react/Card.tsx b/apps/client/src/widgets/react/Card.tsx
index 01b40ee306..224a151504 100644
--- a/apps/client/src/widgets/react/Card.tsx
+++ b/apps/client/src/widgets/react/Card.tsx
@@ -12,7 +12,7 @@ export interface CardProps {
 }
 
 export function Card(props: {children: ComponentChildren} & CardProps) {
-    return <div class={clsx("tn-card", props.className)}>
+    return <div className={clsx("tn-card", props.className)}>
         {props.heading && <h5 class="tn-card-heading">{props.heading}</h5>}
         <div className="tn-card-body">
             {props.children}