Merge branch 'next'

.changeset/curvy-bears-smell.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": patch
+---
+
+Fix storage and clipboard use on http connection

README.md

@@ -1,3 +1,7 @@
+<p align="center">
+  <img src="screenshots/icon.svg" alt="Project Logo" width="21%">
+</p>
+
 # noStrudel
 
 > NOTE: This client is still in development and will have bugs

dockerfile

@@ -1,11 +1,13 @@
 # syntax=docker/dockerfile:1
-FROM node:20
+FROM node:20 as builder
+
 WORKDIR /app
 COPY . /app/
+
 ENV VITE_COMMIT_HASH=""
 ENV VITE_APP_VERSION="custom"
 RUN yarn install && yarn build
 
 FROM nginx:stable-alpine-slim
 EXPOSE 80
-COPY --from=0 /app/dist /usr/share/nginx/html
+COPY --from=builder /app/dist /usr/share/nginx/html

src/components/common-menu-items/copy-embed-code.tsx

@@ -10,7 +10,7 @@ export default function CopyEmbedCodeMenuItem({ event }: { event: NostrEvent })
   return (
     address && (
       <MenuItem onClick={() => window.navigator.clipboard.writeText("nostr:" + address)} icon={<CopyToClipboardIcon />}>
-        Copy Embed Code
+        Copy embed code
       </MenuItem>
     )
   );

src/components/common-menu-items/copy-share-link.tsx

@@ -1,19 +1,24 @@
-import { MenuItem } from "@chakra-ui/react";
+import { MenuItem, useToast } from "@chakra-ui/react";
 
 import { NostrEvent } from "../../types/nostr-event";
 import { getSharableEventAddress } from "../../helpers/nip19";
 import { ShareIcon } from "../icons";
 
 export default function CopyShareLinkMenuItem({ event }: { event: NostrEvent }) {
+  const toast = useToast();
   const address = getSharableEventAddress(event);
 
   return (
     address && (
       <MenuItem
-        onClick={() => window.navigator.clipboard.writeText("https://njump.me/" + address)}
+        onClick={() => {
+          const text = "https://njump.me/" + address;
+          if (navigator.clipboard) navigator.clipboard.writeText(text);
+          else toast({ description: text, isClosable: true, duration: null });
+        }}
         icon={<ShareIcon />}
       >
-        Copy Share Link
+        Copy share link
       </MenuItem>
     )
   );

src/components/copy-icon-button.tsx

@@ -1,9 +1,10 @@
 import { useState } from "react";
-import { IconButton, IconButtonProps } from "@chakra-ui/react";
+import { IconButton, IconButtonProps, useToast } from "@chakra-ui/react";
 
 import { CheckIcon, CopyToClipboardIcon } from "./icons";
 
 export const CopyIconButton = ({ text, ...props }: { text?: string } & Omit<IconButtonProps, "icon">) => {
+  const toast = useToast();
   const [copied, setCopied] = useState(false);
 
   return (
@@ -14,7 +15,7 @@ export const CopyIconButton = ({ text, ...props }: { text?: string } & Omit<Icon
           navigator.clipboard.writeText(text);
           setCopied(true);
           setTimeout(() => setCopied(false), 2000);
-        }
+        } else toast({ description: text, isClosable: true, duration: null });
       }}
       {...props}
     />

src/components/layout/account-switcher.tsx

@@ -24,8 +24,10 @@ function AccountItem({ account, onClick }: { account: Account; onClick?: () => v
     <Box display="flex" gap="2" alignItems="center" cursor="pointer">
       <Flex as="button" onClick={handleClick} flex={1} gap="2" overflow="hidden" alignItems="center">
         <UserAvatar pubkey={pubkey} size="md" />
-        <Text isTruncated>{getUserDisplayName(metadata, pubkey)}</Text>
-        <AccountInfoBadge fontSize="0.7em" account={account} />
+        <Flex direction="column" overflow="hidden" alignItems="flex-start">
+          <Text isTruncated>{getUserDisplayName(metadata, pubkey)}</Text>
+          <AccountInfoBadge fontSize="0.7em" account={account} />
+        </Flex>
       </Flex>
       <IconButton
         icon={<CloseIcon />}

src/components/version-button.tsx

@@ -1,8 +1,9 @@
-import { Button, ButtonProps } from "@chakra-ui/react";
+import { Button, ButtonProps, useToast } from "@chakra-ui/react";
 import { CheckIcon, CopyToClipboardIcon } from "./icons";
 import { useState } from "react";
 
 export default function VersionButton({ ...props }: Omit<ButtonProps, "children">) {
+  const toast = useToast();
   const [copied, setCopied] = useState(false);
   const version = [import.meta.env.VITE_APP_VERSION, import.meta.env.VITE_COMMIT_HASH].filter(Boolean).join("-");
 
@@ -18,7 +19,7 @@ export default function VersionButton({ ...props }: Omit<ButtonProps, "children"
           navigator.clipboard.writeText(version);
           setCopied(true);
           setTimeout(() => setCopied(false), 2000);
-        }
+        } else toast({ description: version, isClosable: true, duration: null });
       }}
       {...props}
     >

src/services/amber-signer.ts

