Skip to content

Commit 53a9bf2

Browse files
Tim Girouxmarkharding
Tim Giroux
authored and
markharding
committed
Repurpose Sheets for Web Client
1 parent 7d7e680 commit 53a9bf2

33 files changed

Lines changed: 1171 additions & 925 deletions

‎apps/polycentric/app/+html.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { ScrollViewStyleReset } from 'expo-router/html';
2+
import { type PropsWithChildren } from 'react';
3+
4+
export default function Root({ children }: PropsWithChildren) {
5+
return (
6+
<html lang="en">
7+
<head>
8+
<meta charSet="utf-8" />
9+
<meta
10+
name="viewport"
11+
content="width=device-width, initial-scale=1, shrink-to-fit=no"
12+
/>
13+
<title>Polycentric</title>
14+
<link rel="icon" href="/favicon.ico" sizes="any" />
15+
<ScrollViewStyleReset />
16+
</head>
17+
<body>{children}</body>
18+
</html>
19+
);
20+
}

‎apps/polycentric/src/common/components/composites/IdentitySwitcherSheetInner.tsx‎

Lines changed: 41 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import {
55
IconButton,
66
LinkButton,
77
SelectionIndicator,
8-
Text,
98
} from '@/src/common/components/primitives';
109
import { useFadeIn } from '@/src/common/lib/animation';
1110
import { confirm } from '@/src/common/lib/dialogs/alert';
@@ -16,7 +15,7 @@ import {
1615
useIdentities,
1716
usePolycentric,
1817
} from '@/src/common/lib/polycentric-hooks';
19-
import { useSheetContext } from '@/src/common/lib/sheet';
18+
import { SheetHeaderBlock, useSheetContext } from '@/src/common/lib/sheet';
2019
import { Atoms, useTheme } from '@/src/common/theme';
2120
import { Ionicons } from '@expo/vector-icons';
2221
import {
@@ -67,15 +66,9 @@ function useIdentitySwitcher() {
6766
return context;
6867
}
6968

70-
interface IdentitySwitcherSheetInnerProps {
71-
dismiss: () => Promise<void>;
72-
}
73-
74-
export function IdentitySwitcherSheetInner({
75-
dismiss,
76-
}: IdentitySwitcherSheetInnerProps) {
69+
export function IdentitySwitcherSheetInner() {
7770
const client = usePolycentric();
78-
const { isOpen, setFooter } = useSheetContext();
71+
const { isOpen, dismissSheet } = useSheetContext();
7972
const identities = useIdentities();
8073
const [isEditing, setIsEditing] = useState(false);
8174

@@ -101,10 +94,10 @@ export function IdentitySwitcherSheetInner({
10194
() => ({
10295
isEditing,
10396
setIsEditing,
104-
dismiss,
97+
dismiss: dismissSheet,
10598
onDeleteIdentity: handleDeleteIdentity,
10699
}),
107-
[isEditing, dismiss, handleDeleteIdentity],
100+
[isEditing, dismissSheet, handleDeleteIdentity],
108101
);
109102

110103
useEffect(() => {
@@ -113,37 +106,45 @@ export function IdentitySwitcherSheetInner({
113106
}
114107
}, [isOpen]);
115108

116-
useEffect(() => {
117-
setFooter(
118-
isEditing ? <Footer onCreateIdentity={handleCreateIdentity} /> : null,
119-
);
120-
}, [isEditing, handleCreateIdentity]);
121-
122109
return (
123110
<IdentitySwitcherContext.Provider value={contextValue}>
124111
<Box style={Atoms.flex_1}>
125-
<Header isEditing={isEditing} setIsEditing={setIsEditing} />
126-
{isEditing ? (
127-
<DraggableFlatList
128-
data={identities}
129-
keyExtractor={(item) => pubkeyStr(item.publicKey)}
130-
renderItem={(props) => <DraggableIdentityListItem {...props} />}
131-
onDragEnd={() => {}}
132-
containerStyle={Atoms.flex_1}
133-
style={Atoms.flex_1}
134-
nestedScrollEnabled
135-
removeClippedSubviews={Platform.OS !== 'android'}
136-
/>
137-
) : (
138-
<FlatList
139-
data={identities}
140-
keyExtractor={(item) => pubkeyStr(item.publicKey)}
141-
renderItem={(props) => <StaticIdentityListItem {...props} />}
142-
style={Atoms.flex_1}
143-
nestedScrollEnabled
144-
removeClippedSubviews={Platform.OS !== 'android'}
145-
/>
146-
)}
112+
<SheetHeaderBlock
113+
title={isEditing ? 'Editing identities' : 'Your identities'}
114+
onClose={() => void dismissSheet()}
115+
trailing={
116+
<Box style={{ minWidth: 72, alignItems: 'flex-end' }}>
117+
<LinkButton
118+
title={isEditing ? 'Done' : 'Edit'}
119+
onPress={() => setIsEditing(!isEditing)}
120+
/>
121+
</Box>
122+
}
123+
/>
124+
<Box style={Atoms.flex_1}>
125+
{isEditing ? (
126+
<DraggableFlatList
127+
data={identities}
128+
keyExtractor={(item) => pubkeyStr(item.publicKey)}
129+
renderItem={(props) => <DraggableIdentityListItem {...props} />}
130+
onDragEnd={() => {}}
131+
containerStyle={Atoms.flex_1}
132+
style={Atoms.flex_1}
133+
nestedScrollEnabled
134+
removeClippedSubviews={Platform.OS !== 'android'}
135+
/>
136+
) : (
137+
<FlatList
138+
data={identities}
139+
keyExtractor={(item) => pubkeyStr(item.publicKey)}
140+
renderItem={(props) => <StaticIdentityListItem {...props} />}
141+
style={Atoms.flex_1}
142+
nestedScrollEnabled
143+
removeClippedSubviews={Platform.OS !== 'android'}
144+
/>
145+
)}
146+
</Box>
147+
{isEditing ? <Footer onCreateIdentity={handleCreateIdentity} /> : null}
147148
</Box>
148149
</IdentitySwitcherContext.Provider>
149150
);
@@ -262,48 +263,6 @@ function DeleteButton({ publicKey }: { publicKey: types.PublicKey }) {
262263
);
263264
}
264265

265-
function Header({
266-
isEditing,
267-
setIsEditing,
268-
}: {
269-
isEditing: boolean;
270-
setIsEditing: (v: boolean) => void;
271-
}) {
272-
const { theme } = useTheme();
273-
274-
return (
275-
<Box style={Atoms.flex_shrink_0}>
276-
<Box
277-
style={[
278-
Atoms.flex_row,
279-
Atoms.justify_between,
280-
Atoms.items_center,
281-
Atoms.mt_xl,
282-
Atoms.mb_lg,
283-
Atoms.mx_lg,
284-
{ backgroundColor: theme.palette.background_primary },
285-
]}
286-
>
287-
<Text fontSize={18} fontWeight="semibold">
288-
{isEditing ? 'Editing identities' : 'Your identities'}
289-
</Text>
290-
<LinkButton
291-
title={isEditing ? 'Done' : 'Edit'}
292-
onPress={() => setIsEditing(!isEditing)}
293-
/>
294-
</Box>
295-
<Box
296-
height={1}
297-
style={{
298-
backgroundColor: isEditing
299-
? theme.palette.warning_100
300-
: theme.palette.neutral_100,
301-
}}
302-
/>
303-
</Box>
304-
);
305-
}
306-
307266
export function Footer({
308267
onCreateIdentity,
309268
}: {

‎apps/polycentric/src/common/components/layouts/Screen.tsx‎

Lines changed: 17 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,24 @@
1-
import { View, StyleSheet, KeyboardAvoidingView, Platform } from 'react-native';
2-
import {
3-
Background,
4-
type BackgroundProps,
5-
} from '@/src/common/components/primitives/Background';
6-
import { useSafeAreaInsets } from 'react-native-safe-area-context';
1+
import { Atoms, useTheme } from '@/src/common/theme';
2+
import { isWeb } from '@/src/common/util/platform';
73
import { useMemo } from 'react';
4+
import { KeyboardAvoidingView, Platform, View } from 'react-native';
5+
import { useSafeAreaInsets } from 'react-native-safe-area-context';
86

97
interface ScreenProps {
108
children: React.ReactNode;
11-
background?: BackgroundProps;
129
edges?: ('top' | 'bottom' | 'left' | 'right')[];
1310
keyboardAvoiding?: boolean;
1411
}
1512

1613
export function Screen({
1714
children,
18-
background = { gradient: 'top' },
1915
edges = ['top', 'bottom'],
2016
keyboardAvoiding = false,
2117
}: ScreenProps) {
18+
const { theme } = useTheme();
2219
const insets = useSafeAreaInsets();
2320

24-
const padding = useMemo(
21+
const nativePadding = useMemo(
2522
() => ({
2623
paddingTop: edges.includes('top') ? insets.top : 0,
2724
paddingBottom: edges.includes('bottom') ? insets.bottom : 0,
@@ -31,9 +28,17 @@ export function Screen({
3128
[insets, edges],
3229
);
3330

34-
const content = keyboardAvoiding ? (
31+
if (isWeb) {
32+
return (
33+
<View style={[Atoms.flex_1, theme.atoms.bg, { position: 'relative' }]}>
34+
{children}
35+
</View>
36+
);
37+
}
38+
39+
const body = keyboardAvoiding ? (
3540
<KeyboardAvoidingView
36-
style={styles.flex}
41+
style={Atoms.flex_1}
3742
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
3843
keyboardVerticalOffset={insets.bottom}
3944
>
@@ -44,19 +49,6 @@ export function Screen({
4449
);
4550

4651
return (
47-
<View style={[styles.container, padding]}>
48-
<Background {...background} />
49-
{content}
50-
</View>
52+
<View style={[Atoms.flex_1, theme.atoms.bg, nativePadding]}>{body}</View>
5153
);
5254
}
53-
54-
const styles = StyleSheet.create({
55-
container: {
56-
flex: 1,
57-
backgroundColor: 'transparent',
58-
},
59-
flex: {
60-
flex: 1,
61-
},
62-
});

‎apps/polycentric/src/common/constants/constants.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { Platform } from 'react-native';
22

3+
export const WEB_MAX_CONTENT_WIDTH = 535;
4+
35
export const DEFAULT_IDENTITY_NAME = 'Anon';
46
export const TAB_BAR_HEIGHT = Platform.OS === 'ios' ? 80 : 56;
57

‎apps/polycentric/src/common/lib/GlobalHead.tsx‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎apps/polycentric/src/common/lib/GlobalHead.web.tsx‎

Lines changed: 0 additions & 46 deletions
This file was deleted.

‎apps/polycentric/src/common/lib/polycentric-hooks/PolycentricProvider.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ export const DEFAULT_SERVER =
7070
interface PolycentricProviderProps {
7171
children: ReactNode;
7272
loadingComponent?: ReactNode;
73-
onInitialized: () => void;
73+
onInitialized?: () => void;
7474
}
7575

7676
function DefaultLoadingComponent() {
@@ -118,7 +118,7 @@ export function PolycentricProvider({
118118

119119
useEffect(() => {
120120
if (!isLoading) {
121-
onInitialized();
121+
onInitialized?.();
122122
}
123123
}, [isLoading, onInitialized]);
124124

0 commit comments

Comments
 (0)