wip: new chat layout

src/shared/accounts/active.tsx

@@ -67,8 +67,8 @@ export function ActiveAccount() {
           alt={db.account.npub}
           className="h-9 w-9 shrink-0 rounded-lg object-cover"
         />
-        <div className="flex w-full flex-1 flex-col items-start gap-0.5">
-          <p className="max-w-[10rem] truncate font-semibold leading-none text-white">
+        <div className="flex flex-col items-start">
+          <p className="max-w-[10rem] truncate text-base font-semibold leading-none text-white">
             {user?.name || user?.display_name || user?.displayName}
           </p>
           <span className="max-w-[7rem] truncate text-sm leading-none text-white/50">

src/shared/icons/community.tsx

@@ -0,0 +1,19 @@
+import { SVGProps } from 'react';
+
+export function CommunityIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      fill="none"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="M14.606 17.613C13.593 13.981 10.87 12 8 12s-5.594 1.98-6.608 5.613C.861 19.513 2.481 21 4.145 21h7.708c1.663 0 3.283-1.487 2.753-3.387zM3.999 7a4 4 0 118 0 4 4 0 01-8 0zM13.498 7.5a3.5 3.5 0 117 0 3.5 3.5 0 01-7 0zM14.194 12.773c1.046 1.136 1.86 2.59 2.339 4.303A4.501 4.501 0 0116.387 20h3.918c1.497 0 2.983-1.344 2.497-3.084-.883-3.168-3.268-4.916-5.8-4.916-.985 0-1.947.264-2.808.773z"
+      ></path>
+    </svg>
+  );
+}

src/shared/icons/index.ts

@@ -72,3 +72,4 @@ export * from './explore';
 export * from './explore2';
 export * from './home';
 export * from './chats';
+export * from './community';

src/shared/navigation.tsx

