Merge pull request #26 from ostyjs/desktop-view

Desktop view
ostyjs · Jan 6, 2025 · ddbce23 · ddbce23
2 parents ead596e + 3da13f6
commit ddbce23
Show file tree

Hide file tree

Showing 5 changed files with 224 additions and 39 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-osty",
-  "version": "0.6.6",
+  "version": "0.6.8",
   "type": "module",
   "license": "MIT",
   "author": "Sepehr Safari",

diff --git a/templates/nostribe/index.html b/templates/nostribe/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" class="h-full">
+<html lang="en" class="h-full overflow-hidden">
   <head>
     <!-- Title -->
     <title>Nostribe</title>

diff --git a/templates/nostribe/src/features/active-user-widget/index.tsx b/templates/nostribe/src/features/active-user-widget/index.tsx
@@ -11,24 +11,39 @@ import {
   DropdownMenuTrigger,
 } from '@/shared/components/ui/dropdown-menu';
 
+import { ellipsis } from '@/shared/utils';
+
 export const ActiveUserWidget = () => {
   const { activeUser } = useActiveUser();
   const { profile } = useRealtimeProfile(activeUser?.pubkey);
   const { logout } = useLogin();
 
   const navigate = useNavigate();
 
+  if (!activeUser) {
+    return null;
+  }
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger>
-        <Avatar>
-          <AvatarImage src={profile?.image} alt={profile?.name} />
-          <AvatarFallback className="bg-muted" />
-        </Avatar>
+        <div className="flex items-center gap-2 cursor-pointer bg-secondary rounded-full px-2 py-1">
+          <Avatar>
+            <AvatarImage src={profile?.image} alt={profile?.name} />
+            <AvatarFallback className="bg-background/50" />
+          </Avatar>
+
+          <div className="text-start pr-2 hidden lg:block">
+            {profile?.name && <div className="text-sm">{profile.name}</div>}
+            <div className="text-xs text-primary/70">
+              {profile?.nip05 || ellipsis(activeUser.npub, 10)}
+            </div>
+          </div>
+        </div>
       </DropdownMenuTrigger>
 
       <DropdownMenuContent align="end" sideOffset={8}>
-        <DropdownMenuItem onClick={() => navigate(`/profile/${activeUser?.npub}`)}>
+        <DropdownMenuItem onClick={() => navigate(`/profile/${activeUser.npub}`)}>
           <UserIcon className="w-4 h-4 mr-2" />
           Profile
         </DropdownMenuItem>

diff --git a/templates/nostribe/src/features/login-widget/index.tsx b/templates/nostribe/src/features/login-widget/index.tsx
@@ -36,7 +36,7 @@ export const LoginWidget = () => {
     <>
       <Dialog open={isModalOpen} onOpenChange={(open) => setIsModalOpen(open)}>
         <DialogTrigger asChild>
-          <Button>Login</Button>
+          <Button className="w-full">Login</Button>
         </DialogTrigger>
 
         <DialogContent className="sm:max-w-[425px]">

diff --git a/templates/nostribe/src/pages/index.tsx b/templates/nostribe/src/pages/index.tsx
@@ -1,9 +1,28 @@
 import { GitHubLogoIcon } from '@radix-ui/react-icons';
+import {
+  ArrowRightIcon,
+  BellIcon,
+  BookmarkIcon,
+  CoffeeIcon,
+  CompassIcon,
+  HomeIcon,
+  MailIcon,
+  MenuIcon,
+  MoonIcon,
+  SunIcon,
+} from 'lucide-react';
 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 {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/shared/components/ui/dropdown-menu';
+
+import { useTheme } from '@/shared/components/theme-provider';
 
 import { ActiveUserWidget } from '@/features/active-user-widget';
 import { LoginWidget } from '@/features/login-widget';
@@ -13,49 +32,200 @@ const Layout = () => {
   const { ndk } = useNdk();
   const { activeUser } = useActiveUser();
 
+  const { setTheme, theme } = useTheme();
+
   const sepehr = ndk?.getUser({
     pubkey: '3e294d2fd339bb16a5403a86e3664947dd408c4d87a0066524f8a573ae53ca8e',
   });
 
   return (
     <>
-      <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">
-          <Link to="/">
-            <h2>Nostribe</h2>
+      <div className="flex h-full w-full max-w-screen-lg mx-auto overflow-hidden">
+        <div
+          id="sidebar"
+          className="hidden flex-col gap-2 overflow-hidden items-center p-2 border-r w-16 md:flex lg:w-48"
+        >
+          <Link to="/" className="flex items-center gap-2 p-2 w-full">
+            <div className="w-8 h-8">
+              <img src="/nostribe-64.png" alt="Nostribe" className="w-8 h-8 object-contain" />
+            </div>
+
+            <span className="text-lg font-bold hidden lg:block">Nostribe</span>
           </Link>
 
-          <div>{activeUser ? <ActiveUserWidget /> : <LoginWidget />}</div>
-        </div>
+          <div className="flex flex-col gap-2 w-full items-center lg:items-start">
+            <Link to="/" className="flex items-center gap-2 p-2 rounded-lg w-full hover:bg-muted">
+              <div>
+                <HomeIcon size={24} />
+              </div>
+
+              <span className="hidden lg:block">Home</span>
+            </Link>
+
+            <Link to="/" className="flex items-center gap-2 p-2 rounded-lg w-full hover:bg-muted">
+              <div>
+                <CompassIcon size={24} />
+              </div>
+
+              <span className="hidden lg:block">Explore</span>
+            </Link>
+
+            <Link to="/" className="flex items-center gap-2 p-2 rounded-lg w-full hover:bg-muted">
+              <div>
+                <MailIcon size={24} />
+              </div>
+
+              <span className="hidden lg:block">Messages</span>
+            </Link>
+
+            <Link to="/" className="flex items-center gap-2 p-2 rounded-lg w-full hover:bg-muted">
+              <div>
+                <BookmarkIcon size={24} />
+              </div>
+
+              <span className="hidden lg:block">Bookmarks</span>
+            </Link>
+
+            <Link to="/" className="flex items-center gap-2 p-2 rounded-lg w-full hover:bg-muted">
+              <div>
+                <BellIcon size={24} />
+              </div>
+
+              <span className="hidden lg:block">Notifications</span>
+            </Link>
+          </div>
+
+          <div className="mt-auto">
+            <div className="flex flex-col gap-4 w-full items-center">
+              {sepehr && (
+                <ZapWidget target={sepehr}>
+                  <div className="flex items-center gap-2 p-2 rounded-lg hover:bg-muted hover:cursor-pointer">
+                    <span className="text-xs hidden lg:block">Buy me a coffee</span>
 
-        <div className="border-b h-full w-full overflow-y-auto">
-          <Outlet />
+                    <CoffeeIcon className="w-5 h-5 lg:w-4 lg:h-4" />
+                  </div>
+                </ZapWidget>
+              )}
+
+              <div className="w-full">{activeUser ? <ActiveUserWidget /> : <LoginWidget />}</div>
+            </div>
+          </div>
         </div>
 
-        <div className="p-2 flex items-center justify-between">
-          <div className="text-xs flex items-center gap-1">
-            <span>Powered by</span>
-            <a href="https://osty.dev" target="_blank" rel="noreferrer">
-              Osty
-            </a>
+        <div id="main" className="overflow-hidden w-full">
+          <div
+            id="navbar"
+            className="flex items-center justify-between p-2 border-b w-full bg-background md:hidden"
+          >
+            <div className="flex items-center gap-2 ">
+              <Link to="/" className="flex items-center gap-2">
+                <div className="w-8 h-8">
+                  <img src="/nostribe-64.png" alt="Nostribe" className="w-8 h-8 object-contain" />
+                </div>
+
+                <span className="text-lg font-bold">Nostribe</span>
+              </Link>
+            </div>
+
+            <div>{activeUser ? <ActiveUserWidget /> : <LoginWidget />}</div>
           </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 className="h-full w-full overflow-y-auto pb-32">
+            <Outlet />
+          </div>
+
+          <div
+            id="controlbar"
+            className="fixed overflow-hidden w-full border-t px-4 py-2 bottom-0 z-10 bg-background md:hidden"
+          >
+            <div className="flex flex-row gap-2 w-full items-center justify-between">
+              <Link to="/" className="flex items-center gap-2 text-primary/60 hover:text-primary">
+                <div>
+                  <HomeIcon size={28} strokeWidth={1.4} />
+                </div>
+              </Link>
+
+              <Link
+                to="/explore"
+                className="flex items-center gap-2 text-primary/60 hover:text-primary"
+              >
+                <div>
+                  <CompassIcon size={28} strokeWidth={1.4} />
+                </div>
+              </Link>
+
+              <Link
+                to="/messages"
+                className="flex items-center gap-2 text-primary/60 hover:text-primary"
+              >
+                <div>
+                  <MailIcon size={28} strokeWidth={1.4} />
+                </div>
+              </Link>
+
+              <DropdownMenu>
+                <DropdownMenuTrigger>
+                  <div className="flex items-center gap-2 text-primary/60 hover:text-primary">
+                    <MenuIcon size={28} strokeWidth={1.4} />
+                  </div>
+                </DropdownMenuTrigger>
+
+                <DropdownMenuContent>
+                  <DropdownMenuItem>
+                    <Button variant="ghost" asChild>
+                      <a
+                        href="https://osty.dev"
+                        target="_blank"
+                        rel="noreferrer"
+                        className="flex gap-2"
+                      >
+                        <ArrowRightIcon size={18} />
+                        Powered by Osty
+                      </a>
+                    </Button>
+                  </DropdownMenuItem>
+
+                  <DropdownMenuItem>
+                    {theme === 'dark' ? (
+                      <Button
+                        variant="ghost"
+                        className="flex gap-2"
+                        onClick={() => setTheme('light')}
+                      >
+                        <SunIcon size={18} />
+
+                        <span>Switch to light</span>
+                      </Button>
+                    ) : (
+                      <Button
+                        variant="ghost"
+                        className="flex gap-2"
+                        onClick={() => setTheme('dark')}
+                      >
+                        <MoonIcon size={18} />
+
+                        <span>Switch to dark</span>
+                      </Button>
+                    )}
+                  </DropdownMenuItem>
+
+                  <DropdownMenuItem>
+                    <Button variant="ghost" asChild>
+                      <a
+                        href="https://github.com/ostyjs/create-osty"
+                        target="_blank"
+                        rel="noreferrer"
+                        className="flex items-center gap-2"
+                      >
+                        <GitHubLogoIcon />
+
+                        <span>GitHub</span>
+                      </a>
+                    </Button>
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
           </div>
         </div>
       </div>