Skip to content

Commit 10fe409

Browse files
sirdeggensirdeggen
committed
visual stuff updated for bookmarks and settings page
1 parent 52b6259 commit 10fe409

File tree

5 files changed

+194
-52
lines changed

5 files changed

+194
-52
lines changed

‎app/browser.tsx‎

Lines changed: 31 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import {
1515
Keyboard,
1616
TouchableWithoutFeedback,
1717
KeyboardAvoidingView,
18-
LayoutAnimation,
1918
ScrollView,
2019
Modal as RNModal,
2120
BackHandler,
@@ -34,7 +33,6 @@ import {
3433
} from 'react-native-gesture-handler'
3534
import { TabView, SceneMap } from 'react-native-tab-view'
3635
import Fuse from 'fuse.js'
37-
import * as Linking from 'expo-linking'
3836
import { Ionicons } from '@expo/vector-icons'
3937
import { observer } from 'mobx-react-lite'
4038
import { router } from 'expo-router'
@@ -1467,29 +1465,7 @@ function Browser() {
14671465
[updateActiveTab]
14681466
)
14691467

1470-
const BookmarksScene = useMemo(() => {
1471-
return () => (
1472-
<RecommendedApps
1473-
includeBookmarks={bookmarkStore.bookmarks
1474-
.filter(bookmark => {
1475-
// Filter out invalid URLs to prevent favicon errors
1476-
return (
1477-
bookmark.url &&
1478-
bookmark.url !== kNEW_TAB_URL &&
1479-
isValidUrl(bookmark.url) &&
1480-
!bookmark.url.includes('about:blank')
1481-
)
1482-
})
1483-
.reverse()}
1484-
setStartingUrl={handleSetStartingUrl}
1485-
onRemoveBookmark={removeBookmark}
1486-
onRemoveDefaultApp={removeDefaultApp}
1487-
removedDefaultApps={removedDefaultApps}
1488-
hideHeader={true}
1489-
showOnlyBookmarks={true}
1490-
/>
1491-
)
1492-
}, [bookmarkStore.bookmarks, handleSetStartingUrl, removeBookmark, removeDefaultApp, removedDefaultApps])
1468+
// BookmarksScene will be defined after toggleInfoDrawer
14931469

14941470
const HistoryScene = React.useCallback(() => {
14951471
return (
@@ -1559,10 +1535,40 @@ function Browser() {
15591535
/* INFO DRAWER NAV */
15601536
/* -------------------------------------------------------------------------- */
15611537
const toggleInfoDrawer = useCallback((open: boolean, route: typeof infoDrawerRoute = 'root') => {
1538+
console.log('toggleInfoDrawer called with:', { open, route, isFullscreen, showInfoDrawer })
15621539
setInfoDrawerRoute(route)
15631540
setShowInfoDrawer(open)
1541+
console.log('After setShowInfoDrawer, new value should be:', open)
15641542
}, [])
15651543

1544+
const BookmarksScene = useMemo(() => {
1545+
return () => (
1546+
<RecommendedApps
1547+
includeBookmarks={bookmarkStore.bookmarks
1548+
.filter(bookmark => {
1549+
// Filter out invalid URLs to prevent favicon errors
1550+
return (
1551+
bookmark.url &&
1552+
bookmark.url !== kNEW_TAB_URL &&
1553+
isValidUrl(bookmark.url) &&
1554+
!bookmark.url.includes('about:blank')
1555+
)
1556+
})
1557+
.reverse()}
1558+
setStartingUrl={handleSetStartingUrl}
1559+
onRemoveBookmark={removeBookmark}
1560+
onRemoveDefaultApp={removeDefaultApp}
1561+
removedDefaultApps={removedDefaultApps}
1562+
onCloseModal={() => {
1563+
// Just close the drawer - the bookmark is already added by the component
1564+
toggleInfoDrawer(false)
1565+
}}
1566+
hideHeader={true}
1567+
showOnlyBookmarks={true}
1568+
/>
1569+
)
1570+
}, [bookmarkStore.bookmarks, handleSetStartingUrl, removeBookmark, removeDefaultApp, removedDefaultApps, toggleInfoDrawer])
1571+
15661572
useEffect(() => {
15671573
Animated.timing(drawerAnim, {
15681574
toValue: showInfoDrawer ? 1 : 0,
@@ -2077,7 +2083,6 @@ function Browser() {
20772083
onPress={drawerHandlers.toggleDesktopView}
20782084
/>
20792085
)}
2080-
<DrawerItem label={t('add_bookmark')} icon="star-outline" onPress={drawerHandlers.addBookmark} />
20812086
{Platform.OS !== 'ios' && (
20822087
<DrawerItem
20832088
label={t('add_to_device_homescreen')}

‎app/settings.tsx‎

Lines changed: 90 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default function SettingsScreen() {
1010
const { t } = useTranslation()
1111
const { colors, mode, setThemeMode } = useTheme()
1212
const styles = useThemeStyles()
13-
const { updateSettings, settings, logout } = useWallet()
13+
const { updateSettings, settings, logout, selectedWabUrl, selectedStorageUrl, selectedNetwork } = useWallet()
1414

1515
// Handle theme mode change
1616
const handleThemeChange = async (newMode: ThemeMode) => {
@@ -30,9 +30,95 @@ export default function SettingsScreen() {
3030

3131
return (
3232
<SafeAreaView style={styles.container}>
33-
<ScrollView style={{ flex: 1 }}>
34-
<View style={{ padding: 20 }}>
35-
<Text style={[styles.title, { textAlign: 'left', alignSelf: 'flex-start' }]}>{t('settings')}</Text>
33+
<ScrollView style={{ flex: 1 }}>
34+
{/* Account Section */}
35+
<View style={[styles.card, { marginTop: 20 }]}>
36+
<Text style={[styles.text, { fontWeight: 'bold', fontSize: 18, marginBottom: 15 }]}>{t('wallet_configuration')}</Text>
37+
38+
{/* Wallet Configuration URLs */}
39+
<View style={{ marginBottom: 20 }}>
40+
{/* WAB URL */}
41+
<View style={{ marginBottom: 12 }}>
42+
<Text style={[styles.textSecondary, { fontSize: 14, marginBottom: 4 }]}>
43+
{t('wab_url')}
44+
</Text>
45+
<View style={[
46+
styles.row,
47+
{
48+
paddingHorizontal: 12,
49+
paddingVertical: 6,
50+
borderRadius: 8,
51+
backgroundColor: colors.paperBackground,
52+
borderWidth: 1,
53+
borderColor: colors.inputBorder,
54+
}
55+
]}>
56+
<Text style={[styles.textSecondary, { fontSize: 14, flex: 1, textAlign: 'center' }]} numberOfLines={1}>
57+
{selectedWabUrl || 'Not configured'}
58+
</Text>
59+
</View>
60+
</View>
61+
62+
{/* Wallet Storage URL */}
63+
<View style={{ marginBottom: 12 }}>
64+
<Text style={[styles.textSecondary, { fontSize: 14, marginBottom: 4 }]}>
65+
{t('wallet_storage_url')}
66+
</Text>
67+
<View style={[
68+
styles.row,
69+
{
70+
paddingHorizontal: 12,
71+
paddingVertical: 6,
72+
borderRadius: 8,
73+
backgroundColor: colors.paperBackground,
74+
borderWidth: 1,
75+
borderColor: colors.inputBorder
76+
}
77+
]}>
78+
<Text style={[styles.textSecondary, { fontSize: 14, flex: 1, textAlign: 'center' }]} numberOfLines={1}>
79+
{selectedStorageUrl || 'Not configured'}
80+
</Text>
81+
</View>
82+
</View>
83+
84+
{/* NETWORK */}
85+
<View style={{ marginBottom: 12 }}>
86+
<Text style={[styles.textSecondary, { fontSize: 14, marginBottom: 4 }]}>
87+
{t('bsv_network')}
88+
</Text>
89+
<View style={[
90+
styles.row,
91+
{
92+
paddingHorizontal: 12,
93+
paddingVertical: 6,
94+
borderRadius: 8,
95+
backgroundColor: colors.paperBackground,
96+
borderWidth: 1,
97+
borderColor: colors.inputBorder
98+
}
99+
]}>
100+
<Text style={[styles.textSecondary, { fontSize: 14, flex: 1, textAlign: 'center' }]} numberOfLines={1}>
101+
{selectedNetwork || 'Not configured'}
102+
</Text>
103+
</View>
104+
</View>
105+
106+
{/* Explanation text */}
107+
<Text style={[styles.textSecondary, { fontSize: 13, fontStyle: 'italic', marginBottom: 15 }]}>
108+
{t('logout_to_change_urls')}
109+
</Text>
110+
</View>
111+
112+
<TouchableOpacity
113+
style={[styles.row, { padding: 15, borderRadius: 8, backgroundColor: colors.error + '20' }]}
114+
onPress={logout}
115+
>
116+
<View style={[styles.row, { flex: 1 }]}>
117+
<Ionicons name="log-out-outline" size={24} color={colors.error} style={{ marginRight: 10 }} />
118+
<Text style={[styles.text, { color: colors.error }]}>{t('logout')}</Text>
119+
</View>
120+
</TouchableOpacity>
121+
</View>
36122

37123
{/* Theme Section */}
38124
<View style={styles.card}>
@@ -103,23 +189,7 @@ export default function SettingsScreen() {
103189
</TouchableOpacity>
104190
</View>
105191

106-
{/* Account Section */}
107-
<View style={[styles.card, { marginTop: 20 }]}>
108-
<Text style={[styles.text, { fontWeight: 'bold', fontSize: 18, marginBottom: 15 }]}>{t('account')}</Text>
109-
110-
<TouchableOpacity
111-
style={[styles.row, { padding: 15, borderRadius: 8, backgroundColor: colors.error + '20' }]}
112-
onPress={logout}
113-
>
114-
<View style={[styles.row, { flex: 1 }]}>
115-
<Ionicons name="log-out-outline" size={24} color={colors.error} style={{ marginRight: 10 }} />
116-
<Text style={[styles.text, { color: colors.error }]}>{t('logout')}</Text>
117-
</View>
118-
</TouchableOpacity>
119-
</View>
120-
121192
{/* Other Settings Sections can be added here */}
122-
</View>
123193
</ScrollView>
124194
</SafeAreaView>
125195
)

‎components/RecommendedApps.tsx‎

Lines changed: 64 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { useState, useMemo, useCallback } from 'react'
2+
import { observer } from 'mobx-react-lite'
23
import {
34
View,
45
Text,
@@ -17,6 +18,8 @@ import { useTheme } from '@/context/theme/ThemeContext'
1718
import { useWallet } from '@/context/WalletContext'
1819
import { useBrowserMode } from '@/context/BrowserModeContext'
1920
import { useTranslation } from 'react-i18next'
21+
import bookmarkStore from '@/stores/BookmarkStore'
22+
import tabStore from '@/stores/TabStore'
2023

2124
interface App {
2225
domain: string
@@ -33,6 +36,7 @@ interface RecommendedAppsProps {
3336
onRemoveBookmark?: (url: string) => void
3437
onRemoveDefaultApp?: (url: string) => void
3538
removedDefaultApps?: string[]
39+
onCloseModal?: () => void // Handler to close the modal
3640
// Homepage customization props
3741
homepageSettings?: {
3842
showBookmarks: boolean
@@ -74,7 +78,7 @@ const defaultApps: App[] = [
7478
/* RECOMMENDED APPS COMPONENT */
7579
/* -------------------------------------------------------------------------- */
7680

77-
export const RecommendedApps = ({
81+
export const RecommendedApps = observer(({
7882
setStartingUrl,
7983
includeBookmarks = [],
8084
hideHeader = false,
@@ -83,6 +87,7 @@ export const RecommendedApps = ({
8387
onRemoveBookmark,
8488
onRemoveDefaultApp,
8589
removedDefaultApps = [],
90+
onCloseModal,
8691
homepageSettings,
8792
onUpdateHomepageSettings
8893
}: RecommendedAppsProps) => {
@@ -92,7 +97,7 @@ export const RecommendedApps = ({
9297
const { t } = useTranslation()
9398
const [searchQuery, setSearchQuery] = useState('')
9499
const [showCustomizeModal, setShowCustomizeModal] = useState(false)
95-
const [isDesktopView, setIsDesktopView] = useState(false)
100+
const [bookmarkRefresh, setBookmarkRefresh] = useState(0)
96101

97102
// Context menu state
98103
const [contextMenuVisible, setContextMenuVisible] = useState(false)
@@ -140,6 +145,21 @@ export const RecommendedApps = ({
140145
setSelectedApp(null)
141146
}, [])
142147

148+
const handleAddBookmark = useCallback(() => {
149+
const activeTab = tabStore.activeTab
150+
if (activeTab && activeTab.url && activeTab.url !== 'about:blank' && !activeTab.url.includes('metanet://')) {
151+
const title = activeTab.title || activeTab.url
152+
bookmarkStore.addBookmark(title, activeTab.url)
153+
// Close the modal after adding bookmark
154+
if (onCloseModal) {
155+
// Use setTimeout to ensure the bookmark is added first, then close
156+
setTimeout(() => {
157+
onCloseModal()
158+
}, 100)
159+
}
160+
}
161+
}, [onCloseModal])
162+
143163
/* -------------------------- prepare separate data sources -------------------------- */
144164
const filteredDefaultApps = useMemo(() => {
145165
if (showOnlyBookmarks) return []
@@ -160,7 +180,11 @@ export const RecommendedApps = ({
160180
}, [recentApps, showOnlyBookmarks, homepageSettings, isWeb2Mode])
161181

162182
const processedBookmarks = useMemo(() => {
163-
const bookmarks = includeBookmarks.map(bm => ({
183+
// Always use bookmarks directly from the store to ensure reactivity
184+
// This ensures the component updates when bookmarks are added/removed
185+
const storeBookmarks = bookmarkStore.bookmarks || []
186+
console.log('Processing bookmarks, count:', storeBookmarks.length)
187+
const bookmarks = storeBookmarks.map(bm => ({
164188
domain: bm.url,
165189
appName: bm.title || bm.url,
166190
appIconImageUrl: `${bm.url.replace(/\/$/, '')}/favicon.ico`
@@ -172,7 +196,7 @@ export const RecommendedApps = ({
172196
}
173197

174198
return bookmarks
175-
}, [includeBookmarks, showOnlyBookmarks, limitBookmarks])
199+
}, [bookmarkStore.bookmarks, showOnlyBookmarks, limitBookmarks, bookmarkRefresh])
176200

177201
// Combined for search functionality
178202
const allApps = useMemo(() => {
@@ -242,6 +266,9 @@ export const RecommendedApps = ({
242266

243267
return (
244268
<View style={[componentStyles.container, { backgroundColor: colors.paperBackground }]}>
269+
270+
{/* Removed Add Bookmark button from top - now at bottom */}
271+
245272
{showOnlyBookmarks && (
246273
<View style={componentStyles.searchContainer}>
247274
<TextInput
@@ -344,6 +371,20 @@ export const RecommendedApps = ({
344371
)}
345372
</ScrollView>
346373

374+
{/* Add Bookmark Button - Only show in bookmark modal */}
375+
{showOnlyBookmarks && (
376+
<View style={componentStyles.addBookmarkSection}>
377+
<TouchableOpacity
378+
style={[componentStyles.addBookmarkButton, { backgroundColor: colors.primary }]}
379+
onPress={handleAddBookmark}
380+
activeOpacity={0.7}
381+
>
382+
<Ionicons name="bookmark-outline" size={20} color={colors.background} />
383+
<Text style={[componentStyles.addBookmarkText, { color: colors.background }]}>{t('add_bookmark')}</Text>
384+
</TouchableOpacity>
385+
</View>
386+
)}
387+
347388
{/* Customize Homepage Modal */}
348389
{showCustomizeModal && homepageSettings && onUpdateHomepageSettings && (
349390
<Modal
@@ -490,7 +531,7 @@ export const RecommendedApps = ({
490531
)}
491532
</View>
492533
)
493-
}
534+
})
494535

495536
/* -------------------------------------------------------------------------- */
496537
/* CSS */
@@ -683,5 +724,23 @@ const componentStyles = StyleSheet.create({
683724
backgroundColor: 'rgba(0,0,0,1)',
684725
justifyContent: 'center',
685726
alignItems: 'center'
727+
},
728+
addBookmarkSection: {
729+
padding: 16,
730+
paddingBottom: 36,
731+
borderTopWidth: StyleSheet.hairlineWidth,
732+
borderTopColor: 'rgba(0,0,0,0.1)'
733+
},
734+
addBookmarkButton: {
735+
flexDirection: 'row',
736+
alignItems: 'center',
737+
justifyContent: 'center',
738+
padding: 16,
739+
borderRadius: 8,
740+
gap: 8
741+
},
742+
addBookmarkText: {
743+
fontSize: 16,
744+
fontWeight: '600'
686745
}
687746
})

‎components/Web3BenefitsModal.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { Modal, View, Text, TouchableOpacity, StyleSheet } from 'react-native'
33
import { Ionicons } from '@expo/vector-icons'
44
import { useTheme } from '@/context/theme/ThemeContext'
55
import { useTranslation } from 'react-i18next'
6-
import { red } from '@bsv/sdk/primitives/Point.ts'
76

87
interface Web3BenefitsModalProps {
98
visible: boolean

0 commit comments

Comments
 (0)