gsadmin/sencho
1
0
Fork 0
mirror of https://github.com/Studio-Saelix/sencho.git synced 2026-08-18 14:33:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: UI polish sprint — 7 items + logs toolbar redesign (#365)

Browse Source 
* feat: UI polish sprint — tag filters, toast tokens, logs toolbar, billing portal, editor UX

- Fleet: replace inline tag pills with multi-select combobox dropdown
- Toast: remap all notification colors to oklch design tokens
- Logs: convert floating hover toolbar to permanent pinned toolbar,
  replace all hardcoded colors with design tokens for theme support
- Audit: fix dropdown scroll-lock (modal=false), light theme button contrast
- Resources: remove redundant inner border/bg on tab wrapper
- Editor: add ⌘K/Ctrl+K shortcut hint and handler, standardize button heights
- Billing: signed Lemon Squeezy portal URLs via sencho.io proxy for all tiers
- New MultiSelectCombobox UI component

* feat(editor): replace button row with split-button dropdown

Replace three separate editor buttons (Discard, Save Only, Save & Deploy)
with a compact split-button dropdown. Primary action is "Save & Deploy";
chevron opens dropdown with "Save Only" and "Discard Changes" options.
This commit is contained in:
Anso
2026-04-03 20:33:44 -04:00
committed by GitHub
parent 2a277eb09d
commit f9ebd1d77c
13 changed files with 417 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/UserProfileDropdown.tsx
+32 -8
View File
@@ -1,9 +1,12 @@
import { Settings, LogOut, ExternalLink, Monitor, Sun, Moon, User } from 'lucide-react';
import { useState } from 'react';
import { Settings, LogOut, ExternalLink, Monitor, Sun, Moon, User, Loader2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { Separator } from '@/components/ui/separator';
import { useAuth } from '@/context/AuthContext';
import { useLicense } from '@/context/LicenseContext';
import { apiFetch } from '@/lib/api';
import { toast } from '@/components/ui/toast-store';
import { TierBadge } from './TierBadge';
type Theme = 'light' | 'dark' | 'auto';
@@ -17,6 +20,24 @@ interface UserProfileDropdownProps {
export function UserProfileDropdown({ theme, setTheme, onOpenSettings }: UserProfileDropdownProps) {
const { logout, user, isAdmin } = useAuth();
const { license } = useLicense();
const [billingLoading, setBillingLoading] = useState(false);
const openBillingPortal = async () => {
setBillingLoading(true);
try {
const res = await apiFetch('/license/billing-portal', { localOnly: true });
const data = await res.json().catch(() => ({}));
if (res.ok && data.url) {
window.open(data.url, '_blank');
return;
}
toast.error(data?.error || data?.message || data?.data?.error || 'Something went wrong.');
} catch {
toast.error('Failed to open billing portal.');
} finally {
setBillingLoading(false);
}
};
return (
<Popover>
@@ -57,15 +78,18 @@ export function UserProfileDropdown({ theme, setTheme, onOpenSettings }: UserPro
Settings
</button>
{license?.status === 'active' && (
<a
href="https://sencho.io/billing"
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-2 w-full px-3 py-2 text-sm rounded-lg hover:bg-muted transition-colors"
<button
onClick={openBillingPortal}
disabled={billingLoading}
className="flex items-center gap-2 w-full px-3 py-2 text-sm rounded-lg hover:bg-muted transition-colors text-left disabled:opacity-50"
>
<ExternalLink className="w-4 h-4 text-muted-foreground" />
{billingLoading ? (
<Loader2 className="w-4 h-4 text-muted-foreground animate-spin" />
) : (
<ExternalLink className="w-4 h-4 text-muted-foreground" />
)}
Billing
</a>
</button>
)}
</div>