wip: port more component to new ui

2023-08-02 14:48:51 +07:00
parent a85bcf917b
commit babcd8698e
20 changed files with 410 additions and 559 deletions
--- a/src/shared/composer/composer.tsx
+++ b/src/shared/composer/composer.tsx
@@ -14,7 +14,6 @@ import { CancelIcon, LoaderIcon, PlusCircleIcon } from '@shared/icons';
 import { MentionNote } from '@shared/notes';

 import { useComposer } from '@stores/composer';
-import { FULL_RELAYS } from '@stores/constants';

 import { usePublish } from '@utils/hooks/usePublish';
 import { useImageUploader } from '@utils/hooks/useUploader';
@@ -45,7 +44,7 @@ export function Composer() {
      Image.configure({
        HTMLAttributes: {
          class:
-            'rounded-lg w-2/3 h-auto border border-zinc-800 outline outline-2 outline-offset-0 outline-zinc-700 ml-1',
+            'rounded-lg w-2/3 h-auto border border-white/10 outline outline-2 outline-offset-0 outline-white/20 ml-1',
        },
      }),
    ],
@@ -54,7 +53,7 @@ export function Composer() {
      attributes: {
        class: twMerge(
          'scrollbar-hide markdown break-all max-h-[500px] overflow-y-auto outline-none pr-2',
-          `${reply.id ? '!min-h-42' : '!min-h-[100px]'}`
+          `${reply.id ? '!min-h-42' : '!min-h-[120px]'}`
        ),
      },
    },
