From f3bc4f3c068661b20534762be25a54a920291c73 Mon Sep 17 00:00:00 2001
From: delchev <delchevn@gmail.com>
Date: Tue, 21 Jul 2026 23:19:25 +0300
Subject: [PATCH] feat(harmonia): unify page/record title styling across all
 generated views + shell

Every page title now uses one caption style - text-2xl font-semibold tracking-tight:

- Record captions (document header, manage create/edit form, form-builder title):
  were an uppercased font-normal label; now semibold and NOT uppercased ('Sales
  Invoice', not 'SALES INVOICE'). The document number keeps font-bold so it stays
  heavier than the caption ('Sales Invoice SI-0000001').
- Browse titles (list, manage list, master-detail, report chart/table, report-file):
  x-h-toolbar-title kept (truncation) with the caption classes added.
- Built-in shell sections: the Inbox title adopts the caption style, and Documents
  gains a 'Documents' caption alongside its path breadcrumb (root = Home).

Secondary headers left as-is by design: the master-detail 'Entity #id' sub-panel
titles, the document items-panel header, card ('Details') and dialog titles.

Verified live: regenerated kf-mod-sales-invoices - the list, document caption/number,
and the shared Inbox/Documents shell all render the unified caption.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../dirigible/application-core/shell/views/_documents.html | 3 +++
 .../dirigible/application-core/shell/views/_inbox.html     | 2 +-
 .../ui/perspective/document/document-view.html.template    | 7 +++----
 .../ui/perspective/list/view.html.template                 | 2 +-
 .../ui/perspective/manage/form-view.html.template          | 2 +-
 .../ui/perspective/manage/list-view.html.template          | 2 +-
 .../ui/perspective/master/master-view.html.template        | 2 +-
 .../ui/perspective/report-file/index.html.template         | 2 +-
 .../ui/perspective/report/chart-view.html.template         | 2 +-
 .../ui/perspective/report/table-view.html.template         | 2 +-
 .../template-form-builder-harmonia/ui/index.html.template  | 2 +-
 11 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/shell/views/_documents.html b/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/shell/views/_documents.html
index 2d8e6ac1125..ec74a220b0a 100644
--- a/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/shell/views/_documents.html
+++ b/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/shell/views/_documents.html
@@ -19,6 +19,9 @@
 <div x-data="documentsPage" class="vbox size-full">
 
   <div x-h-toolbar data-variant="transparent">
+    <!-- Section caption, unified with the entity/inbox titles (text-2xl semibold); the breadcrumb
+         below it is the in-folder path navigator (root = Home). -->
+    <span x-h-toolbar-title class="shrink-0 text-2xl font-semibold tracking-tight" x-text="T('application-core:shell.nav.documents', 'Documents')"></span>
     <button x-h-button data-variant="transparent" data-size="icon-sm" :disabled="!hasBack()" @click="goBack()" aria-label="Back"><i role="img" x-h-lucide data-lucide="arrow-left"></i></button>
     <button x-h-button data-variant="transparent" data-size="icon-sm" :disabled="!hasForward()" @click="goForward()" aria-label="Forward"><i role="img" x-h-lucide data-lucide="arrow-right"></i></button>
     <button x-h-button data-variant="transparent" data-size="icon-sm" @click="refresh()" aria-label="Refresh"><i role="img" x-h-lucide data-lucide="refresh-cw"></i></button>
diff --git a/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/shell/views/_inbox.html b/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/shell/views/_inbox.html
index b589a5d8b81..8ee8a42c8b4 100644
--- a/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/shell/views/_inbox.html
+++ b/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/shell/views/_inbox.html
@@ -16,7 +16,7 @@
      dashboard Process Inbox redesigned in #6064/#6068). -->
 <div x-data="inboxPage" class="vbox size-full">
   <div x-h-toolbar data-variant="transparent">
-    <span x-h-toolbar-title x-text="T('application-core:shell.nav.inbox', 'Inbox')"></span>
+    <span x-h-toolbar-title class="text-2xl font-semibold tracking-tight" x-text="T('application-core:shell.nav.inbox', 'Inbox')"></span>
     <span x-h-badge data-variant="information" x-text="tasks.length"></span>
     <div x-h-toolbar-spacer></div>
     <span x-show="lastUpdated" x-h-text.muted x-text="'Updated ' + fmtTime(lastUpdated)"></span>
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/document/document-view.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/document/document-view.html.template
index cf099043d07..fa80ec0fbc1 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/document/document-view.html.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/document/document-view.html.template
@@ -20,11 +20,10 @@
 
   <div x-h-toolbar data-variant="transparent">
 #if($docNumberProp != "")
-    <!-- Document title: the uppercased document label (normal weight) + the number in bold
-         (e.g. SALES INVOICE 00001231). The label is a plain span on purpose - the x-h-text.h3
-         directive injects font-semibold, which the label must NOT have; only the number is bold. -->
+    <!-- Document title: the document label (semibold, unified caption style) + the number in bold
+         (heavier than the caption so it stands out), e.g. "Sales Invoice SI-0000001". -->
     <div class="hbox items-baseline gap-2 shrink-0">
-      <span class="text-2xl font-normal tracking-tight" x-text="T('$projectName:${tprefix}.t.${dataName}', '${documentLabel}').toUpperCase()"></span>
+      <span class="text-2xl font-semibold tracking-tight" x-text="T('$projectName:${tprefix}.t.${dataName}', '${documentLabel}')"></span>
       <span class="text-2xl font-bold tracking-tight" x-show="(isEdit || isPreview) && form.${docNumberProp}" x-text="form.${docNumberProp}"></span>
     </div>
 #else
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/list/view.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/list/view.html.template
index f234ce87ee8..60230ba3095 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/list/view.html.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/list/view.html.template
@@ -6,7 +6,7 @@
 <div x-data="${name}ListPage" class="vbox size-full">
 
   <div x-h-toolbar data-variant="transparent">
-    <span x-h-toolbar-title class="shrink-0" x-text="T('$projectName:${tprefix}.t.${dataName}', '${name}')"></span>
+    <span x-h-toolbar-title class="shrink-0 text-2xl font-semibold tracking-tight" x-text="T('$projectName:${tprefix}.t.${dataName}', '${name}')"></span>
     <div x-h-toolbar-spacer></div>
     <div x-h-input-group data-size="sm">
       <input x-h-input.group type="text" :placeholder="T('$projectName:${tprefix}.messages.inputSearch', 'Search ${name}...', { name: T('$projectName:${tprefix}.t.${dataName}', '${name}') })"
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/manage/form-view.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/manage/form-view.html.template
index 24383c7b331..89b5419886d 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/manage/form-view.html.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/manage/form-view.html.template
@@ -22,7 +22,7 @@
     <!-- Page caption in the document title style: the uppercased entity label (e.g. CUSTOMER),
          text-2xl normal weight - matches the document header look. This caption is intentionally only
          on the create/edit form, NOT on the list/master browse views. -->
-    <span class="text-2xl font-normal tracking-tight shrink-0" x-text="T('$projectName:${tprefix}.t.${dataName}', '${entityLabel}').toUpperCase()"></span>
+    <span class="text-2xl font-semibold tracking-tight shrink-0" x-text="T('$projectName:${tprefix}.t.${dataName}', '${entityLabel}')"></span>
     <div x-h-toolbar-spacer></div>
 #if($statusProp != "")
     <!-- EntityStatus badge, right-aligned like the document view's pill; shown once the record's
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/manage/list-view.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/manage/list-view.html.template
index 23461cbd795..0b5da1e1f3f 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/manage/list-view.html.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/manage/list-view.html.template
@@ -6,7 +6,7 @@
 <div x-data="${name}ManageListPage" class="vbox size-full">
 
   <div x-h-toolbar data-variant="transparent">
-    <span x-h-toolbar-title class="shrink-0" x-text="T('$projectName:${tprefix}.t.${dataName}_plural', '${menuLabel}')"></span>
+    <span x-h-toolbar-title class="shrink-0 text-2xl font-semibold tracking-tight" x-text="T('$projectName:${tprefix}.t.${dataName}_plural', '${menuLabel}')"></span>
     <div x-h-toolbar-spacer></div>
     <div x-h-input-group data-size="sm">
       <input x-h-input.group type="text" :placeholder="T('$projectName:${tprefix}.messages.inputSearch', 'Search ${menuLabel}...', { name: T('$projectName:${tprefix}.t.${dataName}', '${entityLabel}') })"
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/master/master-view.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/master/master-view.html.template
index deaa943e09b..6fab7798d9b 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/master/master-view.html.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/master/master-view.html.template
@@ -7,7 +7,7 @@
 <div x-data="${name}MasterPage" class="vbox size-full">
 
   <div x-h-toolbar data-variant="transparent">
-    <span x-h-toolbar-title class="shrink-0" x-text="T('$projectName:${tprefix}.t.${dataName}_plural', '${menuLabel}')"></span>
+    <span x-h-toolbar-title class="shrink-0 text-2xl font-semibold tracking-tight" x-text="T('$projectName:${tprefix}.t.${dataName}_plural', '${menuLabel}')"></span>
     <div x-h-toolbar-spacer></div>
     <div x-h-input-group data-size="sm">
       <input x-h-input.group type="text" :placeholder="T('$projectName:${tprefix}.messages.inputSearch', 'Search ${name}...', { name: T('$projectName:${tprefix}.t.${dataName}', '${name}') })" x-model="searchTerm" @input="page = 1; refreshIcons()" />
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report-file/index.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report-file/index.html.template
index f9b334eed8a..221bd3a9c2d 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report-file/index.html.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report-file/index.html.template
@@ -24,7 +24,7 @@
     <div class="vbox size-full">
       <!-- Hidden in preview mode (the dashboard tile): no title/badge/toolbar, just the data. -->
       <div x-show="!preview" x-h-toolbar data-variant="transparent">
-        <span x-h-toolbar-title class="shrink-0" x-text="displayName"></span>
+        <span x-h-toolbar-title class="shrink-0 text-2xl font-semibold tracking-tight" x-text="displayName"></span>
         <span x-show="state === 'default'" x-h-badge data-variant="information" x-text="count + ' rows'"></span>
         <div x-h-toolbar-spacer></div>
 #if($chart)
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report/chart-view.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report/chart-view.html.template
index 22c4abb439d..3406b009c1a 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report/chart-view.html.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report/chart-view.html.template
@@ -3,7 +3,7 @@
 <!-- Generated by Eclipse Dirigible. Report chart view for ${name} (native Harmonia chart). -->
 <div x-data="${name}ReportPage" class="vbox size-full">
   <div x-h-toolbar data-variant="transparent">
-    <span x-h-toolbar-title>${name}</span>
+    <span x-h-toolbar-title class="text-2xl font-semibold tracking-tight">${name}</span>
     <div x-h-toolbar-spacer></div>
     <button x-h-button data-variant="outline" data-size="sm" @click="load()"><i role="img" x-h-lucide data-lucide="refresh-cw"></i><span x-text="T('$projectName:${tprefix}.defaults.refresh', 'Refresh')"></span></button>
     <button x-h-button data-variant="outline" data-size="sm" @click="printChart()"><i role="img" x-h-lucide data-lucide="printer"></i><span x-text="T('$projectName:${tprefix}.defaults.print', 'Print')"></span></button>
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report/table-view.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report/table-view.html.template
index 5399024093f..3e12fb2a729 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report/table-view.html.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report/table-view.html.template
@@ -1,7 +1,7 @@
 <!-- Generated by Eclipse Dirigible. Report table view for ${name}. -->
 <div x-data="${name}ReportPage" class="vbox size-full">
   <div x-h-toolbar data-variant="transparent">
-    <span x-h-toolbar-title>${name}</span>
+    <span x-h-toolbar-title class="text-2xl font-semibold tracking-tight">${name}</span>
     <div x-h-toolbar-spacer></div>
     <button x-h-button data-variant="outline" data-size="sm" @click="load()"><i role="img" x-h-lucide data-lucide="refresh-cw"></i><span x-text="T('$projectName:${tprefix}.defaults.refresh', 'Refresh')"></span></button>
     <button x-h-button data-variant="outline" data-size="sm" @click="exportCsv()"><i role="img" x-h-lucide data-lucide="download"></i><span x-text="T('$projectName:${tprefix}.defaults.export', 'Export')"></span></button>
diff --git a/components/template/template-form-builder-harmonia/src/main/resources/META-INF/dirigible/template-form-builder-harmonia/ui/index.html.template b/components/template/template-form-builder-harmonia/src/main/resources/META-INF/dirigible/template-form-builder-harmonia/ui/index.html.template
index bb3bcde3d31..e854b255207 100644
--- a/components/template/template-form-builder-harmonia/src/main/resources/META-INF/dirigible/template-form-builder-harmonia/ui/index.html.template
+++ b/components/template/template-form-builder-harmonia/src/main/resources/META-INF/dirigible/template-form-builder-harmonia/ui/index.html.template
@@ -18,7 +18,7 @@
 #end
         </div>
 #elseif($el.controlId == "header")
-        <h1 x-h-text.h3 class="mb-2 col-span-full">$!el.label</h1>
+        <h1 x-h-text.h3 class="mb-2 col-span-full text-2xl font-semibold tracking-tight">$!el.label</h1>
 #elseif($el.controlId == "paragraph")
         <p x-h-text class="col-span-full">$!el.label</p>
 #elseif($el.controlId == "line")