Split Correlations and Detail Panes

apps/zui/pages/detail.tsx

@@ -8,7 +8,7 @@ import initialize from "src/js/initializers/initialize"
 import TabHistories from "src/js/state/TabHistories"
 import Tabs from "src/js/state/Tabs"
 import {getPersistedWindowState} from "src/js/state/stores/get-persistable"
-import {DetailsWindow} from "src/views/details-window"
+import DetailPane from "src/views/detail-pane/Pane"
 
 export default function DetailPage() {
   const [app, setApp] = useState(null)
@@ -34,7 +34,9 @@ export default function DetailPage() {
   return (
     <AppProvider store={app.store} api={app.api}>
       <AppWindowRouter>
-        <DetailsWindow />
+        <div className="scroll-y">
+          <DetailPane />
+        </div>
         <Modals />
         <Tooltip />
       </AppWindowRouter>

apps/zui/src/components/data.tsx

@@ -8,7 +8,7 @@ export const Data = styled.dl`
   position: relative;
   margin: 0;
   cursor: default;
-  min-height: 26px;
+  line-height: 1.7;
 `
 
 export const Name = styled.dt`

apps/zui/src/components/section-tabs.tsx

@@ -1,96 +1,30 @@
-import React, {useLayoutEffect, useRef, useState} from "react"
+import React, {useRef} from "react"
 import {MenuItem} from "src/core/menu"
-import styled from "styled-components"
 import {MoreItemsButton} from "./more-items-button"
 import {useResponsiveMenu} from "src/js/components/hooks/use-responsive-menu"
+import classNames from "classnames"
 
-const BG = styled.div`
-  display: flex;
-  min-width: 0;
-  align-items: center;
-  height: 100%;
-  position: relative;
-  overflow: hidden;
-`
-
-const Nav = styled.nav`
-  display: flex;
-  align-items: center;
-  min-width: 0;
-  flex: 1;
-
-  button {
-    background: none;
-    border: none;
-
-    display: flex;
-    align-items: center;
-
-    border-radius: 6px;
-    padding: 6px 6px;
-
-    text-transform: uppercase;
-    font-weight: 500;
-    font-size: 12px;
-    opacity: 0.5;
-
-    &:hover:not([aria-pressed="true"]) {
-      opacity: 0.7;
-      transition: opacity 0.2s;
-      background: var(--sidebar-item-hover);
-    }
-
-    &:active:not([aria-pressed="true"]) {
-      opacity: 0.8;
-      background: var(--sidebar-item-active);
-      box-shadow: var(--sidebar-item-active-shadow);
-    }
-
-    &[aria-pressed="true"] {
-      opacity: 1;
-    }
-
-    span {
-      padding: 0 2px;
-      display: block;
-    }
-  }
-`
-
-const Underline = styled.div`
-  height: 2px;
-  background: var(--primary-color);
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  border-radius: 1px;
-`
-
-export function SectionTabs(props: {options: MenuItem[]}) {
+export function SectionTabs(props: {
+  options: MenuItem[]
+  className?: string
+  style?: any
+}) {
   const changeCount = useRef(0)
-  const [pos, setPos] = useState({x: 0, width: 10})
-  const pressedIndex = props.options.findIndex((opt) => opt.checked)
   const menu = useResponsiveMenu(props.options)
 
-  useLayoutEffect(() => {
-    const el = menu.containerRef.current
-    if (el) {
-      const parent = el.getBoundingClientRect()
-      const pressed = el.querySelector(`[aria-pressed="true"] span`)
-      if (pressed) {
-        const button = pressed.getBoundingClientRect()
-        const x = button.x - parent.x
-        const width = button.width
-        setPos({x, width})
-      }
-    }
-  }, [pressedIndex, menu])
-
   return (
-    <BG ref={menu.containerRef}>
-      <Nav>
+    <div
+      ref={menu.containerRef}
+      style={props.style}
+      className={classNames(
+        props.className,
+        "flex items-center h-full relative w-full overflow-hidden"
+      )}
+    >
+      <nav className="flex h-full items-center">
         {menu.items.map((item, index) => (
           <button
+            className="section-tab-button h-full"
             key={item.id ?? index}
             onClick={() => {
               changeCount.current += 1
@@ -109,16 +43,7 @@ export function SectionTabs(props: {options: MenuItem[]}) {
         {menu.hasHiddenItems ? (
           <MoreItemsButton items={menu.hiddenItems} ref={menu.moreRef} />
         ) : null}
-      </Nav>
-      <Underline
-        style={{
-          transform: `translateX(${pos.x}px)`,
-          width: pos.width,
-          transition:
-            changeCount.current === 0 ? "none" : "width 200ms, transform 200ms",
-          visibility: menu.isHidden(pressedIndex) ? "hidden" : "visible",
-        }}
-      />
-    </BG>
+      </nav>
+    </div>
   )
 }

apps/zui/src/css/_conn-versation.scss

@@ -1,7 +1,9 @@
 .conn-versation {
   margin-bottom: $space-s;
   display: flex;
-  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--space-s);
+  justify-content: flex-start;
   user-select: none;
 
   td,
@@ -25,15 +27,13 @@
     margin: 0;
     color: white;
     background: var(--primary-color);
-    font-size: 12px;
     text-align: center;
-    line-height: 20px;
     font-family: var(--mono-font);
     user-select: all;
   }
 
   .ip.small {
-    font-size: 8px;
+    font-size: var(--step--2);
   }
 
   .port {
@@ -84,11 +84,11 @@
   }
 
   .history-packet.arrow-right {
-    padding-right: $space-s*0.5;
+    padding-right: $space-s * 0.5;
   }
 
   .history-packet.arrow-left {
-    padding-left: $space-s*0.5;
+    padding-left: $space-s * 0.5;
 
     .triangle {
       order: 1;

apps/zui/src/css/_global.scss

@@ -75,10 +75,6 @@ button {
   background-color: var(--emphasis-bg-less);
 }
 
-dt {
-  font-weight: bold;
-}
-
 dd {
   font-family: var(--mono-font);
 }

apps/zui/src/css/_hash-correlation.scss

@@ -3,6 +3,7 @@
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
+    flex-wrap: wrap;
     & > * {
       flex-basis: 45%;
     }

apps/zui/src/css/_log-detail-window.scss

@@ -2,25 +2,3 @@
   height: 100%;
   width: 100%;
 }
-
-.log-detail-window {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  flex-direction: column;
-
-  .pane-header {
-    background: var(--chrome-color);
-    border-bottom: 1px solid #dbdbdb;
-  }
-
-  .detail-pane-content {
-    display: flex;
-    justify-content: space-between;
-
-    .column {
-      width: 50%;
-      margin: 12px;
-    }
-  }
-}

apps/zui/src/css/_tab.scss

@@ -31,10 +31,7 @@
   // Title
   .title {
     font-family: system-ui;
-    font-size: 14px;
-    line-height: 16px;
     margin: 0;
-    font-weight: 400;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -51,7 +48,7 @@
     }
 
     .close-button {
-      opacity: 1
+      opacity: 1;
     }
 
     .tab-content {

apps/zui/src/css/_table.scss

@@ -18,8 +18,8 @@
 
   th {
     text-align: left;
-    font-size: 9px;
     font-weight: bold;
+    font-size: var(--step--1);
   }
 
   td {
@@ -38,7 +38,6 @@
 }
 
 .vertical-table {
-
   th,
   td {
     word-break: break-word;

apps/zui/src/css/_utilities.scss

@@ -10,6 +10,10 @@
   justify-content: space-between;
 }
 
+.justify-center {
+  justify-content: center;
+}
+
 .align\:center {
   align-items: center;
 }
@@ -218,3 +222,27 @@
 .flex-nowrap {
   flex-wrap: nowrap;
 }
+
+.relative {
+  position: relative;
+}
+
+.border-b-solid {
+  border-bottom-style: solid;
+}
+
+.border-more {
+  --border-color: var(--border-color-more);
+}
+
+.h-toolbar {
+  height: var(--toolbar-height);
+}
+
+.w-full {
+  width: 100%;
+}
+
+.h-full {
+  height: 100%;
+}

apps/zui/src/css/blocks/_section-tabs.scss

@@ -0,0 +1,32 @@
+.section-tab-button {
+  background: none;
+  opacity: 0.75;
+  padding: 0;
+  border-radius: 0;
+  border-top: 2px solid transparent;
+  border-bottom: 2px solid transparent;
+
+  &[aria-pressed="true"] {
+    opacity: 1;
+    color: var(--primary-color-darker);
+    border-bottom: 2px solid var(--primary-color);
+  }
+
+  &:hover {
+    background: var(--emphasis-bg-less);
+  }
+
+  span {
+    padding: 0 var(--half-gutter);
+    display: block;
+  }
+}
+
+.section-tab-button-underline {
+  height: 2px;
+  border-radius: 2px;
+  background: var(--primary-color);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}

apps/zui/src/css/blocks/_vertical-rule.scss

@@ -0,0 +1,4 @@
+.vertical-rule {
+  width: 0px;
+  border-left-style: solid;
+}

apps/zui/src/css/compositions/_box.scss

@@ -1,3 +1,19 @@
 .box {
   padding: var(--gutter-space);
 }
+
+.gutter {
+  padding-inline: var(--gutter-space);
+}
+
+.gutter-block {
+  padding-block: var(--gutter-space);
+}
+
+.half-gutter {
+  --gutter-space: var(--half-gutter);
+}
+
+.gutter-inline-end {
+  padding-inline-end: var(--gutter);
+}

apps/zui/src/css/compositions/_stack.scss

@@ -0,0 +1,4 @@
+.stack {
+  display: flex;
+  flex-direction: column;
+}