fix(dashboard): city chip as gradient-outline capsule

- Replace three vector segments with transparent pill + horizontal gradient border

- Size chip to city label, centered; add theme colors; remove unused drawables

Made-with: Cursor

app/src/main/kotlin/org/db3/airmq/features/dashboard/DashboardScreen.kt

@@ -1,23 +1,19 @@
 package org.db3.airmq.features.dashboard
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.ui.layout.ContentScale
-import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.draw.clip
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
@@ -39,6 +35,8 @@ import org.db3.airmq.features.common.chart.AirMQChart
 import org.db3.airmq.features.common.metric.MetricGaugePager
 import org.db3.airmq.features.common.metric.SensorType
 import org.db3.airmq.ui.theme.AirMQTheme
+import org.db3.airmq.ui.theme.DashboardCityChipGradientEnd
+import org.db3.airmq.ui.theme.DashboardCityChipGradientStart
 import org.db3.airmq.ui.theme.LegacyNavGradientEnd
 import org.db3.airmq.ui.theme.LegacyNavGradientStart
 
@@ -128,55 +126,32 @@ private fun CitySelector(
     modifier: Modifier = Modifier,
     onClick: () -> Unit = {}
 ) {
+    val chipHeight = 44.dp
+    val chipShape = RoundedCornerShape(chipHeight / 2)
+    val chipBrush = Brush.horizontalGradient(
+        colors = listOf(DashboardCityChipGradientStart, DashboardCityChipGradientEnd)
+    )
+    val borderWidth = 2.dp
     Box(
-        modifier = modifier
-            .fillMaxWidth()
-            .height(44.dp)
-            .padding(horizontal = 16.dp)
-            .clickable(onClick = onClick),
+        modifier = modifier.fillMaxWidth(),
         contentAlignment = Alignment.Center
     ) {
-        Row(
+        Box(
             modifier = Modifier
-                .height(44.dp)
-                .fillMaxWidth(),
-            verticalAlignment = Alignment.CenterVertically
+                .height(chipHeight)
+                .border(width = borderWidth, brush = chipBrush, shape = chipShape)
+                .clip(chipShape)
+                .clickable(onClick = onClick),
+            contentAlignment = Alignment.Center
         ) {
-            Image(
-                painter = painterResource(R.drawable.city_left),
-                contentDescription = null,
-                modifier = Modifier
-                    .width(22.dp)
-                    .fillMaxHeight()
-            )
-            Box(
-                modifier = Modifier
-                    .weight(1f)
-                    .height(44.dp)
-                    .padding(horizontal = 4.dp),
-                contentAlignment = Alignment.Center
-            ) {
-                Image(
-                    painter = painterResource(R.drawable.city_middle),
-                    contentDescription = null,
-                    modifier = Modifier.fillMaxSize(),
-                    contentScale = ContentScale.FillBounds
-                )
-                Text(
-                    text = city,
-                    color = Color.White,
-                    fontSize = 22.sp,
-                    fontWeight = FontWeight.Medium,
-                    maxLines = 1,
-                    overflow = TextOverflow.Ellipsis
-                )
-            }
-            Image(
-                painter = painterResource(R.drawable.city_right),
-                contentDescription = null,
-                modifier = Modifier
-                    .width(22.dp)
-                    .fillMaxHeight()
+            Text(
+                text = city,
+                color = Color.White,
+                fontSize = 22.sp,
+                fontWeight = FontWeight.Medium,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+                modifier = Modifier.padding(horizontal = 14.dp)
             )
         }
     }

app/src/main/kotlin/org/db3/airmq/ui/theme/Color.kt

@@ -21,6 +21,10 @@ val LegacyNavContainer = Color(0xFF295989)
 val LegacyNavGradientStart = Color(0xFF005BAB)
 val LegacyNavGradientEnd = Color(0xFF4997D1)
 
+/** Dashboard city selector pill (legacy vectors city_left / city_right / city_middle) */
+val DashboardCityChipGradientStart = Color(0xFF3EDEA5)
+val DashboardCityChipGradientEnd = Color(0xFF33B6EE)
+
 val LegacyButtonContained = Color(0xFF135CA5)
 val LegacyButtonContainedDisabledOverlay = Color(0x1F000000)
 val LegacyButtonPressedOverlayDark = Color(0x33000000)

app/src/main/res/drawable/city_left.xml

@@ -1,21 +0,0 @@
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:aapt="http://schemas.android.com/aapt"
-    android:width="22dp"
-    android:height="44dp"
-    android:viewportWidth="22"
-    android:viewportHeight="44">
-  <path
-      android:pathData="M22,0C9.85,0 0,9.85 0,22c0,6.08 2.46,11.58 6.44,15.56C10.42,41.54 15.92,44 22,44v-4c-9.93,0 -18,-8.07 -18,-18c0,-9.92 8.07,-18 18,-18V0L22,0z">
-    <aapt:attr name="android:fillColor">
-      <gradient
-          android:startY="21.9969"
-          android:startX="0.00143482"
-          android:endY="21.9969"
-          android:endX="22.0017"
-          android:type="linear">
-        <item android:offset="0.0154" android:color="#FF3EDEA5"/>
-        <item android:offset="1" android:color="#FF3EDEA5"/>
-      </gradient>
-    </aapt:attr>
-  </path>
-</vector>

app/src/main/res/drawable/city_middle.xml

@@ -1,63 +0,0 @@
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:aapt="http://schemas.android.com/aapt"
-    android:width="44dp"
-    android:height="44dp"
-    android:viewportWidth="44"
-    android:viewportHeight="44">
-  <path
-      android:pathData="M0,40h44v4h-44z">
-    <aapt:attr name="android:fillColor">
-      <gradient
-          android:startY="41.9968"
-          android:startX="0.00155689"
-          android:endY="41.9968"
-          android:endX="44.0016"
-          android:type="linear">
-        <item android:offset="0.0154" android:color="#FF3EDEA5"/>
-        <item android:offset="1" android:color="#FF33B6EE"/>
-      </gradient>
-    </aapt:attr>
-  </path>
-  <path
-      android:pathData="M44,40l-44,0l0,4l44,0l0,-4z">
-    <aapt:attr name="android:fillColor">
-      <gradient
-          android:startY="41.9968"
-          android:startX="0.00155689"
-          android:endY="41.9968"
-          android:endX="44.0016"
-          android:type="linear">
-        <item android:offset="0.0154" android:color="#FF3EDEA5"/>
-        <item android:offset="1" android:color="#FF33B6EE"/>
-      </gradient>
-    </aapt:attr>
-  </path>
-  <path
-      android:pathData="M0,0h44v4h-44z">
-    <aapt:attr name="android:fillColor">
-      <gradient
-          android:startY="1.9968"
-          android:startX="0.00155689"
-          android:endY="1.9968"
-          android:endX="44.0016"
-          android:type="linear">
-        <item android:offset="0.0154" android:color="#FF3EDEA5"/>
-        <item android:offset="1" android:color="#FF33B6EE"/>
-      </gradient>
-    </aapt:attr>
-  </path>
-  <path
-      android:pathData="M44,0l-44,0l0,4l44,0l0,-4z">
-    <aapt:attr name="android:fillColor">
-      <gradient
-          android:startY="1.9968"
-          android:startX="0.00155689"
-          android:endY="1.9968"
-          android:endX="44.0016"
-          android:type="linear">
-        <item android:offset="0.0154" android:color="#FF3EDEA5"/>
-        <item android:offset="1" android:color="#FF33B6EE"/>
-      </gradient>
-    </aapt:attr>
-  </path>
-</vector>

app/src/main/res/drawable/city_right.xml

@@ -1,9 +0,0 @@
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="22dp"
-    android:height="44dp"
-    android:viewportWidth="22"
-    android:viewportHeight="44">
-  <path
-      android:pathData="M18,22C18,12.07 9.93,4 0,4l0,-4c6.08,0 11.58,2.46 15.56,6.44C19.54,10.42 22,15.92 22,22c0,12.15 -9.85,22 -22,22l0,-4C9.93,40 18,31.92 18,22z"
-      android:fillColor="#33B6EE"/>
-</vector>