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

bun.lock

@@ -72,6 +72,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",
@@ -1563,6 +1564,8 @@
 
     "punycode": ["punycode@2.3.1", "", {}, "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg=="],
 
+    "pwa-install-handler": ["pwa-install-handler@2.6.2", "", {}, "sha512-9hMpqWNxGZx4ZoBe9k9gHkdZC/d/mvMJLA08FCVVMxOhwHBNuQVzb0DwH8ffEaqFvqu7GaotcvYgGNT1yVWduQ=="],
+
     "qrcode.react": ["qrcode.react@4.2.0", "", { "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-QpgqWi8rD9DsS9EP3z7BT+5lY5SFhsqGjpgW5DY/i3mK4M9DTBNz3ErMi8BWYEfI3L0d8GIbGmcdFAS1uIRGjA=="],
 
     "quansync": ["quansync@0.2.10", "", {}, "sha512-t41VRkMYbkHyCYmOvx/6URnN80H7k4X0lLdBMGsz+maAwrJQYB1djpV6vHrQIBE0WBSGqhtEHrK9U3DWWH8v7A=="],
@@ -1599,6 +1602,8 @@
 
     "react-textarea-autosize": ["react-textarea-autosize@8.5.9", "", { "dependencies": { "@babel/runtime": "^7.20.13", "use-composed-ref": "^1.3.0", "use-latest": "^1.2.1" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-U1DGlIQN5AwgjTyOEnI1oCcMuEr1pv1qOtklB2l4nyMGbHzWrI0eFsYK0zos2YWqAolJyG0IWJaqWmWj5ETh0A=="],
 
+    "react-use-pwa-install": ["react-use-pwa-install@1.0.3", "", { "dependencies": { "pwa-install-handler": "^2.6.2" }, "peerDependencies": { "react": "18 || 19" } }, "sha512-poF5teATOCblAchP61+Hx/FIQJtSkjGFcZsJjiyXmG9SfmJWkj8M890lXKlu6QPg/bmG6GE3d+KP3aEO9ehgDw=="],
+
     "readdirp": ["readdirp@4.1.2", "", {}, "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg=="],
 
     "redent": ["redent@3.0.0", "", { "dependencies": { "indent-string": "^4.0.0", "strip-indent": "^3.0.0" } }, "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg=="],

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';