refactor(ui): redesign SearchBar with compact mode and add home screen tabs

Refactor SearchBar component to support compact mode with transparent styling,
reduced padding, and smaller icons. Add home screen tab navigation for switching
between home feed and market view with animated tab indicator. Also adjust
PostDetailScreen action button sizing and CommentItem margins for better spacing.

src/components/business/SearchBar.tsx

@@ -16,52 +16,44 @@ interface SearchBarProps {
   onFocus?: () => void;
   onBlur?: () => void;
   autoFocus?: boolean;
+  compact?: boolean;
 }
 
-function createSearchBarStyles(colors: AppColors) {
+function createSearchBarStyles(colors: AppColors, compact: boolean) {
   return StyleSheet.create({
     container: {
       flexDirection: 'row',
       alignItems: 'center',
-      backgroundColor: colors.background.paper,
+      backgroundColor: 'transparent',
       borderRadius: borderRadius.full,
-      paddingHorizontal: spacing.xs,
-      height: 46,
-      borderWidth: 1,
+      paddingHorizontal: compact ? spacing.sm : spacing.xs,
+      height: compact ? 38 : 46,
+      borderWidth: compact ? 1 : 1,
       borderColor: colors.divider,
-      shadowColor: 'transparent',
-      shadowOffset: { width: 0, height: 0 },
-      shadowOpacity: 0,
-      shadowRadius: 0,
-      elevation: 0,
     },
     containerFocused: {
       borderColor: colors.primary.main,
-      shadowColor: 'transparent',
-      shadowOffset: { width: 0, height: 0 },
-      shadowOpacity: 0,
-      shadowRadius: 0,
-      elevation: 0,
+      backgroundColor: 'transparent',
     },
     searchIconWrap: {
-      width: 30,
-      height: 30,
-      marginLeft: spacing.xs,
-      marginRight: spacing.xs,
+      width: compact ? 22 : 30,
+      height: compact ? 22 : 30,
+      marginLeft: compact ? 2 : spacing.xs,
+      marginRight: compact ? 6 : spacing.xs,
       borderRadius: borderRadius.full,
-      backgroundColor: `${colors.text.secondary}12`,
+      backgroundColor: 'transparent',
       alignItems: 'center',
       justifyContent: 'center',
     },
     searchIconWrapFocused: {
-      backgroundColor: `${colors.primary.main}1A`,
+      backgroundColor: 'transparent',
     },
     input: {
       flex: 1,
-      fontSize: fontSizes.md,
+      fontSize: compact ? fontSizes.md : fontSizes.md,
       color: colors.text.primary,
-      paddingVertical: spacing.sm + 1,
-      paddingHorizontal: spacing.xs,
+      paddingVertical: compact ? 0 : spacing.sm + 1,
+      paddingHorizontal: compact ? 2 : spacing.xs,
     },
     clearButton: {
       width: 24,
@@ -83,9 +75,10 @@ const SearchBar: React.FC<SearchBarProps> = ({
   onFocus,
   onBlur,
   autoFocus = false,
+  compact = false,
 }) => {
   const colors = useAppColors();
-  const styles = useMemo(() => createSearchBarStyles(colors), [colors]);
+  const styles = useMemo(() => createSearchBarStyles(colors, compact), [colors, compact]);
   const [isFocused, setIsFocused] = useState(false);
 
   const handleFocus = () => {
@@ -103,7 +96,7 @@ const SearchBar: React.FC<SearchBarProps> = ({
       <View style={[styles.searchIconWrap, isFocused && styles.searchIconWrapFocused]}>
         <MaterialCommunityIcons
           name="magnify"
-          size={18}
+          size={compact ? 16 : 18}
           color={isFocused ? colors.primary.main : colors.text.secondary}
         />
       </View>