feat(harmonia): unify page/record title styling across all generated views + shell (#6361)

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>

Author: delchev

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>

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>

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

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}') })"

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

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}') })"

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()" />

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)

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>

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>