From 527a925b15642f951dd687c3b9065b437e7421c5 Mon Sep 17 00:00:00 2001
From: Zakir Sheikh <sheikhzakirahmad@gmail.com>
Date: Tue, 19 Nov 2024 22:58:07 +0530
Subject: [PATCH] [FEAT] Added `blur` feature to components for api >= 12
 [FEAT] Added new stickyHeader that respects padding. [FEAT] Enhance the
 appearance of `Timeline` Screen. [FEAT] Fixed a bug causing `TwoPane` not to
 update `fabPosition`

---
 .idea/deploymentTargetSelector.xml            |   2 +-
 app/build.gradle.kts                          |   4 +-
 app/src/main/java/com/zs/gallery/Gallery.kt   | 111 +++--
 .../java/com/zs/gallery/common/Backdrop.kt    | 173 +++++++
 .../main/java/com/zs/gallery/common/Haze.kt   | 111 -----
 .../java/com/zs/gallery/files/Timeline.kt     | 438 ++++++++++--------
 .../main/java/com/zs/foundation/Headers.kt    | 131 ++++++
 .../main/java/com/zs/foundation/LazyList.kt   |  70 +++
 .../com/zs/foundation/adaptive/TwoPane.kt     |   2 +-
 .../java/com/zs/foundation/toast/Toast.kt     |  19 +-
 gradle/libs.versions.toml                     |   4 +-
 11 files changed, 735 insertions(+), 330 deletions(-)
 create mode 100644 app/src/main/java/com/zs/gallery/common/Backdrop.kt
 delete mode 100644 app/src/main/java/com/zs/gallery/common/Haze.kt
 create mode 100644 foundation/src/main/java/com/zs/foundation/Headers.kt
 create mode 100644 foundation/src/main/java/com/zs/foundation/LazyList.kt

diff --git a/.idea/deploymentTargetSelector.xml b/.idea/deploymentTargetSelector.xml
index d7de6c4..a76061c 100644
--- a/.idea/deploymentTargetSelector.xml
+++ b/.idea/deploymentTargetSelector.xml
@@ -4,7 +4,7 @@
     <selectionStates>
       <SelectionState runConfigName="app">
         <option name="selectionMode" value="DROPDOWN" />
-        <DropdownSelection timestamp="2024-11-13T15:09:48.009733800Z">
+        <DropdownSelection timestamp="2024-11-15T11:26:41.867972200Z">
           <Target type="DEFAULT_BOOT">
             <handle>
               <DeviceId pluginId="PhysicalDevice" identifier="serial=ZD2228B6BX" />
