feat(ui): implement keyword highlighting and improve search experience

- Add keyword highlighting in `PostCard` and `PostContentRenderer` using `HighlightText`.
- Implement smart excerpt logic in `PostCard` to show relevant context around search keywords.
- Update `SearchBar` styles for better visual feedback and consistency.
- Enhance `SearchScreen` with modern tab variants and improved tag styling.
- Add support for updating group descriptions in `GroupInfoScreen` and `GroupService`.
- Refactor various UI components for improved layout stability and typography.

src/components/business/SearchBar.tsx

@@ -24,22 +24,22 @@ function createSearchBarStyles(colors: AppColors, compact: boolean) {
     container: {
       flexDirection: 'row',
       alignItems: 'center',
-      backgroundColor: 'transparent',
+      backgroundColor: `${colors.primary.main}08`,
       borderRadius: borderRadius.full,
-      paddingHorizontal: compact ? spacing.sm : spacing.xs,
-      height: compact ? 38 : 46,
-      borderWidth: compact ? 1 : 1,
-      borderColor: colors.divider,
+      paddingHorizontal: compact ? spacing.sm : spacing.md,
+      height: compact ? 38 : 48,
+      borderWidth: 1.5,
+      borderColor: 'transparent',
     },
     containerFocused: {
-      borderColor: colors.primary.main,
-      backgroundColor: 'transparent',
+      borderColor: `${colors.primary.main}50`,
+      backgroundColor: `${colors.primary.main}10`,
     },
     searchIconWrap: {
-      width: compact ? 22 : 30,
-      height: compact ? 22 : 30,
-      marginLeft: compact ? 2 : spacing.xs,
-      marginRight: compact ? 6 : spacing.xs,
+      width: compact ? 22 : 32,
+      height: compact ? 22 : 32,
+      marginLeft: compact ? 2 : 0,
+      marginRight: compact ? 6 : spacing.sm,
       borderRadius: borderRadius.full,
       backgroundColor: 'transparent',
       alignItems: 'center',
@@ -50,17 +50,18 @@ function createSearchBarStyles(colors: AppColors, compact: boolean) {
     },
     input: {
       flex: 1,
-      fontSize: compact ? fontSizes.md : fontSizes.md,
+      fontSize: compact ? fontSizes.md : fontSizes.lg,
       color: colors.text.primary,
-      paddingVertical: compact ? 0 : spacing.sm + 1,
-      paddingHorizontal: compact ? 2 : spacing.xs,
+      paddingVertical: compact ? 0 : spacing.sm,
+      paddingHorizontal: compact ? 2 : 0,
+      fontWeight: '500',
     },
     clearButton: {
-      width: 24,
-      height: 24,
-      marginHorizontal: spacing.xs,
+      width: 22,
+      height: 22,
+      marginLeft: spacing.xs,
       borderRadius: borderRadius.full,
-      backgroundColor: `${colors.text.secondary}14`,
+      backgroundColor: `${colors.text.secondary}20`,
       alignItems: 'center',
       justifyContent: 'center',
     },