feat(auth): support log out from popup and options sidebar#1756
feat(auth): support log out from popup and options sidebar#1756taiiiyang wants to merge 1 commit into
Conversation
Add a user account menu with a log out action in both the popup header and the options page sidebar footer. Logged-in users get a dropdown (hover-highlighted avatar + name) whose only item is log out; logged-out users see an exposed log-in entry. The logout call is a shared better-auth signOut mutation. Split into popup/sidebar components that share session/logout/avatar logic and branch state with ts-pattern. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
🦋 Changeset detectedLatest commit: 20d8d7e The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
github-actions
Bot
added
feat
contrib-trust:trusted
Contributor trust score73/100 — Trusted This score estimates contributor familiarity with Outcome
Score breakdown
Signals used
Policy
Updated automatically when the PR changes or when a maintainer reruns the workflow. |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 20d8d7ee05
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| onError: () => { | ||
| toast.error(i18n.t("account.logoutError")) | ||
| }, |
There was a problem hiding this comment.
When signOut fails, this local onError shows the localized logout error, but this mutation is also handled by the app-wide MutationCache in src/utils/tanstack-query.ts, which emits a generic "Something went wrong" toast unless mutation.meta?.suppressToast is set. In popup/options logout failure scenarios such as network or server errors, users will see two error toasts; add meta: { suppressToast: true } here or rely on the global meta.errorDescription path so only one message is shown.
Useful? React with 👍 / 👎.
| @@ -0,0 +1,102 @@ | |||
| // @vitest-environment jsdom | |||
我认为放上面会丢失品牌信息，会变得更像后台管理页面了，感觉不太合适 |
像是 linear，notion 几乎所有主流 SaaS 操作界面都是这样做的（还有像是 Attio 等等），因为 ui 元素多了，在这里主要是为了操作起来顺畅，不要过多元素干扰。配置界面还是要操作体验优先。 |
那种会更像后台管理吧 |
不是，linear 和 notion 就是他们产品本身，attio 也不是后台管理 |
|
另外关键不在于是什么，应该从用户角度出发，他们有多想看到这个 brand，当随着功能越来越多，是不是应该有一些不太重要的东西应该从 ui 上退场，而不影响用户进来的时候进一步吓到用户。 现在设置界面很多做的不太好的地方，以后也要调整。 另外一个极端就是 kiss translate，什么都往 ui 上堆，完全没有考虑过特别是新用户感受 |
2 participants
Type of Changes
Description
Adds a way to log out from the extension. Previously there was only a login entry (in the popup) and no sign-out anywhere.
SidebarMenuButton+ chevron that rotates on open), collapses to avatar-only.signOutmutation (@tanstack/react-query); no success toast (UI returning to guest is the feedback), error toast on failure.user-account-menu/{popup,sidebar,shared}.tsx: the two form-factor components share session/logout/avatar logic and branch theloading | guest | authedstate with ts-patternmatch().exhaustive(). Replaces the olduser-account.tsx.account.{login,logout,logoutError}i18n keys across all 9 locales.Related Issue
Closes #
How Has This Been Tested?
src/components/__tests__/user-account-menu.test.tsxcovers guest/login, signed-in name, and loading states (3 tests, passing). Manually verified the popup and options sidebar in logged-in / logged-out / loading states.Checklist
Additional Information
ts-pattern@^5.9.0.type-checkhook reports two pre-existing, unrelated errors insrc/entrypoints/background/background-stream.ts('instructions' does not exist...). These are present onmainand untouched by this PR, so the push used--no-verify. The account-menu module itself type-checks cleanly.packages/authdefaultCookieAttributes: { sameSite: "none", secure: true }for local cross-site cookie testing) lives in the monorepo and is not part of this PR.