feat: improve settings ui in mobile

penx-labs · Apr 25, 2024 · e5d7d7b · e5d7d7b
1 parent a272a33
commit e5d7d7b
Show file tree

Hide file tree

Showing 18 changed files with 201 additions and 335 deletions.
diff --git a/extensions/database/src/ui/TagDrawer.tsx b/extensions/database/src/ui/TagDrawer.tsx
@@ -36,6 +36,7 @@ export const TagDrawer = () => {
           right-0
           zIndex-101
           autoFocus
+          outlineNone
           // overflowHidden
         >
           <TagForm databaseId={databaseId} path={path} />

diff --git a/packages/app/src/Workbench/BottomBar.tsx b/packages/app/src/Workbench/BottomBar.tsx
@@ -10,7 +10,6 @@ import { useNodeContext } from '@penx/node-hooks'
 import { store } from '@penx/store'
 import { DailyShortcut, MotionButton } from '@penx/widget'
 import { setStatusBarColor } from '../common/setStatusBarColor'
-import { BottomBarDrawer } from './BottomBarDrawer/BottomBarDrawer'
 import { QuickAdd } from './QuickAdd/QuickAdd'
 
 interface ActionButtonProps extends ButtonProps, FowerHTMLProps<'button'> {
@@ -46,7 +45,6 @@ export function BottomBar() {
 
   return (
     <>
-      <BottomBarDrawer />
       <QuickAdd />
 
       <Box fixed left3 bottom3 toCenterY gap2 zIndex-100 bgWhite>

diff --git a/packages/app/src/Workbench/BottomBarDrawer/BottomBarDrawer.tsx b/packages/app/src/Workbench/BottomBarDrawer/BottomBarDrawer.tsx
diff --git a/packages/app/src/Workbench/BottomBarDrawer/QuickAddEditor.tsx b/packages/app/src/Workbench/BottomBarDrawer/QuickAddEditor.tsx
diff --git a/packages/app/src/Workbench/BottomBarDrawer/QuickAddTag.tsx b/packages/app/src/Workbench/BottomBarDrawer/QuickAddTag.tsx
diff --git a/packages/app/src/Workbench/BulletDrawer/BulletDrawer.tsx b/packages/app/src/Workbench/BulletDrawer/BulletDrawer.tsx
@@ -35,6 +35,7 @@ export const BulletDrawer = () => {
           left-0
           right-0
           zIndex-101
+          outlineNone
           autoFocus
         >
           <BulletMenuBox />

diff --git a/packages/app/src/Workbench/NodeNav/MobileNav.tsx b/packages/app/src/Workbench/NodeNav/MobileNav.tsx
@@ -11,6 +11,14 @@ function Title() {
   const { activeNodes } = useActiveNodes()
   const router = useRouterStore()
 
+  if (router.isSettings()) {
+    return (
+      <Box fontSemibold textLG>
+        Settings
+      </Box>
+    )
+  }
+
   if (router.isTodos()) {
     return (
       <Box fontSemibold textLG>

diff --git a/packages/app/src/Workbench/PageSettings/PageSettings.tsx b/packages/app/src/Workbench/PageSettings/PageSettings.tsx
@@ -0,0 +1,19 @@
+import { Box } from '@fower/react'
+import { WORKBENCH_NAV_HEIGHT } from '@penx/constants'
+import { SettingsSidebar } from '../SettingsModal/SettingsSidebar'
+import { SettingsDrawer } from './SettingsDrawer'
+
+export const PageSettings = () => {
+  return (
+    <Box
+      bgNeutral100
+      minH-100vh
+      bgAmber100
+      column
+      minH={`calc(100vh - ${WORKBENCH_NAV_HEIGHT}px)`}
+    >
+      <SettingsDrawer />
+      <SettingsSidebar />
+    </Box>
+  )
+}