feat: Replaced SponsorBlock free-text input with multi-select checkbox…

- "src/frontend/src/components/FormatProfileForm.tsx"

GSD-Task: S05/T02

src/frontend/src/components/FormatProfileForm.tsx

@@ -9,6 +9,17 @@ const CODEC_OPTIONS = ['Any', 'AAC', 'MP3', 'OPUS', 'FLAC'] as const;
 const BITRATE_OPTIONS = ['Any', 'Best', '320k', '256k', '192k', '128k'] as const;
 const CONTAINER_OPTIONS = ['Any', 'MP4', 'MKV', 'WEBM', 'MP3'] as const;
 
+const SPONSORBLOCK_CATEGORIES = [
+  { value: 'sponsor', label: 'Sponsor' },
+  { value: 'selfpromo', label: 'Self-Promotion' },
+  { value: 'interaction', label: 'Interaction' },
+  { value: 'intro', label: 'Intro' },
+  { value: 'outro', label: 'Outro' },
+  { value: 'preview', label: 'Preview' },
+  { value: 'music_offtopic', label: 'Music (Off-Topic)' },
+  { value: 'filler', label: 'Filler' },
+] as const;
+
 // ── Types ──
 
 export interface FormatProfileFormValues {
@@ -98,7 +109,11 @@ export function FormatProfileForm({
   const [embedSubtitles, setEmbedSubtitles] = useState(profile?.embedSubtitles ?? false);
   const [embedChapters, setEmbedChapters] = useState(profile?.embedChapters ?? false);
   const [embedThumbnail, setEmbedThumbnail] = useState(profile?.embedThumbnail ?? false);
-  const [sponsorBlockRemove, setSponsorBlockRemove] = useState(profile?.sponsorBlockRemove ?? '');
+  const [sponsorBlockCategories, setSponsorBlockCategories] = useState<Set<string>>(() => {
+    const raw = profile?.sponsorBlockRemove ?? '';
+    if (!raw.trim()) return new Set<string>();
+    return new Set(raw.split(',').map((s) => s.trim()).filter(Boolean));
+  });
   const [outputTemplate, setOutputTemplate] = useState(profile?.outputTemplate ?? '');
 
   const TEMPLATE_VARIABLES = ['platform', 'channel', 'title', 'date', 'year', 'month', 'contentType', 'id', 'ext'] as const;
@@ -147,11 +162,11 @@ export function FormatProfileForm({
         embedSubtitles,
         embedChapters,
         embedThumbnail,
-        sponsorBlockRemove: sponsorBlockRemove.trim() || null,
+        sponsorBlockRemove: sponsorBlockCategories.size > 0 ? [...sponsorBlockCategories].join(',') : null,
         outputTemplate: outputTemplate.trim() || null,
       });
     },
-    [name, videoResolution, audioCodec, audioBitrate, containerFormat, isDefault, subtitleLanguages, embedSubtitles, embedChapters, embedThumbnail, sponsorBlockRemove, outputTemplate, onSubmit],
+    [name, videoResolution, audioCodec, audioBitrate, containerFormat, isDefault, subtitleLanguages, embedSubtitles, embedChapters, embedThumbnail, sponsorBlockCategories, outputTemplate, onSubmit],
   );
 
   return (
@@ -328,21 +343,58 @@ export function FormatProfileForm({
         </label>
       </div>
 
-      {/* SponsorBlock Remove */}
+      {/* SponsorBlock Remove — checkbox group */}
       <div style={fieldGroupStyle}>
-        <label htmlFor="fp-sponsorblock" style={labelStyle}>
+        <label style={labelStyle}>
           SponsorBlock — Remove Segments
         </label>
-        <input
-          id="fp-sponsorblock"
-          type="text"
-          value={sponsorBlockRemove}
-          onChange={(e) => setSponsorBlockRemove(e.target.value)}
-          placeholder="e.g. sponsor,selfpromo,intro,outro"
-          style={inputStyle}
-        />
+        <div style={{
+          display: 'grid',
+          gridTemplateColumns: '1fr 1fr',
+          gap: 'var(--space-2)',
+          padding: 'var(--space-3)',
+          backgroundColor: 'var(--bg-input)',
+          border: '1px solid var(--border)',
+          borderRadius: 'var(--radius-md)',
+        }}>
+          {SPONSORBLOCK_CATEGORIES.map(({ value, label }) => (
+            <label
+              key={value}
+              htmlFor={`fp-sb-${value}`}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 'var(--space-2)',
+                fontSize: 'var(--font-size-sm)',
+                color: 'var(--text-secondary)',
+                cursor: 'pointer',
+              }}
+            >
+              <input
+                id={`fp-sb-${value}`}
+                type="checkbox"
+                checked={sponsorBlockCategories.has(value)}
+                onChange={(e) => {
+                  setSponsorBlockCategories((prev) => {
+                    const next = new Set(prev);
+                    if (e.target.checked) next.add(value);
+                    else next.delete(value);
+                    return next;
+                  });
+                }}
+                style={{
+                  width: 16,
+                  height: 16,
+                  accentColor: 'var(--accent)',
+                  cursor: 'pointer',
+                }}
+              />
+              {label}
+            </label>
+          ))}
+        </div>
         <span style={{ fontSize: 'var(--font-size-xs)', color: 'var(--text-muted)', marginTop: 'var(--space-1)', display: 'block' }}>
-          Comma-separated categories: sponsor, selfpromo, interaction, intro, outro, preview, music_offtopic, filler
+          Selected segments will be removed from downloaded videos using SponsorBlock data.
         </span>
       </div>