refactor: move inline styles to CSS modules

Extract inline fontSize/color styles from LogTab, LayoutShell, UsersTab, GroupsTab, RolesTab, and LevelFilterBar into CSS modules. Follows project convention of CSS modules over inline styles. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-07 11:45:02 +02:00
parent 9cbf647203
commit 6a1d3bb129
10 changed files with 162 additions and 44 deletions
--- a/ui/src/components/ExecutionDiagram/tabs/LogTab.module.css
+++ b/ui/src/components/ExecutionDiagram/tabs/LogTab.module.css
@@ -0,0 +1,97 @@
+/* ==========================================================================
+   LOG TAB — STYLES
+   ========================================================================== */
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.filterBar {
+  padding: 6px 10px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.filterInput {
+  width: 100%;
+  padding: 4px 8px;
+  font-size: 12px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  background: var(--bg-surface);
+  color: var(--text-primary);
+  outline: none;
+  font-family: var(--font-body);
+}
+
+.logList {
+  flex: 1;
+  overflow-y: auto;
+  font-size: 12px;
+  font-family: var(--font-mono);
+}
+
+.logTable {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.logRow {
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.timestampCell {
+  padding: 3px 6px;
+  white-space: nowrap;
+  color: var(--text-muted);
+}
+
+.levelCell {
+  padding: 3px 4px;
+  white-space: nowrap;
+  font-weight: 600;
+  width: 40px;
+}
+
+.levelError {
+  color: var(--error);
+}
+
+.levelWarn {
+  color: var(--warning);
+}
+
+.levelDebug {
+  color: var(--text-muted);
+}
+
+.levelTrace {
+  color: var(--text-faint, var(--text-muted));
+}
+
+.levelDefault {
+  color: var(--text-secondary);
+}
+
+.messageCell {
+  padding: 3px 6px;
+  color: var(--text-primary);
+  word-break: break-word;
+}
+
+.footer {
+  padding: 6px 10px;
+  border-top: 1px solid var(--border-subtle);
+  font-size: 12px;
+  text-align: center;
+}
+
+.openLogsButton {
+  background: none;
+  border: none;
+  color: var(--amber);
+  cursor: pointer;
+  font-size: 12px;
+  font-family: var(--font-body);
+}
--- a/ui/src/components/ExecutionDiagram/tabs/LogTab.tsx
+++ b/ui/src/components/ExecutionDiagram/tabs/LogTab.tsx
@@ -2,7 +2,8 @@ import { useState, useMemo } from 'react';
 import { useNavigate } from 'react-router';
 import { useApplicationLogs } from '../../../api/queries/logs';
 import type { LogEntryResponse } from '../../../api/queries/logs';
-import styles from '../ExecutionDiagram.module.css';
+import logStyles from './LogTab.module.css';
+import diagramStyles from '../ExecutionDiagram.module.css';

 interface LogTabProps {
  applicationId: string;
@@ -10,13 +11,13 @@ interface LogTabProps {
  processorId: string | null;
 }

-function levelColor(level: string): string {
+function levelClass(level: string): string {
  switch (level?.toUpperCase()) {
-    case 'ERROR': return 'var(--error)';
-    case 'WARN': return 'var(--warning)';
-    case 'DEBUG': return 'var(--text-muted)';
-    case 'TRACE': return 'var(--text-faint, var(--text-muted))';
-    default: return 'var(--text-secondary)';
+    case 'ERROR': return logStyles.levelError;
+    case 'WARN': return logStyles.levelWarn;
+    case 'DEBUG': return logStyles.levelDebug;
+    case 'TRACE': return logStyles.levelTrace;
+    default: return logStyles.levelDefault;
  }
 }

@@ -65,48 +66,38 @@ export function LogTab({ applicationId, exchangeId, processorId }: LogTabProps)
  }, [logs, processorId, filter]);

  if (isLoading) {
-    return <div className={styles.emptyState}>Loading logs...</div>;
+    return <div className={diagramStyles.emptyState}>Loading logs...</div>;
  }

  return (
-    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', minHeight: 0 }}>
-      <div style={{ padding: '6px 10px', borderBottom: '1px solid var(--border-subtle)' }}>
+    <div className={logStyles.container}>
+      <div className={logStyles.filterBar}>
        <input
          type="text"
          placeholder="Filter logs..."
          value={filter}
          onChange={(e) => setFilter(e.target.value)}
-          style={{
-            width: '100%',
-            padding: '4px 8px',
-            fontSize: '12px',
-            border: '1px solid var(--border-subtle)',
-            borderRadius: 'var(--radius-sm)',
-            background: 'var(--bg-surface)',
-            color: 'var(--text-primary)',
-            outline: 'none',
-            fontFamily: 'var(--font-body)',
-          }}
+          className={logStyles.filterInput}
        />
      </div>
-      <div style={{ flex: 1, overflowY: 'auto', fontSize: '12px', fontFamily: 'var(--font-mono)' }}>
+      <div className={logStyles.logList}>
        {entries.length === 0 ? (
-          <div className={styles.emptyState}>
+          <div className={diagramStyles.emptyState}>
            {processorId ? 'No logs for this processor' : 'No logs available'}
          </div>
        ) : (
          <>
-            <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+            <table className={logStyles.logTable}>
              <tbody>
                {entries.map((entry, i) => (
-                  <tr key={i} style={{ borderBottom: '1px solid var(--border-subtle)' }}>
-                    <td style={{ padding: '3px 6px', whiteSpace: 'nowrap', color: 'var(--text-muted)' }}>
+                  <tr key={i} className={logStyles.logRow}>
+                    <td className={logStyles.timestampCell}>
                      {formatTime(entry.timestamp)}
                    </td>
-                    <td style={{ padding: '3px 4px', whiteSpace: 'nowrap', fontWeight: 600, color: levelColor(entry.level), width: '40px' }}>
+                    <td className={`${logStyles.levelCell} ${levelClass(entry.level)}`}>
                      {entry.level}
                    </td>
-                    <td style={{ padding: '3px 6px', color: 'var(--text-primary)', wordBreak: 'break-word' }}>
+                    <td className={logStyles.messageCell}>
                      {entry.message}
                    </td>
                  </tr>
@@ -114,10 +105,10 @@ export function LogTab({ applicationId, exchangeId, processorId }: LogTabProps)
              </tbody>
            </table>
            {exchangeId && (
-              <div style={{ padding: '6px 10px', borderTop: '1px solid var(--border-subtle)', fontSize: '12px', textAlign: 'center' }}>
+              <div className={logStyles.footer}>
                <button
                  onClick={() => navigate(`/logs/${applicationId}?exchangeId=${exchangeId}`)}
-                  style={{ background: 'none', border: 'none', color: 'var(--amber)', cursor: 'pointer', fontSize: '12px', fontFamily: 'var(--font-body)' }}
+                  className={logStyles.openLogsButton}
                >
                  Open in Logs tab {'\u2192'}
                </button>
--- a/ui/src/components/LayoutShell.module.css
+++ b/ui/src/components/LayoutShell.module.css
@@ -0,0 +1,16 @@
+.starredItem {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 12px;
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--sidebar-text);
+  border-radius: 4px;
+}
+
+.starredParentApp {
+  color: var(--sidebar-muted);
+  margin-left: 4px;
+  font-size: 12px;
+}
--- a/ui/src/components/LayoutShell.tsx
+++ b/ui/src/components/LayoutShell.tsx
@@ -18,6 +18,7 @@ import {
 import type { SearchResult, SidebarTreeNode } from '@cameleer/design-system';
 import sidebarLogo from '@cameleer/design-system/assets/cameleer3-logo.svg';
 import { Box, Settings, FileText, ChevronRight, Square, Pause, Star, X } from 'lucide-react';
+import css from './LayoutShell.module.css';
 import { useQueryClient } from '@tanstack/react-query';
 import { useRouteCatalog } from '../api/queries/catalog';
 import { useAgents } from '../api/queries/agents';
@@ -236,7 +237,7 @@ function StarredList({ items, onNavigate, onRemove }: { items: StarredItem[]; on
      {items.map((item) => (
        <div
          key={item.starKey}
-          style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '4px 12px', cursor: 'pointer', fontSize: 12, color: 'var(--sidebar-text)', borderRadius: 4 }}
+          className={css.starredItem}
          onClick={() => onNavigate(item.path)}
          role="button"
          tabIndex={0}
@@ -245,7 +246,7 @@ function StarredList({ items, onNavigate, onRemove }: { items: StarredItem[]; on
          {item.icon && <span style={{ display: 'flex', alignItems: 'center', color: 'var(--sidebar-muted)' }}>{item.icon}</span>}
          <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
            {item.label}
-            {item.parentApp && <span style={{ color: 'var(--sidebar-muted)', marginLeft: 4, fontSize: 12 }}>{item.parentApp}</span>}
+            {item.parentApp && <span className={css.starredParentApp}>{item.parentApp}</span>}
          </span>
          <button
            style={{ background: 'none', border: 'none', padding: 2, cursor: 'pointer', color: 'var(--sidebar-muted)', display: 'flex', alignItems: 'center', opacity: 0.6 }}
--- a/ui/src/pages/Admin/GroupsTab.tsx
+++ b/ui/src/pages/Admin/GroupsTab.tsx
@@ -239,7 +239,7 @@ export default function GroupsTab({ highlightId, onHighlightConsumed }: { highli
                  onChange={(e) => setNewName(e.target.value)}
                />
                {duplicateGroupName && (
-                  <span style={{ color: 'var(--error)', fontSize: 12 }}>
+                  <span className={styles.errorText}>
                    Group name already exists
                  </span>
                )}
--- a/ui/src/pages/Admin/RolesTab.tsx
+++ b/ui/src/pages/Admin/RolesTab.tsx
@@ -130,7 +130,7 @@ export default function RolesTab({ highlightId, onHighlightConsumed }: { highlig
                  onChange={(e) => setNewName(e.target.value)}
                />
                {duplicateRoleName && (
-                  <span style={{ color: 'var(--error)', fontSize: 12 }}>
+                  <span className={styles.errorText}>
                    Role name already exists
                  </span>
                )}
--- a/ui/src/pages/Admin/UserManagement.module.css
+++ b/ui/src/pages/Admin/UserManagement.module.css
@@ -151,3 +151,8 @@
 .resetInput {
  width: 200px;
 }
+
+.errorText {
+  color: var(--error);
+  font-size: 12px;
+}
--- a/ui/src/pages/Admin/UsersTab.tsx
+++ b/ui/src/pages/Admin/UsersTab.tsx
@@ -228,7 +228,7 @@ export default function UsersTab({ highlightId, onHighlightConsumed }: { highlig
                  />
                </div>
                {duplicateUsername && (
-                  <span style={{ color: 'var(--error)', fontSize: 12 }}>
+                  <span className={styles.errorText}>
                    Username already exists
                  </span>
                )}
--- a/ui/src/pages/LogsTab/LevelFilterBar.module.css
+++ b/ui/src/pages/LogsTab/LevelFilterBar.module.css
@@ -0,0 +1,14 @@
+.wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.clearButton {
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 12px;
+  font-family: var(--font-body);
+}
--- a/ui/src/pages/LogsTab/LevelFilterBar.tsx
+++ b/ui/src/pages/LogsTab/LevelFilterBar.tsx
@@ -1,5 +1,6 @@
 import { ButtonGroup } from '@cameleer/design-system';
 import type { ButtonGroupItem } from '@cameleer/design-system';
+import styles from './LevelFilterBar.module.css';

 function formatCount(n: number): string {
  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
@@ -28,19 +29,12 @@ export function LevelFilterBar({ activeLevels, onChange, levelCounts }: LevelFil
  }));

  return (
-    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+    <div className={styles.wrapper}>
      <ButtonGroup items={items} value={activeLevels} onChange={onChange} />
      {activeLevels.size > 0 && (
        <button
          onClick={() => onChange(new Set())}
-          style={{
-            background: 'none',
-            border: 'none',
-            color: 'var(--text-muted)',
-            cursor: 'pointer',
-            fontSize: '12px',
-            fontFamily: 'var(--font-body)',
-          }}
+          className={styles.clearButton}
        >
          Clear
        </button>