From d54ba360cf2fc10ca085af12137006e4555f70d8 Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuel@fancy.org.uk>
Date: Thu, 16 Jun 2022 16:26:15 +0100
Subject: [PATCH] Add Nintendo eShop link to friend modal

---
 src/app/browser/components/button.tsx |  2 ++
 src/app/browser/friend/index.tsx      | 17 +++++++++++++++--
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/app/browser/components/button.tsx b/src/app/browser/components/button.tsx
index 66c8142..eff6c7d 100644
--- a/src/app/browser/components/button.tsx
+++ b/src/app/browser/components/button.tsx
@@ -86,6 +86,7 @@ const styles_mac = StyleSheet.create({
     text: {
         fontSize: 13,
         color: '#eaeaea',
+        textAlign: 'center',
     },
     textLight: {
         color: '#0a0a0a',
@@ -159,6 +160,7 @@ const styles_windows = StyleSheet.create({
 
     text: {
         color: '#eaeaea',
+        textAlign: 'center',
     },
     textLight: {
         color: TEXT_COLOUR_LIGHT,
diff --git a/src/app/browser/friend/index.tsx b/src/app/browser/friend/index.tsx
index 4a8a1f1..c1f93f8 100644
--- a/src/app/browser/friend/index.tsx
+++ b/src/app/browser/friend/index.tsx
@@ -8,7 +8,7 @@ import { getTitleIdFromEcUrl, hrduration } from '../../../util/misc.js';
 import { Button } from '../components/index.js';
 import { DEFAULT_ACCENT_COLOUR, TEXT_COLOUR_ACTIVE, TEXT_COLOUR_DARK, TEXT_COLOUR_LIGHT } from '../constants.js';
 import ipc, { events } from '../ipc.js';
-import { RequestState, Root, useAsync, useColourScheme, useDiscordPresenceSource, useEventListener } from '../util.js';
+import { RequestState, Root, useAccentColour, useAsync, useColourScheme, useDiscordPresenceSource, useEventListener } from '../util.js';
 
 export interface FriendProps {
     user: string;
@@ -136,6 +136,11 @@ function FriendPresenceGame(props: {
     game: Game;
 }) {
     const theme = useColourScheme() === 'light' ? light : dark;
+    const accent_colour = useAccentColour();
+
+    const openShop = useCallback(() => {
+        ipc.openExternalUrl(props.game.shopUri);
+    }, [ipc, props.game.shopUri]);
 
     const titleid = getTitleIdFromEcUrl(props.game.shopUri);
     const first_played = props.game.firstPlayedAt ? new Date(props.game.firstPlayedAt * 1000) : null;
@@ -149,6 +154,10 @@ function FriendPresenceGame(props: {
             <Text style={[styles.gameTotalPlayTime, theme.text]}>Played for {hrduration(props.game.totalPlayTime)}</Text>
             <Text style={[styles.gameFirstPlayed, theme.text]}>First played {first_played?.toLocaleString('en-GB') ?? 'now'}</Text>
             {titleid ? <Text style={[styles.gameTitleId, theme.text]}>Title ID: <Text style={styles.gameTitleIdValue}>{titleid}</Text></Text> : null}
+
+            <View style={styles.gameShopButton}>
+                <Button title="Nintendo eShop" onPress={openShop} color={'#' + accent_colour} />
+            </View>
         </View>
     </View>;
 }
@@ -252,7 +261,7 @@ const styles = StyleSheet.create({
     },
 
     game: {
-        marginBottom: 20,
+        marginBottom: 15,
         flexDirection: 'row',
     },
     gameIcon: {
@@ -287,6 +296,10 @@ const styles = StyleSheet.create({
         fontFamily: 'monospace',
         userSelect: 'all',
     },
+    gameShopButton: {
+        marginTop: 10,
+        flexDirection: 'row',
+    },
 });
 
 const light = StyleSheet.create({