ui: style tabs

also rename join --> useDark; clean up extraneous logging statements

pkg/interface/webterm/App.tsx

@@ -1,13 +1,12 @@
-/* eslint-disable max-lines */
 import React, {
   useCallback, useEffect
 } from 'react';
 
-import useTermState, { Sessions } from './state';
-import { useDark } from './join';
+import useTermState from './state';
+import { useDark } from './lib/useDark';
 import api from './api';
 
-import { Reset, _dark, _light } from '@tlon/indigo-react';
+import { _dark, _light } from '@tlon/indigo-react';
 
 import 'xterm/css/xterm.css';
 
@@ -83,11 +82,10 @@ export default function TermApp(props: TermAppProps) {
   return (
     <>
       <ThemeProvider theme={dark ? _dark : _light}>
-        <Reset />
         <Tabs />
         <div className="buffer-container">
           {names.map(name => {
-            return <Buffer name={name} selected={name === selected} />;
+            return <Buffer name={name} selected={name === selected} dark={dark}/>;
           })}
         </div>
       </ThemeProvider>

pkg/interface/webterm/Buffer.tsx

@@ -12,8 +12,7 @@ import useTermState from './state';
 import React from 'react';
 import { Box, Col } from '@tlon/indigo-react';
 import { makeTheme } from './lib/theme';
-import { useDark } from './join';
-import { showBlit, csi, showSlog } from './lib/blit';
+import { showBlit, csi } from './lib/blit';
 
 const termConfig: ITerminalOptions = {
   logLevel: 'warn',
@@ -138,11 +137,11 @@ const onInput = (name: string, session: Session, e: string) => {
 interface BufferProps {
   name: string,
   selected: boolean,
+  dark: boolean,
 }
 
-export default function Buffer({ name, selected }: BufferProps) {
+export default function Buffer({ name, selected, dark }: BufferProps) {
   const container = useRef<HTMLDivElement>(null);
-  const dark = useDark();
 
   const session: Session = useTermState(s => s.sessions[name]);
 
@@ -210,10 +209,6 @@ export default function Buffer({ name, selected }: BufferProps) {
     let newContainer = containerRef || container.current;
     if(session && newContainer) {
       container.current = newContainer;
-      console.log('newcont', newContainer);
-      // session.term.open(newContainer);
-    } else {
-      console.log('kaboom', session);
     }
   }, [session]);
 

pkg/interface/webterm/Tab.tsx

@@ -44,7 +44,7 @@ export const Tab = ( { session, name }: TabProps ) => {
   }, [session]);
 
   return (
-    <div className={'tab ' + isSelected ? 'selected' : ''}>
+    <div className={'tab ' + (isSelected ? 'selected' : '')}>
       <a className='session-name' onClick={onClick}>
         {session?.hasBell ? '🔔 ' : ''}
         {name === DEFAULT_SESSION ? 'default' : name}

pkg/interface/webterm/Tabs.tsx

@@ -29,7 +29,7 @@ export const Tabs = () => {
           <Tab session={sessions[n]} name={n} key={i} />
         );
       })}
-      <button onClick={onAddClick}>+</button>
+      <button className="tab" onClick={onAddClick}>+</button>
     </div>
   );
 };

pkg/interface/webterm/index.html

@@ -29,32 +29,38 @@
       }
 
       .buffer-container {
-        height: calc(100% - 33px);
+        height: calc(100% - 40px);
       }
 
       div.tabs {
-        height: 33px;
+        height: 40px;
         display: flex;
         flex-flow: row nowrap;
         justify-content: flex-start;
-        padding: 5px 0;
+        padding: 5px 5px 0 5px;
         border-bottom: 1px solid black;
+        background-color: white;
       }
 
       div.tabs > * {
         margin-left: 5px;
         margin-right: 5px;
         border: solid 1px black;
-        padding: 7px;
+        padding: 10px;
         cursor: pointer;
       }
 
-      div.tab {
-        text-align: center;
-        /* display: flex;
-        flex-flow: row nowrap;
-        align-items: center;
-        justify-content: space-between; */
+      div.tab, button.tab {
+        margin-bottom: -1px; /** To overlay the selected tab on the tabs container bottom border */
+        border-top-left-radius: 5px;
+        border-top-right-radius: 5px;
+        font-family: monospace;
+        font-size: 14px;
+        line-height: 18px;
+      }
+
+      div.tabs > div.selected {
+        border-bottom: white solid 1px;
       }
 
       div.tabs > div.selected > a.session-name {
@@ -65,6 +71,23 @@
         padding: 5px;
       }
 
+      @media (prefers-color-scheme: dark) {
+        div.tabs {
+          background-color: rgb(26, 26, 26);
+          color: rgba(255, 255, 255, 0.9);
+          border-bottom-color: rgba(255, 255, 255, 0.9);
+        }
+
+        div.tab, button.tab {
+          background-color: rgb(26, 26, 26);
+          color: rgba(255, 255, 255, 0.9);
+          border-color: rgba(255, 255, 255, 0.9);
+        }
+
+        div.tabs > div.selected {
+          border-bottom: black solid 1px;
+        }  
+      }
     </style>
   </head>
   <body>

pkg/interface/webterm/lib/useDark.ts

@@ -1,6 +1,5 @@
 import { useEffect, useState } from 'react';
-import { useTheme } from './settings';
-import useTermState from './state';
+import useTermState from '../state';
 
 export function useDark() {
   const [osDark, setOsDark] = useState(false);
@@ -11,12 +10,11 @@ export function useDark() {
       setOsDark(e.matches);
     };
     setOsDark(themeWatcher.matches);
-    themeWatcher.addListener(update);
+    themeWatcher.addEventListener('change', update);
 
     return () => {
-      themeWatcher.removeListener(update);
+      themeWatcher.removeEventListener('change', update);
     }
-
   }, []);
 
   const theme = useTermState(s => s.theme);