wip: dark mode - light mode

package.json

@@ -71,8 +71,10 @@
     "react-hook-form": "^7.47.0",
     "react-markdown": "^8.0.7",
     "react-router-dom": "^6.16.0",
+    "react-string-replace": "^1.1.1",
     "reactflow": "^11.9.2",
     "remark-gfm": "^3.0.1",
+    "tauri-controls": "^0.2.0",
     "tippy.js": "^6.3.7",
     "virtua": "^0.9.1",
     "zustand": "^4.4.2"

pnpm-lock.yaml

@@ -164,12 +164,18 @@ dependencies:
   react-router-dom:
     specifier: ^6.16.0
     version: 6.16.0(react-dom@18.2.0)(react@18.2.0)
+  react-string-replace:
+    specifier: ^1.1.1
+    version: 1.1.1
   reactflow:
     specifier: ^11.9.2
     version: 11.9.2(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0)
   remark-gfm:
     specifier: ^3.0.1
     version: 3.0.1
+  tauri-controls:
+    specifier: ^0.2.0
+    version: 0.2.0(@tauri-apps/plugin-os@2.0.0-alpha.2)(@tauri-apps/plugin-window@2.0.0-alpha.1)(clsx@2.0.0)(react-dom@18.2.0)(react@18.2.0)(tailwind-merge@1.14.0)
   tippy.js:
     specifier: ^6.3.7
     version: 6.3.7
@@ -3153,7 +3159,6 @@ packages:
   /clsx@2.0.0:
     resolution: {integrity: sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==}
     engines: {node: '>=6'}
-    dev: true
 
   /color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
@@ -5804,6 +5809,11 @@ packages:
       react: 18.2.0
     dev: false
 
+  /react-string-replace@1.1.1:
+    resolution: {integrity: sha512-26TUbLzLfHQ5jO5N7y3Mx88eeKo0Ml0UjCQuX4BMfOd/JX+enQqlKpL1CZnmjeBRvQE8TR+ds9j1rqx9CxhKHQ==}
+    engines: {node: '>=0.12.0'}
+    dev: false
+
   /react-style-singleton@2.2.1(@types/react@18.2.24)(react@18.2.0):
     resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==}
     engines: {node: '>=10'}
@@ -6211,7 +6221,6 @@ packages:
 
   /tailwind-merge@1.14.0:
     resolution: {integrity: sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==}
-    dev: true
 
   /tailwindcss@3.3.3:
     resolution: {integrity: sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==}
@@ -6244,6 +6253,25 @@ packages:
       - ts-node
     dev: true
 
+  /tauri-controls@0.2.0(@tauri-apps/plugin-os@2.0.0-alpha.2)(@tauri-apps/plugin-window@2.0.0-alpha.1)(clsx@2.0.0)(react-dom@18.2.0)(react@18.2.0)(tailwind-merge@1.14.0):
+    resolution: {integrity: sha512-/IDXLhcqGRjNN7QKfzgyr2y4QfnWT9MSIdqxrjH2oElXyngSo/cQltTb8LT6h/sH/7gRiSQMvQBEmavfn9Hk0w==}
+    peerDependencies:
+      '@tauri-apps/plugin-os': 2.0.0-alpha.2
+      '@tauri-apps/plugin-window': 2.0.0-alpha.1
+      clsx: ^2.0.0
+      react: ^18.2.0
+      react-dom: ^18.2.0
+      tailwind-merge: ^1.14.0
+    dependencies:
+      '@tauri-apps/api': 2.0.0-alpha.8
+      '@tauri-apps/plugin-os': 2.0.0-alpha.2
+      '@tauri-apps/plugin-window': 2.0.0-alpha.1
+      clsx: 2.0.0
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      tailwind-merge: 1.14.0
+    dev: false
+
   /text-table@0.2.0:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
     dev: true

src-tauri/tauri.linux.conf.json

@@ -17,6 +17,7 @@
         "height": 800,
         "minWidth": 1080,
         "minHeight": 800,
+        "decorations": false,
         "resizable": true,
         "theme": "Dark",
         "title": "Lume",

src/app/auth/unlock.tsx