@@ -88,13 +87,13 @@ export function Composer() {
      if (reply.id && reply.pubkey) {
        if (reply.root && reply.root.length > 1) {
          tags = [
-            ['e', reply.root, FULL_RELAYS[0], 'root'],
-            ['e', reply.id, FULL_RELAYS[0], 'reply'],
+            ['e', reply.root, 'wss://relayable.org', 'root'],
+            ['e', reply.id, 'wss://relayable.org', 'reply'],
            ['p', reply.pubkey],
          ];
        } else {
          tags = [
-            ['e', reply.id, FULL_RELAYS[0], 'reply'],
+            ['e', reply.id, 'wss://relayable.org', 'reply'],
            ['p', reply.pubkey],
          ];
        }
@@ -131,7 +130,7 @@ export function Composer() {
    <div className="flex h-full flex-col px-4 pb-4">
      <div className="flex h-full w-full gap-3">
        <div className="flex w-8 shrink-0 items-center justify-center">
-          <div className="h-full w-[2px] bg-zinc-800" />
+          <div className="h-full w-[2px] bg-white/10" />
        </div>
        <div className="w-full">
          <EditorContent
@@ -147,9 +146,9 @@ export function Composer() {
              <button
                type="button"
                onClick={() => clearReply()}
-                className="absolute right-3 top-3 inline-flex h-6 w-6 items-center justify-center gap-2 rounded bg-zinc-800 px-2 hover:bg-zinc-700"
+                className="absolute right-3 top-3 inline-flex h-6 w-6 items-center justify-center rounded bg-white/10 px-2"
              >
-                <CancelIcon className="h-4 w-4 text-zinc-100" />
+                <CancelIcon className="h-4 w-4 text-white" />
              </button>
            </div>
          )}
@@ -159,15 +158,15 @@ export function Composer() {
        <button
          type="button"
          onClick={() => uploadImage()}
-          className="inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-zinc-800"
+          className="inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-white/10"
        >
-          <PlusCircleIcon className="h-5 w-5 text-zinc-500" />
+          <PlusCircleIcon className="h-5 w-5 text-white/50" />
        </button>
        <Button onClick={() => submit()} preset="publish">
          {status === 'loading' ? (
-            <LoaderIcon className="h-4 w-4 animate-spin text-zinc-100" />
+            <LoaderIcon className="h-4 w-4 animate-spin text-white" />
          ) : (
-            'Publish'
+            'Postr'
          )}
        </Button>
      </div>
--- a/src/shared/composer/modal.tsx
+++ b/src/shared/composer/modal.tsx
@@ -1,5 +1,4 @@
-import { Dialog, Transition } from '@headlessui/react';
-import { Fragment } from 'react';
+import * as Dialog from '@radix-ui/react-dialog';
 import { useHotkeys } from 'react-hotkeys-hook';

 import { Button } from '@shared/button';
@@ -27,64 +26,39 @@ export function ComposerModal() {
  useHotkeys(COMPOSE_SHORTCUT, () => toggle(true));

  return (
-    <>
-      <Button onClick={() => toggle(true)} preset="small">
-        <ComposeIcon className="h-4 w-4" />
-        Postr
-      </Button>
-      <Transition appear show={open} 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" />
-          </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-xl border-t border-zinc-800/50 bg-zinc-900">
-                <div className="flex items-center justify-between px-4 py-4">
-                  <div className="flex items-center gap-2">
-                    {account && <ComposerUser pubkey={account.pubkey} />}
-                    <span>
-                      <ChevronRightIcon
-                        width={14}
-                        height={14}
-                        className="text-zinc-500"
-                      />
-                    </span>
-                    <div className="inline-flex h-7 w-max items-center justify-center gap-0.5 rounded bg-zinc-800 pl-3 pr-1.5 text-sm font-medium text-zinc-400">
-                      New Post
-                      <ChevronDownIcon className="h-4 w-4" />
-                    </div>
-                  </div>
-                  <button
-                    onClick={closeModal}
-                    type="button"
-                    className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-800"
-                  >
-                    <CancelIcon width={16} height={16} className="text-zinc-500" />
-                  </button>
+    <Dialog.Root open={open}>
+      <Dialog.Trigger asChild>
+        <Button preset="small">
+          <ComposeIcon className="h-4 w-4" />
+          Postr
+        </Button>
+      </Dialog.Trigger>
+      <Dialog.Portal className="relative z-10">
+        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-xl" />
+        <Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
+          <div className="relative h-min w-full max-w-2xl rounded-xl bg-white/10">
+            <div className="flex items-center justify-between px-4 py-4">
+              <div className="flex items-center gap-2">
+                {account && <ComposerUser pubkey={account.pubkey} />}
+                <span>
+                  <ChevronRightIcon className="h-4 w-4 text-white/50" />
+                </span>
+                <div className="inline-flex h-7 w-max items-center justify-center gap-0.5 rounded bg-white/10 pl-3 pr-1.5 text-sm font-medium text-white">
+                  New Post
+                  <ChevronDownIcon className="h-4 w-4" />
                </div>
-                <Composer />
-              </Dialog.Panel>
-            </Transition.Child>
+              </div>
+              <Dialog.Close
+                onClick={() => closeModal()}
+                className="inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-zinc-800"
+              >
+                <CancelIcon className="h-5 w-5 text-white/50" />
+              </Dialog.Close>
+            </div>
+            <Composer />
          </div>
-        </Dialog>
-      </Transition>
-    </>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
  );
 }
--- a/src/shared/composer/user.tsx
+++ b/src/shared/composer/user.tsx
@@ -9,15 +9,13 @@ export function ComposerUser({ pubkey }: { pubkey: string }) {

  return (
    <div className="flex items-center gap-3">
-      <div className="h-8 w-8 shrink-0 overflow-hidden rounded-md bg-zinc-900">
-        <Image
-          src={user?.picture || user?.image}
-          fallback={DEFAULT_AVATAR}
-          alt={pubkey}
-          className="h-8 w-8 object-cover"
-        />
-      </div>
-      <h5 className="text-base font-semibold leading-none text-zinc-100">
+      <Image
+        src={user?.picture || user?.image}
+        fallback={DEFAULT_AVATAR}
+        alt={pubkey}
+        className="h-8 w-8 shrink-0 rounded-md object-cover"
+      />
+      <h5 className="text-base font-semibold leading-none text-white">
        {user?.nip05 || user?.name || (
          <div className="h-3 w-20 animate-pulse rounded-sm bg-zinc-700" />
        )}