Skip to content

fix: improve subscription modal responsiveness and config name truncation #227

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ImMohammad20000 merged 18 commits into from
Jan 27, 2026
Merged

fix: improve subscription modal responsiveness and config name truncation #227

Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
95e8057
feat(users): add Sub QR Code and Configs QR Code buttons
MatinDehghanian Jan 27, 2026
f2d9774
feat(dashboard): add unified subscription modal with copy configs dro…
MatinDehghanian Jan 27, 2026
24ddc4f
feat(subscription-modal): update subscription modal layout and improv…
MatinDehghanian Jan 27, 2026
63ad3d4
Merge pull request #1 from MatinDehghanian/feat/subscription-modal-wi…
MatinDehghanian Jan 27, 2026
ba1f612
feat(subscription-modal): add address extraction and display in subsc…
MatinDehghanian Jan 27, 2026
53bb961
feat(action-buttons): implement fallback URL handling for link fetchi…
MatinDehghanian Jan 27, 2026
2440c03
feat(action-buttons): enhance iOS handling for link copying and downl…
MatinDehghanian Jan 27, 2026
2d927bb
Remove unused ConfigsQRCodeModal component
MatinDehghanian Jan 27, 2026
85b7d59
Revert "Remove unused ConfigsQRCodeModal component"
MatinDehghanian Jan 27, 2026
d8a98db
Revert "feat(action-buttons): enhance iOS handling for link copying a…
MatinDehghanian Jan 27, 2026
7271c25
Revert "feat(action-buttons): implement fallback URL handling for lin…
MatinDehghanian Jan 27, 2026
b3b2406
Merge branch 'dev' into feat/subscription-modal-with-copy-dropdown
MatinDehghanian Jan 27, 2026
f1ae6b0
feat(action-buttons): add username copy functionality and refactor li…
MatinDehghanian Jan 27, 2026
4a40b59
feat(subscription-modal): increase configs per page from 3 to 5
MatinDehghanian Jan 27, 2026
0b24a63
feat(subscription-modal): truncate long config names in dialog title
MatinDehghanian Jan 27, 2026
200271b
Merge branch 'dev' into feat/subscription-modal-with-copy-dropdown
MatinDehghanian Jan 27, 2026
08db5b1
feat(subscription-modal): improve config name display and adjust QR c…
MatinDehghanian Jan 27, 2026
78cbb48
Merge branch 'feat/subscription-modal-with-copy-dropdown' of https://…
MatinDehghanian Jan 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 12 additions & 9 deletions dashboard/src/components/dialogs/subscription-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -234,8 +234,9 @@ const SubscriptionModal: FC<SubscriptionModalProps> = memo(({ subscribeUrl, user
{currentConfigs.map((item, index) => (
<div key={startIndex + index} className="flex items-center justify-between rounded-md border p-2 hover:bg-muted/50">
<div className="flex flex-1 flex-col gap-1 overflow-hidden">
<span dir="ltr" className="truncate text-sm font-medium" title={item.name}>
{item.name}
<span dir="ltr" className="text-sm font-medium" title={item.name}>
<span className="sm:hidden">{item.name.length > 30 ? `${item.name.slice(0, 30)}...` : item.name}</span>
<span className="hidden sm:inline">{item.name.length > 40 ? `${item.name.slice(0, 40)}...` : item.name}</span>
</span>
{item.address && (
<Badge variant="secondary" className="w-fit text-xs font-normal opacity-70">
Expand Down Expand Up @@ -278,18 +279,20 @@ const SubscriptionModal: FC<SubscriptionModalProps> = memo(({ subscribeUrl, user

{/* Individual Config QR Code Dialog */}
<Dialog open={!!selectedConfigQR} onOpenChange={handleCloseConfigQR}>
<DialogContent className="max-w-[350px]">
<DialogHeader dir={dir}>
<DialogContent className="w-[90vw] max-w-[320px]">
<DialogHeader dir={dir} className={isRTL ? 'pl-10' : 'pr-10'}>
<DialogTitle>
<div className="flex items-center gap-2 px-2">
<QrCode className="h-6 w-6" />
<span className="truncate">{selectedConfigQR?.name}</span>
<div className="flex items-center gap-2">
<QrCode className="h-5 w-5 shrink-0" />
<span className="text-sm" title={selectedConfigQR?.name}>
{selectedConfigQR?.name && selectedConfigQR.name.length > 20 ? `${selectedConfigQR.name.slice(0, 20)}...` : selectedConfigQR?.name}
</span>
</div>
</DialogTitle>
</DialogHeader>
<div dir="ltr" className="flex flex-col items-center gap-4 py-4">
<div dir="ltr" className="flex flex-col items-center gap-4 py-2">
<div className="flex items-center justify-center overflow-hidden">
<QRCodeCanvas value={selectedConfigQR?.config || ''} size={280} className="rounded-md bg-white p-2" />
<QRCodeCanvas value={selectedConfigQR?.config || ''} size={220} className="max-w-full rounded-md bg-white p-2" />
</div>
<Button variant="outline" onClick={() => selectedConfigQR && handleCopyConfig(selectedConfigQR.config)} className="w-full">
{copiedConfig === selectedConfigQR?.config ? <Check className={cn('h-4 w-4', isRTL ? 'ml-2' : 'mr-2')} /> : <Copy className={cn('h-4 w-4', isRTL ? 'ml-2' : 'mr-2')} />}
Expand Down
Loading