feat: refine UI with effects panel improvements and visual polish
Major improvements: - Fixed multi-file import (FileList to Array conversion) - Auto-select first track when adding to empty project - Global effects panel folding state (independent of track selection) - Effects panel collapsed/disabled when no track selected - Effect device expansion state persisted per-device - Effect browser with searchable descriptions Visual refinements: - Removed center dot from pan knob for cleaner look - Simplified fader: removed volume fill overlay, dynamic level meter visible through semi-transparent handle - Level meter capped at fader position (realistic mixer behavior) - Solid background instead of gradient for fader track - Subtle volume overlay up to fader handle - Fixed track control width flickering (consistent 4px border) - Effect devices: removed shadows/rounded corners for flatter DAW-style look, added consistent border-radius - Added border between track control and waveform area 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -24,28 +24,42 @@ export function ImportTrackDialog({
|
||||
const handleFiles = async (files: FileList) => {
|
||||
setIsLoading(true);
|
||||
|
||||
// Convert FileList to Array to prevent any weird behavior
|
||||
const fileArray = Array.from(files);
|
||||
console.log(`[ImportTrackDialog] Processing ${fileArray.length} files`, fileArray);
|
||||
|
||||
try {
|
||||
// Process files sequentially
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
const file = files[i];
|
||||
for (let i = 0; i < fileArray.length; i++) {
|
||||
console.log(`[ImportTrackDialog] Loop iteration ${i}, fileArray.length: ${fileArray.length}`);
|
||||
const file = fileArray[i];
|
||||
console.log(`[ImportTrackDialog] Processing file ${i + 1}/${fileArray.length}: ${file.name}, type: ${file.type}`);
|
||||
|
||||
if (!file.type.startsWith('audio/')) {
|
||||
console.warn(`Skipping non-audio file: ${file.name}`);
|
||||
console.warn(`Skipping non-audio file: ${file.name} (type: ${file.type})`);
|
||||
continue;
|
||||
}
|
||||
|
||||
try {
|
||||
console.log(`[ImportTrackDialog] Decoding file ${i + 1}/${files.length}: ${file.name}`);
|
||||
const buffer = await decodeAudioFile(file);
|
||||
const trackName = file.name.replace(/\.[^/.]+$/, ''); // Remove extension
|
||||
console.log(`[ImportTrackDialog] Importing track: ${trackName}`);
|
||||
onImportTrack(buffer, trackName);
|
||||
console.log(`[ImportTrackDialog] Track imported: ${trackName}`);
|
||||
} catch (error) {
|
||||
console.error(`Failed to import ${file.name}:`, error);
|
||||
}
|
||||
console.log(`[ImportTrackDialog] Finished processing file ${i + 1}`);
|
||||
}
|
||||
|
||||
onClose();
|
||||
console.log('[ImportTrackDialog] Loop completed, all files processed');
|
||||
} catch (error) {
|
||||
console.error('[ImportTrackDialog] Error in handleFiles:', error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
console.log('[ImportTrackDialog] Closing dialog');
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -1,15 +1,13 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { Volume2, VolumeX, Headphones, Trash2, ChevronDown, ChevronRight, UnfoldHorizontal, Upload, Plus, Mic, Gauge } from 'lucide-react';
|
||||
import { Volume2, VolumeX, Headphones, Trash2, ChevronDown, ChevronRight, UnfoldHorizontal, Upload, Mic, Gauge, Circle } from 'lucide-react';
|
||||
import type { Track as TrackType } from '@/types/track';
|
||||
import { COLLAPSED_TRACK_HEIGHT, MIN_TRACK_HEIGHT, MAX_TRACK_HEIGHT } from '@/types/track';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { Slider } from '@/components/ui/Slider';
|
||||
import { cn } from '@/lib/utils/cn';
|
||||
import { EffectBrowser } from '@/components/effects/EffectBrowser';
|
||||
import { EffectDevice } from '@/components/effects/EffectDevice';
|
||||
import { createEffect, type EffectType } from '@/lib/audio/effects/chain';
|
||||
import type { EffectType } from '@/lib/audio/effects/chain';
|
||||
import { VerticalFader } from '@/components/ui/VerticalFader';
|
||||
import { CircularKnob } from '@/components/ui/CircularKnob';
|
||||
import { AutomationLane } from '@/components/automation/AutomationLane';
|
||||
@@ -76,8 +74,6 @@ export function Track({
|
||||
const fileInputRef = React.useRef<HTMLInputElement>(null);
|
||||
const [isEditingName, setIsEditingName] = React.useState(false);
|
||||
const [nameInput, setNameInput] = React.useState(String(track.name || 'Untitled Track'));
|
||||
const [effectBrowserOpen, setEffectBrowserOpen] = React.useState(false);
|
||||
const [showEffects, setShowEffects] = React.useState(false);
|
||||
const [themeKey, setThemeKey] = React.useState(0);
|
||||
const inputRef = React.useRef<HTMLInputElement>(null);
|
||||
const [isResizing, setIsResizing] = React.useState(false);
|
||||
@@ -441,180 +437,200 @@ export function Track({
|
||||
<div
|
||||
ref={containerRef}
|
||||
className={cn(
|
||||
'flex flex-col',
|
||||
isSelected && 'ring-2 ring-primary ring-inset'
|
||||
'flex flex-col transition-all duration-200 relative',
|
||||
isSelected && 'bg-primary/5'
|
||||
)}
|
||||
>
|
||||
{/* Top: Track Row (Control Panel + Waveform) */}
|
||||
<div className="flex" style={{ height: trackHeight }}>
|
||||
{/* Left: Track Control Panel (Fixed Width) - Ableton Style */}
|
||||
<div
|
||||
className="w-48 flex-shrink-0 bg-card border-r border-border border-b border-border p-2 flex flex-col gap-1.5 min-h-0"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Track Name (Full Width) */}
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={onToggleCollapse}
|
||||
title={track.collapsed ? 'Expand track' : 'Collapse track'}
|
||||
className="flex-shrink-0 h-6 w-6"
|
||||
>
|
||||
{track.collapsed ? (
|
||||
<ChevronRight className="h-3 w-3" />
|
||||
) : (
|
||||
<ChevronDown className="h-3 w-3" />
|
||||
)}
|
||||
</Button>
|
||||
|
||||
<div
|
||||
className="w-1 h-6 rounded-full flex-shrink-0"
|
||||
style={{ backgroundColor: track.color }}
|
||||
/>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
{isEditingName ? (
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
value={nameInput}
|
||||
onChange={(e) => setNameInput(e.target.value)}
|
||||
onBlur={handleNameBlur}
|
||||
onKeyDown={handleNameKeyDown}
|
||||
className="w-full px-1 py-0.5 text-xs font-medium bg-background border border-border rounded"
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
onClick={handleNameClick}
|
||||
className="px-1 py-0.5 text-xs font-medium text-foreground truncate cursor-pointer hover:bg-accent rounded"
|
||||
title={String(track.name || 'Untitled Track')}
|
||||
>
|
||||
{String(track.name || 'Untitled Track')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Compact Button Row */}
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
{/* Record Enable Button */}
|
||||
{onToggleRecordEnable && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={onToggleRecordEnable}
|
||||
title="Arm track for recording"
|
||||
className={cn(
|
||||
'h-6 w-6',
|
||||
track.recordEnabled && 'bg-red-500/20 hover:bg-red-500/30',
|
||||
isRecording && 'animate-pulse'
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'h-3 w-3 rounded-full border-2',
|
||||
track.recordEnabled ? 'bg-red-500 border-red-500' : 'border-current'
|
||||
)}
|
||||
/>
|
||||
</Button>
|
||||
className={cn(
|
||||
"w-48 flex-shrink-0 border-b border-r-4 p-2 flex flex-col gap-2 min-h-0 transition-all duration-200 cursor-pointer border-border",
|
||||
isSelected
|
||||
? "bg-primary/10 border-r-primary"
|
||||
: "bg-card border-r-transparent hover:bg-accent/30"
|
||||
)}
|
||||
|
||||
{/* Solo Button */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={onToggleSolo}
|
||||
title="Solo track"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
if (onSelect) onSelect();
|
||||
}}
|
||||
>
|
||||
{/* Track Name Row - Integrated collapse (DAW style) */}
|
||||
<div
|
||||
className={cn(
|
||||
'h-6 w-6 text-[10px] font-bold',
|
||||
track.solo && 'bg-yellow-500/20 hover:bg-yellow-500/30 text-yellow-500'
|
||||
"group flex items-center gap-1.5 px-1 py-0.5 rounded cursor-pointer transition-colors",
|
||||
isSelected ? "bg-primary/10" : "hover:bg-accent/50"
|
||||
)}
|
||||
onClick={(e) => {
|
||||
if (!isEditingName) {
|
||||
e.stopPropagation();
|
||||
onToggleCollapse();
|
||||
}
|
||||
}}
|
||||
title={track.collapsed ? 'Expand track' : 'Collapse track'}
|
||||
>
|
||||
S
|
||||
</Button>
|
||||
|
||||
{/* Mute Button */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={onToggleMute}
|
||||
title="Mute track"
|
||||
className={cn(
|
||||
'h-6 w-6 text-[10px] font-bold',
|
||||
track.mute && 'bg-red-500/20 hover:bg-red-500/30 text-red-500'
|
||||
)}
|
||||
>
|
||||
M
|
||||
</Button>
|
||||
|
||||
{/* Remove Button */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={onRemove}
|
||||
title="Remove track"
|
||||
className="h-6 w-6 text-destructive hover:text-destructive hover:bg-destructive/10"
|
||||
>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Track Controls - Only show when not collapsed */}
|
||||
{!track.collapsed && (
|
||||
<div className="flex-1 flex flex-col items-center justify-between py-1 min-h-0 overflow-hidden">
|
||||
{/* Pan Knob */}
|
||||
<div className="flex-shrink-0">
|
||||
<CircularKnob
|
||||
value={track.pan}
|
||||
onChange={onPanChange}
|
||||
min={-1}
|
||||
max={1}
|
||||
step={0.01}
|
||||
size={40}
|
||||
label="PAN"
|
||||
/>
|
||||
{/* Small triangle indicator */}
|
||||
<div className={cn(
|
||||
"flex-shrink-0 transition-colors",
|
||||
isSelected ? "text-primary" : "text-muted-foreground group-hover:text-foreground"
|
||||
)}>
|
||||
{track.collapsed ? (
|
||||
<ChevronRight className="h-3 w-3" />
|
||||
) : (
|
||||
<ChevronDown className="h-3 w-3" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Vertical Volume Fader with integrated meter */}
|
||||
<div className="flex-1 flex items-center justify-center min-h-0 max-h-[140px]">
|
||||
<VerticalFader
|
||||
value={track.volume}
|
||||
level={track.recordEnabled || isRecording ? recordingLevel : playbackLevel}
|
||||
onChange={onVolumeChange}
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.01}
|
||||
showDb={true}
|
||||
/>
|
||||
{/* Color stripe (thicker when selected) */}
|
||||
<div
|
||||
className={cn(
|
||||
"h-5 rounded-full flex-shrink-0 transition-all",
|
||||
isSelected ? "w-1" : "w-0.5"
|
||||
)}
|
||||
style={{ backgroundColor: track.color }}
|
||||
/>
|
||||
|
||||
{/* Track name (editable) */}
|
||||
<div className="flex-1 min-w-0">
|
||||
{isEditingName ? (
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
value={nameInput}
|
||||
onChange={(e) => setNameInput(e.target.value)}
|
||||
onBlur={handleNameBlur}
|
||||
onKeyDown={handleNameKeyDown}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="w-full px-1 py-0.5 text-xs font-semibold bg-background border border-border rounded"
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleNameClick();
|
||||
}}
|
||||
className="px-1 py-0.5 text-xs font-semibold text-foreground truncate"
|
||||
title={String(track.name || 'Untitled Track')}
|
||||
>
|
||||
{String(track.name || 'Untitled Track')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Track Controls - Only show when not collapsed */}
|
||||
{!track.collapsed && (
|
||||
<div className="flex-1 flex flex-col items-center justify-between min-h-0 overflow-hidden">
|
||||
{/* Pan Knob */}
|
||||
<div className="flex-shrink-0">
|
||||
<CircularKnob
|
||||
value={track.pan}
|
||||
onChange={onPanChange}
|
||||
min={-1}
|
||||
max={1}
|
||||
step={0.01}
|
||||
size={48}
|
||||
label="PAN"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Vertical Volume Fader with integrated meter */}
|
||||
<div className="flex-1 flex items-center justify-center min-h-0">
|
||||
<VerticalFader
|
||||
value={track.volume}
|
||||
level={track.recordEnabled || isRecording ? recordingLevel : playbackLevel}
|
||||
onChange={onVolumeChange}
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.01}
|
||||
showDb={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Inline Button Row - Below fader */}
|
||||
<div className="flex-shrink-0 w-full">
|
||||
{/* R/S/M inline row with icons */}
|
||||
<div className="flex items-center gap-1 justify-center">
|
||||
{/* Record Arm */}
|
||||
{onToggleRecordEnable && (
|
||||
<button
|
||||
onClick={onToggleRecordEnable}
|
||||
className={cn(
|
||||
'h-6 w-6 rounded flex items-center justify-center transition-all',
|
||||
track.recordEnabled
|
||||
? 'bg-red-500 text-white shadow-md shadow-red-500/30'
|
||||
: 'bg-card hover:bg-accent text-muted-foreground border border-border/50',
|
||||
isRecording && 'animate-pulse'
|
||||
)}
|
||||
title="Arm track for recording"
|
||||
>
|
||||
<Circle className="h-3 w-3 fill-current" />
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Solo Button */}
|
||||
<button
|
||||
onClick={onToggleSolo}
|
||||
className={cn(
|
||||
'h-6 w-6 rounded flex items-center justify-center transition-all',
|
||||
track.solo
|
||||
? 'bg-yellow-500 text-black shadow-md shadow-yellow-500/30'
|
||||
: 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
|
||||
)}
|
||||
title="Solo track"
|
||||
>
|
||||
<Headphones className="h-3 w-3" />
|
||||
</button>
|
||||
|
||||
{/* Mute Button */}
|
||||
<button
|
||||
onClick={onToggleMute}
|
||||
className={cn(
|
||||
'h-6 w-6 rounded flex items-center justify-center transition-all',
|
||||
track.mute
|
||||
? 'bg-blue-500 text-white shadow-md shadow-blue-500/30'
|
||||
: 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
|
||||
)}
|
||||
title="Mute track"
|
||||
>
|
||||
{track.mute ? <VolumeX className="h-3 w-3" /> : <Volume2 className="h-3 w-3" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right: Waveform Area (Flexible Width) */}
|
||||
<div
|
||||
className="flex-1 relative bg-waveform-bg border-b border-border"
|
||||
onClick={onSelect}
|
||||
className="flex-1 relative bg-waveform-bg border-b border-l border-border"
|
||||
>
|
||||
{track.audioBuffer ? (
|
||||
<div className="absolute inset-2 bg-card/30 border border-primary/20 rounded-sm shadow-sm overflow-hidden transition-colors hover:border-primary/40">
|
||||
{/* Clip Header */}
|
||||
<div className="absolute top-0 left-0 right-0 h-4 bg-gradient-to-b from-foreground/5 to-transparent pointer-events-none z-10 px-2 flex items-center">
|
||||
<span className="text-[9px] text-foreground/60 font-medium truncate">
|
||||
{track.name}
|
||||
</span>
|
||||
</div>
|
||||
{/* Delete Button - Top Right Overlay */}
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onRemove();
|
||||
}}
|
||||
className={cn(
|
||||
'absolute top-2 right-2 z-20 h-6 w-6 rounded flex items-center justify-center transition-all',
|
||||
'bg-card/80 hover:bg-destructive/90 text-muted-foreground hover:text-white',
|
||||
'border border-border/50 hover:border-destructive',
|
||||
'backdrop-blur-sm shadow-sm hover:shadow-md'
|
||||
)}
|
||||
title="Remove track"
|
||||
>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</button>
|
||||
|
||||
{track.audioBuffer ? (
|
||||
<>
|
||||
{/* Waveform Canvas */}
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
className="absolute inset-0 w-full h-full cursor-crosshair"
|
||||
onMouseDown={handleCanvasMouseDown}
|
||||
onMouseMove={handleCanvasMouseMove}
|
||||
onMouseUp={handleCanvasMouseUp}
|
||||
className="absolute inset-0 w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
!track.collapsed && (
|
||||
<>
|
||||
@@ -648,82 +664,6 @@ export function Track({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom: Effects Section (Collapsible, Full Width) - Ableton Style */}
|
||||
{!track.collapsed && (
|
||||
<div className="bg-gradient-to-b from-muted/80 to-muted/60 border-b border-border shadow-inner">
|
||||
{/* Effects Header - clickable to toggle */}
|
||||
<div
|
||||
className="flex items-center gap-2 px-3 py-1.5 cursor-pointer hover:bg-accent/30 transition-colors border-b border-border/30"
|
||||
onClick={() => setShowEffects(!showEffects)}
|
||||
>
|
||||
{showEffects ? (
|
||||
<ChevronDown className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
|
||||
) : (
|
||||
<ChevronRight className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
|
||||
)}
|
||||
|
||||
{/* Show mini effect chain when collapsed */}
|
||||
{!showEffects && track.effectChain.effects.length > 0 ? (
|
||||
<div className="flex-1 flex items-center gap-1 overflow-x-auto custom-scrollbar">
|
||||
{track.effectChain.effects.map((effect) => (
|
||||
<div
|
||||
key={effect.id}
|
||||
className={cn(
|
||||
'px-2 py-0.5 rounded text-[10px] font-medium flex-shrink-0',
|
||||
effect.enabled
|
||||
? 'bg-primary/20 text-primary border border-primary/30'
|
||||
: 'bg-muted/30 text-muted-foreground border border-border'
|
||||
)}
|
||||
>
|
||||
{effect.name}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-xs font-medium text-muted-foreground">
|
||||
Devices ({track.effectChain.effects.length})
|
||||
</span>
|
||||
)}
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setEffectBrowserOpen(true);
|
||||
}}
|
||||
title="Add effect"
|
||||
className="h-5 w-5 flex-shrink-0"
|
||||
>
|
||||
<Plus className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Horizontal scrolling device rack - expanded state */}
|
||||
{showEffects && (
|
||||
<div className="h-44 overflow-x-auto custom-scrollbar bg-background/50 p-2">
|
||||
<div className="flex h-full gap-2">
|
||||
{track.effectChain.effects.length === 0 ? (
|
||||
<div className="text-xs text-muted-foreground text-center py-8 w-full">
|
||||
No devices. Click + to add an effect.
|
||||
</div>
|
||||
) : (
|
||||
track.effectChain.effects.map((effect) => (
|
||||
<EffectDevice
|
||||
key={effect.id}
|
||||
effect={effect}
|
||||
onToggleEnabled={() => onToggleEffect?.(effect.id)}
|
||||
onRemove={() => onRemoveEffect?.(effect.id)}
|
||||
onUpdateParameters={(params) => onUpdateEffect?.(effect.id, params)}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Automation Lanes */}
|
||||
{!track.collapsed && track.automation?.showAutomation && (
|
||||
<div className="bg-background/30">
|
||||
@@ -791,26 +731,15 @@ export function Track({
|
||||
{!track.collapsed && (
|
||||
<div
|
||||
className={cn(
|
||||
'absolute bottom-0 left-0 right-0 h-1 cursor-ns-resize hover:bg-primary/50 transition-colors z-20 group',
|
||||
isResizing && 'bg-primary/50'
|
||||
'absolute bottom-0 left-0 right-0 h-1 cursor-ns-resize hover:bg-primary/50 transition-all duration-200 z-20 group',
|
||||
isResizing && 'bg-primary/50 h-1.5'
|
||||
)}
|
||||
onMouseDown={handleResizeStart}
|
||||
title="Drag to resize track height"
|
||||
>
|
||||
<div className="absolute inset-x-0 bottom-0 h-px bg-border group-hover:bg-primary" />
|
||||
<div className="absolute inset-x-0 bottom-0 h-px bg-border group-hover:bg-primary transition-colors duration-200" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Effect Browser Dialog */}
|
||||
<EffectBrowser
|
||||
open={effectBrowserOpen}
|
||||
onClose={() => setEffectBrowserOpen(false)}
|
||||
onSelectEffect={(effectType) => {
|
||||
if (onAddEffect) {
|
||||
onAddEffect(effectType);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user