fix(databases): format row counts as pills on the right side of the tree

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 && (
+              {t.approxRows != null && t.approxRows >= 0 && (
-                <span style={rowCount}>~{formatCount(t.approxRows)}</span>
+                <span style={rowCount}>{formatCount(t.approxRows)}</span>
               )}
             </button>
           </li>
@@ -227,12 +227,7 @@ function formatCount(n: number) {
 
 // ──────────────────────────────────────────────────
 
-const INK = {
+// Clean up unused styles
-  ink: "#1a1a1a",
-  mid: "#5f5e5a",
-  muted: "#a09a90",
-  borderSoft: "#efebe1",
-} as const;
 
 const treeWrap: React.CSSProperties = {
   display: "flex",
@@ -251,8 +246,8 @@ const row: React.CSSProperties = {
   display: "flex",
   alignItems: "center",
   gap: 8,
-  width: "fit-content",
+  width: "100%",
-  padding: "4px 8px 4px 6px",
+  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",
+  fontSize: "0.65rem",
-  color: INK.muted,
+  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,
+  color: THEME.mid,
-  background: "#fafaf6",
+  background: THEME.subtleBg,
-  border: `1px dashed ${INK.borderSoft}`,
+  border: `1px dashed ${THEME.borderSoft}`,
   borderRadius: 6,
   lineHeight: 1.4,
 };