diff --git a/app/build.gradle.kts b/app/build.gradle.kts
index 401b605..2f2dd64 100644
--- a/app/build.gradle.kts
+++ b/app/build.gradle.kts
@@ -14,8 +14,8 @@ android {
         applicationId = "com.googol.android.apps.photos"
         minSdk = 24
         targetSdk = 35
-        versionCode = 30
-        versionName = "0.1.1-dev"
+        versionCode = 31
+        versionName = "0.2.0-dev"
 
         testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
         vectorDrawables {
diff --git a/app/src/main/java/com/zs/gallery/Gallery.kt b/app/src/main/java/com/zs/gallery/Gallery.kt
index d6a004b..7f59ac9 100644
--- a/app/src/main/java/com/zs/gallery/Gallery.kt
+++ b/app/src/main/java/com/zs/gallery/Gallery.kt
@@ -20,8 +20,9 @@ package com.zs.gallery
 
 import android.annotation.SuppressLint
 import android.os.Build
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.isSystemInDarkTheme
-import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.heightIn
@@ -53,7 +54,6 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.platform.LocalView
-import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.Density
 import androidx.compose.ui.unit.dp
 import androidx.core.view.WindowCompat
@@ -63,16 +63,14 @@ import androidx.navigation.NavGraph.Companion.findStartDestination
 import androidx.navigation.NavGraphBuilder
 import androidx.navigation.NavHostController
 import androidx.navigation.compose.NavHost
-import androidx.navigation.compose.currentBackStackEntryAsState
 import com.google.accompanist.permissions.ExperimentalPermissionsApi
-import com.google.accompanist.permissions.rememberMultiplePermissionsState
-import com.primex.core.BlueLilac
 import com.primex.core.plus
 import com.primex.core.textResource
 import com.primex.material2.Label
 import com.primex.material2.OutlinedButton
 import com.zs.foundation.AppTheme
 import com.zs.foundation.LocalWindowSize
+import com.zs.foundation.NightMode
 import com.zs.foundation.Range
 import com.zs.foundation.WindowSize
 import com.zs.foundation.WindowStyle
@@ -81,22 +79,24 @@ import com.zs.foundation.adaptive.NavigationSuiteScaffold
 import com.zs.foundation.calculateWindowSizeClass
 import com.zs.foundation.checkSelfPermissions
 import com.zs.foundation.isAppearanceLightSystemBars
-import com.zs.foundation.renderInSharedTransitionScopeOverlay
 import com.zs.foundation.shapes.EndConcaveShape
 import com.zs.foundation.shapes.TopConcaveShape
+import com.zs.foundation.thenIf
 import com.zs.foundation.toast.ToastHostState
 import com.zs.gallery.bin.RouteTrash
 import com.zs.gallery.bin.Trash
 import com.zs.gallery.common.LocalNavController
 import com.zs.gallery.common.LocalSystemFacade
 import com.zs.gallery.common.NavItem
-import com.zs.foundation.NightMode
+import com.zs.gallery.common.Regular
 import com.zs.gallery.common.Route
 import com.zs.gallery.common.SystemFacade
 import com.zs.gallery.common.composable
 import com.zs.gallery.common.current
 import com.zs.gallery.common.domain
+import com.zs.gallery.common.dynamicBackdrop
 import com.zs.gallery.common.preference
+import com.zs.gallery.common.rememberHazeState
 import com.zs.gallery.files.Album
 import com.zs.gallery.files.Folder
 import com.zs.gallery.files.RouteAlbum
@@ -118,14 +118,23 @@ import com.zs.gallery.settings.RouteSettings
 import com.zs.gallery.settings.Settings
 import com.zs.gallery.viewer.RouteViewer
 import com.zs.gallery.viewer.Viewer
+import dev.chrisbanes.haze.HazeStyle
+import dev.chrisbanes.haze.haze
 import org.koin.androidx.compose.koinViewModel
+import androidx.compose.foundation.layout.PaddingValues as Padding
+import androidx.compose.ui.graphics.Brush.Companion.horizontalGradient as HorizontalGradient
+import androidx.compose.ui.graphics.Brush.Companion.verticalGradient as VerticalGradient
+import androidx.navigation.compose.currentBackStackEntryAsState as current
+import com.google.accompanist.permissions.rememberMultiplePermissionsState as Permissions
+import com.primex.core.textResource as stringResource
+import com.zs.foundation.renderInSharedTransitionScopeOverlay as renderInOverlay
 
 private const val TAG = "Gallery"
 
 private val NAV_RAIL_MIN_WIDTH = 106.dp
 private val BOTTOM_NAV_MIN_HEIGHT = 56.dp
 
-private val LightAccentColor = Color.BlueLilac
+private val LightAccentColor = Color(0xFF514700)
 private val DarkAccentColor = Color(0xFFD8A25E)
 
 /**
@@ -198,8 +207,8 @@ private fun Permission() {
     // Once granted set different route like folders as start.
     // Navigate from here to there.
     val permission =
-        rememberMultiplePermissionsState(permissions = REQUIRED_PERMISSIONS) {
-            if (!it.all { (_, state) -> state }) return@rememberMultiplePermissionsState
+        Permissions(permissions = REQUIRED_PERMISSIONS) {
+            if (!it.all { (_, state) -> state }) return@Permissions
             controller.graph.setStartDestination(RouteTimeline())
             controller.navigate(RouteTimeline()) {
                 popUpTo(RoutePermission()) {
@@ -210,12 +219,12 @@ private fun Permission() {
     // If the permissions are not granted, show the permission screen.
     com.zs.gallery.common.Placeholder(
         iconResId = R.raw.lt_permission,
-        title = stringResource(R.string.permission_screen_title),
+        title = stringResource(R.string.permission_screen_title).toString(),
         message = textResource(R.string.permission_screen_desc),
         vertical = LocalWindowSize.current.widthRange == Range.Compact
     ) {
         OutlinedButton(
-            onClick = { permission.launchMultiplePermissionRequest() },
+            onClick = permission::launchMultiplePermissionRequest,
             modifier = Modifier.size(width = 200.dp, height = 46.dp),
             elevation = null,
             label = stringResource(R.string.allow),
@@ -287,7 +296,7 @@ private val NavRailShape = EndConcaveShape(16.dp)
 /**
  * A composable function that represents a navigation bar, combining both rail and bottom bar elements.
  *
- * @param type Specifies whether the navigation bar includes a [NavigationRail] or [BottomNavigation] component.
+ * @param typeRail Specifies whether the navigation bar includes a [NavigationRail] or [BottomNavigation] component.
  * @param navController The NavController to manage navigation within the navigation bar.
  * @param modifier The modifier for styling and layout customization of the navigation bar.
  */
@@ -296,12 +305,13 @@ private val NavRailShape = EndConcaveShape(16.dp)
 @NonRestartableComposable
 private fun NavigationBar(
     typeRail: Boolean,
+    contentColor: Color,
     navController: NavController,
     modifier: Modifier = Modifier,
 ) {
     val routes = @Composable {
         // Get the current navigation destination from NavController
-        val current by navController.currentBackStackEntryAsState()
+        val current by navController.current()
         val color = LocalContentColor.current
         val colors = NavigationItemDefaults.navigationItemColors(
             selectedContentColor = color,
@@ -342,15 +352,28 @@ private fun NavigationBar(
     }
     // Get the current theme colors
     val colors = AppTheme.colors
-    val useAccent by preference(Settings.KEY_USE_ACCENT_IN_NAV_BAR)
-    when (typeRail) {
-        true -> NavigationRail(
-            modifier = modifier
+    //
+    when {
+        typeRail -> NavigationRail(
+            modifier = Modifier
+                .border(
+                    0.5.dp,
+                    HorizontalGradient(
+                        listOf(
+                            Color.Transparent,
+                            Color.Transparent,
+                            Color.Gray.copy(if (colors.isLight) 0.16f else 0.24f),
+                            Color.Transparent,
+                        )
+                    ),
+                    NavRailShape
+                )
                 .clip(NavRailShape)
+                .then(modifier)
                 .widthIn(NAV_RAIL_MIN_WIDTH),
             windowInsets = WindowInsets.statusBars,
-            contentColor = if (useAccent) colors.onAccent else colors.onBackground,
-            backgroundColor = if (useAccent) colors.accent else colors.background(2.dp),
+            contentColor = contentColor,
+            backgroundColor = Color.Transparent,
             elevation = 0.dp,
             content = {
                 // Display routes at the top of the navRail.
@@ -362,16 +385,29 @@ private fun NavigationBar(
 
         else -> BottomAppBar(
             windowInsets = WindowInsets.navigationBars,
-            contentColor = if (useAccent) colors.onAccent else colors.onBackground,
-            backgroundColor = if (useAccent) colors.accent else colors.background(2.dp),
+            contentColor = contentColor,
+            backgroundColor = Color.Transparent,
             elevation = 0.dp,
-            contentPadding = PaddingValues(
+            contentPadding = Padding(
                 horizontal = AppTheme.padding.normal,
                 vertical = AppTheme.padding.medium
-            ) + PaddingValues(top = 16.dp),
-            modifier = modifier
-                .heightIn(BOTTOM_NAV_MIN_HEIGHT)
-                .clip(BottomNavShape),
+            ) + Padding(top = 16.dp),
+            modifier = Modifier
+                .border(
+                    0.5.dp,
+                    VerticalGradient(
+                        listOf(
+                            if (colors.isLight) colors.background(2.dp) else Color.Gray.copy(0.24f),
+                            Color.Transparent,
+                            Color.Transparent,
+                            if (colors.isLight) colors.background(2.dp) else Color.Gray.copy(0.24f),
+                        )
+                    ),
+                    BottomNavShape
+                )
+                .clip(BottomNavShape)
+                .then(modifier)
+                .heightIn(BOTTOM_NAV_MIN_HEIGHT),
             content = {
                 Spacer(modifier = Modifier.weight(1f))
                 // Display routes at the contre of available space
@@ -437,7 +473,10 @@ fun Gallery(
     // Consider this scenario: a large screen that fits the mobile description, like a desktop screen in portrait mode.
     // In this case, showing the BottomBar is preferable!
     val portrait = clazz.widthRange < Range.Medium
-
+    val provider = when {
+        Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> rememberHazeState()
+        else -> null
+    }
     // content
     val content = @Composable {
         NavigationSuiteScaffold(
@@ -448,10 +487,21 @@ fun Gallery(
             progress = activity.inAppUpdateProgress,
             // Set up the navigation bar using the NavBar composable
             navBar = {
+                val useAccent by preference(Settings.KEY_USE_ACCENT_IN_NAV_BAR)
+                val colors = AppTheme.colors
                 NavigationBar(
                     !portrait,
+                    if (useAccent) colors.onAccent else colors.onBackground,
                     navController,
-                    Modifier.renderInSharedTransitionScopeOverlay(0.2f)
+                    when {
+                        useAccent -> Modifier.background(colors.accent)
+                        else -> Modifier.dynamicBackdrop(
+                            if (!portrait) null else provider,
+                            HazeStyle.Regular(colors.background, if (colors.isLight) 0.48f else 0.63f),
+                            colors.background,
+                            colors.accent
+                        )
+                    }.renderInOverlay(0.2f),
                 )
             },
             // Display the main content of the app using the NavGraph composable
@@ -461,7 +511,8 @@ fun Gallery(
                 NavHost(
                     navController = navController,
                     startDestination = if (!granted) RoutePermission() else origin(),
-                    builder = navGraphBuilder
+                    builder = navGraphBuilder,
+                    modifier = Modifier.thenIf(provider != null) { haze(provider!!) }
                 )
             }
         )
diff --git a/app/src/main/java/com/zs/gallery/common/Backdrop.kt b/app/src/main/java/com/zs/gallery/common/Backdrop.kt
new file mode 100644
index 0000000..4d7216d
--- /dev/null
+++ b/app/src/main/java/com/zs/gallery/common/Backdrop.kt
@@ -0,0 +1,173 @@
+/*
+ * Copyright 2024 Zakir Sheikh
+ *
+ * Created by Zakir Sheikh on 13-11-2024.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.zs.gallery.common
+
+import android.graphics.BlurMaskFilter
+import android.os.Build
+import androidx.annotation.RequiresApi
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.NonRestartableComposable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.geometry.center
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Paint
+import androidx.compose.ui.graphics.PaintingStyle
+import androidx.compose.ui.graphics.luminance
+import androidx.compose.ui.unit.dp
+import com.primex.core.ImageBrush
+import com.primex.core.visualEffect
+import dev.chrisbanes.haze.HazeState
+import dev.chrisbanes.haze.HazeStyle
+import dev.chrisbanes.haze.HazeTint
+import dev.chrisbanes.haze.hazeChild
+
+private const val TAG = "Backdrop"
+
+/**
+ * Creates and [remember] s the instance of [HazeState]
+ */
+@Composable
+@NonRestartableComposable
+@RequiresApi(Build.VERSION_CODES.S)
+fun rememberHazeState() = remember(::HazeState)
+
+/**
+ * Constructs a regular style for light Theme.
+ */
+fun HazeStyle.Companion.Regular(
+    containerColor: Color,
+    tintAlpha: Float = if (containerColor.luminance() >= 0.5) 0.63f else 0.24f
+) = HazeStyle(
+    blurRadius = if (containerColor.luminance() >= 0.5f) 24.dp else 50.dp,
+    backgroundColor = containerColor,
+    noiseFactor = if (containerColor.luminance() >= 0.5f) 0.4f else 0.25f,
+    tint = HazeTint(containerColor.copy(alpha = tintAlpha)),
+)
+
+private val MistCachedPaint = Paint().apply {
+    style = PaintingStyle.Stroke
+    // Add blur effect on the Paint (but check if it renders well on lines)
+    this.asFrameworkPaint().maskFilter =
+        BlurMaskFilter(200f, BlurMaskFilter.Blur.NORMAL)
+}
+
+/**
+ * Applies a mist effect to the Modifier by drawing multiple circles and rectangles with specified colors.
+ *
+ * @param containerColor The color to use for the main background.
+ * @param accent The accent color to use for additional details.
+ * @return A Modifier with the applied mist effect.
+ */
+private fun Modifier.mist(containerColor: Color, accent: Color) =
+    this then drawBehind {
+        // Determine if the container color is light based on its luminance.
+        val isLight = containerColor.luminance() >= 0.5f
+
+        // Draw the main rectangle with the container color.
+        drawRect(containerColor)
+
+        // Get the width and height of the drawing area and calculate the diameter for circles.
+        val (w, h) = size
+        val vertical = w < h
+        val dp = if (vertical) h / 8  else w / 8
+        val paint = MistCachedPaint
+
+        // Set the paint color to accent and adjust the stroke width.
+        paint.color = accent
+        paint.strokeWidth = dp * 0.7f
+        // Draw the first circle with the accent color.
+        var x = if (!vertical) 2 * dp else size.center.x
+        var y = if (!vertical) size.center.y else 2 * dp
+        this.drawContext.canvas.drawCircle(
+            Offset(x, y ),
+            dp,
+            paint
+        )
+
+        // Change the paint color based on whether the container color is light or dark.
+        paint.color = if (isLight) Color.Black else Color.White.copy(0.5f)
+        // Draw the second circle with the modified color.
+        x = if (!vertical) 3 * dp else size.center.x
+        y = if (!vertical) size.center.y else 3 * dp
+        this.drawContext.canvas.drawCircle(
+            Offset(x, y ),
+            dp,
+            paint
+        )
+
+        // Set the paint color to a slightly transparent version of the accent color.
+        paint.color = accent.copy(0.7f)
+        // Draw the third circle with the adjusted accent color.
+        x = if (!vertical) 5 * dp else size.center.x
+        y = if (!vertical) size.center.y else 5 * dp
+        this.drawContext.canvas.drawCircle(
+            Offset(x, y ),
+            dp,
+            paint
+        )
+
+        // Reset the paint color to the original accent color.
+        paint.color = accent
+
+        // Draw the fourth circle with the accent color.
+        x = if (!vertical) 8 * dp else size.center.x
+        y = if (!vertical) size.center.y else 8 * dp
+        this.drawContext.canvas.drawCircle(
+            Offset(x, y ),
+            dp,
+            paint
+        )
+
+        // Set the paint color to black.
+        paint.color = Color.Black
+        // Draw the fifth circle with black color.
+        x = if (!vertical) 10 * dp else size.center.x
+        y = if (!vertical) size.center.y else 10 * dp
+        this.drawContext.canvas.drawCircle(
+            Offset(x, y ),
+            dp,
+            paint
+        )
+
+        // Draw the top rectangle with a slightly transparent version of the container color.
+        drawRect(containerColor.copy(if (isLight) 0.73f else 0.60f))
+    }
+        .visualEffect(ImageBrush.NoiseBrush, 0.3f)
+
+/**
+ * Adds a dynamic backdrop to the Modifier based on the provided HazeState.
+ *
+ * @param state The current state of the haze effect, can be null.
+ * @param style The style to apply to the haze effect.
+ * @param fallbackContainerColor The color to use if the state is null.
+ * @param fallbackAccent The accent color to use if the state is null.
+ * @return A Modifier with the applied dynamic backdrop.
+ */
+fun Modifier.dynamicBackdrop(
+    state: HazeState?,
+    style: HazeStyle,
+    fallbackContainerColor: Color,
+    fallbackAccent: Color,
+) =  when (state) {
+    null -> mist(fallbackContainerColor, fallbackAccent)
+    else -> hazeChild(state, style, { blurEnabled = true })
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/zs/gallery/common/Haze.kt b/app/src/main/java/com/zs/gallery/common/Haze.kt
deleted file mode 100644
index 764b385..0000000
--- a/app/src/main/java/com/zs/gallery/common/Haze.kt
+++ /dev/null
@@ -1,111 +0,0 @@
-/*
- * Copyright 2024 Zakir Sheikh
- *
- * Created by Zakir Sheikh on 13-11-2024.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-package com.zs.gallery.common
-
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.NonRestartableComposable
-import androidx.compose.runtime.ReadOnlyComposable
-import androidx.compose.runtime.remember
-import androidx.compose.ui.graphics.BlendMode
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.luminance
-import androidx.compose.ui.unit.dp
-import com.zs.foundation.AppTheme
-import dev.chrisbanes.haze.HazeState
-import dev.chrisbanes.haze.HazeStyle
-import dev.chrisbanes.haze.HazeTint
-
-private const val TAG = "Haze"
-
-/**
- * Alias for [HazeState], representing a backdrop provider.
- */
-typealias BackdropProvider = HazeState
-
-@Composable
-@NonRestartableComposable
-fun rememberBackdropProvider(): BackdropProvider =
-    remember(::HazeState)
-
-@ReadOnlyComposable
-@Composable
-private inline fun AppleHaze(
-    containerColor: Color = AppTheme.colors.background,
-    isDark: Boolean = containerColor.luminance() < 0.5f,
-    lightBackgroundColor: Color,
-    lightForegroundColor: Color,
-    darkBackgroundColor: Color,
-    darkForegroundColor: Color,
-): HazeStyle = HazeStyle(
-    blurRadius = 24.dp,
-    backgroundColor = AppTheme.colors.background,
-    noiseFactor = 0.3f,
-    tints = listOf(
-        HazeTint(
-            color = if (isDark) darkBackgroundColor else lightBackgroundColor,
-            blendMode = if (isDark) BlendMode.Overlay else BlendMode.ColorDodge,
-        ),
-        HazeTint(color = if (isDark) darkForegroundColor else lightForegroundColor),
-    ),
-)
-
-/**
- * A [HazeStyle] which implements a somewhat opaque material. More opaque than [thin],
- * more translucent than [thick].
- */
-@Composable
-@ReadOnlyComposable
-fun HazeStyle.Companion.regular(
-    containerColor: Color = AppTheme.colors.background,
-): HazeStyle = AppleHaze(
-    containerColor = containerColor,
-    lightBackgroundColor = Color(0xFF383838),
-    lightForegroundColor = Color(color = 0xB3B3B3, alpha = 0.82f),
-    darkBackgroundColor = Color(0xFF8C8C8C),
-    darkForegroundColor = Color(color = 0x252525, alpha = 0.82f),
-)
-
-private fun Color(color: Int, alpha: Float): Color = Color(color).copy(alpha = alpha)
-
-private fun hazeMaterial(
-    containerColor: Color,
-    lightAlpha: Float,
-    darkAlpha: Float,
-): HazeStyle = HazeStyle(
-    blurRadius = 24.dp,
-    backgroundColor = containerColor,
-    noiseFactor = 0.4f,
-    tint = HazeTint(
-        containerColor.copy(alpha = if (containerColor.luminance() >= 0.5) lightAlpha else darkAlpha),
-    ),
-)
-
-/**
- * A [HazeStyle] which implements a somewhat opaque material. More opaque than [thin],
- * more translucent than [thick].
- */
-@Composable
-@ReadOnlyComposable
-fun HazeStyle.Companion.hazeRegular(
-    containerColor: Color = AppTheme.colors.background,
-): HazeStyle = hazeMaterial(
-    containerColor = containerColor,
-    lightAlpha = 0.63f,
-    darkAlpha = 0.7f,
-)
\ No newline at end of file
diff --git a/app/src/main/java/com/zs/gallery/files/Timeline.kt b/app/src/main/java/com/zs/gallery/files/Timeline.kt
index 7962631..ca1ffa0 100644
--- a/app/src/main/java/com/zs/gallery/files/Timeline.kt
+++ b/app/src/main/java/com/zs/gallery/files/Timeline.kt
@@ -20,6 +20,7 @@
 
 package com.zs.gallery.files
 
+import android.os.Build
 import androidx.activity.compose.BackHandler
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.ExperimentalSharedTransitionApi
@@ -31,8 +32,10 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
@@ -40,17 +43,25 @@ import androidx.compose.foundation.layout.statusBars
 import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.LazyGridScope
+import androidx.compose.foundation.lazy.grid.LazyGridState
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.foundation.lazy.grid.rememberLazyGridState
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.FabPosition
+import androidx.compose.material.LocalContentColor
 import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.CheckCircle
 import androidx.compose.material.icons.filled.Star
 import androidx.compose.material.icons.outlined.BugReport
 import androidx.compose.material.icons.outlined.Chat
+import androidx.compose.material.icons.outlined.Circle
 import androidx.compose.material.icons.outlined.Close
 import androidx.compose.material.icons.outlined.DeleteOutline
 import androidx.compose.material.icons.outlined.HotelClass
 import androidx.compose.material.icons.outlined.NewReleases
+import androidx.compose.material.icons.outlined.RemoveCircle
 import androidx.compose.material.icons.outlined.Share
 import androidx.compose.material.icons.outlined.StarHalf
 import androidx.compose.material.icons.outlined.StarOutline
@@ -59,53 +70,54 @@ import androidx.compose.runtime.NonRestartableComposable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
+import androidx.navigation.NavHostController
 import com.primex.core.findActivity
 import com.primex.core.plus
-import com.primex.core.textResource
 import com.primex.material2.IconButton
 import com.primex.material2.Label
-import com.primex.material2.Text
-import com.primex.material2.appbar.LargeTopAppBar
-import com.primex.material2.appbar.TopAppBarDefaults
-import com.primex.material2.appbar.TopAppBarScrollBehavior
+import com.zs.domain.store.MediaFile
 import com.zs.foundation.AppTheme
-import com.zs.foundation.ContentPadding as CP
+import com.zs.foundation.ListHeader
 import com.zs.foundation.LocalWindowSize
 import com.zs.foundation.None
 import com.zs.foundation.VerticalDivider
 import com.zs.foundation.adaptive.TwoPane
 import com.zs.foundation.adaptive.contentInsets
 import com.zs.foundation.menu.FloatingActionMenu
-import com.zs.foundation.renderInSharedTransitionScopeOverlay
 import com.zs.foundation.sharedBounds
+import com.zs.foundation.stickyHeader
 import com.zs.foundation.thenIf
 import com.zs.foundation.toast.Toast
 import com.zs.gallery.R
+import com.zs.gallery.common.GroupSelectionLevel
 import com.zs.gallery.common.LocalNavController
 import com.zs.gallery.common.LocalSystemFacade
 import com.zs.gallery.common.MediaFile
+import com.zs.gallery.common.Regular
+import com.zs.gallery.common.SelectionTracker
+import com.zs.gallery.common.dynamicBackdrop
 import com.zs.gallery.common.emit
-import com.zs.gallery.common.hazeRegular
-import com.zs.gallery.common.items
-import dev.chrisbanes.haze.haze as observerBackdrop
-import dev.chrisbanes.haze.hazeChild as mist
 import com.zs.gallery.common.preference
-import com.zs.gallery.common.regular
 import com.zs.gallery.settings.Settings
 import com.zs.gallery.viewer.RouteViewer
+import dev.chrisbanes.haze.HazeState
 import dev.chrisbanes.haze.HazeStyle
-import com.zs.gallery.common.rememberBackdropProvider as BackdropProvider
+import androidx.compose.ui.graphics.Brush.Companion.verticalGradient as VerticalGradient
+import com.primex.core.textResource as stringResource
+import com.zs.foundation.ContentPadding as CP
+import com.zs.gallery.common.rememberHazeState as BackdropProvider
+import dev.chrisbanes.haze.haze as observerBackdrop
+
+private const val TAG = "Timeline"
 
 private val GridItemsArrangement = Arrangement.spacedBy(2.dp)
 private val FloatingTopBarShape = RoundedCornerShape(20)
 
-
 /**
  * Represents a Top app bar for this screen.
  */
@@ -113,78 +125,94 @@ private val FloatingTopBarShape = RoundedCornerShape(20)
 @NonRestartableComposable
 private fun FloatingTopAppBar(
     modifier: Modifier = Modifier,
+    backdropProvider: HazeState? = null,
     insets: WindowInsets = WindowInsets.None,
-    behaviour: TopAppBarScrollBehavior? = null
 ) {
-    LargeTopAppBar(
-        navigationIcon = {
-            val facade = LocalSystemFacade.current
-            IconButton(
-                painter = painterResource(id = R.drawable.ic_app),
-                contentDescription = null,
-                tint = null,
-                onClick = {
-                    facade.showToast(
-                        R.string.what_s_new_latest,
-                        Icons.Outlined.NewReleases,
-                        priority = Toast.PRIORITY_HIGH
-                    )
-                }
-            )
-        },
-        title = { Text(text = textResource(id = R.string.timeline)) },
-        scrollBehavior = behaviour,
-        windowInsets = WindowInsets.None,
-        modifier = Modifier
-            // Adds a mist to the background of statusBar
+    val colors = AppTheme.colors
+    Box(
+        modifier = modifier
+            .fillMaxWidth()
             .background(
-                Brush.verticalGradient(
+                VerticalGradient(
                     listOf(
-                        AppTheme.colors.background(1.dp),
-                        AppTheme.colors.background.copy(alpha = 0.5f),
+                        colors.background(1.dp),
+                        colors.background.copy(alpha = 0.5f),
                         Color.Transparent
                     )
                 )
-            )
-            .windowInsetsPadding(insets)
-            .padding(horizontal = CP.large, vertical = CP.small)
-            // Add a border around the topBar
-            .border(
-                width = 0.5.dp,
-                brush = Brush.verticalGradient(
-                    colors = listOf(
-                        AppTheme.colors.background,
-                        AppTheme.colors.background.copy(alpha = 0.3f),
+            ),
+        content = {
+            androidx.compose.material.TopAppBar(
+                navigationIcon = {
+                    val facade = LocalSystemFacade.current
+                    IconButton(
+                        painter = painterResource(id = R.drawable.ic_app),
+                        contentDescription = null,
+                        tint = null,
+                        onClick = {
+                            facade.showToast(
+                                R.string.what_s_new_latest,
+                                Icons.Outlined.NewReleases,
+                                priority = Toast.PRIORITY_HIGH
+                            )
+                        }
+                    )
+                },
+                title = {
+                    Label(
+                        text = stringResource(id = R.string.timeline),
+                        style = AppTheme.typography.titleMedium,
+                        fontWeight = FontWeight.Bold
+                    )
+                },
+                windowInsets = WindowInsets.None,
+                actions = {
+                    val facade = LocalSystemFacade.current
+                    IconButton(
+                        Icons.Outlined.HotelClass,
+                        onClick = facade::launchAppStore
+                    )
+                    IconButton(
+                        Icons.Outlined.Share,
+                        onClick = { facade.launch(Settings.ShareAppIntent) }
+                    )
+                    IconButton(
+                        Icons.Outlined.BugReport,
+                        onClick = { facade.launch(Settings.GitHubIssuesPage) }
+                    )
+                    IconButton(
+                        Icons.Outlined.Chat,
+                        onClick = { facade.launch(Settings.TelegramIntent) }
+                    )
+                },
+                backgroundColor = Color.Transparent,
+                elevation = 0.dp,
+                modifier = Modifier
+                    .widthIn(max = 550.dp)
+                    .windowInsetsPadding(insets)
+                    .padding(horizontal = CP.xLarge, vertical = CP.small)
+                    .clip(FloatingTopBarShape)
+                    .border(
+                        0.5.dp,
+                        VerticalGradient(
+                            listOf(
+                                if (colors.isLight) colors.background else Color.Gray.copy(
+                                    0.24f
+                                ),
+                                if (colors.isLight) colors.background.copy(0.3f) else Color.Gray.copy(
+                                    0.075f
+                                ),
+                            )
+                        ),
+                        FloatingTopBarShape
+                    )
+                    .height(48.dp)
+                    .dynamicBackdrop(
+                        backdropProvider,
+                        HazeStyle.Regular(colors.background),
+                        colors.background,
+                        colors.accent
                     )
-                ),
-                shape = FloatingTopBarShape
-            )
-            .clip(FloatingTopBarShape)
-            .then(modifier)
-            .widthIn(max = 400.dp),
-        style = TopAppBarDefaults.largeAppBarStyle(
-            scrolledContainerColor = Color.Transparent,
-            containerColor = AppTheme.colors.background,
-            scrolledContentColor = AppTheme.colors.onBackground,
-            contentColor = AppTheme.colors.onBackground
-        ),
-        actions = {
-            val facade = LocalSystemFacade.current
-            IconButton(
-                Icons.Outlined.HotelClass,
-                onClick = facade::launchAppStore
-            )
-            IconButton(
-                Icons.Outlined.Share,
-                onClick = { facade.launch(Settings.ShareAppIntent) }
-            )
-            IconButton(
-                Icons.Outlined.BugReport,
-                onClick = { facade.launch(Settings.GitHubIssuesPage) }
-            )
-            IconButton(
-                Icons.Outlined.Chat,
-                onClick = { facade.launch(Settings.TelegramIntent) }
             )
         }
     )
@@ -192,159 +220,207 @@ private fun FloatingTopAppBar(
 
 @Composable
 private fun MainActions(
+    visible: Boolean,
     state: TimelineViewState,
+    backdropProvider: HazeState? = null,
     modifier: Modifier = Modifier
-) = FloatingActionMenu(modifier = modifier, color = Color.Transparent) {
-    // Label
-    Label(
-        text = "${state.selected.size}",
-        modifier = Modifier.padding(
-            start = AppTheme.padding.normal,
-            end = AppTheme.padding.medium
-        ),
+) {
+    AnimatedVisibility(
+        visible = visible,
+        enter = fadeIn() + slideInVertically(),
+        exit = fadeOut() + slideOutVertically(),
+        modifier = modifier,
+        content = {
+            val colors = AppTheme.colors
+            FloatingActionMenu(
+                modifier = Modifier
+                    .border(
+                        0.5.dp,
+                        VerticalGradient(
+                            listOf(
+                                if (colors.isLight) colors.background else Color.Gray.copy(
+                                    0.24f
+                                ),
+                                if (colors.isLight) colors.background.copy(0.3f) else Color.Gray.copy(
+                                    0.075f
+                                ),
+                            )
+                        ),
+                        CircleShape
+                    )
+                    .dynamicBackdrop(
+                        backdropProvider,
+                        HazeStyle.Regular(colors.background),
+                        colors.background,
+                        colors.accent
+                    ),
+                color = Color.Transparent
+            ) {
+                // Label
+                Label(
+                    text = "${state.selected.size}",
+                    modifier = Modifier.padding(
+                        start = AppTheme.padding.normal,
+                        end = AppTheme.padding.medium
+                    ),
 
-        style = AppTheme.typography.titleLarge
-    )
-    // Divider
-    VerticalDivider(modifier = Modifier.height(AppTheme.padding.large))
+                    style = AppTheme.typography.titleLarge
+                )
+                // Divider
+                VerticalDivider(modifier = Modifier.height(AppTheme.padding.large))
 
-    // Favourite
-    IconButton(
-        imageVector = when (state.allFavourite) {
-            1 -> Icons.Filled.Star
-            0 -> Icons.Outlined.StarOutline
-            else -> Icons.Outlined.StarHalf
-        },
-        onClick = state::toggleLike
-    )
-    val context = LocalContext.current
-    // Delete
-    IconButton(
-        imageVector = Icons.Outlined.DeleteOutline,
-        onClick = { state.remove(context.findActivity()) }
-    )
+                // Favourite
+                IconButton(
+                    imageVector = when (state.allFavourite) {
+                        1 -> Icons.Filled.Star
+                        0 -> Icons.Outlined.StarOutline
+                        else -> Icons.Outlined.StarHalf
+                    },
+                    onClick = state::toggleLike
+                )
+                val context = LocalContext.current
+                // Delete
+                IconButton(
+                    imageVector = Icons.Outlined.DeleteOutline,
+                    onClick = { state.remove(context.findActivity()) }
+                )
 
-    // Share
-    IconButton(
-        imageVector = Icons.Outlined.Share,
-        onClick = { state.share(context.findActivity()) }
-    )
+                // Share
+                IconButton(
+                    imageVector = Icons.Outlined.Share,
+                    onClick = { state.share(context.findActivity()) }
+                )
 
-    // close
-    IconButton(
-        imageVector = Icons.Outlined.Close,
-        onClick = state::clear
+                // close
+                IconButton(
+                    imageVector = Icons.Outlined.Close,
+                    onClick = state::clear
+                )
+            }
+        }
     )
 }
 
-@Composable
-private fun MainContent(
-    viewState: TimelineViewState,
-    padding: PaddingValues,
-    modifier: Modifier = Modifier,
+
+private fun LazyGridScope.content(
+    data: Map<String, List<MediaFile>>,
+    state: LazyGridState,
+    tracker: SelectionTracker,
+    navController: NavHostController,
 ) {
-    val values = viewState.data
-    val multiplier by preference(key = Settings.KEY_GRID_ITEM_SIZE_MULTIPLIER)
-    val selected = viewState.selected
-    val navController = LocalNavController.current
-    // content
-    LazyVerticalGrid(
-        columns = GridCells.Adaptive(Settings.STANDARD_TILE_SIZE * multiplier),
-        horizontalArrangement = GridItemsArrangement,
-        verticalArrangement = GridItemsArrangement,
-        contentPadding = padding,
-        modifier = modifier
-    ) {
-        // return data or emit state
-        val data = emit(values) ?: return@LazyVerticalGrid
-        // if non-null data is returned
-        items(
-            data = data,
-            key = com.zs.domain.store.MediaFile::id,
-            tracker = viewState,
-            itemContent = { item ->
+    // if non-null data is returned
+    for ((header, children) in data) {
+        stickyHeader(
+            state = state,
+            key = header,
+            contentType = "header",
+            content = {
+                ListHeader(
+                    header,
+                    trailing = {
+                        val state by tracker.isGroupSelected(header)
+                        IconButton(
+                            imageVector = when (state) {
+                                GroupSelectionLevel.NONE -> Icons.Outlined.Circle
+                                GroupSelectionLevel.PARTIAL -> Icons.Outlined.RemoveCircle
+                                GroupSelectionLevel.FULL -> Icons.Filled.CheckCircle
+                            },
+                            tint = if (state == GroupSelectionLevel.FULL) AppTheme.colors.accent else LocalContentColor.current,
+                            onClick = { tracker.select(header) }
+                        )
+                    }
+                )
+            }
+        )
+        // now children
+        val selected = tracker.selected
+        for (child in children) {
+            item(key = child.id, contentType = "item") {
                 MediaFile(
-                    value = item,
+                    value = child,
                     focused = false,
                     checked = when {
                         selected.isEmpty() -> -1
-                        selected.contains(item.id) -> 1
+                        selected.contains(child.id) -> 1
                         else -> 0
                     },
                     modifier = Modifier
-                        .sharedBounds(RouteViewer.buildSharedFrameKey(item.id))
+                        .sharedBounds(RouteViewer.buildSharedFrameKey(child.id))
                         .combinedClickable(
                             // onClick of item
                             onClick = {
                                 if (selected.isNotEmpty())
-                                    viewState.select(item.id)
+                                    tracker.select(child.id)
                                 else
-                                    navController.navigate(RouteViewer(item.id))
+                                    navController.navigate(RouteViewer(child.id))
                             },
                             // onLong Click
-                            onLongClick = { viewState.select(item.id) }
+                            onLongClick = { tracker.select(child.id) }
                         )
                 )
             }
-        )
+        }
     }
 }
 
 @Composable
 fun Timeline(
-    viewState: TimelineViewState
+    viewState: TimelineViewState,
 ) {
     // Handle back
     BackHandler(
         viewState.selected.isNotEmpty(),
         viewState::clear
     )
-
-
     // The top nav insets
-    val navInsets = WindowInsets.contentInsets
+    val inAppNavInsets = WindowInsets.contentInsets
     val clazz = LocalWindowSize.current
     val portrait = clazz.widthRange < clazz.heightRange
-
-    // Properties
-    val provider = BackdropProvider()
-    val behaviour = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
-
+    //
+    val observer = when {
+        Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> BackdropProvider()
+        else -> null
+    }
     // The actual layout
     TwoPane(
-        fabPosition = FabPosition.Center,
-        modifier = Modifier.nestedScroll(behaviour.nestedScrollConnection),
+        fabPosition = if (portrait) FabPosition.Center else FabPosition.End,
         topBar = {
             FloatingTopAppBar(
-                behaviour = behaviour,
                 insets = WindowInsets.statusBars,
-                modifier = Modifier
-                    .mist(provider, HazeStyle.hazeRegular())
+                backdropProvider = observer
             )
         },
         floatingActionButton = {
-            AnimatedVisibility(
-                visible = viewState.isInSelectionMode,
-                enter = fadeIn() + slideInVertically(),
-                exit = fadeOut() + slideOutVertically(),
-                modifier = Modifier
-                    .padding(navInsets)
-                    .thenIf(!portrait) { navigationBarsPadding() },
-                content = {
-                    MainActions(
-                        state = viewState,
-                        modifier = Modifier.mist(provider, HazeStyle.regular())
-                    )
-                }
+            MainActions(
+                viewState.isInSelectionMode,
+                modifier = when {
+                    portrait -> Modifier.padding(inAppNavInsets)
+                    else -> Modifier.navigationBarsPadding()
+                },
+                state = viewState,
+                backdropProvider = observer,
             )
         },
         content = {
-            MainContent(
-                viewState = viewState,
-                padding = navInsets + WindowInsets.contentInsets +
-                        PaddingValues(end = if (!portrait) CP.large else 0.dp),
-                modifier = Modifier.observerBackdrop(provider)
-            )
+            val values = viewState.data
+            val multiplier by preference(key = Settings.KEY_GRID_ITEM_SIZE_MULTIPLIER)
+            val navController = LocalNavController.current
+            val lazyGridState = rememberLazyGridState()
+
+            // content
+            LazyVerticalGrid(
+                state = lazyGridState,
+                columns = GridCells.Adaptive(Settings.STANDARD_TILE_SIZE * multiplier),
+                horizontalArrangement = GridItemsArrangement,
+                verticalArrangement = GridItemsArrangement,
+                contentPadding = inAppNavInsets + WindowInsets.contentInsets + PaddingValues(end = if (!portrait) CP.large else 0.dp),
+                modifier = Modifier.thenIf(observer != null) { observerBackdrop(observer!!) }
+            ) {
+                // return data or emit state
+                val data = emit(values) ?: return@LazyVerticalGrid
+                // if non-null data is returned
+                content(data, lazyGridState, viewState, navController)
+            }
         }
     )
 }
\ No newline at end of file
diff --git a/foundation/src/main/java/com/zs/foundation/Headers.kt b/foundation/src/main/java/com/zs/foundation/Headers.kt
new file mode 100644
index 0000000..b71ce32
--- /dev/null
+++ b/foundation/src/main/java/com/zs/foundation/Headers.kt
@@ -0,0 +1,131 @@
+/*
+ * Copyright 2024 Zakir Sheikh
+ *
+ * Created by Zakir Sheikh on 19-11-2024.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.zs.foundation
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.NonRestartableComposable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import com.primex.material2.Label
+import androidx.compose.foundation.layout.PaddingValues as Padding
+import com.zs.foundation.ContentPadding as CP
+
+/**
+ * Item header.
+ * //TODO: Handle padding in parent composable.
+ */
+private val HEADER_MARGIN = Padding(CP.medium, CP.large, CP.medium, CP.normal)
+private val CHAR_HEADER_SHAPE = RoundedCornerShape(50, 25, 25, 25)
+
+/**
+ * Represents header for list/grid item groups.
+ * Displays a single-character header as a circular "dew drop" or a multi-character header in a
+ * two-line circular shape with a Material 3 background and subtle border.
+ *
+ * @param value The header text.
+ * @param modifier The [Modifier] to apply.
+ */
+@NonRestartableComposable
+@Composable
+fun ListHeader(
+    value: CharSequence,
+    modifier: Modifier = Modifier
+) {
+    when {
+        // If the value has only one character, display it as a circular header.
+        // Limit the width of the circular header
+        value.length == 1 -> Label(
+            text = value,
+            style = AppTheme.typography.headlineLarge,
+            modifier = modifier
+                .padding(HEADER_MARGIN)
+                .border(0.5.dp, Color.Gray.copy(0.12f), CHAR_HEADER_SHAPE)
+                .background(AppTheme.colors.background(1.dp), CHAR_HEADER_SHAPE)
+                .padding(horizontal = CP.large, vertical = CP.medium),
+        )
+        // If the value has more than one character, display it as a label.
+        // Limit the label to a maximum of two lines
+        // Limit the width of the label
+        else -> Label(
+            text = value,
+            maxLines = 2,
+            fontWeight = FontWeight.Normal,
+            style = AppTheme.typography.titleSmall,
+            modifier = modifier
+                .padding(HEADER_MARGIN)
+                .widthIn(max = 220.dp)
+                .border(0.5.dp, Color.Gray.copy(0.12f), CircleShape)
+                .background(AppTheme.colors.background(1.dp), CircleShape)
+                .padding(horizontal = CP.normal, vertical = CP.small)
+        )
+    }
+}
+
+@NonRestartableComposable
+@Composable
+fun ListHeader(
+    value: CharSequence,
+    modifier: Modifier = Modifier,
+    trailing: @Composable RowScope.() -> Unit,
+)  {
+    Row(modifier = modifier, verticalAlignment = Alignment.CenterVertically) {
+        when {
+            // If the value has only one character, display it as a circular header.
+            // Limit the width of the circular header
+            value.length == 1 -> Label(
+                text = value,
+                style = AppTheme.typography.headlineLarge,
+                modifier = modifier
+                    .padding(HEADER_MARGIN)
+                    .border(0.5.dp, AppTheme.colors.background(5.dp), CHAR_HEADER_SHAPE)
+                    .background(AppTheme.colors.background(1.dp), CHAR_HEADER_SHAPE)
+                    .padding(horizontal = CP.large, vertical = CP.medium),
+            )
+            // If the value has more than one character, display it as a label.
+            // Limit the label to a maximum of two lines
+            // Limit the width of the label
+            else -> Label(
+                text = value,
+                maxLines = 2,
+                fontWeight = FontWeight.Normal,
+                style = AppTheme.typography.titleSmall,
+                modifier = modifier
+                    .padding(HEADER_MARGIN)
+                    .widthIn(max = 220.dp)
+                    .border(0.5.dp, AppTheme.colors.background(5.dp), CircleShape)
+                    .background(AppTheme.colors.background(1.dp), CircleShape)
+                    .padding(horizontal = CP.normal, vertical = CP.medium)
+            )
+        }
+        Spacer(modifier = Modifier.weight(1f))
+        trailing()
+    }
+}
\ No newline at end of file
diff --git a/foundation/src/main/java/com/zs/foundation/LazyList.kt b/foundation/src/main/java/com/zs/foundation/LazyList.kt
new file mode 100644
index 0000000..0fbb0c9
--- /dev/null
+++ b/foundation/src/main/java/com/zs/foundation/LazyList.kt
@@ -0,0 +1,70 @@
+/*
+ * Copyright 2024 Zakir Sheikh
+ *
+ * Created by Zakir Sheikh on 19-11-2024.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.zs.foundation
+
+import android.util.Log
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.lazy.grid.LazyGridItemScope
+import androidx.compose.foundation.lazy.grid.LazyGridScope
+import androidx.compose.foundation.lazy.grid.LazyGridState
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.layout.Layout
+import androidx.compose.ui.layout.positionInParent
+import androidx.compose.ui.unit.constrainHeight
+import androidx.compose.ui.unit.constrainWidth
+import kotlin.math.roundToInt
+
+private const val TAG = "LazyList"
+
+/**
+ * A sticky header implementation that respects the top padding of the content.
+ * This should be removed when an official solution is provided.
+ * Currently, the only issue is that the sticky layout and the next item overlap before moving,
+ * while the sticky header should start moving when the next item is about to become sticky.
+ *
+ * @param state The state of the LazyGrid.
+ * @param key The key for the sticky header item.
+ * @param contentType The type of content for the sticky header.
+ * @param content The composable content for the sticky header.
+ */
+@OptIn(ExperimentalFoundationApi::class)
+fun LazyGridScope.stickyHeader(
+    state: LazyGridState,
+    key: Any? = null,
+    contentType: Any? = null,
+    content: @Composable LazyGridItemScope.() -> Unit
+) {
+    stickyHeader(
+        key = key,
+        contentType = contentType,
+        content = {
+            Layout(content = { content() }) { measurables, constraints ->
+                val placeable = measurables[0].measure(constraints)
+                val width = constraints.constrainWidth(placeable.width)
+                val height = constraints.constrainHeight(placeable.height)
+                layout(width, height) {
+                    val posY = coordinates?.positionInParent()?.y?.toInt() ?: 0
+                    val paddingTop = state.layoutInfo.beforeContentPadding
+                    var top = (paddingTop - posY).coerceIn(0, paddingTop)
+                    placeable.placeRelativeWithLayer(0,  top )
+                }
+            }
+        }
+    )
+}
\ No newline at end of file
diff --git a/foundation/src/main/java/com/zs/foundation/adaptive/TwoPane.kt b/foundation/src/main/java/com/zs/foundation/adaptive/TwoPane.kt
index d053efb..61560ed 100644
--- a/foundation/src/main/java/com/zs/foundation/adaptive/TwoPane.kt
+++ b/foundation/src/main/java/com/zs/foundation/adaptive/TwoPane.kt
@@ -177,7 +177,7 @@ fun TwoPane(
                     .background(scrim)
             )
         },
-        measurePolicy = remember(strategy) {
+        measurePolicy = remember(strategy, fabPosition, spacing) {
             when (strategy) {
                 is VerticalTwoPaneStrategy -> VerticalMeasurePolicy(strategy, fabPosition, spacing, onIndentUpdated)
                 is HorizontalTwoPaneStrategy -> HorizontalMeasurePolicy(strategy, fabPosition, spacing, onIndentUpdated)
diff --git a/foundation/src/main/java/com/zs/foundation/toast/Toast.kt b/foundation/src/main/java/com/zs/foundation/toast/Toast.kt
index 67ac313..f9014de 100644
--- a/foundation/src/main/java/com/zs/foundation/toast/Toast.kt
+++ b/foundation/src/main/java/com/zs/foundation/toast/Toast.kt
@@ -23,7 +23,9 @@ import androidx.compose.animation.animateContentSize
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.sizeIn
@@ -49,6 +51,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.drawWithContent
 import androidx.compose.ui.draw.scale
 import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.compositeOver
 import androidx.compose.ui.graphics.takeOrElse
@@ -301,7 +304,8 @@ internal fun Toast(
                 footer = composableOrNull(isExpanded) {
                     Row(
                         verticalAlignment = Alignment.CenterVertically,
-                        modifier = Modifier.thenIf(value.icon != null) { padding(start = 20.dp) },
+                        horizontalArrangement = Arrangement.End,
+                        modifier = Modifier.thenIf(value.icon != null) { padding(start = 20.dp) }.fillMaxWidth(),
                         content = {
                             // Action button if available
                             val action = value.action
@@ -344,7 +348,18 @@ internal fun Toast(
                             drawRect(color = actionColor, size = size.copy(width = 3.dp.toPx()))
                         }
                     }
-                    .thenIf(!colors.isLight) { border(0.5.dp, actionColor.copy(0.11f), shape) }
+                    .border(
+                        1.dp,
+                        Brush.linearGradient(
+                            listOf(
+                                Color.Gray.copy(if(!colors.isLight) 0.24f else 0.48f),
+                                Color.Transparent,
+                                Color.Transparent,
+                                Color.Gray.copy(if(!colors.isLight) 0.24f else 0.48f),
+                            )
+                        ),
+                        shape
+                    )
                     .visualEffect(ImageBrush.NoiseBrush, 0.60f, overlay = true)
                     .background(backgroundColor)
                     //.clip(shape)
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
index d236c52..937e361 100644
--- a/gradle/libs.versions.toml
+++ b/gradle/libs.versions.toml
@@ -28,14 +28,14 @@ firebase-analytics-ktx = { module = "com.google.firebase:firebase-analytics-ktx"
 firebase-crashlytics-ktx = { module = "com.google.firebase:firebase-crashlytics-ktx", version = "19.2.1" }
 toolkit-core-ktx = { module = "com.github.prime-zs.toolkit:core-ktx", version.ref = "toolkit" }
 toolkit-material2 = { module = "com.github.prime-zs.toolkit:material2", version.ref = "toolkit" }
-navigation-compose = { module = "androidx.navigation:navigation-compose", version = "2.8.3" }
+navigation-compose = { module = "androidx.navigation:navigation-compose", version = "2.8.4" }
 toolkit-preferences = { module = "com.github.prime-zs.toolkit:preferences", version.ref = "toolkit" }
 androidx-koin = { module = "io.insert-koin:koin-androidx-compose", version = "4.0.0" }
 ui-tooling = { module = "androidx.compose.ui:ui-tooling", version.ref = "compose" }
 ui-tooling-preview = { module = "androidx.compose.ui:ui-tooling-preview", version.ref = "compose" }
 kotlinx-coroutines-android = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-android", version = "1.9.0" }
 androidx-annotation-jvm = { group = "androidx.annotation", name = "annotation-jvm", version = "1.9.1" }
-chrisbanes-haze = {module= "dev.chrisbanes.haze:haze", version = "1.0.1"}
+chrisbanes-haze = {module= "dev.chrisbanes.haze:haze", version = "1.0.2"}
 
 androidx-material-icons-core = { module = "androidx.compose.material:material-icons-core", version.ref = "material_icons" }
 androidx-material-icons-extended = { module = "androidx.compose.material:material-icons-extended", version.ref = "material_icons" }