From a131f3b7f50f5f5415e9a2cff3deaf12cac1f29c Mon Sep 17 00:00:00 2001
From: Jiayuan Zhang <forrestchang7@gmail.com>
Date: Sun, 15 Feb 2026 03:04:53 +0800
Subject: [PATCH] Remove Multica App tab from Clients page (#190)

* feat(desktop): remove Multica App tab from Clients page

Only Telegram is currently available as a connection method.
Remove the unused "Multica App" tab, tabs UI, and related
components (QRCodeCard, DevicesCard, MulticaAppTab) to simplify
the page.

MUL-252

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix(desktop): restore authorized devices list on Clients page

The devices list was accidentally removed along with the Multica App
tab. Add it back below the Telegram card.

MUL-252

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/renderer/src/pages/clients.tsx        | 121 ++----------------
 1 file changed, 12 insertions(+), 109 deletions(-)

diff --git a/apps/desktop/src/renderer/src/pages/clients.tsx b/apps/desktop/src/renderer/src/pages/clients.tsx
index 924f6e9b..309968ed 100644
--- a/apps/desktop/src/renderer/src/pages/clients.tsx
+++ b/apps/desktop/src/renderer/src/pages/clients.tsx
@@ -1,4 +1,3 @@
-import { useState } from 'react'
 import {
   Card,
   CardContent,
@@ -6,20 +5,12 @@ import {
   CardHeader,
   CardTitle,
 } from '@multica/ui/components/ui/card'
-import { Button } from '@multica/ui/components/ui/button'
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from '@multica/ui/components/ui/tabs'
-import { QrCode, Radio, Smartphone, WifiOff, Loader2 } from 'lucide-react'
+import { WifiOff, Loader2 } from 'lucide-react'
 import { useHubStore, selectPrimaryAgent } from '../stores/hub'
-import { ConnectionQRCode } from '../components/qr-code'
 import { TelegramConnectQR } from '../components/telegram-qr'
 import { DeviceList } from '../components/device-list'
 
-function ChannelsTab() {
+function ChannelsContent() {
   const { hubInfo, agents } = useHubStore()
   const primaryAgent = selectPrimaryAgent(agents)
 
@@ -52,84 +43,16 @@ function ChannelsTab() {
       <p className="text-sm text-muted-foreground">
         Discord and Slack coming soon.
       </p>
-    </div>
-  )
-}
 
-/** QR Code card with show/hide toggle */
-function QRCodeCard({
-  gateway,
-  hubId,
-  agentId,
-}: {
-  gateway: string
-  hubId: string
-  agentId: string
-}) {
-  const [expanded, setExpanded] = useState(true)
-
-  return (
-    <Card>
-      <CardHeader>
-        <div className="flex items-center justify-between">
-          <div>
-            <CardTitle className="text-base">Scan to Connect</CardTitle>
-            <CardDescription>Open Multica on your phone and scan.</CardDescription>
-          </div>
-          <Button variant="outline" size="sm" onClick={() => setExpanded(!expanded)}>
-            <QrCode className="size-4 mr-1.5" />
-            {expanded ? 'Hide' : 'Show'}
-          </Button>
-        </div>
-      </CardHeader>
-      {expanded && (
-        <CardContent className="flex justify-center">
-          <ConnectionQRCode
-            gateway={gateway}
-            hubId={hubId}
-            agentId={agentId}
-            expirySeconds={30}
-            size={200}
-          />
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Authorized Devices</CardTitle>
+          <CardDescription>Devices you've approved to access your agent.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <DeviceList />
         </CardContent>
-      )}
-    </Card>
-  )
-}
-
-/** Authorized devices card */
-function DevicesCard() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle className="text-base">Authorized Devices</CardTitle>
-        <CardDescription>Devices you've approved to access your agent.</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <DeviceList />
-      </CardContent>
-    </Card>
-  )
-}
-
-function MulticaAppTab() {
-  const { hubInfo, agents } = useHubStore()
-  const primaryAgent = selectPrimaryAgent(agents)
-
-  return (
-    <div className="space-y-6">
-      <p className="text-sm text-muted-foreground">
-        Scan to connect from your phone. Manage authorized devices.
-      </p>
-
-      <div className="space-y-6">
-        <QRCodeCard
-          gateway={hubInfo?.url ?? 'http://localhost:3000'}
-          hubId={hubInfo?.hubId ?? 'unknown'}
-          agentId={primaryAgent?.id ?? 'unknown'}
-        />
-        <DevicesCard />
-      </div>
+      </Card>
     </div>
   )
 }
@@ -173,34 +96,14 @@ export default function ClientsPage() {
         <div className="mb-6">
           <h1 className="text-lg font-medium">Clients</h1>
           <p className="text-sm text-muted-foreground">
-            Access your agent from anywhere. Connect via third-party platforms or the Multica mobile app.
+            Access your agent from anywhere. Connect via third-party platforms.
           </p>
           <div className="mt-2">
             <GatewayStatus />
           </div>
         </div>
 
-        {/* Tabs */}
-        <Tabs defaultValue="channels" className="flex-1">
-          <TabsList className="mb-4">
-            <TabsTrigger value="channels" className="gap-2">
-              <Radio className="size-4" />
-              Channels
-            </TabsTrigger>
-            <TabsTrigger value="app" className="gap-2">
-              <Smartphone className="size-4" />
-              Multica App
-            </TabsTrigger>
-          </TabsList>
-
-          <TabsContent value="channels">
-            <ChannelsTab />
-          </TabsContent>
-
-          <TabsContent value="app">
-            <MulticaAppTab />
-          </TabsContent>
-        </Tabs>
+        <ChannelsContent />
       </div>
     </div>
   )