Add friend code component

src/app/browser/components/friend-code.tsx

@@ -0,0 +1,33 @@
+import React, { useCallback, useMemo } from 'react';
+import { StyleSheet, Text } from 'react-native';
+import { CurrentUser } from '../../../api/coral-types.js';
+import ipc from '../ipc.js';
+
+export default function FriendCode(props: {
+    friendcode: CurrentUser['links']['friendCode'];
+} | {
+    id: string;
+}) {
+    const friendcode = useMemo(() => 'friendcode' in props ? props.friendcode : {
+        id: props.id,
+        regenerable: false,
+        regenerableAt: 0,
+    }, ['friendcode' in props ? props.friendcode : null, 'id' in props ? props.id : null]);
+
+    const onFriendCodeContextMenu = useCallback(() => {
+        ipc.showFriendCodeMenu(friendcode);
+    }, [ipc, friendcode]);
+
+    return <Text
+        style={styles.friendCodeValue}
+        // @ts-expect-error react-native-web
+        onContextMenu={onFriendCodeContextMenu}
+    >SW-{friendcode.id}</Text>;
+}
+
+const styles = StyleSheet.create({
+    friendCodeValue: {
+        // @ts-expect-error
+        userSelect: 'all',
+    },
+});

src/app/browser/components/icons/add-outline.tsx

@@ -3,7 +3,7 @@ import { Platform, Text } from 'react-native';
 import { svg_styles } from './util.js';
 
 const IconWeb = React.memo(() => <Text>
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style={svg_styles}><title>Add</title><path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="32" d="M256 112v288M400 256H112"/></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style={svg_styles}><path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="32" d="M256 112v288M400 256H112"/></svg>
 </Text>);
 
 export default Platform.OS === 'web' ? IconWeb : React.memo(() => null);

src/app/browser/components/icons/warning.tsx

@@ -3,7 +3,7 @@ import { Platform, Text } from 'react-native';
 import { svg_styles } from './util.js';
 
 const IconWeb = React.memo(() => <Text>
-    <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512" style={svg_styles}><title>ionicons-v5-r</title><path d="M449.07,399.08,278.64,82.58c-12.08-22.44-44.26-22.44-56.35,0L51.87,399.08A32,32,0,0,0,80,446.25H420.89A32,32,0,0,0,449.07,399.08Zm-198.6-1.83a20,20,0,1,1,20-20A20,20,0,0,1,250.47,397.25ZM272.19,196.1l-5.74,122a16,16,0,0,1-32,0l-5.74-121.95v0a21.73,21.73,0,0,1,21.5-22.69h.21a21.74,21.74,0,0,1,21.73,22.7Z"/></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512" style={svg_styles}><path d="M449.07,399.08,278.64,82.58c-12.08-22.44-44.26-22.44-56.35,0L51.87,399.08A32,32,0,0,0,80,446.25H420.89A32,32,0,0,0,449.07,399.08Zm-198.6-1.83a20,20,0,1,1,20-20A20,20,0,0,1,250.47,397.25ZM272.19,196.1l-5.74,122a16,16,0,0,1-32,0l-5.74-121.95v0a21.73,21.73,0,0,1,21.5-22.69h.21a21.74,21.74,0,0,1,21.73,22.7Z"/></svg>
 </Text>);
 
 export default Platform.OS === 'web' ? IconWeb : React.memo(() => null);

src/app/browser/components/index.ts

@@ -1,3 +1,4 @@
 export { default as Button } from './button.js';
 export { default as NintendoSwitchUser } from './nintendo-switch-user.js';
 export { NintendoSwitchUsers } from './nintendo-switch-user.js';
+export { default as FriendCode } from './friend-code.js';

src/app/browser/main/friends.tsx

@@ -1,12 +1,13 @@
 import React, { useCallback } from 'react';
 import { Image, ImageStyle, Platform, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import ipc from '../ipc.js';
 import { useAccentColour, useColourScheme, User, useTimeSince } from '../util.js';
 import { Friend, Presence, PresenceState } from '../../../api/coral-types.js';
 import { TEXT_COLOUR_ACTIVE, TEXT_COLOUR_DARK, TEXT_COLOUR_LIGHT } from '../constants.js';
 import Section, { HEADER_SIZE } from './section.js';
 import AddOutline from '../components/icons/add-outline.js';
+import { FriendCode } from '../components/index.js';
 
 export default function Friends(props: {
     user: User;
@@ -23,7 +24,10 @@ export default function Friends(props: {
     }, [props.user.user.id]);
 
     const header_buttons = <TouchableOpacity onPress={showAddFriendModal} style={styles.iconTouchable}>
-        <Text style={[styles.icon, {color: '#' + accent_colour}]}><AddOutline /></Text>
+        <Text style={[styles.icon, {color: '#' + accent_colour}]} accessibilityLabel={t('add')!}
+            // @ts-expect-error react-native-web
+            title={t('add')!}
+        ><AddOutline /></Text>
     </TouchableOpacity>;
 
     const onFriendCodeContextMenu = useCallback(() => {
@@ -43,11 +47,19 @@ export default function Friends(props: {
             </View>
         </ScrollView> : <View style={styles.noFriends}>
             <Text style={[styles.noFriendsText, theme.text]}>{t('no_friends')}</Text>
-            <Text style={[styles.noFriendsText, styles.noFriendsFriendCodeText, theme.text]}>{t('friend_code')}: {fc}</Text>
+            <Text style={[styles.noFriendsText, styles.noFriendsFriendCodeText, theme.text]}>
+                <Trans i18nKey="main_window:friends_section.friend_code">
+                    <FriendCode friendcode={props.user.nso!.nsoAccount.user.links.friendCode} />
+                </Trans>
+            </Text>
         </View>}
 
         {props.friends.length ? <View style={styles.footer}>
-            <Text style={[styles.friendCode, theme.text]}>{t('friend_code')}: {fc}</Text>
+            <Text style={[styles.friendCode, theme.text]}>
+                <Trans i18nKey="main_window:friends_section.friend_code">
+                    <FriendCode friendcode={props.user.nso!.nsoAccount.user.links.friendCode} />
+                </Trans>
+            </Text>
         </View> : null}
     </Section>;
 }
@@ -124,10 +136,6 @@ const styles = StyleSheet.create({
         fontSize: 12,
         opacity: 0.7,
     },
-    friendCodeValue: {
-        // @ts-expect-error
-        userSelect: 'all',
-    },
     content: {
         paddingBottom: 16,
         paddingLeft: ipc.platform === 'win32' ? 24 : 20,

src/app/i18n/locale/en-gb.ts

@@ -145,9 +145,10 @@ export const main_window = {
 
     friends_section: {
         title: 'Friends',
+        add: 'Add',
 
         no_friends: 'Add friends using a Nintendo Switch console.',
-        friend_code: 'Your friend code',
+        friend_code: 'Your friend code: <0></0>',
 
         presence_playing: 'Playing',
         presence_offline: 'Offline',