update navigation design

src/shared/icons/myspace.tsx

@@ -0,0 +1,15 @@
+import { SVGProps } from 'react';
+
+export default function MyspaceIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+  return (
+    <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M8.75 7.75H15.25M8.75 11.75H12.25M4.25 3.25V20.75H19.75V3.25H4.25Z"
+        stroke="currentColor"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

src/shared/icons/threads.tsx

@@ -0,0 +1,12 @@
+import { SVGProps } from 'react';
+
+export default function ThreadsIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+  return (
+    <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M2.75 3.75V3C2.33579 3 2 3.33579 2 3.75H2.75ZM16.25 3.75H17C17 3.33579 16.6642 3 16.25 3V3.75ZM21.25 12H22C22 11.5858 21.6642 11.25 21.25 11.25V12ZM6.75 15C6.33579 15 6 15.3358 6 15.75C6 16.1642 6.33579 16.5 6.75 16.5V15ZM6.75 7.75V7C6.33579 7 6 7.33579 6 7.75H6.75ZM12.25 7.75H13C13 7.33579 12.6642 7 12.25 7V7.75ZM12.25 12.25V13C12.6642 13 13 12.6642 13 12.25H12.25ZM6.75 12.25H6C6 12.6642 6.33579 13 6.75 13V12.25ZM2.75 4.5H16.25V3H2.75V4.5ZM22 17.75V12H20.5V17.75H22ZM15.5 3.75V12H17V3.75H15.5ZM15.5 12V17.75H17V12H15.5ZM21.25 11.25H16.25V12.75H21.25V11.25ZM2 3.75V17.75H3.5V3.75H2ZM5.25 21H18.5V19.5H5.25V21ZM2 17.75C2 19.5449 3.45507 21 5.25 21V19.5C4.2835 19.5 3.5 18.7165 3.5 17.75H2ZM18.75 21C20.5449 21 22 19.5449 22 17.75H20.5C20.5 18.7165 19.7165 19.5 18.75 19.5V21ZM18.75 19.5C17.7835 19.5 17 18.7165 17 17.75H15.5C15.5 19.5449 16.9551 21 18.75 21V19.5ZM6.75 16.5H12.25V15H6.75V16.5ZM6.75 8.5H12.25V7H6.75V8.5ZM11.5 7.75V12.25H13V7.75H11.5ZM12.25 11.5H6.75V13H12.25V11.5ZM7.5 12.25V7.75H6V12.25H7.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

src/shared/icons/world.tsx

@@ -0,0 +1,15 @@
+import { SVGProps } from 'react';
+
+export default function WorldIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+  return (
+    <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M19.7783 4.22184L4.22197 19.7782M21.25 12C21.25 17.1086 17.1086 21.25 12 21.25C6.89137 21.25 2.75 17.1086 2.75 12C2.75 6.89137 6.89137 2.75 12 2.75C17.1086 2.75 21.25 6.89137 21.25 12ZM18.5163 18.516C17.3167 19.7156 13.427 17.7707 9.82826 14.172C6.22955 10.5733 4.28467 6.68352 5.48424 5.48395C6.68381 4.28438 10.5736 6.22927 14.1723 9.82798C17.771 13.4267 19.7159 17.3165 18.5163 18.516Z"
+        stroke="currentColor"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

src/shared/multiAccounts.tsx

@@ -1,6 +1,5 @@
 import ActiveAccount from '@lume/shared/accounts/active';
 import InactiveAccount from '@lume/shared/accounts/inactive';
-import LumeIcon from '@lume/shared/icons/lume';
 import PlusIcon from '@lume/shared/icons/plus';
 import { APP_VERSION } from '@lume/stores/constants';
 import { getAccounts } from '@lume/utils/storage';
@@ -13,14 +12,8 @@ export default function MultiAccounts() {
   const { data, error }: any = useSWR('allAccounts', fetcher);
 
   return (
-    <div className="flex h-full flex-col items-center justify-between px-2 pb-4 pt-3">
+    <div className="flex h-full flex-col items-center justify-between pb-4 pt-3">
       <div className="flex flex-col gap-3">
-        <a
-          href="/app/newsfeed/following"
-          className="group relative flex h-11 w-11 shrink cursor-pointer items-center justify-center rounded-lg bg-zinc-900 hover:bg-zinc-800"
-        >
-          <LumeIcon className="h-6 w-auto text-zinc-400 group-hover:text-zinc-200" />
-        </a>
         <>
           {error && <div>failed to load</div>}
           {!data ? (

src/shared/navigation.tsx

@@ -1,53 +1,59 @@
 import ChannelsList from '@lume/app/channel/components/list';
 import ChatsList from '@lume/app/chat/components/list';
 import ActiveLink from '@lume/shared/activeLink';
+import MyspaceIcon from '@lume/shared/icons/myspace';
 import NavArrowDownIcon from '@lume/shared/icons/navArrowDown';
+import ThreadsIcon from '@lume/shared/icons/threads';
+import WorldIcon from '@lume/shared/icons/world';
 
 import { Disclosure } from '@headlessui/react';
 
 export default function Navigation() {
   return (
-    <div className="relative flex h-full flex-col gap-1 overflow-hidden pt-3">
+    <div className="relative flex h-full flex-col gap-3 overflow-hidden pt-3">
       {/* Newsfeed */}
-      <Disclosure defaultOpen={true}>
-        {({ open }) => (
-          <div className="flex flex-col px-2">
-            <Disclosure.Button className="flex cursor-pointer items-center gap-1 px-1 py-1">
-              <div
-                className={`inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out ${
-                  open ? '' : 'rotate-180'
-                }`}
-              >
-                <NavArrowDownIcon width={12} height={12} className="text-zinc-700" />
-              </div>
-              <h3 className="text-[11px] font-bold uppercase tracking-widest text-zinc-600">Newsfeed</h3>
-            </Disclosure.Button>
-            <Disclosure.Panel className="flex flex-col text-zinc-400">
-              <ActiveLink
-                href="/app/newsfeed/following"
-                className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-sm font-medium hover:text-zinc-200"
-                activeClassName="dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800"
-              >
-                <span>#</span>
-                <span>Following</span>
-              </ActiveLink>
-              <ActiveLink
-                href="/app/newsfeed/circle"
-                className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-sm font-medium hover:text-zinc-200"
-                activeClassName="dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800"
-              >
-                <span>#</span>
-                <span>Circle</span>
-              </ActiveLink>
-            </Disclosure.Panel>
-          </div>
-        )}
-      </Disclosure>
+      <div className="flex flex-col gap-0.5 px-1.5">
+        <div className="px-2.5">
+          <h3 className="text-[11px] font-bold uppercase tracking-widest text-zinc-600">Feeds</h3>
+        </div>
+        <div className="flex flex-col text-zinc-400">
+          <ActiveLink
+            href="/app/newsfeed/following"
+            className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-[13px] font-semibold hover:text-zinc-200"
+            activeClassName=""
+          >
+            <span className="inline-flex h-5 w-5 items-center justify-center rounded bg-zinc-900">
+              <WorldIcon width={12} height={12} className="text-zinc-200" />
+            </span>
+            <span>Daily</span>
+          </ActiveLink>
+          <ActiveLink
+            href="/app/threads"
+            className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-[13px] font-semibold hover:text-zinc-200"
+            activeClassName=""
+          >
+            <span className="inline-flex h-5 w-5 items-center justify-center rounded bg-zinc-900">
+              <ThreadsIcon width={12} height={12} className="text-zinc-200" />
+            </span>
+            <span>Threads</span>
+          </ActiveLink>
+          <ActiveLink
+            href="/app/myspace"
+            className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-[13px] font-semibold hover:text-zinc-200"
+            activeClassName=""
+          >
+            <span className="inline-flex h-5 w-5 items-center justify-center rounded bg-zinc-900">
+              <MyspaceIcon width={12} height={12} className="text-zinc-200" />
+            </span>
+            <span>MySpace</span>
+          </ActiveLink>
+        </div>
+      </div>
       {/* Channels */}
       <Disclosure defaultOpen={true}>
         {({ open }) => (
-          <div className="flex flex-col px-2">
-            <Disclosure.Button className="flex cursor-pointer items-center gap-1 px-1 py-1">
+          <div className="flex flex-col gap-0.5 px-1.5">
+            <Disclosure.Button className="flex cursor-pointer items-center gap-1 px-2.5">
               <div
                 className={`inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out ${
                   open ? '' : 'rotate-180'
@@ -66,8 +72,8 @@ export default function Navigation() {
       {/* Chats */}
       <Disclosure defaultOpen={true}>
         {({ open }) => (
-          <div className="flex flex-col px-2">
-            <Disclosure.Button className="flex cursor-pointer items-center gap-1 px-1 py-1">
+          <div className="flex flex-col gap-0.5 px-1.5">
+            <Disclosure.Button className="flex cursor-pointer items-center gap-1 px-2.5">
               <div
                 className={`inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out ${
                   open ? '' : 'rotate-180'

src/shared/preview/image.tsx

@@ -1,14 +0,0 @@
-export default function ImagePreview({ url, size }: { url: string; size: string }) {
-  return (
-    <div className={`relative h-full ${size === 'large' ? 'w-4/5' : 'w-1/2'} mt-2 rounded-lg border border-zinc-800`}>
-      <img
-        src={url}
-        alt={url}
-        className="h-auto w-full rounded-lg object-cover"
-        loading="lazy"
-        decoding="async"
-        style={{ contentVisibility: 'auto' }}
-      />
-    </div>
-  );
-}

src/shared/preview/video.tsx

@@ -1,14 +0,0 @@
-import { MediaOutlet, MediaPlayer } from '@vidstack/react';
-
-export default function VideoPreview({ url, size }: { url: string; size: string }) {
-  return (
-    <div
-      onClick={(e) => e.stopPropagation()}
-      className={`relative mt-2 flex flex-col overflow-hidden rounded-lg ${size === 'large' ? 'w-4/5' : 'w-2/3'}`}
-    >
-      <MediaPlayer src={url} poster="" controls>
-        <MediaOutlet />
-      </MediaPlayer>
-    </div>
-  );
-}

src/shared/preview/youtube.tsx

@@ -1,19 +0,0 @@
-import YouTube from 'react-youtube';
-
-function getVideoId(url: string) {
-  const regex = /(youtu.*be.*)\/(watch\?v=|embed\/|v|shorts|)(.*?((?=[&#?])|$))/gm;
-  return regex.exec(url)[3];
-}
-
-export default function YoutubePreview({ url, size }: { url: string; size: string }) {
-  const id = getVideoId(url);
-
-  return (
-    <div
-      onClick={(e) => e.stopPropagation()}
-      className={`relative mt-2 flex flex-col overflow-hidden rounded-lg ${size === 'large' ? 'w-4/5' : 'w-2/3'}`}
-    >
-      <YouTube videoId={id} className="aspect-video xl:w-2/3" opts={{ width: '100%', height: '100%' }} />
-    </div>
-  );
-}