refactor: composer reply workflow (#178)

feat(misskey): bottom sheet to add reaction
feat(misskey): bring back remove/edit reaction
fix: reply ctx and indicator not available
fix: precise button clicks not working
fix: post search in discover tab
refactor: rename bridge package
refactor: notif hooks to single file
style: ui mockup for discover widget
style: settings tab look and feel
style: deprecate old driver picker page
docs: settings page faqs
docs: user guide for discover tab
chore: pager view component to shared lib

README.md

@@ -57,7 +57,7 @@ others—without having to jump between apps and platforms.
 
 > [!TIP]
 > This app might not support certain features from your platform.</br> 
-> They are picked and added on a **fun-first** basis. Feel free to request!
+> They are added on a **fun-first** basis. Feel free to request!
 
 ## 💁 About
 

apps/mobile/app.config.ts

@@ -47,6 +47,10 @@ const expo = ({ config }: ConfigContext): ExpoConfig => ({
 			'expo-build-properties',
 			{
 				android: {
+					compileSdkVersion: 35,
+					targetSdkVersion: 35,
+					buildToolsVersion: '35.0.0',
+					newArchEnabled: true,
 					enableProguardInReleaseBuilds: false,
 					enableShrinkResourcesInReleaseBuilds: false,
 					blockedPermissions: [

apps/mobile/app/(tabs)/apps/known-servers.tsx

@@ -4,7 +4,7 @@ import { ActivityPubServer } from '../../../entities/activitypub-server.entity';
 import { memo, useEffect, useRef, useState } from 'react';
 import { APP_FONT } from '../../../styles/AppTheme';
 import { AnimatedFlashList } from '@shopify/flash-list';
-import { KNOWN_SOFTWARE } from '@dhaaga/shared-abstraction-activitypub';
+import { KNOWN_SOFTWARE } from '@dhaaga/bridge';
 import WithAutoHideTopNavBar from '../../../components/containers/WithAutoHideTopNavBar';
 import useScrollMoreOnPageEnd from '../../../states/useScrollMoreOnPageEnd';
 import { FontAwesome } from '@expo/vector-icons';

apps/mobile/app/(tabs)/apps/likes-classic.tsx

@@ -1,4 +1,4 @@
-import { KNOWN_SOFTWARE } from '@dhaaga/shared-abstraction-activitypub';
+import { KNOWN_SOFTWARE } from '@dhaaga/bridge';
 import FeatureUnsupported from '../../../components/error-screen/FeatureUnsupported';
 import { View } from 'react-native';
 import WithAutoHideTopNavBar from '../../../components/containers/WithAutoHideTopNavBar';

apps/mobile/app/(tabs)/discover/index.tsx

@@ -1,5 +1,206 @@
-import DiscoverLandingStack from '../../../components/screens/search/stack/landing/DiscoverLandingStack';
+import WithDiscoverTabCtx from '../../../components/context-wrappers/WithDiscoverTabCtx';
+import DiscoverTabFactory from '../../../components/screens/search/stack/landing/fragments/DiscoverTabFactory';
+import {
+	useAppAcct,
+	useAppTheme,
+} from '../../../hooks/utility/global-state-extractors';
+import AppNoAccount from '../../../components/error-screen/AppNoAccount';
+import AppTabLandingNavbar, {
+	APP_LANDING_PAGE_TYPE,
+} from '../../../components/shared/topnavbar/AppTabLandingNavbar';
+import {
+	Pressable,
+	View,
+	StyleSheet,
+	TextInput,
+	Dimensions,
+} from 'react-native';
+import { router } from 'expo-router';
+import { APP_ROUTING_ENUM } from '../../../utils/route-list';
+import Animated, {
+	useAnimatedStyle,
+	useSharedValue,
+	withTiming,
+	interpolate,
+	Extrapolation,
+} from 'react-native-reanimated';
+import { Feather } from '@expo/vector-icons';
+import { Multiselect } from '../../../components/screens/search/stack/landing/fragments/DiscoverSearchHelper';
+import { APP_FONTS } from '../../../styles/AppFonts';
+import { useState } from 'react';
+
+function Header() {
+	return (
+		<AppTabLandingNavbar
+			type={APP_LANDING_PAGE_TYPE.DISCOVER}
+			menuItems={[
+				{
+					iconId: 'user-guide',
+					onPress: () => {
+						router.navigate(APP_ROUTING_ENUM.GUIDE_DISCOVER_TAB);
+					},
+				},
+			]}
+		/>
+	);
+}
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+const SIZE = 600;
+const BUTTON_SIZE = 50;
+const ANGLE_STEP = 40;
+
+const FloatingButtonCircular = () => {
+	const isRotated = useSharedValue(0);
+	const MAX_WIDTH = Dimensions.get('window').width;
+	const CONTAINER_PADDING = 24;
+	const WIDGET_MAX_WIDTH = MAX_WIDTH - CONTAINER_PADDING * 2;
+
+	const [IsWidgetExpanded, setIsWidgetExpanded] = useState(false);
+	const rotation = useSharedValue(0);
+	const containerWidth = useSharedValue(0);
+	const containerHeight = useSharedValue(64);
+	const containerBorderRadius = useSharedValue(16);
+
+	const toggleVisibility = () => {};
+
+	const toggleMenu = () => {
+		setIsWidgetExpanded(!IsWidgetExpanded);
+		if (isRotated.value === 0) {
+			rotation.value = withTiming(45, { duration: 200 });
+			isRotated.value = withTiming(1, { duration: 300 });
+			containerWidth.value = withTiming(WIDGET_MAX_WIDTH, { duration: 200 });
+		} else {
+			rotation.value = withTiming(0, { duration: 200 });
+			containerWidth.value = withTiming(64, { duration: 200 });
+			isRotated.value = withTiming(0, { duration: 300 });
+		}
+	};
+
+	const containerStyle = useAnimatedStyle(() => {
+		return {
+			width: interpolate(
+				containerWidth.value,
+				[64, WIDGET_MAX_WIDTH],
+				[BUTTON_SIZE, WIDGET_MAX_WIDTH],
+				Extrapolation.CLAMP,
+			),
+		};
+	});
+
+	const { theme } = useAppTheme();
+	return (
+		<View style={styles.root}>
+			{IsWidgetExpanded && (
+				<View
+					style={{
+						marginHorizontal: CONTAINER_PADDING,
+						paddingVertical: 4,
+						paddingTop: 8,
+						// marginTop: 8,
+						marginBottom: 8,
+						borderRadius: 12,
+						backgroundColor: theme.palette.menubar,
+					}}
+				>
+					<Multiselect setSearchCategory={() => {}} />
+				</View>
+			)}
+			<Animated.View
+				style={[
+					styles.button,
+					containerStyle,
+					{
+						flexDirection: 'row',
+						paddingLeft: IsWidgetExpanded ? 12 : 0,
+						backgroundColor: theme.primary.a0,
+						// equivalent to padding
+						right: CONTAINER_PADDING,
+					},
+				]}
+			>
+				<AnimatedPressable style={{ padding: 8 }} onPress={toggleMenu}>
+					<Feather name="search" color={'black'} size={25} />
+				</AnimatedPressable>
+				{IsWidgetExpanded && (
+					<TextInput
+						multiline={false}
+						placeholderTextColor={'rgba(0, 0, 0, 0.64)'}
+						placeholder={'Discover something new!'}
+						style={[
+							{
+								padding: 8,
+								paddingLeft: 4,
+								flex: 1,
+								fontFamily: APP_FONTS.INTER_500_MEDIUM,
+							},
+						]}
+						numberOfLines={1}
+					/>
+				)}
+			</Animated.View>
+		</View>
+	);
+};
+
+function WithSearchBar({ children }: any) {
+	const { theme } = useAppTheme();
+	const { acct } = useAppAcct();
+
+	if (!acct) return <AppNoAccount tab={APP_LANDING_PAGE_TYPE.DISCOVER} />;
+
+	return (
+		<View style={{ height: '100%', backgroundColor: theme.palette.bg }}>
+			{children}
+			<FloatingButtonCircular />
+			{/*<DiscoverSearchHelper />*/}
+		</View>
+	);
+}
 
 export default function Tab() {
-	return <DiscoverLandingStack />;
+	return (
+		<WithDiscoverTabCtx>
+			<WithSearchBar>
+				<DiscoverTabFactory Header={<Header />} />
+			</WithSearchBar>
+		</WithDiscoverTabCtx>
+	);
 }
+
+const styles = StyleSheet.create({
+	root: {
+		position: 'absolute',
+		bottom: 28,
+		width: '100%',
+	},
+
+	container: {
+		flexDirection: 'row',
+		zIndex: 5,
+		// borderRadius: SIZE / 2,
+		// backgroundColor: 'rgba(1,123,254,0.8)',
+		// justifyContent: 'center',
+		// alignItems: 'center',
+		// position: 'absolute',
+	},
+	button: {
+		width: BUTTON_SIZE,
+		height: BUTTON_SIZE,
+		borderRadius: BUTTON_SIZE / 2,
+		justifyContent: 'center',
+		alignItems: 'center',
+		backgroundColor: 'rgba(1,123,254,1)',
+		// position
+
+		alignSelf: 'flex-end',
+	},
+	actionButton: {
+		width: BUTTON_SIZE,
+		height: BUTTON_SIZE,
+		borderRadius: BUTTON_SIZE / 2,
+		justifyContent: 'center',
+		alignItems: 'center',
+		position: 'absolute',
+	},
+});

apps/mobile/app/(tabs)/discover/user-guide.tsx

@@ -0,0 +1,43 @@
+import UserGuideContainer from '../../../components/containers/UserGuideContainer';
+
+function Page() {
+	const qa: { question: string; answers: string[] }[] = [
+		{
+			question: 'Where am I?',
+			answers: [
+				'This is the discovery portal of Dhaaga.',
+				'It is just a search and history tab for now 😅.',
+				'But, more fun ways to find friends and communities will be added in the future.',
+			],
+		},
+		{
+			question: 'How do I go back to the start?',
+			answers: ['Press the Home button on the right side of the search bar.'],
+		},
+		{
+			question: 'Why are some of my radio buttons disabled?',
+			answers: [
+				'Because your server does not support it.',
+				'For example, Bluesky does not support search for posts, and only Mastodon has links implemented.',
+			],
+		},
+		{
+			question: 'Where are my trending tabs?',
+			answers: [
+				'By principle, Dhaaga does not push news and trending topics on you.',
+				'This tab is dedicated to help you organically discover communities and shared interests.',
+				'In a future update, you will be able to show/hide News and tending topics in your Social Hub.',
+			],
+		},
+	];
+
+	return (
+		<UserGuideContainer
+			questionnaire={qa}
+			label={'User Guide (New Tab)'}
+			language={'en'}
+		/>
+	);
+}
+
+export default Page;

apps/mobile/app/(tabs)/index/timelines.tsx

@@ -1,7 +1,7 @@
-import TimelineWrapper from '../../../components/common/timeline/core/Timeline';
+import Timeline from '../../../components/common/timeline/core/Timeline';
 
 function Screen() {
-	return <TimelineWrapper />;
+	return <Timeline />;
 }
 
 export default Screen;

apps/mobile/app/(tabs)/notifications/index.tsx

@@ -1,10 +1,93 @@
-import LandingPageStack from '../../../components/screens/notifications/landing/LandingPageStack';
 import WithAppNotifSeenContext from '../../../components/screens/notifications/landing/state/useNotifSeen';
+import {
+	useAppAcct,
+	useAppTheme,
+} from '../../../hooks/utility/global-state-extractors';
+import { useEffect, useState } from 'react';
+import AppNoAccount from '../../../components/error-screen/AppNoAccount';
+import { APP_LANDING_PAGE_TYPE } from '../../../components/shared/topnavbar/AppTabLandingNavbar';
+import { View } from 'react-native';
+import MentionView from '../../../components/screens/notifications/landing/views/MentionView';
+import ChatView from '../../../components/screens/notifications/landing/views/ChatView';
+import SocialView from '../../../components/screens/notifications/landing/views/SocialView';
+import UpdatesView from '../../../components/screens/notifications/landing/views/UpdatesView';
+import { AppPagerView } from '../../../components/lib/AppPagerView';
+import { BottomNavBar } from '../../../components/shared/pager-view/BottomNavBar';
+
+const renderScene = (index: number) => {
+	switch (index) {
+		case 0:
+			return <MentionView />;
+		case 1:
+			return <ChatView />;
+		case 2:
+			return <SocialView />;
+		case 3:
+			return <UpdatesView />;
+		default:
+			return null;
+	}
+};
+
+function Page() {
+	const { theme } = useAppTheme();
+	const { acct } = useAppAcct();
+	const [Index, setIndex] = useState<any>(0);
+
+	function onChipSelect(index: number) {
+		if (Index !== index) {
+			setIndex(index);
+		}
+	}
+
+	useEffect(() => {
+		const intervalFunction = () => {
+			// refetch();
+		};
+		const intervalId = setInterval(intervalFunction, 15000);
+		return () => {
+			clearInterval(intervalId);
+		};
+	}, []);
+
+	if (!acct) return <AppNoAccount tab={APP_LANDING_PAGE_TYPE.INBOX} />;
+
+	const tabLabels = [
+		{
+			label: 'Mentions',
+			id: 'mentions',
+		},
+		{
+			label: 'Chat',
+			id: 'social',
+		},
+		{
+			label: 'Social',
+			id: 'chat',
+		},
+		{
+			label: 'Updates',
+			id: 'updates',
+		},
+	];
 
-export default function NotificationsLandingPage() {
 	return (
 		<WithAppNotifSeenContext>
-			<LandingPageStack />
+			<View style={{ height: '100%', backgroundColor: theme.palette.bg }}>
+				<AppPagerView
+					pageCount={4}
+					renderFunction={renderScene}
+					onPageChangeCallback={onChipSelect}
+				/>
+				<BottomNavBar
+					Index={Index}
+					setIndex={onChipSelect}
+					items={tabLabels}
+					justify={'space-between'}
+				/>
+			</View>
 		</WithAppNotifSeenContext>
 	);
 }
+
+export default Page;