workspace overlays

app/workspace/Spaces/Command/index.js

@@ -5,8 +5,6 @@ import React from 'react'
 
 import { Cluster, ClusterRow, ClusterValue } from '../../../../resources/Components/Cluster'
 
-import Dock from './Dock'
-
 const Container = styled.div`
   position: relative;
   display: flex;
@@ -160,27 +158,24 @@ const AssetList = styled.div`
 `
 
 const Home = ({ data }) => (
-  <>
-    <Container>
-      {data.station === 'command' ? (
-        <CommandBar />
-      ) : data.station === 'dashboard' ? (
-        <>
-          <HomeCenter>
-            <Portfolio>Value</Portfolio>
-            <AssetList>Assets</AssetList>
-            <AssetList>Inventory</AssetList>
-          </HomeCenter>
-          <HomeRight>
-            <div>{'Account activity'}</div>
-          </HomeRight>
-        </>
-      ) : (
-        <pre>{JSON.stringify(data, null, 4)}</pre>
-      )}
-    </Container>
-    <Dock />
-  </>
+  <Container>
+    {data.station === 'command' ? (
+      <CommandBar />
+    ) : data.station === 'dashboard' ? (
+      <>
+        <HomeCenter>
+          <Portfolio>Value</Portfolio>
+          <AssetList>Assets</AssetList>
+          <AssetList>Inventory</AssetList>
+        </HomeCenter>
+        <HomeRight>
+          <div>{'Account activity'}</div>
+        </HomeRight>
+      </>
+    ) : (
+      <pre>{JSON.stringify(data, null, 4)}</pre>
+    )}
+  </Container>
 )
 
 export default Home

app/workspaceDock/Dock/index.js

@@ -0,0 +1,194 @@
+import svg from '../../../resources/svg'
+import styled, { createGlobalStyle } from 'styled-components'
+import link from '../../../resources/link'
+import useStore from '../../../resources/Hooks/useStore.js'
+import { useState, useEffect } from 'react'
+
+const GlobalStyle = createGlobalStyle`
+  body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0px;
+    font-family: 'MainFont';
+    font-weight: 400;
+    color: var(--outerspace);
+  }
+`
+
+const Dock = styled.div`
+  border-radius: 16px;
+  background: var(--ghostA);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 12px 0px 12px 12px;
+`
+
+const DappRow = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
+const DappIcon = styled.div`
+  width: 42px;
+  height: 42px;
+  margin-right: 12px;
+  /* margin: 0px 2px 2px 12px; */
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  background: var(--ghostB);
+  border-radius: 8px;
+
+  * {
+    pointer-events: none;
+  }
+
+  &:hover {
+    background: var(--ghostC);
+    transform: scale(1.2);
+    transition: transform 0.2s ease-in-out;
+  }
+`
+
+const DappIconBreak = styled.div`
+  width: 3px;
+  height: 42px;
+  background: var(--ghostZ);
+  border-radius: 1.5px;
+  margin: 0px 12px 0px 8px;
+`
+const DockWrap = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: ${({ hide }) => (hide ? 'translateY(100px)' : 'translateY(0)')};
+  transition: transform 0.4s ease-in-out;
+`
+
+const Wrap = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+`
+
+const DockHandle = styled.div`
+  position: absolute;
+  left: 50%;
+  bottom: 2px;
+  height: 4px;
+  width: 32px;
+  margin-left: -16px;
+  border-radius: 2px;
+  background: var(--outerspace);
+  display: none;
+`
+
+const RoundedElement = styled.div`
+  position: absolute;
+  left: 8px;
+  bottom: 8px;
+
+  width: 5px;
+  height: 5px;
+  background-color: var(--ghostAZ); /* Your actual background color */
+
+  /* The mask */
+  -webkit-mask-box-image: radial-gradient(circle at top right, transparent 0% 5px, black 5px);
+  mask-box-image: radial-gradient(circle at top right, transparent 0% 5px, black 5px);
+`
+
+const RoundedElementRight = styled.div`
+  position: absolute;
+  right: 8px;
+  bottom: 8px;
+
+  width: 5px;
+  height: 5px;
+  background-color: var(--ghostAZ); /* Your actual background color */
+
+  /* The mask */
+  -webkit-mask-box-image: radial-gradient(circle at top left, transparent 0% 5px, black 5px);
+  mask-box-image: radial-gradient(circle at top left, transparent 0% 5px, black 5px);
+`
+let hideTimeout
+export default () => {
+  const frameState = useStore('windows.workspaces', window.frameId)
+  const nav = frameState?.nav[0] || { space: 'command', data: {} }
+  if (!nav || !nav.space) return null
+
+  const [hideDockWrap, setHideDockWrap] = useState(false)
+
+  const setHide = () => {
+    setHideDockWrap(true)
+    clearTimeout(hideTimeout)
+    hideTimeout = setTimeout(() => {
+      link.send('workspace:nav:update:data', window.frameId, { hidden: true })
+    }, 500)
+  }
+
+  const setShow = () => {
+    clearTimeout(hideTimeout)
+    setHideDockWrap(false)
+    link.send('workspace:nav:update:data', window.frameId, { hidden: false })
+  }
+
+  const hidden = (nav.space === 'dapp' && hideDockWrap) || (nav.space !== 'dapp' && nav.space !== 'command')
+
+  return (
+    <Wrap onMouseEnter={() => setShow()}>
+      <GlobalStyle />
+      <RoundedElement />
+      <RoundedElementRight />
+      <DockHandle />
+      <DockWrap
+        hide={hidden}
+        onMouseLeave={() => {
+          setHide()
+        }}
+      >
+        <Dock>
+          <DappIcon
+            onClick={() => {
+              link.send('workspace:nav', window.frameId, 'command', { station: 'command' })
+            }}
+          >
+            {'C'}
+          </DappIcon>
+          <DappIcon
+            onClick={() => {
+              link.send('workspace:nav', window.frameId, 'command', { station: 'dashboard' })
+            }}
+          >
+            {'D'}
+          </DappIcon>
+          <DappIconBreak />
+          <DappIcon
+            onClick={() => {
+              // link.send('workspace:nav:update:data', window.frameId, { station: 'dapp' })
+              link.send('workspace:run', 'dapp', {}, ['send.frame.eth'])
+            }}
+          >
+            {svg.send(15)}
+          </DappIcon>
+          <DappIcon>{'-'}</DappIcon>
+          <DappIcon>{'-'}</DappIcon>
+          <DappIcon>{'-'}</DappIcon>
+          <DappIcon>{'-'}</DappIcon>
+          <DappIcon>{'-'}</DappIcon>
+        </Dock>
+      </DockWrap>
+    </Wrap>
+  )
+}

app/workspaceDock/index.dev.html

@@ -0,0 +1,23 @@
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="
+        script-src 'strict-dynamic' 'nonce-8c7d2664-ae99-42c2-ae12-3304e9168f71' http://localhost:1234 'unsafe-eval';
+        base-uri 'self';
+        connect-src *;
+        img-src blob: http://localhost:8421;
+        frame-src 'none';
+        style-src 'self' http://localhost:1234 'unsafe-inline';
+        object-src 'none';
+      "
+    />
+    <title>Dock</title>
+    <link rel="stylesheet" href="../../resources/base.styl" type="text/css" />
+  </head>
+  <body>
+    <div id="dock"></div>
+    <script type="module" src="./index.js" nonce="8c7d2664-ae99-42c2-ae12-3304e9168f71"></script>
+  </body>
+</html>

app/workspaceDock/index.html

@@ -0,0 +1,24 @@
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="
+        script-src 'strict-dynamic' 'nonce-2f0d956b-0d9c-4f1e-874a-57a1ec828872';
+        base-uri 'self';
+        connect-src *;
+        img-src blob: http://localhost:8421;
+        frame-src 'none';
+        style-src 'self' 'unsafe-inline';
+        object-src 'none';
+        require-trusted-types-for 'script';
+      "
+    />
+    <title>Dock</title>
+    <link rel="stylesheet" href="../../resources/base.styl" type="text/css" />
+  </head>
+  <body>
+    <div id="dock"></div>
+    <script type="module" src="./index.js" nonce="2f0d956b-0d9c-4f1e-874a-57a1ec828872"></script>
+  </body>
+</html>

app/workspaceDock/index.js

@@ -0,0 +1,44 @@
+import * as Sentry from '@sentry/electron'
+import { createRoot } from 'react-dom/client'
+
+import link from '../../resources/link'
+import restore from '../store'
+
+import { StoreContext } from '../../resources/Hooks/useStore'
+
+import Dock from './Dock'
+
+Sentry.init({ dsn: 'https://7b09a85b26924609bef5882387e2c4dc@o1204372.ingest.sentry.io/6331069' })
+
+document.addEventListener('dragover', (e) => e.preventDefault())
+document.addEventListener('drop', (e) => e.preventDefault())
+
+if (process.env.NODE_ENV !== 'development') {
+  window.eval = global.eval = () => {
+    throw new Error(`This app does not support window.eval()`)
+  } // eslint-disable-line
+}
+
+link.rpc('getFrameId', (err, frameId) => {
+  if (err) return console.error('Could not get frameId from main', err)
+  window.frameId = frameId
+  link.rpc('getState', (err, state) => {
+    if (err) return console.error('Could not get initial state from main')
+    const store = restore(state)
+    store.observer(() => {
+      document.body.classList.remove('dark', 'light')
+      document.body.classList.add('clip', store('main.colorway'))
+      setTimeout(() => {
+        document.body.classList.remove('clip')
+      }, 100)
+    })
+    const root = createRoot(document.getElementById('dock'))
+    root.render(
+      <StoreContext.Provider value={store}>
+        <Dock frameId={frameId} />
+      </StoreContext.Provider>
+    )
+  })
+})
+
+document.addEventListener('contextmenu', (e) => link.send('*:contextmenu', e.clientX, e.clientY))

main/windows/frames/frameInstances.ts

@@ -12,6 +12,8 @@ const isDev = process.env.NODE_ENV === 'development'
 export interface FrameInstance extends BrowserWindow {
   frameId?: string
   views?: Record<string, BrowserView>
+  overlays?: Record<string, BrowserView>
+  overlay?: BrowserView
   showingView?: string
 }
 
@@ -77,6 +79,18 @@ export default {
     // })
 
     frameInstance.on('resize', () => {
+      // TODO: reflect correct state of dock
+      if (frameInstance.overlay) {
+        const { width, height } = frameInstance.getBounds()
+
+        frameInstance.overlay.setBounds({
+          y: height - 96,
+          x: 0,
+          width: width,
+          height: 96
+        })
+      }
+
       Object.values(frameInstance.views || {}).forEach((viewInstance) => {
         const { frameId } = frameInstance
         // const { fullscreen } = store('windows.workspaces', frameId)