Skip to content

Extend Liquid Glass effect to FilterBar, FAB, and action toolbars #46

@kmch4n

Description

@kmch4n

Summary

expo-glass-effect is currently only applied to the NativeTabs bar. Several other floating and overlay surfaces could share the same treatment to produce a cohesive Liquid Glass look throughout the UI.

Motivation

  • Users see a translucent tab bar but opaque panels elsewhere — this inconsistency breaks the illusion of a single material.
  • Overlay surfaces (toolbars, sticky filter bars, FABs) are exactly where Liquid Glass shines in Apple's own apps.

Proposal

Apply a glass-effect wrapper (GlassView or equivalent) to:

  • FilterBar.tsx — sticky top filter on Home / Search
  • FAB (floating plus button on Home)
  • BulkActionToolbar.tsx — bottom toolbar during selection mode
  • DiaryEditModal header bar
  • Video detail bottom action bar (favorite / delete / share)
  • GpsConfirmationDialog container

Notes

  • The glass effect requires a non-solid background behind it to look correct — verify contrast and legibility on light/dark content scrolling under each overlay.
  • iOS 26 is required for real Liquid Glass; older iOS falls back to a blur or translucent color — confirm the fallback is acceptable.
  • Watch for performance: glass on a scrolling list is cheap, but glass over video playback or stacked glass layers can be expensive.

Acceptance criteria

  • At least FilterBar, FAB, and BulkActionToolbar are wrapped in a glass-effect surface on iOS.
  • Text and icons on top of glass remain legible against light and dark content.
  • Android and Web fall back gracefully to the existing opaque styling.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requestfeature-ideaUser-facing feature ideas and product explorationpriority:lowLow priority

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions