make columns more consistent

Author: sawka

frontend/app/view/processviewer/processviewer.tsx

@@ -607,9 +607,9 @@ const ProcessRow = React.memo(function ProcessRow({
     onSelect: (pid: number) => void;
     onContextMenu: (pid: number, e: React.MouseEvent) => void;
 }) {
+    const cols = getColumns(platform);
+    const visibleKeys = new Set(cols.map((c) => c.key));
     const gridTemplate = getGridTemplate(platform);
-    const showStatus = platform !== "windows" && platform !== "darwin";
-    const showThreads = platform !== "windows";
     if (proc.gone) {
         return (
             <div
@@ -622,9 +622,9 @@ const ProcessRow = React.memo(function ProcessRow({
                     {proc.pid}
                 </div>
                 <div className="px-2 flex items-center truncate text-muted italic">(gone)</div>
-                {showStatus && <div className="px-2 flex items-center truncate" />}
-                <div className="px-2 flex items-center truncate" />
-                {showThreads && <div className="px-2 flex items-center truncate" />}
+                {visibleKeys.has("status") && <div className="px-2 flex items-center truncate" />}
+                {visibleKeys.has("user") && <div className="px-2 flex items-center truncate" />}
+                {visibleKeys.has("threads") && <div className="px-2 flex items-center truncate" />}
                 <div className="px-2 flex items-center truncate" />
                 <div className="px-2 flex items-center truncate" />
             </div>
@@ -641,11 +641,13 @@ const ProcessRow = React.memo(function ProcessRow({
                 {proc.pid}
             </div>
             <div className="px-2 flex items-center truncate">{proc.command}</div>
-            {showStatus && (
+            {visibleKeys.has("status") && (
                 <div className="px-2 flex items-center truncate text-secondary text-[11px]">{proc.status}</div>
             )}
-            <div className="px-2 flex items-center truncate text-secondary">{proc.user}</div>
-            {showThreads && (
+            {visibleKeys.has("user") && (
+                <div className="px-2 flex items-center truncate text-secondary">{proc.user}</div>
+            )}
+            {visibleKeys.has("threads") && (
                 <div className="px-2 flex items-center truncate justify-end text-secondary font-mono text-[11px]">
                     {proc.numthreads === -1 ? "-" : proc.numthreads >= 1 ? proc.numthreads : ""}
                 </div>