@@ -83,44 +83,37 @@ export function UnlockScreen() {
   return (
     <div className="flex h-full w-full items-center justify-center">
       <div className="mx-auto w-full max-w-md">
-        <div className="mb-4 pb-4">
-          <h1 className="text-center text-2xl font-semibold text-white">
-            Enter password to unlock
-          </h1>
-        </div>
-        <form onSubmit={handleSubmit(onSubmit)} className="mb-0 flex flex-col">
-          <div className="flex flex-col rounded-lg bg-white/5">
-            <div className="w-full rounded-t-lg border-b border-white/10 bg-white/5 p-4">
-              <User pubkey={db.account.pubkey} variant="simple" />
+        <div className="mb-8 inline-flex w-full items-center justify-center">
+          <User pubkey={db.account.pubkey} variant="avatar" />
         </div>
+        <form
+          onSubmit={handleSubmit(onSubmit)}
+          className="mx-auto mb-0 flex w-2/3 flex-col"
+        >
           <div className="relative">
             <input
               {...register('password', { required: true, minLength: 4 })}
               type={showPassword ? 'text' : 'password'}
-                placeholder="Password"
-                className="relative h-12 w-full rounded-b-lg bg-white/10 py-1 text-center tracking-widest text-white !outline-none backdrop-blur-xl placeholder:tracking-normal placeholder:text-white/50"
+              placeholder="Enter password"
+              className="relative h-12 w-full rounded-lg bg-zinc-300 py-1 text-center tracking-widest text-zinc-900 !outline-none backdrop-blur-xl placeholder:tracking-normal placeholder:text-zinc-500 dark:bg-zinc-800 dark:text-zinc-100 dark:placeholder:text-zinc-500"
             />
             <button
               type="button"
               onClick={() => setShowPassword((prev) => !prev)}
-                className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 backdrop-blur-xl hover:bg-white/10"
+              className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded-full p-1 backdrop-blur-xl hover:bg-black/10 dark:hover:bg-white/10"
             >
               {showPassword ? (
-                  <EyeOffIcon className="h-5 w-5 text-white/50 group-hover:text-white" />
+                <EyeOffIcon className="group-hover:text-dark h-5 w-5 text-black/50 dark:text-white/50 dark:group-hover:text-white" />
               ) : (
-                  <EyeOnIcon className="h-5 w-5 text-white/50 group-hover:text-white" />
+                <EyeOnIcon className="group-hover:text-dark h-5 w-5 text-black/50 dark:text-white/50 dark:group-hover:text-white" />
               )}
             </button>
           </div>
-          </div>
-          <div className="flex flex-col items-center justify-center">
-            <span className="mb-3 text-sm text-red-400">
-              {errors.password && <p>{errors.password.message}</p>}
-            </span>
+          <div className="mt-2 flex flex-col">
             <button
               type="submit"
               disabled={!isDirty || !isValid}
-              className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none disabled:opacity-50"
+              className="inline-flex h-10 w-full items-center justify-between gap-2 rounded-lg bg-interor-600 px-6 text-white hover:bg-interor-700 focus:outline-none disabled:opacity-50"
             >
               {loading ? (
                 <>
@@ -136,30 +129,6 @@ export function UnlockScreen() {
                 </>
               )}
             </button>
-            <div className="mt-8 w-full">
-              <div className="flex items-center gap-2.5">
-                <div className="h-px flex-1 bg-white/10" />
-                <p className="shrink-0 text-sm font-medium text-white/50">
-                  Forgot password?
-                </p>
-                <div className="h-px flex-1 bg-white/10" />
-              </div>
-              <div className="mt-2 flex flex-col">
-                <Link
-                  to="/auth/reset"
-                  className="inline-flex h-10 w-full items-center justify-center rounded-lg text-center text-sm font-medium text-white/70 hover:bg-white/20"
-                >
-                  Reset password if you still have a private key
-                </Link>
-                <button
-                  type="button"
-                  onClick={logout}
-                  className="inline-flex h-10 w-full items-center justify-center rounded-lg text-center text-sm font-medium text-white/70 hover:bg-white/20"
-                >
-                  Login with another account
-                </button>
-              </div>
-            </div>
           </div>
         </form>
       </div>

src/app/space/index.tsx

@@ -84,7 +84,7 @@ export function SpaceScreen() {
   }, [fetchWidgets]);
 
   return (
-    <div className="scrollbar-hide inline-flex h-full w-full min-w-full flex-nowrap items-start divide-x divide-white/5 overflow-x-auto overflow-y-hidden">
+    <div className="scrollbar-hide inline-flex h-full w-full min-w-full flex-nowrap items-start divide-x divide-zinc-200 overflow-x-auto overflow-y-hidden dark:divide-zinc-800">
       {!widgets ? (
         <div className="flex shrink-0 grow-0 basis-[400px] flex-col">
           <div className="flex w-full flex-1 items-center justify-center p-3">

src/app/splash.tsx

@@ -50,12 +50,12 @@ export function SplashScreen() {
   }, [ndk, db.account]);
 
   return (
-    <div className="relative flex h-screen w-screen items-center justify-center bg-black">
-      <div data-tauri-drag-region className="absolute left-0 top-0 z-10 h-11 w-full" />
+    <div className="bg-zinc-50 dark:bg-zinc-950 relative flex h-screen w-screen items-center justify-center">
+      <div data-tauri-drag-region className="absolute left-0 top-0 z-10 h-16 w-full" />
       <div className="flex min-h-0 w-full flex-1 items-center justify-center px-8">
         <div className="flex flex-col items-center justify-center gap-6">
-          <LoaderIcon className="h-6 w-6 animate-spin text-white" />
-          <h3 className="text-lg font-semibold leading-none text-white">
+          <LoaderIcon className="text-zinc-950 dark:text-zinc-50 h-6 w-6 animate-spin" />
+          <h3 className="text-zinc-950 dark:text-zinc-50 text-lg font-medium leading-none">
             {!ndk ? 'Connecting...' : 'Syncing...'}
           </h3>
         </div>

src/shared/composer/modal.tsx

@@ -28,10 +28,10 @@ export function ComposerModal() {
       <Dialog.Trigger asChild>
         <button
           type="button"
-          className="flex h-9 items-center gap-2 rounded-full border-t border-white/10 bg-white/20 px-4 text-sm font-semibold text-white/80 hover:bg-fuchsia-500 hover:text-white"
+          className="flex h-9 items-center gap-2 rounded-full bg-zinc-200 px-4 text-sm font-semibold text-zinc-900  hover:bg-interor-600 hover:text-white dark:bg-zinc-900 dark:text-zinc-100 dark:hover:bg-interor-600"
         >
           New
-          <ComposeIcon className="h-4 w-4 text-white" />
+          <ComposeIcon className="h-4 w-4" />
         </button>
       </Dialog.Trigger>
       <Dialog.Portal>

src/shared/layouts/app.tsx

@@ -1,14 +1,17 @@
 import { Outlet, ScrollRestoration } from 'react-router-dom';
+import { WindowTitlebar } from 'tauri-controls';
 
 import { Navigation } from '@shared/navigation';
 
 export function AppLayout() {
   return (
-    <div className="flex h-screen w-screen">
-      <div className="shrink-0">
+    <div className="h-screen w-screen bg-zinc-50 text-zinc-50 dark:bg-zinc-950 dark:text-zinc-950">
+      <WindowTitlebar className="border-b border-zinc-200 dark:border-zinc-800" />
+      <div className="flex h-full">
+        <div className="h-full shrink-0">
           <Navigation />
         </div>
-      <div className="h-full w-full flex-1">
+        <div className="h-full flex-1">
           <Outlet />
           <ScrollRestoration
             getKey={(location) => {
@@ -17,5 +20,6 @@ export function AppLayout() {
           />
         </div>
       </div>
+    </div>
   );
 }

src/shared/layouts/auth.tsx

@@ -1,10 +1,13 @@
 import { Outlet } from 'react-router-dom';
+import { WindowTitlebar } from 'tauri-controls';
 
 export function AuthLayout() {
   return (
-    <div className="relative h-screen w-screen">
-      <div className="absolute left-0 top-0 z-50 h-16 w-full" data-tauri-drag-region />
+    <div className="relative h-screen w-screen bg-zinc-50 dark:bg-zinc-950">
+      <WindowTitlebar className="border-b border-zinc-200 dark:border-zinc-800" />
+      <div className="bg-zinc-100 dark:bg-zinc-900">
         <Outlet />
       </div>
+    </div>
   );
 }

src/shared/navigation.tsx

@@ -20,28 +20,23 @@ export function Navigation() {
   const navigate = useNavigate();
 
   return (
-    <div className="relative flex h-full w-[232px] flex-col border-r border-white/5">
+    <div className="relative flex h-full w-[232px] flex-col border-r border-zinc-200 dark:border-zinc-800">
       <div
         data-tauri-drag-region
         className="inline-flex h-16 w-full items-center justify-between px-3"
       >
-        <div
-          className={twMerge(
-            'inline-flex items-center gap-4',
-            db.platform === 'darwin' ? 'pl-20' : 'pl-2'
-          )}
-        >
+        <div className="inline-flex items-center gap-4 pl-2">
           <button
             type="button"
             onClick={() => navigate(-1)}
-            className="inline-flex h-9 items-center justify-center text-white/50 hover:text-white"
+            className="inline-flex h-9 items-center justify-center text-zinc-400 hover:text-zinc-500 dark:text-zinc-500 dark:hover:text-zinc-100"
           >
             <ArrowLeftIcon className="h-5 w-5" />
           </button>
           <button
             type="button"
             onClick={() => navigate(1)}
-            className="inline-flex h-9 items-center justify-center text-white/50 hover:text-white"
+            className="inline-flex h-9 items-center justify-center text-zinc-400 hover:text-zinc-500 dark:text-zinc-500 dark:hover:text-zinc-100"
           >
             <ArrowRightIcon className="h-5 w-5" />
           </button>
@@ -60,8 +55,8 @@ export function Navigation() {
               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'
+                  ? 'border-interor-600 bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100'
+                  : 'border-transparent text-zinc-500 dark:text-zinc-500'
               )
             }
           >
@@ -77,8 +72,8 @@ export function Navigation() {
               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'
+                  ? 'border-interor-600 bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100'
+                  : 'border-transparent text-zinc-500 dark:text-zinc-500'
               )
             }
           >
@@ -94,8 +89,8 @@ export function Navigation() {
               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'
+                  ? 'border-interor-600 bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100'
+                  : 'border-transparent text-zinc-500 dark:text-zinc-500'
               )
             }
           >
@@ -111,8 +106,8 @@ export function Navigation() {
               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'
+                  ? 'border-interor-600 bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100'
+                  : 'border-transparent text-zinc-500 dark:text-zinc-500'
               )
             }
           >
@@ -128,8 +123,8 @@ export function Navigation() {
               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'
+                  ? 'border-interor-600 bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100'
+                  : 'border-transparent text-zinc-500 dark:text-zinc-500'
               )
             }
           >

src/shared/notes/child.tsx

@@ -81,7 +81,7 @@ export function ChildNote({ id, root }: { id: string; root?: string }) {
       <div className="absolute bottom-0 left-[18px] h-[calc(100%-3.6rem)] w-0.5 bg-gradient-to-t from-white/20 to-white/10" />
       <div className="mb-6 flex flex-col">
         <User pubkey={data.pubkey} time={data.created_at} />
-        <div className="-mt-5 flex items-start gap-3">
+        <div className="-mt-4 flex items-start gap-3">
           <div className="w-10 shrink-0" />
           <div className="relative z-20 flex-1">
             {renderKind(data)}

src/shared/notes/kinds/repost.tsx

@@ -65,13 +65,13 @@ export function Repost({
         <div
           className={twMerge(
             'relative flex flex-col gap-1 overflow-hidden rounded-xl px-3 py-3',
-            !lighter ? 'bg-white/10 backdrop-blur-xl' : ''
+            !lighter ? 'bg-zinc-100 dark:bg-zinc-900' : 'bg-transparent'
           )}
         >
           <User pubkey={event.pubkey} time={event.created_at} variant="repost" />
           <div className="relative flex flex-col">
             <User pubkey={embedEvent.pubkey} time={embedEvent.created_at} />
-            <div className="-mt-5 flex items-start gap-3">
+            <div className="-mt-4 flex items-start gap-3">
               <div className="w-10 shrink-0" />
               <div className="relative z-20 flex-1">
                 {renderKind(embedEvent)}
@@ -104,7 +104,7 @@ export function Repost({
         <div
           className={twMerge(
             'relative overflow-hidden rounded-xl px-3 py-3',
-            !lighter ? 'bg-white/10 backdrop-blur-xl' : ''
+            !lighter ? 'bg-zinc-100 dark:bg-zinc-900' : 'bg-transparent'
           )}
         >
           <div className="relative flex flex-col">
@@ -116,7 +116,7 @@ export function Repost({
                 Lume <span className="text-green-500">(System)</span>
               </h5>
             </div>
-            <div className="-mt-6 flex items-start gap-3">
+            <div className="-mt-4 flex items-start gap-3">
               <div className="w-11 shrink-0" />
               <div>
                 <div className="relative z-20 mt-1 flex-1 select-text">
@@ -142,13 +142,13 @@ export function Repost({
       <div
         className={twMerge(
           'relative flex flex-col gap-1 overflow-hidden rounded-xl px-3 py-3',
-          !lighter ? 'bg-white/10 backdrop-blur-xl' : ''
+          !lighter ? 'bg-zinc-100 dark:bg-zinc-900' : 'bg-transparent'
         )}
       >
         <User pubkey={event.pubkey} time={event.created_at} variant="repost" />
         <div className="relative flex flex-col">
           <User pubkey={data.pubkey} time={data.created_at} />
-          <div className="-mt-5 flex items-start gap-3">
+          <div className="-mt-4 flex items-start gap-3">
             <div className="w-10 shrink-0" />
             <div className="relative z-20 flex-1">
               {renderKind(data)}

src/shared/notes/kinds/text.tsx

@@ -36,14 +36,14 @@ export function TextNote(props: { content?: string }) {
   return (
     <div>
       <ReactMarkdown
-        className="markdown"
+        className="prose prose-zinc max-w-none select-text dark:prose-invert prose-headings:mb-1 prose-headings:mt-3 prose-p:mb-0 prose-p:mt-0 prose-p:last:mb-0 prose-a:font-normal prose-a:text-interor-500 hover:prose-a:text-interor-600 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-interor-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-pre:bg-white/10 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2"
         remarkPlugins={[remarkGfm]}
         components={{
           a: ({ href }) => {
             const cleanURL = new URL(href);
             cleanURL.search = '';
             return (
-              <Link to={href} target="_blank" className="line-clamp-1">
+              <Link to={href} target="_blank" className="line-clamp-1 w-full break-all">
                 {cleanURL.hostname + cleanURL.pathname}
               </Link>
             );

src/shared/notes/mentions/hashtag.tsx

@@ -24,7 +24,7 @@ export function Hashtag({ tag }: { tag: string }) {
           content: tag.replace('#', ''),
         })
       }
-      className="break-all text-fuchsia-400 hover:text-fuchsia-500"
+      className="break-all text-interor-500 hover:text-interor-600"
     >
       {tag}
     </span>

src/shared/notes/mentions/user.tsx

@@ -30,7 +30,7 @@ export const MentionUser = memo(function MentionUser({ pubkey }: { pubkey: strin
           content: pubkey,
         })
       }
-      className="break-words text-fuchsia-400 hover:text-fuchsia-500"
+      className="break-words text-interor-500 hover:text-interor-600"
     >
       {'@' +
         (user?.name ||

src/shared/notes/preview/image.tsx

@@ -17,7 +17,7 @@ export function ImagePreview({ urls, truncate }: { urls: string[]; truncate?: bo
           <div key={url} className="group relative min-w-0 shrink-0 grow-0 basis-full">
             <img
               src={url}
-              alt={url}
+              alt="image"
               className={`${
                 truncate ? 'h-auto max-h-[300px]' : 'h-auto'
               } w-full rounded-lg border border-white/10 object-cover`}

src/shared/notes/preview/video.tsx

@@ -21,7 +21,7 @@ export function VideoPreview({ urls }: { urls: string[] }) {
           <MediaProvider>
             <Poster
               className="vds-poster"
-              src="https://thumbnail.video/api/get?url=${url}&seconds=1"
+              src={`https://thumbnail.video/api/get?url=${url}&seconds=1`}
               alt={url}
             />
           </MediaProvider>

src/shared/notes/wrapper.tsx

@@ -24,14 +24,14 @@ export function NoteWrapper({
       <div
         className={twMerge(
           'relative overflow-hidden rounded-xl px-3 py-4',
-          !lighter ? 'bg-white/10 backdrop-blur-xl' : 'bg-transparent'
+          !lighter ? 'bg-zinc-100 dark:bg-zinc-900' : 'bg-transparent'
         )}
       >
         <div className="relative">{root && <ChildNote id={root} />}</div>
         <div className="relative">{reply && <ChildNote id={reply} root={root} />}</div>
         <div className="relative flex flex-col">
           <User pubkey={event.pubkey} time={event.created_at} />
-          <div className="-mt-5 flex items-start gap-3">
+          <div className="-mt-4 flex items-start gap-3">
             <div className="w-10 shrink-0" />
             <div className="relative z-20 flex-1">
               {cloneElement(

src/shared/titleBar.tsx

@@ -14,14 +14,14 @@ export function TitleBar({ id, title }: { id?: string; title: string }) {
       className="flex h-11 w-full shrink-0 items-center justify-between overflow-hidden px-3"
     >
       <div className="w-6" />
-      <h3 className="text-sm font-bold text-white">{title}</h3>
+      <h3 className="text-sm font-medium text-zinc-900 dark:text-zinc-100">{title}</h3>
       {id ? (
         <button
           type="button"
           onClick={() => remove(db, id)}
-          className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded backdrop-blur-xl hover:bg-white/10"
+          className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded text-zinc-900 backdrop-blur-xl hover:bg-zinc-100 dark:text-zinc-100 dark:hover:bg-zinc-900"
         >
-          <CancelIcon className="h-3 w-3 text-white" />
+          <CancelIcon className="h-3 w-3" />
         </button>
       ) : (
         <div className="w-6" />

src/utils/parser.ts

@@ -1,5 +1,5 @@
 import { nip19 } from 'nostr-tools';
-import { EventPointer, ProfilePointer } from 'nostr-tools/lib/nip19';
+import { AddressPointer, EventPointer, ProfilePointer } from 'nostr-tools/lib/nip19';
 
 import { RichContent } from '@utils/types';
 
@@ -84,7 +84,7 @@ export function parser(eventContent: string) {
       }
 
       // nostr account references
-      if (word.startsWith('nostr:note1') || word.startsWith('noté')) {
+      if (word.startsWith('nostr:note1') || word.startsWith('note1')) {
         const note = word.replace('nostr:', '').replace(/[^a-zA-Z0-9 ]/g, '');
         content.notes.push(nip19.decode(note).data as string);
         return word.replace(word, '');
@@ -98,6 +98,15 @@ export function parser(eventContent: string) {
         return word.replace(word, '');
       }
 
+      // nostr address references
+      if (word.startsWith('nostr:naddr1') || word.startsWith('naddr1')) {
+        const naddr = word.replace('nostr:', '').replace(/[^a-zA-Z0-9 ]/g, '');
+        const decoded = nip19.decode(naddr).data as AddressPointer;
+        // TODO
+        console.log('todo: ', decoded);
+        return word.replace(word, '');
+      }
+
       // normal word
       return word;
     });

tailwind.config.js

@@ -1,12 +1,28 @@
 /** @type {import('tailwindcss').Config} */
 
-const defaultTheme = require('tailwindcss/defaultTheme')
+const defaultTheme = require('tailwindcss/defaultTheme');
 
 module.exports = {
   content: ['./src/**/*.{js,ts,jsx,tsx}', 'index.html'],
   darkMode: 'class',
   theme: {
     extend: {
+      colors: {
+        // 'international orange'
+        interor: {
+          50: 'hsl(32, 100%, 96%)',
+          100: 'hsl(34, 100%, 91%)',
+          200: 'hsl(31, 100%, 82%)',
+          300: 'hsl(30, 100%, 71%)',
+          400: 'hsl(26, 100%, 60%)',
+          500: 'hsl(23, 100%, 52%)',
+          600: 'hsl(19, 100%, 50%)',
+          700: 'hsl(15, 98%, 40%)',
+          800: 'hsl(13, 87%, 34%)',
+          900: 'hsl(13, 83%, 28%)',
+          950: 'hsl(11, 89%, 15%)',
+        },
+      },
       fontFamily: {
         sans: ['Inter Variable', ...defaultTheme.fontFamily.sans],
       },