fix: update validation rules for IP address and URL in advanced settings

src/data/repositories/PostRepository.ts

@@ -1,6 +1,6 @@
 import { IPostRepository } from '../../domain/post/repositories/IPostRepository';
 import { PostRequestBody, PostResponseBody } from '../../domain/post/entities/Post';
-import { postAuth, getAuth } from '../../core/http';
+import { postAuth, getAuth, deleteAuth } from '../../core/http';
 
 export class PostRepository implements IPostRepository {
   async getAllPosts(): Promise<PostResponseBody[]> {
@@ -13,4 +13,10 @@ export class PostRepository implements IPostRepository {
   async create(postBody: PostRequestBody): Promise<void> {
     return await postAuth('posts/', postBody);
   }
+  async likePost(postId: string): Promise<void> {
+    return await postAuth(`posts/${postId}/likes/`, {});
+  }
+  async unlikePost(postId: string): Promise<void> {
+    return await deleteAuth(`posts/${postId}/likes/`);
+  }
 }

src/domain/notification/entities/Activity.ts

@@ -6,6 +6,7 @@
 export interface Activity {
   id: number;
   actor_username: string;
+  actor_avatar_url?: string;
   verb: string;
   is_read: boolean;
   created_at: string;

src/domain/post/repositories/IPostRepository.ts

@@ -4,4 +4,6 @@ export interface IPostRepository {
   getAllPosts(): Promise<PostResponseBody[]>;
   getPostById(id: string): Promise<PostResponseBody | null>;
   create(postBody: PostRequestBody): Promise<void>;
+  likePost(postId: string): Promise<void>;
+  unlikePost(postId: string): Promise<void>;
 }

src/domain/post/usecases/commands/ToggleLikePost.ts

@@ -0,0 +1,17 @@
+import { IPostRepository } from '../../repositories/IPostRepository';
+
+/**
+ * ToggleLikePost Use Case
+ * SOLID: Single Responsibility - Handle like/unlike logic
+ */
+export class ToggleLikePost {
+  constructor(private readonly postRepository: IPostRepository) {}
+
+  async execute(postId: string, isCurrentlyLiked: boolean): Promise<void> {
+    if (isCurrentlyLiked) {
+      await this.postRepository.unlikePost(postId);
+    } else {
+      await this.postRepository.likePost(postId);
+    }
+  }
+}

src/domain/user/entities/Connection.ts

@@ -1,13 +1,15 @@
+export interface CurrentWork {
+  job_title: string;
+  company_name: string;
+}
+
 export interface Connection {
   id: number;
   display_name: string;
   username: string;
   avatar: string;
   headline: string;
-  current_position: string;
-  company: string;
-  mutual_connections_count: string;
-  is_connected: string;
+  current_work: CurrentWork;
   is_verified: boolean;
   followers_count: string;
 }

src/presentation/components/atoms/NotificationIcon.tsx

@@ -10,6 +10,7 @@ interface NotificationIconProps {
   icon: IconDefinition;
   color?: string;
   size?: number;
+  containerSize?: number;
 }
 
 /**
@@ -22,17 +23,20 @@ export const NotificationIcon: React.FC<NotificationIconProps> = ({
   icon,
   color = theme.colors.primary,
   size = notificationIcon.defaultSize,
+  containerSize: customContainerSize,
 }) => {
+  const actualContainerSize = customContainerSize ?? notificationIcon.containerSize;
+
   const containerStyle = useMemo<ViewStyle>(
     () => ({
-      width: notificationIcon.containerSize,
-      height: notificationIcon.containerSize,
-      borderRadius: notificationIcon.containerSize / 2,
+      width: actualContainerSize,
+      height: actualContainerSize,
+      borderRadius: actualContainerSize / 2,
       backgroundColor: `${color}${notificationIcon.backgroundOpacity}`,
       alignItems: 'center',
       justifyContent: 'center',
     }),
-    [color],
+    [color, actualContainerSize],
   );
 
   return (

src/presentation/components/molecules/NetworkListHeader.tsx

@@ -1,13 +1,12 @@
-import React, { useMemo } from 'react';
-import { ViewStyle } from 'react-native';
-import { ScreenHeader } from './ScreenHeader';
+import React, { useMemo, useState } from 'react';
+import { View, ViewStyle, TouchableOpacity, Text, TextStyle } from 'react-native';
+import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
+import { faSearch, faTimes } from '@fortawesome/free-solid-svg-icons';
+import { PageHeader } from './PageHeader';
 import { SearchInput } from './SearchInput';
-import { TabBar } from './TabBar';
-import { faUsers, faUserPlus, faUserCheck } from '@fortawesome/free-solid-svg-icons';
 import { theme } from '../../theme';
-import { Badge } from '../atoms/Badge';
 
-const { networkListHeader } = theme.components;
+const { notificationTabs } = theme.components;
 
 interface NetworkListHeaderProps {
   connectedCount: number;
@@ -17,14 +16,14 @@ interface NetworkListHeaderProps {
   onTabChange: (tab: 'suggestions' | 'connections') => void;
 }
 
-const TABS = [
-  { key: 'suggestions', label: 'Suggestions', icon: faUserPlus },
-  { key: 'connections', label: 'My Network', icon: faUserCheck },
+const TABS: { key: 'suggestions' | 'connections'; label: string }[] = [
+  { key: 'suggestions', label: 'Suggestions' },
+  { key: 'connections', label: 'My Network' },
 ];
 
 /**
  * NetworkListHeader Molecule
- * Atomic Design: Molecule - Composed of ScreenHeader + Badge + SearchInput + TabBar
+ * Atomic Design: Molecule - Composed of PageHeader + Tabs + Badge + SearchInput
  * SOLID: Single Responsibility - Network list header UI only
  * SOLID: Open/Closed - Styles from theme
  */
@@ -35,40 +34,129 @@ export const NetworkListHeader: React.FC<NetworkListHeaderProps> = ({
   activeTab,
   onTabChange,
 }) => {
-  const badgeStyle = useMemo<ViewStyle>(
-    () => ({ marginBottom: networkListHeader.badgeMarginBottom }),
+  const [isSearchVisible, setIsSearchVisible] = useState(false);
+
+  const containerStyle = useMemo<ViewStyle>(
+    () => ({
+      backgroundColor: theme.colors.white,
+    }),
     [],
   );
 
-  const searchStyle = useMemo<ViewStyle>(
-    () => ({ marginBottom: networkListHeader.searchMarginBottom }),
+  const tabsContainerStyle = useMemo<ViewStyle>(
+    () => ({
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingHorizontal: notificationTabs.paddingHorizontal,
+      paddingVertical: notificationTabs.paddingVertical,
+      backgroundColor: theme.colors.white,
+      borderBottomWidth: 1,
+      borderBottomColor: theme.colors.border,
+    }),
     [],
   );
 
-  const tabsStyle = useMemo<ViewStyle>(
-    () => ({ marginTop: networkListHeader.tabsMarginTop }),
+  const tabsRowStyle = useMemo<ViewStyle>(
+    () => ({
+      flexDirection: 'row',
+      alignItems: 'center',
+    }),
     [],
   );
 
+  const searchIconStyle = useMemo<ViewStyle>(
+    () => ({
+      padding: 8,
+    }),
+    [],
+  );
+
+  const searchContainerStyle = useMemo<ViewStyle>(
+    () => ({
+      paddingHorizontal: 16,
+      paddingVertical: 12,
+      backgroundColor: theme.colors.white,
+      borderBottomWidth: 1,
+      borderBottomColor: theme.colors.border,
+    }),
+    [],
+  );
+
+  const handleSearchToggle = () => {
+    if (isSearchVisible) {
+      onSearchChange('');
+    }
+    setIsSearchVisible(!isSearchVisible);
+  };
+
+  return (
+    <View style={containerStyle}>
+      <PageHeader title="Network" />
+      <View style={tabsContainerStyle}>
+        <View style={tabsRowStyle}>
+          {TABS.map((tab) => (
+            <NetworkTabButton
+              key={tab.key}
+              label={tab.key === 'connections' ? `${tab.label} (${connectedCount})` : tab.label}
+              isActive={activeTab === tab.key}
+              onPress={() => onTabChange(tab.key)}
+            />
+          ))}
+        </View>
+        <TouchableOpacity onPress={handleSearchToggle} style={searchIconStyle}>
+          <FontAwesomeIcon
+            icon={isSearchVisible ? faTimes : faSearch}
+            size={18}
+            color={isSearchVisible ? theme.colors.gray600 : theme.colors.primary}
+          />
+        </TouchableOpacity>
+      </View>
+      {isSearchVisible && (
+        <View style={searchContainerStyle}>
+          <SearchInput
+            value={searchQuery}
+            onChangeText={onSearchChange}
+            placeholder="Search connections..."
+          />
+        </View>
+      )}
+    </View>
+  );
+};
+
+interface NetworkTabButtonProps {
+  label: string;
+  isActive: boolean;
+  onPress: () => void;
+}
+
+const NetworkTabButton: React.FC<NetworkTabButtonProps> = ({ label, isActive, onPress }) => {
+  const buttonStyle = useMemo<ViewStyle>(
+    () => ({
+      paddingVertical: notificationTabs.tabPaddingVertical,
+      paddingHorizontal: notificationTabs.tabPaddingHorizontal,
+      marginRight: notificationTabs.tabMarginRight,
+      borderRadius: notificationTabs.tabBorderRadius,
+      backgroundColor: isActive
+        ? notificationTabs.activeBackgroundColor
+        : 'transparent',
+    }),
+    [isActive],
+  );
+
+  const textStyle = useMemo<TextStyle>(
+    () => ({
+      fontSize: notificationTabs.fontSize,
+      fontWeight: isActive ? notificationTabs.activeFontWeight : 'normal',
+      color: isActive ? theme.colors.primary : notificationTabs.inactiveColor,
+    }),
+    [isActive],
+  );
+
   return (
-    <ScreenHeader title="Network">
-      <Badge
-        icon={faUsers}
-        text={`${connectedCount} connections`}
-        style={badgeStyle}
-      />
-      <SearchInput
-        value={searchQuery}
-        onChangeText={onSearchChange}
-        placeholder="Search connections..."
-        style={searchStyle}
-      />
-      <TabBar
-        tabs={TABS}
-        activeTab={activeTab}
-        onTabChange={(key) => onTabChange(key as 'suggestions' | 'connections')}
-        style={tabsStyle}
-      />
-    </ScreenHeader>
+    <TouchableOpacity style={buttonStyle} onPress={onPress}>
+      <Text style={textStyle}>{label}</Text>
+    </TouchableOpacity>
   );
 };

src/presentation/components/molecules/NotificationItem.tsx

@@ -4,6 +4,7 @@ import { NotificationIcon } from '../atoms/NotificationIcon';
 import { NotificationMessage } from '../atoms/NotificationMessage';
 import { ActivityTimestamp } from '../atoms/ActivityTimestamp';
 import { UnreadDot } from '../atoms/UnreadDot';
+import { AvatarImage } from '../atoms/AvatarImage';
 import { Activity } from '../../../domain/notification/entities/Activity';
 import { NotificationFormatter } from '../../../data/services/NotificationFormatter';
 import { theme } from '../../theme';
@@ -66,9 +67,35 @@ export const NotificationItem: React.FC<NotificationItemProps> = ({
     [],
   );
 
+  const avatarContainerStyle = useMemo<ViewStyle>(
+    () => ({
+      position: 'relative',
+    }),
+    [],
+  );
+
+  const iconOverlayStyle = useMemo<ViewStyle>(
+    () => ({
+      position: 'absolute',
+      bottom: -2,
+      right: -2,
+      backgroundColor: theme.colors.white,
+      borderRadius: 10,
+      padding: 2,
+    }),
+    [],
+  );
+
+  const actorInitial = notification.actor_username?.[0]?.toUpperCase() ?? '?';
+
   return (
     <TouchableOpacity style={containerStyle} onPress={onPress} activeOpacity={0.7}>
-      <NotificationIcon icon={displayInfo.icon} color={displayInfo.color} />
+      <View style={avatarContainerStyle}>
+        <AvatarImage uri={notification.actor_avatar_url} initial={actorInitial} size={44} />
+        <View style={iconOverlayStyle}>
+          <NotificationIcon icon={displayInfo.icon} color={displayInfo.color} size={10} containerSize={20} />
+        </View>
+      </View>
       <View style={contentStyle}>
         <NotificationMessage text={displayInfo.message} isRead={notification.is_read} />
         <View style={rowStyle}>