@@ -34,7 +34,7 @@ function rejectPending() {
 
 function onVisibilityChange() {
   if (document.visibilityState === "visible") {
-    if (!pendingRequest) return;
+    if (!pendingRequest || !navigator.clipboard) return;
 
     // read the result from the clipboard
     setTimeout(() => {
@@ -92,7 +92,7 @@ async function nip04Decrypt(pubkey: string, data: string): Promise<string> {
 }
 
 const amberSignerService = {
-  supported: navigator.userAgent.includes("Android"),
+  supported: navigator.userAgent.includes("Android") && navigator.clipboard,
   getPublicKey,
   signEvent,
   nip04Encrypt,

src/views/community/components/community-post-menu.tsx

@@ -1,4 +1,4 @@
-import { MenuItem, useDisclosure } from "@chakra-ui/react";
+import { MenuItem, useDisclosure, useToast } from "@chakra-ui/react";
 import { nip19 } from "nostr-tools";
 
 import { CustomMenuIconButton, MenuIconButtonProps } from "../../../components/menu-icon-button";
@@ -14,6 +14,7 @@ export default function CommunityPostMenu({
   approvals,
   ...props
 }: Omit<MenuIconButtonProps, "children"> & { event: NostrEvent; approvals: NostrEvent[] }) {
+  const toast = useToast();
   const debugModal = useDisclosure();
 
   return (
@@ -22,7 +23,11 @@ export default function CommunityPostMenu({
         <OpenInAppMenuItem event={event} />
         <CopyShareLinkMenuItem event={event} />
         <MenuItem
-          onClick={() => window.navigator.clipboard.writeText(nip19.noteEncode(event.id))}
+          onClick={() => {
+            const text = nip19.noteEncode(event.id);
+            if (navigator.clipboard) navigator.clipboard.writeText(text);
+            else toast({ description: text, isClosable: true, duration: null });
+          }}
           icon={<CopyToClipboardIcon />}
         >
           Copy Note ID

src/views/search/index.tsx

@@ -98,7 +98,7 @@ export function SearchPage() {
         <Flex gap="2" wrap="wrap">
           <Flex gap="2" grow={1}>
             <IconButton onClick={qrScannerModal.onOpen} icon={<QrCodeIcon />} aria-label="Qr Scanner" />
-            {!!navigator.clipboard.readText && (
+            {!!navigator.clipboard?.readText && (
               <IconButton onClick={readClipboard} icon={<CopyToClipboardIcon />} aria-label="Read clipboard" />
             )}
             <Input type="search" value={searchInput} onChange={(e) => setSearchInput(e.target.value)} />

src/views/settings/database-settings.tsx

@@ -25,7 +25,7 @@ function niceBytes(x: number) {
 }
 
 function DatabaseStats() {
-  const { value: estimatedStorage } = useAsync(() => window.navigator?.storage?.estimate?.(), []);
+  const { value: estimatedStorage } = useAsync(async () => await window.navigator?.storage?.estimate?.(), []);
 
   const { value: replaceableEventCount } = useAsync(async () => {
     const keys = await db.getAllKeys("replaceableEvents");

src/views/user/components/user-profile-menu.tsx

@@ -1,7 +1,6 @@
-import { MenuItem, useDisclosure } from "@chakra-ui/react";
+import { MenuItem, useDisclosure, useToast } from "@chakra-ui/react";
 import { Link as RouterLink } from "react-router-dom";
 import { nip19 } from "nostr-tools";
-import { useCopyToClipboard } from "react-use";
 
 import { CustomMenuIconButton, MenuIconButtonProps } from "../../../components/menu-icon-button";
 import {
@@ -13,6 +12,7 @@ import {
   RelayIcon,
   SpyIcon,
   UnmuteIcon,
+  ShareIcon,
 } from "../../../components/icons";
 import accountService from "../../../services/account";
 import { useUserMetadata } from "../../../hooks/use-user-metadata";
@@ -31,20 +31,19 @@ export const UserProfileMenu = ({
   showRelaySelectionModal,
   ...props
 }: { pubkey: string; showRelaySelectionModal?: () => void } & Omit<MenuIconButtonProps, "children">) => {
+  const toast = useToast();
   const account = useCurrentAccount();
   const metadata = useUserMetadata(pubkey);
   const userRelays = useUserRelays(pubkey);
   const infoModal = useDisclosure();
   const sharableId = useSharableProfileId(pubkey);
   const { isMuted, mute, unmute } = useUserMuteFunctions(pubkey);
 
-  const [_clipboardState, copyToClipboard] = useCopyToClipboard();
-
   const loginAsUser = () => {
     const readRelays = userRelays.filter((r) => r.mode === RelayMode.READ).map((r) => r.url) ?? [];
     if (!accountService.hasAccount(pubkey)) {
       accountService.addAccount({
-        type: 'pubkey',
+        type: "pubkey",
         pubkey,
         relays: readRelays,
         readonly: true,
@@ -70,9 +69,26 @@ export const UserProfileMenu = ({
         <MenuItem icon={<SpyIcon fontSize="1.5em" />} onClick={() => loginAsUser()}>
           Login as {truncatedId(getUserDisplayName(metadata, pubkey))}
         </MenuItem>
-        <MenuItem onClick={() => copyToClipboard("nostr:" + sharableId)} icon={<CopyToClipboardIcon />}>
+        <MenuItem
+          onClick={() => {
+            const text = "https://njump.me/" + sharableId;
+            if (navigator.clipboard) navigator.clipboard?.writeText(text);
+            else toast({ description: text, isClosable: true, duration: null });
+          }}
+          icon={<ShareIcon />}
+        >
           Copy share link
         </MenuItem>
+        <MenuItem
+          onClick={() => {
+            const text = "nostr:" + sharableId;
+            if (navigator.clipboard) navigator.clipboard?.writeText(text);
+            else toast({ description: text, isClosable: true, duration: null });
+          }}
+          icon={<CopyToClipboardIcon />}
+        >
+          Copy Embed Code
+        </MenuItem>
         <MenuItem onClick={infoModal.onOpen} icon={<CodeIcon />}>
           View Raw
         </MenuItem>