UI: improved cards (#8728)

apps/client/src/widgets/react/Card.css

@@ -6,7 +6,15 @@
     --card-nested-section-indent: 30px;
 }
 
-.tn-card {
+.tn-card-heading {
+    margin-bottom: 10px;
+    font-size: .75rem;
+    font-weight: 600;
+    letter-spacing: .4pt;
+    text-transform: uppercase;
+}
+
+.tn-card-body {
     display: flex;
     flex-direction: column;
     gap: var(--card-section-gap);
@@ -35,6 +43,5 @@
             background-color: var(--card-background-hover-color);
             transition: background-color .2s ease-out;
         }
-
     }
 }

apps/client/src/widgets/react/Card.tsx

@@ -4,17 +4,27 @@ import { JSX } from "preact";
 import { useContext } from "preact/hooks";
 import clsx from "clsx";
 
-interface CardProps {
+// #region Card
+
+export interface CardProps {
     className?: string;
+    heading?: string;
 }
 
 export function Card(props: {children: ComponentChildren} & CardProps) {
-    return <div className={clsx(["tn-card", props.className])}>
-        {props.children}
+    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}
+        </div>
     </div>;
 }
 
-interface CardSectionProps {
+// #endregion
+
+// #region Card Section
+
+export interface CardSectionProps {
     className?: string;
     subSections?: JSX.Element | JSX.Element[];
     subSectionsVisible?: boolean;
@@ -22,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;
@@ -31,12 +47,12 @@ 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>
 
-        {props.subSectionsVisible &&
+        {props.subSectionsVisible && props.subSections &&
             <CardSectionContext.Provider value={{nestingLevel}}>
                 {props.subSections}
             </CardSectionContext.Provider>
@@ -44,8 +60,4 @@ export function CardSection(props: {children: ComponentChildren} & CardSectionPr
     </>;
 }
 
-interface CardSectionContextType {
-    nestingLevel: number;
-}
-
-export const CardSectionContext = createContext<CardSectionContextType | undefined>(undefined);
+// #endregion