Session Flow

src/app/core/components/switch-button.tsx

@@ -0,0 +1,108 @@
+import React from "react"
+import styled from "styled-components"
+
+const Underline = styled.div`
+  position: absolute;
+  bottom: 0;
+  left: -4px;
+  right: -4px;
+  height: 2px;
+  background: var(--primary-color);
+  border-radius: 1px;
+  opacity: 0;
+`
+
+const Button = styled.button`
+  background-color: var(--button-background);
+  border: none;
+  font-size: 11px;
+  font-weight: 500;
+  text-transform: uppercase;
+  min-width: 60px;
+  padding: 0 16px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  span {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    opacity: 0.5;
+    position: relative;
+  }
+
+  &[aria-pressed="true"] {
+    span {
+      opacity: 1;
+    }
+    ${Underline} {
+      opacity: 1;
+    }
+  }
+
+  &:hover:not([aria-pressed="true"]) {
+    background: var(--button-background-hover);
+    span {
+      opacity: 0.7;
+    }
+  }
+
+  &:active:not([aria-pressed="true"]) {
+    background: var(--button-background-active);
+  }
+
+  &:first-child {
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: 0px;
+  }
+  &:last-child {
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+  }
+`
+
+const BG = styled.div<{minWidth: number}>`
+  user-select: none;
+  border-radius: 6px;
+  height: 22px;
+  display: flex;
+  gap: 1px;
+
+  ${Button} {
+    min-width: ${(props) => props.minWidth}px;
+  }
+`
+
+type Option = {
+  label: string
+  click: React.MouseEventHandler
+  active: boolean
+}
+
+function Option(props: Option) {
+  return (
+    <Button onClick={props.click} aria-pressed={props.active}>
+      <span>
+        {props.label}
+        <Underline />
+      </span>
+    </Button>
+  )
+}
+
+type Props = {
+  options: Option[]
+  minWidth?: number
+}
+
+export function SwitchButton(props: Props) {
+  return (
+    <BG minWidth={props.minWidth || 60}>
+      {props.options.map((props, i) => (
+        <Option key={i} {...props} />
+      ))}
+    </BG>
+  )
+}

src/app/core/hooks/use-auto-select.ts

@@ -0,0 +1,9 @@
+import {RefObject, useLayoutEffect} from "react"
+
+export function useAutoSelect(ref: RefObject<HTMLInputElement>) {
+  useLayoutEffect(() => {
+    if (ref.current) {
+      ref.current.select()
+    }
+  }, [])
+}

src/app/core/hooks/use-select.ts

@@ -1,5 +1,5 @@
-import {useCallback} from "react"
 import {useStore} from "react-redux"
+import {State} from "src/js/state/types"
 
 /**
  * This is useful when you need to select from the state
@@ -8,10 +8,9 @@ import {useStore} from "react-redux"
  * needs to grab it once in the event handler.
  */
 export default function useSelect() {
-  const store = useStore()
-  const select = useCallback(
-    (selector: any) => selector(store.getState()),
-    [store]
-  )
+  const store = useStore<State>()
+  function select<T extends (...args: any) => any>(selector: T): ReturnType<T> {
+    return selector(store.getState())
+  }
   return select
 }

src/app/core/icons/check.tsx

@@ -0,0 +1,12 @@
+import React from "react"
+
+export default function Check(props: any) {
+  return (
+    <svg {...props} width="22" height="22" viewBox="0 0 22 22">
+      <path
+        d="M6.12110922,16 C6.60101868,16 6.96321449,15.7971182 7.22580645,15.4005764 L15.737408,1.88126801 C15.9275608,1.58616715 16,1.32795389 16,1.07896254 C16,0.442651297 15.565365,0 14.9315224,0 C14.4878325,0 14.2252405,0.156772334 13.9535937,0.590201729 L6.08488964,13.3164265 L2.02829655,8.01383285 C1.76570458,7.65417867 1.49405772,7.50662824 1.09564233,7.50662824 C0.46179966,7.50662824 0,7.96772334 0,8.60403458 C0,8.88069164 0.0996038483,9.1481268 0.325976231,9.43400576 L5.016412,15.4097983 C5.33333333,15.8063401 5.66836446,16 6.12110922,16 Z"
+        transform="translate(3 3)"
+      />
+    </svg>
+  )
+}

