feat: add skin builder web-base

Author: minhnq

app/src/main/java/org/nqmgaming/aneko/presentation/StandardScaffold.kt

@@ -36,6 +36,7 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.scale
 import androidx.compose.ui.draw.shadow
@@ -49,11 +50,14 @@ import androidx.compose.ui.unit.sp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.navigation.NavController
 import androidx.navigation.compose.currentBackStackEntryAsState
+import coil.compose.AsyncImage
 import com.ramcosta.composedestinations.utils.isRouteOnBackStackAsState
 import com.ramcosta.composedestinations.utils.rememberDestinationsNavigator
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.launch
 import kotlinx.coroutines.withContext
+import org.nqmgaming.aneko.R
+import org.nqmgaming.aneko.util.openUrl
 import timber.log.Timber
 
 @OptIn(ExperimentalMaterial3Api::class)
@@ -233,24 +237,36 @@ fun StandardScaffold(
                 viewModel.setFirstLaunchDone()
             },
             title = {
-                Text("Impotant Notice", style = typography.headlineSmall)
+                Text(
+                    "Custom skins made easy with ANeko Builder",
+                    style = typography.headlineSmall
+                )
             },
             text = {
-                Column {
-                    Text("Thank you for installing ANeko! From version 1.3.0 you are no longer needed to import skins by installing APKs. You can now import skin by selecting ZIP files directly from the app.")
+                Column(
+                    horizontalAlignment = Alignment.CenterHorizontally
+                ) {
+                    AsyncImage(
+                        model = R.drawable.skin_builder,
+                        contentDescription = "Skin builder preview",
+                        modifier = Modifier
+                            .size(200.dp),
+
+                        )
+                    Text(
+                        "Thank you for installing ANeko! ANeko Builder is a new web tool designed to make creating and customizing skins simple and fun.",
+                        style = typography.bodyMedium
+                    )
                 }
             },
             confirmButton = {
                 TextButton(onClick = {
                     // go to explore
                     isShowingDialog = false
                     viewModel.setFirstLaunchDone()
-                    navigator.navigate(BottomNavItem.Explore.direction) {
-                        launchSingleTop = true
-                        restoreState = true
-                    }
+                    context.openUrl(context.getString(R.string.skin_builder_url))
                 }) {
-                    Text("Explore Now")
+                    Text("Take me there")
                 }
             },
             dismissButton = {
@@ -259,7 +275,7 @@ fun StandardScaffold(
                     viewModel.setFirstLaunchDone()
                     Toast.makeText(
                         context,
-                        "You can access Explore from the bottom navigation bar later.",
+                        "You can access ANeko Builder later from the Explore tab.",
                         Toast.LENGTH_LONG
                     ).show()
                 }) {

app/src/main/java/org/nqmgaming/aneko/presentation/explore/ExploreSkinScreen.kt

@@ -16,6 +16,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Add
 import androidx.compose.material.icons.filled.Download
 import androidx.compose.material.icons.filled.Info
 import androidx.compose.material3.AlertDialog
@@ -204,6 +205,14 @@ fun ExploreSkin(
                     )
                 },
                 actions = {
+                    IconButton(onClick = {
+                        context.openUrl(context.getString(R.string.skin_builder_url))
+                    }) {
+                        Icon(
+                            imageVector = Icons.Default.Add,
+                            contentDescription = null
+                        )
+                    }
                     IconButton(onClick = { isShowInfoDialog = true }) {
                         Icon(
                             imageVector = Icons.Default.Info,
@@ -389,8 +398,7 @@ fun ExploreSkin(
                     )
                     TextButton(
                         onClick = {
-                            openUrl(
-                                context,
+                            context.openUrl(
                                 context.getString(R.string.skin_collection_link)
                             )
                         }

app/src/main/java/org/nqmgaming/aneko/presentation/setting/SettingScreen.kt

@@ -83,7 +83,7 @@ fun SettingsScreen() {
                 summary = stringResource(R.string.github_contribute_summary),
                 icon = R.drawable.ic_github_mark,
                 onClick = {
-                    openUrl(context, context.getString(R.string.github_uri))
+                    context.openUrl(context.getString(R.string.github_uri))
                 }
             )
 
@@ -96,7 +96,7 @@ fun SettingsScreen() {
                 summary = stringResource(R.string.translate_contribute_summary),
                 icon = R.drawable.ic_language,
                 onClick = {
-                    openUrl(context, context.getString(R.string.poeditor_url))
+                    context.openUrl(context.getString(R.string.poeditor_url))
                 }
             )
 
@@ -109,7 +109,7 @@ fun SettingsScreen() {
                 summary = stringResource(R.string.rate_app_summary),
                 icon = R.drawable.ic_star, // Or any icon you have
                 onClick = {
-                    openUrl(context, context.getString(R.string.rate_app_url))
+                    context.openUrl(context.getString(R.string.rate_app_url))
                 }
             )
         }

app/src/main/java/org/nqmgaming/aneko/util/IntentUtil.kt

@@ -4,7 +4,7 @@ import android.content.Context
 import android.content.Intent
 import androidx.core.net.toUri
 
-fun openUrl(context: Context, url: String) {
+fun Context.openUrl(url: String) {
     val intent = Intent(Intent.ACTION_VIEW, url.toUri())
-    context.startActivity(intent)
+    this.startActivity(intent)
 }

app/src/main/res/drawable/skin_builder.png

@@ -92,5 +92,6 @@
     <string name="importing">Importing…</string>
     <string name="installed">Installed</string>
     <string name="retry">Retry</string>
+    <string name="skin_builder_url">https://devtool.pwhs.app/aneko-builder</string>
 
 </resources>