From 7019cd400bfbfb2d9fbd05ff96f7113da7185e35 Mon Sep 17 00:00:00 2001
From: lucaronin <luca.rossi.917@gmail.com>
Date: Sun, 29 Mar 2026 17:00:04 +0200
Subject: [PATCH] fix: replace monospaced ALL CAPS labels with Inter sentence
 case

Remove IBM Plex Mono + text-transform: uppercase from all UI labels.
CSS classes .font-mono-label and .font-mono-overline now use Inter
with no text-transform. Inline monospace+uppercase styles in
StatusDropdown, TagsDropdown, ReferencedByPanel, AiActionCard replaced.
Tailwind uppercase removed from Sidebar, CommandPalette, PulseView,
CreateNoteDialog, CreateTypeDialog. Hardcoded ALL CAPS text (COLOR,
ICON, TEMPLATE) converted to sentence case. Code blocks and commit
hashes remain monospaced.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/AiActionCard.tsx                |  2 +-
 src/components/CommandPalette.test.tsx         |  3 ++-
 src/components/CommandPalette.tsx              |  2 +-
 src/components/CreateNoteDialog.tsx            |  4 ++--
 src/components/CreateTypeDialog.tsx            |  2 +-
 src/components/DynamicPropertiesPanel.test.tsx |  2 +-
 src/components/PulseView.tsx                   |  2 +-
 src/components/Sidebar.tsx                     |  2 +-
 src/components/StatusDropdown.tsx              |  6 ++----
 src/components/TagsDropdown.tsx                | 10 ++++------
 src/components/TypeCustomizePopover.test.tsx   |  6 +++---
 src/components/TypeCustomizePopover.tsx        |  6 +++---
 src/components/inspector/ReferencedByPanel.tsx |  2 +-
 src/index.css                                  |  8 +++-----
 14 files changed, 26 insertions(+), 31 deletions(-)

diff --git a/src/components/AiActionCard.tsx b/src/components/AiActionCard.tsx
index 520499f5..5a3c2d4a 100644
--- a/src/components/AiActionCard.tsx
+++ b/src/components/AiActionCard.tsx
@@ -74,7 +74,7 @@ function DetailBlock({ label, content, isError }: {
     <div style={{ marginTop: 6 }}>
       <div
         className="text-muted-foreground"
-        style={{ fontSize: 10, fontWeight: 600, textTransform: 'uppercase', marginBottom: 2 }}
+        style={{ fontSize: 10, fontWeight: 600, marginBottom: 2 }}
       >
         {label}
       </div>
diff --git a/src/components/CommandPalette.test.tsx b/src/components/CommandPalette.test.tsx
index 3e7634f1..e0974ae5 100644
--- a/src/components/CommandPalette.test.tsx
+++ b/src/components/CommandPalette.test.tsx
@@ -208,7 +208,8 @@ describe('CommandPalette', () => {
       const groupHeaders = screen.getAllByText(
         (_content, el) =>
           el?.tagName === 'DIV' &&
-          el.classList.contains('uppercase') &&
+          el.classList.contains('text-[11px]') &&
+          el.classList.contains('font-medium') &&
           !!el.textContent,
       ).map(el => el.textContent)
 
diff --git a/src/components/CommandPalette.tsx b/src/components/CommandPalette.tsx
index 0197d2e5..d10984e0 100644
--- a/src/components/CommandPalette.tsx
+++ b/src/components/CommandPalette.tsx
@@ -140,7 +140,7 @@ export function CommandPalette({ open, commands, onClose }: CommandPaletteProps)
               runningIndex += items.length
               return (
                 <div key={group}>
-                  <div className="px-4 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
+                  <div className="px-4 pb-1 pt-2 text-[11px] font-medium text-muted-foreground">
                     {group}
                   </div>
                   {items.map((cmd, i) => {
diff --git a/src/components/CreateNoteDialog.tsx b/src/components/CreateNoteDialog.tsx
index 0c107a05..01ef422c 100644
--- a/src/components/CreateNoteDialog.tsx
+++ b/src/components/CreateNoteDialog.tsx
@@ -55,7 +55,7 @@ export function CreateNoteDialog({ open, onClose, onCreate, defaultType, customT
         </DialogHeader>
         <form onSubmit={handleSubmit} className="space-y-4">
           <div className="space-y-1.5">
-            <label className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+            <label className="text-xs font-medium text-muted-foreground">
               Title
             </label>
             <Input
@@ -66,7 +66,7 @@ export function CreateNoteDialog({ open, onClose, onCreate, defaultType, customT
             />
           </div>
           <div className="space-y-1.5">
-            <label className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+            <label className="text-xs font-medium text-muted-foreground">
               Type
             </label>
             <div className="flex flex-wrap gap-1.5">
diff --git a/src/components/CreateTypeDialog.tsx b/src/components/CreateTypeDialog.tsx
index 14bf7bf2..ebfb72d0 100644
--- a/src/components/CreateTypeDialog.tsx
+++ b/src/components/CreateTypeDialog.tsx
@@ -36,7 +36,7 @@ export function CreateTypeDialog({ open, onClose, onCreate }: CreateTypeDialogPr
         </DialogHeader>
         <form onSubmit={handleSubmit} className="space-y-4">
           <div className="space-y-1.5">
-            <label className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+            <label className="text-xs font-medium text-muted-foreground">
               Type Name
             </label>
             <Input
diff --git a/src/components/DynamicPropertiesPanel.test.tsx b/src/components/DynamicPropertiesPanel.test.tsx
index 1351266c..8c069b22 100644
--- a/src/components/DynamicPropertiesPanel.test.tsx
+++ b/src/components/DynamicPropertiesPanel.test.tsx
@@ -112,7 +112,7 @@ describe('DynamicPropertiesPanel', () => {
         frontmatter={{ Status: 'Active' }}
       />
     )
-    // Status rendered with CSS text-transform: uppercase, DOM text is still "Active"
+    // Status rendered as sentence case
     expect(screen.getByTestId('status-badge')).toBeInTheDocument()
   })
 
diff --git a/src/components/PulseView.tsx b/src/components/PulseView.tsx
index a072c3cc..21a2c23e 100644
--- a/src/components/PulseView.tsx
+++ b/src/components/PulseView.tsx
@@ -167,7 +167,7 @@ function DayGroup({ label, commits, onOpenNote }: {
         onClick={() => setCollapsed((v) => !v)}
       >
         <Chevron size={12} className="text-muted-foreground" />
-        <span className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
+        <span className="text-[11px] font-medium text-muted-foreground">
           {label}
         </span>
         <span className="text-[11px] text-muted-foreground">
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 6be6f01b..eae15b62 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -315,7 +315,7 @@ export const Sidebar = memo(function Sidebar({
         {/* Sections header + visibility popover */}
         <div ref={customizeRef} style={{ position: 'relative', padding: '4px 6px 0' }}>
           <div className="flex w-full select-none items-center justify-between" style={{ padding: '4px 16px' }}>
-            <span className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">Sections</span>
+            <span className="text-[11px] font-medium text-muted-foreground">Sections</span>
             <button className="flex shrink-0 cursor-pointer items-center justify-center rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-foreground" style={{ width: 20, height: 20 }} onClick={() => setShowCustomize((v) => !v)} aria-label="Customize sections" title="Customize sections">
               <SlidersHorizontal size={14} />
             </button>
diff --git a/src/components/StatusDropdown.tsx b/src/components/StatusDropdown.tsx
index 89846b34..ff37fb64 100644
--- a/src/components/StatusDropdown.tsx
+++ b/src/components/StatusDropdown.tsx
@@ -13,11 +13,10 @@ export function StatusPill({ status, className }: { status: string; className?:
         color: style.color,
         borderRadius: 16,
         padding: '1px 6px',
-        fontFamily: "'IBM Plex Mono', monospace",
+        fontFamily: "'Inter', sans-serif",
         fontSize: 10,
         fontWeight: 600,
         letterSpacing: '0',
-        textTransform: 'uppercase' as const,
         maxWidth: 160,
       }}
       title={status}
@@ -98,11 +97,10 @@ function StatusOption({
 }
 
 const SECTION_LABEL_STYLE = {
-  fontFamily: "'IBM Plex Mono', monospace",
+  fontFamily: "'Inter', sans-serif",
   fontSize: 9,
   fontWeight: 500,
   letterSpacing: '0',
-  textTransform: 'uppercase' as const,
 }
 
 function SectionLabel({ children }: { children: string }) {
diff --git a/src/components/TagsDropdown.tsx b/src/components/TagsDropdown.tsx
index a5303152..7afeca72 100644
--- a/src/components/TagsDropdown.tsx
+++ b/src/components/TagsDropdown.tsx
@@ -13,11 +13,10 @@ export function TagPill({ tag, className }: { tag: string; className?: string })
         color: style.color,
         borderRadius: 16,
         padding: '1px 6px',
-        fontFamily: "'IBM Plex Mono', monospace",
+        fontFamily: "'Inter', sans-serif",
         fontSize: 10,
         fontWeight: 600,
-        letterSpacing: '1.2px',
-        textTransform: 'uppercase' as const,
+        letterSpacing: '0',
         maxWidth: 160,
       }}
       title={tag}
@@ -90,11 +89,10 @@ function TagOption({
 }
 
 const SECTION_LABEL_STYLE = {
-  fontFamily: "'IBM Plex Mono', monospace",
+  fontFamily: "'Inter', sans-serif",
   fontSize: 9,
   fontWeight: 500,
-  letterSpacing: '1.2px',
-  textTransform: 'uppercase' as const,
+  letterSpacing: '0',
 }
 
 function SectionLabel({ children }: { children: string }) {
diff --git a/src/components/TypeCustomizePopover.test.tsx b/src/components/TypeCustomizePopover.test.tsx
index ca38c831..7c6c8389 100644
--- a/src/components/TypeCustomizePopover.test.tsx
+++ b/src/components/TypeCustomizePopover.test.tsx
@@ -66,9 +66,9 @@ describe('TypeCustomizePopover', () => {
 
   it('renders color, icon, and template sections', () => {
     renderPopover()
-    expect(screen.getByText('COLOR')).toBeInTheDocument()
-    expect(screen.getByText('ICON')).toBeInTheDocument()
-    expect(screen.getByText('TEMPLATE')).toBeInTheDocument()
+    expect(screen.getByText('Color')).toBeInTheDocument()
+    expect(screen.getByText('Icon')).toBeInTheDocument()
+    expect(screen.getByText('Template')).toBeInTheDocument()
     expect(screen.getByText('Done')).toBeInTheDocument()
   })
 
diff --git a/src/components/TypeCustomizePopover.tsx b/src/components/TypeCustomizePopover.tsx
index 215826ba..27438407 100644
--- a/src/components/TypeCustomizePopover.tsx
+++ b/src/components/TypeCustomizePopover.tsx
@@ -75,7 +75,7 @@ export function TypeCustomizePopover({
       onContextMenu={(e) => e.stopPropagation()}
     >
       {/* Color section */}
-      <div className="font-mono-overline mb-2 text-muted-foreground">COLOR</div>
+      <div className="font-mono-overline mb-2 text-muted-foreground">Color</div>
       <div className="flex gap-2 mb-3 flex-wrap">
         {ACCENT_COLORS.map((c) => (
           <button
@@ -92,7 +92,7 @@ export function TypeCustomizePopover({
       </div>
 
       {/* Icon section */}
-      <div className="font-mono-overline mb-2 text-muted-foreground">ICON</div>
+      <div className="font-mono-overline mb-2 text-muted-foreground">Icon</div>
 
       {/* Search input */}
       <div className="relative mb-2">
@@ -136,7 +136,7 @@ export function TypeCustomizePopover({
       </div>
 
       {/* Template section */}
-      <div className="font-mono-overline mb-2 mt-3 text-muted-foreground">TEMPLATE</div>
+      <div className="font-mono-overline mb-2 mt-3 text-muted-foreground">Template</div>
       <textarea
         value={templateText}
         onChange={(e) => handleTemplateChange(e.target.value)}
diff --git a/src/components/inspector/ReferencedByPanel.tsx b/src/components/inspector/ReferencedByPanel.tsx
index a5e8c99a..9aaee690 100644
--- a/src/components/inspector/ReferencedByPanel.tsx
+++ b/src/components/inspector/ReferencedByPanel.tsx
@@ -31,7 +31,7 @@ export function ReferencedByPanel({ items, typeEntryMap, onNavigate }: {
       <div className="flex flex-col gap-2.5">
         {grouped.map(([viaKey, groupEntries]) => (
           <div key={viaKey}>
-            <span className="mb-1 block font-mono text-muted-foreground" style={{ fontSize: 9, fontWeight: 400, letterSpacing: '1.2px', textTransform: 'uppercase', opacity: 0.7 }}>
+            <span className="mb-1 block text-muted-foreground" style={{ fontSize: 9, fontWeight: 400, letterSpacing: '0.02em', opacity: 0.7 }}>
               ← {viaKey}
             </span>
             <div className="flex flex-col gap-0.5">
diff --git a/src/index.css b/src/index.css
index 7d53c7b9..90617754 100644
--- a/src/index.css
+++ b/src/index.css
@@ -149,22 +149,20 @@
   }
 }
 
-/* --- IBM Plex Mono label styles (from typography scale) --- */
+/* --- Label typography (Inter, sentence case) --- */
 /* t8: Section labels, metadata tags — 11px medium */
 .font-mono-label {
-  font-family: 'IBM Plex Mono', monospace;
+  font-family: 'Inter', sans-serif;
   font-size: 11px;
   font-weight: 500;
-  text-transform: uppercase;
 }
 
 /* t9: Overlines, category labels — 10px regular */
 .font-mono-overline {
-  font-family: 'IBM Plex Mono', monospace;
+  font-family: 'Inter', sans-serif;
   font-size: 10px;
   font-weight: 400;
   letter-spacing: 0.02em;
-  text-transform: uppercase;
 }
 
 .referenced-by-panel button:hover {