src/app/core/icons/chevron-down.tsx

@@ -1,15 +1,8 @@
 import React from "react"
 export default function ChevronDown(props: any) {
   return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="22"
-      height="22"
-      viewBox="0 0 22 22"
-      {...props}
-    >
+    <svg width="22" height="22" viewBox="0 0 22 22" {...props}>
       <path
-        fill="#717375"
         fillRule="evenodd"
         d="M11.0003107,15 C10.9062671,15 10.8188175,14.9808408 10.7379621,14.9425224 C10.6571066,14.9042039 10.5815334,14.843099 10.5112423,14.7592075 L5.6880873,9.25177369 C5.56269577,9.11162011 5.5,8.9402484 5.5,8.73765856 C5.5,8.59789086 5.52824071,8.47270963 5.58472214,8.36211487 C5.64120357,8.25152011 5.71972864,8.16351894 5.82029735,8.09811137 C5.92086605,8.03270379 6.03163663,8 6.15260908,8 C6.33075344,8 6.48687143,8.07297093 6.62096303,8.2189128 L11.0009322,13.2299436 L15.3802798,8.2189128 C15.5135429,8.07297093 15.6692466,8 15.8473909,8 C15.9723682,8 16.0841227,8.03270379 16.1826545,8.09811137 C16.2811862,8.16351894 16.3587101,8.25152011 16.4152261,8.36211487 C16.471742,8.47270963 16.5,8.59789086 16.5,8.73765856 C16.5,8.9402484 16.4373042,9.11162011 16.3119127,9.25177369 L11.4893791,14.7592075 C11.4190881,14.8426359 11.3436184,14.9036251 11.2629701,14.9421751 C11.1823218,14.980725 11.0947687,15 11.0003107,15 Z"
       />

src/app/core/icons/detach.tsx

@@ -0,0 +1,11 @@
+import React from "react"
+export default function Detach(props: any) {
+  return (
+    <svg {...props} width="22" height="22" viewBox="0 0 22 22">
+      <path
+        d="M7.30423461,7.49230514 L11.6042781,3.02048844 C13.1760056,1.45104172 15.3987445,1.45104172 16.970472,3.02048844 C18.5514997,4.6085085 18.5421995,6.81873525 16.9797721,8.37889531 L15.3801442,9.97620203 C15.6777494,10.6541287 15.770751,11.4806421 15.6126482,12.1957154 L18.2817949,9.53972868 C20.569635,7.26449527 20.5789351,4.03273515 18.2724948,1.72964173 C15.9660544,-0.582738355 12.7295978,-0.564165021 10.4510579,1.7110684 L6.00218043,6.34075843 L7.30423461,7.49230514 Z M12.931721,12.3753862 L8.38642176,16.978349 C6.81469426,18.5477957 4.60125552,18.5477957 3.02022785,16.978349 C1.43920019,15.3996156 1.44850035,13.1801022 3.02022785,11.6199421 L4.61055568,10.0226354 C4.32225064,9.34470868 4.21994885,8.52748198 4.37805162,7.80312195 L1.71820507,10.4591087 C-0.569634969,12.7343421 -0.578935131,15.9753889 1.72750523,18.2784823 C4.03394559,20.5815758 7.27040223,20.5630024 9.54894211,18.287769 L14.2337438,13.5362195 L12.931721,12.3753862 Z M1.81531438,2.60363927 C1.99282543,2.42612823 2.28062769,2.42612823 2.45813873,2.60363927 L4.70802394,4.85352448 L4.70802394,4.85352448 L4.0651996,5.49634883 L1.81531438,3.24646361 C1.63780334,3.06895257 1.63780334,2.78115031 1.81531438,2.60363927 Z M1.3447343,5.99000526 C1.40970785,5.74752067 1.65895192,5.60361954 1.90143652,5.66859309 L3.2186081,6.02152815 L3.2186081,6.02152815 L2.98331806,6.89964254 L1.66614647,6.54670748 C1.42366188,6.48173393 1.27976075,6.23248986 1.3447343,5.99000526 Z M5.20168038,2.13305919 C5.44416497,2.06808563 5.69340904,2.21198677 5.7583826,2.45447136 L6.11131766,3.77164294 L6.11131766,3.77164294 L5.23320327,4.00693298 L4.88026821,2.6897614 C4.81529466,2.44727681 4.95919579,2.19803274 5.20168038,2.13305919 Z M18.5745176,17.2715429 C18.3970066,17.449054 18.1092043,17.449054 17.9316932,17.2715429 L15.681808,15.0216577 L15.681808,15.0216577 L16.3246324,14.3788334 L18.5745176,16.6287186 C18.7520286,16.8062296 18.7520286,17.0940319 18.5745176,17.2715429 Z M19.0450977,13.8851769 C18.9801241,14.1276615 18.7308801,14.2715626 18.4883955,14.2065891 L17.1712239,13.853654 L17.1712239,13.853654 L17.4065139,12.9755396 L18.7236855,13.3284747 C18.9661701,13.3934482 19.1100712,13.6426923 19.0450977,13.8851769 Z M15.1881516,17.742123 C14.945667,17.8070965 14.6964229,17.6631954 14.6314494,17.4207108 L14.2785143,16.1035392 L14.2785143,16.1035392 L15.1566287,15.8682492 L15.5095638,17.1854208 C15.5745373,17.4279054 15.4306362,17.6771494 15.1881516,17.742123 Z"
+        transform="translate(1 1)"
+      />
+    </svg>
+  )
+}

src/app/core/icons/index.ts

@@ -30,9 +30,18 @@ import lock from "./lock"
 import close from "./close"
 import plus from "./plus"
 import zui from "./zui"
+import LeftArrow from "./left-arrow"
+import RightArrow from "./right-arrow"
 import sidebarToggle from "./sidebar-toggle"
+import check from "./check"
+import update from "./update"
+import detach from "./detach"
+import threeDotsStacked from "./three-dots-stacked"
 
 export default {
+  check,
+  update,
+  detach,
   braces,
   expand,
   collapse,
@@ -66,4 +75,7 @@ export default {
   close,
   plus,
   zui,
+  "left-arrow": LeftArrow,
+  "right-arrow": RightArrow,
+  "three-dots-stacked": threeDotsStacked,
 }

src/app/core/icons/left-arrow.tsx

@@ -0,0 +1,12 @@
+import React from "react"
+
+export default function LeftArrow(props: any) {
+  return (
+    <svg width="22" height="22" viewBox="0 0 22 22" {...props}>
+      <path
+        d="M0,6.5 C0,6.71437995 0.0947765213,6.9116095 0.267097469,7.07453826 L5.98815293,12.7598945 C6.16047388,12.9228232 6.34141088,13 6.54819602,13 C6.97038234,13 7.30640819,12.6912929 7.30640819,12.262533 C7.30640819,12.0567282 7.22886376,11.8509235 7.091007,11.7222955 L5.16101239,9.7671504 L2.25740442,7.13456464 L4.34248788,7.26319261 L15.2417878,7.26319261 C15.6898223,7.26319261 16,6.94591029 16,6.5 C16,6.05408971 15.6898223,5.73680739 15.2417878,5.73680739 L4.34248788,5.73680739 L2.26602046,5.86543536 L5.16101239,3.2328496 L7.091007,1.27770449 C7.22886376,1.14050132 7.30640819,0.943271768 7.30640819,0.737467018 C7.30640819,0.308707124 6.97038234,0 6.54819602,0 C6.34141088,0 6.16047388,0.0686015831 5.97092084,0.257255937 L0.267097469,5.92546174 C0.0947765213,6.0883905 0,6.28562005 0,6.5 Z"
+        transform="translate(3 4.5)"
+      />
+    </svg>
+  )
+}

src/app/core/icons/right-arrow.tsx

@@ -0,0 +1,12 @@
+import React from "react"
+
+export default function RightArrow(props: any) {
+  return (
+    <svg width="22" height="22" viewBox="0 0 22 22" {...props}>
+      <path
+        d="M0,6.5 C0,6.71437995 0.0947765213,6.9116095 0.267097469,7.07453826 L5.98815293,12.7598945 C6.16047388,12.9228232 6.34141088,13 6.54819602,13 C6.97038234,13 7.30640819,12.6912929 7.30640819,12.262533 C7.30640819,12.0567282 7.22886376,11.8509235 7.091007,11.7222955 L5.16101239,9.7671504 L2.25740442,7.13456464 L4.34248788,7.26319261 L15.2417878,7.26319261 C15.6898223,7.26319261 16,6.94591029 16,6.5 C16,6.05408971 15.6898223,5.73680739 15.2417878,5.73680739 L4.34248788,5.73680739 L2.26602046,5.86543536 L5.16101239,3.2328496 L7.091007,1.27770449 C7.22886376,1.14050132 7.30640819,0.943271768 7.30640819,0.737467018 C7.30640819,0.308707124 6.97038234,0 6.54819602,0 C6.34141088,0 6.16047388,0.0686015831 5.97092084,0.257255937 L0.267097469,5.92546174 C0.0947765213,6.0883905 0,6.28562005 0,6.5 Z"
+        transform="matrix(-1 0 0 1 19 4.5)"
+      />
+    </svg>
+  )
+}

src/app/core/icons/three-dots-stacked.tsx

@@ -0,0 +1,11 @@
+import React from "react"
+
+export default function ThreeDots(props: any) {
+  return (
+    <svg {...props} width="22" height="22" viewBox="0 0 22 22">
+      <circle cx="11" cy="17" r="2" transform="rotate(-90 11 17)" />
+      <circle cx="11" cy="11" r="2" transform="rotate(-90 11 11)" />
+      <circle cx="11" cy="5" r="2" transform="rotate(-90 11 5)" />
+    </svg>
+  )
+}

src/app/core/icons/three-dots.tsx

@@ -1,17 +1,10 @@
 import React from "react"
 export default function ThreeDots(props: any) {
   return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="22"
-      height="22"
-      viewBox="0 0 22 22"
-      {...props}
-    >
-      <path
-        fillRule="evenodd"
-        d="M10.8384615,16.9230769 C12.2404151,16.9230769 13.3769231,18.0595849 13.3769231,19.4615385 C13.3769231,20.8634921 12.2404151,22 10.8384615,22 C9.43650794,22 8.3,20.8634921 8.3,19.4615385 C8.3,18.0595849 9.43650794,16.9230769 10.8384615,16.9230769 Z M10.8384615,8.46153846 C12.2404151,8.46153846 13.3769231,9.5980464 13.3769231,11 C13.3769231,12.4019536 12.2404151,13.5384615 10.8384615,13.5384615 C9.43650794,13.5384615 8.3,12.4019536 8.3,11 C8.3,9.5980464 9.43650794,8.46153846 10.8384615,8.46153846 Z M10.8384615,1.77635684e-15 C12.2404151,1.77635684e-15 13.3769231,1.13650794 13.3769231,2.53846154 C13.3769231,3.94041513 12.2404151,5.07692308 10.8384615,5.07692308 C9.43650794,5.07692308 8.3,3.94041513 8.3,2.53846154 C8.3,1.13650794 9.43650794,1.77635684e-15 10.8384615,1.77635684e-15 Z"
-      />
+    <svg {...props} width="22" height="22" viewBox="0 0 22 22">
+      <circle cx="5" cy="11" r="2" />
+      <circle cx="11" cy="11" r="2" />
+      <circle cx="17" cy="11" r="2" />
     </svg>
   )
 }

src/app/core/icons/update.tsx

@@ -0,0 +1,11 @@
+import React from "react"
+export default function Update(props: any) {
+  return (
+    <svg {...props} width="22" height="22" viewBox="0 0 22 22">
+      <path
+        d="M7.99557277,13.6848776 C8.44714997,13.6848776 8.81903708,13.2993881 8.81903708,12.8496503 L8.81903708,3.60708042 L8.74820144,2.23951049 L9.29717764,2.90952797 L10.5456558,4.28627622 C10.6873271,4.45148601 10.8909795,4.53409091 11.094632,4.53409091 C11.4930825,4.53409091 11.8206973,4.23120629 11.8206973,3.79982517 C11.8206973,3.57954545 11.7410072,3.41433566 11.5904815,3.2583042 L8.61538462,0.293706294 C8.41173215,0.0734265734 8.21693414,0 7.99557277,0 C7.78306586,0 7.58826785,0.0734265734 7.38461538,0.293706294 L4.40951854,3.2583042 C4.25899281,3.41433566 4.17044826,3.57954545 4.17044826,3.79982517 C4.17044826,4.23120629 4.49806309,4.53409091 4.89651356,4.53409091 C5.10016602,4.53409091 5.31267294,4.45148601 5.45434422,4.28627622 L6.6939679,2.90952797 L7.25179856,2.23951049 L7.18096292,3.60708042 L7.18096292,12.8496503 C7.18096292,13.2993881 7.55285003,13.6848776 7.99557277,13.6848776 Z M2.90426121,21 L13.0957388,21 C15.0083011,21 16,19.9812063 16,18.0262238 L16,8.98557692 C16,7.03059441 15.0083011,6.0118007 13.0957388,6.0118007 L10.6961815,6.0118007 L10.6961815,7.81075175 L12.9894853,7.81075175 C13.8040952,7.81075175 14.2645268,8.25131119 14.2645268,9.14160839 L14.2645268,17.8701923 C14.2645268,18.7604895 13.8040952,19.201049 12.9894853,19.201049 L3.01051467,19.201049 C2.18705036,19.201049 1.73547316,18.7604895 1.73547316,17.8701923 L1.73547316,9.14160839 C1.73547316,8.25131119 2.18705036,7.81075175 3.01051467,7.81075175 L5.32152739,7.81075175 L5.32152739,6.0118007 L2.90426121,6.0118007 C0.991698949,6.0118007 0,7.03059441 0,8.98557692 L0,18.0262238 C0,19.9812063 0.991698949,21 2.90426121,21 Z"
+        transform="translate(3)"
+      />
+    </svg>
+  )
+}

src/app/features/right-pane/detail-section.tsx

@@ -3,7 +3,6 @@ import DetailPane from "src/app/detail/Pane"
 import {useSelector} from "react-redux"
 import {openLogDetailsWindow} from "src/js/flows/openLogDetailsWindow"
 import ExpandWindow from "src/js/icons/ExpandWindow"
-import Current from "src/js/state/Current"
 import LogDetails from "src/js/state/LogDetails"
 import HistoryButtons from "src/js/components/common/HistoryButtons"
 import {useDispatch} from "../../core/state"
@@ -15,29 +14,26 @@ const DetailSection = () => {
   const prevExists = useSelector(LogDetails.getHistory).canGoBack()
   const nextExists = useSelector(LogDetails.getHistory).canGoForward()
   const currentLog = useSelector(LogDetails.build)
-  const pool = useSelector(Current.getQueryPool)
 
-  if (!pool) return <NoSelection />
+  if (!currentLog) return <NoSelection />
   return (
     <>
-      {currentLog && (
-        <PaneHeader>
-          <Left>
-            <HistoryButtons
-              prevExists={prevExists}
-              nextExists={nextExists}
-              backFunc={() => dispatch(LogDetails.back())}
-              forwardFunc={() => dispatch(LogDetails.forward())}
-            />
-          </Left>
-          <Right>
-            <ExpandWindow
-              onClick={() => dispatch(openLogDetailsWindow())}
-              className="panel-button"
-            />
-          </Right>
-        </PaneHeader>
-      )}
+      <PaneHeader>
+        <Left>
+          <HistoryButtons
+            prevExists={prevExists}
+            nextExists={nextExists}
+            backFunc={() => dispatch(LogDetails.back())}
+            forwardFunc={() => dispatch(LogDetails.forward())}
+          />
+        </Left>
+        <Right>
+          <ExpandWindow
+            onClick={() => dispatch(openLogDetailsWindow())}
+            className="panel-button"
+          />
+        </Right>
+      </PaneHeader>
       <PaneBody>
         <DetailPane />
       </PaneBody>