From 0f2476b86383325c27875b42e463691a4fe89c52 Mon Sep 17 00:00:00 2001
From: mawkone <mark@getacquired.com>
Date: Sun, 14 Jun 2026 14:23:55 -0700
Subject: [PATCH] fix(databases): format row counts as pills on the right side
 of the tree

---
 .../project/database-table-tree.tsx           | 37 +++++++++----------
 1 file changed, 18 insertions(+), 19 deletions(-)

diff --git a/vibn-frontend/components/project/database-table-tree.tsx b/vibn-frontend/components/project/database-table-tree.tsx
index fe46fb6..854952a 100644
--- a/vibn-frontend/components/project/database-table-tree.tsx
+++ b/vibn-frontend/components/project/database-table-tree.tsx
@@ -196,8 +196,8 @@ function SchemaGroup({
                 }}
               />
               <span style={tableName}>{t.name}</span>
-              {t.approxRows != null && t.approxRows > 0 && (
-                <span style={rowCount}>~{formatCount(t.approxRows)}</span>
+              {t.approxRows != null && t.approxRows >= 0 && (
+                <span style={rowCount}>{formatCount(t.approxRows)}</span>
               )}
             </button>
           </li>
@@ -227,12 +227,7 @@ function formatCount(n: number) {
 
 // ──────────────────────────────────────────────────
 
-const INK = {
-  ink: "#1a1a1a",
-  mid: "#5f5e5a",
-  muted: "#a09a90",
-  borderSoft: "#efebe1",
-} as const;
+// Clean up unused styles
 
 const treeWrap: React.CSSProperties = {
   display: "flex",
@@ -251,8 +246,8 @@ const row: React.CSSProperties = {
   display: "flex",
   alignItems: "center",
   gap: 8,
-  width: "fit-content",
-  padding: "4px 8px 4px 6px",
+  width: "100%",
+  padding: "6px 8px 6px 6px",
   border: "1px solid transparent",
   borderRadius: THEME.radiusSm,
   cursor: "pointer",
@@ -263,17 +258,21 @@ const row: React.CSSProperties = {
 };
 const tableName: React.CSSProperties = {
   fontSize: "0.875rem",
-  color: INK.ink,
+  color: THEME.ink,
   flex: 1,
   whiteSpace: "nowrap",
   overflow: "hidden",
   textOverflow: "ellipsis",
 };
 const rowCount: React.CSSProperties = {
-  fontSize: "0.68rem",
-  color: INK.muted,
+  fontSize: "0.65rem",
+  fontWeight: 600,
+  color: THEME.mid,
+  background: THEME.borderSoft,
+  padding: "2px 6px",
+  borderRadius: 999,
   flexShrink: 0,
-  fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+  marginLeft: "auto",
 };
 const schemaHeader: React.CSSProperties = {
   display: "flex",
@@ -284,7 +283,7 @@ const schemaHeader: React.CSSProperties = {
   fontWeight: 600,
   letterSpacing: "0.06em",
   textTransform: "uppercase",
-  color: INK.muted,
+  color: THEME.muted,
   background: "transparent",
   border: "none",
   cursor: "pointer",
@@ -296,7 +295,7 @@ const inline: React.CSSProperties = {
   gap: 6,
   padding: "8px 10px",
   fontSize: "0.76rem",
-  color: INK.mid,
+  color: THEME.mid,
 };
 const infoBox: React.CSSProperties = {
   display: "flex",
@@ -304,9 +303,9 @@ const infoBox: React.CSSProperties = {
   gap: 6,
   padding: "8px 10px",
   fontSize: "0.74rem",
-  color: INK.mid,
-  background: "#fafaf6",
-  border: `1px dashed ${INK.borderSoft}`,
+  color: THEME.mid,
+  background: THEME.subtleBg,
+  border: `1px dashed ${THEME.borderSoft}`,
   borderRadius: 6,
   lineHeight: 1.4,
 };