marketing-shibata50/multica
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Remove Multica App tab from Clients page (#190)

Browse source 
* 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>
This commit is contained in:
Jiayuan Zhang 2026-02-15 03:04:53 +08:00 • committed by GitHub
parent a8ef4061cd
commit a131f3b7f5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 12 additions and 109 deletions
Download patch file Download diff file Expand all files Collapse all files

121
apps/desktop/src/renderer/src/pages/clients.tsx
View file

@ -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>
)