Implement widgets for Hypertrack

[rfivesix]

Implement widgets within the Hypertrack project. The specifics around which widgets will be supported are currently open for discussion and future scoping. This issue will serve as the primary tracker for the initial widget infrastructure and further ideas around widget functionality.

• Set up a flexible framework for widget creation.
• Identify initial widget types and gather requirements.
• Encourage discussion and proposals for widgets to support.

Feel free to propose widget ideas or desired functionality as comments.

[rfivesix]

Small widget follow-up scope for after 0.8.3-alpha.2.

The current widget foundation is in place now, but before I consider the widget work “done”, there are still a few important follow-ups I want to implement.

1. Fixes for the current “Today in Focus” widget

Android layout / density

The current Android widget still has a few problems:

• even when the widget is very large, the available space is not used properly
• it currently shows too few data points (for example only ~3, even though the size should allow significantly more)
• there is too much unused white space
• the horizontal padding to the widget edges is currently a bit too small

This should be improved so the widget scales more naturally with available size and uses the available area much better.

Configurable content and order

The widget should not be limited to a fixed set or fixed order.

It should be possible to configure:

• which entries are shown
• in which order they are shown

Important:

• this must not be limited to hardcoded nutrition metrics only
• it should also support user-specific supplement entries, including custom supplements

Android cleanup

On Android, the current date shown in the widget is unnecessary and should be removed.

Progress visuals

The current left-side colored indicator bars are too limited.

Instead, each metric should use the same kind of progress-style visual language as in the Diary screen:

• a box / fill-style progress representation
• visually showing how much of the target is already reached
• consistent per metric
• same concept for calories, protein, water, etc.

This should apply to both platforms.

iOS text overflow

On iOS, some widget sizes still have text overflowing outside the widget bounds vertically.

This needs to be fixed so:

• text is properly constrained
• spacing scales safely with widget size
• no text can render outside the widget frame

---

2. Add a weight-trend widget

I want one additional widget that shows the weight trend.

Behavior

• use the existing weight-trend visual from the Diary screen
• fixed to 30 days
• no configuration for now
• just a direct widget version of that view

Design

• visually match the other widget family
• use proper background / foreground colors for light mode and dark mode
• avoid the current odd gray styling
• should feel native to the platform while still matching Hypertrack

This should basically be a direct widget adaptation of the existing 30-day weight trend.

---

3. Add a quick-actions widget

I also want a compact action widget for fast entry points.

Target size

• iOS: the normal small square widget
• Android: roughly a 2x1-style footprint (one row high, two columns wide equivalent)

Content

This widget should contain icon-only quick actions.

Planned actions:

• AI meal capture
• QR/barcode scanner
• start workout
• add drink / water
• add food
• add measurement
• log supplement intake

In other words:
this widget should expose the same set of quick actions that currently exist behind the main plus button in the app.

Design requirements

• icon-only, no text labels
• compact and readable
• adapt to widget size if needed
• if all actions do not fit cleanly in the smallest size, use a sensible responsive layout

---

Done condition for widget work

Once these three widget areas are finished:

1. current Today in Focus widget fixed/polished
2. weight trend widget added
3. quick actions widget added

then the initial widget scope is done for now.

I do not want to keep expanding widgets endlessly in this batch after that.

[rfivesix]

Small additional note on widget colors:

The widgets should respect the app/system accent color behavior instead of using arbitrary fixed chart/text colors.

That means:

• if the app uses its normal default accent color, the widgets should use that color family as well
• on Android, if Material You / dynamic color is active, the widgets should reflect that appropriately
• on iOS, if the system/app tinting/accent behavior is changed, the widget should follow that as well where supported

This is especially important for:

• chart styling
• progress/fill visuals
• highlighted metric accents
• other prominent foreground color elements

In short:
the widget color language should stay aligned with the app’s active accent/color setup instead of drifting into unrelated hardcoded colors.

[rfivesix]

Reference image for the intended weight-trend widget styling.

This screenshot shows the visual direction I want the widget to follow:

• same general chart style
• same visual hierarchy
• same feeling of spacing and balance
• adapted to widget constraints, but not redesigned into something unrelated

[rfivesix]

Reference image for the intended “Today in Focus” widget styling.

This screenshot shows the visual direction I want for the metric-card style:

• same progress/fill language
• same information density direction
• same kind of metric emphasis
• adapted to widget constraints, but visually consistent with the app