feat(core): move sign in button to workspace list (#12566)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **New Features**
  - Improved the appearance and layout of the "Sign in" menu item with updated styling and icon.
  - The "Sign in" option now appears as a standalone menu item in the workspace list when the user is not authenticated.

- **Style**
  - Enhanced visual consistency for the "Sign in" menu item to better match the overall theme.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/frontend/core/src/components/workspace-selector/user-with-workspace-list/workspace-list/index.css.ts

@@ -74,3 +74,27 @@ export const serverDivider = style({
   marginTop: 8,
   marginBottom: 12,
 });
+
+export const signInMenuItemContent = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: 8,
+  padding: '0px 4px',
+});
+export const signInIconWrapper = style({
+  width: 30,
+  height: 30,
+  borderRadius: 6,
+  border: `1px solid ${cssVarV2.tab.divider.divider}`,
+  fontSize: 20,
+  color: cssVarV2.icon.primary,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+export const signInText = style({
+  fontSize: 14,
+  lineHeight: '22px',
+  fontWeight: 500,
+  color: cssVarV2.text.primary,
+});

packages/frontend/core/src/components/workspace-selector/user-with-workspace-list/workspace-list/index.tsx

@@ -50,7 +50,6 @@ const WorkspaceServerInfo = ({
   accountStatus,
   onDeleteServer,
   onSignOut,
-  onSignIn,
 }: {
   server: string;
   name: string;
@@ -58,7 +57,6 @@ const WorkspaceServerInfo = ({
   accountStatus?: 'authenticated' | 'unauthenticated';
   onDeleteServer?: () => void;
   onSignOut?: () => void;
-  onSignIn?: () => void;
 }) => {
   const t = useI18n();
   const isCloud = server !== 'local';
@@ -92,17 +90,8 @@ const WorkspaceServerInfo = ({
             {t['Sign out']()}
           </MenuItem>
         ),
-        accountStatus === 'unauthenticated' && (
-          <MenuItem
-            prefixIcon={<AccountIcon />}
-            key="sign-in"
-            onClick={onSignIn}
-          >
-            {t['Sign in']()}
-          </MenuItem>
-        ),
       ].filter(Boolean),
-    [accountStatus, onDeleteServer, onSignIn, onSignOut, server, t]
+    [accountStatus, onDeleteServer, onSignOut, server, t]
   );
 
   return (
@@ -141,6 +130,7 @@ const CloudWorkSpaceList = ({
   onClickWorkspace: (workspaceMetadata: WorkspaceMetadata) => void;
   onClickEnableCloud?: (meta: WorkspaceMetadata) => void;
 }) => {
+  const t = useI18n();
   const globalContextService = useService(GlobalContextService);
   const globalDialogService = useService(GlobalDialogService);
   const serverName = useLiveData(server.config$.selector(c => c.serverName));
@@ -190,8 +180,17 @@ const CloudWorkSpaceList = ({
         accountStatus={accountStatus}
         onDeleteServer={handleDeleteServer}
         onSignOut={handleSignOut}
-        onSignIn={handleSignIn}
       />
+      {accountStatus === 'unauthenticated' ? (
+        <MenuItem key="sign-in" onClick={handleSignIn}>
+          <div className={styles.signInMenuItemContent}>
+            <div className={styles.signInIconWrapper}>
+              <AccountIcon />
+            </div>
+            <div className={styles.signInText}>{t['Sign in']()}</div>
+          </div>
+        </MenuItem>
+      ) : null}
       <WorkspaceList
         items={workspaces}
         onClick={onClickWorkspace}