Important Design Notes

This document records important product/design implementation ideas that should be easy to recover later.

View 2: Colorless Container

The colorless container view groups apps by tag into independent frosted-material cards.

Layout logic:

• Use a masonry/waterfall layout.
• Calculate how many columns fit in the available overlay width.
• Estimate each tag card's height from its app count, current icon size, and card width.
• Place each next tag group into the currently shortest column.
• Each card uses a transparent background over .ultraThinMaterial, with only a subtle border by default.
• When the user hovers or clicks a tag/card, the corresponding card is filled with that tag's color at low opacity, creating a temporary focus state.
• Tag navigation hover/click scrolls to the matching card and also activates the same color fill.

Design intent:

• Keep the whole view visually light and non-color-dominant.
• Use color only as an interaction/focus signal.
• Let groups with different app counts occupy natural heights, so dense groups do not force empty space in neighboring groups.

View 4: Colorless Grid

The colorless grid view also groups apps by tag into frosted-material cards, but aligns cards into row-based grid tracks instead of waterfall columns.

Layout logic:

• Choose a preferred number of grid tracks per row based on available width:
• 3 tracks on wide screens
• 2 tracks on medium screens
• 1 track on narrow screens
• For each row, test span patterns:
• 3-track row: 1+1+1, 1+2, 2+1, or 3
• 2-track row: 1+1 or 2
• 1-track row: 1
• Pick the lowest-cost pattern by estimating how many icon rows each card needs.
• Cards in the same row share the same fixed icon-row height, so their bottoms align.
• Inside each card, apps are manually split into rows and empty cells are filled with clear placeholders to preserve grid alignment.
• Like colorless container view, the card is transparent over .ultraThinMaterial by default and only receives low-opacity tag color on hover/click focus.

Design intent:

• Preserve the clarity of grouped cards while making rows visually orderly.
• Avoid the uneven bottom edges of masonry when the user wants a stricter grid feeling.
• Keep the "colorless by default, colored only on focus" interaction model consistent with View 2.

View 3: Colored Container

The colored container view uses the same masonry/waterfall layout as View 2, but each tag card is always tinted with its tag color.

Interaction logic:

• The card background is always filled with the tag color at low opacity over .ultraThinMaterial.
• Hovering a card raises visual emphasis with shadow and a slight scale-up.
• Unlike the colorless container view, clicking the card does not toggle a persistent fill state because the card is already colored.
• Tag navigation hover/click still scrolls to the matching card, but the key visual distinction comes from the card's permanent tag color.
• App drag/drop behavior remains the same: dropping an app onto a card moves or copies it into that tag group.

Design intent:

• Make tag grouping immediately visible without requiring hover.
• Use color as a persistent category marker.
• Keep the masonry layout's compactness while making group identity stronger than View 2.

View 5: Colored Grid

The colored grid view uses the same row-aligned grid layout as View 4, but each tag card is always tinted with its tag color.

Interaction logic:

• Cards are arranged with the View 4 grid-row algorithm: adaptive track count, span pattern selection, and equal fixed icon-row height per row.
• Each card background is always filled with the tag color at low opacity over .ultraThinMaterial.
• Hovering a card adds shadow and a slight scale-up to show focus.
• Clicking does not toggle a fill state because the colored background is permanent.
• Empty cells are still inserted inside each card to keep icon rows aligned.
• App drag/drop behavior remains the same as other container views.

Design intent:

• Combine the stronger category recognition of colored cards with the orderly rhythm of the grid layout.
• Make dense app libraries easier to scan by preserving row alignment.
• Use hover only for focus emphasis, not for revealing color.