Placeholder for time zone search

core/base/src/main/res/values/strings.xml

@@ -167,6 +167,12 @@ Maybe this can be labeled better? Let me know. It should be something that can d
     <string name="settings_vibrations_support">Haptic feedback when clicking keyboard buttons</string>
     <string name="settings_view_source_code">View source code</string>
     <string name="time_zone_add_title">Add time zone</string>
+
+    <!-- https://s3.eu-west-1.amazonaws.com/po-pub/i/UCrz06kaEYxCGAE73ZLl9EtX.png -->
+    <string name="time_zone_no_results_button">Read the article</string>
+
+    <!-- https://s3.eu-west-1.amazonaws.com/po-pub/i/UCrz06kaEYxCGAE73ZLl9EtX.png -->
+    <string name="time_zone_no_results_support">Need more time zones?</string>
     <string name="time_zone_title">Time zones</string>
     <string name="tomorrow">Tomorrow</string>
     <string name="unit_acre">Acre</string>

core/ui/src/main/java/com/sadellie/unitto/core/ui/common/SearchPlaceholder.kt

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-package com.sadellie.unitto.feature.converter.components
+package com.sadellie.unitto.core.ui.common
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
@@ -38,7 +38,11 @@ import androidx.compose.ui.unit.dp
 import com.sadellie.unitto.core.base.R
 
 @Composable
-internal fun SearchPlaceholder(navigateToSettingsAction: () -> Unit) {
+fun SearchPlaceholder(
+    onButtonClick: () -> Unit,
+    supportText: String,
+    buttonLabel: String
+) {
     Column(
         modifier = Modifier
             .fillMaxWidth()
@@ -46,27 +50,23 @@ internal fun SearchPlaceholder(navigateToSettingsAction: () -> Unit) {
         horizontalAlignment = Alignment.CenterHorizontally,
         verticalArrangement = Arrangement.spacedBy(16.dp)
     ) {
-        // Big icon in the middle
         Icon(
-            Icons.Default.SearchOff,
+            imageVector = Icons.Default.SearchOff,
             contentDescription = stringResource(R.string.no_results_description),
             modifier = Modifier.size(48.dp)
         )
-        // Primary text
         Text(
             text = stringResource(R.string.no_results_label),
             textAlign = TextAlign.Center,
             style = MaterialTheme.typography.bodyLarge
         )
-        // Secondary text with tips
         Text(
-            text = stringResource(R.string.converter_no_results_support),
+            text = supportText,
             textAlign = TextAlign.Center,
             style = MaterialTheme.typography.bodySmall
         )
-        // Open settings button
+        ElevatedButton(onClick = onButtonClick) {
-        ElevatedButton(onClick = navigateToSettingsAction) {
+            Text(text = buttonLabel)
-            Text(text = stringResource(R.string.open_settings_label))
         }
     }
 }

feature/converter/src/main/java/com/sadellie/unitto/feature/converter/LeftSideScreen.kt

@@ -38,6 +38,7 @@ import androidx.compose.ui.text.input.TextFieldValue
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.sadellie.unitto.core.base.R
+import com.sadellie.unitto.core.ui.common.SearchPlaceholder
 import com.sadellie.unitto.core.ui.common.UnittoEmptyScreen
 import com.sadellie.unitto.core.ui.common.UnittoSearchBar
 import com.sadellie.unitto.data.model.UnitGroup
@@ -49,7 +50,6 @@ import com.sadellie.unitto.feature.converter.components.BasicUnitListItem
 import com.sadellie.unitto.feature.converter.components.ChipsFlexRow
 import com.sadellie.unitto.feature.converter.components.ChipsRow
 import com.sadellie.unitto.feature.converter.components.FavoritesButton
-import com.sadellie.unitto.feature.converter.components.SearchPlaceholder
 import com.sadellie.unitto.feature.converter.components.UnitGroupHeader
 import java.math.BigDecimal
 
@@ -169,7 +169,11 @@ private fun LeftSideScreen(
                     }
                 }
 
-                false -> SearchPlaceholder(navigateToSettingsAction = navigateToUnitGroups)
+                false -> SearchPlaceholder(
+                    onButtonClick = navigateToUnitGroups,
+                    supportText = stringResource(R.string.converter_no_results_support),
+                    buttonLabel = stringResource(R.string.open_settings_label)
+                )
             }
         }
     }

