feat(social): add friends, private chats, inbox and music sharing

apps/mobile/src/app/(tabs)/_layout.tsx

@@ -8,18 +8,21 @@ import { player } from '../../player/controller';
 import { usePlayerState } from '../../player/hooks';
 import { useColors } from '../../theme';
 import { Cover, Icon, type IconName } from '../../ui/kit';
+import { useSocialUnread } from '../../features/social/Social';
 import { UpdateDialog } from '../../ui/UpdateDialog';
 
-const ICONS: Record<string, IconName> = { index: 'home', search: 'search', collection: 'library-music', profile: 'person' };
+const ICONS: Record<string, IconName> = { index: 'home', search: 'search', collection: 'library-music', friends: 'people-outline', profile: 'person' };
 
 export default function TabsLayout() {
   const colors = useColors();
   const { t } = useTranslation();
+  const unread = useSocialUnread();
   const labels: Record<string, string> = {
     index: t('nav.home'),
     search: t('mobile.search'),
     collection: t('nav.collection'),
     profile: t('mobile.profile'),
+    friends: t('social.people'),
   };
   const net = useNetInfo();
   return (
@@ -34,6 +37,7 @@ export default function TabsLayout() {
               routes={state.routes.map((r) => r.name)}
               active={state.index}
               labels={labels}
+              badges={{ friends: unread }}
               onPress={(name) => navigation.navigate(name)}
             />
           </View>
@@ -42,6 +46,7 @@ export default function TabsLayout() {
         <Tabs.Screen name="index" />
         <Tabs.Screen name="search" />
         <Tabs.Screen name="collection" />
+        <Tabs.Screen name="friends" />
         <Tabs.Screen name="profile" />
       </Tabs>
       <UpdateDialog />
@@ -53,11 +58,13 @@ function TabBar({
   routes,
   active,
   labels,
+  badges,
   onPress,
 }: {
   routes: string[];
   active: number;
   labels: Record<string, string>;
+  badges: Record<string, number>;
   onPress: (name: string) => void;
 }) {
   const colors = useColors();
@@ -81,10 +88,13 @@ function TabBar({
             onPress={() => onPress(name)}
             accessibilityRole="tab"
             accessibilityState={{ selected: on }}
-            accessibilityLabel={labels[name]}
+            accessibilityLabel={`${labels[name]}${badges[name] ? ` · ${badges[name]}` : ''}`}
             style={{ flex: 1, alignItems: 'center', paddingVertical: 8, gap: 2 }}
           >
-            <Icon name={ICONS[name] ?? 'circle'} color={on ? colors.accent2 : colors.text3} />
+            <View>
+              <Icon name={ICONS[name] ?? 'circle'} color={on ? colors.accent2 : colors.text3} />
+              {!!badges[name] && <Text style={{ position: 'absolute', top: -5, left: 14, minWidth: 16, paddingHorizontal: 4, borderRadius: 9, backgroundColor: colors['accent-fill'], color: '#fff', fontSize: 10, textAlign: 'center' }}>{badges[name]! > 99 ? '99+' : badges[name]}</Text>}
+            </View>
             <Text style={{ fontSize: 11, color: on ? colors.text : colors.text3, fontWeight: on ? '600' : '400' }}>
               {labels[name]}
             </Text>

apps/mobile/src/app/(tabs)/friends.tsx

@@ -0,0 +1,2 @@
+import { SocialScreen } from '../../features/social/Social';
+export default function FriendsTab() { return <SocialScreen root />; }