restructured and clean up

src/components/columns/account/index.tsx

@@ -1,4 +1,4 @@
-import { Account } from '@components/accountBar/account';
+import { Account } from '@components/columns/account/account';
 
 import LumeSymbol from '@assets/icons/Lume';
 import { PlusIcon } from '@radix-ui/react-icons';
@@ -7,7 +7,7 @@ import Link from 'next/link';
 import { useCallback, useEffect, useState } from 'react';
 import Database from 'tauri-plugin-sql-api';
 
-export default function AccountBar() {
+export default function AccountColumn() {
   const [users, setUsers] = useState([]);
   const [currentUser]: any = useLocalStorage('current-user');
 

src/components/columns/navigator/index.tsx

@@ -1,11 +1,11 @@
 import ActiveLink from '@components/activeLink';
-import CreatePost from '@components/navigatorBar/createPost';
+import CreatePost from '@components/columns/navigator/createPost';
-import { ProfileMenu } from '@components/navigatorBar/profileMenu';
+import { UserDropdownMenu } from '@components/columns/navigator/userDropdownMenu';
 
 import { PlusIcon } from '@radix-ui/react-icons';
 import { useLocalStorage } from '@rehooks/local-storage';
 
-export default function NavigatorBar() {
+export default function NavigatorColumn() {
   const [currentUser]: any = useLocalStorage('current-user');
   const profile = JSON.parse(currentUser.metadata);
 
@@ -17,7 +17,7 @@ export default function NavigatorBar() {
           <div className="flex flex-col p-2">
             <div className="flex items-center justify-between">
               <h5 className="font-semibold leading-tight text-zinc-100">{profile.display_name || ''}</h5>
-              <ProfileMenu pubkey={currentUser.pubkey} />
+              <UserDropdownMenu pubkey={currentUser.pubkey} />
             </div>
             <span className="text-sm leading-tight text-zinc-500">@{profile.username || ''}</span>
           </div>
@@ -38,7 +38,7 @@ export default function NavigatorBar() {
           </div>
           <div className="flex flex-col gap-1 text-zinc-500">
             <ActiveLink
-              href={`/feed/following`}
+              href={`/newsfeed/following`}
               activeClassName="ring-1 ring-white/10 dark:bg-zinc-900 dark:text-white"
               className="flex h-10 items-center gap-1 rounded-lg px-2.5 text-sm font-medium hover:bg-zinc-900"
             >
@@ -46,7 +46,7 @@ export default function NavigatorBar() {
               <span>following</span>
             </ActiveLink>
             <ActiveLink
-              href={`/feed/global`}
+              href={`/newsfeed/global`}
               activeClassName="ring-1 ring-white/10 dark:bg-zinc-900 dark:text-white"
               className="flex h-10 items-center gap-1 rounded-lg px-2.5 text-sm font-medium hover:bg-zinc-900"
             >

src/components/columns/navigator/userDropdownMenu.tsx

@@ -5,7 +5,7 @@ import { useRouter } from 'next/router';
 import { nip19 } from 'nostr-tools';
 import { memo } from 'react';
 
-export const ProfileMenu = memo(function ProfileMenu({ pubkey }: { pubkey: string }) {
+export const UserDropdownMenu = memo(function ProfileMenu({ pubkey }: { pubkey: string }) {
   const router = useRouter();
 
   const viewProfile = () => {

src/components/empty.tsx

@@ -1,96 +0,0 @@
-import { EnvelopeClosedIcon, PlusIcon, UpdateIcon } from '@radix-ui/react-icons';
-import Image from 'next/image';
-
-const sampleData = [
-  {
-    name: 'Dick Whitman (🌎/21M)',
-    role: 'dickwhitman@nostrplebs.com',
-    imageUrl: 'https://pbs.twimg.com/profile_images/1594930968325984256/TjMXaXBE_400x400.jpg',
-  },
-  {
-    name: 'Jack',
-    role: 'npub1sg6plzptd64u62a878hep2kev88swjh3tw00gjsfl8f237lmu63q0uf63m',
-    imageUrl: 'https://pbs.twimg.com/profile_images/1115644092329758721/AFjOr-K8_400x400.jpg',
-  },
-  {
-    name: 'Sats Symbol',
-    role: 'npub1mqngkfwfyv2ckv7hshck9pqucpz08tktde2jukr3hheatup2y2tqnzc32w',
-    imageUrl: 'https://pbs.twimg.com/profile_images/1563388888860594177/7evrI1uB_400x400.jpg',
-  },
-];
-
-export default function Empty() {
-  return (
-    <div className="mx-auto max-w-lg pt-8">
-      <div>
-        <div className="text-center">
-          <svg
-            className="mx-auto h-12 w-12 text-zinc-300"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 48 48"
-            aria-hidden="true"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M34 40h10v-4a6 6 0 00-10.712-3.714M34 40H14m20 0v-4a9.971 9.971 0 00-.712-3.714M14 40H4v-4a6 6 0 0110.713-3.714M14 40v-4c0-1.313.253-2.566.713-3.714m0 0A10.003 10.003 0 0124 26c4.21 0 7.813 2.602 9.288 6.286M30 14a6 6 0 11-12 0 6 6 0 0112 0zm12 6a4 4 0 11-8 0 4 4 0 018 0zm-28 0a4 4 0 11-8 0 4 4 0 018 0z"
-            ></path>
-          </svg>
-          <h2 className="mt-2 text-lg font-medium text-zinc-100">You haven&apos;t followed anyone yet</h2>
-          <p className="mt-1 text-sm text-zinc-500">
-            You can send invite via email to your friend and lume will onboard them into nostr or follow some people in
-            suggested below
-          </p>
-        </div>
-        <form action="#" className="relative mt-6">
-          <input
-            type="email"
-            name="email"
-            id="email"
-            className="block h-11 w-full rounded-lg border-none px-4 shadow-md ring-1 ring-white/10 placeholder:text-zinc-500 dark:bg-zinc-800 dark:text-zinc-200"
-            placeholder="Enter an email"
-          />
-          <button className="absolute right-0.5 top-1/2 inline-flex h-10 -translate-y-1/2 transform items-center gap-1 rounded-md border border-zinc-600 bg-zinc-700 px-4 text-sm font-medium text-zinc-200 shadow-md">
-            <EnvelopeClosedIcon className="h-4 w-4" />
-            Invite
-          </button>
-        </form>
-      </div>
-      <div className="mt-10 flex flex-col items-start gap-4">
-        <div className="flex w-full items-center justify-between">
-          <h3 className="text-sm font-medium text-zinc-500">Suggestions</h3>
-          <UpdateIcon className="h-4 w-4 text-zinc-600" />
-        </div>
-        <ul className="w-full divide-y divide-zinc-800 border-t border-b border-zinc-800">
-          {sampleData.map((person, index) => (
-            <li key={index} className="flex items-center justify-between space-x-3 py-4">
-              <div className="flex min-w-0 flex-1 items-center space-x-3">
-                <div className="relative h-10 w-10 flex-shrink-0">
-                  <Image className="rounded-full object-cover" src={person.imageUrl} alt={person.name} fill={true} />
-                </div>
-                <div className="min-w-0 flex-1">
-                  <p className="truncate text-sm font-medium text-zinc-200">{person.name}</p>
-                  <p className="w-56 truncate text-sm font-medium text-zinc-500">{person.role}</p>
-                </div>
-              </div>
-              <div className="flex-shrink-0">
-                <button
-                  type="button"
-                  className="inline-flex items-center rounded-full border border-zinc-700 bg-zinc-800 px-3 py-1 text-xs font-medium text-zinc-400 shadow-sm hover:bg-zinc-800 focus:outline-none focus:ring-2 focus:ring-fuchsia-600 focus:ring-offset-2"
-                >
-                  <PlusIcon className="-ml-1 h-5 w-5" />
-                  <span className="text-sm font-medium text-zinc-300">Follow</span>
-                </button>
-              </div>
-            </li>
-          ))}
-        </ul>
-        <button className="bg-[radial-gradient(ellipse_at_bottom_right,_var(--tw-gradient-stops))] from-gray-300 via-fuchsia-600 to-orange-600 bg-clip-text text-sm font-bold text-transparent">
-          Explore more →
-        </button>
-      </div>
-    </div>
-  );
-}

src/components/imageWithFallback.tsx

@@ -8,7 +8,7 @@ export const ImageWithFallback = memo(function ImageWithFallback({
   fill,
   className,
 }: {
-  src: any;
+  src: string;
   alt: string;
   fill: boolean;
   className: string;

src/components/navigatorBar/incomingList.tsx

@@ -1,17 +0,0 @@
-export function IncomingList({ data }: { data: any }) {
-  const list: any = Array.from(new Set(data.map((item: any) => item.pubkey)));
-
-  if (list.length > 0) {
-    return (
-      <>
-        {list.map((item, index) => (
-          <div key={index}>
-            <p>{item}</p>
-          </div>
-        ))}
-      </>
-    );
-  } else {
-    return <></>;
-  }
-}

src/components/note/modal/index.tsx

@@ -1,52 +0,0 @@
-import { RelayContext } from '@components/contexts/relay';
-import { Content } from '@components/note/content';
-import NoteReply from '@components/note/modal/noteReply';
-
-import useLocalStorage from '@rehooks/local-storage';
-import { memo, useContext, useState } from 'react';
-
-const Modal = ({ event }: { event: any }) => {
-  const relayPool: any = useContext(RelayContext);
-  const [relays]: any = useLocalStorage('relays');
-  const [events, setEvents] = useState([]);
-
-  relayPool.subscribe(
-    [
-      {
-        '#e': [event.id],
-        since: event.created_at,
-        kinds: [1],
-      },
-    ],
-    relays,
-    (event: any) => {
-      setEvents((events) => [event, ...events]);
-    },
-    undefined,
-    (events: any, relayURL: any) => {
-      console.log(events, relayURL);
-    }
-  );
-
-  return (
-    <div className="flex min-h-full items-center justify-center p-4">
-      <div className="relative h-[90vh] w-full max-w-3xl transform overflow-hidden rounded-lg text-zinc-100 shadow-modal transition-all">
-        <div className="absolute top-0 left-0 h-full w-full bg-black bg-opacity-20 backdrop-blur-lg"></div>
-        <div className="relative z-10 h-full p-4">
-          <div className="relative h-full overflow-auto rounded-lg border-[0.5px] border-white/30 bg-zinc-800 p-4 shadow-inner">
-            <div className="flex flex-col gap-4">
-              <Content data={event} />
-            </div>
-            <div className="flex flex-col gap-2 divide-y divide-zinc-700">
-              {events.map((item) => (
-                <NoteReply key={item.id} event={item} />
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default memo(Modal);

src/components/note/modal/noteReply.tsx

@@ -1,9 +0,0 @@
-import { Content } from '@components/note/content';
-
-export default function NoteReply({ event }: { event: any }) {
-  return (
-    <div className="flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 py-4 hover:bg-zinc-800">
-      <Content data={event} />
-    </div>
-  );
-}

src/layouts/fullscreen.tsx

@@ -1,4 +1,4 @@
-export default function FullLayout({ children }: { children: React.ReactNode }) {
+export default function FullscreenLayout({ children }: { children: React.ReactNode }) {
   return (
     <div className="bg-gradient-radial-page relative h-full overflow-hidden">
       {/* dragging area */}

src/layouts/newsfeed.tsx

@@ -1,16 +1,16 @@
-import AccountBar from '@components/accountBar';
+import AccountColumn from '@components/columns/account';
-import NavigatorBar from '@components/navigatorBar';
+import NavigatorColumn from '@components/columns/navigator';
 
 export default function NewsFeedLayout({ children }: { children: React.ReactNode }) {
   return (
     <div className="flex h-full w-full flex-row">
       <div className="relative h-full w-[70px] shrink-0 border-r border-zinc-900">
         <div data-tauri-drag-region className="absolute top-0 left-0 h-12 w-full" />
-        <AccountBar />
+        <AccountColumn />
       </div>
       <div className="grid grow grid-cols-4">
         <div className="col-span-1">
-          <NavigatorBar />
+          <NavigatorColumn />
         </div>
         <div className="col-span-3 m-3 ml-0 overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20">
           <div className="h-full w-full rounded-lg">{children}</div>

src/layouts/user.tsx

@@ -1,5 +1,5 @@
-import AccountBar from '@components/accountBar';
 import ActiveLink from '@components/activeLink';
+import AccountColumn from '@components/columns/account';
 
 import { useLocalStorage } from '@rehooks/local-storage';
 
@@ -10,7 +10,7 @@ export default function UserLayout({ children }: { children: React.ReactNode })
     <div className="flex h-full w-full flex-row">
       <div className="relative h-full w-[70px] shrink-0 border-r border-zinc-900">
         <div data-tauri-drag-region className="absolute top-0 left-0 h-12 w-full" />
-        <AccountBar />
+        <AccountColumn />
       </div>
       <div className="grid grow grid-cols-4">
         <div className="col-span-1">

src/pages/index.tsx

@@ -1,5 +1,5 @@
-import BaseLayout from '@layouts/baseLayout';
+import BaseLayout from '@layouts/base';
-import FullLayout from '@layouts/fullLayout';
+import FullscreenLayout from '@layouts/fullscreen';
 
 import LumeSymbol from '@assets/icons/Lume';
 import { useLocalStorage } from '@rehooks/local-storage';
@@ -22,7 +22,7 @@ export default function Page() {
     } else {
       setTimeout(() => {
         setLoading(false);
-        router.push('/feed/following');
+        router.push('/newsfeed/following');
       }, 1500);
     }
   }, [currentUser, router]);
@@ -106,7 +106,7 @@ Page.getLayout = function getLayout(
 ) {
   return (
     <BaseLayout>
-      <FullLayout>{page}</FullLayout>
+      <FullscreenLayout>{page}</FullscreenLayout>
     </BaseLayout>
   );
 };

src/pages/newsfeed/circle.tsx

@@ -0,0 +1,28 @@
+import BaseLayout from '@layouts/base';
+import NewsFeedLayout from '@layouts/newsfeed';
+
+import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal } from 'react';
+
+export default function Page() {
+  return (
+    <div className="h-full w-full">
+      <p>Global</p>
+    </div>
+  );
+}
+
+Page.getLayout = function getLayout(
+  page:
+    | string
+    | number
+    | boolean
+    | ReactElement<unknown, string | JSXElementConstructor<unknown>>
+    | ReactFragment
+    | ReactPortal
+) {
+  return (
+    <BaseLayout>
+      <NewsFeedLayout>{page}</NewsFeedLayout>
+    </BaseLayout>
+  );
+};

src/pages/newsfeed/following.tsx

@@ -1,5 +1,5 @@
-import BaseLayout from '@layouts/baseLayout';
+import BaseLayout from '@layouts/base';
-import NewsFeedLayout from '@layouts/newsfeedLayout';
+import NewsFeedLayout from '@layouts/newsfeed';
 
 import { DatabaseContext } from '@components/contexts/database';
 import { NoteConnector } from '@components/note/connector';

src/pages/newsfeed/global.tsx

@@ -1,5 +1,5 @@
-import BaseLayout from '@layouts/baseLayout';
+import BaseLayout from '@layouts/base';
-import NewsFeedLayout from '@layouts/newsfeedLayout';
+import NewsFeedLayout from '@layouts/newsfeed';
 
 import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal } from 'react';
 

src/pages/onboarding/create/index.tsx

@@ -1,5 +1,5 @@
-import BaseLayout from '@layouts/baseLayout';
+import BaseLayout from '@layouts/base';
-import OnboardingLayout from '@layouts/onboardingLayout';
+import OnboardingLayout from '@layouts/onboarding';
 
 import { DatabaseContext } from '@components/contexts/database';
 import { RelayContext } from '@components/contexts/relay';

src/pages/onboarding/create/pre-follows.tsx

@@ -1,5 +1,5 @@
-import BaseLayout from '@layouts/baseLayout';
+import BaseLayout from '@layouts/base';
-import OnboardingLayout from '@layouts/onboardingLayout';
+import OnboardingLayout from '@layouts/onboarding';
 
 import { DatabaseContext } from '@components/contexts/database';
 

src/pages/onboarding/index.tsx

@@ -1,5 +1,5 @@
-import BaseLayout from '@layouts/baseLayout';
+import BaseLayout from '@layouts/base';
-import OnboardingLayout from '@layouts/onboardingLayout';
+import OnboardingLayout from '@layouts/onboarding';
 
 import { motion } from 'framer-motion';
 import Link from 'next/link';

src/pages/onboarding/login/fetch.tsx

@@ -1,5 +1,5 @@
-import BaseLayout from '@layouts/baseLayout';
+import BaseLayout from '@layouts/base';
-import OnboardingLayout from '@layouts/onboardingLayout';
+import OnboardingLayout from '@layouts/onboarding';
 
 import { DatabaseContext } from '@components/contexts/database';
 import { RelayContext } from '@components/contexts/relay';

src/pages/onboarding/login/index.tsx

@@ -1,5 +1,5 @@
-import BaseLayout from '@layouts/baseLayout';
+import BaseLayout from '@layouts/base';
-import OnboardingLayout from '@layouts/onboardingLayout';
+import OnboardingLayout from '@layouts/onboarding';
 
 import { motion } from 'framer-motion';
 import { useRouter } from 'next/router';

src/pages/profile/personal.tsx

@@ -1,4 +1,4 @@
-import BaseLayout from '@layouts/baseLayout';
+import BaseLayout from '@layouts/base';
 
 import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal } from 'react';
 

src/pages/profile/update.tsx

@@ -1,5 +1,5 @@
-import BaseLayout from '@layouts/baseLayout';
+import BaseLayout from '@layouts/base';
-import UserLayout from '@layouts/userLayout';
+import UserLayout from '@layouts/user';
 
 import { RelayContext } from '@components/contexts/relay';
 

src/utils/getDate.tsx

@@ -1,3 +1,4 @@
+// get X days ago with user provided date
 export const daysAgo = (numOfDays, date = new Date()) => {
   const daysAgo = new Date(date.getTime());
   daysAgo.setDate(date.getDate() - numOfDays);
@@ -5,6 +6,7 @@ export const daysAgo = (numOfDays, date = new Date()) => {
   return daysAgo;
 };
 
+// get X hours ago with user provided date
 export const hoursAgo = (numOfHours, date = new Date()) => {
   const hoursAgo = new Date(date.getTime());
   hoursAgo.setHours(date.getHours() - numOfHours);
@@ -12,6 +14,7 @@ export const hoursAgo = (numOfHours, date = new Date()) => {
   return hoursAgo;
 };
 
+// convert date to unix timestamp
 export const dateToUnix = (_date?: Date) => {
   const date = _date || new Date();