feature/converter/src/main/java/com/sadellie/unitto/feature/converter/RightSideScreen.kt

@@ -34,6 +34,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.sadellie.unitto.core.base.OutputFormat
 import com.sadellie.unitto.core.base.R
+import com.sadellie.unitto.core.ui.common.SearchPlaceholder
 import com.sadellie.unitto.core.ui.common.UnittoEmptyScreen
 import com.sadellie.unitto.core.ui.common.UnittoSearchBar
 import com.sadellie.unitto.core.ui.common.textfield.FormatterSymbols
@@ -48,7 +49,6 @@ import com.sadellie.unitto.data.model.unit.NumberBaseUnit
 import com.sadellie.unitto.data.units.MyUnitIDS
 import com.sadellie.unitto.feature.converter.components.BasicUnitListItem
 import com.sadellie.unitto.feature.converter.components.FavoritesButton
-import com.sadellie.unitto.feature.converter.components.SearchPlaceholder
 import com.sadellie.unitto.feature.converter.components.UnitGroupHeader
 import java.math.BigDecimal
 
@@ -142,7 +142,11 @@ private fun RightSideScreen(
                     }
                 }
 
-                false -> SearchPlaceholder(navigateToSettingsAction = navigateToUnitGroups)
+                false -> SearchPlaceholder(
+                    onButtonClick = navigateToUnitGroups,
+                    supportText = stringResource(R.string.converter_no_results_support),
+                    buttonLabel = stringResource(R.string.open_settings_label)
+                )
             }
         }
     }

feature/timezone/src/main/java/com/sadellie/unitto/feature/timezone/AddTimeZoneScreen.kt

@@ -40,15 +40,19 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.input.TextFieldValue
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import com.sadellie.unitto.core.base.R
 import com.sadellie.unitto.core.ui.LocalLocale
+import com.sadellie.unitto.core.ui.common.SearchPlaceholder
 import com.sadellie.unitto.core.ui.common.UnittoEmptyScreen
 import com.sadellie.unitto.core.ui.common.UnittoListItem
 import com.sadellie.unitto.core.ui.common.UnittoSearchBar
 import com.sadellie.unitto.core.ui.datetime.formatTime
+import com.sadellie.unitto.core.ui.openLink
 import com.sadellie.unitto.data.common.displayName
 import com.sadellie.unitto.data.common.offset
 import com.sadellie.unitto.data.common.regionName
@@ -83,6 +87,7 @@ fun AddTimeZoneScreen(
     addToFavorites: (TimeZone) -> Unit,
     userTime: ZonedDateTime,
 ) {
+    val mContext = LocalContext.current
     val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()
     val locale = LocalLocale.current
     val is24Hour = is24HourFormat(LocalContext.current)
@@ -100,11 +105,15 @@ fun AddTimeZoneScreen(
     ) { paddingValues ->
         Crossfade(
             modifier = Modifier.padding(paddingValues),
-            targetState = uiState.list.isEmpty(),
+            targetState = uiState.list.isEmpty() and uiState.query.text.isNotEmpty(),
             label = "Placeholder"
         ) { empty ->
             if (empty) {
-                UnittoEmptyScreen()
+                SearchPlaceholder(
+                    onButtonClick = { openLink(mContext, "https://github.com/sadellie/unitto/wiki/Adding-more-time-zones") },
+                    supportText = stringResource(R.string.time_zone_no_results_support),
+                    buttonLabel = stringResource(R.string.time_zone_no_results_button),
+                )
             } else {
                 LazyColumn(Modifier.fillMaxSize()) {
                     items(uiState.list, { it.timeZone.id }) {