feat(widgets): voeg kleurbadges toe aan SystemdWidget en GitWidget

- SystemdWidget: groen als N=M healthy, oranje als 0<N<M, rood als N=0
- GitWidget: groen als 0 dirty repos, oranje als >0; toon K/M formaat

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/_components/GitWidget.tsx

@@ -58,10 +58,15 @@ export default function GitWidget({ initial, repos }: { initial: GitInitial; rep
       ) : error ? (
         <p className="mt-2 text-sm text-destructive truncate">{error}</p>
       ) : data ? (
-        <p className="mt-2 text-2xl font-semibold">
-          {data.dirty}
+        <p
+          className={[
+            'mt-2 text-2xl font-semibold',
+            data.dirty === 0 ? 'text-green-600' : 'text-orange-500',
+          ].join(' ')}
+        >
+          {data.dirty}/{data.total}
           <span className="text-sm font-normal text-muted-foreground">
-            {' '}repo{data.dirty !== 1 ? 's' : ''} dirty
+            {' '}repos uncommitted
           </span>
         </p>
       ) : (

app/_components/SystemdWidget.tsx

@@ -58,7 +58,16 @@ export default function SystemdWidget({ initial, units }: { initial: SystemdInit
       ) : error ? (
         <p className="mt-2 text-sm text-destructive truncate">{error}</p>
       ) : data ? (
-        <p className="mt-2 text-2xl font-semibold">
+        <p
+          className={[
+            'mt-2 text-2xl font-semibold',
+            data.total > 0 && data.healthy === data.total
+              ? 'text-green-600'
+              : data.healthy > 0
+                ? 'text-orange-500'
+                : 'text-destructive',
+          ].join(' ')}
+        >
           {data.healthy}/{data.total}
           <span className="text-sm font-normal text-muted-foreground"> healthy</span>
         </p>