feat: Added additional settings in QSL Design on QSO box (opacity, bg color...)

frontend/src/components/qsl/EditorPanel.tsx

@@ -170,6 +170,25 @@ export function EditorPanel({ template, sel, presets, fontFamilies, onPatchEleme
               onChange={(w) => onPatchBox({ w })} />
             <NumberField label="Height" value={box.h} min={120} max={500}
               onChange={(h) => onPatchBox({ h })} />
+            <NumberField label="Opacity %" value={Math.round((box.bg_opacity ?? 1) * 100)} min={0} max={100}
+              onChange={(v) => onPatchBox({ bg_opacity: Math.max(0, Math.min(100, v)) / 100 })} />
+            <div className="flex items-center justify-between gap-2">
+              <Label className="text-xs text-muted-foreground">Background</Label>
+              <div className="flex items-center gap-2">
+                <input type="color" className="h-7 w-9 cursor-pointer rounded border border-border bg-transparent p-0"
+                  value={/^#[0-9a-fA-F]{6}$/.test(box.bg ?? '') ? box.bg : '#000000'}
+                  onChange={(ev) => onPatchBox({ bg: ev.target.value })} />
+                <Input className="h-7 w-32 font-mono text-xs" value={box.bg ?? ''}
+                  onChange={(ev) => onPatchBox({ bg: ev.target.value })} />
+              </div>
+            </div>
+            <NumberField label="Corner radius" value={box.radius ?? 0} min={0} max={80}
+              onChange={(radius) => onPatchBox({ radius })} />
+            <div className="flex items-center justify-between gap-2">
+              <Label className="text-xs text-muted-foreground">Title</Label>
+              <Input className="h-7 w-44 font-mono text-xs" value={box.title ?? ''}
+                onChange={(ev) => onPatchBox({ title: ev.target.value })} />
+            </div>
             <div className="flex items-center justify-between gap-2">
               <Label className="text-xs text-muted-foreground">Footer</Label>
               <Input className="h-7 w-44 font-mono text-xs" value={box.footer}