Show education sheet for chat folders.

2025-12-24 13:08:46 +00:00 · 2024-10-22 14:42:00 -07:00
parent 422acde111
commit 31d60f7800
7 changed files with 197 additions and 1 deletions
--- a/app/src/main/java/org/thoughtcrime/securesms/components/settings/app/chats/folders/ChatFoldersEducationSheet.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/components/settings/app/chats/folders/ChatFoldersEducationSheet.kt
@@ -0,0 +1,115 @@
+package org.thoughtcrime.securesms.components.settings.app.chats.folders
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.defaultMinSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import org.signal.core.ui.BottomSheets
+import org.signal.core.ui.Buttons
+import org.signal.core.ui.Previews
+import org.signal.core.ui.SignalPreview
+import org.thoughtcrime.securesms.R
+import org.thoughtcrime.securesms.compose.ComposeBottomSheetDialogFragment
+
+/**
+ * Education sheet shown when clicking on chat folders for the first time
+ */
+class ChatFoldersEducationSheet : ComposeBottomSheetDialogFragment() {
+
+  override val peekHeightPercentage: Float = 0.8f
+
+  @Composable
+  override fun SheetContent() {
+    FolderEducationSheet(this::dismissAllowingStateLoss)
+  }
+}
+
+@Composable
+private fun FolderEducationSheet(onClick: () -> Unit) {
+  return Column(
+    modifier = Modifier.fillMaxWidth().padding(horizontal = 36.dp)
+  ) {
+    BottomSheets.Handle(modifier = Modifier.align(Alignment.CenterHorizontally))
+
+    Image(
+      painter = painterResource(R.drawable.image_folder_sheet),
+      contentDescription = null,
+      modifier = Modifier.padding(top = 36.dp).align(Alignment.CenterHorizontally)
+    )
+
+    Text(
+      text = stringResource(R.string.ChatsSettingsFragment__chat_folders),
+      style = MaterialTheme.typography.titleLarge,
+      textAlign = TextAlign.Center,
+      modifier = Modifier.padding(top = 18.dp, bottom = 12.dp).align(Alignment.CenterHorizontally),
+      color = MaterialTheme.colorScheme.onSurface
+    )
+    Text(
+      text = stringResource(R.string.ChatFoldersFragment__organize_your_chats),
+      textAlign = TextAlign.Center,
+      style = MaterialTheme.typography.bodyLarge,
+      modifier = Modifier.padding(bottom = 28.dp),
+      color = MaterialTheme.colorScheme.onSurfaceVariant
+    )
+
+    EducationRow(
+      text = stringResource(R.string.ChatFoldersEducationSheet__create_folders_for_family),
+      painter = painterResource(R.drawable.symbol_folder_24)
+    )
+
+    EducationRow(
+      text = stringResource(R.string.ChatFoldersEducationSheet__choose_to_show_unread),
+      painter = painterResource(R.drawable.symbol_chat_badge_24)
+    )
+
+    EducationRow(
+      text = stringResource(R.string.ChatFoldersEducationSheet__easily_add_suggested),
+      painter = painterResource(R.drawable.symbol_plus_circle_24)
+    )
+
+    Buttons.LargeTonal(
+      onClick = onClick,
+      modifier = Modifier.defaultMinSize(minWidth = 220.dp).padding(top = 52.dp, bottom = 30.dp).align(Alignment.CenterHorizontally)
+    ) {
+      Text(stringResource(id = R.string.ChatFoldersEducationSheet__continue))
+    }
+  }
+}
+
+@Composable
+fun EducationRow(text: String, painter: Painter) {
+  Row(modifier = Modifier.padding(start = 12.dp, end = 12.dp, bottom = 20.dp)) {
+    Icon(
+      painter = painter,
+      contentDescription = null,
+      tint = MaterialTheme.colorScheme.onSurfaceVariant
+    )
+    Text(
+      text = text,
+      style = MaterialTheme.typography.bodyLarge,
+      color = MaterialTheme.colorScheme.onSurfaceVariant,
+      modifier = Modifier.padding(start = 16.dp)
+    )
+  }
+}
+
+@SignalPreview
+@Composable
+fun ChatFoldersEducationSheetPreview() {
+  Previews.BottomSheetPreview {
+    FolderEducationSheet(onClick = {})
+  }
+}
--- a/app/src/main/java/org/thoughtcrime/securesms/components/settings/app/chats/folders/ChatFoldersFragment.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/components/settings/app/chats/folders/ChatFoldersFragment.kt
@@ -21,6 +21,7 @@ import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -55,6 +56,7 @@ import org.signal.core.ui.copied.androidx.compose.rememberDragDropState
 import org.signal.core.util.toInt
 import org.thoughtcrime.securesms.R
 import org.thoughtcrime.securesms.compose.ComposeFragment
