Add tooltips to hover buttons

Add placeholder for about page

Fixes #56
Partial #27

Author: chrisglein

src/AiResponse.tsx

@@ -31,7 +31,11 @@ function AiImageResponse({imageUrl, prompt, rejectImage}: AiImageResponseProps):
   return (
     <View style={[styles.horizontalContainer, {flexWrap: 'nowrap', alignItems: 'flex-start'}]}>
       <Pressable
-        onPress={() => Linking.openURL(imageUrl)}>
+        onPress={() => {
+          if (imageUrl) {
+            Linking.openURL(imageUrl);
+          }
+        }}>
         <Image
           source={{uri: imageUrl}}
           alt={prompt}
@@ -133,9 +137,9 @@ function AiSection({children, isLoading, contentShownOnHover}: AiSectionProps):
       <View style={{flexDirection: 'row'}}>
         <Text style={[styles.sectionTitle, {flexGrow: 1}]}>AI</Text>
         {hovering && contentShownOnHover}
-        {hovering && <HoverButton content="📋" onPress={() => console.log("Copy: Not yet implemented")}/>}
-        <HoverButton content="👍" onPress={() => { showFeedbackPopup(true); }}/>
-        <HoverButton content="👎" onPress={() => { showFeedbackPopup(false); }}/>
+        {hovering && <HoverButton content="📋" tooltip="Copy to clipboard" onPress={() => console.log("Copy: Not yet implemented")}/>}
+        <HoverButton content="👍" tooltip="Give positive feedback" onPress={() => { showFeedbackPopup(true); }}/>
+        <HoverButton content="👎" tooltip="Give negative feedback" onPress={() => { showFeedbackPopup(false); }}/>
       </View>
       {isLoading && 
         <ActivityIndicator/>

src/Chat.tsx

@@ -173,7 +173,10 @@ function Chat({entries, humanText, onPrompt, clearConversation}: ChatProps): JSX
               disableEdit={true}
               disableCopy={true}
               contentShownOnHover={
-                <HoverButton content="⚙️" onPress={() => setShowSettingsPopup(true)}/>
+                <>
+                  <HoverButton content="❔" tooltip="About" onPress={() => console.log("About dialog: Not yet implemented")}/>
+                  <HoverButton content="⚙️" tooltip="Settings" onPress={() => setShowSettingsPopup(true)}/>
+                </>
               }>
               <ChatEntry
                 defaultText={humanText}

src/Controls.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import {
   Button,
   Image,
+  ImageSourcePropType,
   Linking,
   Pressable,
   Text,
@@ -13,22 +14,24 @@ import { CodeBlock } from './CodeBlock';
 
 type HoverButtonProps = {
   content: string;
+  tooltip: string,
   onPress: () => void;
 };
-function HoverButton({content, onPress}: HoverButtonProps): JSX.Element {
+function HoverButton({content, tooltip, onPress}: HoverButtonProps): JSX.Element {
   const [hovering, setHovering] = React.useState(false);
 
   const backgroundBaseStyle = {padding: 2, borderRadius: 8, borderWidth: 1, borderColor: 'transparent'};
   const backgroundPressedStyle = {borderColor: 'white', backgroundColor: 'black'};
   const backgroundHoverStyle = {borderColor: 'white', backgroundColor: 'gray'};
   return (
     <Pressable
+      tooltip={tooltip}
       onPress={onPress}
       onHoverIn={() => setHovering(true)}
       onHoverOut={() => setHovering(false)}>
       {({pressed}) => (
         <View style={[backgroundBaseStyle, pressed ? backgroundPressedStyle : hovering ? backgroundHoverStyle : null]}>
-          <Text >{content}</Text>
+          <Text>{content}</Text>
         </View>        
       )}
     </Pressable>

src/HumanQuery.tsx

@@ -14,7 +14,7 @@ type HumanSectionProps = PropsWithChildren<{
   content?: string;
   disableEdit?: boolean;
   disableCopy?: boolean;
-  contentShownOnHover?: JSX.Element;
+  contentShownOnHover?: React.ReactNode;
 }>;
 function HumanSection({children, content, disableEdit, disableCopy, contentShownOnHover}: HumanSectionProps): JSX.Element {
   const [hovering, setHovering] = React.useState(false);
@@ -27,8 +27,8 @@ function HumanSection({children, content, disableEdit, disableCopy, contentShown
       onHoverOut={() => setHovering(false)}>
       <View style={{flexDirection: 'row', minHeight: 26}}>
         <Text style={[styles.sectionTitle, {flexGrow: 1}]}>HUMAN</Text>
-        {hovering && !disableCopy && <HoverButton content="📋" onPress={() => Clipboard.setString(content ?? "")}/>}
-        {hovering && !disableEdit && <HoverButton content="📝" onPress={() => {console.log("Edit: Not yet implemented")}}/>}
+        {hovering && !disableCopy && <HoverButton content="📋" tooltip="Copy to clipboard" onPress={() => Clipboard.setString(content ?? "")}/>}
+        {hovering && !disableEdit && <HoverButton content="📝" tooltip="Edit" onPress={() => {console.log("Edit: Not yet implemented")}}/>}
         {hovering && contentShownOnHover}
       </View>
       {content ? <Text>{content}</Text> : null}