feat: about info

src/renderer/src/components/AboutInfoDialog/index.tsx

@@ -0,0 +1,57 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from '@renderer/components/ui/dialog'
+import Username from '../Username'
+
+export default function AboutInfoDialog({ children }: { children: React.ReactNode }) {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Jumble</DialogTitle>
+          <DialogDescription>yet another nostr client</DialogDescription>
+        </DialogHeader>
+        <div>
+          Made by{' '}
+          <Username
+            userId={'npub1syjmjy0dp62dhccq3g97fr87tngvpvzey08llyt6ul58m2zqpzps9wf6wl'}
+            className="inline-block text-primary"
+            showAt
+          />
+        </div>
+        <div>
+          Source code:{' '}
+          <a
+            href="https://github.com/CodyTseng/jumble"
+            target="_blank"
+            rel="noreferrer"
+            className="text-primary hover:underline"
+          >
+            GitHub
+          </a>
+        </div>
+        <div>
+          Desktop app:{' '}
+          <a
+            href="https://github.com/CodyTseng/jumble/releases"
+            target="_blank"
+            rel="noreferrer"
+            className="text-primary hover:underline"
+          >
+            Download
+          </a>
+        </div>
+        <div>
+          If you like this project, you can buy me a coffee ☕️ <br />
+          <div className="font-semibold">⚡️ codytseng@getalby.com ⚡️</div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

src/renderer/src/components/Sidebar/index.tsx

@@ -1,5 +1,9 @@
+import { Button } from '@renderer/components/ui/button'
+import { IS_ELECTRON } from '@renderer/lib/env'
 import { toHome } from '@renderer/lib/link'
 import { SecondaryPageLink } from '@renderer/PageManager'
+import { Info } from 'lucide-react'
+import AboutInfoDialog from '../AboutInfoDialog'
 import AccountButton from '../AccountButton'
 import PostButton from '../PostButton'
 import RefreshButton from '../RefreshButton'
@@ -15,6 +19,14 @@ export default function PrimaryPageSidebar() {
         <PostButton variant="sidebar" />
         <RelaySettingsPopover variant="sidebar" />
         <RefreshButton variant="sidebar" />
+        {!IS_ELECTRON && (
+          <AboutInfoDialog>
+            <Button variant="sidebar" size="sidebar">
+              <Info />
+              About
+            </Button>
+          </AboutInfoDialog>
+        )}
       </div>
       <AccountButton variant="sidebar" />
     </div>

src/renderer/src/components/Username/index.tsx

@@ -36,7 +36,7 @@ export default function Username({
           </SecondaryPageLink>
         </div>
       </HoverCardTrigger>
-      <HoverCardContent className="w-72">
+      <HoverCardContent className="w-80">
         <ProfileCard pubkey={pubkey} />
       </HoverCardContent>
     </HoverCard>