feat(web): enhance integration settings and UI components

- Updated AppSwitcherEditor to include item separators for better visual organization.
- Improved VpsTrackerIntegrationCard with badges indicating synchronization status and token configuration.
- Refactored SettingsShell to streamline layout and enhance accessibility with improved navigation.
- Added detail fields to KPI cards in DashboardPage for clearer information presentation.
- Introduced new components in the ReUI kit for better integration and user experience.

Co-authored-by: Cursor <[email protected]>

apps/web/src/components/reui-kit/ops-dashboard.tsx

@@ -17,6 +17,7 @@ export interface OpsKpiCard {
   metricLabel: string
   value: string | number
   hint?: ReactNode
+  detail?: ReactNode
   icon: ReactNode
   iconBg?: string
 }
@@ -61,6 +62,9 @@ function KpiCardItem({ card }: { card: OpsKpiCard }) {
           </span>
           {card.hint}
         </div>
+        {card.detail ? (
+          <p className="text-muted-foreground text-xs leading-snug">{card.detail}</p>
+        ) : null}
       </div>
     </FramePanel>
   )
@@ -74,7 +78,7 @@ export function OpsDashboard({
   queue,
 }: OpsDashboardProps) {
   return (
-    <div className="text-foreground @container mx-auto flex w-full flex-col gap-4 md:gap-6">
+    <div className="text-foreground @container mx-auto flex w-full max-w-7xl flex-col gap-4 md:gap-6">
       <header className="px-1">
         <h1 className="text-xl font-semibold tracking-tight">{title}</h1>
         <p className="text-muted-foreground max-w-2xl text-sm leading-relaxed">
@@ -94,7 +98,7 @@ export function OpsDashboard({
 
       <section
         aria-label="Аналитика"
-        className="grid min-w-0 items-stretch gap-4 @5xl:grid-cols-2"
+        className="grid min-w-0 auto-rows-fr items-start gap-4 @3xl:grid-cols-2"
       >
         {charts}
       </section>