UI: Add ChannelTile with logos, search/filter, and design improvements

lib/widgets/channel_list.dart

@@ -3,32 +3,58 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import '../models/stream_entry.dart';
 import '../providers/m3u_provider.dart';
 import '../player_screen.dart';
+import 'channel_tile.dart';
 
-class ChannelList extends ConsumerWidget {
+class ChannelList extends ConsumerStatefulWidget {
   final TextEditingController m3uController;
 
   const ChannelList({super.key, required this.m3uController});
 
   @override
-  Widget build(BuildContext context, WidgetRef ref) {
+  ConsumerState<ChannelList> createState() => _ChannelListState();
+}
+
+class _ChannelListState extends ConsumerState<ChannelList> {
+  String _query = '';
+
+  @override
+  Widget build(BuildContext context) {
     final state = ref.watch(channelListProvider);
     final selected = ref.watch(selectedChannelProvider);
 
     return Container(
-      width: 320,
+      width: 360,
       decoration: BoxDecoration(color: Colors.grey[900]),
       child: Column(children: [
         Padding(
           padding: const EdgeInsets.all(12.0),
           child: Row(children: [
-            const Expanded(
-                child: Text('실시간 채널',
-                    style:
-                        TextStyle(fontSize: 18, fontWeight: FontWeight.bold))),
+            Expanded(
+                child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                  const Text('실시간 채널',
+                      style:
+                          TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
+                  const SizedBox(height: 6),
+                  TextField(
+                    onChanged: (v) => setState(() => _query = v),
+                    decoration: InputDecoration(
+                      hintText: 'Search channels',
+                      filled: true,
+                      fillColor: Colors.grey[850],
+                      prefixIcon:
+                          const Icon(Icons.search, color: Colors.white70),
+                      border: OutlineInputBorder(
+                          borderRadius: BorderRadius.circular(8),
+                          borderSide: BorderSide.none),
+                    ),
+                  )
+                ])),
             IconButton(
                 onPressed: () => ref
                     .read(channelListProvider.notifier)
-                    .fetch(m3uController.text.trim()),
+                    .fetch(widget.m3uController.text.trim()),
                 icon: const Icon(Icons.refresh)),
           ]),
         ),
@@ -36,29 +62,28 @@ class ChannelList extends ConsumerWidget {
         Expanded(
           child: state.when(
             data: (list) {
-              if (list.isEmpty)
-                return const Center(child: Text('채널이 없습니다. M3U를 불러오세요.'));
-              return ListView.separated(
-                itemCount: list.length,
-                separatorBuilder: (_, __) => const Divider(height: 1),
+              final filtered = list
+                  .where((s) =>
+                      s.title.toLowerCase().contains(_query.toLowerCase()) ||
+                      s.url.toLowerCase().contains(_query.toLowerCase()))
+                  .toList();
+              if (filtered.isEmpty)
+                return const Center(child: Text('채널이 없습니다. 검색어를 변경해보세요.'));
+              return ListView.builder(
+                itemCount: filtered.length,
                 itemBuilder: (context, idx) {
-                  final s = list[idx];
+                  final s = filtered[idx];
                   final isSelected = selected?.url == s.url;
-                  return ListTile(
+                  return ChannelTile(
+                    entry: s,
                     selected: isSelected,
-                    title: Text(s.title, overflow: TextOverflow.ellipsis),
-                    subtitle: Text(s.url,
-                        overflow: TextOverflow.ellipsis, maxLines: 1),
                     onTap: () =>
                         ref.read(selectedChannelProvider.notifier).state = s,
-                    trailing: IconButton(
-                      icon: const Icon(Icons.open_in_full),
-                      onPressed: () => Navigator.push(
-                          context,
-                          MaterialPageRoute(
-                              builder: (_) => PlayerScreen(
-                                  videoPath: s.url, videoName: s.title))),
-                    ),
+                    onOpen: () => Navigator.push(
+                        context,
+                        MaterialPageRoute(
+                            builder: (_) => PlayerScreen(
+                                videoPath: s.url, videoName: s.title))),
                   );
                 },
               );
@@ -71,7 +96,7 @@ class ChannelList extends ConsumerWidget {
               ElevatedButton(
                   onPressed: () => ref
                       .read(channelListProvider.notifier)
-                      .fetch(m3uController.text.trim()),
+                      .fetch(widget.m3uController.text.trim()),
                   child: const Text('다시시도'))
             ])),
           ),