wip: cleanups (#1005)

* fix: status bar

* update Timeline.tsx

* update AppLoading.tsx, StatusBar.tsx, Timeline.tsx and apps/mobile/src/hooks/index.ts

* update apps/mobile/src/hooks/index.ts

* update TimelineFilters.tsx

* chore: bump deps (#1002)

* build: update package.json

* update 8 files

* update 5 files

* fix: og generation (#1003)

* fix: og generation

* build(deps): update yarn.lock

* update ThumbnailImage.tsx and BytesSection.tsx

* fix: thumbnail (#1004)

* delete 3 files and update 7 files

* update TabList.tsx

* feat: manage

* update ManagersModal.tsx, Managed.tsx, Managers.tsx and Accordion.tsx

* fix: home loader

* update Info.tsx

* update Managers.tsx

* feat: add 404

* update Managers.tsx

* update Streak.tsx

* update Streak.tsx and theme.ts

* update Streak.tsx

* update Streak.tsx

* update Streak.tsx

* update 13 files

* fix: refetch loader

* update Info.tsx

apps/api/pages/api/metatags.ts

@@ -1,5 +1,6 @@
 import { getMetaTags } from '@lenstube/browser'
 import { LENSTUBE_APP_DESCRIPTION, OG_IMAGE } from '@lenstube/constants'
+import { trimLensHandle } from '@lenstube/generic'
 import getProfileMeta from 'lib/getProfileMeta'
 import getPublicationMeta from 'lib/getPublicationMeta'
 import type { NextApiRequest, NextApiResponse } from 'next'
@@ -21,8 +22,8 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
 
   try {
     if (isChannel) {
-      const handle = path.replace('/channel/', '').replace('.lens', '')
-      return await getProfileMeta(res, `${handle}.lens`)
+      const handle = path.replace('/channel/', '')
+      return await getProfileMeta(res, trimLensHandle(handle, true))
     }
 
     if (isVideo || isByte) {

apps/mobile/src/components/common/AppLoading.tsx

@@ -1,12 +1,12 @@
 import { Image as ExpoImage } from 'expo-image'
 import * as SplashScreen from 'expo-splash-screen'
 import type { FC, PropsWithChildren } from 'react'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useWindowDimensions } from 'react-native'
 
 import { useMobilePersistStore } from '~/store/persist'
 
-import { useAuth, useCachedResources, useEffect } from '../../hooks'
+import { useAuth, useCachedResources } from '../../hooks'
 
 SplashScreen.preventAutoHideAsync()
 

apps/mobile/src/components/common/BackButton.tsx → apps/mobile/src/components/common/header/BackButton.tsx

@@ -5,7 +5,7 @@ import React from 'react'
 import haptic from '~/helpers/haptic'
 import { useMobileTheme } from '~/hooks'
 
-import AnimatedPressable from '../ui/AnimatedPressable'
+import AnimatedPressable from '../../ui/AnimatedPressable'
 
 const BackButton = () => {
   const { themeConfig } = useMobileTheme()

apps/mobile/src/components/common/CollapseButton.tsx → apps/mobile/src/components/common/header/CollapseButton.tsx

@@ -5,7 +5,7 @@ import React from 'react'
 import haptic from '~/helpers/haptic'
 import { useMobileTheme } from '~/hooks'
 
-import AnimatedPressable from '../ui/AnimatedPressable'
+import AnimatedPressable from '../../ui/AnimatedPressable'
 
 const CollapseButton = () => {
   const { themeConfig } = useMobileTheme()

apps/mobile/src/components/common/header/Header.tsx

@@ -0,0 +1,108 @@
+import Ionicons from '@expo/vector-icons/Ionicons'
+import { type BottomSheetModal } from '@gorhom/bottom-sheet'
+import type { MobileThemeConfig } from '@lenstube/lens/custom-types'
+import type { HeaderTitleProps } from '@react-navigation/elements'
+import { useNavigation } from '@react-navigation/native'
+import type { FC } from 'react'
+import React, { useRef } from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+
+import haptic from '~/helpers/haptic'
+import normalizeFont from '~/helpers/normalize-font'
+import { useMobileTheme } from '~/hooks'
+import useMobileStore from '~/store'
+
+import AnimatedPressable from '../../ui/AnimatedPressable'
+import SignIn from '../auth/SignIn'
+import UserProfile from '../UserProfile'
+import MenuSheet from './MenuSheet'
+
+const styles = (themeConfig: MobileThemeConfig) =>
+  StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      width: '100%',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      paddingBottom: 10
+    },
+    rightView: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 20
+    },
+    forYouText: {
+      color: themeConfig.textColor,
+      fontFamily: 'font-bold',
+      fontWeight: '500',
+      fontSize: normalizeFont(22)
+    },
+    newButton: {
+      width: 30,
+      height: 30,
+      borderRadius: 100,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: themeConfig.backgroudColor
+    }
+  })
+
+const AuthenticatedUser = () => {
+  const profileMenuRef = useRef<BottomSheetModal>(null)
+  const selectedChannel = useMobileStore((state) => state.selectedChannel)
+
+  if (!selectedChannel) {
+    return null
+  }
+
+  return (
+    <>
+      <UserProfile
+        profile={selectedChannel}
+        showHandle={false}
+        size={30}
+        onPress={() => {
+          haptic()
+          profileMenuRef.current?.present()
+        }}
+      />
+      <MenuSheet profileMenuRef={profileMenuRef} />
+    </>
+  )
+}
+
+const Header: FC<HeaderTitleProps> = () => {
+  const { themeConfig } = useMobileTheme()
+  const style = styles(themeConfig)
+  const { navigate } = useNavigation()
+
+  const selectedChannel = useMobileStore((state) => state.selectedChannel)
+
+  return (
+    <View style={style.container}>
+      <Text style={style.forYouText}>gm</Text>
+
+      <View style={style.rightView}>
+        {selectedChannel && (
+          <AnimatedPressable
+            style={style.newButton}
+            onPress={() => navigate('NewPublication')}
+          >
+            <Ionicons
+              name="add-outline"
+              color={themeConfig.textColor}
+              style={{ paddingLeft: 1 }}
+              size={20}
+            />
+          </AnimatedPressable>
+        )}
+
+        {selectedChannel ? <AuthenticatedUser /> : <SignIn />}
+      </View>
+    </View>
+  )
+}
+
+export default Header