Add save account warning for temporary users

src/gui/src/UI/Dashboard/TabHome.js

@@ -17,6 +17,8 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+import UIWindowSaveAccount from '../UIWindowSaveAccount.js';
+
 function getTimeGreeting () {
     const hour = new Date().getHours();
     if ( hour < 12 ) return 'Good morning';
@@ -132,8 +134,15 @@ const TabHome = {
                 h += `<div class="bento-welcome-content">`;
                     h += `<div class="bento-welcome-avatar profile-pic" style="background-image: url(${html_encode(profilePicture)})"></div>`;
                     h += `<span class="bento-greeting">${greeting},</span>`;
-                    h += `<h1 class="bento-username">${html_encode(username)}</h1>`;
+                    h += `<h1 class="bento-username username">${html_encode(username)}</h1>`;
                     h += '<p class="bento-tagline">Your personal cloud computer</p>';
+                    // Show warning if account is temporary/unsaved
+                    if ( window.user?.is_temp ) {
+                        h += '<button class="bento-save-account-warning">';
+                            h += `<svg style="width: 16px; height: 16px;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g transform="translate(0, 0)"><path d="M45.521,39.04L27.527,5.134c-1.021-1.948-3.427-2.699-5.375-1.679-.717,.376-1.303,.961-1.679,1.679L2.479,39.04c-.676,1.264-.635,2.791,.108,4.017,.716,1.207,2.017,1.946,3.42,1.943H41.993c1.403,.003,2.704-.736,3.42-1.943,.743-1.226,.784-2.753,.108-4.017ZM23.032,15h1.937c.565,0,1.017,.467,1,1.031l-.438,14c-.017,.54-.459,.969-1,.969h-1.062c-.54,0-.983-.429-1-.969l-.438-14c-.018-.564,.435-1.031,1-1.031Zm.968,25c-1.657,0-3-1.343-3-3s1.343-3,3-3,3,1.343,3,3-1.343,3-3,3Z" fill="#ffbb00"></path></g></svg>`;
+                            h += `<span>${i18n('save_session')}</span>`;
+                        h += '</button>';
+                    }
                 h += '</div>';
             h += '</div>';
         h += '</div>';
@@ -207,6 +216,25 @@ const TabHome = {
                 $el_window.find(`.dashboard-sidebar-item[data-section="${targetTab}"]`).click();
             }
         });
+
+        // Handle "Save Account" warning click
+        $el_window.on('click', '.bento-save-account-warning', function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+            UIWindowSaveAccount({
+                window_options: {
+                    backdrop: true,
+                    close_on_backdrop_click: true,
+                    parent_center: true,
+                    stay_on_top: true,
+                    has_head: false,
+                },
+            }).then(function (is_saved) {
+                if ( is_saved ) {
+                    $el_window.find('.bento-save-account-warning').hide();
+                }
+            });
+        });
     },
 
     async loadRecentApps ($el_window) {

src/gui/src/css/style.css

@@ -5952,6 +5952,38 @@ html.dark-mode .usage-table-show-less:hover {
     font-weight: 400;
 }
 
+.bento-save-account-warning {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    margin-top: 12px;
+    padding: 8px 14px;
+    background-color: #fef3c7;
+    border: 1px solid #f59e0b;
+    border-radius: 8px;
+    color: #92400e;
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    text-decoration: none;
+    transition: all 0.15s ease;
+}
+
+.bento-save-account-warning:hover {
+    background-color: #fde68a;
+    border-color: #d97706;
+    color: #78350f;
+}
+
+.bento-save-account-warning svg {
+    flex-shrink: 0;
+    color: #f59e0b;
+}
+
+.bento-save-account-warning:hover svg {
+    color: #d97706;
+}
+
 /* Recent Apps Card - Rectangle */
 .bento-recent {
     min-height: 310px;