Display connected accounts in settings

[F0urchette]

Description

As a teacher using Git4School
I want to view which account I am currently connected with directly in the sidebar settings panel
So that I know which account is active and can easily manage my multiple connections (GitHub, GitLab, and self-hosted GitLab instances).

Tasks

• Add a dedicated "Connected Accounts" section in the sidebar settings panel.
• Display account identity for each active connection:
  • Provider icon / logo (GitHub, GitLab)
  • Instance domain / host (e.g., github.com, gitlab.irit.fr)
  • Username and avatar (if available)
• Provide an individual "Disconnect" / "Log out" button for each connected account.
• Implement an empty state when no account is connected with a prompt and button to connect.
• Handle multi-account display (supporting simultaneous GitHub and GitLab/self-hosted instances).
• Add i18n translation keys in en.json, fr.json, and ru.json.

Hints

• Context & Multi-Account Support:

  • Git4School will interact with multiple git providers: GitHub, GitLab, as well as institutional/self-hosted GitLab instances.
  • Because a user can be authenticated across several services simultaneously, the UI should clearly identify which instance and username each account belongs to.

• UI Proposals:

  • Direct in-sidebar list: A rich card or badge list directly inside the sidebar settings panel under the "Account" section, displaying the avatar, instance host badge, username, and an inline disconnect action.
  • Sidebar entry with dedicated modal: A compact summary row in the sidebar (e.g. showing connected provider badges) that opens a "Manage Accounts" modal to view details, disconnect accounts, or add new tokens/instances.
  • Collapsible accordion: An expandable accordion in the sidebar grouping accounts by platform/instance with quick actions.