♻️ refactor: SPA for profile

[arvinxx]

💻 Change Type

• ✨ feat
• 🐛 fix
• ♻️ refactor
• 💄 style
• 👷 build
• ⚡️ perf
• ✅ test
• 📝 docs
• 🔨 chore

🔀 Description of Change

📝 Additional Information

Summary by Sourcery

Refactor the profile module into a SPA by consolidating layouts and page components under a React Router router, simplifying imports, and updating dependencies.

New Features:

• Convert the profile section into a client-side SPA with React Router and nested routes for profile, stats, API key, and security pages

Enhancements:

• Refactor Profile layout to remove ServerLayout, rename page components (Client -> ProfilePage, StatsPage, ApiKeyPage), and update import paths accordingly
• Simplify useCategory hook labels to use direct translation strings
• Introduce CategoryContent menu component for tab navigation and replace multiple Next.js page entrypoints with a unified router
• Remove obsolete Next.js page files and flatten the profile module’s file structure

Build:

• Add react-router-dom dependency and remove @huggingface/inference from package.json

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
lobehub-database	Ready	Preview	Comment	Oct 20, 2025 5:06pm
lobehub-lite	Ready	Preview	Comment	Oct 20, 2025 5:06pm

💡 Enable Vercel Agent with $100 free credit for automated AI reviews

[sourcery-ai]

Reviewer's Guide

Refactors the profile section into a client-side SPA by replacing Next.js nested pages with React Router, renaming and reorganizing route components, simplifying layout, and improving performance by removing server-side wrappers.

Sequence diagram for navigation between profile tabs in SPA

sequenceDiagram
  participant User as actor User
  participant Menu as CategoryContent (Menu)
  participant Router as React Router
  participant Page as ProfilePage/StatsPage/etc
  User->>Menu: Clicks on a tab (e.g. 'Stats')
  Menu->>Router: Calls navigate('/stats')
  Router->>Page: Renders StatsPage component
  Page->>User: Displays selected tab content

Loading

Class diagram for refactored profile route components

classDiagram
  class ProfileRouter {
    +mobile: boolean
    +ProfileLayout
  }
  class ProfileLayout {
    +children
    +Header
    +SideBar
    +SettingContainer
    +CategoryContent
    +Footer
    +InitClientDB
  }
  class CategoryContent {
    +useCategory()
    +Menu
  }
  class ProfilePage {
    +mobile: boolean
  }
  class StatsPage {
    +mobile: boolean
  }
  class ApiKeyPage {
    +mobile: boolean
  }
  class SecurityPage {
    +mobile: boolean
  }
  ProfileRouter --> ProfileLayout
  ProfileLayout --> Header
  ProfileLayout --> SideBar
  ProfileLayout --> SettingContainer
  ProfileLayout --> CategoryContent
  ProfileLayout --> Footer
  ProfileLayout --> InitClientDB
  SettingContainer --> ProfilePage
  SettingContainer --> StatsPage
  SettingContainer --> ApiKeyPage
  SettingContainer --> SecurityPage
  CategoryContent --> Menu

Loading

File-Level Changes

Change	Details	Files
Simplified tab label rendering in useCategory hook	Removed Link wrappers around tab labels Replaced JSX labels with direct translation strings	src/app/[variants]/(main)/profile/hooks/useCategory.tsx
Renamed and restructured profile route components	Renamed default exports from generic Client to specific *Page components Updated relative import paths for feature modules	src/app/[variants]/(main)/profile/stats/Client.tsx -> routes/StatsPage.tsx src/app/[variants]/(main)/profile/apikey/Client.tsx -> routes/ApiKeyPage.tsx src/app/[variants]/(main)/profile/(home)/Client.tsx -> routes/ProfilePage.tsx
Replaced ServerLayout with a pass-through ProfileLayout	Removed ServerLayout HOC Implemented ProfileLayout as a simple children renderer	src/app/[variants]/(main)/profile/layout.tsx
Added client-side routing with React Router	Introduced ProfileRouter component wrapping BrowserRouter Created CategoryContent menu component for tab navigation Added dynamic SecurityPage and client-only entry point page	src/app/[variants]/(main)/profile/ProfileRouter.tsx src/app/[variants]/(main)/profile/features/CategoryContent.tsx src/app/[variants]/(main)/profile/routes/SecurityPage.tsx src/app/[variants]/(main)/profile/[[...slugs]]/page.tsx
Updated package dependencies	Removed unused @huggingface/inference dependency Added react-router-dom for client-side routing	package.json

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[lobehubbot]

👍 @arvinxx

Thank you for raising your pull request and contributing to our Community
Please make sure you have followed our contributing guidelines. We will review it as soon as possible.
If you encounter any problems, please feel free to connect with us.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 84.32%. Comparing base (88d194c) to head (486ad85).

Additional details and impacted files

@@            Coverage Diff            @@
##             main    #9804     +/-   ##
=========================================
  Coverage   84.32%   84.32%             
=========================================
  Files         893      893             
  Lines       58536    58536             
  Branches     7370     8933   +1563     
=========================================
  Hits        49359    49359             
  Misses       9177     9177             

Flag	Coverage Δ
app	79.10% <ø> (ø)
database	98.50% <ø> (ø)
packages/agent-runtime	99.63% <ø> (ø)
packages/context-engine	93.53% <ø> (ø)
packages/electron-server-ipc	93.76% <ø> (ø)
packages/file-loaders	92.21% <ø> (ø)
packages/model-bank	100.00% <ø> (ø)
packages/model-runtime	92.93% <ø> (ø)
packages/prompts	77.21% <ø> (ø)
packages/python-interpreter	96.50% <ø> (ø)
packages/utils	94.80% <ø> (ø)
packages/web-crawler	97.07% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Components	Coverage Δ
Store	74.87% <ø> (ø)
Services	61.86% <ø> (ø)
Server	65.67% <ø> (ø)
Libs	50.95% <ø> (ø)
Utils	75.00% <ø> (ø)

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.