+import org.thoughtcrime.securesms.keyvalue.SignalStore
 import org.thoughtcrime.securesms.util.ViewUtil
 import org.thoughtcrime.securesms.util.navigation.safeNavigate

@@ -79,6 +81,7 @@ class ChatFoldersFragment : ComposeFragment() {
    ) { contentPadding: PaddingValues ->
      FoldersScreen(
        state = state,
+        navController = navController,
        modifier = Modifier.padding(contentPadding),
        onFolderClicked = {
          navController.safeNavigate(ChatFoldersFragmentDirections.actionChatFoldersFragmentToCreateFoldersFragment(it.id))
@@ -106,6 +109,7 @@ class ChatFoldersFragment : ComposeFragment() {
@Composable
 fun FoldersScreen(
  state: ChatFoldersSettingsState,
+  navController: NavController? = null,
  modifier: Modifier = Modifier,
  onFolderClicked: (ChatFolderRecord) -> Unit = {},
  onAdd: (ChatFolderRecord) -> Unit = {},
@@ -122,6 +126,13 @@ fun FoldersScreen(
      onPositionUpdated(fromIndex, toIndex)
    }

+  LaunchedEffect(Unit) {
+    if (!SignalStore.uiHints.hasSeenChatFoldersEducationSheet) {
+      SignalStore.uiHints.hasSeenChatFoldersEducationSheet = true
+      navController?.safeNavigate(R.id.action_chatFoldersFragment_to_chatFoldersEducationSheet)
+    }
+  }
+
  if (state.showDeleteDialog) {
    Dialogs.SimpleAlertDialog(
      title = "",
--- a/app/src/main/java/org/thoughtcrime/securesms/contacts/paged/ContactSearchPagedDataSource.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/contacts/paged/ContactSearchPagedDataSource.kt
@@ -351,7 +351,6 @@ class ContactSearchPagedDataSource(
    }
  }

-  // TODO [michelle]: Replace hardcoding chat types after building db
  private fun getChatTypesData(section: ContactSearchConfiguration.Section.ChatTypes): List<ContactSearchData> {
    val data = mutableListOf<ContactSearchData>()

--- a/app/src/main/java/org/thoughtcrime/securesms/keyvalue/UiHintValues.java
+++ b/app/src/main/java/org/thoughtcrime/securesms/keyvalue/UiHintValues.java
@@ -28,6 +28,7 @@ public class UiHintValues extends SignalStoreValues {
  private static final String HAS_SEEN_DELETE_SYNC_EDUCATION_SHEET     = "uihints.has_seen_delete_sync_education_sheet";
  private static final String LAST_SUPPORT_VERSION_SEEN                = "uihints.last_support_version_seen";
  private static final String HAS_EVER_ENABLED_REMOTE_BACKUPS          = "uihints.has_ever_enabled_remote_backups";
+  private static final String HAS_SEEN_CHAT_FOLDERS_EDUCATION_SHEET    = "uihints.has_seen_chat_folders_education_sheet";

  UiHintValues(@NonNull KeyValueStore store) {
    super(store);
@@ -209,4 +210,12 @@ public class UiHintValues extends SignalStoreValues {
  public boolean getHasEverEnabledRemoteBackups() {
    return getBoolean(HAS_EVER_ENABLED_REMOTE_BACKUPS, false);
  }
+
+  public void setHasSeenChatFoldersEducationSheet(boolean seen) {
+    putBoolean(HAS_SEEN_CHAT_FOLDERS_EDUCATION_SHEET, seen);
+  }
+
+  public boolean getHasSeenChatFoldersEducationSheet() {
+    return getBoolean(HAS_SEEN_CHAT_FOLDERS_EDUCATION_SHEET, false);
+  }
 }
--- a/app/src/main/res/drawable/image_folder_sheet.xml
+++ b/app/src/main/res/drawable/image_folder_sheet.xml
@@ -0,0 +1,45 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="112dp"
+    android:height="88dp"
+    android:viewportWidth="112"
+    android:viewportHeight="88">
+  <path
+      android:pathData="M22.13,26.72C21.76,33.36 21.01,46.98 21.01,48.41L24.26,51.66L26.83,43.61L30.52,39.02L47.4,38.24H85.08V35.44L81.39,31.31L75.58,29.29H58.69C55.11,28.96 47.85,28.22 47.4,27.95C46.95,27.68 44.46,24.56 43.26,23.03L33.87,21.36L26.27,23.03L22.13,26.72Z"
+      android:fillColor="#FFDB8D"/>
+  <path
+      android:pathData="M33.68,19.91H33.84C35.72,19.91 37.24,19.91 38.47,20C39.75,20.09 40.88,20.27 41.95,20.72C44.09,21.62 45.86,23.21 47,25.21C47.78,26.57 49.03,27.32 50.98,27.32H72.45V31.54H50.98C47.71,31.54 44.95,30.15 43.33,27.3C42.64,26.1 41.58,25.15 40.31,24.62C39.85,24.42 39.24,24.29 38.18,24.21C37.11,24.14 35.73,24.14 33.76,24.14C31.79,24.14 30.41,24.14 29.34,24.21C28.28,24.29 27.67,24.42 27.21,24.62C25.68,25.26 24.47,26.49 23.83,28.05C23.63,28.53 23.5,29.16 23.42,30.23C23.35,31.32 23.35,32.72 23.35,34.72V66.64L23.03,72.79H19.12L19.12,34.64C19.12,32.73 19.12,31.2 19.21,29.95C19.29,28.66 19.48,27.52 19.92,26.45C20.97,23.86 23,21.8 25.57,20.72C26.64,20.27 27.77,20.09 29.05,20C30.28,19.91 31.8,19.91 33.68,19.91Z"
+      android:fillColor="#565342"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M79.11,31.98C77.98,31.57 76.48,31.54 72.36,31.54V27.31C72.51,27.31 72.66,27.31 72.81,27.31C76.31,27.31 78.63,27.31 80.56,28.01C83.79,29.18 86.33,31.73 87.51,34.96C88.21,36.89 88.21,36.64 88.21,40.14C88.21,40.29 88.21,39.87 88.21,40.03V39.02V39.94H83.98V39.02V40.03C83.98,35.91 83.95,37.54 83.54,36.4C82.79,34.35 81.17,32.73 79.11,31.98Z"
+      android:fillColor="#706053"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M84.4,26m-22,0a22,22 0,1 1,44.01 0a22,22 0,1 1,-44.01 0"
+      android:fillColor="#D2D8FE"/>
+  <path
+      android:pathData="M85.19,19.11C85.19,16.69 86.82,14.51 89.21,14.51C91.6,14.51 93.23,16.69 93.23,19.11C93.23,20.34 92.83,21.51 92.15,22.39C91.47,23.28 90.44,23.93 89.21,23.93C87.99,23.93 86.96,23.28 86.28,22.39C85.59,21.51 85.19,20.34 85.19,19.11ZM89.21,16.73C88.39,16.73 87.41,17.55 87.41,19.11C87.41,19.87 87.66,20.56 88.03,21.03C88.4,21.51 88.83,21.72 89.21,21.72C89.6,21.72 90.03,21.51 90.4,21.03C90.76,20.56 91.02,19.87 91.02,19.11C91.02,17.55 90.04,16.73 89.21,16.73Z"
+      android:fillColor="#3B45FD"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M79.23,25.04C80.35,25.04 81.42,25.26 82.4,25.65C81.8,26.18 81.27,26.79 80.84,27.46C80.34,27.33 79.8,27.26 79.23,27.26C76.39,27.26 74.23,29.02 73.78,31.14H79.55C79.52,31.42 79.51,31.69 79.51,31.97C79.51,32.45 79.55,32.91 79.62,33.36H72.86C72.13,33.36 71.47,32.78 71.47,31.97C71.47,28.01 75.09,25.04 79.23,25.04Z"
+      android:fillColor="#3B45FD"/>
+  <path
+      android:pathData="M89.21,25.04C85.07,25.04 81.45,28.01 81.45,31.97C81.45,32.78 82.12,33.36 82.84,33.36H95.58C96.31,33.36 96.98,32.78 96.98,31.97C96.98,28.01 93.36,25.04 89.21,25.04ZM89.21,27.26C92.06,27.26 94.22,29.02 94.67,31.14H83.76C84.21,29.02 86.37,27.26 89.21,27.26Z"
+      android:fillColor="#3B45FD"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M79.23,14.51C76.84,14.51 75.21,16.69 75.21,19.11C75.21,20.34 75.61,21.51 76.3,22.39C76.98,23.28 78.01,23.93 79.23,23.93C80.46,23.93 81.48,23.28 82.17,22.39C82.85,21.51 83.25,20.34 83.25,19.11C83.25,16.69 81.62,14.51 79.23,14.51ZM77.43,19.11C77.43,17.55 78.41,16.73 79.23,16.73C80.06,16.73 81.03,17.55 81.03,19.11C81.03,19.87 80.78,20.56 80.41,21.03C80.04,21.51 79.62,21.72 79.23,21.72C78.85,21.72 78.42,21.51 78.05,21.03C77.68,20.56 77.43,19.87 77.43,19.11Z"
+      android:fillColor="#3B45FD"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M27.5,42.49L31.97,38.8L42.59,37.57H75.24L88.21,38.8L92.79,45.73L87.09,76.37C85.15,78.12 81.14,81.62 80.61,81.62C80.07,81.62 43.78,81.99 25.71,82.18C24.37,80.28 21.57,76.32 21.12,75.69C20.68,75.07 22.21,65 23.03,60.04L27.5,42.49Z"
+      android:fillColor="#FFEABC"/>
+  <path
+      android:pathData="M83.51,80.06L30.63,40.14L24.93,51.1L20.9,71.33L24.37,80.06L34.32,82.4H66.63L83.51,80.06Z"
+      android:fillColor="#FFE3A5"/>
+  <path
+      android:pathData="M39.96,35.67H76.25C79.32,35.67 81.77,35.67 83.71,35.84C85.7,36.01 87.4,36.37 88.9,37.25C91.28,38.63 93.09,40.82 94.01,43.42C94.59,45.06 94.63,46.8 94.42,48.78C94.23,50.72 93.77,53.12 93.2,56.14L90.5,70.27C90.1,72.4 89.77,74.11 89.4,75.5C89.02,76.92 88.55,78.14 87.79,79.24C86.57,81.02 84.88,82.42 82.9,83.29C81.68,83.82 80.4,84.05 78.93,84.16C77.5,84.27 75.75,84.27 73.58,84.27H37.28C34.21,84.27 31.77,84.27 29.82,84.1C27.83,83.93 26.13,83.56 24.63,82.69C22.25,81.3 20.44,79.12 19.53,76.52C18.95,74.88 18.91,73.14 19.11,71.16C19.31,69.21 19.76,66.81 20.34,63.8L23.03,49.67C23.44,47.54 23.76,45.82 24.14,44.44C24.52,43.01 24.99,41.8 25.74,40.7C26.97,38.92 28.66,37.52 30.63,36.65C31.85,36.11 33.14,35.88 34.61,35.77C36.04,35.67 37.78,35.67 39.96,35.67ZM34.92,39.99C33.7,40.08 32.94,40.25 32.34,40.52C31.08,41.07 30,41.96 29.22,43.1C28.85,43.64 28.54,44.35 28.22,45.54C27.89,46.75 27.59,48.31 27.17,50.54L24.51,64.49C23.91,67.63 23.49,69.85 23.32,71.58C23.14,73.31 23.23,74.33 23.51,75.11C24.09,76.76 25.25,78.16 26.76,79.04C27.48,79.46 28.47,79.74 30.19,79.89C31.93,80.04 34.19,80.04 37.38,80.04H73.5C75.77,80.04 77.36,80.04 78.61,79.95C79.84,79.86 80.59,79.69 81.2,79.42C82.46,78.86 83.53,77.97 84.31,76.84C84.69,76.29 85,75.59 85.32,74.4C85.64,73.19 85.94,71.63 86.37,69.39L89.03,55.45C89.62,52.31 90.04,50.09 90.22,48.35C90.39,46.63 90.3,45.61 90.02,44.83C89.44,43.17 88.29,41.78 86.77,40.9C86.05,40.48 85.07,40.2 83.35,40.05C81.6,39.9 79.35,39.89 76.15,39.89H40.04C37.76,39.89 36.18,39.89 34.92,39.99Z"
+      android:fillColor="#565342"
+      android:fillType="evenOdd"/>
+</vector>
--- a/app/src/main/res/navigation/app_settings_with_change_number.xml
+++ b/app/src/main/res/navigation/app_settings_with_change_number.xml
@@ -384,8 +384,15 @@
            app:exitAnim="@anim/fragment_open_exit"
            app:popEnterAnim="@anim/fragment_close_enter"
            app:popExitAnim="@anim/fragment_close_exit" />
+        <action
+            android:id="@+id/action_chatFoldersFragment_to_chatFoldersEducationSheet"
+            app:destination="@id/chatFoldersEducationSheet" />
    </fragment>

+    <dialog
+        android:id="@+id/chatFoldersEducationSheet"
+        android:name="org.thoughtcrime.securesms.components.settings.app.chats.folders.ChatFoldersEducationSheet"/>
+
    <fragment
        android:id="@+id/createFoldersFragment"
        android:name="org.thoughtcrime.securesms.components.settings.app.chats.folders.CreateFoldersFragment"
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -5079,6 +5079,16 @@
        <item quantity="other">%1$d folders</item>
    </plurals>

+    <!-- ChatFoldersEducationSheet -->
+    <!-- Text in a bottom sheet describing chat folders and what they can be created for -->
+    <string name="ChatFoldersEducationSheet__create_folders_for_family">Create folders for family, friends, work and more</string>
+    <!-- Text in a bottom sheet explaining how chat folders can be configured to only show unread chats  -->
+    <string name="ChatFoldersEducationSheet__choose_to_show_unread">Choose to show only unread chats </string>
+    <!-- Text in a bottom sheet stating that suggested folders can be easily created -->
+    <string name="ChatFoldersEducationSheet__easily_add_suggested">Easily add suggested folders</string>
+    <!-- Button text to dismiss bottom sheet -->
+    <string name="ChatFoldersEducationSheet__continue">Continue</string>
+
    <!-- ChatFoldersFragment -->
    <!-- Description of what chat folders are -->
    <string name="ChatFoldersFragment__organize_your_chats">Organize your chats into folders and quickly switch between them on your chat list.</string>