about summary refs log tree commit diff
path: root/src/view/shell
diff options
context:
space:
mode:
Diffstat (limited to 'src/view/shell')
-rw-r--r--src/view/shell/Composer.web.tsx24
-rw-r--r--src/view/shell/desktop/LeftNav.tsx147
-rw-r--r--src/view/shell/desktop/RightNav.tsx6
-rw-r--r--src/view/shell/index.web.tsx10
4 files changed, 147 insertions, 40 deletions
diff --git a/src/view/shell/Composer.web.tsx b/src/view/shell/Composer.web.tsx
index c0da27da6..e8f7908c2 100644
--- a/src/view/shell/Composer.web.tsx
+++ b/src/view/shell/Composer.web.tsx
@@ -4,7 +4,7 @@ import {StyleSheet, View} from 'react-native'
 import {ComposePost} from '../com/composer/Composer'
 import {ComposerOpts} from 'state/models/ui/shell'
 import {usePalette} from 'lib/hooks/usePalette'
-import {isMobileWeb} from 'platform/detection'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 
 const BOTTOM_BAR_HEIGHT = 61
 
@@ -26,6 +26,7 @@ export const Composer = observer(
     mention?: ComposerOpts['mention']
   }) => {
     const pal = usePalette('default')
+    const {isMobile} = useWebMediaQueries()
 
     // rendering
     // =
@@ -36,7 +37,13 @@ export const Composer = observer(
 
     return (
       <View style={styles.mask} aria-modal accessibilityViewIsModal>
-        <View style={[styles.container, pal.view, pal.border]}>
+        <View
+          style={[
+            styles.container,
+            isMobile && styles.containerMobile,
+            pal.view,
+            pal.border,
+          ]}>
           <ComposePost
             replyTo={replyTo}
             quote={quote}
@@ -66,11 +73,14 @@ const styles = StyleSheet.create({
     width: '100%',
     paddingVertical: 0,
     paddingHorizontal: 2,
-    borderRadius: isMobileWeb ? 0 : 8,
-    marginBottom: isMobileWeb ? BOTTOM_BAR_HEIGHT : 0,
+    borderRadius: 8,
+    marginBottom: 0,
     borderWidth: 1,
-    maxHeight: isMobileWeb
-      ? `calc(100% - ${BOTTOM_BAR_HEIGHT}px)`
-      : 'calc(100% - (40px * 2))',
+    maxHeight: 'calc(100% - (40px * 2))',
+  },
+  containerMobile: {
+    borderRadius: 0,
+    marginBottom: BOTTOM_BAR_HEIGHT,
+    maxHeight: `calc(100% - ${BOTTOM_BAR_HEIGHT}px)`,
   },
 })
diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx
index 50d482fda..087455d3f 100644
--- a/src/view/shell/desktop/LeftNav.tsx
+++ b/src/view/shell/desktop/LeftNav.tsx
@@ -17,6 +17,7 @@ import {Link} from 'view/com/util/Link'
 import {LoadingPlaceholder} from 'view/com/util/LoadingPlaceholder'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useStores} from 'state/index'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {s, colors} from 'lib/styles'
 import {
   HomeIcon,
@@ -41,18 +42,28 @@ import {makeProfileLink} from 'lib/routes/links'
 
 const ProfileCard = observer(() => {
   const store = useStores()
+  const {isDesktop} = useWebMediaQueries()
+  const size = isDesktop ? 64 : 48
   return store.me.handle ? (
-    <Link href={makeProfileLink(store.me)} style={styles.profileCard} asAnchor>
-      <UserAvatar avatar={store.me.avatar} size={64} />
+    <Link
+      href={makeProfileLink(store.me)}
+      style={[styles.profileCard, !isDesktop && styles.profileCardTablet]}
+      asAnchor>
+      <UserAvatar avatar={store.me.avatar} size={size} />
     </Link>
   ) : (
-    <View style={styles.profileCard}>
-      <LoadingPlaceholder width={64} height={64} style={{borderRadius: 64}} />
+    <View style={[styles.profileCard, !isDesktop && styles.profileCardTablet]}>
+      <LoadingPlaceholder
+        width={size}
+        height={size}
+        style={{borderRadius: size}}
+      />
     </View>
   )
 })
 
 function BackBtn() {
+  const {isTablet} = useWebMediaQueries()
   const pal = usePalette('default')
   const navigation = useNavigation<NavigationProp>()
   const shouldShow = useNavigationState(state => !isStateAtTabRoot(state))
@@ -65,7 +76,7 @@ function BackBtn() {
     }
   }, [navigation])
 
-  if (!shouldShow) {
+  if (!shouldShow || isTablet) {
     return <></>
   }
   return (
@@ -96,6 +107,7 @@ const NavItem = observer(
   ({count, href, icon, iconFilled, label}: NavItemProps) => {
     const pal = usePalette('default')
     const store = useStores()
+    const {isDesktop, isTablet} = useWebMediaQueries()
     const [pathName] = React.useMemo(() => router.matchPath(href), [href])
     const currentRouteInfo = useNavigationState(state => {
       if (!state) {
@@ -137,17 +149,28 @@ const NavItem = observer(
         accessibilityRole="tab"
         accessibilityLabel={label}
         accessibilityHint="">
-        <View style={[styles.navItemIconWrapper]}>
+        <View
+          style={[
+            styles.navItemIconWrapper,
+            isTablet && styles.navItemIconWrapperTablet,
+          ]}>
           {isCurrent ? iconFilled : icon}
           {typeof count === 'string' && count ? (
-            <Text type="button" style={styles.navItemCount}>
+            <Text
+              type="button"
+              style={[
+                styles.navItemCount,
+                isTablet && styles.navItemCountTablet,
+              ]}>
               {count}
             </Text>
           ) : null}
         </View>
-        <Text type="title" style={[isCurrent ? s.bold : s.normal, pal.text]}>
-          {label}
-        </Text>
+        {isDesktop && (
+          <Text type="title" style={[isCurrent ? s.bold : s.normal, pal.text]}>
+            {label}
+          </Text>
+        )}
       </PressableWithHover>
     )
   },
@@ -156,6 +179,7 @@ const NavItem = observer(
 function ComposeBtn() {
   const store = useStores()
   const {getState} = useNavigation()
+  const {isTablet} = useWebMediaQueries()
 
   const getProfileHandle = () => {
     const {routes} = getState()
@@ -172,6 +196,9 @@ function ComposeBtn() {
   const onPressCompose = () =>
     store.shell.openComposer({mention: getProfileHandle()})
 
+  if (isTablet) {
+    return null
+  }
   return (
     <TouchableOpacity
       style={[styles.newPostBtn]}
@@ -196,28 +223,43 @@ function ComposeBtn() {
 export const DesktopLeftNav = observer(function DesktopLeftNav() {
   const store = useStores()
   const pal = usePalette('default')
+  const {isDesktop, isTablet} = useWebMediaQueries()
 
   return (
-    <View style={[styles.leftNav, pal.view]}>
+    <View
+      style={[
+        styles.leftNav,
+        isTablet && styles.leftNavTablet,
+        pal.view,
+        pal.border,
+      ]}>
       {store.session.hasSession && <ProfileCard />}
       <BackBtn />
       <NavItem
         href="/"
-        icon={<HomeIcon size={24} style={pal.text} />}
+        icon={<HomeIcon size={isDesktop ? 24 : 28} style={pal.text} />}
         iconFilled={
-          <HomeIconSolid strokeWidth={4} size={24} style={pal.text} />
+          <HomeIconSolid
+            strokeWidth={4}
+            size={isDesktop ? 24 : 28}
+            style={pal.text}
+          />
         }
         label="Home"
       />
       <NavItem
         href="/search"
         icon={
-          <MagnifyingGlassIcon2 strokeWidth={2} size={24} style={pal.text} />
+          <MagnifyingGlassIcon2
+            strokeWidth={2}
+            size={isDesktop ? 24 : 26}
+            style={pal.text}
+          />
         }
         iconFilled={
           <MagnifyingGlassIcon2Solid
             strokeWidth={2}
-            size={24}
+            size={isDesktop ? 24 : 26}
             style={pal.text}
           />
         }
@@ -229,14 +271,14 @@ export const DesktopLeftNav = observer(function DesktopLeftNav() {
           <SatelliteDishIcon
             strokeWidth={1.75}
             style={pal.text as FontAwesomeIconStyle}
-            size={24}
+            size={isDesktop ? 24 : 28}
           />
         }
         iconFilled={
           <SatelliteDishIconSolid
             strokeWidth={1.75}
             style={pal.text as FontAwesomeIconStyle}
-            size={24}
+            size={isDesktop ? 24 : 28}
           />
         }
         label="My Feeds"
@@ -244,9 +286,19 @@ export const DesktopLeftNav = observer(function DesktopLeftNav() {
       <NavItem
         href="/notifications"
         count={store.me.notifications.unreadCountLabel}
-        icon={<BellIcon strokeWidth={2} size={24} style={pal.text} />}
+        icon={
+          <BellIcon
+            strokeWidth={2}
+            size={isDesktop ? 24 : 26}
+            style={pal.text}
+          />
+        }
         iconFilled={
-          <BellIconSolid strokeWidth={1.5} size={24} style={pal.text} />
+          <BellIconSolid
+            strokeWidth={1.5}
+            size={isDesktop ? 24 : 26}
+            style={pal.text}
+          />
         }
         label="Notifications"
       />
@@ -256,14 +308,14 @@ export const DesktopLeftNav = observer(function DesktopLeftNav() {
           <HandIcon
             strokeWidth={5.5}
             style={pal.text as FontAwesomeIconStyle}
-            size={24}
+            size={isDesktop ? 24 : 27}
           />
         }
         iconFilled={
           <FontAwesomeIcon
             icon="hand"
             style={pal.text as FontAwesomeIconStyle}
-            size={20}
+            size={isDesktop ? 20 : 26}
           />
         }
         label="Moderation"
@@ -271,18 +323,38 @@ export const DesktopLeftNav = observer(function DesktopLeftNav() {
       {store.session.hasSession && (
         <NavItem
           href={makeProfileLink(store.me)}
-          icon={<UserIcon strokeWidth={1.75} size={28} style={pal.text} />}
+          icon={
+            <UserIcon
+              strokeWidth={1.75}
+              size={isDesktop ? 28 : 30}
+              style={pal.text}
+            />
+          }
           iconFilled={
-            <UserIconSolid strokeWidth={1.75} size={28} style={pal.text} />
+            <UserIconSolid
+              strokeWidth={1.75}
+              size={isDesktop ? 28 : 30}
+              style={pal.text}
+            />
           }
           label="Profile"
         />
       )}
       <NavItem
         href="/settings"
-        icon={<CogIcon strokeWidth={1.75} size={28} style={pal.text} />}
+        icon={
+          <CogIcon
+            strokeWidth={1.75}
+            size={isDesktop ? 28 : 32}
+            style={pal.text}
+          />
+        }
         iconFilled={
-          <CogIconSolid strokeWidth={1.5} size={28} style={pal.text} />
+          <CogIconSolid
+            strokeWidth={1.5}
+            size={isDesktop ? 28 : 32}
+            style={pal.text}
+          />
         }
         label="Settings"
       />
@@ -300,12 +372,24 @@ const styles = StyleSheet.create({
     maxHeight: 'calc(100vh - 10px)',
     overflowY: 'auto',
   },
+  leftNavTablet: {
+    top: 0,
+    left: 0,
+    right: 'auto',
+    borderRightWidth: 1,
+    height: '100%',
+    width: 76,
+    alignItems: 'center',
+  },
 
   profileCard: {
     marginVertical: 10,
     width: 90,
     paddingLeft: 12,
   },
+  profileCardTablet: {
+    width: 70,
+  },
 
   backBtn: {
     position: 'absolute',
@@ -330,6 +414,10 @@ const styles = StyleSheet.create({
     height: 28,
     marginTop: 2,
   },
+  navItemIconWrapperTablet: {
+    width: 40,
+    height: 40,
+  },
   navItemCount: {
     position: 'absolute',
     top: 0,
@@ -341,6 +429,10 @@ const styles = StyleSheet.create({
     paddingHorizontal: 4,
     borderRadius: 6,
   },
+  navItemCountTablet: {
+    left: 18,
+    fontSize: 14,
+  },
 
   newPostBtn: {
     flexDirection: 'row',
@@ -354,10 +446,9 @@ const styles = StyleSheet.create({
     marginLeft: 12,
     marginTop: 20,
     marginBottom: 10,
+    gap: 8,
   },
-  newPostBtnIconWrapper: {
-    marginRight: 8,
-  },
+  newPostBtnIconWrapper: {},
   newPostBtnLabel: {
     color: colors.white,
     fontSize: 16,
diff --git a/src/view/shell/desktop/RightNav.tsx b/src/view/shell/desktop/RightNav.tsx
index 6fbd777fb..746bbcf59 100644
--- a/src/view/shell/desktop/RightNav.tsx
+++ b/src/view/shell/desktop/RightNav.tsx
@@ -9,6 +9,7 @@ import {TextLink} from 'view/com/util/Link'
 import {FEEDBACK_FORM_URL, HELP_DESK_URL} from 'lib/constants'
 import {s} from 'lib/styles'
 import {useStores} from 'state/index'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {pluralize} from 'lib/strings/helpers'
 import {formatCount} from 'view/com/util/numeric/format'
 
@@ -17,6 +18,11 @@ export const DesktopRightNav = observer(function DesktopRightNav() {
   const pal = usePalette('default')
   const palError = usePalette('error')
 
+  const {isTablet} = useWebMediaQueries()
+  if (isTablet) {
+    return null
+  }
+
   return (
     <View style={[styles.rightNav, pal.view]}>
       {store.session.hasSession && <DesktopSearch />}
diff --git a/src/view/shell/index.web.tsx b/src/view/shell/index.web.tsx
index e36439c82..6182f1ba4 100644
--- a/src/view/shell/index.web.tsx
+++ b/src/view/shell/index.web.tsx
@@ -19,7 +19,7 @@ import {NavigationProp} from 'lib/routes/types'
 
 const ShellInner = observer(() => {
   const store = useStores()
-  const {isDesktop} = useWebMediaQueries()
+  const {isDesktop, isMobile} = useWebMediaQueries()
   const navigator = useNavigation<NavigationProp>()
 
   useEffect(() => {
@@ -28,11 +28,11 @@ const ShellInner = observer(() => {
     })
   }, [navigator, store.shell])
 
-  const showBottomBar = !isDesktop && !store.onboarding.isActive
+  const showBottomBar = isMobile && !store.onboarding.isActive
   const showSideNavs =
-    isDesktop && store.session.hasSession && !store.onboarding.isActive
+    !isMobile && store.session.hasSession && !store.onboarding.isActive
   return (
-    <>
+    <View style={[s.hContentRegion, {overflow: 'hidden'}]}>
       <View style={s.hContentRegion}>
         <ErrorBoundary>
           <FlatNavigator />
@@ -67,7 +67,7 @@ const ShellInner = observer(() => {
           </View>
         </TouchableOpacity>
       )}
-    </>
+    </View>
   )
 })
generated by cgit-pink 1.4.1 (git 2.36.1) at 2025-10-12 10:06:08 +0000