Proyecto App Linux

2026-05-03 23:43:09 +02:00
commit 7482733843
1248 changed files with 189750 additions and 0 deletions
@@ -0,0 +1,119 @@
+# UX/UI Analysis: Header vs Rail Navigation
+
+Date: 2026-03-22
+
+## Overview
+
+Evaluation of IPTVnator's navigation architecture — specifically the separation between **global actions in the top header** and **playlist-local actions in the left rail sidebar**, assessed from a user understanding perspective.
+
+## Current Architecture
+
+| Region | Intended Scope | Actual Contents |
+|--------|---------------|-----------------|
+| **Header** (top) | Global / app-wide | Playlist switcher, search, add playlist, global favorites, downloads, **context menu with local actions** |
+| **Rail** (left) | Local / playlist-specific | Dashboard (global), Sources (global), **dynamic provider links** (local), Settings (global) |
+
+Neither region is purely global or purely local. Both mix scopes, which muddies the mental model.
+
+## Strengths
+
+- **Playlist switcher in the header** is excellent placement. Acts like a "workspace context selector" — similar to Slack's workspace switcher or VS Code's project selector.
+- **Command palette** nails the global-vs-local distinction with explicit "GLOBAL ACTIONS" and "THIS PLAYLIST" section headers. Clearest articulation of scope in the entire UI.
+- **Rail dividers** between static workspace links (Dashboard, Sources) and dynamic provider links provide a subtle visual boundary hinting at the scope change.
+- **Search bar adapting its placeholder text** per route is good contextual affordance.
+- **Settings at the rail bottom** follows a well-established pattern (Slack, Discord, VS Code).
+
+## Confusion Points
+
+### A. Rail Mixes Global and Local Without Explaining Why
+
+When a user selects an Xtream playlist, the rail shows:
+```
+Dashboard        <- global
+Sources          <- global
+-----------------
+Movies           <- local (Xtream)
+Live TV          <- local (Xtream)
+Series           <- local (Xtream)
+-----------------
+Search           <- local (Xtream)
+Recently viewed  <- local (Xtream)
+Favorites        <- local (Xtream)
+-----------------
+Settings         <- global
+```
+
+When switching to M3U:
+```
+Dashboard        <- global
+Sources          <- global
+-----------------
+All channels     <- local (M3U)
+Groups           <- local (M3U)
+Recently viewed  <- local (M3U)
+Favorites        <- local (M3U)
+-----------------
+Settings         <- global
+```
+
+**Issue:** The dynamic links change silently. There's no label like "rucolor.tv" or "clean.m3u" above the provider links to indicate *which* playlist these links belong to. Users who switch playlists via the header dropdown may not immediately notice the rail updated.
+
+**Severity:** Medium.
+
+### B. Header's Three-Dot Menu Breaks the "Global Header" Mental Model
+
+The context actions menu in the header contains:
+- **Playlist Info** — local to the current playlist
+- **Account Info** — local to the current Xtream portal
+- **Clear Recently Viewed** — local bulk action
+
+These are playlist-scoped actions living in what should be the "global" header area.
+
+**Severity:** Low-Medium.
+
+### C. "Favorites" Appears in Both Global and Local Contexts
+
+- **Header:** Global Favorites star icon (cross-playlist)
+- **Rail:** Favorites link (playlist-specific)
+
+A user clicking the star in the header vs the heart in the rail gets *different* favorites views with *no* clear labeling of "global" vs "this playlist."
+
+**Severity:** Medium-High. Most likely source of user confusion.
+
+### D. Search Bar Scope Is Invisible
+
+The search bar disables itself on some routes and changes behavior on others. The placeholder text changes, but "Search in this section..." doesn't clarify *which* section.
+
+**Severity:** Low.
+
+## Recommendations
+
+### Quick Wins (Low Effort, High Impact)
+
+1. **Add a playlist name label above the dynamic rail links.** Small, muted text showing "clean.m3u" or "rucolor.tv" above the provider-specific navigation.
+2. **Keep Global Favorites as a single left-rail destination.** Avoid reintroducing a second header shortcut for the same global destination; reserve header actions for contextual controls.
+3. **Add a scope label to the search bar** when active: "Searching in Live TV" or "Searching in clean.m3u" instead of generic "Search in this section..."
+
+### Medium Effort
+
+4. **Consider moving the three-dot context menu into the context panel** rather than the header, keeping the header purely global.
+5. **Animate the rail transition** when switching playlists — a subtle slide or fade to signal that links changed.
+
+## Overall Assessment
+
+**Score: 7/10 — Good, with clear improvement opportunities.**
+
+The architecture follows patterns users will recognize from Slack, VS Code, and Spotify. The main risks are the **silent dynamic rail** and the **favorites scope ambiguity**. Fixing those two issues would bring this to a 9/10 for navigational clarity.
+
+### Design Principle
+
+The command palette already has the right model: **explicit scope labels**. Apply this same principle to the rail and header. Anywhere an action's scope isn't obvious from its placement, label it.
+
+## Key Files
+
+- `libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.html`
+- `libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.ts`
+- `libs/portal/shared/ui/src/lib/navigation/portal-rail-links.component.ts`
+- `libs/portal/shared/util/src/lib/navigation/portal-rail-links.ts`
+- `libs/playlist/shared/ui/src/lib/playlist-switcher/playlist-switcher.component.ts`
+- `libs/workspace/shell/feature/src/lib/workspace-command-palette/workspace-command-palette.component.ts`