wip: new chat layout

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>
             </>
           )}