🧩 Resizable & Customizable Widgets (Apple-Style Home Screen UX)

[muk2]

Summary

Redesign the FeedTUI dashboard layout system to support:

• Resizable widgets
• Drag-and-reorder layout
• Intuitive customization
• Persistent layout configuration

The goal is to create a terminal-native widget system inspired by Apple’s home screen UX — clean, modular, flexible, and user-controlled.

---

Motivation

Currently, widgets are static and layout is fixed. Users cannot:

• Resize widgets
• Rearrange widgets
• Customize dashboard layout
• Save preferred configurations

A modern dashboard should feel:

• Personal
• Modular
• Fluid
• Customizable

This feature transforms FeedTUI from a static dashboard into a fully customizable terminal workspace.

---

Core Features

1️⃣ Resizable Widgets

Users should be able to:

• Resize widgets (small / medium / large)
• Expand widgets to full-screen focus mode
• Collapse widgets

Example size presets:

• Small (1x1 grid cell)
• Medium (2x1)
• Large (2x2)
• Full width
• Full screen

Resizing should dynamically adjust content rendering.

---

2️⃣ Drag & Reorder Layout

Users should be able to:

• Enter "Edit Mode" (e.g. press e)
• Select a widget
• Move it using arrow keys
• Confirm placement

Widgets should snap to a grid layout system.

Layout must:

• Prevent overlap
• Auto-reflow when resized
• Adapt to terminal resizing

---

3️⃣ Persistent Layout

• Save layout configuration to a config file
• Restore layout on app launch
• Allow multiple layout profiles (future enhancement)

Suggested config structure:

[[widgets]]
type = "clock"
size = "medium"
position = { row = 0, col = 1 }

[[widgets]]
type = "news"
size = "large"
position = { row = 1, col = 0 }

4️⃣ Edit Mode UX

When entering edit mode:
• Highlight active widget
• Show grid overlay (optional)
• Show size options
• Show move indicators

Example keybindings (proposal):
• e → Toggle Edit Mode
• ← ↑ ↓ → → Move widget
• + / - → Resize
• f → Toggle full-screen
• Enter → Confirm changes
• Esc → Cancel edit mode

⸻

UI / UX Requirements
• Clean visual transitions (no flickering)
• Clear visual distinction between:
• Normal mode
• Edit mode
• Responsive to terminal resize
• Intuitive and minimal keybinding complexity

Design philosophy:
• Simple
• Elegant
• Predictable
• No clutter

⸻

Technical Requirements
• Introduce grid layout manager
• Define widget trait:

trait DashboardWidget {
    fn render(&self, area: Rect, frame: &mut Frame);
    fn min_size(&self) -> Size;
    fn max_size(&self) -> Size;
}

Central layout controller responsible for:
•	Grid calculation
•	Collision prevention
•	Resizing rules
•	Rendering order
•	Layout must adapt dynamically to:
•	Terminal resizing
•	Widget resizing
•	Widget addition/removal

⸻

Performance Considerations
• Avoid full re-layout on every frame
• Only recompute layout when:
• Terminal size changes
• Widget moved/resized
• Maintain smooth rendering

⸻

Out of Scope
• Mouse-based drag support (future enhancement)
• Animated transitions (optional future enhancement)
• Cross-device layout sync

⸻

Acceptance Criteria
• Widgets can be resized
• Widgets can be reordered
• Layout persists across restarts
• No overlapping widgets
• No layout jitter
• Works across different terminal sizes
• Documentation updated in README