feat: Improve layout

Author: thiagomvas

src/LogPort.UI/src/App.tsx

@@ -52,10 +52,7 @@ function App() {
     const handleScroll = () => {
       if (loadingRef.current || !hasMore) return
       const nearBottom = window.innerHeight + window.scrollY >= document.body.offsetHeight - 300
-      if (nearBottom) {
-        console.log('Reached bottom, fetching next page...')
-        fetchLogsPage()
-      }
+      if (nearBottom) fetchLogsPage()
     }
     window.addEventListener('scroll', handleScroll)
     return () => window.removeEventListener('scroll', handleScroll)
@@ -74,12 +71,10 @@ function App() {
 
       const newLogs = await getLogs(params)
       if (!newLogs || newLogs.length === 0) {
-        console.log('No more logs available')
         setHasMore(false)
         return
       }
 
-      console.log(`Fetched ${newLogs.length} logs (page ${pageRef.current})`)
       setLogs(prev => [...prev, ...newLogs])
       setPage(prev => prev + 1)
 
@@ -156,7 +151,6 @@ function App() {
       try {
         const rawLogs: any[] = JSON.parse(event.data)
         const newLogs: LogEntry[] = rawLogs.map(normalizeLog).reverse()
-        console.log(`Received ${newLogs.length} live logs via WebSocket`)
         setLogs(prev => [...newLogs, ...prev])
       } catch (err) {
         console.error('Failed to parse log', err)
@@ -167,11 +161,8 @@ function App() {
   }
 
   return (
-    <div>
-      <div
-        className="filter-bar"
-        style={{ display: 'flex', gap: '8px', marginBottom: '12px', flexWrap: 'wrap' }}
-      >
+    <div className="logs-page">
+      <div className="filter-bar">
         <input
           type="text"
           placeholder="Search logs..."
@@ -224,24 +215,29 @@ function App() {
         </button>
       </div>
 
-      <div style={{ display: 'flex', alignItems: 'center', marginBottom: '8px' }}>
-        <button onClick={fetchLatestLogs} disabled={loading} style={{ marginRight: '12px' }}>
-          {loading ? 'Loading...' : 'Fetch New Logs'}
+      <div className="controls-bar">
+        <button className="btn btn-primary" onClick={fetchLatestLogs} disabled={loading}>
+          {loading ? 'Refreshing...' : '↻ Fetch Latest Logs'}
         </button>
-        <button onClick={enableTailing} disabled={tailing}>
-          {tailing ? 'Tailing Enabled' : 'Enable Tailing'}
+
+        <button
+          className={`btn ${tailing ? 'btn-active' : 'btn-secondary'}`}
+          onClick={enableTailing}
+          disabled={tailing}
+        >
+          {tailing ? '🟢 Live Tailing Active' : '▶ Enable Live Tailing'}
         </button>
-        {lastUpdatedRef.current && (
-          <span style={{ marginLeft: '12px' }}>
-            Last updated: {lastUpdatedRef.current.toLocaleString()}
-          </span>
-        )}
       </div>
 
       <div className="log-container">
         <HistogramChart data={histogram} />
+        {lastUpdatedRef.current && (
+          <span className="last-updated">
+            Last updated: {lastUpdatedRef.current.toLocaleString()}
+          </span>
+        )}
         <LogViewer logs={logs} />
-        {loading && <div style={{ textAlign: 'center', margin: '10px' }}>Loading more logs...</div>}
+        {loading && <div className="loading-text">Loading more logs...</div>}
       </div>
     </div>
   )

src/LogPort.UI/src/components/histogram.tsx

@@ -58,7 +58,7 @@ export const HistogramChart = ({ data }: HistogramChartProps) => {
             x: {
                 type: 'time' as const,
                 time: {
-                    unit: 'minute' as 'minute',
+                    unit: 'hour' as 'hour',
                     tooltipFormat: 'HH:mm',
                     displayFormats: { hour: 'HH:mm' },
                 },

src/LogPort.UI/src/styles/logsPage.css

@@ -1,62 +1,113 @@
-.log-container {
-    border: 2px solid var(--color-surface-alt);
+.logs-page {
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 16px;
+    padding: 16px;
+    color: var(--text-main);
+    background-color: var(--color-background);
+    min-height: 100vh;
 }
 
 .filter-bar {
     display: flex;
     flex-wrap: wrap;
-    gap: 8px;
-    margin-bottom: 12px;
-    align-items: center;
-    justify-content: flex-start;
+    gap: 10px;
+    background-color: var(--color-surface);
+    padding: 12px;
+    border-radius: 10px;
+    box-shadow: var(--shadow-small);
 }
 
-.filter-bar input[type="text"],
+.filter-bar input,
 .filter-bar select {
-    padding: 6px 10px;
-    border-radius: 6px;
-    border: 1px solid var(--border-color);
-    background-color: var(--color-surface);
+    background-color: var(--color-surface-alt);
     color: var(--text-main);
-    font-size: 14px;
-    outline: none;
-    transition: border-color 0.15s ease, background-color 0.15s ease;
-    min-width: 140px;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    padding: 8px;
+    font-size: 0.9rem;
 }
 
-.filter-bar input[type="text"]:focus,
-.filter-bar select:focus {
-    border-color: var(--color-primary-light);
-    background-color: var(--color-surface-alt);
+.filter-bar button {
+    background-color: var(--color-primary);
+    color: var(--text-inverse);
+    border: none;
+    border-radius: 6px;
+    padding: 8px 14px;
+    font-size: 0.9rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: 0.2s ease;
+    box-shadow: var(--shadow-small);
 }
 
-.filter-bar input[type="text"]:hover,
-.filter-bar select:hover {
-    border-color: var(--color-secondary);
+.filter-bar button:hover:not(:disabled) {
+    background-color: var(--color-primary-light);
 }
 
-.filter-bar button {
-    padding: 6px 14px;
+.controls-bar {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 14px;
+    padding: 14px;
+    background-color: var(--color-surface);
+    border-radius: 10px;
+    box-shadow: var(--shadow-medium);
+}
+
+.btn {
     border: none;
-    border-radius: 6px;
-    background-color: var(--color-primary);
-    color: var(--text-main);
-    font-size: 14px;
+    padding: 10px 18px;
+    font-size: 0.95rem;
+    font-weight: 500;
+    border-radius: 8px;
     cursor: pointer;
+    transition: all 0.2s ease;
     box-shadow: var(--shadow-small);
-    transition: background-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
 }
 
-.filter-bar button:hover {
+.btn-primary {
+    background-color: var(--color-primary);
+    color: var(--text-inverse);
+}
+
+.btn-primary:hover:not(:disabled) {
     background-color: var(--color-primary-light);
+    transform: translateY(-1px);
+}
+
+.btn-secondary {
+    background-color: var(--color-secondary-dark);
+    color: var(--text-main);
+}
+
+.btn-secondary:hover:not(:disabled) {
+    background-color: var(--color-secondary);
+}
+
+.btn-active {
+    background-color: var(--accent-success);
+    color: var(--text-inverse);
+    font-weight: 600;
     box-shadow: var(--shadow-medium);
 }
 
-.filter-bar button:disabled {
+.btn:disabled {
     opacity: 0.6;
     cursor: not-allowed;
-    background-color: var(--color-surface-alt);
+}
+
+.loading-text {
+    text-align: center;
+    margin: 10px;
+    color: var(--text-tertiary);
+}
+
+.last-updated {
+    display: block;
+    text-align: right;
+    color: var(--text-tertiary);
+    font-size: var(--font-size-small);
+    margin-bottom: 10px;
 }