refactor(ui): redesign TabBar to border-bottom indicator style

- Remove pill container styling with shadows and rounded corners
- Simplify tab styling and reduce font weights
- Change active indicator from 20px to span 50% width
- Add channel tag display to PostDetailScreen
- Simplify SafeAreaView edge handling in embedded screens

src/components/business/TabBar.tsx

@@ -135,33 +135,21 @@ function createTabBarStyles(colors: AppColors) {
     modernContainer: {
       flexDirection: 'row',
       backgroundColor: colors.background.paper,
-      borderRadius: borderRadius['2xl'],
-      marginHorizontal: spacing.lg,
-      marginVertical: spacing.sm,
-      padding: spacing.xs,
-      shadowColor: colors.chat.shadow,
-      shadowOffset: { width: 0, height: 4 },
-      shadowOpacity: 0.1,
-      shadowRadius: 16,
-      elevation: 6,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.divider,
+      alignItems: 'center',
+      paddingRight: spacing.xs,
     },
     modernTab: {
       flex: 1,
       alignItems: 'center',
       justifyContent: 'center',
       paddingVertical: spacing.md,
-      paddingHorizontal: spacing.sm,
-      borderRadius: borderRadius.lg,
       position: 'relative',
       backgroundColor: 'transparent',
     },
     modernTabActive: {
-      backgroundColor: colors.primary.main + '12',
-      shadowColor: colors.primary.main + '20',
-      shadowOffset: { width: 0, height: 2 },
-      shadowOpacity: 0.1,
-      shadowRadius: 8,
-      elevation: 3,
+      backgroundColor: 'transparent',
     },
     modernTabContent: {
       flexDirection: 'row',
@@ -172,19 +160,21 @@ function createTabBarStyles(colors: AppColors) {
       marginRight: spacing.xs,
     },
     modernTabText: {
-      fontWeight: '600',
+      fontWeight: '500',
       fontSize: fontSizes.md,
     },
     modernTabTextActive: {
-      fontWeight: '700',
+      fontWeight: '600',
     },
     modernTabIndicator: {
       position: 'absolute',
-      bottom: 4,
-      width: 20,
+      bottom: 0,
+      left: '25%',
+      right: '25%',
       height: 3,
       backgroundColor: colors.primary.main,
-      borderRadius: borderRadius.full,
+      borderTopLeftRadius: borderRadius.sm,
+      borderTopRightRadius: borderRadius.sm,
     },
   });
 }