Export to Clipboard & Pool

apps/zui/scripts/start.js

@@ -10,7 +10,7 @@ async function start() {
   const renderer = sub("yarn", `start:renderer`)
   await Promise.all([
     main.waitForOutput(/watching for changes/),
-    renderer.waitForOutput(/compiled client and server successfully/),
+    renderer.waitForOutput(/started server on/),
   ])
   log("Launching...")
   sub("yarn", `start:electron ${electronArgs}`).p.on("exit", () => {

apps/zui/src/app/features/right-pane/history/history-item.tsx

@@ -36,6 +36,7 @@ const BG = styled.div`
 
 const Text = styled.p`
   font-family: var(--mono-font);
+  font-size: var(--step--1);
   font-weight: 500;
   white-space: nowrap;
   overflow: hidden;

apps/zui/src/app/features/sidebar/item.tsx

@@ -68,7 +68,7 @@ const BG = styled.div`
   &[aria-selected="true"] {
     border-radius: 0;
     outline: none;
-    box-shadow: var(--shadow-small);
+    box-shadow: var(--shadow-s);
     background: var(--selected-bg);
 
     svg {

apps/zui/src/app/features/sidebar/lake-picker.tsx

@@ -21,32 +21,12 @@ const LakeNameGroup = styled.div`
   border-radius: 6px;
   min-width: 0;
   position: relative;
-
+  transition: all var(--dur-s);
   &:hover {
-    background: var(--sidebar-item-hover);
+    background: var(--emphasis-bg);
   }
   &:active {
-    background: var(--sidebar-item-active);
-    box-shadow: var(--sidebar-item-active-shadow);
-  }
-`
-
-const NameColumn = styled.div`
-  overflow: hidden;
-  label {
-    display: block;
-    font-size: 15px;
-    font-weight: bold;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-  }
-
-  label:last-child {
-    font-size: 12px;
-    font-weight: normal;
-    font-family: var(--mono-font);
-    opacity: 0.5;
+    background: var(--emphasis-bg-more);
   }
 `
 
@@ -85,10 +65,10 @@ export default function LakePicker() {
 
   return (
     <LakeNameGroup onClick={() => dispatch(showLakeSelectMenu())}>
-      <NameColumn>
-        <label>{`${current?.name}`}</label>
-        <label>{`${current?.getAddress()}`}</label>
-      </NameColumn>
+      <div className="overflow:hidden">
+        <p className="overflow:ellipsis weight:bold">{`${current?.name}`}</p>
+        <p className="overflow:ellipsis font:mono font-size:-2 color:fg-less">{`${current?.getAddress()}`}</p>
+      </div>
     </LakeNameGroup>
   )
 }

apps/zui/src/app/features/sidebar/queries-section/index.tsx

@@ -19,6 +19,7 @@ export function QueriesSection() {
       </Content>
       <Toolbar>
         <ToolbarTabs
+          name="querySource"
           options={[
             {
               label: "Local",

apps/zui/src/app/features/sidebar/queries-section/queries-tree.tsx

@@ -16,9 +16,9 @@ import {FillFlexParent} from "src/components/fill-flex-parent"
 import QueryItem from "./query-item"
 import {selectQuery} from "src/app/events/select-query-event"
 import Appearance from "src/js/state/Appearance"
-import {Empty} from "./empty"
 import {TREE_ITEM_HEIGHT} from "../item"
 import {showMenu} from "src/core/menu"
+import EmptySection from "src/js/components/common/EmptySection"
 
 type Props = {
   source: "local" | "remote"
@@ -41,7 +41,9 @@ function LocalQueriesTree({searchTerm}: Props) {
   if (queries.length) {
     return <QueryTree queries={queries} searchTerm={searchTerm} type="local" />
   } else {
-    return <Empty message="Local queries you've saved will be listed here." />
+    return (
+      <EmptySection message="Local queries you've saved will be listed here." />
+    )
   }
 }
 
@@ -54,7 +56,9 @@ function RemoteQueriesTree({searchTerm}) {
   if (queries.length) {
     return <QueryTree queries={queries} searchTerm={searchTerm} type="remote" />
   } else {
-    return <Empty message="Remove queries from the lake will be listed here." />
+    return (
+      <EmptySection message="Remote queries from the lake will be listed here." />
+    )
   }
 }
 

apps/zui/src/app/router/routes.ts

@@ -8,51 +8,53 @@ import {IconName} from "../../components/icon"
  */
 
 export const root: Route = {
+  name: "root",
   path: "/",
   title: "Zui",
 }
 
 export const poolShow: Route = {
+  name: "poolShow",
   title: "<pool>",
   path: `/pools/:poolId`,
   icon: "pool",
 }
 
 export const query: Route = {
+  name: "querySession",
   title: "<query>",
   path: `/queries/:queryId`,
   icon: "query",
 }
+
 export const queryVersion: Route = {
+  name: "querySession",
   title: "<query>",
   path: `${query.path}/versions/:version`,
   icon: "query",
 }
-export const lakeReleaseNotes: Route = {
+export const releaseNotes: Route = {
+  name: "releaseNotes",
   title: "Release Notes",
   path: `/release-notes`,
   icon: "doc_plain",
 }
 
-export const releaseNotes: Route = {
-  title: "Release Notes",
-  path: "/release-notes",
-}
-
 export const welcome: Route = {
+  name: "welcome",
   title: "Welcome to Zui",
   path: "/welcome",
   icon: "zui",
 }
 
 type Route = {
+  name: string
   title: string
   path: string
   icon?: IconName
 }
 
 export const allRoutes: Route[] = [
-  lakeReleaseNotes,
   poolShow,
   query,
   queryVersion,

apps/zui/src/app/routes/app-wrapper/app-modals.tsx

@@ -4,19 +4,15 @@ import {Tooltip} from "src/components/tooltip"
 import ErrorNotice from "src/js/components/ErrorNotice"
 import HTMLContextMenu from "src/js/components/HTMLContextMenu"
 import {Modals} from "src/js/components/Modals"
-import {PreferencesModal} from "src/views/preferences-modal"
-import {LoadPane} from "src/views/load-pane"
 
 export function AppModals() {
   return (
     <>
       <ErrorNotice />
-      <PreferencesModal />
       <Modals />
       <HTMLContextMenu />
       <Toaster />
       <Tooltip />
-      <LoadPane />
     </>
   )
 }

apps/zui/src/app/routes/app-wrapper/main-area.tsx

@@ -18,7 +18,7 @@ const BG = styled.main`
   margin: 10px;
   margin-top: 0;
   border-radius: 6px;
-  box-shadow: var(--shadow-small);
+  box-shadow: var(--shadow-s);
   border: 1px solid var(--border-color);
 
   @media (prefers-color-scheme: light) {

apps/zui/src/components/case.tsx

@@ -0,0 +1,7 @@
+export function Case(props: {if: boolean; true: any; false: any}) {
+  if (props.if) {
+    return props.true
+  } else {
+    return props.false
+  }
+}

apps/zui/src/components/dialog/index.tsx

@@ -1,15 +1,17 @@
-import {HTMLAttributes, MouseEventHandler} from "react"
+import {MouseEventHandler, forwardRef} from "react"
 import {useOpener} from "./use-opener"
 import {useOutsideClick} from "./use-outside-click"
 import useCallbackRef from "src/js/components/hooks/useCallbackRef"
 import {omit} from "lodash"
-import {call} from "src/util/call"
 import {useFixedPosition} from "src/util/hooks/use-fixed-position"
+import mergeRefs from "src/app/core/utils/merge-refs"
+import useListener from "src/js/components/hooks/useListener"
+import {call} from "src/util/call"
 
 export type DialogProps = {
   isOpen: boolean
-  onClose?: () => void
-  onCancel?: () => void
+  onClose?: (e: any) => any
+  onCancel?: (e: any) => any
   modal?: boolean
   onOutsideClick?: (e: globalThis.MouseEvent) => void
   onClick?: MouseEventHandler<HTMLDialogElement>
@@ -20,7 +22,7 @@ export type DialogProps = {
   dialogPoint?: string
   dialogMargin?: string
   keepOnScreen?: boolean
-} & HTMLAttributes<HTMLDialogElement>
+}
 
 const nonHTMLProps: (keyof DialogProps)[] = [
   "isOpen",
@@ -34,10 +36,12 @@ const nonHTMLProps: (keyof DialogProps)[] = [
   "keepOnScreen",
 ]
 
-export function Dialog(props: DialogProps) {
+export const Dialog = forwardRef(function Dialog(props: DialogProps, ref) {
   const [node, setNode] = useCallbackRef<HTMLDialogElement>()
   useOpener(node, props) // Make sure we open it before positioning it
   useOutsideClick(node, props)
+
+  // Get this out of here
   const style = useFixedPosition({
     anchor: props.anchor,
     anchorPoint: props.anchorPoint,
@@ -46,27 +50,23 @@ export function Dialog(props: DialogProps) {
     targetMargin: props.dialogMargin,
   })
 
-  function onClose(e) {
-    e.preventDefault()
-    call(props.onClose)
-  }
+  // When you click escape, "cancel" is fired, then close
+  useListener(node, "cancel", (e) => {
+    call(props.onCancel, e)
+  })
 
-  function onCancel(e) {
-    e.preventDefault()
-    call(props.onCancel)
-    call(props.onClose)
-  }
+  // When you call .close() "close" fires
+  useListener(node, "close", (e) => {
+    call(props.onClose, e)
+  })
 
   return (
     <dialog
-      // @ts-ignore
-      onClose={onClose}
-      onCancel={onCancel}
-      ref={setNode}
+      ref={mergeRefs(setNode, ref)}
       style={{...style, position: "fixed"}}
       {...omit(props, ...nonHTMLProps)}
     >
       {props.children}
     </dialog>
   )
-}
+})

apps/zui/src/components/drag-anchor.tsx

@@ -82,20 +82,37 @@ type Props = {
 export default class DragAnchor extends React.Component<Props> {
   private startX: number
   private startY: number
+  private cleanup = () => {}
 
   componentWillUnmount() {
     this.up()
   }
 
   down = (e: React.MouseEvent) => {
+    const body = document.body
+    const el = e.currentTarget
     this.startX = e.clientX
     this.startY = e.clientY
-    const body = document.body
     body.style.cursor = this.getCursor()
     body.style.userSelect = "none"
     body.classList.add("is-dragging")
+    el.classList.add("is-dragging")
     document.addEventListener("mousemove", this.move)
     document.addEventListener("mouseup", this.up)
+
+    this.cleanup = () => {
+      document.removeEventListener("mousemove", this.move)
+      document.removeEventListener("mouseup", this.up)
+      if (body) {
+        body.style.cursor = ""
+        body.style.userSelect = ""
+        body.classList.remove("is-dragging")
+      }
+      if (el) {
+        el.classList.remove("is-dragging")
+      }
+    }
+
     call(this.props.onStart, e)
   }
 
@@ -106,14 +123,7 @@ export default class DragAnchor extends React.Component<Props> {
   }
 
   up = () => {
-    const body = document.body
-    if (body) {
-      body.style.cursor = ""
-      body.style.userSelect = ""
-      body.classList.remove("is-dragging")
-      document.removeEventListener("mousemove", this.move)
-      document.removeEventListener("mouseup", this.up)
-    }
+    this.cleanup()
     call(this.props.onEnd)
   }