refine onboarding steps and app layout

backend/atlas_portal/routes/access_requests.py

@@ -59,6 +59,7 @@ def _verify_url(request_code: str, token: str) -> str:
 ONBOARDING_STEPS: tuple[str, ...] = (
     "vaultwarden_master_password",
     "vaultwarden_browser_extension",
+    "vaultwarden_desktop_app",
     "vaultwarden_mobile_app",
     "keycloak_password_rotated",
     "keycloak_mfa_optional",

frontend/src/views/AccountView.vue

@@ -549,7 +549,7 @@ async function copy(key, text) {
   flex-wrap: wrap;
   align-items: center;
   justify-content: flex-end;
-  gap: 24px;
+  gap: 28px;
 }
 
 .divider {
@@ -591,15 +591,16 @@ h1 {
 }
 
 .account-stack {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-rows: repeat(2, minmax(0, 1fr));
   gap: 12px;
   height: 100%;
 }
 
 .account-stack .module {
-  flex: 1 1 0;
   min-height: 0;
+  display: flex;
+  flex-direction: column;
 }
 
 .module {
@@ -702,7 +703,7 @@ button.primary {
 }
 
 .jellyfin-detail {
-  margin-top: 12px;
+  margin-top: auto;
 }
 
 .copy {

frontend/src/views/AppsView.vue

@@ -194,6 +194,8 @@ const sections = [
 
 .category {
   padding: 18px;
+  display: flex;
+  flex-direction: column;
 }
 
 .section-head {
@@ -202,8 +204,7 @@ const sections = [
   justify-content: space-between;
   gap: 18px;
   margin-bottom: 14px;
-  height: 92px;
-  overflow: hidden;
+  min-height: 92px;
 }
 
 .group + .group {
@@ -228,10 +229,16 @@ const sections = [
 
 .tiles {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  grid-template-columns: 1fr;
   gap: 12px;
 }
 
+@media (min-width: 680px) {
+  .tiles {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
 .tile {
   display: block;
   text-decoration: none;

frontend/src/views/OnboardingView.vue

@@ -166,6 +166,25 @@
             </p>
           </li>
 
+          <li class="check-item" :class="checkItemClass('vaultwarden_desktop_app')">
+            <label>
+              <input
+                type="checkbox"
+                :checked="isStepDone('vaultwarden_desktop_app')"
+                :disabled="!auth.authenticated || loading || isStepBlocked('vaultwarden_desktop_app')"
+                @change="toggleStep('vaultwarden_desktop_app', $event)"
+              />
+              <span>Install the Vaultwarden desktop app</span>
+              <span class="pill mono auto-pill" :class="stepPillClass('vaultwarden_desktop_app')">
+                {{ stepPillLabel("vaultwarden_desktop_app") }}
+              </span>
+            </label>
+            <p class="muted">
+              Install the Bitwarden desktop app and set the server to vault.bstein.dev (Settings → Account → Environment → Self-hosted).
+              <a href="https://bitwarden.com/download" target="_blank" rel="noreferrer">Bitwarden downloads</a>.
+            </p>
+          </li>
+
           <li class="check-item" :class="checkItemClass('vaultwarden_mobile_app')">
             <label>
               <input
@@ -208,7 +227,14 @@
               >
                 Enable rotation
               </button>
-              <a class="mono" href="https://sso.bstein.dev/realms/atlas/account" target="_blank" rel="noreferrer">Open Keycloak</a>
+              <a
+                class="mono"
+                href="https://sso.bstein.dev/realms/atlas/account/#/security/signing-in"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Open Keycloak
+              </a>
             </div>
             <p class="muted">
               After Vaultwarden is set up, rotate your Keycloak password to a strong one and store it in Vaultwarden.
@@ -399,7 +425,8 @@ const extraSteps = [
   {
     id: "elementx_setup",
     title: "Install Element X and sign in",
-    description: "Install Element X on mobile and sign in with your Atlas username/password to join rooms and calls.",
+    description:
+      "Install Element X on mobile and sign in with your Atlas username/password. Use Element Web → Settings → Sessions to connect your phone via QR.",
     primaryLink: { href: "https://live.bstein.dev", text: "Element" },
   },
   {
@@ -412,7 +439,7 @@ const extraSteps = [
     id: "mail_client_setup",
     title: "Set up mail on a device",
     description:
-      "Use the IMAP/SMTP details on your Account page to add mail to your phone or desktop client (FairEmail, Thunderbird, Apple Mail, Outlook, etc).",
+      "Use the IMAP/SMTP details on your Account page to add mail to your phone or desktop client (FairEmail on Android, Apple Mail on iOS, Thunderbird on desktop).",
     primaryLink: { href: "/account", text: "Account" },
   },
 ];
@@ -451,6 +478,7 @@ function requiredStepOrder() {
   return [
     "vaultwarden_master_password",
     "vaultwarden_browser_extension",
+    "vaultwarden_desktop_app",
     "vaultwarden_mobile_app",
     "keycloak_password_rotated",
     "element_recovery_key",

frontend/src/views/RequestAccessView.vue

@@ -72,7 +72,8 @@
       <div v-else class="success-box">
         <div class="mono">Request submitted.</div>
         <div class="muted">
-          Save this request code. Check your email for a verification link, then use the code to track status.
+          Save this request code. Check your email for a verification link, then use the code to track status. Once approved,
+          your status will provide an onboarding link to finish account setup.
         </div>
         <div class="request-code-row">
           <span class="label mono">Request Code</span>