Optimize login user layout

resources/web/homepage/css/dark.css

@@ -39,7 +39,7 @@ body
 .BtnItem:hover
 {
 	color: #efeff0;
-	background-color: #223C3C;
+	background-color: var(--row-hover);
 }
 
 .BtnItem:hover .LeftIcon
@@ -50,7 +50,7 @@ body
 .BtnItemSelected
 {
 	color: #efeff0;
-	background-color: #223C3C;
+	background-color: var(--row-hover);
 }
 
 .BtnItemSelected .LeftIcon
@@ -129,12 +129,23 @@ body
     border: 1px solid rgba(129, 129, 131, 0.64);
 }
 
-/*--- Account Sections ---*/
+/*--- Account rows and account menu ---*/
-.AccountSectionLabel    { color: #818183; }
+:root
-.OrcaAccountText        { color: #efeff0; }
+{
-.AccountStatusText      { color: #818183; }
+	--row-hover            : #223C3C;
-
+	--warn-color           : #F07E4A;
-/*--- Bambu Cloud Section ---*/
+	--account-avatar-bg    : #3A3A40;
-#BambuCloudHeader       { color: #818183; }
+	--account-avatar-glyph : #7E8785;
-#BambuCloudHeader:hover { color: #efeff0; }
+	--account-surface      : #36363B;
-.bambu-chevron svg path { stroke: currentColor; }
+	--account-name         : #EFEFF0;
+	--account-meta         : #949494;
+	--account-border       : #4A4A51;
+	--account-divider      : #3A3A42;
+	--account-action       : #26A69A;
+	--account-danger       : #FF6A6A;
+	--account-danger-bg    : rgba(225, 71, 71, 0.16);
+	--account-warn-bg      : rgba(240, 126, 74, 0.16);  /*----var(--warn-color) at 16%----*/
+	--account-dot-off      : #5A5A62;
+	--account-dot-on       : #4CAF50;
+	--account-menu-shadow  : 0 10px 28px rgba(0, 0, 0, 0.45);
+}

resources/web/homepage/css/home.css

@@ -41,7 +41,7 @@ html, body {
 .RedFont
 {
 	font-size:12px;
-	color: #F07E4A;		
+	color: var(--warn-color);
 }
 
 .LinkBtn
@@ -78,129 +78,267 @@ body
 	height: 100%;
 }
 
-#LoginArea
+/*------Account rows and account menu------*/
+
+/*----These shadow similar tokens in global.css on purpose: global.css themes on the OS
+      via prefers-color-scheme, while this page themes on the dark.css link that
+      SwitchDarkMode() injects from the app theme, so the two can disagree.----*/
+:root
 {
-	display: flex;
+	--row-hover            : #BFE1DE;
-	flex-direction: column;
+	--warn-color           : #F07E4A;
-	align-items: center;
+	--account-avatar-bg    : #E6EBEA;
-	flex-wrap: nowrap;
+	--account-avatar-glyph : #9AA5A3;
-	position: relative;
+	--account-surface      : #FFFFFF;
-	width:262px;
+	--account-name         : #262E30;
+	--account-meta         : #7C8282;
+	--account-border       : #DBDBDB;
+	--account-divider      : #E2E4E4;
+	--account-action       : #00796B;
+	--account-danger       : #D33B3B;
+	--account-danger-bg    : rgba(211, 59, 59, 0.10);
+	--account-warn-bg      : rgba(240, 126, 74, 0.12);  /*----var(--warn-color) at 12%----*/
+	--account-dot-off      : #C4CBCA;
+	--account-dot-on       : #34A853;
+	--account-menu-shadow  : 0 10px 28px rgba(20, 30, 28, 0.18);
+
+	--glyph-account:
+		url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><circle cx="16" cy="12" r="5.6"/><path d="M4.9 29a11.1 11.1 0 0 1 22.2 0Z"/></svg>');
+	--glyph-logout:
+		url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="black" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 2.5H3.5v11h6"/><path d="M11 5.5L14 8l-3 2.5"/><path d="M14 8H6.5"/></svg>');
 }
 
-.AccountSectionLabel
+#LoginArea
+{
+	position: relative;
+	padding: 10px 8px;
+	box-sizing: border-box;
+	width: 262px;
+	border-bottom: 1px solid var(--account-divider);
+}
+
+.AccountRow
 {
 	display: flex;
 	align-items: center;
 	gap: 8px;
-	font-size: 13px;
+	padding: 8px 10px 8px 14px;  /*----label column lines up with the navigation below----*/
-	font-weight: 600;
+	border-radius: 8px;
-	color: var(--fg-color-text);
+	cursor: pointer;
-	padding: 16px 20px 6px;
-	width: 262px;
-	box-sizing: border-box;
-}
-
-.AccountSectionIcon
-{
-	width: 18px;
-	height: 18px;
-	flex: 0 0 auto;
-}
-
-.AccountStatusText
-{
-	font-size: 12px;
-	color: #A8A8A8;
-	margin-top: 8px;
-}
-
-.OrcaAccountText
-{
-	font-weight: bold;
-}
-
-#OrcaLoginSection
-{
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	width: 100%;
-}
-
-#OrcaLogin1
-{
-	display: flex;
-	flex-direction: column;		/*ORCA*/
-	align-items: center;		/*Allow icon centered vertically*/
-	justify-content: center;	/*and use login button in new line*/
 	user-select: none;
-	padding: 10px 0;
 }
 
-#OrcaLogin2
+.AccountRow:hover
+{
+	background-color: var(--row-hover);
+}
+
+.AccountRow:focus-visible
+{
+	outline: 2px solid var(--account-action);
+	outline-offset: -2px;
+}
+
+.AccountRow.Disabled
+{
+	cursor: default;
+	opacity: 0.5;
+}
+
+.AccountRow.Disabled:hover
+{
+	background-color: transparent;
+}
+
+.AccountRow.Disabled .AccountSignIn
 {
 	display: none;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	text-align: center;
-	padding: 14px 0 16px;
-	box-sizing: border-box;
-	width: 262px;
 }
 
-/* --- Bambu Cloud Section --- */
+/*----Avatar----*/
+.AccountAvatar
+{
+	position: relative;
+	flex: 0 0 auto;
+	width: 36px;
+	height: 36px;
+	border-radius: 50%;
+	background-color: var(--account-avatar-bg);
+}
+
+.AccountAvatar::before  /* placeholder shown until an avatar image loads */
+{
+	content: "";
+	position: absolute;
+	inset: 0;
+	-webkit-mask-image: var(--glyph-account);
+	mask-image: var(--glyph-account);
+	-webkit-mask-size: 100% 100%;
+	mask-size: 100% 100%;
+	background-color: var(--account-avatar-glyph);
+}
+
+.AccountAvatarImg
+{
+	position: absolute;
+	inset: 0;
+	width: 100%;
+	height: 100%;
+	border-radius: 50%;
+	object-fit: cover;
+	display: block;
+}
+
+.AccountAvatarImg:not([src])
+{
+	display: none;
+}
+
+/*----Row labels----*/
+.AccountText
+{
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	flex: 1 1 auto;
+	min-width: 0;
+}
+
+.AccountName,
+.AccountSecondary  /*----the provider name, or the sign-in state where the row has no name yet----*/
+{
+	font-size: 15px;
+	line-height: 20px;
+	color: var(--account-name);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.AccountName
+{
+	display: none;
+	font-weight: 600;
+}
+
+.AccountSignIn
+{
+	flex: 0 0 auto;
+	font-size: 12px;
+	font-weight: 600;
+	color: var(--account-action);
+}
+
+.AccountChevron
+{
+	display: none;
+	flex: 0 0 auto;
+	width: 12px;
+	height: 12px;
+	color: var(--account-meta);
+	transition: transform 0.15s ease;
+}
+
+.AccountRow.SignedIn .AccountName    { display: block; }
+.AccountRow.SignedIn .AccountChevron { display: block; }
+.AccountRow.SignedIn .AccountSignIn  { display: none; }
+.AccountRow.SignedIn .AccountSecondary
+{
+	font-size: 11px;
+	line-height: 14px;
+	color: var(--account-meta);
+}
+
+.AccountRow.MenuOpen .AccountChevron { transform: rotate(180deg); }
+
+#NoPluginTip
+{
+	display: none;
+	margin: 4px 0 2px;
+	padding: 8px 10px;
+	border-radius: 6px;
+	background-color: var(--account-warn-bg);
+}
+
+#NoPluginText
+{
+	line-height: 16px;
+}
+
+#NoPluginTip .LinkBtn
+{
+	color: var(--warn-color);
+	text-decoration: underline;
+}
+
+/*----Bambu Cloud, folded under the main account----*/
 #BambuCloudSection
 {
 	display: none;  /* shown by cloud_providers_info from backend */
-	border-top: 1px solid;
+	margin-top: 8px;
-	width: 262px;
+	padding-top: 6px;
+	border-top: 1px solid var(--account-divider);
 }
 
 #BambuCloudHeader
 {
-	height: 40px;
 	display: flex;
 	align-items: center;
-	padding: 0 20px;
-	cursor: pointer;
-	font-size: 13px;
-	color: #A8A8A8;
 	gap: 8px;
+	height: 28px;
+	padding: 0 10px 0 14px;
+	border-radius: 6px;
+	font-size: 12px;
+	color: var(--account-meta);
+	cursor: pointer;
+	user-select: none;
 }
 
 #BambuCloudHeader:hover
 {
-	color: inherit;
+	color: var(--account-name);
 }
 
-.bambu-chevron
+#BambuCloudHeader:focus-visible
 {
+	outline: 2px solid var(--account-action);
+	outline-offset: -2px;
+}
+
+.SectionChevron
+{
+	flex: 0 0 auto;
 	width: 12px;
 	height: 12px;
 	transition: transform 0.2s ease;
-	transform: rotate(0deg);
 }
 
-.bambu-chevron.expanded
+#BambuCloudHeader.Expanded .SectionChevron
 {
 	transform: rotate(90deg);
 }
 
-.bambu-status-dot
+.SectionLabel
 {
-	width: 8px;
+	flex: 1 1 auto;
-	height: 8px;
+	min-width: 0;
-	border-radius: 50%;
+	white-space: nowrap;
-	background-color: #A8A8A8;
+	overflow: hidden;
-	margin-left: auto;
+	text-overflow: ellipsis;
 }
 
-.bambu-status-dot.online
+#BambuStatusDot
 {
-	background-color: #4CAF50;
+	flex: 0 0 auto;
+	width: 7px;
+	height: 7px;
+	border-radius: 50%;
+	background-color: var(--account-dot-off);
+}
+
+#BambuStatusDot.Online
+{
+	background-color: var(--account-dot-on);
 }
 
 #BambuCloudBody
@@ -208,99 +346,125 @@ body
 	max-height: 0;
 	overflow: hidden;
 	transition: max-height 0.25s ease;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
 }
 
-#BambuCloudBody.expanded
+#BambuCloudBody.Expanded
 {
 	max-height: 200px;
+	padding-bottom: 2px;
 }
 
-#NoPluginTip
+.AccountRowCompact
 {
-	position: static;
+	padding: 6px 10px 6px 24px;
-	display: none;
-	flex-direction: column;
-	padding: 5px 10px;
-	z-index: auto;
 }
 
-#BambuLogin1
+.AccountRowCompact .AccountAvatar
 {
-	padding: 10px 0;
+	width: 26px;
+	height: 26px;
 }
 
-#BambuLogin2
+.AccountRowCompact .AccountName,
+.AccountRowCompact .AccountSecondary
 {
-	display: none;
-	flex-direction: column;
-	align-items: center;
-	text-align: center;
-	padding: 8px 0;
-	width: 262px;
-}
-
-#BambuAvatarIcon
-{
-	height: 40px;
-	border-radius: 50%;
-}
-
-#BambuUserName
-{
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	overflow: hidden;
-	width: 80%;
-	text-align: center;
 	font-size: 13px;
+	line-height: 17px;
 }
 
-
+.AccountRowCompact .AccountSecondary
-#DownloadBtn
 {
-	color:#00ffd9;
+	color: var(--account-meta);
 }
 
-
+.AccountRowCompact.SignedIn .AccountSecondary  /*----the section header already names this provider----*/
-#Icon1
 {
-	margin-right: 10px;	
+	display: none;
 }
 
-#BBLIcon
+/*----Account menu----*/
+#AccountMenu
 {
-	height:96px; /*ORCA use bigger icon to fit logo size*/
+	display: none;
+	position: absolute;
+	left: 8px;
+	right: 8px;
+	z-index: 20;
+	padding: 4px;
+	border-radius: 10px;
+	border: 1px solid var(--account-border);
+	background-color: var(--account-surface);
+	box-shadow: var(--account-menu-shadow);
 }
 
-#UserAvatarIcon
+#AccountMenu.Open
 {
-	width: 64px;
-	height: 64px;
 	display: block;
-	margin: 2px auto 10px;
+	animation: AccountMenuIn 0.12s ease-out;
-	object-fit: cover;
-	border-radius: 50%;
 }
 
-#UserName
+@keyframes AccountMenuIn
 {
+	from { opacity: 0; transform: translateY(-4px); }
+	to   { opacity: 1; transform: none; }
+}
+
+@media (prefers-reduced-motion: reduce)
+{
+	#AccountMenu.Open   { animation: none; }
+	.AccountChevron,
+	.SectionChevron,
+	#BambuCloudBody     { transition: none; }
+}
+
+#AccountMenuHandle
+{
+	display: none;
+	padding: 9px 10px;
+	border-bottom: 1px solid var(--account-border);
+	font-size: 12px;
+	line-height: 16px;
+	color: var(--account-meta);
 	white-space: nowrap;
-	text-overflow: ellipsis;
-	text-align: center;
 	overflow: hidden;
-	width: 80%;
+	text-overflow: ellipsis;
-	max-width: 190px;
-	line-height: 22px;
 }
 
-#LogoutBtn
+#AccountMenuLogout
 {
-	margin-top: 8px;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	height: 34px;
+	padding: 0 10px;
+	border-radius: 6px;
+	font-size: 13px;
+	color: var(--account-name);
+	cursor: pointer;
 }
 
+#AccountMenuLogout:hover
+{
+	background-color: var(--account-danger-bg);
+	color: var(--account-danger);
+}
+
+#AccountMenuLogout:focus-visible
+{
+	outline: 2px solid var(--account-action);
+	outline-offset: -2px;
+}
+
+#AccountMenuLogoutIcon
+{
+	width: 15px;
+	height: 15px;
+	-webkit-mask: var(--glyph-logout) center / contain no-repeat;
+	mask: var(--glyph-logout) center / contain no-repeat;
+	background-color: currentColor;
+}
+
+
 /*------------------*/
 #BtnArea
 {
@@ -320,12 +484,12 @@ body
 
 .BtnItem:hover
 {
-	background-color: #BFE1DE; /*ORCA color with %25 opacity*/
+	background-color: var(--row-hover);
 }
 
 .BtnItemSelected
 {
-	background-color: #BFE1DE; /*ORCA color with %25 opacity*/
+	background-color: var(--row-hover);
 }
 
 .BtnIcon

resources/web/homepage/index.html

@@ -23,56 +23,65 @@
 <div id="LeftBoard">
 	<div id="LoginArea">
 
-	<!-- Orca Login Section -->
+		<!-- Orca Cloud account -->
-	<div id="OrcaSectionLabel" class="AccountSectionLabel">
+		<div id="OrcaAccount" class="AccountRow" tabindex="0" role="button" aria-haspopup="true" aria-expanded="false"
-		<img class="AccountSectionIcon" src="../../images/OrcaSlicer_gradient_circle.svg" alt="" />
+			 onClick="OnAccountRowClick('orca')">
-		<span class="trans OrcaAccountText" tid="orca7">Orca Cloud</span>
+			<span class="AccountAvatar">
-	</div>
+				<img id="UserAvatarIcon" class="AccountAvatarImg" alt="" onerror="OnAvatarLoadError(this)" />
-
+			</span>
-		<div id="OrcaLoginSection">
+			<span class="AccountText">
-			<div id="OrcaLogin1">
+				<span id="UserName" class="AccountName"></span>
-				<div id="Icon1"><img id="BBLIcon" src="../image/logo.png" /></div> <!-- ORCA use square icon for better consistency on UI -->
+				<span class="AccountSecondary">Orca Cloud</span>
-				<div id="LoginBtn" class="ButtonStyleRegular ButtonTypeWindow" onClick="OnLoginOrRegister()"><span class="trans" tid="t26">login</span> / <span class="trans" tid="t27">register</span></div>
+			</span>
-				<div id="OrcaStatusText" class="AccountStatusText trans" tid="orca8">Not signed in</div>
+			<span class="AccountSignIn trans" tid="t26">Login</span>
-			</div>
+			<svg class="AccountChevron" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-
+				<path d="M3 4.75L6 7.75L9 4.75" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
-		<div id="OrcaLogin2">
-			<div>
-				<img id="UserAvatarIcon" src="img/c.jpg" onerror="this.onerror=null;this.src='img/c.jpg';" />
-			</div>
-			<div id="UserName" class="TextS1"></div>
-			<div id="LogoutBtn" class="ButtonStyleAlert ButtonTypeWindow trans" tid="t50" onClick="OnLogOut()">log out</div>
-		</div>
-	</div>
-
-	<!-- Bambu Cloud Section -->
-	<div id="BambuCloudSection">
-		<div id="BambuCloudHeader" onClick="ToggleBambuSection()">
-			<svg class="bambu-chevron" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-				<path d="M4.5 2.5L8 6L4.5 9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 			</svg>
-			<span class="trans" tid="orca6">Bambu Cloud</span>
-			<span class="bambu-status-dot"></span>
 		</div>
 
-		<div id="BambuCloudBody">
+		<!-- Bambu Cloud, a secondary provider folded away under the main account -->
-			<div id="BambuLogin1">
+		<div id="BambuCloudSection">
-				<div id="BambuLoginBtn" class="ButtonStyleRegular ButtonTypeWindow" onClick="OnBambuLoginOrRegister()"><span class="trans" tid="t26">login</span></div>
+			<div id="BambuCloudHeader" tabindex="0" role="button" aria-expanded="false" aria-controls="BambuCloudBody"
+				 onClick="ToggleBambuSection()">
+				<svg class="SectionChevron" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+					<path d="M4.5 2.5L8 6L4.5 9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+				</svg>
+				<span class="SectionLabel trans" tid="orca6">Bambu Cloud</span>
+				<span id="BambuStatusDot"></span>
 			</div>
 
-			<div id="BambuLogin2">
+			<div id="BambuCloudBody">
-				<div>
+				<div id="BambuAccount" class="AccountRow AccountRowCompact" tabindex="0" role="button" aria-haspopup="true" aria-expanded="false"
-					<img id="BambuAvatarIcon" src="img/c.jpg" onerror="this.onerror=null;this.src='img/c.jpg';" />
+					 onClick="OnAccountRowClick('bambu')">
+					<span class="AccountAvatar">
+						<img id="BambuAvatarIcon" class="AccountAvatarImg" alt="" onerror="OnAvatarLoadError(this)" />
+					</span>
+					<span class="AccountText">
+						<span id="BambuUserName" class="AccountName"></span>
+						<span class="AccountSecondary trans" tid="orca8">Not signed in</span>
+					</span>
+					<span class="AccountSignIn trans" tid="t26">Login</span>
+					<svg class="AccountChevron" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+						<path d="M3 4.75L6 7.75L9 4.75" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
+					</svg>
 				</div>
-				<div id="BambuUserName" class="TextS1"></div>
-				<div id="BambuLogoutBtn" class="ButtonStyleAlert ButtonTypeWindow trans" tid="t50" onClick="OnBambuLogOut()">log out</div>
-			</div>
 
-			<div id="NoPluginTip">
+				<div id="NoPluginTip">
-				<div id="NoPluginText"><a class="RedFont trans" tid="t76">Network plugin not detected. Click </a><a Class="LinkBtn trans" onClick="BeginDownloadNetworkPlugin()" tid="t77">here</a><a class="RedFont trans" tid="t78"> to install it.</a></div>
+					<div id="NoPluginText"><a class="RedFont trans" tid="t76">Network plugin not detected. Click </a><a Class="LinkBtn trans" onClick="BeginDownloadNetworkPlugin()" tid="t77">here</a><a class="RedFont trans" tid="t78"> to install it.</a></div>
+				</div>
+			</div>
+		</div>
+
+		<!-- Shared account menu, anchored under the row it was opened from.
+		     The row already carries the avatar, name and provider, so the menu only
+		     adds the account handle. -->
+		<div id="AccountMenu" role="menu">
+			<div id="AccountMenuHandle" role="presentation"></div>
+			<div id="AccountMenuLogout" role="menuitem" tabindex="0" onClick="OnAccountMenuLogout()">
+				<span id="AccountMenuLogoutIcon"></span>
+				<span class="trans" tid="t50">Log out</span>
 			</div>
 		</div>
-	</div>
 
 	</div>
 

resources/web/homepage/js/home.js

@@ -1,7 +1,6 @@
 //var TestData={"sequence_id":"0","command":"get_recent_projects","response":[{"path":"D:\\work\\Models\\Toy\\3d-puzzle-cube-model_files\\3d-puzzle-cube.3mf","time":"2022\/3\/24 20:33:10"},{"path":"D:\\work\\Models\\Art\\Carved Stone Vase - remeshed+drainage\\Carved Stone Vase.3mf","time":"2022\/3\/24 17:11:51"},{"path":"D:\\work\\Models\\Art\\Kity & Cat\\Cat.3mf","time":"2022\/3\/24 17:07:55"},{"path":"D:\\work\\Models\\Toy\\鐩村墤.3mf","time":"2022\/3\/24 17:06:02"},{"path":"D:\\work\\Models\\Toy\\minimalistic-dual-tone-whistle-model_files\\minimalistic-dual-tone-whistle.3mf","time":"2022\/3\/22 21:12:22"},{"path":"D:\\work\\Models\\Toy\\spiral-city-model_files\\spiral-city.3mf","time":"2022\/3\/22 18:58:37"},{"path":"D:\\work\\Models\\Toy\\impossible-dovetail-puzzle-box-model_files\\impossible-dovetail-puzzle-box.3mf","time":"2022\/3\/22 20:08:40"}]};
 
 var m_HotModelList=null;
-var bambuSectionExpanded = false;
 
 function OnInit()
 {
@@ -12,6 +11,8 @@ function OnInit()
 	SendMsg_GetBambuLoginInfo();
 	SendMsg_GetRecentFile();
 	SendMsg_GetStaffPick();
+
+	Set_AccountMenu_Event();
 }
 
 //------最佳打开文件的右键菜单功能----------
@@ -89,7 +90,7 @@ function HandleStudio( pVal )
 	if (strCmd == "get_recent_projects") {
     ShowRecentFileList(pVal["response"]);
   } else if (strCmd == "orca_userlogin") {
-    SetOrcaLoginInfo(pVal["data"]["avatar"], pVal["data"]["name"]);
+    SetOrcaLoginInfo(pVal["data"]["avatar"], pVal["data"]["name"], pVal["data"]["account"]);
   } else if (strCmd == "orca_useroffline") {
     SetOrcaUserOffline();
   } else if (strCmd == "studio_bambu_userlogin") {
@@ -118,21 +119,12 @@ function HandleStudio( pVal )
       $("#LeftBoard").hide();
     }
   } else if (strCmd == "network_plugin_installtip") {
-    let nShow = pVal["show"] * 1;
+    // Bambu Cloud is unreachable without the network plugin, so its row only carries the tip.
+    let bMissing = pVal["show"] * 1 == 1;
 
-    if (nShow == 1) {
+    $("#NoPluginTip").css("display", bMissing ? "block" : "none");
-      // Auto-expand Bambu section to show the tip
+    $("#BambuAccount").toggleClass("Disabled", bMissing).attr("aria-disabled", bMissing ? "true" : null);
-      if (!bambuSectionExpanded) ToggleBambuSection();
+    if (bMissing) SetBambuSectionExpanded(true, false);
-      $("#BambuLogin1").hide();
-      $("#NoPluginTip").show();
-      $("#NoPluginTip").css("display", "flex");
-    } else {
-      $("#NoPluginTip").hide();
-      // Only restore login button if not already logged in
-      if ($("#BambuLogin2").is(":hidden")) {
-        $("#BambuLogin1").show();
-      }
-    }
   } else if (strCmd == "modelmall_model_advise_get") {
     //alert('hot');
     if (m_HotModelList != null) {
@@ -170,34 +162,128 @@ function GotoMenu( strMenu )
 	}
 }
 
-function SetOrcaLoginInfo( strAvatar, strName )
+/*------Account rows------*/
-{
-	$("#OrcaLogin1").hide();
-	$("#OrcaStatusText").hide();
 
-	$("#UserName").text(strName);
+/*----Everything that differs between the two cloud providers lives here----*/
+var AccountRows = {
+  orca:  { row: "#OrcaAccount",  name: "#UserName",      avatar: "#UserAvatarIcon",  dot: null,
+           loginCmd: "homepage_orca_login_or_register",  logoutCmd: "homepage_orca_logout" },
+  bambu: { row: "#BambuAccount", name: "#BambuUserName", avatar: "#BambuAvatarIcon", dot: "#BambuStatusDot",
+           loginCmd: "homepage_bambu_login_or_register", logoutCmd: "homepage_bambu_logout" }
+};
 
-    let OriginAvatar=$("#UserAvatarIcon").prop("src");
+var BAMBU_FOLD_KEY = "OrcaHome_BambuCloudExpanded";
-	if(strAvatar != null && strAvatar.trim() !== '' && strAvatar!=OriginAvatar)
-		$("#UserAvatarIcon").prop("src",strAvatar);
-	else
-	{
-		//alert('Avatar is Same');
-	}
 
-	$("#OrcaLogin2").show();
+var m_OpenAccountMenu = null;
-	$("#OrcaLogin2").css("display","flex");
+
+function SetAccountAvatar(selector, strAvatar) {
+  if (strAvatar != null && strAvatar.trim() !== '') {
+    if ($(selector).attr("src") !== strAvatar) $(selector).attr("src", strAvatar);
+  } else {
+    $(selector).removeAttr("src");
+  }
 }
 
-function SetOrcaUserOffline()
+function OnAvatarLoadError(img) {
-{
+  img.removeAttribute("src");  // fall back to the placeholder glyph
-	$("#UserAvatarIcon").prop("src","img/c.jpg");
+}
-	$("#UserName").text('');
-	$("#OrcaLogin2").hide();
 
-	$("#OrcaLogin1").show();
+function SetAccountSignedIn(strProvider, strAvatar, strName, strHandle) {
-	$("#OrcaLogin1").css("display","flex");
+  var account = AccountRows[strProvider];
-	$("#OrcaStatusText").show();
+
+  $(account.name).text(strName).attr("title", strName);  /*----long names are ellipsized----*/
+  SetAccountAvatar(account.avatar, strAvatar);
+  /*----the handle is the one thing the row does not already show----*/
+  $(account.row).addClass("SignedIn").data("handle", strHandle !== strName ? strHandle : null);
+  $(account.dot).addClass("Online");
+
+  if (m_OpenAccountMenu === strProvider) OpenAccountMenu(strProvider);
+}
+
+function SetAccountSignedOut(strProvider) {
+  var account = AccountRows[strProvider];
+
+  if (m_OpenAccountMenu === strProvider) CloseAccountMenu();
+  $(account.name).text('').removeAttr("title");
+  SetAccountAvatar(account.avatar, null);
+  $(account.row).removeClass("SignedIn").removeData("handle");
+  $(account.dot).removeClass("Online");
+}
+
+function OnAccountRowClick(strProvider) {
+  var account = AccountRows[strProvider];
+  var row = $(account.row);
+  if (row.hasClass("Disabled")) return;
+
+  if (!row.hasClass("SignedIn")) {
+    CloseAccountMenu();
+    SendSimpleCommand(account.loginCmd);
+  } else if (m_OpenAccountMenu === strProvider) {
+    CloseAccountMenu();
+  } else {
+    OpenAccountMenu(strProvider);
+  }
+}
+
+function OpenAccountMenu(strProvider) {
+  var account = AccountRows[strProvider];
+  var row = $(account.row);
+  var top = row[0].offsetTop + row[0].offsetHeight + 6;  /*----read the geometry before writing----*/
+  var strHandle = row.data("handle") || "";
+
+  $("#AccountMenuHandle").text(strHandle).css("display", strHandle === "" ? "none" : "block");
+  $("#AccountMenu").css("top", top + "px").addClass("Open");
+  $(".AccountRow").removeClass("MenuOpen").attr("aria-expanded", "false");
+  row.addClass("MenuOpen").attr("aria-expanded", "true");
+  m_OpenAccountMenu = strProvider;
+}
+
+function CloseAccountMenu() {
+  $("#AccountMenu").removeClass("Open");
+  $(".AccountRow").removeClass("MenuOpen").attr("aria-expanded", "false");
+  m_OpenAccountMenu = null;
+}
+
+function OnAccountMenuLogout() {
+  var account = AccountRows[m_OpenAccountMenu];
+  CloseAccountMenu();
+  if (account) SendSimpleCommand(account.logoutCmd);
+}
+
+/*----Bambu Cloud is secondary, so its account folds away under the main one----*/
+function SetBambuSectionExpanded(bExpanded, bPersist) {
+  $("#BambuCloudBody").toggleClass("Expanded", bExpanded);
+  $("#BambuAccount").attr("tabindex", bExpanded ? "0" : "-1");  /*----keep the folded row out of the tab order----*/
+  $("#BambuCloudHeader").toggleClass("Expanded", bExpanded).attr("aria-expanded", bExpanded ? "true" : "false");
+  if (!bExpanded && m_OpenAccountMenu === "bambu") CloseAccountMenu();
+  // Best effort: the fold is a per-machine convenience, not a synced preference.
+  if (bPersist) { try { localStorage.setItem(BAMBU_FOLD_KEY, bExpanded ? "1" : "0"); } catch (e) {} }
+}
+
+function ToggleBambuSection() {
+  SetBambuSectionExpanded(!$("#BambuCloudBody").hasClass("Expanded"), true);
+}
+
+function Set_AccountMenu_Event() {
+  var bExpanded = false;
+  try { bExpanded = localStorage.getItem(BAMBU_FOLD_KEY) === "1"; } catch (e) {}
+  SetBambuSectionExpanded(bExpanded, false);
+
+  $(document).mousedown(function (e) {
+    if (m_OpenAccountMenu === null) return;
+    if ($(e.target).closest("#AccountMenu, .AccountRow").length === 0) CloseAccountMenu();
+  });
+
+  $(document).keydown(function (e) {
+    if (m_OpenAccountMenu !== null && e.key === "Escape") CloseAccountMenu();
+  });
+
+  /*----Enter and Space activate the div-based buttons of this panel----*/
+  $(document).on("keydown", "#LoginArea [role=button], #LoginArea [role=menuitem]", function (e) {
+    if (e.key !== "Enter" && e.key !== " " && e.key !== "Spacebar") return;
+    e.preventDefault();
+    this.click();
+  });
 }
 
 function SetMallUrl( strUrl )
@@ -279,8 +365,6 @@ function SendSimpleCommand(command) {
   SendWXMessage(JSON.stringify(tSend));
 }
 
-function OnOrcaLoginOrRegister() { SendSimpleCommand("homepage_orca_login_or_register"); }
-function OnOrcaLogOut() { SendSimpleCommand("homepage_orca_logout"); }
 function SendMsg_GetOrcaLoginInfo() { SendSimpleCommand("get_orca_login_info"); }
 
 
@@ -294,15 +378,6 @@ function SendMsg_GetRecentFile()
 }
 
 
-function OnLoginOrRegister()
-{
-	var tSend={};
-	tSend['sequence_id']=Math.round(new Date() / 1000);
-	tSend['command']="homepage_login_or_register";
-	
-	SendWXMessage( JSON.stringify(tSend) );	
-}
-
 function OnClickModelDepot()
 {
 	var tSend={};
@@ -405,59 +480,13 @@ function OnExploreRecentFile( )
 	$("#recnet_context_menu").hide();
 }
 
-function OnLogOut()
+// --- Cloud providers ---
-{
-	var tSend={};
-	tSend['sequence_id']=Math.round(new Date() / 1000);
-	tSend['command']="homepage_logout";
 
-	SendWXMessage( JSON.stringify(tSend) );
+function SetOrcaLoginInfo(strAvatar, strName, strAccount) { SetAccountSignedIn("orca", strAvatar, strName, strAccount); }
-}
+function SetOrcaUserOffline() { SetAccountSignedOut("orca"); }
+function SetBambuLoginInfo(strAvatar, strName) { SetAccountSignedIn("bambu", strAvatar, strName, null); }
+function SetBambuUserOffline() { SetAccountSignedOut("bambu"); }
 
-// --- Bambu Cloud Section ---
-
-function ToggleBambuSection() {
-  var body = document.getElementById('BambuCloudBody');
-  var chevron = document.querySelector('.bambu-chevron');
-  if (!body || !chevron) return;
-  bambuSectionExpanded = !bambuSectionExpanded;
-  if (bambuSectionExpanded) {
-    body.classList.add('expanded');
-    chevron.classList.add('expanded');
-  } else {
-    body.classList.remove('expanded');
-    chevron.classList.remove('expanded');
-  }
-}
-
-function SetBambuLoginInfo(strAvatar, strName) {
-  $("#BambuLogin1").hide();
-  $("#BambuUserName").text(strName);
-  if (strAvatar && strAvatar.trim() !== '') {
-    $("#BambuAvatarIcon").prop("src", strAvatar);
-  }
-  $("#BambuLogin2").show();
-  $("#BambuLogin2").css("display", "flex");
-  $(".bambu-status-dot").addClass("online");
-  $("#BambuStatusText").text("Connected");
-  $("#BambuStatusText").attr("tid", "orca11");
-}
-
-function SetBambuUserOffline() {
-  $("#BambuAvatarIcon").prop("src", "img/c.jpg");
-  $("#BambuUserName").text('');
-  $("#BambuLogin2").hide();
-  if ($("#NoPluginTip").is(":hidden")) {
-    $("#BambuLogin1").show();
-    $("#BambuLogin1").css("display", "flex");
-  }
-  $(".bambu-status-dot").removeClass("online");
-  $("#BambuStatusText").text("Not connected");
-  $("#BambuStatusText").attr("tid", "orca10");
-}
-
-function OnBambuLoginOrRegister() { SendSimpleCommand("homepage_bambu_login_or_register"); }
-function OnBambuLogOut() { SendSimpleCommand("homepage_bambu_logout"); }
 function SendMsg_GetBambuLoginInfo() { SendSimpleCommand("get_bambu_login_info"); }
 
 function BeginDownloadNetworkPlugin()

src/slic3r/Utils/OrcaCloudServiceAgent.cpp

@@ -859,9 +859,11 @@ std::string OrcaCloudServiceAgent::build_login_cmd()
             display_name = "unknown name";
         }
         json cmd;
-        cmd["command"]        = "orca_userlogin";
+        cmd["command"]         = "orca_userlogin";
-        cmd["data"]["name"]   = display_name;
+        cmd["data"]["name"]    = display_name;
-        cmd["data"]["avatar"] = get_user_avatar();
+        cmd["data"]["avatar"]  = get_user_avatar();
+        // The unique handle, shown under the display name in the homepage account menu.
+        cmd["data"]["account"] = get_user_name();
         return cmd.dump();
     }