From 88d080a660c3e0b39dbdbba7abc2e3e6ee584335 Mon Sep 17 00:00:00 2001
From: kashaf-ansari-dev <kashafansari3108@gmail.com>
Date: Mon, 15 Jun 2026 11:11:40 +0500
Subject: [PATCH] mobile: ui fixes side menu items and notebook items

Signed-off-by: kashaf-ansari-dev <kashafansari3108@gmail.com>
---
 apps/mobile/app/common/design/theme.ts        |  2 +-
 .../components/side-menu/color-section.tsx    |  5 +--
 .../mobile/app/components/side-menu/index.tsx |  8 ++---
 .../components/side-menu/notebook-item.tsx    |  4 +--
 .../components/side-menu/pinned-section.tsx   |  8 ++---
 .../components/side-menu/side-menu-header.tsx | 17 +++++-----
 .../components/side-menu/side-menu-home.tsx   | 33 +++++++++++++++----
 .../side-menu/side-menu-list-empty.tsx        |  4 +--
 .../side-menu/side-menu-notebooks.tsx         |  2 +-
 .../components/side-menu/tab-bar-button.tsx   |  5 ++-
 .../app/components/ui/input/form-input.tsx    | 30 ++++++++---------
 11 files changed, 65 insertions(+), 53 deletions(-)

