beautiful glass design

Cable/AppIcon.icon/icon.json

@@ -44,7 +44,7 @@
           "fill-specializations" : [
             {
               "value" : {
-                "solid" : "display-p3:0.31812,0.56494,0.59766,1.00000"
+                "solid" : "display-p3:0.31765,0.56494,0.59766,1.00000"
               }
             },
             {

Cable/Overview/SystemOverviewView.swift

@@ -25,11 +25,8 @@ struct SystemOverviewView: View {
 
     var body: some View {
         VStack(spacing: 0) {
-            systemCard
-                .padding(.horizontal, 16)
-                .padding(.top, 20)
-                .padding(.bottom, 16)
 
+                    if #available(iOS 26.0, *) {
                         ScrollView {
                             VStack(spacing: 16) {
                                 loadsCard
@@ -39,6 +36,44 @@ struct SystemOverviewView: View {
                             .padding(.horizontal, 16)
                             .padding(.bottom, 20)
                         }
+                        // let the content slide under the top inset
+                        // choose the Liquid Glass-friendly edge style
+                        .scrollEdgeEffectStyle(.soft, for: .top)
+
+                        // pin the Liquid Glass system card at the top safe area
+                        .safeAreaInset(edge: .top, spacing: 0) {
+                            systemCard
+                                // Liquid Glass on custom view
+                                .glassEffect(.regular, in: .rect(cornerRadius: 20))
+                                .padding(.horizontal, 16)
+                                .padding(.top, 12)
+                                .padding(.bottom, 12)
+                        }
+                    } else {
+                        ScrollView {
+                            VStack(spacing: 16) {
+                                loadsCard
+                                batteriesCard
+                                chargersCard
+                            }
+                            .padding(.horizontal, 16)
+                            .padding(.bottom, 20)
+                        }
+                        // Don’t ignore the safe area — we want content to sit below the header
+                        .safeAreaInset(edge: .top, spacing: 0) {
+                            systemCard
+                                .padding(.horizontal, 16)
+                                .padding(.top, 20)
+                                .padding(.bottom, 16)
+                                .background(Color(.systemGroupedBackground)
+                                )
+                                .overlay(
+                                    RoundedRectangle(cornerRadius: 20, style: .continuous)
+                                        .strokeBorder(.white.opacity(0.15))
+                                )
+                        }
+                    }
+
         }
         .frame(maxWidth: .infinity, maxHeight: .infinity)
         .background(Color(.systemGroupedBackground))
@@ -80,8 +115,6 @@ struct SystemOverviewView: View {
 
     private var systemCard: some View {
         VStack(alignment: .leading, spacing: 18) {
-            Text(systemOverviewTitle)
-                .font(.headline.weight(.semibold))
 
             VStack(spacing: 14) {
                 overviewMetricRow(
@@ -99,21 +132,6 @@ struct SystemOverviewView: View {
                     action: openRuntimeGoalEditor
                 )
 
-                overviewMetricRow(
-                    title: bomTitle,
-                    subtitle: bomSubtitle,
-                    icon: "list.bullet.rectangle",
-                    tint: .purple,
-                    value: formattedBOMCompletedCount,
-                    placeholder: bomPlaceholderSummary,
-                    goal: formattedBOMTotalCount,
-                    actualHours: nil,
-                    goalHours: nil,
-                    progressFraction: bomCompletionFraction,
-                    hasValue: bomItemsCount > 0,
-                    action: onShowBillOfMaterials
-                )
-
                 overviewMetricRow(
                     title: chargeTimeTitle,
                     subtitle: chargeTimeSubtitle,
@@ -128,6 +146,21 @@ struct SystemOverviewView: View {
                     hasValue: formattedChargeTime != nil,
                     action: openChargeGoalEditor
                 )
+                
+                overviewMetricRow(
+                    title: bomTitle,
+                    subtitle: bomSubtitle,
+                    icon: "list.bullet.rectangle",
+                    tint: .purple,
+                    value: formattedBOMCompletedCount,
+                    placeholder: bomPlaceholderSummary,
+                    goal: formattedBOMTotalCount,
+                    actualHours: nil,
+                    goalHours: nil,
+                    progressFraction: bomCompletionFraction,
+                    hasValue: bomItemsCount > 0,
+                    action: onShowBillOfMaterials
+                )
             }
             .padding(.top, 4)
         }
@@ -139,7 +172,7 @@ struct SystemOverviewView: View {
                 .stroke(Color(.separator).opacity(0.18), lineWidth: 1)
                 .background(
                     RoundedRectangle(cornerRadius: 20, style: .continuous)
-                        .fill(Color(.systemBackground))
+                        .fill(Color(red: 81/255, green: 144/255, blue: 152/255).opacity(0.12))
                 )
         )
     }
@@ -1406,7 +1439,9 @@ private struct GoalEditorSheet: View {
         name: "12V DC System",
         location: "Engine Room",
         iconName: "bolt.circle.fill",
-        colorName: "blue"
+        colorName: "blue",
+        targetRuntimeHours: 24,
+        targetChargeTimeHours: 3
     )
     //system.targetRuntimeHours = 8
     //system.targetChargeTimeHours = 6