refactor: streamline layout and styling for live stream component

- Consolidated SCSS styles for the live stream layout, reducing redundancy and improving maintainability.
- Introduced a new portal layout mixin for better structure.
- Enhanced sidebar and content container styles for improved user experience.
- Updated TypeScript component to utilize new styles and improve readability.
- Refactored channel list and recently viewed components for consistency in design.
- Optimized playlist service and store interactions for better performance.
- Added new translations for enhanced user interface clarity.
- Improved database schema with additional indexing for EPG programs.

libs/shared/database/src/lib/connection.ts

@@ -146,6 +146,7 @@ const CREATE_TABLE_STATEMENTS = [
     `CREATE INDEX IF NOT EXISTS idx_epg_channels_name ON epg_channels(display_name)`,
     `CREATE INDEX IF NOT EXISTS idx_epg_programs_channel ON epg_programs(channel_id)`,
     `CREATE INDEX IF NOT EXISTS idx_epg_programs_start ON epg_programs(start)`,
+    `CREATE INDEX IF NOT EXISTS idx_epg_programs_stop ON epg_programs(stop)`,
     `CREATE INDEX IF NOT EXISTS idx_epg_programs_time_range ON epg_programs(channel_id, start, stop)`,
     // FTS5 virtual table for full-text search on EPG programs
     `CREATE VIRTUAL TABLE IF NOT EXISTS epg_programs_fts USING fts5(

libs/shared/database/src/lib/schema.ts

@@ -176,6 +176,7 @@ export const epgPrograms = sqliteTable(
     (table) => ({
         channelIdx: index('idx_epg_programs_channel').on(table.channelId),
         startIdx: index('idx_epg_programs_start').on(table.start),
+        stopIdx: index('idx_epg_programs_stop').on(table.stop),
         timeRangeIdx: index('idx_epg_programs_time_range').on(
             table.channelId,
             table.start,