initial composer

src/shared/composer/modal.tsx

@@ -0,0 +1,80 @@
+import { ComposeUser } from '@lume/shared/composer/user';
+import CancelIcon from '@lume/shared/icons/cancel';
+import ChevronDownIcon from '@lume/shared/icons/chevronDown';
+import ChevronRightIcon from '@lume/shared/icons/chevronRight';
+import ComposeIcon from '@lume/shared/icons/compose';
+import { useActiveAccount } from '@lume/utils/hooks/useActiveAccount';
+
+import { Dialog, Transition } from '@headlessui/react';
+import { Fragment, useState } from 'react';
+
+export const ComposerModal = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const { account, isLoading, isError } = useActiveAccount();
+
+  const closeModal = () => {
+    setIsOpen(false);
+  };
+
+  const openModal = () => {
+    setIsOpen(true);
+  };
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => openModal()}
+        className="inline-flex h-7 w-max items-center justify-center gap-1 rounded-md bg-fuchsia-500 px-2.5 text-xs font-medium text-zinc-200 shadow-button hover:bg-fuchsia-600"
+      >
+        <ComposeIcon width={14} height={14} />
+        Compose
+      </button>
+      <Transition appear show={isOpen} as={Fragment}>
+        <Dialog as="div" className="relative z-10" onClose={closeModal}>
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <div className="fixed inset-0 z-50 bg-black bg-opacity-30 backdrop-blur-md data-[state=open]:animate-overlayShow" />
+          </Transition.Child>
+          <div className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 scale-95"
+              enterTo="opacity-100 scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 scale-100"
+              leaveTo="opacity-0 scale-95"
+            >
+              <Dialog.Panel className="relative h-min w-full max-w-xl rounded-lg border border-zinc-800 bg-zinc-900">
+                <div className="flex items-center justify-between px-4 py-4">
+                  <div className="flex items-center gap-2">
+                    <div>{!isLoading && !isError && account && <ComposeUser data={account} />}</div>
+                    <span>
+                      <ChevronRightIcon width={14} height={14} className="text-zinc-500" />
+                    </span>
+                    <button className="inline-flex h-6 w-max items-center justify-center gap-0.5 rounded bg-zinc-800 pl-3 pr-1.5 text-xs font-medium text-zinc-400 shadow-mini-button">
+                      Post
+                      <ChevronDownIcon width={14} height={14} />
+                    </button>
+                  </div>
+                  <div>
+                    <CancelIcon width={16} height={16} className="text-zinc-500" />
+                  </div>
+                </div>
+                <div className="px-4 pb-4"></div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </Dialog>
+      </Transition>
+    </>
+  );
+};

src/shared/composer/user.tsx

@@ -0,0 +1,24 @@
+import { Image } from '@lume/shared/image';
+import { DEFAULT_AVATAR, IMGPROXY_URL } from '@lume/stores/constants';
+
+export const ComposeUser = ({ data }: { data: any }) => {
+  const metadata = JSON.parse(data.metadata);
+
+  return (
+    <div className="flex items-center gap-1.5">
+      <div className="h-6 w-6 shrink-0 overflow-hidden rounded bg-zinc-900">
+        <Image
+          src={`${IMGPROXY_URL}/rs:fit:100:100/plain/${metadata?.picture ? metadata.picture : DEFAULT_AVATAR}`}
+          alt={data.pubkey}
+          className="h-6 w-6 object-cover"
+          loading="auto"
+        />
+      </div>
+      <h5 className="text-sm font-semibold leading-none text-zinc-100">
+        {metadata?.display_name || metadata?.name || (
+          <div className="h-3 w-20 animate-pulse rounded-sm bg-zinc-700"></div>
+        )}
+      </h5>
+    </div>
+  );
+};

src/shared/icons/chevronDown.tsx

@@ -0,0 +1,15 @@
+import { SVGProps } from 'react';
+
+export default function ChevronDownIcon(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 10L12 14L16 10"
+        stroke="currentColor"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

src/shared/icons/chevronRight.tsx

@@ -0,0 +1,15 @@
+import { SVGProps } from 'react';
+
+export default function ChevronRightIcon(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="M10 16L14 12L10 8"
+        stroke="currentColor"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

src/shared/navigation.tsx

@@ -1,8 +1,8 @@
 import ChannelsList from '@lume/app/channel/components/list';
 import ChatsList from '@lume/app/chat/components/list';
 import ActiveLink from '@lume/shared/activeLink';
+import { ComposerModal } from '@lume/shared/composer/modal';
 import EventCollector from '@lume/shared/eventCollector';
-import ComposeIcon from '@lume/shared/icons/compose';
 import MyspaceIcon from '@lume/shared/icons/myspace';
 import NavArrowDownIcon from '@lume/shared/icons/navArrowDown';
 import ThreadsIcon from '@lume/shared/icons/threads';
@@ -14,10 +14,7 @@ export default function Navigation() {
   return (
     <div className="relative flex h-full flex-col gap-3 pt-1.5">
       <div className="flex h-11 items-center justify-between px-3.5">
-        <button className="inline-flex h-7 w-max items-center justify-center gap-1 rounded-md bg-fuchsia-500 px-2.5 text-xs font-medium text-zinc-200 shadow-button hover:bg-fuchsia-600">
+        <ComposerModal />
-          <ComposeIcon width={14} height={14} />
-          Compose
-        </button>
         <EventCollector />
       </div>
       {/* Newsfeed */}

tailwind.config.js

@@ -36,6 +36,12 @@ module.exports = {
           rgb(74, 4, 78) 0px 0px 0px 1px,
           rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset
         `,
+        'mini-button': `
+          rgba(13, 16, 23, 0.36) 0px 2px 8px,
+          rgba(13, 16, 23, 0.36) 0px 2px 4px,
+          rgba(13, 16, 23, 0.36) 0px 0px 0px 1px,
+          rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset
+        `,
       },
       backgroundColor: {
         'near-black': '#07070d',