diff --git a/apps/mobile/app/common/design/theme.ts b/apps/mobile/app/common/design/theme.ts
index 233360420..ed66135a7 100644
--- a/apps/mobile/app/common/design/theme.ts
+++ b/apps/mobile/app/common/design/theme.ts
@@ -97,7 +97,7 @@ export const THEME_LIGHT: any = {
       selected: {
         accent: "#008836",
         accentForeground: "#ffffff",
-        paragraph: "#212121",
+        paragraph: "#181818",
         background: "#00883610",
         border: "#008836",
         heading: "#212121",
diff --git a/apps/mobile/app/components/side-menu/color-section.tsx b/apps/mobile/app/components/side-menu/color-section.tsx
index 0f46caf6e..78128e819 100644
--- a/apps/mobile/app/components/side-menu/color-section.tsx
+++ b/apps/mobile/app/components/side-menu/color-section.tsx
@@ -31,6 +31,7 @@ import { Properties } from "../properties";
 import { useSideBarDraggingStore } from "./dragging-store";
 import { MenuItem } from "./menu-item";
 import { Default_Drag_Action } from "../../hooks/use-actions";
+import { Spacing } from "../../common/design/spacing";
 
 export const ColorSection = React.memo(
   function ColorSection() {
@@ -75,8 +76,8 @@ export const ColorSection = React.memo(
         >
           <View
             style={{
-              width: size - 5,
-              height: size - 5,
+              width: 10,
+              height: 10,
               backgroundColor: (item.data as Color).colorCode,
               borderRadius: 100
             }}
diff --git a/apps/mobile/app/components/side-menu/index.tsx b/apps/mobile/app/components/side-menu/index.tsx
index 0d3237923..fda0a699f 100644
--- a/apps/mobile/app/components/side-menu/index.tsx
+++ b/apps/mobile/app/components/side-menu/index.tsx
@@ -181,9 +181,9 @@ export const SideMenu = React.memo(
         style={{
           flex: 1,
           backgroundColor: colors.primary.background,
-          paddingTop: insets.top,
-          paddingBottom: insets.bottom,
-          paddingLeft: insets.left
+          paddingTop: Math.max(insets.top, Spacing.LEVEL_4),
+          paddingBottom: Math.max(insets.bottom, Spacing.LEVEL_4) + Spacing.LEVEL_1,
+          paddingLeft: insets.left,
         }}
       >
         <SimpleTabView
@@ -239,7 +239,7 @@ const TabBar = (props: SimpleTabBarProps) => {
           justifyContent: "space-between",
           backgroundColor: colors.primary.background,
           borderTopWidth: 1,
-          borderTopColor: colors.primary.border,
+          borderTopColor: colors.primary.separator,
           paddingTop: Spacing.LEVEL_2
         }}
       >
diff --git a/apps/mobile/app/components/side-menu/notebook-item.tsx b/apps/mobile/app/components/side-menu/notebook-item.tsx
index 346c49d4f..9abaa9654 100644
--- a/apps/mobile/app/components/side-menu/notebook-item.tsx
+++ b/apps/mobile/app/components/side-menu/notebook-item.tsx
@@ -172,8 +172,6 @@ export const NotebookItem = ({
           paddingHorizontal: Spacing.LEVEL_1,
           marginBottom:
             expanded && item.hasChildren ? Spacing.LEVEL_0 : undefined
-          // borderLeftWidth: item.depth > 0 ? 1 : undefined,
-          // borderLeftColor: colors.primary.border
         }}
       >
         <View
@@ -203,7 +201,7 @@ export const NotebookItem = ({
 
           <Paragraph
             color={
-              isFocused ? colors.selected.paragraph : colors.primary.paragraph
+              isFocused ? colors.selected.paragraph : colors.secondary.heading
             }
             size={AppFontSize.sm}
             style={{ flexShrink: 1 }}
diff --git a/apps/mobile/app/components/side-menu/pinned-section.tsx b/apps/mobile/app/components/side-menu/pinned-section.tsx
index ae976cff9..a4d92d8f6 100644
--- a/apps/mobile/app/components/side-menu/pinned-section.tsx
+++ b/apps/mobile/app/components/side-menu/pinned-section.tsx
@@ -86,18 +86,14 @@ export const PinnedSection = React.memo(
     return (
       <View
         style={{
-          flexGrow: 1,
-          borderTopWidth: 1,
-          borderTopColor: colors.primary.separator,
-          marginTop: DefaultAppStyles.GAP_SMALL,
-          paddingTop: DefaultAppStyles.GAP_SMALL
+          flexGrow: 1
         }}
       >
         <ReorderableList
           onListOrderChanged={(data) => {
             db.settings.setSideBarOrder("shortcuts", data);
           }}
-          onHiddenItemsChanged={() => {}}
+          onHiddenItemsChanged={() => { }}
           canHideItems={false}
           itemOrder={order}
           hiddenItems={[]}
diff --git a/apps/mobile/app/components/side-menu/side-menu-header.tsx b/apps/mobile/app/components/side-menu/side-menu-header.tsx
index 8ef3f31e1..5f1c57a8f 100644
--- a/apps/mobile/app/components/side-menu/side-menu-header.tsx
+++ b/apps/mobile/app/components/side-menu/side-menu-header.tsx
@@ -44,8 +44,10 @@ const SettingsIcon = () => {
       }}
       testID="sidemenu-settings-icon"
       style={{
-        width: 40,
-        height: 40
+        width: 32,
+        height: 32,
+        borderRadius: 100,
+        overflow: "hidden"
       }}
     >
       {userProfile?.profilePicture ? (
@@ -54,16 +56,15 @@ const SettingsIcon = () => {
             uri: userProfile?.profilePicture
           }}
           style={{
-            width: 25,
-            height: 25,
-            borderRadius: 100
+            width: "100%",
+            height: "100%"
           }}
         />
       ) : (
         <AppIcon
           name="cog-outline"
           color={colors.primary.icon}
-          size={AppFontSize.lg}
+          size={AppFontSize.xl}
         />
       )}
     </Pressable>
@@ -78,7 +79,7 @@ export const SideMenuHeader = (props: { rightButtons?: IconButtonProps[] }) => {
         flexDirection: "row",
         justifyContent: "space-between",
         alignItems: "center",
-        paddingHorizontal: DefaultAppStyles.GAP
+        paddingHorizontal: Spacing.LEVEL_3,
       }}
     >
       <View
@@ -90,10 +91,8 @@ export const SideMenuHeader = (props: { rightButtons?: IconButtonProps[] }) => {
       >
         <View
           style={{
-            backgroundColor: "black",
             width: 26,
             height: 26,
-            borderRadius: Radius.XS,
             overflow: "hidden"
           }}
         >
diff --git a/apps/mobile/app/components/side-menu/side-menu-home.tsx b/apps/mobile/app/components/side-menu/side-menu-home.tsx
index 5825a33f6..59f171c72 100644
--- a/apps/mobile/app/components/side-menu/side-menu-home.tsx
+++ b/apps/mobile/app/components/side-menu/side-menu-home.tsx
@@ -65,6 +65,9 @@ export function SideMenuHome() {
     (state) => state.user?.subscription?.plan
   );
   const user = useUserStore.getState().user;
+  const colorNotes = useMenuStore((state) => state.colorNotes);
+  const menuPins = useMenuStore((state) => state.menuPins);
+
 
   return (
     <View
@@ -100,7 +103,7 @@ export function SideMenuHome() {
                   alwaysBounceVertical={false}
                   data={MenuItemsList}
                   style={{
-                    width: "100%"
+                    width: "100%",
                   }}
                   disableDefaultDrag
                   showsVerticalScrollIndicator={false}
@@ -124,13 +127,29 @@ export function SideMenuHome() {
                     );
                   }}
                 />
+                {colorNotes.length > 0 && (
+                  <View style={{
+                    marginTop: Spacing.LEVEL_2,
+                    borderTopWidth: 1,
+                    borderTopColor: colors.primary.separator,
+                    marginBottom: Spacing.LEVEL_2
+                  }} />
+                )}
                 <ColorSection />
-                <PinnedSection />
+                {menuPins.length > 0 && (
+                  <View style={{
+                    marginTop: Spacing.LEVEL_2,
+                    borderTopWidth: 1,
+                    borderTopColor: colors.primary.separator,
+                    marginBottom: Spacing.LEVEL_2
+                  }} />
+                )}
+                {menuPins.length > 0 && <PinnedSection />}
               </>
             )}
             style={{
-              paddingHorizontal: DefaultAppStyles.GAP,
-              marginTop: Spacing.LEVEL_3
+              paddingHorizontal: Spacing.LEVEL_3,
+              marginTop: Spacing.LEVEL_4
             }}
             nestedScrollEnabled={false}
           />
@@ -139,8 +158,8 @@ export function SideMenuHome() {
 
       <View
         style={{
-          paddingHorizontal: DefaultAppStyles.GAP,
-          paddingVertical: DefaultAppStyles.GAP_VERTICAL
+          paddingHorizontal: Spacing.LEVEL_3,
+          paddingVertical: Spacing.LEVEL_4
         }}
       >
         {dayjs().month() !== 11 ? (
@@ -148,7 +167,7 @@ export function SideMenuHome() {
             {(subscriptionType === SubscriptionPlan.FREE ||
               !subscriptionType ||
               !user) &&
-            !SettingsService.getProperty("serverUrls") ? (
+              !SettingsService.getProperty("serverUrls") ? (
               <Button
                 title={pro.title}
                 style={{
diff --git a/apps/mobile/app/components/side-menu/side-menu-list-empty.tsx b/apps/mobile/app/components/side-menu/side-menu-list-empty.tsx
index f661cefad..c25f3b557 100644
--- a/apps/mobile/app/components/side-menu/side-menu-list-empty.tsx
+++ b/apps/mobile/app/components/side-menu/side-menu-list-empty.tsx
@@ -108,8 +108,8 @@ export const SideMenuListEmpty = (props: SideMenuListEmptyProps) => {
               fontSize={AppFontSize.sm}
               style={{
                 marginTop: Spacing.LEVEL_2,
-                paddingVertical: Spacing.LEVEL_2,
-                paddingHorizontal: Spacing.LEVEL_2
+                paddingVertical: Spacing.LEVEL_3,
+                paddingHorizontal: Spacing.LEVEL_3
               }}
               type="accent"
             />
diff --git a/apps/mobile/app/components/side-menu/side-menu-notebooks.tsx b/apps/mobile/app/components/side-menu/side-menu-notebooks.tsx
index 9ab3a6f37..6b1f65f44 100644
--- a/apps/mobile/app/components/side-menu/side-menu-notebooks.tsx
+++ b/apps/mobile/app/components/side-menu/side-menu-notebooks.tsx
@@ -102,7 +102,7 @@ export const SideMenuNotebooks = () => {
         const allSelected = allNotebooks.every((notebook) => {
           return (
             useSideMenuNotebookSelectionStore.getState().selection[
-              notebook.id
+            notebook.id
             ] === "selected"
           );
         });
diff --git a/apps/mobile/app/components/side-menu/tab-bar-button.tsx b/apps/mobile/app/components/side-menu/tab-bar-button.tsx
index 5d4c89a92..f1139459e 100644
--- a/apps/mobile/app/components/side-menu/tab-bar-button.tsx
+++ b/apps/mobile/app/components/side-menu/tab-bar-button.tsx
@@ -74,8 +74,7 @@ export const TabBarButton = ({
       testID={testID}
       onPress={handlePress}
       style={{
-        borderRadius: 10,
-        paddingVertical: 2,
+        borderRadius: 0,
         width: undefined,
         gap: label ? Spacing.LEVEL_1 : 0,
         backgroundColor: "transparent",
@@ -87,7 +86,7 @@ export const TabBarButton = ({
         style={[
           {
             backgroundColor: isActive ? colors.primary.shade : undefined,
-            borderRadius: Radius.XS,
+            borderRadius: Radius.XXS,
             padding: Spacing.LEVEL_1
           },
           animatedIconStyle
diff --git a/apps/mobile/app/components/ui/input/form-input.tsx b/apps/mobile/app/components/ui/input/form-input.tsx
index e9e13e665..2c7bcebb9 100644
--- a/apps/mobile/app/components/ui/input/form-input.tsx
+++ b/apps/mobile/app/components/ui/input/form-input.tsx
@@ -30,11 +30,11 @@ import {
 } from "react-native";
 import isEmail from "validator/lib/isEmail";
 import isURL from "validator/lib/isURL";
-import { Spacing } from "../../../common/design/spacing";
-import { AppFontSize, defaultBorderRadius } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import AppIcon from "../AppIcon";
 import { IconButton } from "../icon-button";
 import Paragraph from "../typography/paragraph";
+import { Radius, Spacing } from "../../../common/design/spacing";
 
 export type FormValues = Record<string, string>;
 export type FormErrors = Partial<Record<string, string>>;
@@ -185,13 +185,13 @@ export function hasFormErrors(errors: FormErrors) {
 export const validators = {
   required:
     (message = "This field is required") =>
-    (value: string) =>
-      value?.trim() ? undefined : message,
+      (value: string) =>
+        value?.trim() ? undefined : message,
 
   email:
     (message = "Please enter a valid email") =>
-    (value: string) =>
-      !value?.trim() || isEmail(value.trim()) ? undefined : message,
+      (value: string) =>
+        !value?.trim() || isEmail(value.trim()) ? undefined : message,
 
   minLength: (length: number, message?: string) => (value: string) =>
     !value || value.length >= length
@@ -200,15 +200,15 @@ export const validators = {
 
   url:
     (message = "Please enter a valid URL") =>
-    (value: string) =>
-      !value?.trim() || isURL(value.trim(), { allow_underscores: true })
-        ? undefined
-        : message,
+      (value: string) =>
+        !value?.trim() || isURL(value.trim(), { allow_underscores: true })
+          ? undefined
+          : message,
 
   matchField:
     (fieldName: string, message = "Values do not match") =>
-    (value: string, values: FormValues) =>
-      value === values[fieldName] ? undefined : message
+      (value: string, values: FormValues) =>
+        value === values[fieldName] ? undefined : message
 };
 
 interface FormInputProps extends TextInputProps {
@@ -253,7 +253,7 @@ export function FormInput({
   button,
   buttonLeft,
   buttons,
-  height = 45,
+  height,
   fontSize = AppFontSize.sm,
   inputStyle = {},
   containerStyle = {},
@@ -296,7 +296,7 @@ export function FormInput({
 
   const style: ViewStyle = {
     borderWidth: 1,
-    borderRadius: defaultBorderRadius,
+    borderRadius: Radius.XS,
     backgroundColor: colors.secondary.background,
     borderColor: borderColor,
     flexDirection: "row",
@@ -380,7 +380,7 @@ export function FormInput({
           style={{
             flexDirection: "row",
             justifyContent: "center",
-            height: 35 > height ? height : 35,
+            height: height ? (35 > height ? height : 35) : undefined,
             alignItems: "center"
           }}
         >