Add "Install App" button to the toolbar using react-use-pwa-install library

packages/client/package.json

@@ -56,6 +56,7 @@
     "react-icons": "^5.4.0",
     "react-streaming": "^0.4.2",
     "react-textarea-autosize": "^8.5.5",
+    "react-use-pwa-install": "^1.0.3",
     "shiki": "^1.24.0",
     "tslog": "^4.9.3",
     "typescript": "^5.7.2",

packages/client/src/components/InstallButton.tsx

@@ -0,0 +1,34 @@
+import { IconButton } from '@chakra-ui/react';
+import { HardDriveDownload } from 'lucide-react';
+import React from 'react';
+import { usePWAInstall } from 'react-use-pwa-install';
+
+import { toolbarButtonZIndex } from './toolbar/Toolbar.tsx';
+
+function InstallButton() {
+  const install = usePWAInstall();
+
+  // <button onClick={handleInstall}>Install App</button>;
+  return (
+    <IconButton
+      aria-label="Install App"
+      title="Install App"
+      icon={<HardDriveDownload />}
+      size="md"
+      bg="transparent"
+      stroke="text.accent"
+      color="text.accent"
+      onClick={() => install}
+      _hover={{
+        bg: 'transparent',
+        svg: {
+          stroke: 'accent.secondary',
+          transition: 'stroke 0.3s ease-in-out',
+        },
+      }}
+      zIndex={toolbarButtonZIndex}
+    />
+  );
+}
+
+export default InstallButton;

packages/client/src/components/toolbar/Toolbar.tsx

@@ -2,6 +2,7 @@ import { Flex } from '@chakra-ui/react';
 import React from 'react';
 
 import BuiltWithButton from '../BuiltWithButton';
+import InstallButton from '../InstallButton.tsx';
 
 import GithubButton from './GithubButton';
 import SupportThisSiteButton from './SupportThisSiteButton';
@@ -17,6 +18,7 @@ function ToolBar({ isMobile }) {
       alignItems={isMobile ? 'flex-start' : 'flex-end'}
       pb={4}
     >
+      <InstallButton />
       <SupportThisSiteButton />
       <GithubButton />
       <BuiltWithButton />

packages/client/src/pages/index/+Page.tsx

@@ -1,7 +1,6 @@
 import { Stack } from '@chakra-ui/react';
 import React, { useEffect } from 'react';
 
-import Chat from '../../components/chat/Chat';
 import { LandingComponent } from '../../components/landing-component/LandingComponent.tsx';
 import clientChatStore from '../../stores/ClientChatStore';