From 317f889569aba8a1eebb0ef8ebeb72dcf63887b2 Mon Sep 17 00:00:00 2001
From: Ammar Ahmed <ammarahmed6506@gmail.com>
Date: Wed, 1 Jul 2026 13:45:18 +0500
Subject: [PATCH] mobile: update ui

---
 apps/mobile/app/components/header/index.tsx   |   4 +-
 .../app/components/list-items/note/index.tsx  |   8 +-
 .../list-items/selection-wrapper/index.tsx    |   4 +-
 .../app/components/properties/color-tags.tsx  |  18 +-
 .../app/components/properties/date-meta.tsx   |   2 +-
 .../app/components/properties/index.tsx       | 153 ++++----
 .../mobile/app/components/properties/tags.jsx |   5 +-
 .../app/components/sheets/sort/index.tsx      |  11 +-
 .../app/components/ui/pressable/use-button.ts |   8 +-
 apps/mobile/app/screens/manage-tags/index.tsx | 330 ++++++++++--------
 apps/mobile/fonts/MaterialCommunityIcons.ttf  | Bin 24860 -> 24292 bytes
 .../fonts/notesnook-icons.glyphmap.json       |   2 +-
 apps/mobile/fonts/notesnook-icons.ttf         | Bin 34844 -> 35012 bytes
 .../ios/nanoicons-fonts/notesnook-icons.ttf   | Bin 34844 -> 35012 bytes
 packages/icons/svgs/checkbox-intermediate.svg |   1 +
 packages/intl/locale/en.po                    |   4 +
 packages/intl/locale/pseudo-LOCALE.po         |   4 +
 packages/intl/src/strings.ts                  |   3 +-
 18 files changed, 313 insertions(+), 244 deletions(-)
 create mode 100644 packages/icons/svgs/checkbox-intermediate.svg

diff --git a/apps/mobile/app/components/header/index.tsx b/apps/mobile/app/components/header/index.tsx
index b07b206e2..6119adc9b 100644
--- a/apps/mobile/app/components/header/index.tsx
+++ b/apps/mobile/app/components/header/index.tsx
@@ -32,7 +32,6 @@ import { useSelectionStore } from "../../stores/use-selection-store";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { eScrollEvent } from "../../utils/events";
 import { fluidTabsRef } from "../../utils/global-refs";
-import { DefaultAppStyles } from "../../utils/styles";
 import { IconButton, IconButtonProps } from "../ui/icon-button";
 import Heading from "../ui/typography/heading";
 
