feat: rework context controls

package.json

@@ -127,7 +127,7 @@
     "execa": "5.1.1",
     "fast-json-stable-stringify": "2.1.0",
     "flat": "5.0.2",
-    "framer-motion": "9.1.7",
+    "framer-motion": "10.10.0",
     "git-url-parse": "13.1.0",
     "html-to-image": "1.11.11",
     "json-schema-faker": "0.5.0-rcv.46",

src/components/atoms/Tooltip/Tooltip.tsx

@@ -0,0 +1,7 @@
+import {Tooltip as AntdTooltip, TooltipProps} from 'antd';
+
+import {TOOLTIP_DELAY} from '@constants/constants';
+
+export function Tooltip(props: TooltipProps) {
+  return <AntdTooltip mouseEnterDelay={TOOLTIP_DELAY} {...props} />;
+}

src/components/organisms/Dashboard/Disconnected/ClusterIndication.tsx

@@ -0,0 +1,37 @@
+import styled from 'styled-components';
+
+import ClusterIndicationSvg from '@assets/ClusterIndicationPlain.svg';
+
+import {Colors} from '@shared/styles';
+
+export function ClusterIndication() {
+  return (
+    <Box>
+      <Content>
+        <div>Click here to connect from anywhere in the app</div>
+      </Content>
+      <Image alt="Cluster Indication" src={ClusterIndicationSvg} />
+    </Box>
+  );
+}
+
+const Box = styled.div`
+  position: absolute;
+  display: flex;
+  gap: 12px;
+  right: 128px;
+`;
+
+const Content = styled.div`
+  width: 200px;
+  height: 100px;
+  color: ${Colors.grey7};
+  display: flex;
+  flex-direction: column-reverse;
+  text-align: right;
+`;
+
+const Image = styled.img<{$right?: number}>`
+  width: 66px;
+  min-width: 66px;
+`;

src/components/organisms/Dashboard/Disconnected/DebugClusterDrawer.tsx

@@ -0,0 +1,137 @@
+import {useCallback, useEffect, useMemo, useState} from 'react';
+
+import {Button, Drawer} from 'antd';
+
+import {DateTime} from 'luxon';
+import styled from 'styled-components';
+
+import {Tooltip} from '@components/atoms/Tooltip/Tooltip';
+
+import {useMainPaneDimensions} from '@utils/hooks';
+
+import {ContextId} from '@shared/ipc';
+import {Colors} from '@shared/styles';
+
+import {useClusterDebug} from '../useClusterDebug';
+import {TextWrapSvg} from './TextWrap';
+
+type Props = {
+  contextId: ContextId | undefined;
+  open: boolean;
+  onClose: () => void;
+};
+
+export function DebugClusterDrawer({contextId, open, onClose}: Props) {
+  const [wordWrap, setWordWrap] = useState(false);
+  const {width} = useMainPaneDimensions();
+  const {fetch, status, data} = useClusterDebug(contextId);
+
+  useEffect(() => {
+    if (!open) return;
+    fetch();
+  }, [open, fetch]);
+
+  const toggleWordWrap = useCallback(() => {
+    setWordWrap(!wordWrap);
+  }, [wordWrap, setWordWrap]);
+
+  const logs = useMemo(() => {
+    return [...(data?.logs ?? [])].map(l => ({...l, id: `${l.timestamp}-${l.content}`}));
+  }, [data?.logs]);
+
+  return (
+    <Drawer
+      title="Cluster connection debug logs"
+      placement="right"
+      onClose={onClose}
+      open={open}
+      width={width * 0.85}
+      bodyStyle={{overflowX: 'auto'}}
+      contentWrapperStyle={{overflowX: 'auto'}}
+      getContainer={false}
+      extra={
+        <Tooltip title="Toggle word wrap" placement="bottomLeft" showArrow={false}>
+          <HeaderButton onClick={toggleWordWrap} type="link">
+            <ButtonBox $wrap={wordWrap}>
+              <TextWrapSvg />
+            </ButtonBox>
+          </HeaderButton>
+        </Tooltip>
+      }
+    >
+      {status === 'idle' || status === 'loading' ? (
+        <p>loading..</p>
+      ) : status === 'error' ? (
+        <p>Something went wrong fetching the debug logs.</p>
+      ) : (
+        <div
+          style={{
+            height: '100%',
+            overflowY: 'auto',
+            display: 'flex',
+            flexDirection: 'column-reverse',
+            marginTop: 'auto',
+            justifyContent: 'space-between',
+          }}
+        >
+          <div />
+
+          <div style={{paddingBottom: 8}}>
+            {logs.map(l => (
+              <LogEntry key={l.timestamp}>
+                <LogMeta>
+                  [{DateTime.fromMillis(l.timestamp).toFormat('HH:MM:ss')} - {l.type}]
+                </LogMeta>
+                <LogContent $wrap={wordWrap}>{l.content}</LogContent>
+              </LogEntry>
+            ))}
+          </div>
+        </div>
+      )}
+    </Drawer>
+  );
+}
+
+const LogEntry = styled.div`
+  display: flex;
+`;
+
+const LogMeta = styled.div`
+  display: flex;
+  color: ${Colors.grey8};
+  flex: 0 0 155px;
+`;
+
+const LogContent = styled.div<{$wrap: boolean}>`
+  white-space: ${({$wrap}) => ($wrap ? 'nowrap' : 'auto')};
+  padding-right: 8px;
+`;
+
+const HeaderButton = styled(Button)`
+  padding: 0;
+  width: 24px;
+  height: 24px;
+`;
+
+const ButtonBox = styled.div<{$wrap: boolean}>`
+  color: ${({$wrap}) => ($wrap ? Colors.blue6 : Colors.grey7)};
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  background: ${Colors.grey3b};
+
+  :hover {
+    background: ${Colors.grey3b};
+    color: ${Colors.lightSeaGreen};
+  }
+
+  :focus,
+  :active {
+    background: ${Colors.grey3b};
+    color: ${Colors.lightSeaGreen};
+  }
+`;

src/components/organisms/Dashboard/Disconnected/TextWrap.tsx

@@ -0,0 +1,10 @@
+export function TextWrapSvg() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16">
+      <path
+        fill="currentColor"
+        d="M2 3.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5Zm0 4a.5.5 0 0 1 .5-.5h9a2.5 2.5 0 0 1 0 5h-1.293l.647.646a.5.5 0 0 1-.708.708l-1.5-1.5a.5.5 0 0 1 0-.708l1.5-1.5a.5.5 0 0 1 .708.708l-.647.646H11.5a1.5 1.5 0 0 0 0-3h-9a.5.5 0 0 1-.5-.5Zm0 4a.5.5 0 0 1 .5-.5H7a.5.5 0 0 1 0 1H2.5a.5.5 0 0 1-.5-.5Z"
+      />
+    </svg>
+  );
+}

src/components/organisms/Dashboard/EmptyDashboard.styled.tsx

@@ -4,16 +4,17 @@ import {Colors} from '@shared/styles/colors';
 
 export const Container = styled.div`
   display: flex;
+  position: relative;
+  justify-content: center;
   gap: 10px;
-  align-items: center;
-  justify-content: flex-end;
-  padding-right: 145px;
-  padding-top: 20px;
+  height: 100%;
+  width: 100%;
+  background-color: ${Colors.grey3000};
 `;
 
 export const Image = styled.img<{$right?: number}>`
-  width: 180px;
-  min-width: 180px;
+  width: 66px;
+  min-width: 66px;
 `;
 
 export const Text = styled.div`