wip: new chat screen

src/shared/accounts/active.tsx

@@ -52,7 +52,7 @@ export function ActiveAccount() {
 
   if (status === 'loading') {
     return (
-      <div className="inline-flex h-16 items-center gap-2.5 border-l-2 border-transparent pb-2 pl-4 pr-2">
+      <div className="inline-flex h-16 items-center gap-2.5 border-l-2 border-transparent px-3 pb-2">
         <div className="relative h-10 w-10 shrink-0 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
         <div className="h-2.5 w-2/3 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
       </div>
@@ -60,7 +60,7 @@ export function ActiveAccount() {
   }
 
   return (
-    <div className="flex h-16 items-center justify-between border-l-2 border-transparent pb-2 pl-4 pr-3">
+    <div className="flex h-16 items-center justify-between border-l-2 border-transparent px-3 pb-1">
       <Link to={`/users/${db.account.pubkey}`} className="flex items-center gap-1.5">
         <Image
           src={user?.picture || user?.image}
@@ -76,12 +76,12 @@ export function ActiveAccount() {
           </span>
         </div>
       </Link>
-      <div className="inline-flex divide-x divide-white/5 rounded-lg border-t border-white/10 bg-white/20">
+      <div className="inline-flex divide-x divide-white/5 rounded-lg border-t border-white/5 bg-white/10">
         <Link
           to="/settings/"
-          className="inline-flex h-9 w-9 items-center justify-center hover:bg-white/10"
+          className="inline-flex h-9 w-9 items-center justify-center rounded-l-lg hover:bg-white/10"
         >
-          <SettingsIcon className="h-4 w-4 text-white" />
+          <SettingsIcon className="h-5 w-5 text-white" />
         </Link>
         <Logout />
       </div>

src/shared/icons/chats.tsx

@@ -0,0 +1,21 @@
+import { SVGProps } from 'react';
+
+export function ChatsIcon(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"
+        fillRule="evenodd"
+        d="M19.002 3a3 3 0 013 3v6a3 3 0 01-3 3h-1v1a3 3 0 01-3 3h-4.24l-4.274 2.374a1 1 0 01-1.486-.874V19a3 3 0 01-3-3v-6a3 3 0 013-3h1V6a3 3 0 013-3h10zm-11 4h7a3 3 0 013 3v3h1a1 1 0 001-1V6a1 1 0 00-1-1h-10a1 1 0 00-1 1v1z"
+        clipRule="evenodd"
+      ></path>
+    </svg>
+  );
+}

src/shared/icons/index.ts

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

src/shared/logout.tsx

@@ -27,9 +27,9 @@ export function Logout() {
       <AlertDialog.Trigger asChild>
         <button
           type="button"
-          className="inline-flex h-9 w-9 items-center justify-center hover:bg-white/10"
+          className="inline-flex h-9 w-9 items-center justify-center rounded-r-lg hover:bg-white/10"
         >
-          <LogoutIcon className="h-4 w-4 text-white" />
+          <LogoutIcon className="h-5 w-5 text-white" />
         </button>
       </AlertDialog.Trigger>
       <AlertDialog.Portal>

src/shared/navigation.tsx

@@ -9,6 +9,7 @@ import { Frame } from '@shared/frame';
 import {
   ArrowLeftIcon,
   ArrowRightIcon,
+  ChatsIcon,
   ExploreIcon,
   HomeIcon,
   RelayIcon,
@@ -52,15 +53,15 @@ export function Navigation() {
       </div>
       <div
         data-tauri-drag-region
-        className="scrollbar-hide flex h-full flex-1 flex-col gap-6 overflow-y-auto pb-32"
+        className="scrollbar-hide flex h-full flex-1 flex-col gap-6 overflow-y-auto pr-3"
       >
-        <div className="flex flex-col pr-3">
+        <div className="flex flex-col">
           <NavLink
             to="/"
             preventScrollReset={true}
             className={({ isActive }) =>
               twMerge(
-                'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-3 font-medium',
+                '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'
@@ -72,12 +73,29 @@ export function Navigation() {
             </span>
             Home
           </NavLink>
+          <NavLink
+            to="/chats"
+            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">
+              <ChatsIcon className="h-5 w-5" />
+            </span>
+            Chats
+          </NavLink>
           <NavLink
             to="/relays"
             preventScrollReset={true}
             className={({ isActive }) =>
               twMerge(
-                'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-3 font-medium',
+                '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'
@@ -94,7 +112,7 @@ export function Navigation() {
             preventScrollReset={true}
             className={({ isActive }) =>
               twMerge(
-                'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-3 font-medium',
+                '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'

src/shared/notes/kinds/text.tsx

@@ -23,7 +23,7 @@ export function TextNote(props: { content?: string }) {
         <ReactMarkdown
           className="markdown"
           remarkPlugins={[remarkGfm]}
-          disallowedElements={['h1', 'h2', 'h3', 'h4', 'h5', 'h6']}
+          disallowedElements={['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'code']}
           unwrapDisallowed={true}
           linkTarget={'_blank'}
         >