fix(core): enable cloud button should not take space by default (#8270)

before

<div class='graphite__hidden'>
          <div>🎥 Video uploaded on Graphite:</div>
            <a href="https://app.graphite.dev/media/video/T2klNLEk0wxLh4NRDzhk/6d818363-30df-4dee-84c1-69eee828f454.mp4">
              <img src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/T2klNLEk0wxLh4NRDzhk/6d818363-30df-4dee-84c1-69eee828f454.mp4">
            </a>
          </div>
<video src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/6d818363-30df-4dee-84c1-69eee828f454.mp4">20240917-0548-21.8568797.mp4</video>

---

after

<div class='graphite__hidden'>
          <div>🎥 Video uploaded on Graphite:</div>
            <a href="https://app.graphite.dev/media/video/T2klNLEk0wxLh4NRDzhk/69c68a4d-d2ea-4439-9c3d-f4a328d76927.mp4">
              <img src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/T2klNLEk0wxLh4NRDzhk/69c68a4d-d2ea-4439-9c3d-f4a328d76927.mp4">
            </a>
          </div>
<video src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/69c68a4d-d2ea-4439-9c3d-f4a328d76927.mp4">20240917-0549-00.5175618.mp4</video>

Author: pengx17

packages/frontend/core/src/components/workspace-selector/workspace-card/index.tsx

@@ -26,6 +26,7 @@ import clsx from 'clsx';
 import type { HTMLAttributes } from 'react';
 import { forwardRef, useCallback, useEffect, useState } from 'react';
 
+import { useCatchEventCallback } from '../../hooks/use-catch-event-hook';
 import * as styles from './styles.css';
 
 const CloudWorkspaceStatus = () => {
@@ -262,6 +263,14 @@ export const WorkspaceCard = forwardRef<
 
     const name = information?.name ?? UNTITLED_WORKSPACE_NAME;
 
+    const onEnableCloud = useCatchEventCallback(() => {
+      onClickEnableCloud?.(workspaceMetadata);
+    }, [onClickEnableCloud, workspaceMetadata]);
+
+    const onOpenSettings = useCatchEventCallback(() => {
+      onClickOpenSettings?.(workspaceMetadata);
+    }, [onClickOpenSettings, workspaceMetadata]);
+
     return (
       <div
         className={clsx(
@@ -301,32 +310,26 @@ export const WorkspaceCard = forwardRef<
             <Skeleton width={100} />
           )}
         </div>
-        {onClickEnableCloud &&
-        workspaceMetadata.flavour === WorkspaceFlavour.LOCAL ? (
-          <Button
-            className={styles.showOnCardHover}
-            onClick={e => {
-              e.stopPropagation();
-              onClickEnableCloud(workspaceMetadata);
-            }}
-          >
-            Enable Cloud
-          </Button>
-        ) : null}
-        {hideCollaborationIcon || information?.isOwner ? null : (
-          <CollaborationIcon />
-        )}
-        {onClickOpenSettings && (
-          <div
-            className={styles.settingButton}
-            onClick={e => {
-              e.stopPropagation();
-              onClickOpenSettings(workspaceMetadata);
-            }}
-          >
-            <SettingsIcon width={16} height={16} />
-          </div>
-        )}
+        <div className={styles.showOnCardHover}>
+          {onClickEnableCloud &&
+          workspaceMetadata.flavour === WorkspaceFlavour.LOCAL ? (
+            <Button
+              className={styles.enableCloudButton}
+              onClick={onEnableCloud}
+            >
+              Enable Cloud
+            </Button>
+          ) : null}
+          {hideCollaborationIcon || information?.isOwner ? null : (
+            <CollaborationIcon />
+          )}
+          {onClickOpenSettings && (
+            <div className={styles.settingButton} onClick={onOpenSettings}>
+              <SettingsIcon width={16} height={16} />
+            </div>
+          )}
+        </div>
+
         {showArrowDownIcon && <ArrowDownSmallIcon />}
       </div>
     );

packages/frontend/core/src/components/workspace-selector/workspace-card/styles.css.ts

@@ -125,6 +125,15 @@ export const workspaceTitleContainer = style({
   overflow: 'hidden',
 });
 
+export const enableCloudButton = style({
+  opacity: 0,
+  selectors: {
+    [`.${container}:hover &`]: {
+      opacity: 1,
+    },
+  },
+});
+
 export const settingButton = style({
   transition: 'all 0.13s ease',
   width: 0,
@@ -152,12 +161,14 @@ export const settingButton = style({
 });
 
 export const showOnCardHover = style({
-  visibility: 'hidden',
-  opacity: 0,
+  position: 'absolute',
+  right: 0,
+  display: 'flex',
+  gap: 8,
+  alignItems: 'center',
   selectors: {
     [`.${container}:hover &`]: {
-      visibility: 'visible',
-      opacity: 1,
+      position: 'relative',
     },
   },
 });