@@ -10,6 +10,7 @@ import {
   ArrowLeftIcon,
   ArrowRightIcon,
   ChatsIcon,
+  CommunityIcon,
   ExploreIcon,
   HomeIcon,
   RelayIcon,
@@ -90,6 +91,23 @@ export function Navigation() {
             </span>
             Chats
           </NavLink>
+          <NavLink
+            to="/communities"
+            preventScrollReset={true}
+            className={({ isActive }) =>
+              twMerge(
+                'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 px-3 font-medium',
+                isActive
+                  ? 'border-fuchsia-500 bg-white/5 text-white'
+                  : 'border-transparent text-white/70'
+              )
+            }
+          >
+            <span className="inline-flex h-7 w-7 shrink-0 items-center justify-center">
+              <CommunityIcon className="h-5 w-5" />
+            </span>
+            Communities
+          </NavLink>
           <NavLink
             to="/relays"
             preventScrollReset={true}

src/shared/nip05.tsx

@@ -61,8 +61,10 @@ export const NIP05 = memo(function NIP05({
   }
 
   return (
-    <div className={twMerge('leadning-none inline-flex items-center gap-1', className)}>
-      <p>{nip05}</p>
+    <div className={twMerge('inline-flex items-center gap-1', className)}>
+      <div>
+        <p className="text-sm">{nip05}</p>
+      </div>
       <div className="shrink-0">
         {data === true ? (
           <VerifiedIcon className="h-3 w-3 text-green-500" />

src/shared/notes/kinds/article.tsx

@@ -38,13 +38,15 @@ export function ArticleNote(props: { event?: NDKEvent }) {
           />
         )}
         <div className="flex flex-col gap-2 rounded-b-lg bg-white/10 px-3 py-3 backdrop-blur-xl">
-          <h5 className="line-clamp-1 font-medium leading-none text-white">
+          <h5 className="line-clamp-1 text-base font-medium text-white">
             {metadata.title}
           </h5>
-          <p className="line-clamp-3 break-all text-sm text-white/50">
-            {metadata.summary}
-          </p>
-          <span className="mt-2.5 text-sm leading-none text-white/50">
+          {metadata.summary ? (
+            <p className="line-clamp-3 break-all text-sm text-white/70">
+              {metadata.summary}
+            </p>
+          ) : null}
+          <span className="mt-2.5 text-sm text-white/70">
             {metadata.publishedAt.toString()}
           </span>
         </div>

src/shared/notes/mentions/hashtag.tsx

@@ -7,7 +7,7 @@ export function Hashtag({ tag }: { tag: string }) {
   const setWidget = useWidgets((state) => state.setWidget);
 
   return (
-    <div
+    <span
       role="button"
       tabIndex={0}
       onClick={() =>
@@ -27,6 +27,6 @@ export function Hashtag({ tag }: { tag: string }) {
       className="break-all text-fuchsia-400 hover:text-fuchsia-500"
     >
       {tag}
-    </div>
+    </span>
   );
 }

src/shared/notes/preview/link.tsx

@@ -46,17 +46,15 @@ export function LinkPreview({ urls }: { urls: string[] }) {
                 />
               )}
               <div className="flex flex-col gap-1 border-t border-white/5 px-3 py-3">
-                <h5 className="line-clamp-1 font-semibold leading-none text-white">
+                <h5 className="line-clamp-1 text-base font-semibold text-white">
                   {data.title}
                 </h5>
                 {data.description && (
-                  <p className="line-clamp-3 break-all text-sm text-white/50">
+                  <p className="line-clamp-3 break-all text-sm text-white/80">
                     {data.description}
                   </p>
                 )}
-                <span className="mt-2.5 text-sm leading-none text-white/80">
-                  {domain.hostname}
-                </span>
+                <span className="mt-2.5 text-sm text-white/80">{domain.hostname}</span>
               </div>
             </>
           )}

src/shared/user.tsx

@@ -80,14 +80,14 @@ export const User = memo(function User({
           </Avatar.Fallback>
         </Avatar.Root>
         <div className="flex flex-1 items-baseline gap-2">
-          <h5 className="max-w-[10rem] truncate font-semibold leading-none text-white">
+          <h5 className="max-w-[10rem] truncate font-semibold  text-white">
             {user?.name ||
               user?.display_name ||
               user?.displayName ||
               displayNpub(pubkey, 16)}
           </h5>
-          <span className="leading-none text-white/50">·</span>
-          <span className="leading-none text-white/50">{createdAt}</span>
+          <span className="text-white/50">·</span>
+          <span className="text-white/50">{createdAt}</span>
         </div>
       </div>
     );
@@ -111,7 +111,7 @@ export const User = memo(function User({
         </Avatar.Root>
         <div className="flex h-full flex-col items-start justify-between">
           <div className="flex flex-col items-start gap-1 text-start">
-            <p className="max-w-[15rem] truncate text-lg font-semibold leading-none text-white">
+            <p className="max-w-[15rem] truncate text-lg font-semibold text-white">
               {user?.name || user?.display_name || user?.displayName}
             </p>
             <ReactMarkdown
@@ -157,11 +157,11 @@ export const User = memo(function User({
             <img src={svgURI} alt={pubkey} className="h-10 w-10 rounded-lg bg-black" />
           </Avatar.Fallback>
         </Avatar.Root>
-        <div className="flex w-full flex-col items-start gap-1">
-          <h3 className="max-w-[15rem] truncate font-medium leading-none text-white">
+        <div className="flex w-full flex-col items-start">
+          <h3 className="max-w-[15rem] truncate font-medium text-white">
             {user?.name || user?.display_name || user?.displayName}
           </h3>
-          <p className="max-w-[10rem] truncate text-sm leading-none text-white/70">
+          <p className="max-w-[10rem] truncate text-sm text-white/70">
             {user?.nip05 || user?.username || displayNpub(pubkey, 16)}
           </p>
         </div>
@@ -230,7 +230,7 @@ export const User = memo(function User({
             </Avatar.Fallback>
           </Avatar.Root>
           <div className="inline-flex items-baseline gap-1">
-            <h5 className="max-w-[10rem] truncate font-medium leading-none text-white/80">
+            <h5 className="max-w-[10rem] truncate font-medium text-white/80">
               {user?.name ||
                 user?.display_name ||
                 user?.displayName ||
@@ -260,13 +260,13 @@ export const User = memo(function User({
           </Avatar.Fallback>
         </Avatar.Root>
         <div className="flex flex-1 flex-col gap-2">
-          <h5 className="max-w-[15rem] truncate font-semibold leading-none text-white">
+          <h5 className="max-w-[15rem] truncate font-semibold text-white">
             {user?.name || user?.display_name || user?.displayName || 'Anon'}
           </h5>
           <div className="inline-flex items-center gap-2">
-            <span className="leading-none text-white/50">{createdAt}</span>
-            <span className="leading-none text-white/50">·</span>
-            <span className="leading-none text-white/50">{displayNpub(pubkey, 16)}</span>
+            <span className="text-white/50">{createdAt}</span>
+            <span className="text-white/50">·</span>
+            <span className="text-white/50">{displayNpub(pubkey, 16)}</span>
           </div>
         </div>
       </div>
@@ -295,15 +295,15 @@ export const User = memo(function User({
             </Avatar.Fallback>
           </Avatar.Root>
         </HoverCard.Trigger>
-        <div className="flex flex-1 items-baseline gap-2">
-          <h5 className="max-w-[15rem] truncate font-semibold leading-none text-white">
+        <div className="flex flex-1 items-center gap-2">
+          <h5 className="max-w-[15rem] truncate font-semibold text-white">
             {user?.name ||
               user?.display_name ||
               user?.displayName ||
               displayNpub(pubkey, 16)}
           </h5>
-          <span className="leading-none text-white/50">·</span>
-          <span className="leading-none text-white/50">{createdAt}</span>
+          <span className="text-white/50">·</span>
+          <span className="text-white/50">{createdAt}</span>
         </div>
       </div>
       <HoverCard.Portal>
@@ -331,7 +331,7 @@ export const User = memo(function User({
             </Avatar.Root>
             <div className="flex flex-1 flex-col gap-2">
               <div className="inline-flex flex-col gap-1">
-                <h5 className="text-sm font-semibold leading-none">
+                <h5 className="text-sm font-semibold">
                   {user?.name ||
                     user?.display_name ||
                     user?.displayName ||
@@ -341,10 +341,10 @@ export const User = memo(function User({
                   <NIP05
                     pubkey={pubkey}
                     nip05={user?.nip05}
-                    className="max-w-[15rem] truncate text-sm leading-none text-white/50"
+                    className="max-w-[15rem] truncate text-sm text-white/50"
                   />
                 ) : (
-                  <span className="max-w-[15rem] truncate text-sm leading-none text-white/50">
+                  <span className="max-w-[15rem] truncate text-sm text-white/50">
                     {displayNpub(pubkey, 16)}
                   </span>
                 )}