diff --git a/bun.lock b/bun.lock index 620dcd2..225c662 100644 --- a/bun.lock +++ b/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=="], diff --git a/packages/client/package.json b/packages/client/package.json index 69898e7..83c33ce 100644 --- a/packages/client/package.json +++ b/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", diff --git a/packages/client/src/components/InstallButton.tsx b/packages/client/src/components/InstallButton.tsx new file mode 100644 index 0000000..9a1ae26 --- /dev/null +++ b/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(); + + // ; + return ( + } + 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; diff --git a/packages/client/src/components/toolbar/Toolbar.tsx b/packages/client/src/components/toolbar/Toolbar.tsx index 1f7de88..f9b8367 100644 --- a/packages/client/src/components/toolbar/Toolbar.tsx +++ b/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} > + diff --git a/packages/client/src/pages/index/+Page.tsx b/packages/client/src/pages/index/+Page.tsx index 0b9db0a..b2256f2 100644 --- a/packages/client/src/pages/index/+Page.tsx +++ b/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';