Refactor settings account tab

[lukyrys]

Summary

• extract Account tab composition into AccountSettingsTab
• keep existing SSO, password login, simple sync, and advanced device flows wired through parent handlers

Verification

• cd src/frontend && npm run type-check
• cd src/frontend && npm run build

Summary by CodeRabbit

• Refactor
  • Account settings interface restructured for improved code organization.

[coderabbitai]

📝 Walkthrough

Walkthrough

The Account tab in Settings.vue is refactored by extracting inline account card rendering into a new AccountSettingsTab.vue component. The component receives account state and emits the same actions, with script imports updated accordingly.

Changes

Account Settings Extraction

Layer / File(s)	Summary
New Component src/frontend/src/components/settings/account/AccountSettingsTab.vue	New component with typed props for authentication state (SSO, email, password, loading), account info (token, email), sync state, and device list/editing; typed emits for SSO login/logout, auth updates, login/register, sync operations, and device management (refresh, edit, save name, push config, unlink).
Component Template src/frontend/src/components/settings/account/AccountSettingsTab.vue	Conditionally renders AccountSsoCard at top, then simple or advanced mode cards based on isSimple, and AccountDeviceTableCard when accountToken is present; all child-to-parent interactions wired through emits and two-way bindings.
Settings Integration src/frontend/src/components/pages/Settings.vue	Account tab template refactored to replace inline card conditionals with single AccountSettingsTab component receiving all state props and event handlers; script imports updated to remove individual card components and add AccountSettingsTab import.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 Tangled cards in Settings lay,
Now extracted far away,
Props well-typed, emits shine,
AccountSettingsTab draws the line,
Cleaner code hops brightly today! 🥕

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Refactor settings account tab' directly corresponds to the main change: extracting the Account tab UI into a new AccountSettingsTab component with conditional blocks replacing inline card rendering.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch refactor/settings-account-section

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Review rate limit: 0/1 reviews remaining, refill in 60 minutes.}

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

src/frontend/src/components/settings/account/AccountSettingsTab.vue (1)

13-77: ⚡ Quick win

Use v-else instead of a second v-if="!isSimple", and deduplicate AccountPasswordCard.

Two separate issues on this block:

1. <template v-if="isSimple"> / <template v-if="!isSimple"> evaluates the condition twice. Use v-else to make the mutual exclusion explicit and avoid the double evaluation.

2. AccountPasswordCard is rendered identically in both branches — the only difference is the :title prop key (settings.tabs.account vs settings.account.passwordTitle). Moving it outside the branches and binding a computed title eliminates the duplication.

♻️ Proposed refactor

-  <template v-if="isSimple">
-    <AccountPasswordCard
-      v-if="!accountToken"
-      :t="t"
-      :title="t('settings.tabs.account')"
-      :email="authEmail"
-      :password="authPassword"
-      :loading="authLoading"
-      :error="authError"
-      `@update`:email="$emit('update:authEmail', $event)"
-      `@update`:password="$emit('update:authPassword', $event)"
-      `@login`="$emit('login')"
-      `@register`="$emit('register')"
-    />
+  <AccountPasswordCard
+    v-if="!accountToken"
+    :t="t"
+    :title="isSimple ? t('settings.tabs.account') : t('settings.account.passwordTitle')"
+    :email="authEmail"
+    :password="authPassword"
+    :loading="authLoading"
+    :error="authError"
+    `@update`:email="$emit('update:authEmail', $event)"
+    `@update`:password="$emit('update:authPassword', $event)"
+    `@login`="$emit('login')"
+    `@register`="$emit('register')"
+  />
+
+  <template v-if="isSimple">
     <AccountSimpleSyncCard
       v-else
       ...
     />
   </template>

-  <template v-if="!isSimple">
-    <AccountPasswordCard
-      v-if="!accountToken"
-      :t="t"
-      :title="t('settings.account.passwordTitle')"
-      ...
-    />
+  <template v-else>
     <AccountAdvancedSummaryCard
       v-else
       ...
     />
     <AccountDeviceTableCard v-if="accountToken" ... />
   </template>

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 46bf6f89-c95c-47eb-8747-e35d93c68600

📥 Commits

Reviewing files that changed from the base of the PR and between e16b6fb and 0553064.

📒 Files selected for processing (2)

• src/frontend/src/components/pages/Settings.vue
• src/frontend/src/components/settings/account/AccountSettingsTab.vue