Merge pull request #17 from ostyjs/showcase

Showcase
ostyjs · Dec 28, 2024 · 2e23e96 · 2e23e96
2 parents f46149b + 7a2dafe
commit 2e23e96
Show file tree

Hide file tree

Showing 13 changed files with 143 additions and 77 deletions.
diff --git a/templates/react-shadcn/src/features/active-user-widget/index.tsx b/templates/react-shadcn/src/features/active-user-widget/index.tsx
@@ -0,0 +1,43 @@
+import { PowerIcon, UserIcon } from 'lucide-react';
+import { useActiveUser, useLogin, useRealtimeProfile } from 'nostr-hooks';
+import { useNavigate } from 'react-router-dom';
+
+import { Avatar, AvatarFallback, AvatarImage } from '@/shared/components/ui/avatar';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/shared/components/ui/dropdown-menu';
+
+export const ActiveUserWidget = () => {
+  const { activeUser } = useActiveUser();
+  const { profile } = useRealtimeProfile(activeUser?.pubkey);
+  const { logout } = useLogin();
+
+  const navigate = useNavigate();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <Avatar>
+          <AvatarImage src={profile?.image} alt={profile?.name} />
+          <AvatarFallback className="bg-muted" />
+        </Avatar>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent align="end" sideOffset={8}>
+        <DropdownMenuItem onClick={() => navigate(`/profile/${activeUser?.npub}`)}>
+          <UserIcon className="w-4 h-4 mr-2" />
+          Profile
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onClick={logout}>
+          <PowerIcon className="w-4 h-4 mr-2" />
+          Logout
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
diff --git a/templates/react-shadcn/src/features/new-note-widget/index.tsx b/templates/react-shadcn/src/features/new-note-widget/index.tsx
@@ -1,18 +1,27 @@
 import { NDKEvent } from '@nostr-dev-kit/ndk';
+import { CornerDownRightIcon } from 'lucide-react';
 
 import { Avatar, AvatarFallback, AvatarImage } from '@/shared/components/ui/avatar';
 import { Button } from '@/shared/components/ui/button';
 import { Textarea } from '@/shared/components/ui/textarea';
 
+import { cn } from '@/shared/utils';
+
 import { useNewNoteWidget } from './hooks';
 
 export const NewNoteWidget = ({ replyingToEvent }: { replyingToEvent?: NDKEvent | undefined }) => {
   const { content, post, setContent, profile } = useNewNoteWidget({ replyingToEvent });
 
   return (
     <>
-      <div className="p-2 bg-muted flex flex-col gap-2">
+      <div className={cn('p-2 bg-muted flex flex-col gap-2', replyingToEvent && '-mx-2 pl-6')}>
         <div className="flex gap-2">
+          {replyingToEvent && (
+            <div className="pt-2 opacity-50">
+              <CornerDownRightIcon size={18} />
+            </div>
+          )}
+
           <Avatar>
             <AvatarImage src={profile?.image} alt={profile?.name} />
             <AvatarFallback className="bg-muted" />
@@ -26,7 +35,7 @@ export const NewNoteWidget = ({ replyingToEvent }: { replyingToEvent?: NDKEvent
         </div>
 
         <div className="w-full flex gap-2 justify-end">
-          <Button className="px-8" onClick={post}>
+          <Button className="px-8" size="sm" onClick={post}>
             Post
           </Button>
         </div>

diff --git a/templates/react-shadcn/src/features/note-widget/components/note-comment-btn/index.tsx b/templates/react-shadcn/src/features/note-widget/components/note-comment-btn/index.tsx
@@ -6,7 +6,9 @@ export const NoteCommentBtn = ({ onClick }: { onClick: () => void }) => {
   return (
     <>
       <Button variant="link" size="icon" className="opacity-50 hover:opacity-100" onClick={onClick}>
-        <MessageSquareIcon size={18} />
+        <div>
+          <MessageSquareIcon size={18} />
+        </div>
       </Button>
     </>
   );

diff --git a/templates/react-shadcn/src/features/note-widget/components/note-footer/index.tsx b/templates/react-shadcn/src/features/note-widget/components/note-footer/index.tsx
@@ -9,7 +9,7 @@ export const NoteFooter = ({ event }: { event: NDKEvent }) => {
   const [isCommenting, setIsCommenting] = useState(false);
 
   return (
-    <div className="">
+    <>
       <div className="flex items-center justify-between gap-2">
         <NoteCommentBtn onClick={() => setIsCommenting((prev) => !prev)} />
 
@@ -23,6 +23,6 @@ export const NoteFooter = ({ event }: { event: NDKEvent }) => {
       </div>
 
       {isCommenting && <NewNoteWidget replyingToEvent={event} />}
-    </div>
+    </>
   );
 };
diff --git a/templates/react-shadcn/src/features/note-widget/components/note-like-btn/index.tsx b/templates/react-shadcn/src/features/note-widget/components/note-like-btn/index.tsx
@@ -18,7 +18,9 @@ export const NoteLikeBtn = ({ event }: { event: NDKEvent }) => {
         className={cn(isLikedByMe ? 'text-red-600' : 'opacity-50 hover:opacity-100')}
         onClick={like}
       >
-        <HeartIcon size={18} />
+        <div>
+          <HeartIcon size={18} />
+        </div>
 
         <span className="ml-1 text-xs">{count < 1000 ? count : '1K+'}</span>
       </Button>

diff --git a/templates/react-shadcn/src/features/note-widget/components/note-repost-btn/index.tsx b/templates/react-shadcn/src/features/note-widget/components/note-repost-btn/index.tsx
@@ -18,7 +18,9 @@ export const NoteRepostBtn = ({ event }: { event: NDKEvent }) => {
         className={cn(isRepostedByMe ? 'text-green-600' : 'opacity-50 hover:opacity-100')}
         onClick={repost}
       >
-        <Repeat2Icon size={18} />
+        <div>
+          <Repeat2Icon size={18} />
+        </div>
 
         <span className="ml-1 text-xs">{count < 100 ? count : '100+'}</span>
       </Button>

diff --git a/templates/react-shadcn/src/features/note-widget/components/note-zap-btn/index.tsx b/templates/react-shadcn/src/features/note-widget/components/note-zap-btn/index.tsx
@@ -20,7 +20,9 @@ export const NoteZapBtn = ({ event }: { event: NDKEvent }) => {
           size="icon"
           className={cn(isZapedByMe ? 'text-orange-600' : 'opacity-50 hover:opacity-100')}
         >
-          <ZapIcon size={18} />
+          <div>
+            <ZapIcon size={18} />
+          </div>
 
           <span className="ml-1 text-xs">{totalAmount < 1000 ? totalAmount : '1K+'}</span>
         </Button>

diff --git a/templates/react-shadcn/src/features/note-widget/index.tsx b/templates/react-shadcn/src/features/note-widget/index.tsx
@@ -12,13 +12,13 @@ export const NoteByEvent = ({ event }: { event: NDKEvent | null | undefined }) =
   }
 
   if (event === null) {
-    return <div>Note not found</div>;
+    return <div className="px-2 border-b">Note not found</div>;
   }
 
   if (event) {
     return (
       <>
-        <div className="border-b">
+        <div className="px-2 border-b">
           <NoteHeader event={event} />
           <NoteContent event={event} />
           <NoteFooter event={event} />

diff --git a/templates/react-shadcn/src/features/notes-feed-widget/hooks/index.ts b/templates/react-shadcn/src/features/notes-feed-widget/hooks/index.ts
@@ -39,7 +39,7 @@ export const useNotesFeedWidget = () => {
 
     createSubscription({
       filters: [
-        { kinds: [1], limit: 50, authors: [activeUser.pubkey, ...follows.map((u) => u.pubkey)] },
+        { kinds: [1], limit: 20, authors: [activeUser.pubkey, ...follows.map((u) => u.pubkey)] },
       ],
     });
   }, [createSubscription, follows, activeUser]);

diff --git a/templates/react-shadcn/src/features/notes-feed-widget/index.tsx b/templates/react-shadcn/src/features/notes-feed-widget/index.tsx
@@ -22,7 +22,7 @@ export const NotesFeedWidget = () => {
         <NewNoteWidget />
       </div>
 
-      <div className="py-2 border-b">
+      <div className="p-2 border-b">
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button variant="outline" size="sm">
@@ -46,7 +46,7 @@ export const NotesFeedWidget = () => {
           ))}
         </div>
       ) : (
-        <div className="pt-2">
+        <div className="pt-2 px-2">
           <p>No events found. Follow some users to see their notes here.</p>
         </div>
       )}

diff --git a/.../react-shadcn/src/features/user-profile-widget/components/profile-view-switcher/index.tsx b/.../react-shadcn/src/features/user-profile-widget/components/profile-view-switcher/index.tsx
@@ -14,14 +14,6 @@ export const ProfileViewSwitcher = ({
   return (
     <>
       <div className="flex items-center justify-between gap-2 border-y px-1">
-        <Button
-          onClick={() => setView('housing')}
-          size="sm"
-          variant="link"
-          className={cn(view == 'housing' ? 'underline underline-offset-8' : 'hover:no-underline')}
-        >
-          Housing
-        </Button>
         <Button
           onClick={() => setView('notes')}
           size="sm"

diff --git a/templates/react-shadcn/src/pages/home/index.tsx b/templates/react-shadcn/src/pages/home/index.tsx
@@ -1,64 +1,20 @@
-import { GitHubLogoIcon } from '@radix-ui/react-icons';
-import { useActiveUser, useNdk } from 'nostr-hooks';
+import { useActiveUser } from 'nostr-hooks';
 
-import { ModeToggle } from '@/shared/components/mode-toggle';
-import { Button } from '@/shared/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '@/shared/components/ui/card';
-import { Separator } from '@/shared/components/ui/separator';
-
-import { LoginWidget } from '@/features/login-widget';
-import { LogoutWidget } from '@/features/logout-widget';
-import { ZapWidget } from '@/features/zap-widget';
+import { NotesFeedWidget } from '@/features/notes-feed-widget';
 
 export const HomePage = () => {
-  const { ndk } = useNdk();
   const { activeUser } = useActiveUser();
 
-  const zapTarget = ndk?.getUser({
-    pubkey: '3e294d2fd339bb16a5403a86e3664947dd408c4d87a0066524f8a573ae53ca8e', // Sep
-  });
-
   return (
     <>
-      <div className="flex flex-col items-center justify-center w-full h-full">
-        <Card>
-          <CardHeader>
-            <CardTitle>Osty</CardTitle>
-            <CardDescription>Start building on Nostr in seconds with Osty</CardDescription>
-          </CardHeader>
-
-          <Separator />
-
-          <CardContent className="mt-6 flex gap-4">
-            {zapTarget && <ZapWidget target={zapTarget} />}
-
-            {activeUser ? <LogoutWidget /> : <LoginWidget />}
-          </CardContent>
-
-          <Separator />
-
-          <CardFooter className="mt-6 flex items-center gap-2">
-            <p className="text-xs text-gray-500">
-              Made with <span className="text-red-500">💜</span> by Sepehr
-            </p>
-
-            <Button variant="outline" size="icon" asChild className="ml-auto">
-              <a href="https://github.com/ostyjs/create-osty" target="_blank" rel="noreferrer">
-                <GitHubLogoIcon />
-              </a>
-            </Button>
-
-            <ModeToggle />
-          </CardFooter>
-        </Card>
-      </div>
+      {activeUser ? (
+        <NotesFeedWidget />
+      ) : (
+        <div className="flex flex-col h-full w-full items-center justify-center">
+          <h3>Welcome to Osty!</h3>
+          <p>Log-in to view and create notes</p>
+        </div>
+      )}
     </>
   );
 };
diff --git a/templates/react-shadcn/src/pages/index.tsx b/templates/react-shadcn/src/pages/index.tsx
@@ -1,9 +1,67 @@
-import { Outlet, createBrowserRouter } from 'react-router-dom';
+import { GitHubLogoIcon } from '@radix-ui/react-icons';
+import { useActiveUser, useNdk } from 'nostr-hooks';
+import { Link, Outlet, createBrowserRouter } from 'react-router-dom';
+
+import { ModeToggle } from '@/shared/components/mode-toggle';
+import { Button } from '@/shared/components/ui/button';
+
+import { ActiveUserWidget } from '@/features/active-user-widget';
+import { LoginWidget } from '@/features/login-widget';
+import { ZapWidget } from '@/features/zap-widget';
 
 const Layout = () => {
+  const { ndk } = useNdk();
+  const { activeUser } = useActiveUser();
+
+  const sepehr = ndk?.getUser({
+    pubkey: '3e294d2fd339bb16a5403a86e3664947dd408c4d87a0066524f8a573ae53ca8e',
+  });
+
   return (
     <>
-      <Outlet />
+      <div className="flex flex-col justify-between h-full w-full max-w-screen-md mx-auto">
+        <div className="flex justify-between items-center border-b p-2">
+          <div>
+            <h2>Osty</h2>
+            <p>Start building on Nostr in seconds with Osty</p>
+          </div>
+
+          <div>{activeUser ? <ActiveUserWidget /> : <LoginWidget />}</div>
+        </div>
+
+        <div className="border-b h-full w-full overflow-y-auto">
+          <Outlet />
+        </div>
+
+        <div className="p-2 flex items-center justify-between">
+          <div className="text-xs flex items-center gap-1">
+            <span>Made with</span>
+            <span className="text-red-500">💜</span>
+            <span>by</span>
+            <Link to={`/profile/${sepehr?.npub}`} className="hover:underline">
+              Sepehr
+            </Link>
+          </div>
+
+          <div className="flex items-center gap-2">
+            {sepehr && (
+              <ZapWidget target={sepehr}>
+                <Button variant="secondary" size="sm">
+                  Buy me a coffee ☕️
+                </Button>
+              </ZapWidget>
+            )}
+
+            <Button variant="outline" size="icon" asChild className="ml-auto">
+              <a href="https://github.com/ostyjs/create-osty" target="_blank" rel="noreferrer">
+                <GitHubLogoIcon />
+              </a>
+            </Button>
+
+            <ModeToggle />
+          </div>
+        </div>
+      </div>
     </>
   );
 };