YouTube Import: UI — Import Page Redesign + Channel Management Pages

[davidortinau]

Overview

Redesign the Import page and add channel management UI. The Import page becomes the hub for all YouTube content: single video imports, monitored channels, and import status.

Crew: Kaylee (UI/Blazor)
Depends on: #126 (data model), API endpoints

Page 1: Import Page Redesign (/import)

Layout: Two tabs + shared status section

Tab 1: Single Video

• Simplified: YouTube URL input + "Import" button
• On submit: creates a VideoImport record with Status = Queued, shows toast "Import queued!"
• No inline transcript editor (that lives on ResourceEdit after completion)
• Streamlined from current 4-step flow to 1-click

Tab 2: Monitored Channels

• List of MonitoredChannel cards showing: name, thumbnail, last polled time, enabled toggle
• "+ Add Channel" button → navigates to /import/channel/add
• Each channel card has: edit link, disable toggle, "Poll Now" button
• Empty state: "No channels monitored yet. Add a YouTube channel to auto-import new videos."

Shared Section: Recent Imports (below tabs)

• List of recent VideoImport records (last 10-20)
• Each shows: video title, status indicator, timestamp
• Status indicators: ○ Queued, ◐ Processing (with step name), ● Complete, ✕ Failed
• Completed imports link to the created LearningResource
• Failed imports show error + "Retry" button
• This section polls for updates (see YouTube Import: Long-Running Task UX — Progress Tracking + Status Polling #130)

Design notes:

• Use Bootstrap nav-tabs for tab switching (no page reload)
• Use existing card-ss styling patterns
• Icons: bi-play-circle for video, bi-broadcast for channels, bi-check-circle for complete
• No emojis — Bootstrap icons only

Page 2: Channel Detail (/import/channel/{id?})

Add mode (no id):

1. Channel URL input + "Resolve" button
2. On resolve: uses YoutubeExplode to fetch channel name + thumbnail
3. Auto-fills name field (editable)
4. Poll interval dropdown: 1h, 3h, 6h (default), 12h, 24h
5. Auto-import toggle (default: on)
6. "Save Channel" + "Cancel" buttons

Edit mode (with id):

• Same form, pre-populated
• Additional: "Delete Channel" button (with Bootstrap modal confirmation per CRUD pattern)
• Shows last polled time + count of videos imported from this channel

Wireframe

┌─────────────────────────────────────────────┐
│  YouTube Import                             │
│                                             │
│  [Single Video]  [Monitored Channels]       │
│  ─────────────────────────────────────      │
│                                             │
│  [Tab: Single Video shown]                  │
│  ┌─────────────────────────────────────┐    │
│  │ YouTube URL                         │    │
│  │ [________________________] [Import] │    │
│  └─────────────────────────────────────┘    │
│                                             │
│  Recent Imports                             │
│  ┌─────────────────────────────────────┐    │
│  │ ● Korean Street Food    Complete    │    │
│  │   → View Resource                   │    │
│  │ ◐ Seoul Vlog #42    Extracting...   │    │
│  │ ○ Language Tips      Queued         │    │
│  │ ✕ Bad URL           Failed [Retry]  │    │
│  └─────────────────────────────────────┘    │
└─────────────────────────────────────────────┘

Tasks

• Redesign Import.razor with tab layout
• Implement Single Video tab (simplified 1-click import)
• Implement Monitored Channels tab (channel list with controls)
• Create ChannelDetail.razor page (/import/channel/{id?})
• Implement channel URL resolution (auto-fill name/thumbnail)
• Implement Recent Imports section with status display
• Add navigation from Import page to channel detail
• Wire up API calls for channels CRUD and import submission
• Use existing toast/modal patterns for feedback
• Mobile-responsive layout (single column on narrow screens)

Architecture Reference

See .squad/decisions/inbox/zoe-youtube-import-architecture.md — Section 2

[github-actions]

🔄 Ralph — Auto-Triage

Assigned to: Wash (Backend Dev)
Reason: Matches backend/API domain

Ralph auto-triaged this issue via the squad heartbeat. To reassign, swap the squad:* label.

[github-actions]

🏗️ Squad Triage — Zoe (Lead)

Issue: #129 — YouTube Import: UI — Import Page Redesign + Channel Management Pages
Assigned to: Wash (Backend Dev)
Reason: Issue relates to backend/API work

@copilot evaluation: 🔴 Not suitable — issue involves work outside the coding agent's capability profile.

Team roster:

• Zoe (Lead) → label: squad:zoe
• Kaylee (Full-stack Dev) → label: squad:kaylee
• Wash (Backend Dev) → label: squad:wash
• River (AI/Prompt Engineer) → label: squad:river
• Jayne (Tester) → label: squad:jayne
• Ralph (Work Monitor) → label: squad:ralph
• @copilot (Coding Agent) → label: squad:copilot

To reassign, remove the current squad:* label and add the correct one.

[davidortinau]

Depends on: #126 (data model)
Crew: Kaylee
Related: #130 (polling/status UX)

[davidortinau]

Test Data — Reference Channels

Use these for UI testing (channel add flow, thumbnail resolution, channel list display):

• https://www.youtube.com/@My_easykorean
• https://www.youtube.com/@koreancheatcode
• https://www.youtube.com/@KoreanwithSol

Verify the "Resolve" button on the Channel Detail page auto-fills name + thumbnail for each.

[davidortinau]

Completed: Import page redesigned with 3-tab layout (Channels, Single Video, History). ChannelDetail.razor page handles add/edit with URL resolution and retry. Channel list with management controls. Recent imports section with status badges. Mobile-responsive layout tested on iOS DX24.