Merge pull request #8 from afnx/feature/browser-screen

Feature/browser screen

Author: afnx

package-lock.json

@@ -13,13 +13,14 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^15.0.2",
+    "@react-native-community/blur": "^4.4.1",
     "@react-navigation/bottom-tabs": "^7.4.0",
     "@react-navigation/elements": "^2.6.3",
     "@react-navigation/native": "^7.1.8",
     "@reduxjs/toolkit": "^2.9.0",
     "expo": "~54.0.13",
     "expo-constants": "~18.0.9",
-    "expo-dev-client": "~6.0.15",
+    "expo-dev-client": "~6.0.16",
     "expo-font": "~14.0.9",
     "expo-haptics": "~15.0.7",
     "expo-image": "~3.0.9",
@@ -34,6 +35,7 @@
     "react-dom": "19.1.0",
     "react-native": "0.81.4",
     "react-native-gesture-handler": "~2.28.0",
+    "react-native-keyboard-controller": "^1.19.2",
     "react-native-reanimated": "~4.1.1",
     "react-native-safe-area-context": "~5.6.0",
     "react-native-screens": "~4.16.0",

package.json

@@ -4,6 +4,7 @@ import { Stack } from "expo-router";
 import { StatusBar } from "expo-status-bar";
 import React from "react";
 import { ActivityIndicator, Text, View } from "react-native";
+import { KeyboardProvider } from "react-native-keyboard-controller";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import { Provider } from "react-redux";
 import { PersistGate } from "redux-persist/integration/react";
@@ -40,7 +41,9 @@ export default function RootLayout() {
     <Provider store={store}>
       <PersistGate loading={<LoadingComponent />} persistor={persistor}>
         <ThemeProvider>
-          <AppContent />
+          <KeyboardProvider>
+            <AppContent />
+          </KeyboardProvider>
         </ThemeProvider>
       </PersistGate>
     </Provider>

src/app/_layout.tsx

@@ -1,59 +1,5 @@
-import { useSettings } from "@/src/features/settings/hooks/useSettings";
-import { useTheme } from "@/src/theme/useTheme";
-import { Pressable, Text, View } from "react-native";
+import BrowserScreen from "@/src/features/browser/screens/BrowserScreen";
 
 export default function Index() {
-  const theme = useTheme();
-  const settings = useSettings();
-
-  return (
-    <View
-      style={{
-        flex: 1,
-        justifyContent: "center",
-        alignItems: "center",
-        backgroundColor: theme.colors.background,
-      }}
-    >
-      <Text
-        style={{
-          ...theme.typography.h4,
-          color: theme.colors.warning,
-        }}
-      >
-        The current theme color is {theme.name}.{"\n"}
-        The current theme mode is {settings.theme}.
-      </Text>
-      <Pressable onPress={() => settings.switchTheme("system")}>
-        <Text
-          style={{
-            ...theme.typography.button,
-            color: theme.colors.textPrimary,
-          }}
-        >
-          System Theme
-        </Text>
-      </Pressable>
-      <Pressable onPress={() => settings.switchTheme("light")}>
-        <Text
-          style={{
-            ...theme.typography.button,
-            color: theme.colors.textPrimary,
-          }}
-        >
-          Light Theme
-        </Text>
-      </Pressable>
-      <Pressable onPress={() => settings.switchTheme("dark")}>
-        <Text
-          style={{
-            ...theme.typography.button,
-            color: theme.colors.textPrimary,
-          }}
-        >
-          Dark Theme
-        </Text>
-      </Pressable>
-    </View>
-  );
+  return <BrowserScreen />;
 }

src/app/index.tsx

@@ -0,0 +1,57 @@
+import { Icon, IconSizes } from "@/src/constants/Icons";
+import { Ionicons } from "@expo/vector-icons";
+import { ColorValue, Pressable, StyleSheet, ViewStyle } from "react-native";
+
+interface IconButtonProps {
+  icon: Icon;
+  size?: number;
+  color?: ColorValue;
+  disabled?: boolean;
+  accessibilityLabel?: string;
+  style?: ViewStyle;
+  onPress?: () => void;
+}
+
+export default function IconButton({
+  icon,
+  size = IconSizes.medium,
+  color = "#000",
+  disabled = false,
+  accessibilityLabel,
+  style,
+  onPress,
+}: IconButtonProps) {
+  return (
+    <Pressable
+      style={({ pressed }) => [
+        styles.button,
+        style,
+        disabled && styles.disabled,
+        pressed && !disabled && styles.pressed,
+      ]}
+      onPress={onPress}
+      disabled={disabled}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+    >
+      <Ionicons name={icon} size={size} color={color} />
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    padding: 8,
+    borderRadius: 20,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  disabled: {
+    opacity: 0.4,
+  },
+  pressed: {
+    opacity: 0.7,
+  },
+});
+
+export { IconSizes };

src/components/IconButton.tsx

@@ -27,6 +27,9 @@ export const Icons = {
   secure: "lock-closed" as const,
   insecure: "warning" as const,
   search: "search" as const,
+  microphone: "mic-outline" as const,
+  deleteInput: "close-circle" as const,
+  readerOutline: "reader-outline" as const,
 
   // Tab management
   closeTab: "close" as const,
@@ -54,8 +57,8 @@ export const Icons = {
   textSize: "text" as const,
 
   // Bookmarks and favorites
-  bookmark: "bookmark-outline" as const,
-  bookmarkFilled: "bookmark" as const,
+  bookmark: "book-outline" as const,
+  bookmarkFilled: "book" as const,
   star: "star-outline" as const,
   starFilled: "star" as const,