Merge commit '31b0527e9a' into dev

This commit is contained in:
DESKTOP-RTLN3BA\$punk 2026-03-24 12:59:49 -07:00
commit 9a29843866
3 changed files with 92 additions and 87 deletions

View file

@ -161,7 +161,7 @@ export const FeatureIconContainer = ({
); );
}; };
export const Grid = ({ pattern, size }: { pattern?: number[][]; size?: number }) => { export const Grid = ({ pattern, size }: { pattern?: [number, number][]; size?: number }) => {
const p = pattern ?? [ const p = pattern ?? [
[9, 3], [9, 3],
[8, 5], [8, 5],
@ -185,7 +185,7 @@ export const Grid = ({ pattern, size }: { pattern?: number[][]; size?: number })
); );
}; };
export function GridPattern({ width, height, x, y, squares, ...props }: any) { export function GridPattern({ width, height, x, y, squares, ...props }: React.ComponentProps<"svg"> & { width: number; height: number; x: string | number; y: string | number; squares?: [number, number][] }) {
const patternId = useId(); const patternId = useId();
return ( return (
@ -205,7 +205,7 @@ export function GridPattern({ width, height, x, y, squares, ...props }: any) {
<rect width="100%" height="100%" strokeWidth={0} fill={`url(#${patternId})`} /> <rect width="100%" height="100%" strokeWidth={0} fill={`url(#${patternId})`} />
{squares && ( {squares && (
<svg aria-hidden="true" x={x} y={y} className="overflow-visible"> <svg aria-hidden="true" x={x} y={y} className="overflow-visible">
{squares.map(([x, y]: any, idx: number) => ( {squares.map(([x, y]: [number, number], idx: number) => (
<rect <rect
strokeWidth="0" strokeWidth="0"
key={`${x}-${y}-${idx}`} key={`${x}-${y}-${idx}`}

View file

@ -510,93 +510,87 @@ function RolesContent({
<div className="space-y-3"> <div className="space-y-3">
{roles.map((role) => ( {roles.map((role) => (
<div key={role.id}> <div key={role.id}>
<RolePermissionsDialog permissions={role.permissions} roleName={role.name}> <div className="w-full text-left relative flex items-center gap-4 rounded-lg border border-border/60 p-4 transition-colors hover:bg-muted/30">
<button <div className="flex-1 min-w-0">
type="button" <RolePermissionsDialog permissions={role.permissions} roleName={role.name}>
className="w-full text-left relative flex items-center gap-4 rounded-lg border border-border/60 p-4 transition-colors hover:bg-muted/30 cursor-pointer" <button type="button" className="w-full text-left cursor-pointer">
> <div className="flex items-center gap-2">
<div className="flex-1 min-w-0"> <span className="font-medium text-sm">{role.name}</span>
<div className="flex items-center gap-2"> {role.is_system_role && (
<span className="font-medium text-sm">{role.name}</span> <span className="text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground font-medium">
{role.is_system_role && ( System
<span className="text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground font-medium"> </span>
System )}
</span> {role.is_default && (
)} <span className="text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground font-medium">
{role.is_default && ( Default
<span className="text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground font-medium"> </span>
Default )}
</span> </div>
{role.description && (
<p className="text-xs text-muted-foreground mt-0.5 truncate">
{role.description}
</p>
)} )}
</div> </div>
{role.description && ( </RolePermissionsDialog>
<p className="text-xs text-muted-foreground mt-0.5 truncate"> </div>
{role.description}
</p>
)}
</div>
<div className="shrink-0"> <div className="shrink-0">
<PermissionsBadge permissions={role.permissions} /> <PermissionsBadge permissions={role.permissions} />
</div> </div>
{!role.is_system_role && ( {!role.is_system_role && (
<div <div className="shrink-0" role="none">
className="shrink-0" <DropdownMenu>
role="none" <DropdownMenuTrigger asChild>
onClick={(e) => e.stopPropagation()} <Button variant="ghost" size="icon" className="h-8 w-8">
onKeyDown={(e) => e.stopPropagation()} <MoreHorizontal className="h-4 w-4" />
> </Button>
<DropdownMenu> </DropdownMenuTrigger>
<DropdownMenuTrigger asChild> <DropdownMenuContent align="end" onCloseAutoFocus={(e) => e.preventDefault()}>
<Button variant="ghost" size="icon" className="h-8 w-8"> {canUpdate && (
<MoreHorizontal className="h-4 w-4" /> <DropdownMenuItem onClick={() => setEditingRoleId(role.id)}>
</Button> <Edit2 className="h-4 w-4 mr-2" />
</DropdownMenuTrigger> Edit Role
<DropdownMenuContent align="end" onCloseAutoFocus={(e) => e.preventDefault()}> </DropdownMenuItem>
{canUpdate && ( )}
<DropdownMenuItem onClick={() => setEditingRoleId(role.id)}> {canDelete && (
<Edit2 className="h-4 w-4 mr-2" /> <>
Edit Role <DropdownMenuSeparator />
</DropdownMenuItem> <AlertDialog>
)} <AlertDialogTrigger asChild>
{canDelete && ( <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
<> <Trash2 className="h-4 w-4 mr-2" />
<DropdownMenuSeparator /> Delete Role
<AlertDialog> </DropdownMenuItem>
<AlertDialogTrigger asChild> </AlertDialogTrigger>
<DropdownMenuItem onSelect={(e) => e.preventDefault()}> <AlertDialogContent>
<Trash2 className="h-4 w-4 mr-2" /> <AlertDialogHeader>
Delete Role <AlertDialogTitle>Delete role?</AlertDialogTitle>
</DropdownMenuItem> <AlertDialogDescription>
</AlertDialogTrigger> This will permanently delete the &quot;{role.name}&quot; role.
<AlertDialogContent> Members with this role will lose their permissions.
<AlertDialogHeader> </AlertDialogDescription>
<AlertDialogTitle>Delete role?</AlertDialogTitle> </AlertDialogHeader>
<AlertDialogDescription> <AlertDialogFooter>
This will permanently delete the &quot;{role.name}&quot; role. <AlertDialogCancel>Cancel</AlertDialogCancel>
Members with this role will lose their permissions. <AlertDialogAction
</AlertDialogDescription> onClick={() => onDeleteRole(role.id)}
</AlertDialogHeader> className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
<AlertDialogFooter> >
<AlertDialogCancel>Cancel</AlertDialogCancel> Delete
<AlertDialogAction </AlertDialogAction>
onClick={() => onDeleteRole(role.id)} </AlertDialogFooter>
className="bg-destructive text-destructive-foreground hover:bg-destructive/90" </AlertDialogContent>
> </AlertDialog>
Delete </>
</AlertDialogAction> )}
</AlertDialogFooter> </DropdownMenuContent>
</AlertDialogContent> </DropdownMenu>
</AlertDialog> </div>
</> )}
)} </div>
</DropdownMenuContent>
</DropdownMenu>
</div>
)}
</button>
</RolePermissionsDialog>
</div> </div>
))} ))}
</div> </div>

View file

@ -30,6 +30,7 @@ function formatTime(seconds: number): string {
export function Audio({ id, src, title, durationMs, className }: AudioProps) { export function Audio({ id, src, title, durationMs, className }: AudioProps) {
const audioRef = useRef<HTMLAudioElement>(null); const audioRef = useRef<HTMLAudioElement>(null);
const downloadControllerRef = useRef<AbortController | null>(null);
const [isPlaying, setIsPlaying] = useState(false); const [isPlaying, setIsPlaying] = useState(false);
const [currentTime, setCurrentTime] = useState(0); const [currentTime, setCurrentTime] = useState(0);
const [duration, setDuration] = useState(durationMs ? durationMs / 1000 : 0); const [duration, setDuration] = useState(durationMs ? durationMs / 1000 : 0);
@ -87,8 +88,12 @@ export function Audio({ id, src, title, durationMs, className }: AudioProps) {
// Handle download // Handle download
const handleDownload = useCallback(async () => { const handleDownload = useCallback(async () => {
downloadControllerRef.current?.abort();
const controller = new AbortController();
downloadControllerRef.current = controller;
try { try {
const response = await fetch(src); const response = await fetch(src, { signal: controller.signal });
const blob = await response.blob(); const blob = await response.blob();
const url = window.URL.createObjectURL(blob); const url = window.URL.createObjectURL(blob);
const a = document.createElement("a"); const a = document.createElement("a");
@ -99,10 +104,16 @@ export function Audio({ id, src, title, durationMs, className }: AudioProps) {
document.body.removeChild(a); document.body.removeChild(a);
window.URL.revokeObjectURL(url); window.URL.revokeObjectURL(url);
} catch (err) { } catch (err) {
if (err instanceof DOMException && err.name === "AbortError") return;
console.error("Error downloading audio:", err); console.error("Error downloading audio:", err);
} }
}, [src, title]); }, [src, title]);
// Abort in-flight download on unmount
useEffect(() => {
return () => downloadControllerRef.current?.abort();
}, []);
// Set up audio event listeners // Set up audio event listeners
useEffect(() => { useEffect(() => {
const audio = audioRef.current; const audio = audioRef.current;