Add glassmorphism UI system and SheleeSpace-inspired layout

Author: JoeBuildsThings

app/src/main/java/com/joebuildsthings/gamedeck/OverlayLifecycleOwner.kt

@@ -9,13 +9,6 @@ import androidx.savedstate.SavedStateRegistry
 import androidx.savedstate.SavedStateRegistryController
 import androidx.savedstate.SavedStateRegistryOwner
 
-/**
- * A ComposeView normally finds its lifecycle, saved state and view model owners
- * from an Activity. A Service has none of these, so Compose throws
- * "ViewTreeLifecycleOwner not found" the moment the view attaches to the window.
- * This class stands in for the Activity and is attached to the overlay view
- * before it is added to the WindowManager.
- */
 class OverlayLifecycleOwner : LifecycleOwner, ViewModelStoreOwner, SavedStateRegistryOwner {
 
     private val lifecycleRegistry = LifecycleRegistry(this)

app/src/main/java/com/joebuildsthings/gamedeck/OverlayService.kt

@@ -24,6 +24,7 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.ComposeView
 import androidx.compose.ui.platform.ViewCompositionStrategy
 import androidx.compose.ui.text.font.FontWeight
@@ -36,7 +37,6 @@ import androidx.lifecycle.setViewTreeViewModelStoreOwner
 import androidx.savedstate.setViewTreeSavedStateRegistryOwner
 import com.joebuildsthings.gamedeck.ui.theme.AccentRed
 import com.joebuildsthings.gamedeck.ui.theme.AccentRedBright
-import com.joebuildsthings.gamedeck.ui.theme.AccentRedDim
 import com.joebuildsthings.gamedeck.ui.theme.GameDeckTheme
 
 class OverlayService : Service() {
@@ -132,26 +132,21 @@ class OverlayService : Service() {
         }
         layoutParams = params
 
-        // 1. Create the lifecycle owner for our overlay
         val owner = OverlayLifecycleOwner()
         lifecycleOwner = owner
 
-        // 2. Create the ComposeView
         val composeView = ComposeView(this).apply {
             setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnDetachedFromWindow)
-            setContent { GameDeckTheme { Pill() } }
+            setContent { GameDeckTheme { GlassPill() } }
         }
 
-        // 3. Create a plain View wrapper (FrameLayout) that will be the window's root
         val wrapper = TouchInterceptor(this).apply {
-            // 4. IMPORTANT: Attach the lifecycle owners to the WRAPPER, not the ComposeView
             setViewTreeLifecycleOwner(owner)
             setViewTreeViewModelStoreOwner(owner)
             setViewTreeSavedStateRegistryOwner(owner)
             addView(composeView)
         }
 
-        // 5. Set touch listener on the wrapper for dragging
         var initialX = 0
         var initialY = 0
         var touchX = 0f
@@ -176,7 +171,6 @@ class OverlayService : Service() {
         }
 
         owner.start()
-        // 6. Add the WRAPPER to the WindowManager
         windowManager?.addView(wrapper, params)
         overlayView = wrapper
     }
@@ -190,18 +184,18 @@ class OverlayService : Service() {
 }
 
 @Composable
-private fun Pill() {
+private fun GlassPill() {
     Box(
         Modifier
-            .clip(RoundedCornerShape(20.dp))
-            .background(AccentRedDim)
-            .border(1.dp, AccentRed, RoundedCornerShape(20.dp))
-            .padding(horizontal = 14.dp, vertical = 7.dp)
+            .clip(RoundedCornerShape(50))
+            .background(Color(0x33FFFFFF))
+            .border(1.dp, Color(0x55FFFFFF), RoundedCornerShape(50))
+            .padding(horizontal = 18.dp, vertical = 10.dp)
     ) {
         Text(
-            "-- FPS",
-            color = AccentRedBright,
-            fontSize = 12.sp,
+            "60 FPS",
+            color = Color.White,
+            fontSize = 13.sp,
             fontWeight = FontWeight.SemiBold,
             letterSpacing = 1.sp
         )

app/src/main/java/com/joebuildsthings/gamedeck/ui/theme/GlassCard.kt

@@ -0,0 +1,39 @@
+package com.joebuildsthings.gamedeck.ui.theme
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.*
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+
+val GlassWhite = Color(0x1AFFFFFF)
+val GlassBorder = Color(0x33FFFFFF)
+val GlassDark = Color(0x33000000)
+val GlassAccent = Color(0x33EF4444)
+
+@Composable
+fun GlassCard(
+    modifier: Modifier = Modifier,
+    accent: Color = GlassAccent,
+    content: @Composable ColumnScope.() -> Unit
+) {
+    Surface(
+        modifier = modifier,
+        shape = RoundedCornerShape(20.dp),
+        color = Color.Transparent,
+    ) {
+        Column(
+            modifier = Modifier
+                .clip(RoundedCornerShape(20.dp))
+                .background(GlassWhite)
+                .border(1.dp, GlassBorder, RoundedCornerShape(20.dp))
+                .padding(16.dp),
+            content = content
+        )
+    }
+}