@@ -106,7 +105,7 @@ export const Header = ({
   return (
     <View
       style={{
-        paddingHorizontal: DefaultAppStyles.GAP,
+        paddingHorizontal: Spacing.LEVEL_3,
         marginTop: Platform.OS === "android" ? 5 : 0
       }}
     >
@@ -116,7 +115,6 @@ export const Header = ({
             flexDirection: "row",
             justifyContent: "space-between",
             borderRadius: Radius.S,
-            paddingHorizontal: Spacing.LEVEL_2,
             paddingVertical: Spacing.LEVEL_3,
             backgroundColor: colors.secondary.background,
             alignItems: "center"
diff --git a/apps/mobile/app/components/list-items/note/index.tsx b/apps/mobile/app/components/list-items/note/index.tsx
index 01c432a41..3ebbfb8f7 100644
--- a/apps/mobile/app/components/list-items/note/index.tsx
+++ b/apps/mobile/app/components/list-items/note/index.tsx
@@ -162,9 +162,9 @@ const NoteItem = ({
   );
 
   const canShowTopStatusBar =
-    attachmentsCount > 0 &&
-    activeStatusIcons.length > 0 &&
-    notebooks?.items?.length &&
+    attachmentsCount > 0 ||
+    activeStatusIcons.length > 0 ||
+    notebooks?.items?.length ||
     tags?.items.length;
 
   return (
@@ -369,7 +369,7 @@ const NoteItem = ({
                 gap: Spacing.LEVEL_1
               }}
             >
-              {color ? (
+              {color && compactMode ? (
                 <View
                   style={{
                     width: 8,
diff --git a/apps/mobile/app/components/list-items/selection-wrapper/index.tsx b/apps/mobile/app/components/list-items/selection-wrapper/index.tsx
index d587e646f..9f9f3800d 100644
--- a/apps/mobile/app/components/list-items/selection-wrapper/index.tsx
+++ b/apps/mobile/app/components/list-items/selection-wrapper/index.tsx
@@ -89,7 +89,9 @@ const SelectionWrapper = ({
       )}
       <View
         style={{
-          backgroundColor: undefined
+          backgroundColor: isEditingNote
+            ? colors.selected.background
+            : undefined
         }}
       >
         <Pressable
diff --git a/apps/mobile/app/components/properties/color-tags.tsx b/apps/mobile/app/components/properties/color-tags.tsx
index 8dd5f6a48..d3208782b 100644
--- a/apps/mobile/app/components/properties/color-tags.tsx
+++ b/apps/mobile/app/components/properties/color-tags.tsx
@@ -27,6 +27,7 @@ import { View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { notesnook } from "../../../e2e/test.ids";
 import { db } from "../../common/database";
+import { Spacing } from "../../common/design/spacing";
 import {
   eSendEvent,
   sendItemUpdateEvent,
@@ -38,13 +39,10 @@ import { useRelationStore } from "../../stores/use-relation-store";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { refreshNotesPage } from "../../utils/events";
 import { AppFontSize } from "../../utils/size";
-import { DefaultAppStyles } from "../../utils/styles";
 import ColorPicker from "../dialogs/color-picker";
 import PaywallSheet from "../sheets/paywall";
-import { Button } from "../ui/button";
-import { Pressable } from "../ui/pressable";
-import { Spacing } from "../../common/design/spacing";
 import AppIcon from "../ui/AppIcon";
+import { Pressable } from "../ui/pressable";
 
 const ColorItem = ({ item, note }: { item: Color; note: Note }) => {
   const { colors } = useThemeColors();
@@ -86,15 +84,17 @@ const ColorItem = ({ item, note }: { item: Color; note: Note }) => {
         height: 40,
         borderRadius: 100,
         justifyContent: "center",
-        alignItems: "center"
+        alignItems: "center",
+        borderWidth: 0
       }}
     >
       {isLinked ? (
-        <Icon
+        <AppIcon
           testID="icon-check"
-          name="check"
-          color="white"
-          size={AppFontSize.lg}
+          name="check-small"
+          iconFamily="notesnook"
+          color={colors.static.black}
+          size={15}
         />
       ) : null}
     </Pressable>
diff --git a/apps/mobile/app/components/properties/date-meta.tsx b/apps/mobile/app/components/properties/date-meta.tsx
index 20191b69a..1091b0879 100644
--- a/apps/mobile/app/components/properties/date-meta.tsx
+++ b/apps/mobile/app/components/properties/date-meta.tsx
@@ -97,7 +97,7 @@ export const DateMeta = ({ item }: { item: Item }) => {
 
         {key === "dateCreated" && item.type === "note" ? (
           <>
-            <AppIcon name="edit-pencil" size={10} iconFamily="notesnook" />
+            <AppIcon name="edit-pencil" size={16} iconFamily="notesnook" />
           </>
         ) : null}
       </View>
diff --git a/apps/mobile/app/components/properties/index.tsx b/apps/mobile/app/components/properties/index.tsx
index 6e4c91ca1..ca0316753 100644
--- a/apps/mobile/app/components/properties/index.tsx
+++ b/apps/mobile/app/components/properties/index.tsx
@@ -63,6 +63,7 @@ import {
   Tag,
   TrashItem
 } from "@notesnook/core";
+import LineSeparator from "../ui/seperator/line-separator";
 
 export type PropertiesItem =
   | Note
@@ -131,7 +132,7 @@ export const Properties = ({
         borderBottomRightRadius: DDS.isLargeTablet() ? 10 : 1,
         borderBottomLeftRadius: DDS.isLargeTablet() ? 10 : 1,
         maxHeight: "100%",
-        paddingTop: Spacing.LEVEL_2
+        paddingTop: Spacing.LEVEL_3
       }}
       nestedScrollEnabled
       bounces={false}
@@ -159,8 +160,7 @@ export const Properties = ({
         >
           <View
             style={{
-              gap: Spacing.LEVEL_1,
-              paddingBottom: Spacing.LEVEL_3
+              gap: Spacing.LEVEL_1
             }}
           >
             {item.type === "note" && (noteNotebooks.length || tags.length) ? (
@@ -248,7 +248,7 @@ export const Properties = ({
                   />
                 ) : null}
 
-                <Heading size={AppFontSize.xl}>{item.title}</Heading>
+                <Heading fontSize="XL">{item.title}</Heading>
 
                 {editAction ? (
                   <IconButton
@@ -306,92 +306,95 @@ export const Properties = ({
               />
             ) : null}
           </View>
-
-          <DateMeta item={item} />
-
-          {item.type === "note" && colorNotes.length > 0 ? (
-            <Tags close={close} item={item} />
-          ) : null}
-
           {item.type === "note" ? (
-            <View
-              style={{
-                flexDirection: "row",
-                borderBottomWidth: 1,
-                borderTopWidth: colorNotes.length > 0 ? 1 : 0,
-                borderColor: colors.primary.border,
-                paddingVertical: Spacing.LEVEL_2,
-                paddingTop: colorNotes.length > 0 ? Spacing.LEVEL_2 : 0,
-                gap: Spacing.LEVEL_2
-              }}
-            >
-              <Button
-                onPress={async () => {
-                  ManageTags.present([item.id]);
-                  close?.();
-                }}
-                buttonType={{
-                  text: colors.primary.paragraph
-                }}
-                title={strings.addTag()}
-                type={colorNotes?.length ? "accent-outline" : "shade"}
-                icon="plus"
-                iconFamily="notesnook"
+            <LineSeparator paddingVertical={Spacing.LEVEL_3} />
+          ) : null}
+          <DateMeta item={item} />.
+          {item.type === "note" && colorNotes.length > 0 ? (
+            <View>
+              <LineSeparator
+                paddingVertical={Spacing.LEVEL_3}
                 style={{
-                  paddingHorizontal: Spacing.LEVEL_3,
-                  paddingVertical: Spacing.LEVEL_2,
-                  width: colorNotes?.length > 0 ? "100%" : "48.5%"
+                  paddingTop: Spacing.LEVEL_2
                 }}
               />
-
-              {colorNotes.length > 0 ? null : (
+              <Tags close={close} item={item} />
+              <LineSeparator
+                paddingVertical={Spacing.LEVEL_3}
+                style={{
+                  paddingBottom: 0
+                }}
+              />
+            </View>
+          ) : null}
+          {item.type === "note" ? (
+            <>
+              <View
+                style={{
+                  flexDirection: "row",
+                  gap: Spacing.LEVEL_2,
+                  marginTop: Spacing.LEVEL_2
+                }}
+              >
                 <Button
-                  onPress={() => {
-                    if (colorFeature && !colorFeature.isAllowed) {
-                      ToastManager.show({
-                        message: colorFeature.error,
-                        type: "info",
-                        context: "local",
-                        actionText: strings.upgrade(),
-                        func: () => {
-                          PaywallSheet.present(colorFeature);
-                          ToastManager.hide();
-                        }
-                      });
-                      return;
-                    }
-                    useSettingStore.getState().setSheetKeyboardHandler(false);
-                    setVisible(true);
+                  onPress={async () => {
+                    ManageTags.present([item.id]);
+                    close?.();
                   }}
-                  title={strings.addColor()}
-                  type="secondaryAccented"
+                  title={
+                    colorNotes?.length
+                      ? strings.addTag()
+                      : strings.dataTypesCamelCase.tag()
+                  }
+                  type={colorNotes?.length ? "accent-outline" : "shade-plain"}
                   icon="plus"
                   iconFamily="notesnook"
                   style={{
-                    width: "48.5%",
                     paddingHorizontal: Spacing.LEVEL_3,
-                    paddingVertical: Spacing.LEVEL_2
+                    paddingVertical: Spacing.LEVEL_2,
+                    width: colorNotes?.length > 0 ? "100%" : "48.5%"
                   }}
                 />
-              )}
-            </View>
+
+                {colorNotes.length > 0 ? null : (
+                  <Button
+                    onPress={() => {
+                      if (colorFeature && !colorFeature.isAllowed) {
+                        ToastManager.show({
+                          message: colorFeature.error,
+                          type: "info",
+                          context: "local",
+                          actionText: strings.upgrade(),
+                          func: () => {
+                            PaywallSheet.present(colorFeature);
+                            ToastManager.hide();
+                          }
+                        });
+                        return;
+                      }
+                      useSettingStore.getState().setSheetKeyboardHandler(false);
+                      setVisible(true);
+                    }}
+                    title={strings.dataTypesCamelCase.color()}
+                    type="shade-plain"
+                    icon="plus"
+                    iconFamily="notesnook"
+                    style={{
+                      width: "48.5%",
+                      paddingHorizontal: Spacing.LEVEL_3,
+                      paddingVertical: Spacing.LEVEL_2
+                    }}
+                  />
+                )}
+              </View>
+            </>
           ) : null}
         </View>
 
-        <View
-          style={{
-            paddingHorizontal: Spacing.LEVEL_3
-          }}
-        >
-          <View
-            style={{
-              marginVertical: Spacing.LEVEL_3,
-              width: "100%",
-              borderBottomWidth: 1,
-              borderColor: colors.primary.separator
-            }}
-          />
-        </View>
+        <LineSeparator
+          paddingVertical={Spacing.LEVEL_2}
+          paddingHorizontal={Spacing.LEVEL_3}
+        />
 
         <Items
           item={item}
diff --git a/apps/mobile/app/components/properties/tags.jsx b/apps/mobile/app/components/properties/tags.jsx
index cdfa2f8b4..4f09f9447 100644
--- a/apps/mobile/app/components/properties/tags.jsx
+++ b/apps/mobile/app/components/properties/tags.jsx
@@ -36,10 +36,7 @@ export const Tags = ({ item, close }) => {
     <View
       style={{
         flexDirection: "row",
-        width: "100%",
-        borderTopWidth: 1,
-        borderColor: colors.primary.border,
-        paddingVertical: Spacing.LEVEL_3
+        width: "100%"
       }}
     >
       <ColorTags item={item} />
diff --git a/apps/mobile/app/components/sheets/sort/index.tsx b/apps/mobile/app/components/sheets/sort/index.tsx
index b7408b977..cd2d45ed1 100644
--- a/apps/mobile/app/components/sheets/sort/index.tsx
+++ b/apps/mobile/app/components/sheets/sort/index.tsx
@@ -285,7 +285,16 @@ const Sort = ({
                   await updateGroupOptions(_groupOptions);
                 }}
               >
-                <Paragraph>
+                <Paragraph
+                  color={
+                    groupOptions?.sortBy === item
+                      ? colors.primary.heading
+                      : colors.primary.paragraph
+                  }
+                  fontFamily={
+                    groupOptions?.sortBy === item ? "MEDIUM" : "REGULAR"
+                  }
+                >
                   {strings.sortByStrings[
                     item as keyof typeof strings.sortByStrings
                   ]()}
diff --git a/apps/mobile/app/components/ui/pressable/use-button.ts b/apps/mobile/app/components/ui/pressable/use-button.ts
index 91b38ecad..164ca79c4 100644
--- a/apps/mobile/app/components/ui/pressable/use-button.ts
+++ b/apps/mobile/app/components/ui/pressable/use-button.ts
@@ -188,7 +188,7 @@ const buttonTypes = (
   "accent-outline": {
     primary: "transparent",
     text: colors.primary.accent,
-    selected: accent || colors.primary.accent,
+    selected: "transparent",
     borderWidth: 1,
     borderColor: accent || colors.primary.accent,
     borderSelectedColor: accent || colors.primary.accent
@@ -217,9 +217,9 @@ const buttonTypes = (
     text: colors.primary.heading,
     selected: colors.primary.accent,
     colorOpacity: 0.12,
-    borderWidth: 0.8,
-    borderColor: getColorLinearShade(colors.primary.shade, 0.3, isDark),
-    borderSelectedColor: getColorLinearShade(colors.primary.shade, 0.3, isDark)
+    borderWidth: 0
+    // borderColor: getColorLinearShade(colors.primary.shade, 0.3, isDark),
+    // borderSelectedColor: getColorLinearShade(colors.primary.shade, 0.3, isDark)
   },
   error: {
     primary: colors.error.background,
diff --git a/apps/mobile/app/screens/manage-tags/index.tsx b/apps/mobile/app/screens/manage-tags/index.tsx
index ea44e2f93..73e486ac6 100644
--- a/apps/mobile/app/screens/manage-tags/index.tsx
+++ b/apps/mobile/app/screens/manage-tags/index.tsx
@@ -25,17 +25,19 @@ import { useThemeColors } from "@notesnook/theme";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { TextInput, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
-import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { db } from "../../common/database";
+import { Radius, Spacing } from "../../common/design/spacing";
 import { Header } from "../../components/header";
+import AppIcon from "../../components/ui/AppIcon";
+import { Button } from "../../components/ui/button";
 import Input from "../../components/ui/input";
 import { Pressable } from "../../components/ui/pressable";
 import Heading from "../../components/ui/typography/heading";
 import Paragraph from "../../components/ui/typography/paragraph";
 import { useNavigationFocus } from "../../hooks/use-navigation-focus";
 import {
-  sendItemUpdateEvent,
-  ToastManager
+  ToastManager,
+  sendItemUpdateEvent
 } from "../../services/event-manager";
 import Navigation, { NavigationProps } from "../../services/navigation";
 import {
@@ -44,8 +46,7 @@ import {
 } from "../../stores/item-selection-store";
 import { useRelationStore } from "../../stores/use-relation-store";
 import { useTagStore } from "../../stores/use-tag-store";
-import { AppFontSize, defaultBorderRadius } from "../../utils/size";
-import { DefaultAppStyles } from "../../utils/styles";
+import { AppFontSize } from "../../utils/size";
 
 async function updateInitialSelectionState(items: string[]) {
   const relations = await db.relations
@@ -90,18 +91,26 @@ const ManageTags = (props: NavigationProps<"ManageTags">) => {
   const [tags, setTags] = useState<Tag[]>();
   const [query, setQuery] = useState<string>();
   const inputRef = useRef<TextInput>(null);
-  useNavigationFocus(props.navigation, { focusOnInit: true });
+  useNavigationFocus(props.navigation, {
+    focusOnInit: true
+  });
   const timerRef = useRef<NodeJS.Timeout>(undefined);
   const [queryExists, setQueryExists] = useState(false);
   const refreshSelection = useCallback(() => {
-    updateInitialSelectionState(ids).then((selection) => {
+    updateInitialSelectionState(ids).then((initialState) => {
+      const prev = useTagItemSelection.getState();
+      const selection = { ...initialState };
+      for (const id in prev.selection) {
+        if (prev.selection[id] !== prev.initialState[id]) {
+          selection[id] = prev.selection[id];
+        }
+      }
       useTagItemSelection.setState({
-        initialState: selection,
-        selection: { ...selection }
+        initialState,
+        selection
       });
     });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ids, tags]);
+  }, [ids]);
 
   const sortAndSetTags = useCallback(
     async (items: VirtualizedGrouping<Tag>) => {
@@ -130,6 +139,12 @@ const ManageTags = (props: NavigationProps<"ManageTags">) => {
     [ids]
   );
 
+  useEffect(() => {
+    return () => {
+      useTagItemSelection.getState().reset();
+    };
+  }, []);
+
   const refreshTags = useCallback(() => {
     if (query && query.trim() !== "") {
       db.lookup
@@ -190,109 +205,128 @@ const ManageTags = (props: NavigationProps<"ManageTags">) => {
       }
 
       if (id) {
-        for (const noteId of ids) {
-          await db.relations.add(
-            {
-              id: id,
-              type: "tag"
-            },
-            {
-              id: noteId,
-              type: "note"
-            }
-          );
-        }
+        const { selection } = useTagItemSelection.getState();
+        useTagItemSelection.setState({
+          selection: {
+            ...selection,
+            [id]: "selected"
+          }
+        });
       }
 
-      useRelationStore.getState().update();
-      sendItemUpdateEvent(id, "tag");
       useTagStore.getState().refresh();
       setQuery(undefined);
     } catch (e) {
       ToastManager.error(e as Error);
     }
-
-    Navigation.queueRoutesForUpdate();
   };
 
-  const onPress = useCallback(
-    async (id: string) => {
-      for (const noteId of ids) {
-        try {
-          if (!id) return;
-          const isSelected =
-            useTagItemSelection.getState().initialState[id] === "selected";
-          if (isSelected) {
-            await db.relations.unlink(
-              {
-                id: id,
-                type: "tag"
-              },
-              {
-                id: noteId,
-                type: "note"
-              }
+  const onPress = useCallback((id: string) => {
+    if (!id) return;
+    const { selection } = useTagItemSelection.getState();
+    useTagItemSelection.setState({
+      selection: {
+        ...selection,
+        [id]: selection[id] === "selected" ? "deselected" : "selected"
+      }
+    });
+  }, []);
+
+  const onSave = useCallback(async () => {
+    const { selection, initialState } = useTagItemSelection.getState();
+    const changedIds = new Set([
+      ...Object.keys(selection),
+      ...Object.keys(initialState)
+    ]);
+
+    try {
+      for (const id of changedIds) {
+        if (selection[id] === initialState[id]) continue;
+
+        const shouldLink = selection[id] === "selected";
+        for (const noteId of ids) {
+          if (shouldLink) {
+            await db.relations.add(
+              { id, type: "tag" },
+              { id: noteId, type: "note" }
             );
           } else {
-            await db.relations.add(
-              {
-                id: id,
-                type: "tag"
-              },
-              {
-                id: noteId,
-                type: "note"
-              }
+            await db.relations.unlink(
+              { id, type: "tag" },
+              { id: noteId, type: "note" }
             );
           }
-        } catch (e) {
-          console.error(e);
         }
+        sendItemUpdateEvent(id, "tag");
       }
-      sendItemUpdateEvent(id, "tag");
+
       useTagStore.getState().refresh();
       useRelationStore.getState().update();
-      refreshTags();
-      setTimeout(() => {
-        Navigation.queueRoutesForUpdate();
-      }, 1);
-      refreshSelection();
-    },
-    [ids, refreshSelection, refreshTags]
-  );
+      Navigation.queueRoutesForUpdate();
+      Navigation.goBack();
+    } catch (e) {
+      ToastManager.error(e as Error);
+    }
+  }, [ids]);
 
   const renderTag = useCallback(
-    ({ index, item }: { item: Tag; index: number }) => (
+    ({ item }: { item: Tag; index: number }) => (
       <TagItem tag={item} onPress={onPress} />
     ),
     [onPress]
   );
 
+  const hasChanges = useTagItemSelection((state) => {
+    const norm = (v?: string) =>
+      v === "selected" ? "s" : v === "intermediate" ? "i" : "n";
+    const changedIds = new Set([
+      ...Object.keys(state.selection),
+      ...Object.keys(state.initialState)
+    ]);
+    for (const id of changedIds) {
+      if (norm(state.selection[id]) !== norm(state.initialState[id])) {
+        return true;
+      }
+    }
+    return false;
+  });
+
   return (
     <SafeAreaView
       style={{
         width: "100%",
         alignSelf: "center",
         backgroundColor: colors.primary.background,
-        gap: DefaultAppStyles.GAP_VERTICAL,
         flex: 1
       }}
     >
-      <Header title={strings.manageTags()} canGoBack />
+      <Header
+        style={{
+          backgroundColor: "transparent"
+        }}
+        title={strings.manageTags()}
+        canGoBack
+      />
 
       <View
         style={{
-          paddingHorizontal: DefaultAppStyles.GAP,
-          flex: 1
+          paddingHorizontal: Spacing.LEVEL_3,
+          flex: 1,
+          gap: Spacing.LEVEL_3
         }}
       >
         <Input
           button={{
-            icon: "magnify",
-            color: colors.primary.accent,
-            size: AppFontSize.lg,
+            icon: "search",
+            iconFamily: "notesnook",
+            color: colors.primary.icon,
+            size: 16,
             onPress: () => {}
           }}
+          containerStyle={{
+            backgroundColor: colors.secondary.background,
+            borderWidth: 0
+          }}
           testID="tag-input"
           fwdRef={inputRef}
           autoCapitalize="none"
@@ -309,28 +343,12 @@ const ManageTags = (props: NavigationProps<"ManageTags">) => {
           placeholder={strings.searchForTags()}
         />
 
-        {query && !queryExists ? (
-          <Pressable
-            key={"query_item"}
-            style={{
-              flexDirection: "row",
-              justifyContent: "space-between",
-              paddingHorizontal: DefaultAppStyles.GAP,
-              paddingVertical: DefaultAppStyles.GAP_VERTICAL
-            }}
-            onPress={onSubmit}
-            type="selected"
-          >
-            <Heading size={AppFontSize.sm} color={colors.selected.heading}>
-              {strings.add()} {'"' + "#" + query + '"'}
-            </Heading>
-            <Icon
-              name="plus"
-              color={colors.selected.icon}
-              size={AppFontSize.lg}
-            />
-          </Pressable>
-        ) : null}
+        <View
+          style={{
+            height: 1,
+            backgroundColor: colors.primary.border
+          }}
+        />
 
         <View
           style={{
@@ -344,6 +362,37 @@ const ManageTags = (props: NavigationProps<"ManageTags">) => {
             keyboardDismissMode="interactive"
             estimatedItemSize={50}
             renderItem={renderTag}
+            ListHeaderComponent={
+              query && !queryExists ? (
+                <Pressable
+                  key={"query_item"}
+                  style={{
+                    flexDirection: "row",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    padding: Spacing.LEVEL_2,
+                    borderRadius: Radius.XS,
+                    marginBottom: Spacing.LEVEL_0
+                  }}
+                  onPress={onSubmit}
+                  type="selected"
+                >
+                  <Heading
+                    fontSize="SM"
+                    fontFamily="MEDIUM"
+                    color={colors.selected.heading}
+                  >
+                    {strings.add()} {'"' + "#" + query + '"'}
+                  </Heading>
+                  <AppIcon
+                    name="plus"
+                    iconFamily="material"
+                    color={colors.selected.icon}
+                    size={AppFontSize.md}
+                  />
+                </Pressable>
+              ) : null
+            }
             ListEmptyComponent={
               <View
                 style={{
@@ -368,6 +417,23 @@ const ManageTags = (props: NavigationProps<"ManageTags">) => {
           />
         </View>
       </View>
+
+      <View
+        style={{
+          borderTopWidth: 1,
+          borderTopColor: colors.primary.border,
+          backgroundColor: colors.primary.background,
+          padding: Spacing.LEVEL_3
+        }}
+      >
+        <Button
+          title={strings.saveChanges()}
+          type="accent"
+          width="100%"
+          disabled={!hasChanges}
+          onPress={onSave}
+        />
+      </View>
     </SafeAreaView>
   );
 };
@@ -389,65 +455,49 @@ const TagItem = ({
 }) => {
   const { colors } = useThemeColors();
   const selection = useTagItemSelection((state) =>
-    tag?.id ? state.selection[tag?.id] : false
+    tag?.id ? state.selection[tag?.id] : undefined
   );
+  const selected = selection === "selected" || selection === "intermediate";
 
   return (
     <Pressable
       style={{
         flexDirection: "row",
-        marginVertical: 5,
+        alignItems: "center",
+        gap: Spacing.LEVEL_1,
         justifyContent: "flex-start",
-        height: 40
+        padding: Spacing.LEVEL_2,
+        borderRadius: Radius.XS,
+        marginBottom: Spacing.LEVEL_0
       }}
       onPress={() => {
         if (!tag) return;
         onPress(tag.id);
       }}
-      type="plain"
+      type={selected ? "selected" : "transparent"}
     >
-      {!tag ? null : (
-        <Icon
-          size={22}
-          onPress={() => {
-            if (!tag) return;
-            onPress(tag.id);
-          }}
-          color={
-            selection === "selected" || selection === "intermediate"
-              ? colors.selected.icon
-              : colors.primary.icon
-          }
-          style={{
-            marginRight: 6
-          }}
-          testID={
-            selection === "selected"
-              ? "check-circle-outline"
-              : selection === "intermediate"
-                ? "minus-circle-outline"
-                : "checkbox-blank-circle-outline"
-          }
-          name={
-            selection === "selected"
-              ? "check-circle-outline"
-              : selection === "intermediate"
-                ? "minus-circle-outline"
-                : "checkbox-blank-circle-outline"
-          }
-        />
-      )}
-      {tag ? (
-        <Paragraph size={AppFontSize.sm}>{"#" + tag?.title}</Paragraph>
-      ) : (
-        <View
-          style={{
-            width: 200,
-            height: 30,
-            borderRadius: defaultBorderRadius
-          }}
-        />
-      )}
+      <AppIcon
+        name={
+          selection === "selected"
+            ? "checkbox"
+            : selection === "intermediate"
+              ? "checkbox-intermediate"
+              : "box-empty"
+        }
+        iconFamily="notesnook"
+        size={16}
+        color={
+          selected
+            ? [colors.selected.accent, colors.static.white]
+            : colors.secondary.icon
+        }
+      />
+      <Paragraph
+        fontSize="SM"
+        color={selected ? colors.primary.heading : colors.secondary.paragraph}
+      >
+        {"#" + tag?.title}
+      </Paragraph>
     </Pressable>
   );
 };
diff --git a/apps/mobile/fonts/MaterialCommunityIcons.ttf b/apps/mobile/fonts/MaterialCommunityIcons.ttf
index 0e07b8576fb109a78414f9bba623783b8b975171..1c7858743b4fde83ca13928053ef81ceddbeb2e7 100644
GIT binary patch
delta 1684
zcmW;Le@xVM9LMq3_k{a>_q{vr2M2d>UW$f_8ve@qgIGCdW@=;vgdA{+b{r&l;VO@e
z>=!c?p)^w~FcHR&jun+Z7$fJJYemAEu`*|BwwYVgIoDV(-hVvq`Tcx<-F-jb&mA6C
zuAWx*2I4C>Ix_&p4Cu2rM|NylFhBDSU|0sMSXLDdRfYn2JAtQb0W7KFj%g#xFvll2
zo>5g@-=N_J#}{~yl1NQOsOkE)7_e?O$3@klhFax3P6O+kcv2u5st!l$uKdbzJD};V
zt*NurpDRB0F!1bJe(Apc?oP#UL+%LdPn2pNQQ{p?l@9Kj!43#uCi@HVPRL?!2_PG)
zMkjzdtWyAUSvPrj{ycW60Oqq#3Sa@-Ks$KOLN+cCL@qbl1+a*{B!I>2#FWJHq&g+u
z#_OJkn)D$Z<aQBzium*>Vb2Mml>I>f8`+;|l;@POe+!_TofJR?)Z{e+sASg*Ak0qL
z#A`P}jVEv8U>gTj>`nn}VGjskD|=7?FS17k5Mjp!P|f}!fGAY0RRA^Y69TAZ-x9z}
z>^>0(_ye?`2%wJb6F@!todCA8d}0D(EWen5m)U;>z_*}VLQA=S2fJJVudtj+0$yeL
z^t!31ceA~GUAkTlUSsbFfU}_I5+H!b^<DuqvN-~Hon0t^UF-${yup4efF`I0vjE;?
zxl{}bdC%P}Uk&m8Z*!wS0PnCd0ldq8B!KtW6V%BIn%Q0f>|r@81ia6V31Bb#y8t-N
zhU<cV4fZbqv_LiTSezdK-?fqJlYmyJCN3BP+E`AjX=-tQz;b2?;Ce9i2;dM@GZz;D
z{K4i@0UTzzAPM*ws%2aNN1$3C7r;@(RqI&}&hn&V?4$s=9@KsTe9GPsz-R0~0%(V7
zR|L=jHDy!)$DukoV+4E-)ol|1XVC2sKqpks*Hdgf=_FKdz5u!s`Gzc0V#4{LewM;x
zP{x%;7=fjWb6vTMb7$#tU1J-z=8cWzxf&b0hK9P3Nb=9LCR*n>HHpV^76e<8*Ht9_
zd^sy85n0!-w9I^FMZ7P0G<i~+t<BRmX-{e|Y47W1=t}f!^-=u+{YCw4LzUsU;Tywm
zMy)a57&Q(X|1%Yt&X^|6dFF`uh<VUFVjeZ$wam4ww$xh&Emy5U>k?~$^^kSII%K`5
zYSl8eU7fJ4wtZpy-gd=qw&&Q_+UxDj_8$AVL+>bxJ7SJzM~~xLiY+BC<w(jsXViJZ
zdD%7Fwb~VP4Y@A6eeO#4fcvH=;927-_3ZbIq$0H}b${xq)cf94Z@%|-+U&FqX$@&-
z(ypaD(pRNdrpMC1^bPv1`tJEN{Ezx~`TP8rGK?9^GMX}OW%@G9Gutw6237|41O@_k
zr+XJoFP#2kFe&&@upxLpc<TY*)Vxx6Vt2uxnrYqKh(1@SBrX(wrL?pb4JId5)l`QQ
pPZh6HS~^OK6NVRVO!K;`!*z9`&Ea|Fp-O(%Y_E@OiH3QX{{cNORK5TJ

delta 2256
zcmXYz3v63g8OQ&}ZtnH_=Gwk?94C(BS4JJX)K8j06xf)ifyh?YE*qi5Nt~uMFJiY#
z%T{LtM%9gKYev?=7+u+*UDIa8NDSCmnX(BLsVb8?O$Cjz6$mLB6AXlqNcsDKrQiLX
z@A$jt?IT}(Sv>Wscr;v_yU+VkKsW$PVduoYu~bOE0kGZ-+}bu?E{&GLeFuO$h5!`C
zSz%rguQEQ$I5s|6oink(_$9V6JTW~|s+(8d13nvOJTzIFn-Ral%fOxUObSnxCd(6*
zcYee87+_kOnXWji_Vm4F;I2=z(+g*pP73P>Ol^D?>N`v~irQn)#A6I&^m7s*PX9;(
zB<QyYTSXWBo&-ojGpQ1woAye86zwB^=BMeR1o$xhDG9Kdo+JB!2r?|xBtVXSRs!Vd
z%MI#18!DpqB-^_i+J=`1XN=F&uS<Y0&=(}Y5dCZN26IaEsstFJuStMWdR+pPp*4L*
z0*ujHCBRO)@!c5P8HZMDnq@G{;EVJD39y@fTmnqcPfCDE`nwWfihff9Ow+%Y05i}O
zmjw6{{YeSHew43EfC|kGA~m4O!ZQ+J5B-7!*h{}A0q&(adjfEU6?RO3ee~ZYz<y|I
zffQN)Wx7WK+)ocm08UWl?A6BXee^PSNL^;o@INHLJTwcpod6He0SWLRot6M!p*Kr_
zuhQEkz}M)XNq~o-SsfC9Gq>`nSU0oHgEY5>u-`*0+$jMbruRyKN9b=$fN#(z$Vt9%
zm|m6ukJ4Nf0&qF4mn6Uu`gaok9Oyqu0B))E&l2F9&}@9C#s{#-fM=2bPe8NtAQ9jw
z&E>Z9K!az%&gCNj2WCGb0iJ^9;Nc>`cjz4w;AwhT0`SZ@-;@Bypt)|A0MDSNxn5!L
z3ST}>uS<aMLDSAkfM;o*b^<&{|5XBfADS*Czz?8#-jD!XDKA%&04JgOnkB&Vv|9q4
zg6988gEl5DL2Kbi32+)(;1d$yOub-D*lX7>iC>6QXa+C1Vl<M->$yU<)9BQ*dB5t{
zqee8JE8HkDK125^NfAkWOk|B~i+Uiy;a$h#wr$U^B?Im?cR)Up+X8L@cOZEk$-cg%
zNY2kUQr9mvzE37O26;D%b7D6X_FCWR4O!}^+hVTrUs$=ws|E3h+EvJP6@8gPE)h`-
zuV1CSzD&{2K-P-+7WYw;Y0;C5#|!cQIp=vo#B#CNuI2%&!#dzj<m2(6V!caehCZOG
zt+7}(UO&GvXsVfk>;Dm_I0hH5$270ys8I|F!>jrW`COtaE<5t8*}R$-`5gOIjY831
z6#l%T`ili|YJQX3tA$&GE$gpk_{_?9$=($3WrFKx?+^GonpClSev`hbwWF=$Lz|<$
zej_WzRG+L}QcT^dGZPfIZ|YWDVY9jZPIopU$973v<5DQR#xq=wu6)+u2$X0fEpojg
zBM0hhj5IAGF5wM{Y^Inf8c`!_Wb@g4G%xbEg+K1R!C_DLr_=p|{b`fWW8N}c9p18K
zxX10Wk8x}I`VOS#XS!?^lgwbI-C?$SJno)G7E{fhS|cmjhXqf6dBeiHS8l4`*MC+l
z3<=9Z>W*7#=bP3Phw>3+RN1fmT)C=x)ttIRU9=psoUmN5x~v<m$E{av8*JUSaogjz
zReQufZ@=n@ImR4E94n5u9czw%Ioq6DowLqwIp22KT(`OgUHe_<T$f#cbp2cF)*jN%
zH=CMgo8M}FUr*@0`nY~bU(zq?t8SY+<33Pxzu+->LY|ywyXUayMbE1D7Vj~`XWVWa
zG%gw+_(HyM-$CDs-{BwhAMyXv|IZesrKe@0<wU>|=n0Gljt9;K)>@CYUTj?thJ$0l
z!@-{h|JLSc3$^WNA8LQ3{aE|!?N>t^Lj$1)Lq7~%>FDlQ>{tog!oA@m;rBZWo$Z62
zPj~({g2-HCDRMa)j?P3EqgP@s2%hrg`k}3VFqxNGnB6uY6meRd5zF=S+kY(F`pEQD
zwLDc#jqaJ5*fmnBmKPovc(LAl_ie)Etc;gt%c;Gk*<Gcn>cYW$K4-O5_DzkXrpLzW
s@7}X&PP#|<k79RfW@1kzHNB@gv1_VqOqMH^(#~>fxHQV=|7(H&0)#rlh5!Hn

diff --git a/apps/mobile/fonts/notesnook-icons.glyphmap.json b/apps/mobile/fonts/notesnook-icons.glyphmap.json
index 3c4f7621e..24637e420 100644
--- a/apps/mobile/fonts/notesnook-icons.glyphmap.json
+++ b/apps/mobile/fonts/notesnook-icons.glyphmap.json
@@ -1 +1 @@
-{"m":{"f":"notesnook-icons","u":1024,"z":1020,"s":59648,"h":"2dcedc1a0af01c1b9f5b41bda35fffed95197a1d2b1ad44fce393eaa995d4663"},"i":{"archive":[1024,[[59648,"#666666"]]],"arrow-back":[1024,[[59649,"rgba(255,255,255,0.7)"]]],"arrow-clockwise":[1024,[[59650,"#181818"]]],"arrow-counter-clockwise":[1024,[[59651,"#181818"]]],"arrow-fat-up":[1024,[[59652,"var(--fill-0, #181818)"]]],"arrow-right":[1024,[[59653,"#008836"]]],"arrow-square-out":[1024,[[59654,"#666666"]]],"arrow-u-up-left":[1024,[[59655,"var(--fill-0, #181818)"]]],"arrows-clockwise":[1024,[[59656,"var(--fill-0, #181818)"]]],"backspace":[1024,[[59657,"#181818"]]],"bag-simple":[1024,[[59658,"var(--fill-0, #181818)"]]],"bell-z":[1024,[[59659,"#181818"]]],"bell":[1024,[[59660,"#666666"]]],"bomb-off":[1024,[[59661,"currentColor"]]],"bomb":[1024,[[59662,"#666666"]]],"book-open":[1024,[[59663,"#666666"]]],"bookmark":[1024,[[59664,"#666666"]]],"box-empty":[1024,[[59665,"#B0B0B1"]]],"bug-droid":[1024,[[59666,"var(--fill-0, #181818)"]]],"calendar-check":[946,[[59667,"var(--fill-0, #181818)"]]],"calendar-day":[1024,[[59668,"#181818"]]],"calendar-dots":[946,[[59669,"var(--fill-0, #181818)"]]],"calendar":[1024,[[59670,"rgba(102,102,102,0.8)"]]],"chart-donut":[1024,[[59671,"#181818"]]],"chart-line-up":[1024,[[59672,"var(--fill-0, #181818)"]]],"chat":[1024,[[59673,"white"]]],"check-small":[951,[[59674,"#008836"]]],"check-square":[1024,[[59675,"#181818"]]],"check":[1024,[[59676,"#008836"]]],"checkbox":[1024,[[59677,"#008836"],[59678,"white"]]],"checks":[1024,[[59679,"#181818"]]],"chevron-down":[1024,[[59680,"#181818"]]],"chevron-right":[1024,[[59681,"#181818"]]],"chevron-up":[1024,[[59682,"#181818"]]],"clock-counter-clockwise":[1024,[[59683,"var(--fill-0, #181818)"]]],"clock":[1024,[[59684,"#181818"]]],"close":[1024,[[59685,"#666666"]]],"cloud-check":[1024,[[59686,"var(--fill-0, #181818)"]]],"cloud":[1024,[[59687,"white"]]],"copy":[1024,[[59688,"#008836"]]],"crown-simple":[1024,[[59689,"#E0B637"]]],"dark-mode-outline":[1024,[[59690,"currentColor"]]],"delete-restore":[1024,[[59691,"currentColor"]]],"device-mobile-camera":[1024,[[59692,"var(--fill-0, #181818)"]]],"discord-logo":[1024,[[59693,"var(--fill-0, #181818)"]]],"dots-three":[1024,[[59694,"#202020"]]],"download-simple":[1024,[[59695,"var(--fill-0, #181818)"]]],"drive-file-move":[1088,[[59696,"#666666"]]],"duplicate":[1024,[[59697,"currentColor"]]],"edit-pencil":[1024,[[59698,"#181818"]]],"ellipse":[1024,[[59699,"#A6A6A6"]]],"envelope-simple":[1024,[[59700,"white"]]],"export":[1024,[[59701,"var(--fill-0, #181818)"]]],"eye-closed":[1024,[[59702,"white"]]],"eye-filled":[1024,[[59703,"#666666"]]],"eye-open":[1024,[[59704,"currentColor"]]],"eye-slash":[1024,[[59705,"var(--fill-0, #181818)"]]],"file-cloud":[1024,[[59706,"#181818"]]],"file-dashed":[1024,[[59707,"var(--fill-0, #181818)"]]],"file-html":[1024,[[59708,"#181818"]]],"file-pdf":[1024,[[59709,"#181818"]]],"file-text":[1024,[[59710,"var(--fill-0, #181818)"]]],"file":[1024,[[59711,"white"]]],"fingerprint-simple":[1024,[[59712,"#181818"]]],"folder":[1024,[[59713,"#181818"]]],"funnel":[1024,[[59714,"#666666"]]],"gift":[1024,[[59715,"#181818"]]],"git-pull-request":[1024,[[59716,"var(--fill-0, #181818)"]]],"github-logo":[1024,[[59717,"var(--fill-0, #181818)"]]],"hard-drives":[1024,[[59718,"var(--fill-0, #181818)"]]],"home":[1024,[[59719,"#181818"]]],"house":[1024,[[59720,"#6F6F6F"]]],"identifier":[1024,[[59721,"currentColor"]]],"image-outline":[1024,[[59722,"white"]]],"key":[1024,[[59723,"var(--fill-0, #181818)"]]],"link-alt":[1024,[[59724,"#666666"]]],"link":[560,[[59725,"#666666"]]],"list":[2190,[[59726,"#181818"]]],"lock-simple":[1024,[[59727,"white"]]],"lock":[1024,[[59728,"#181818"]]],"markdown":[1024,[[59729,"#181818"]]],"mastodon-logo":[1024,[[59730,"var(--fill-0, #181818)"]]],"menu":[1024,[[59731,"#181818"]]],"message-badge-outline":[1024,[[59732,"currentColor"]]],"minus":[1024,[[59733,"#181818"]]],"mode-edit":[1024,[[59734,"#181818"]]],"moon":[1024,[[59735,"var(--fill-0, #181818)"]]],"network":[1024,[[59736,"var(--fill-0, #181818)"]]],"note":[1024,[[59737,"#181818"]]],"notification":[1024,[[59738,"var(--fill-0, #181818)"]]],"numpad":[1024,[[59739,"#181818"]]],"nut":[1024,[[59740,"#181818"]]],"paint-brush-household":[1024,[[59741,"#181818"]]],"paint-roller":[1024,[[59742,"var(--fill-0, #181818)"]]],"palette":[1024,[[59743,"#666666"]]],"paperclip":[1024,[[59744,"#666666"]]],"pause":[1024,[[59745,"var(--fill-0, #181818)"]]],"pencil-ruler":[1024,[[59746,"#181818"]]],"pencil-simple-line":[1024,[[59747,"var(--fill-0, #181818)"]]],"pencil-simple-slash":[1024,[[59748,"#858585"]]],"pencil-simple":[1024,[[59749,"#181818"]]],"pin":[939,[[59750,"#666666"]]],"plus":[1024,[[59751,"#181818"]]],"radio-button":[1024,[[59752,"#008836"]]],"recovery-key-cloud-arrow-down":[1024,[[59753,"var(--fill-0, #181818)"]]],"recovery-key-copy":[1024,[[59754,"var(--stroke-0, #008836)"]]],"recovery-key-file":[1024,[[59755,"var(--fill-0, #181818)"]]],"recovery-key-key":[1024,[[59756,"var(--fill-0, #181818)"]]],"recovery-key-qr-code":[1024,[[59757,"var(--fill-0, #181818)"]]],"recovery-key-shield-check":[1024,[[59758,"var(--fill-0, #008836)"]]],"search":[1024,[[59759,"#181818"]]],"share":[1024,[[59760,"#666666"]]],"shield-check":[1024,[[59761,"#181818"]]],"shield-plus":[1024,[[59762,"#181818"]]],"shield":[1024,[[59763,"var(--fill-0, #181818)"]]],"shopping-mode":[1024,[[59764,"#666666"]]],"sliders-horizontal":[1024,[[59765,"var(--fill-0, #181818)"]]],"sliders":[1024,[[59766,"#181818"]]],"sort-ascending":[1024,[[59767,"#666666"]]],"sort-descending":[1024,[[59768,"currentColor"]]],"speaker-high":[1024,[[59769,"#181818"]]],"spellcheck":[1067,[[59770,"currentColor"]]],"square-out":[1024,[[59771,"#181818"]]],"squares-four":[1024,[[59772,"var(--fill-0, #181818)"]]],"star-filled":[1024,[[59773,"#E5C131"]]],"star":[1024,[[59774,"#666666"]]],"sun":[1024,[[59775,"#666666"]]],"swatches":[1024,[[59776,"var(--fill-0, #181818)"]]],"sync-disabled":[911,[[59777,"#858585"]]],"table":[1024,[[59778,"#181818"]]],"telegram-logo":[1024,[[59779,"var(--fill-0, #181818)"]]],"text-aa":[1024,[[59780,"#181818"]]],"toggle-off":[1725,[[59781,"#DADADA"]]],"toggle-on":[1725,[[59782,"#008836"]]],"trash-alt":[1024,[[59783,"#FB2C36"]]],"trash":[1024,[[59784,"#666666"]]],"tray-arrow-down":[1024,[[59785,"#181818"]]],"user-circle-minus":[1024,[[59786,"var(--fill-0, #FF242E)"]]],"user-sheet-docs":[1024,[[59787,"var(--fill-0, #181818)"]]],"user-sheet-logout":[1024,[[59788,"var(--fill-0, #FB2C36)"]]],"user-sheet-settings":[1024,[[59789,"var(--fill-0, #181818)"]]],"user-sheet-support":[1024,[[59790,"var(--fill-0, #181818)"]]],"user-sheet-sync":[1024,[[59791,"var(--fill-0, #181818)"]]],"user":[1024,[[59792,"var(--fill-0, #181818)"]]],"users-three":[1024,[[59793,"var(--fill-0, #181818)"]]],"view-list":[1024,[[59794,"#181818"]]],"warning-circle":[1024,[[59795,"#BB3431"]]],"warning":[1024,[[59796,"#FF242E"]]],"wifi-slash":[1024,[[59797,"var(--fill-0, #181818)"]]],"x-logo":[1024,[[59798,"var(--fill-0, #181818)"]]]}}
\ No newline at end of file
+{"m":{"f":"notesnook-icons","u":1024,"z":1020,"s":59648,"h":"062b04ae5d347ff9df140348f63c4db60deae915c8111f816e25228ed8ac34f6"},"i":{"archive":[1024,[[59648,"#666666"]]],"arrow-back":[1024,[[59649,"rgba(255,255,255,0.7)"]]],"arrow-clockwise":[1024,[[59650,"#181818"]]],"arrow-counter-clockwise":[1024,[[59651,"#181818"]]],"arrow-fat-up":[1024,[[59652,"var(--fill-0, #181818)"]]],"arrow-right":[1024,[[59653,"#008836"]]],"arrow-square-out":[1024,[[59654,"#666666"]]],"arrow-u-up-left":[1024,[[59655,"var(--fill-0, #181818)"]]],"arrows-clockwise":[1024,[[59656,"var(--fill-0, #181818)"]]],"backspace":[1024,[[59657,"#181818"]]],"bag-simple":[1024,[[59658,"var(--fill-0, #181818)"]]],"bell-z":[1024,[[59659,"#181818"]]],"bell":[1024,[[59660,"#666666"]]],"bomb-off":[1024,[[59661,"currentColor"]]],"bomb":[1024,[[59662,"#666666"]]],"book-open":[1024,[[59663,"#666666"]]],"bookmark":[1024,[[59664,"#666666"]]],"box-empty":[1024,[[59665,"#B0B0B1"]]],"bug-droid":[1024,[[59666,"var(--fill-0, #181818)"]]],"calendar-check":[946,[[59667,"var(--fill-0, #181818)"]]],"calendar-day":[1024,[[59668,"#181818"]]],"calendar-dots":[946,[[59669,"var(--fill-0, #181818)"]]],"calendar":[1024,[[59670,"rgba(102,102,102,0.8)"]]],"chart-donut":[1024,[[59671,"#181818"]]],"chart-line-up":[1024,[[59672,"var(--fill-0, #181818)"]]],"chat":[1024,[[59673,"white"]]],"check-small":[951,[[59674,"#008836"]]],"check-square":[1024,[[59675,"#181818"]]],"check":[1024,[[59676,"#008836"]]],"checkbox-intermediate":[1024,[[59677,"currentColor"]]],"checkbox":[1024,[[59678,"#008836"],[59679,"white"]]],"checks":[1024,[[59680,"#181818"]]],"chevron-down":[1024,[[59681,"#181818"]]],"chevron-right":[1024,[[59682,"#181818"]]],"chevron-up":[1024,[[59683,"#181818"]]],"clock-counter-clockwise":[1024,[[59684,"var(--fill-0, #181818)"]]],"clock":[1024,[[59685,"#181818"]]],"close":[1024,[[59686,"#666666"]]],"cloud-check":[1024,[[59687,"var(--fill-0, #181818)"]]],"cloud":[1024,[[59688,"white"]]],"copy":[1024,[[59689,"#008836"]]],"crown-simple":[1024,[[59690,"#E0B637"]]],"dark-mode-outline":[1024,[[59691,"currentColor"]]],"delete-restore":[1024,[[59692,"currentColor"]]],"device-mobile-camera":[1024,[[59693,"var(--fill-0, #181818)"]]],"discord-logo":[1024,[[59694,"var(--fill-0, #181818)"]]],"dots-three":[1024,[[59695,"#202020"]]],"download-simple":[1024,[[59696,"var(--fill-0, #181818)"]]],"drive-file-move":[1088,[[59697,"#666666"]]],"duplicate":[1024,[[59698,"currentColor"]]],"edit-pencil":[1024,[[59699,"#181818"]]],"ellipse":[1024,[[59700,"#A6A6A6"]]],"envelope-simple":[1024,[[59701,"white"]]],"export":[1024,[[59702,"var(--fill-0, #181818)"]]],"eye-closed":[1024,[[59703,"white"]]],"eye-filled":[1024,[[59704,"#666666"]]],"eye-open":[1024,[[59705,"currentColor"]]],"eye-slash":[1024,[[59706,"var(--fill-0, #181818)"]]],"file-cloud":[1024,[[59707,"#181818"]]],"file-dashed":[1024,[[59708,"var(--fill-0, #181818)"]]],"file-html":[1024,[[59709,"#181818"]]],"file-pdf":[1024,[[59710,"#181818"]]],"file-text":[1024,[[59711,"var(--fill-0, #181818)"]]],"file":[1024,[[59712,"white"]]],"fingerprint-simple":[1024,[[59713,"#181818"]]],"folder":[1024,[[59714,"#181818"]]],"funnel":[1024,[[59715,"#666666"]]],"gift":[1024,[[59716,"#181818"]]],"git-pull-request":[1024,[[59717,"var(--fill-0, #181818)"]]],"github-logo":[1024,[[59718,"var(--fill-0, #181818)"]]],"hard-drives":[1024,[[59719,"var(--fill-0, #181818)"]]],"home":[1024,[[59720,"#181818"]]],"house":[1024,[[59721,"#6F6F6F"]]],"identifier":[1024,[[59722,"currentColor"]]],"image-outline":[1024,[[59723,"white"]]],"key":[1024,[[59724,"var(--fill-0, #181818)"]]],"link-alt":[1024,[[59725,"#666666"]]],"link":[560,[[59726,"#666666"]]],"list":[2190,[[59727,"#181818"]]],"lock-simple":[1024,[[59728,"white"]]],"lock":[1024,[[59729,"#181818"]]],"markdown":[1024,[[59730,"#181818"]]],"mastodon-logo":[1024,[[59731,"var(--fill-0, #181818)"]]],"menu":[1024,[[59732,"#181818"]]],"message-badge-outline":[1024,[[59733,"currentColor"]]],"minus":[1024,[[59734,"#181818"]]],"mode-edit":[1024,[[59735,"#181818"]]],"moon":[1024,[[59736,"var(--fill-0, #181818)"]]],"network":[1024,[[59737,"var(--fill-0, #181818)"]]],"note":[1024,[[59738,"#181818"]]],"notification":[1024,[[59739,"var(--fill-0, #181818)"]]],"numpad":[1024,[[59740,"#181818"]]],"nut":[1024,[[59741,"#181818"]]],"paint-brush-household":[1024,[[59742,"#181818"]]],"paint-roller":[1024,[[59743,"var(--fill-0, #181818)"]]],"palette":[1024,[[59744,"#666666"]]],"paperclip":[1024,[[59745,"#666666"]]],"pause":[1024,[[59746,"var(--fill-0, #181818)"]]],"pencil-ruler":[1024,[[59747,"#181818"]]],"pencil-simple-line":[1024,[[59748,"var(--fill-0, #181818)"]]],"pencil-simple-slash":[1024,[[59749,"#858585"]]],"pencil-simple":[1024,[[59750,"#181818"]]],"pin":[939,[[59751,"#666666"]]],"plus":[1024,[[59752,"#181818"]]],"radio-button":[1024,[[59753,"#008836"]]],"recovery-key-cloud-arrow-down":[1024,[[59754,"var(--fill-0, #181818)"]]],"recovery-key-copy":[1024,[[59755,"var(--stroke-0, #008836)"]]],"recovery-key-file":[1024,[[59756,"var(--fill-0, #181818)"]]],"recovery-key-key":[1024,[[59757,"var(--fill-0, #181818)"]]],"recovery-key-qr-code":[1024,[[59758,"var(--fill-0, #181818)"]]],"recovery-key-shield-check":[1024,[[59759,"var(--fill-0, #008836)"]]],"search":[1024,[[59760,"#181818"]]],"share":[1024,[[59761,"#666666"]]],"shield-check":[1024,[[59762,"#181818"]]],"shield-plus":[1024,[[59763,"#181818"]]],"shield":[1024,[[59764,"var(--fill-0, #181818)"]]],"shopping-mode":[1024,[[59765,"#666666"]]],"sliders-horizontal":[1024,[[59766,"var(--fill-0, #181818)"]]],"sliders":[1024,[[59767,"#181818"]]],"sort-ascending":[1024,[[59768,"#666666"]]],"sort-descending":[1024,[[59769,"currentColor"]]],"speaker-high":[1024,[[59770,"#181818"]]],"spellcheck":[1067,[[59771,"currentColor"]]],"square-out":[1024,[[59772,"#181818"]]],"squares-four":[1024,[[59773,"var(--fill-0, #181818)"]]],"star-filled":[1024,[[59774,"#E5C131"]]],"star":[1024,[[59775,"#666666"]]],"sun":[1024,[[59776,"#666666"]]],"swatches":[1024,[[59777,"var(--fill-0, #181818)"]]],"sync-disabled":[911,[[59778,"#858585"]]],"table":[1024,[[59779,"#181818"]]],"telegram-logo":[1024,[[59780,"var(--fill-0, #181818)"]]],"text-aa":[1024,[[59781,"#181818"]]],"toggle-off":[1725,[[59782,"#DADADA"]]],"toggle-on":[1725,[[59783,"#008836"]]],"trash-alt":[1024,[[59784,"#FB2C36"]]],"trash":[1024,[[59785,"#666666"]]],"tray-arrow-down":[1024,[[59786,"#181818"]]],"user-circle-minus":[1024,[[59787,"var(--fill-0, #FF242E)"]]],"user-sheet-docs":[1024,[[59788,"var(--fill-0, #181818)"]]],"user-sheet-logout":[1024,[[59789,"var(--fill-0, #FB2C36)"]]],"user-sheet-settings":[1024,[[59790,"var(--fill-0, #181818)"]]],"user-sheet-support":[1024,[[59791,"var(--fill-0, #181818)"]]],"user-sheet-sync":[1024,[[59792,"var(--fill-0, #181818)"]]],"user":[1024,[[59793,"var(--fill-0, #181818)"]]],"users-three":[1024,[[59794,"var(--fill-0, #181818)"]]],"view-list":[1024,[[59795,"#181818"]]],"warning-circle":[1024,[[59796,"#BB3431"]]],"warning":[1024,[[59797,"#FF242E"]]],"wifi-slash":[1024,[[59798,"var(--fill-0, #181818)"]]],"x-logo":[1024,[[59799,"var(--fill-0, #181818)"]]]}}
\ No newline at end of file
diff --git a/apps/mobile/fonts/notesnook-icons.ttf b/apps/mobile/fonts/notesnook-icons.ttf
index e19b526269dfeafb93db786ae5a6090973306d9d..d11d881ed41d25d0e3a596964df134081a627b83 100644
GIT binary patch
delta 833
zcmYjPZAep57=F*abIrRux2twH=ge(><@}n<&H05;LLq{orf5n{HxqMeexaDVilX6H
zZleSVe+j9~ezYi&Fn{zTBti^A{M8Q;FZ5%CfrQ&S8-*Qs-t(U4dCtSj;k;NNJ~{~w
z5CBjx3M8m2t8)ycu}w0}crfm_*e%_*&enMVL}RQ!=oo4(VGer$h)sZDb(_s%&EqP3
z03!$3Z)(E?Jr^klaD+0F+w6UV$}`-7BM;xvcXYK_8p?}q0gPI4UaH+PnAMF|Q7ypO
zEOx0oEq2>r;j<6;j0YgvySsY(xY1f1HlY9zc$}UaXwm7rSy#_D@EyFJf5i9j!~A1@
zhM(o<`KSB>zZeVx@PPHZSntGoFV;t}J{Q)V!Jr(m$8uo5vqAQp4X`t;ANS|%OLoXR
zkKVBy8Jd{nNDi_f7mRpPjg(>%BQ>Rwj4?+<Y8XuzI{!ulP16)55(-I#NTE<fQJ5ea
zFIYk#yd<K;nDB29)pr7QXpQ9l^ZHjVynhoE;Rpdui>XMFFoN{g6V(9%t%0{pA+V{&
zMYgZ^q{Y8LEC|gB$L-_4|Ltz;NIo$MZpKmR{xQ<;ZE~z5E?T@I{z7}`eThtBmaIww
zQO!|%Qnl12{UnQ$70MipiRoc>n6v1e=#v;(Oj*oQtSq+iauplRPRmvDeMO&QH;#@w
zQnJb#<!StAyiZl5I!L&Za64i1N^zo3y`?_V=rjYGQ*F0)TDzk?Od^tMlXjC;$$KdV
zF6C`1q%NlsX=Q2KX@T^L^e5>*bz0qk?kuA{V>wfw>B{_^)tB`xo6WAu-qBa+U+3oK
zt{cG6Y1q0}miNl2Fb){s7|%@|CYNc`<jY?+%goE>lY;F+Md3-2viNH8Y{~VK1^fu1
zzwAQgfPX7q1O^3OH1?bzUEuOAjcXBsT;BH+@dPSxA51=sYl-N$6_{+{+8V0)`f$y4
dH%=K*v)eUQFKG@jW^1_G+-FnC!cbd~{|5}`^>F|I

delta 670
zcmX>yk!j8Zrg{cO1_lN$h6V;^1_l3MeIt93Sbm_$8X!(c&P^;xO-yTIU|{3{;#KK6
zm1#dDZMHEmFzsMqsOrc_O-wPV?ElBWQ0o9xZ<YZR;OXTQ1M(|?e3gvck_xdOKo&#o
z9H1VZoc!cOl{?N23=H)rfaa;>CRXScFfL~dV_;}_15~AumzbMcVKsF>14ARwLZ+;O
z{NfVvP|2MP49!3TS(Z#(<IFg1;s^Keh?kKsvtQ=CEO=S?vg&2^%dVH*FMD71z3hKE
z?f-uUhL;RL`6!@#E>OM*C|?7V?*YqC`2Sy=QS6yGgV+PH|6+f{{)zR7{ROiBh%FbZ
z+T6#uU2OAR3FcIpfZ&eecz&C&4BRXr4=_ASU)l(xC;zE6XKH1b+*ltlxwWoj^WVB<
zjP()RO*{!aZ9GSK-tfloZsHT;YvH@X@5W!le~AB`fRVr}K{de=!8Jl9LUV+U2>lTD
z6Fwp$Aj&3sOw3N~f_R&RhD4pj0m&JXr=&QfR!EyjFOlJp>5;i4%Oaa2`$2w*LY~45
zg?oxxiYt^<l<bsBl=_smDRU{;DPK@&QF*4CRj;~5El6#f+7I<2^-Y=#nl_rtG_PrC
zX|2(g(+<*pqT{C1psS(VrF%+`O|Qg&!641xg<+iG79%C2Jfj~bNhW7ZwM;WiH<&4y
zxtZmdEin%=KVlJNF~_pV@{H9St8><OY#eO9*}8y}%S1*m24MUE0TU2&0U-m!=B163
zn3yLrOx$eMqQtm4u2q_eF>!KLd$wc>YiX*bSt^)J1CiziVA5#vzjjl`<jE!-k-W(u
O5eu+NOM}U?I#d7;tKv2Q

diff --git a/apps/mobile/ios/nanoicons-fonts/notesnook-icons.ttf b/apps/mobile/ios/nanoicons-fonts/notesnook-icons.ttf
index e19b526269dfeafb93db786ae5a6090973306d9d..d11d881ed41d25d0e3a596964df134081a627b83 100644
GIT binary patch
delta 833
zcmYjPZAep57=F*abIrRux2twH=ge(><@}n<&H05;LLq{orf5n{HxqMeexaDVilX6H
zZleSVe+j9~ezYi&Fn{zTBti^A{M8Q;FZ5%CfrQ&S8-*Qs-t(U4dCtSj;k;NNJ~{~w
z5CBjx3M8m2t8)ycu}w0}crfm_*e%_*&enMVL}RQ!=oo4(VGer$h)sZDb(_s%&EqP3
z03!$3Z)(E?Jr^klaD+0F+w6UV$}`-7BM;xvcXYK_8p?}q0gPI4UaH+PnAMF|Q7ypO
zEOx0oEq2>r;j<6;j0YgvySsY(xY1f1HlY9zc$}UaXwm7rSy#_D@EyFJf5i9j!~A1@
zhM(o<`KSB>zZeVx@PPHZSntGoFV;t}J{Q)V!Jr(m$8uo5vqAQp4X`t;ANS|%OLoXR
zkKVBy8Jd{nNDi_f7mRpPjg(>%BQ>Rwj4?+<Y8XuzI{!ulP16)55(-I#NTE<fQJ5ea
zFIYk#yd<K;nDB29)pr7QXpQ9l^ZHjVynhoE;Rpdui>XMFFoN{g6V(9%t%0{pA+V{&
zMYgZ^q{Y8LEC|gB$L-_4|Ltz;NIo$MZpKmR{xQ<;ZE~z5E?T@I{z7}`eThtBmaIww
zQO!|%Qnl12{UnQ$70MipiRoc>n6v1e=#v;(Oj*oQtSq+iauplRPRmvDeMO&QH;#@w
zQnJb#<!StAyiZl5I!L&Za64i1N^zo3y`?_V=rjYGQ*F0)TDzk?Od^tMlXjC;$$KdV
zF6C`1q%NlsX=Q2KX@T^L^e5>*bz0qk?kuA{V>wfw>B{_^)tB`xo6WAu-qBa+U+3oK
zt{cG6Y1q0}miNl2Fb){s7|%@|CYNc`<jY?+%goE>lY;F+Md3-2viNH8Y{~VK1^fu1
zzwAQgfPX7q1O^3OH1?bzUEuOAjcXBsT;BH+@dPSxA51=sYl-N$6_{+{+8V0)`f$y4
dH%=K*v)eUQFKG@jW^1_G+-FnC!cbd~{|5}`^>F|I

delta 670
zcmX>yk!j8Zrg{cO1_lN$h6V;^1_l3MeIt93Sbm_$8X!(c&P^;xO-yTIU|{3{;#KK6
zm1#dDZMHEmFzsMqsOrc_O-wPV?ElBWQ0o9xZ<YZR;OXTQ1M(|?e3gvck_xdOKo&#o
z9H1VZoc!cOl{?N23=H)rfaa;>CRXScFfL~dV_;}_15~AumzbMcVKsF>14ARwLZ+;O
z{NfVvP|2MP49!3TS(Z#(<IFg1;s^Keh?kKsvtQ=CEO=S?vg&2^%dVH*FMD71z3hKE
z?f-uUhL;RL`6!@#E>OM*C|?7V?*YqC`2Sy=QS6yGgV+PH|6+f{{)zR7{ROiBh%FbZ
z+T6#uU2OAR3FcIpfZ&eecz&C&4BRXr4=_ASU)l(xC;zE6XKH1b+*ltlxwWoj^WVB<
zjP()RO*{!aZ9GSK-tfloZsHT;YvH@X@5W!le~AB`fRVr}K{de=!8Jl9LUV+U2>lTD
z6Fwp$Aj&3sOw3N~f_R&RhD4pj0m&JXr=&QfR!EyjFOlJp>5;i4%Oaa2`$2w*LY~45
zg?oxxiYt^<l<bsBl=_smDRU{;DPK@&QF*4CRj;~5El6#f+7I<2^-Y=#nl_rtG_PrC
zX|2(g(+<*pqT{C1psS(VrF%+`O|Qg&!641xg<+iG79%C2Jfj~bNhW7ZwM;WiH<&4y
zxtZmdEin%=KVlJNF~_pV@{H9St8><OY#eO9*}8y}%S1*m24MUE0TU2&0U-m!=B163
zn3yLrOx$eMqQtm4u2q_eF>!KLd$wc>YiX*bSt^)J1CiziVA5#vzjjl`<jE!-k-W(u
O5eu+NOM}U?I#d7;tKv2Q

diff --git a/packages/icons/svgs/checkbox-intermediate.svg b/packages/icons/svgs/checkbox-intermediate.svg
new file mode 100644
index 000000000..7eb99c1a2
--- /dev/null
+++ b/packages/icons/svgs/checkbox-intermediate.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Design Icons by Pictogrammers - https://github.com/Templarian/MaterialDesign/blob/master/LICENSE --><path fill="currentColor" d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2m0 16H5V5h14zm-2-2H7V7h10z"/></svg>
\ No newline at end of file
diff --git a/packages/intl/locale/en.po b/packages/intl/locale/en.po
index 0abb6faed..471ca7ad0 100644
--- a/packages/intl/locale/en.po
+++ b/packages/intl/locale/en.po
@@ -6209,6 +6209,10 @@ msgstr "Save account recovery key"
 msgid "Save and continue"
 msgstr "Save and continue"
 
+#: src/strings.ts:2942
+msgid "Save changes"
+msgstr "Save changes"
+
 #: src/strings.ts:1066
 msgid "Save data recovery key"
 msgstr "Save data recovery key"
diff --git a/packages/intl/locale/pseudo-LOCALE.po b/packages/intl/locale/pseudo-LOCALE.po
index 12aab00bf..175f2e5ef 100644
--- a/packages/intl/locale/pseudo-LOCALE.po
+++ b/packages/intl/locale/pseudo-LOCALE.po
@@ -6183,6 +6183,10 @@ msgstr ""
 msgid "Save and continue"
 msgstr ""
 
+#: src/strings.ts:2942
+msgid "Save changes"
+msgstr ""
+
 #: src/strings.ts:1066
 msgid "Save data recovery key"
 msgstr ""
diff --git a/packages/intl/src/strings.ts b/packages/intl/src/strings.ts
index 702fba9b0..5d9a4874e 100644
--- a/packages/intl/src/strings.ts
+++ b/packages/intl/src/strings.ts
@@ -2938,5 +2938,6 @@ Continue without attachments?`,
     t`Something went wrong while preparing your debug logs. This can happen if no storage location was selected.`,
   shareZip: () => t`Share ZIP`,
   tryDownloadLogsAgain: () => t`Try again`,
-  createSubnotebook: () => t`Create sub-notebook`
+  createSubnotebook: () => t`Create sub-notebook`,
+  saveChanges: () => t`Save changes`
 };