nostr/lume
1
0
Fork 0
mirror of https://github.com/luminous-devs/lume.git synced 2024-09-19 11:43:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

wip: ui

Browse Source
This commit is contained in:
Ren Amamiya 2023-10-08 09:31:11 +07:00
parent cb91373d33
commit bce76bd41c
66 changed files with 216 additions and 214 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -4,7 +4,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lume</title> <title>Lume</title>
</head> </head>
<body class="relative cursor-default bg-black select-none overflow-hidden font-sans antialiased h-screen w-screen text-white"> <body class="relative cursor-default select-none overflow-hidden font-sans antialiased h-screen w-screen">
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/main.jsx"></script> <script type="module" src="/src/main.jsx"></script>
</body> </body>

1
src-tauri/Cargo.toml
View File

@ -17,7 +17,6 @@ tauri-build = { version = "2.0.0-alpha.8", features = [] }
serde_json = "1.0" serde_json = "1.0"
serde = { version = "1.0", features = ["derive"] } serde = { version = "1.0", features = ["derive"] }
tauri = { version = "2.0.0-alpha", features = [ tauri = { version = "2.0.0-alpha", features = [
"macos-private-api",
"native-tls-vendored", "native-tls-vendored",
] } ] }
tauri-plugin-app = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v2" } tauri-plugin-app = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v2" }

1
src-tauri/tauri.conf.json
View File

@ -82,7 +82,6 @@
"timestampUrl": "" "timestampUrl": ""
} }
}, },
"macOSPrivateApi": true,
"security": { "security": {
"dangerousRemoteDomainIpcAccess": [ "dangerousRemoteDomainIpcAccess": [
{ {

2
src-tauri/tauri.macos.conf.json
View File

@ -23,7 +23,7 @@
"theme": "Dark", "theme": "Dark",
"title": "Lume", "title": "Lume",
"titleBarStyle": "Overlay", "titleBarStyle": "Overlay",
"transparent": true, "transparent": false,
"center": true, "center": true,
"fullscreen": false, "fullscreen": false,
"hiddenTitle": true, "hiddenTitle": true,

7
src-tauri/tauri.windows.conf.json
View File

@ -21,12 +21,15 @@
"resizable": true, "resizable": true,
"theme": "Dark", "theme": "Dark",
"title": "Lume", "title": "Lume",
"transparent": false,
"center": true, "center": true,
"fullscreen": false, "fullscreen": false,
"hiddenTitle": true, "hiddenTitle": true,
"visible": false, "visible": false,
"fileDropEnabled": true "fileDropEnabled": true,
"transparent": true,
"windowEffects": {
"effects": ["mica"]
}
} }
] ]
} }

12
src/app.css
View File

@ -49,18 +49,6 @@ input::-ms-clear {
scrollbar-width: none; scrollbar-width: none;
} }
.markdown {
@apply prose prose-white max-w-none select-text text-white 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 hover:prose-a:text-fuchsia-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-fuchsia-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;
}
.markdown-article {
@apply prose prose-white max-w-none select-text text-white/80 prose-headings:mb-1 prose-headings:mt-3 prose-headings:text-white prose-p:mb-2 prose-p:mt-0 prose-p:break-words prose-p:[word-break:break-word] prose-a:break-words prose-a:break-all prose-a:font-normal hover:prose-a:text-fuchsia-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-fuchsia-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;
}
.markdown-simple {
@apply prose prose-white max-w-none select-text hyphens-auto text-white/70 prose-headings:mb-1 prose-headings:mt-3 prose-p:mb-0 prose-p:mt-0 prose-p:break-words prose-p:[word-break:break-word] prose-p:last:mb-0 prose-a:break-words prose-a:break-all prose-a:font-normal hover:prose-a:text-fuchsia-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-fuchsia-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;
}
.ProseMirror p.is-empty::before { .ProseMirror p.is-empty::before {
@apply text-white/50; @apply text-white/50;
content: attr(data-placeholder); content: attr(data-placeholder);

4
src/app/auth/create/step-1.tsx
View File

@ -1,7 +1,7 @@
import { downloadDir } from '@tauri-apps/api/path';
import { writeText } from '@tauri-apps/plugin-clipboard-manager'; import { writeText } from '@tauri-apps/plugin-clipboard-manager';
import { message, save } from '@tauri-apps/plugin-dialog'; import { message, save } from '@tauri-apps/plugin-dialog';
import { writeTextFile } from '@tauri-apps/plugin-fs'; import { writeTextFile } from '@tauri-apps/plugin-fs';
import { downloadDir } from '@tauri-apps/api/path';
import { generatePrivateKey, getPublicKey, nip19 } from 'nostr-tools'; import { generatePrivateKey, getPublicKey, nip19 } from 'nostr-tools';
import { useEffect, useMemo, useState } from 'react'; import { useEffect, useMemo, useState } from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
@ -132,7 +132,7 @@ export function CreateStep1Screen() {
<button <button
type="button" type="button"
onClick={() => download()} onClick={() => download()}
className="inline-flex h-12 w-full items-center justify-center rounded-lg bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none" className="inline-flex h-12 w-full items-center justify-center rounded-lg bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
> >
{downloaded ? 'Downloaded' : 'Download account keys'} {downloaded ? 'Downloaded' : 'Download account keys'}
</button> </button>

2
src/app/auth/create/step-2.tsx
View File

@ -127,7 +127,7 @@ export function CreateStep2Screen() {
<button <button
type="submit" type="submit"
disabled={!isDirty || !isValid} disabled={!isDirty || !isValid}
className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none" className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
> >
{loading ? ( {loading ? (
<> <>

2
src/app/auth/create/step-3.tsx
View File

@ -150,7 +150,7 @@ export function CreateStep3Screen() {
<button <button
type="submit" type="submit"
disabled={!isDirty || !isValid} disabled={!isDirty || !isValid}
className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none" className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
> >
{loading ? ( {loading ? (
<> <>

2
src/app/auth/import/step-1.tsx
View File

@ -133,7 +133,7 @@ export function ImportStep1Screen() {
<button <button
type="submit" type="submit"
disabled={!isDirty || !isValid} 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" className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
> >
{loading ? ( {loading ? (
<> <>

2
src/app/auth/import/step-2.tsx
View File

@ -127,7 +127,7 @@ export function ImportStep2Screen() {
<button <button
type="submit" type="submit"
disabled={!isDirty || !isValid} disabled={!isDirty || !isValid}
className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none" className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
> >
{loading ? ( {loading ? (
<> <>

2
src/app/auth/import/step-3.tsx
View File

@ -62,7 +62,7 @@ export function ImportStep3Screen() {
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<button <button
type="button" type="button"
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" className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
onClick={() => submit()} onClick={() => submit()}
> >
{loading ? ( {loading ? (

2
src/app/auth/migrate.tsx
View File

@ -157,7 +157,7 @@ export function MigrateScreen() {
<button <button
type="submit" type="submit"
disabled={!isDirty || !isValid} disabled={!isDirty || !isValid}
className="mt-3 inline-flex h-11 w-full items-center justify-center rounded-md bg-fuchsia-500 font-medium text-white hover:bg-fuchsia-600 disabled:pointer-events-none disabled:opacity-50" className="mt-3 inline-flex h-11 w-full items-center justify-center rounded-md bg-interor-500 font-medium text-white hover:bg-interor-600 disabled:pointer-events-none disabled:opacity-50"
> >
{loading ? ( {loading ? (
<LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-white" /> <LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-white" />

2
src/app/auth/onboarding/step-1.tsx
View File

@ -109,7 +109,7 @@ export function OnboardStep1Screen() {
type="button" type="button"
onClick={submit} onClick={submit}
disabled={loading || follows.length === 0} disabled={loading || follows.length === 0}
className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 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-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none disabled:opacity-50"
> >
{loading ? ( {loading ? (
<> <>

2
src/app/auth/onboarding/step-2.tsx
View File

@ -123,7 +123,7 @@ export function OnboardStep2Screen() {
type="button" type="button"
onClick={submit} onClick={submit}
disabled={loading || tags.size === 0 || tags.size > 3} disabled={loading || tags.size === 0 || tags.size > 3}
className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 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-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none disabled:opacity-50"
> >
{loading ? ( {loading ? (
<> <>

2
src/app/auth/onboarding/step-3.tsx
View File

@ -158,7 +158,7 @@ export function OnboardStep3Screen() {
type="button" type="button"
disabled={loading} disabled={loading}
onClick={() => submit()} onClick={() => submit()}
className="inline-flex h-11 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-11 w-full items-center justify-between gap-2 rounded-lg bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none disabled:opacity-50"
> >
{loading ? ( {loading ? (
<> <>

2
src/app/auth/reset.tsx
View File

@ -159,7 +159,7 @@ export function ResetScreen() {
<button <button
type="submit" type="submit"
disabled={!isDirty || !isValid} disabled={!isDirty || !isValid}
className="inline-flex h-12 w-full items-center justify-center rounded-md bg-fuchsia-500 font-medium text-white hover:bg-fuchsia-600 disabled:pointer-events-none disabled:opacity-50" className="inline-flex h-12 w-full items-center justify-center rounded-md bg-interor-500 font-medium text-white hover:bg-interor-600 disabled:pointer-events-none disabled:opacity-50"
> >
{loading ? ( {loading ? (
<LoaderIcon className="h-4 w-4 animate-spin text-white" /> <LoaderIcon className="h-4 w-4 animate-spin text-white" />

2
src/app/auth/unlock.tsx
View File

@ -100,7 +100,7 @@ export function UnlockScreen() {
<button <button
type="button" type="button"
onClick={() => setShowPassword((prev) => !prev)} onClick={() => setShowPassword((prev) => !prev)}
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" className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded-lg p-1 backdrop-blur-xl hover:bg-black/10 dark:hover:bg-white/10"
> >
{showPassword ? ( {showPassword ? (
<EyeOffIcon className="group-hover:text-dark h-5 w-5 text-black/50 dark:text-white/50 dark: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" />

2
src/app/auth/welcome.tsx
View File

@ -16,7 +16,7 @@ export function WelcomeScreen() {
<div className="inline-flex w-full flex-col items-center gap-3 px-4 pb-10"> <div className="inline-flex w-full flex-col items-center gap-3 px-4 pb-10">
<Link <Link
to="/auth/import" to="/auth/import"
className="inline-flex h-12 w-3/4 items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-fuchsia-500 px-4 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none" className="inline-flex h-12 w-3/4 items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-interor-500 px-4 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
> >
<span className="w-5" /> <span className="w-5" />
<span>Login with private key</span> <span>Login with private key</span>

14
src/app/chats/chat.tsx
View File

@ -71,23 +71,25 @@ export function ChatScreen() {
return ( return (
<div className="h-full w-full p-3"> <div className="h-full w-full p-3">
<div className="rounded-lg border-t border-white/5 bg-white/10 backdrop-blur-xl"> <div className="rounded-lg bg-zinc-100 backdrop-blur-xl dark:bg-zinc-900">
<div className="flex h-full flex-col justify-between overflow-hidden"> <div className="flex h-full flex-col justify-between overflow-hidden">
<div className="flex h-16 shrink-0 items-center border-b border-white/10 px-3"> <div className="flex h-16 shrink-0 items-center border-b border-zinc-200 px-3 dark:border-zinc-800">
<User pubkey={pubkey} variant="simple" /> <User pubkey={pubkey} variant="simple" />
</div> </div>
<div className="h-full w-full flex-1 px-3 py-3"> <div className="h-full w-full flex-1 px-3 py-3">
{status === 'loading' ? ( {status === 'loading' ? (
<div className="flex h-full w-full items-center justify-center"> <div className="flex h-full w-full items-center justify-center">
<div className="flex flex-col items-center gap-1.5"> <div className="flex flex-col items-center gap-1.5">
<LoaderIcon className="h-5 w-5 animate-spin text-white" /> <LoaderIcon className="h-5 w-5 animate-spin text-zinc-900 dark:text-zinc-100" />
<p className="text-sm font-medium text-white/50">Loading messages</p> <p className="text-sm font-medium text-zinc-500 dark:text-zinc-300">
Loading messages
</p>
</div> </div>
</div> </div>
) : data.length === 0 ? ( ) : data.length === 0 ? (
<div className="absolute left-1/2 top-1/2 flex w-full -translate-x-1/2 -translate-y-1/2 transform flex-col gap-1 text-center"> <div className="absolute left-1/2 top-1/2 flex w-full -translate-x-1/2 -translate-y-1/2 transform flex-col gap-1 text-center">
<h3 className="mb-2 text-4xl">🙌</h3> <h3 className="mb-2 text-4xl">🙌</h3>
<p className="leading-none text-white/50"> <p className="leading-none text-zinc-500 dark:text-zinc-300">
You two didn&apos;t talk yet, let&apos;s send first message You two didn&apos;t talk yet, let&apos;s send first message
</p> </p>
</div> </div>
@ -97,7 +99,7 @@ export function ChatScreen() {
</VList> </VList>
)} )}
</div> </div>
<div className="z-50 shrink-0 rounded-b-lg border-t border-white/5 bg-white/10 p-3 backdrop-blur-xl"> <div className="shrink-0 rounded-b-lg border-t border-zinc-300 bg-zinc-200 p-3 backdrop-blur-xl dark:border-zinc-700 dark:bg-zinc-800">
<ChatForm <ChatForm
receiverPubkey={pubkey} receiverPubkey={pubkey}
userPubkey={db.account.pubkey} userPubkey={db.account.pubkey}

6
src/app/chats/components/chatForm.tsx
View File

@ -47,7 +47,7 @@ export function ChatForm({
return ( return (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<MediaUploader setState={setValue} /> <MediaUploader setState={setValue} />
<div className="flex w-full items-center justify-between rounded-full bg-white/20 px-3"> <div className="flex w-full items-center justify-between rounded-full bg-zinc-300 px-3 dark:bg-zinc-700">
<input <input
value={value} value={value}
onChange={(e) => setValue(e.target.value)} onChange={(e) => setValue(e.target.value)}
@ -57,12 +57,12 @@ export function ChatForm({
autoCorrect="off" autoCorrect="off"
autoCapitalize="off" autoCapitalize="off"
placeholder="Message" placeholder="Message"
className="h-10 flex-1 resize-none bg-transparent px-3 text-white placeholder:text-white/80 focus:outline-none" className="h-10 flex-1 resize-none bg-transparent px-3 text-zinc-900 placeholder:text-zinc-500 focus:outline-none dark:text-zinc-100 dark:placeholder:text-zinc-300"
/> />
<button <button
type="button" type="button"
onClick={submit} onClick={submit}
className="inline-flex shrink-0 items-center gap-1.5 text-sm font-medium text-white/80" className="inline-flex shrink-0 items-center gap-1.5 text-sm font-medium text-zinc-500 dark:text-zinc-300"
> >
<EnterIcon className="h-5 w-5" /> <EnterIcon className="h-5 w-5" />
Send Send

16
src/app/chats/components/chatListItem.tsx
View File

@ -44,10 +44,10 @@ export const ChatListItem = memo(function ChatListItem({ event }: { event: NDKEv
preventScrollReset={true} preventScrollReset={true}
className={({ isActive }) => className={({ isActive }) =>
twMerge( twMerge(
'flex items-center gap-2.5 px-3 py-1.5 hover:bg-white/10', 'flex items-center gap-2.5 px-3 py-1.5 hover:bg-zinc-200 dark:hover:bg-zinc-800',
isActive isActive
? 'border-fuchsia-500 bg-white/5 text-white' ? 'bg-zinc-200 text-zinc-900 dark:bg-zinc-800 dark:text-zinc-100'
: 'border-transparent text-white/70' : 'text-zinc-500 dark:text-zinc-300'
) )
} }
> >
@ -64,22 +64,20 @@ export const ChatListItem = memo(function ChatListItem({ event }: { event: NDKEv
<img <img
src={svgURI} src={svgURI}
alt={event.pubkey} alt={event.pubkey}
className="h-10 w-10 rounded-lg bg-white" className="h-10 w-10 rounded-lg bg-black dark:bg-white"
/> />
</Avatar.Fallback> </Avatar.Fallback>
</Avatar.Root> </Avatar.Root>
<div className="flex w-full flex-col"> <div className="flex w-full flex-col">
<div className="max-w-[10rem] truncate font-semibold text-white"> <div className="max-w-[10rem] truncate font-semibold text-zinc-900 dark:text-zinc-100">
{user?.name || {user?.name ||
user?.display_name || user?.display_name ||
user?.displayName || user?.displayName ||
displayNpub(event.pubkey, 16)} displayNpub(event.pubkey, 16)}
</div> </div>
<div className="flex w-full items-center justify-between"> <div className="flex w-full items-center justify-between">
<div className="max-w-[10rem] truncate text-sm text-white/70"> <div className="max-w-[10rem] truncate text-sm">{decryptedContent}</div>
{decryptedContent} <div className="text-sm">{createdAt}</div>
</div>
<div className="text-sm text-white/70">{createdAt}</div>
</div> </div>
</div> </div>
</NavLink> </NavLink>

2
src/app/chats/components/mediaUploader.tsx
View File

@ -29,7 +29,7 @@ export function MediaUploader({
<button <button
type="button" type="button"
onClick={() => uploadMedia()} onClick={() => uploadMedia()}
className="group inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-white/10 text-white backdrop-blur-xl hover:bg-white/20" className="group inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-zinc-300 text-zinc-500 hover:bg-zinc-400 dark:bg-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-600"
> >
{loading ? ( {loading ? (
<LoaderIcon className="h-4 w-4 animate-spin" /> <LoaderIcon className="h-4 w-4 animate-spin" />

8
src/app/chats/components/message.tsx
View File

@ -25,14 +25,16 @@ export function ChatMessage({
<div <div
className={twMerge( className={twMerge(
'my-2 w-max max-w-[400px] rounded-t-xl px-3 py-3', 'my-2 w-max max-w-[400px] rounded-t-xl px-3 py-3',
self ? 'ml-auto rounded-l-xl bg-fuchsia-500' : 'rounded-r-xl bg-white/10' self
? 'ml-auto rounded-l-xl bg-interor-500'
: 'rounded-r-xl bg-zinc-200 dark:bg-zinc-800'
)} )}
> >
{!richContent ? ( {!richContent ? (
<p>Decrypting...</p> <p className="text-zinc-900 dark:text-zinc-100">Decrypting...</p>
) : ( ) : (
<div> <div>
<p className="select-text whitespace-pre-line text-white"> <p className="select-text whitespace-pre-line text-zinc-900 dark:text-zinc-100">
{richContent.parsed} {richContent.parsed}
</p> </p>
<div> <div>

2
src/app/explore/components/userGroupNode.tsx
View File

@ -18,7 +18,7 @@ export function UserGroupNode({ data }) {
) : ( ) : (
<GroupTitle pubkey={data.pubkey} /> <GroupTitle pubkey={data.pubkey} />
)} )}
<div className="grid grid-cols-5 gap-6 rounded-lg border border-fuchsia-500/50 bg-fuchsia-500/10 p-4"> <div className="grid grid-cols-5 gap-6 rounded-lg border border-fuchsia-500/50 bg-interor-500/10 p-4">
{data.list.map((user: string) => ( {data.list.map((user: string) => (
<UserWithDrawer key={user} pubkey={user} /> <UserWithDrawer key={user} pubkey={user} />
))} ))}

6
src/app/explore/components/userWithDrawer.tsx
View File

@ -97,7 +97,7 @@ export const UserWithDrawer = memo(function UserWithDrawer({
<button <button
type="button" type="button"
onClick={() => unfollowUser(pubkey)} onClick={() => unfollowUser(pubkey)}
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500" className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-interor-500"
> >
Unfollow Unfollow
</button> </button>
@ -105,14 +105,14 @@ export const UserWithDrawer = memo(function UserWithDrawer({
<button <button
type="button" type="button"
onClick={() => followUser(pubkey)} onClick={() => followUser(pubkey)}
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500" className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-interor-500"
> >
Follow Follow
</button> </button>
)} )}
<Link <Link
to={`/chats/${pubkey}`} to={`/chats/${pubkey}`}
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500" className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-interor-500"
> >
Message Message
</Link> </Link>

2
src/app/nwc/components/alby.tsx
View File

@ -121,7 +121,7 @@ export function NWCAlby() {
<button <button
type="button" type="button"
onClick={() => initAlby()} onClick={() => initAlby()}
className="inline-flex h-11 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-11 w-full items-center justify-between gap-2 rounded-lg bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none disabled:opacity-50"
> >
{isLoading ? ( {isLoading ? (
<> <>

2
src/app/nwc/components/other.tsx
View File

@ -139,7 +139,7 @@ export function NWCOther() {
<button <button
type="submit" type="submit"
disabled={!isDirty || !isValid} disabled={!isDirty || !isValid}
className="inline-flex h-11 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-11 w-full items-center justify-between gap-2 rounded-lg bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none disabled:opacity-50"
> >
{isLoading ? ( {isLoading ? (
<> <>

6
src/app/relays/components/relayForm.tsx
View File

@ -40,9 +40,9 @@ export function RelayForm() {
return ( return (
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<div className="flex h-10 items-center justify-between rounded-lg bg-white/10 pr-1.5"> <div className="flex h-10 items-center justify-between rounded-lg bg-zinc-200 pr-1.5 dark:bg-zinc-800">
<input <input
className="h-full w-full bg-transparent pl-3 pr-1.5 placeholder:text-white/70 focus:outline-none" className="h-full w-full bg-transparent pl-3 pr-1.5 text-zinc-900 placeholder:text-zinc-600 focus:outline-none dark:text-zinc-100 dark:placeholder:text-zinc-400"
type="url" type="url"
placeholder="wss://" placeholder="wss://"
spellCheck={false} spellCheck={false}
@ -55,7 +55,7 @@ export function RelayForm() {
<button <button
type="button" type="button"
onClick={() => createRelay()} onClick={() => createRelay()}
className="inline-flex h-6 w-6 items-center justify-center rounded bg-fuchsia-500 text-white hover:bg-fuchsia-600" className="inline-flex h-6 w-6 items-center justify-center rounded bg-interor-500 text-white hover:bg-interor-600"
> >
<PlusIcon className="h-4 w-4" /> <PlusIcon className="h-4 w-4" />
</button> </button>

24
src/app/relays/components/relayList.tsx
View File

@ -44,17 +44,17 @@ export function RelayList() {
}; };
return ( return (
<div className="col-span-2 border-r border-white/5"> <div className="col-span-2 border-r border-zinc-100 dark:border-zinc-900">
{status === 'loading' ? ( {status === 'loading' ? (
<div className="flex h-full w-full items-center justify-center pb-10"> <div className="flex h-full w-full items-center justify-center pb-10">
<div className="inline-flex flex-col items-center justify-center gap-2"> <div className="inline-flex flex-col items-center justify-center gap-2">
<LoaderIcon className="h-5 w-5 animate-spin text-white" /> <LoaderIcon className="h-5 w-5 animate-spin text-zinc-100 dark:text-zinc-900" />
<p>Loading relay...</p> <p>Loading relay...</p>
</div> </div>
</div> </div>
) : ( ) : (
<VList className="scrollbar-hide mt-20 h-full"> <VList className="scrollbar-hide mt-20 h-full">
<div className="inline-flex h-16 w-full items-center border-b border-white/5 px-3"> <div className="inline-flex h-16 w-full items-center border-b border-zinc-100 px-3 dark:border-zinc-900">
<h3 className="bg-gradient-to-r from-fuchsia-200 via-red-200 to-orange-300 bg-clip-text font-semibold text-transparent"> <h3 className="bg-gradient-to-r from-fuchsia-200 via-red-200 to-orange-300 bg-clip-text font-semibold text-transparent">
All relays used by your follows All relays used by your follows
</h3> </h3>
@ -62,14 +62,14 @@ export function RelayList() {
{[...data].map(([key, value]) => ( {[...data].map(([key, value]) => (
<div <div
key={key} key={key}
className="flex h-14 w-full items-center justify-between border-b border-white/5 px-3" className="flex h-14 w-full items-center justify-between border-b border-zinc-100 px-3 dark:border-zinc-900"
> >
<div className="inline-flex items-center gap-2 divide-x divide-white/10"> <div className="inline-flex items-center gap-2 divide-x divide-zinc-100 dark:divide-zinc-900">
<div className="inline-flex items-center gap-2"> <div className="inline-flex items-center gap-2">
<button <button
type="button" type="button"
onClick={() => inspectRelay(key)} onClick={() => inspectRelay(key)}
className="inline-flex h-6 items-center justify-center gap-1 rounded bg-white/10 px-1.5 text-sm font-medium hover:bg-white/20" className="inline-flex h-6 items-center justify-center gap-1 rounded bg-zinc-200 px-1.5 text-sm font-medium text-zinc-900 hover:bg-zinc-300 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-700"
> >
<ShareIcon className="h-3 w-3" /> <ShareIcon className="h-3 w-3" />
Inspect Inspect
@ -77,14 +77,16 @@ export function RelayList() {
<button <button
type="button" type="button"
onClick={() => connectRelay(key)} onClick={() => connectRelay(key)}
className="inline-flex h-6 w-6 items-center justify-center rounded hover:bg-white/10" className="inline-flex h-6 w-6 items-center justify-center rounded text-zinc-100 hover:bg-zinc-200 dark:text-zinc-100 dark:hover:bg-zinc-800"
> >
<PlusIcon className="h-3 w-3" /> <PlusIcon className="h-3 w-3" />
</button> </button>
</div> </div>
<div className="inline-flex items-center gap-2 pl-3"> <div className="inline-flex items-center gap-2 pl-3">
<span className="text-sm font-semibold text-white/70">Relay: </span> <span className="text-sm font-semibold text-zinc-500 dark:text-zinc-400">
<span className="max-w-[200px] truncate text-sm font-medium text-white"> Relay:{' '}
</span>
<span className="max-w-[200px] truncate text-sm font-medium text-zinc-900 dark:text-zinc-100">
{key} {key}
</span> </span>
</div> </div>
@ -94,8 +96,8 @@ export function RelayList() {
<User key={item} pubkey={item} variant="stacked" /> <User key={item} pubkey={item} variant="stacked" />
))} ))}
{value.length > 4 ? ( {value.length > 4 ? (
<div className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-black/80 ring-1 ring-white/10 backdrop-blur-xl"> <div className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-zinc-200 text-zinc-900 ring-1 ring-zinc-300 dark:bg-zinc-800 dark:text-zinc-100 dark:ring-zinc-700">
<span className="text-xs font-semibold">+{value.length}</span> <span className="text-xs font-medium">+{value.length}</span>
</div> </div>
) : null} ) : null}
</div> </div>

8
src/app/relays/components/userRelay.tsx
View File

@ -34,7 +34,7 @@ export function UserRelay() {
{data.map((item) => ( {data.map((item) => (
<div <div
key={item} key={item}
className="group flex h-10 items-center justify-between rounded-lg bg-white/10 pl-3 pr-1.5" className="group flex h-10 items-center justify-between rounded-lg bg-zinc-200 pl-3 pr-1.5 dark:bg-zinc-800"
> >
<div className="inline-flex items-center gap-2.5"> <div className="inline-flex items-center gap-2.5">
{relayUrls.includes(item) ? ( {relayUrls.includes(item) ? (
@ -48,16 +48,16 @@ export function UserRelay() {
<span className="relative inline-flex h-2 w-2 rounded-full bg-red-500"></span> <span className="relative inline-flex h-2 w-2 rounded-full bg-red-500"></span>
</span> </span>
)} )}
<p className="max-w-[20rem] truncate text-sm font-medium leading-none"> <p className="max-w-[20rem] truncate text-sm font-medium text-zinc-900 dark:text-zinc-100">
{item} {item}
</p> </p>
</div> </div>
<button <button
type="button" type="button"
onClick={() => removeRelay(item)} onClick={() => removeRelay(item)}
className="hidden h-6 w-6 items-center justify-center rounded hover:bg-white/10 group-hover:inline-flex" className="hidden h-6 w-6 items-center justify-center rounded hover:bg-zinc-300 group-hover:inline-flex dark:hover:bg-zinc-700"
> >
<CancelIcon className="h-4 w-4 text-white" /> <CancelIcon className="h-4 w-4 text-zinc-900 dark:text-zinc-100" />
</button> </button>
</div> </div>
))} ))}

6
src/app/relays/index.tsx
View File

@ -6,8 +6,10 @@ export function RelaysScreen() {
<div className="grid h-full w-full grid-cols-3"> <div className="grid h-full w-full grid-cols-3">
<RelayList /> <RelayList />
<div className="col-span-1"> <div className="col-span-1">
<div className="inline-flex h-16 w-full items-center border-b border-white/5 px-3"> <div className="inline-flex h-16 w-full items-center border-b border-zinc-100 px-3 dark:border-zinc-900">
<h3 className="font-semibold text-white">Connected relays</h3> <h3 className="font-semibold text-zinc-900 dark:text-zinc-100">
Connected relays
</h3>
</div> </div>
<UserRelay /> <UserRelay />
</div> </div>

4
src/app/relays/relay.tsx
View File

@ -110,7 +110,7 @@ export function RelayScreen() {
href={`https://nips.be/${item}`} href={`https://nips.be/${item}`}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
className="inline-flex aspect-square h-full w-full items-center justify-center rounded-lg bg-white/10 text-sm font-medium hover:bg-fuchsia-500" className="inline-flex aspect-square h-full w-full items-center justify-center rounded-lg bg-white/10 text-sm font-medium hover:bg-interor-500"
> >
{item} {item}
</a> </a>
@ -145,7 +145,7 @@ export function RelayScreen() {
href={resolvedRelay.payments_url} href={resolvedRelay.payments_url}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
className="inline-flex h-10 w-full items-center justify-center rounded-lg bg-fuchsia-500 text-sm font-medium hover:bg-fuchsia-600" className="inline-flex h-10 w-full items-center justify-center rounded-lg bg-interor-500 text-sm font-medium hover:bg-interor-600"
> >
Open payment website Open payment website
</a> </a>

2
src/app/settings/components/cacheTime.tsx
View File

@ -30,7 +30,7 @@ export function CacheTimeSetting() {
<button <button
type="button" type="button"
onClick={() => update()} onClick={() => update()}
className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-zinc-800 font-medium hover:bg-fuchsia-500" className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-zinc-800 font-medium hover:bg-interor-500"
> >
<CheckCircleIcon className="h-4 w-4 text-white" /> <CheckCircleIcon className="h-4 w-4 text-white" />
</button> </button>

4
src/app/space/components/toggle.tsx
View File

@ -12,14 +12,14 @@ export function ToggleWidgetList() {
<div className="flex h-full shrink-0 grow-0 basis-[400px] items-center justify-center"> <div className="flex h-full shrink-0 grow-0 basis-[400px] items-center justify-center">
<div className="relative"> <div className="relative">
<div className="absolute -top-44 left-1/2 -translate-x-1/2 transform"> <div className="absolute -top-44 left-1/2 -translate-x-1/2 transform">
<HandArrowDownIcon className="text-white/5" /> <HandArrowDownIcon className="text-zinc-100 dark:text-zinc-900" />
</div> </div>
<button <button
type="button" type="button"
onClick={() => onClick={() =>
setWidget(db, { kind: WidgetKinds.tmp.list, title: '', content: '' }) setWidget(db, { kind: WidgetKinds.tmp.list, title: '', content: '' })
} }
className="inline-flex h-9 items-center gap-2 rounded-lg border-t border-white/10 bg-white/20 px-3 text-white hover:bg-white/30" className="inline-flex h-9 items-center gap-2 rounded-full bg-zinc-200 px-3 text-zinc-900 hover:bg-zinc-300 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-700"
> >
<PlusIcon className="h-4 w-4 text-white" /> <PlusIcon className="h-4 w-4 text-white" />
<p className="text-sm font-semibold leading-none">Add widget</p> <p className="text-sm font-semibold leading-none">Add widget</p>

42
src/app/space/components/widgetList.tsx
View File

@ -33,22 +33,22 @@ export function WidgetList({ params }: { params: Widget }) {
(kind: number) => { (kind: number) => {
switch (kind) { switch (kind) {
case WidgetKinds.tmp.xfeed: case WidgetKinds.tmp.xfeed:
return <GroupFeedsIcon className="h-5 w-5 text-white" />; return <GroupFeedsIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />;
case WidgetKinds.local.follows: case WidgetKinds.local.follows:
return <FollowsIcon className="h-5 w-5 text-white" />; return <FollowsIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />;
case WidgetKinds.local.files: case WidgetKinds.local.files:
case WidgetKinds.global.files: case WidgetKinds.global.files:
return <FileIcon className="h-5 w-5 text-white" />; return <FileIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />;
case WidgetKinds.local.articles: case WidgetKinds.local.articles:
case WidgetKinds.global.articles: case WidgetKinds.global.articles:
return <ArticleIcon className="h-5 w-5 text-white" />; return <ArticleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />;
case WidgetKinds.tmp.xhashtag: case WidgetKinds.tmp.xhashtag:
return <HashtagIcon className="h-5 w-4 text-white" />; return <HashtagIcon className="h-5 w-4 text-zinc-900 dark:text-zinc-100" />;
case WidgetKinds.nostrBand.trendingAccounts: case WidgetKinds.nostrBand.trendingAccounts:
case WidgetKinds.nostrBand.trendingNotes: case WidgetKinds.nostrBand.trendingNotes:
return <TrendingIcon className="h-5 w-4 text-white" />; return <TrendingIcon className="h-5 w-4 text-zinc-900 dark:text-zinc-100" />;
case WidgetKinds.other.learnNostr: case WidgetKinds.other.learnNostr:
return <ThreadsIcon className="h-5 w-4 text-white" />; return <ThreadsIcon className="h-5 w-4 text-zinc-900 dark:text-zinc-100" />;
default: default:
return null; return null;
} }
@ -59,14 +59,16 @@ export function WidgetList({ params }: { params: Widget }) {
const renderItem = useCallback( const renderItem = useCallback(
(row: WidgetGroup, index: number) => { (row: WidgetGroup, index: number) => {
return ( return (
<div key={index} className="flex flex-col gap-3"> <div key={index} className="flex flex-col gap-2">
<h3 className="font-medium text-white/50">{row.title}</h3> <h3 className="text-sm font-semibold text-zinc-500 dark:text-zinc-300">
<div className="flex flex-col divide-y divide-white/5 overflow-hidden rounded-xl bg-white/10"> {row.title}
</h3>
<div className="flex flex-col divide-y divide-zinc-200 overflow-hidden rounded-xl bg-zinc-100 dark:divide-zinc-800 dark:bg-zinc-900">
{row.data.map((item, index) => ( {row.data.map((item, index) => (
<button <button
onClick={() => openWidget(item)} onClick={() => openWidget(item)}
key={index} key={index}
className="flex items-center gap-2.5 px-4 hover:bg-white/10" className="group flex items-center gap-2.5 px-4 hover:bg-zinc-200 dark:hover:bg-zinc-800"
> >
{item.icon ? ( {item.icon ? (
<div className="h-10 w-10 shrink-0 rounded-md"> <div className="h-10 w-10 shrink-0 rounded-md">
@ -77,13 +79,15 @@ export function WidgetList({ params }: { params: Widget }) {
/> />
</div> </div>
) : ( ) : (
<div className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-white/10"> <div className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-zinc-200 group-hover:bg-zinc-300 dark:bg-zinc-800 dark:group-hover:bg-zinc-700">
{renderIcon(item.kind)} {renderIcon(item.kind)}
</div> </div>
)} )}
<div className="inline-flex h-16 w-full flex-col items-start justify-center gap-1"> <div className="inline-flex h-16 w-full flex-col items-start justify-center">
<h5 className="line-clamp-1 font-medium leading-none">{item.title}</h5> <h5 className="line-clamp-1 text-sm font-medium text-zinc-900 dark:text-zinc-100">
<p className="line-clamp-1 text-xs leading-none text-white/50"> {item.title}
</h5>
<p className="line-clamp-1 text-xs text-zinc-500 dark:text-zinc-300">
{item.description} {item.description}
</p> </p>
</div> </div>
@ -97,21 +101,21 @@ export function WidgetList({ params }: { params: Widget }) {
); );
return ( return (
<div className="relative h-full shrink-0 grow-0 basis-[400px] bg-white/10"> <div className="relative h-full shrink-0 grow-0 basis-[400px]">
<TitleBar id={params.id} title="Add widget" /> <TitleBar id={params.id} title="Add widget" />
<div className="scrollbar-hide h-full overflow-y-auto pb-20"> <div className="scrollbar-hide h-full overflow-y-auto pb-20">
<div className="flex flex-col gap-6 px-3"> <div className="flex flex-col gap-6 px-3">
{DefaultWidgets.map((row: WidgetGroup, index: number) => {DefaultWidgets.map((row: WidgetGroup, index: number) =>
renderItem(row, index) renderItem(row, index)
)} )}
<div className="border-t border-white/5 pt-6"> <div className="border-t border-zinc-200 pt-6 dark:border-zinc-800">
<button <button
type="button" type="button"
disabled disabled
className="inline-flex h-14 w-full items-center justify-center gap-2.5 rounded-xl bg-white/5 text-sm font-medium text-white/50" className="inline-flex h-14 w-full items-center justify-center gap-2.5 rounded-xl bg-zinc-100 text-sm font-medium text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100"
> >
Build your own widget{' '} Build your own widget{' '}
<div className="-rotate-3 transform rounded-md border border-white/20 bg-white/10 px-1.5 py-1"> <div className="-rotate-3 transform-gpu rounded-md border border-zinc-300 bg-zinc-200 px-1.5 py-1 dark:border-zinc-700 dark:bg-zinc-800">
<span className="bg-gradient-to-t from-fuchsia-200 via-red-200 to-orange-300 bg-clip-text text-xs text-transparent"> <span className="bg-gradient-to-t from-fuchsia-200 via-red-200 to-orange-300 bg-clip-text text-xs text-transparent">
Coming soon Coming soon
</span> </span>

2
src/app/space/index.tsx
View File

@ -88,7 +88,7 @@ export function SpaceScreen() {
{!widgets ? ( {!widgets ? (
<div className="flex shrink-0 grow-0 basis-[400px] flex-col"> <div className="flex shrink-0 grow-0 basis-[400px] flex-col">
<div className="flex w-full flex-1 items-center justify-center p-3"> <div className="flex w-full flex-1 items-center justify-center p-3">
<LoaderIcon className="h-5 w-5 animate-spin text-white/10" /> <LoaderIcon className="h-5 w-5 animate-spin text-zinc-900 dark:text-zinc-100" />
</div> </div>
</div> </div>
) : ( ) : (

46
src/app/users/components/modal.tsx
View File

@ -138,22 +138,22 @@ export function EditProfileModal() {
<Dialog.Trigger asChild> <Dialog.Trigger asChild>
<button <button
type="button" type="button"
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500" className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-zinc-200 text-sm font-medium text-zinc-900 backdrop-blur-xl hover:bg-interor-500 hover:text-zinc-100 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-interor-500 dark:hover:text-zinc-100"
> >
Edit profile Edit profile
</button> </button>
</Dialog.Trigger> </Dialog.Trigger>
<Dialog.Portal> <Dialog.Portal>
<Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-2xl" /> <Dialog.Overlay className="fixed inset-0 z-50 bg-white dark:bg-black" />
<Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center"> <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-xl rounded-xl bg-white/10 backdrop-blur-xl"> <div className="relative h-min w-full max-w-xl rounded-xl bg-zinc-100 dark:bg-zinc-900">
<div className="h-min w-full shrink-0 border-b border-white/10 bg-white/5 px-5 py-5"> <div className="h-min w-full shrink-0 rounded-t-xl border-b border-zinc-200 px-5 py-5 dark:border-zinc-800">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<Dialog.Title className="text-lg font-semibold leading-none text-white"> <Dialog.Title className="text-lg font-semibold leading-none text-zinc-900 dark:text-zinc-100">
Edit profile Edit profile
</Dialog.Title> </Dialog.Title>
<Dialog.Close className="inline-flex h-6 w-6 items-center justify-center rounded-md backdrop-blur-xl hover:bg-white/10"> <Dialog.Close className="inline-flex h-6 w-6 items-center justify-center rounded-md text-zinc-900 hover:bg-zinc-200 dark:text-zinc-100 dark:hover:bg-zinc-800">
<CancelIcon className="h-4 w-4 text-white/50" /> <CancelIcon className="h-4 w-4" />
</Dialog.Close> </Dialog.Close>
</div> </div>
</div> </div>
@ -170,7 +170,7 @@ export function EditProfileModal() {
className="h-full w-full object-cover" className="h-full w-full object-cover"
/> />
) : ( ) : (
<div className="h-full w-full bg-white" /> <div className="h-full w-full bg-black dark:bg-white" />
)} )}
<div className="absolute left-1/2 top-1/2 z-10 h-full w-full -translate-x-1/2 -translate-y-1/2 transform"> <div className="absolute left-1/2 top-1/2 z-10 h-full w-full -translate-x-1/2 -translate-y-1/2 transform">
<BannerUploader setBanner={setBanner} /> <BannerUploader setBanner={setBanner} />
@ -193,7 +193,7 @@ export function EditProfileModal() {
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<label <label
htmlFor="name" htmlFor="name"
className="text-sm font-semibold uppercase tracking-wider text-white/50" className="text-sm font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400"
> >
Name Name
</label> </label>
@ -204,13 +204,13 @@ export function EditProfileModal() {
minLength: 4, minLength: 4,
})} })}
spellCheck={false} spellCheck={false}
className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 !outline-none backdrop-blur-xl placeholder:text-white/50" className="relative h-11 w-full rounded-lg bg-zinc-200 px-3 py-1 text-zinc-900 !outline-none backdrop-blur-xl placeholder:text-zinc-500 dark:bg-zinc-800 dark:text-zinc-100"
/> />
</div> </div>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<label <label
htmlFor="nip05" htmlFor="nip05"
className="text-sm font-semibold uppercase tracking-wider text-white/50" className="text-sm font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400"
> >
NIP-05 NIP-05
</label> </label>
@ -221,17 +221,17 @@ export function EditProfileModal() {
minLength: 4, minLength: 4,
})} })}
spellCheck={false} spellCheck={false}
className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 !outline-none backdrop-blur-xl placeholder:text-white/50" className="relative h-11 w-full rounded-lg bg-zinc-200 px-3 py-1 text-zinc-900 !outline-none backdrop-blur-xl placeholder:text-zinc-500 dark:bg-zinc-800 dark:text-zinc-100"
/> />
<div className="absolute right-2 top-1/2 -translate-y-1/2 transform"> <div className="absolute right-2 top-1/2 -translate-y-1/2 transform">
{nip05.verified ? ( {nip05.verified ? (
<span className="inline-flex h-6 items-center gap-1 rounded bg-green-500 px-2 text-sm font-medium"> <span className="inline-flex h-6 items-center gap-1 rounded bg-green-500 px-2 text-sm font-medium text-white">
<CheckCircleIcon className="h-4 w-4 text-white" /> <CheckCircleIcon className="h-4 w-4 text-black dark:text-white" />
Verified Verified
</span> </span>
) : ( ) : (
<span className="inline-flex h-6 items-center gap-1 rounded bg-red-500 px-2 text-sm font-medium"> <span className="inline-flex h-6 items-center gap-1 rounded bg-red-500 px-2 text-sm font-medium text-white">
<UnverifiedIcon className="h-4 w-4 text-white" /> <UnverifiedIcon className="h-4 w-4 text-black dark:text-white" />
Unverified Unverified
</span> </span>
)} )}
@ -246,20 +246,20 @@ export function EditProfileModal() {
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<label <label
htmlFor="about" htmlFor="about"
className="text-sm font-semibold uppercase tracking-wider text-white/50" className="text-sm font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400"
> >
Bio Bio
</label> </label>
<textarea <textarea
{...register('about')} {...register('about')}
spellCheck={false} spellCheck={false}
className="relative h-20 w-full resize-none rounded-lg bg-white/10 px-3 py-1 !outline-none backdrop-blur-xl placeholder:text-white/50" className="relative h-20 w-full resize-none rounded-lg bg-zinc-200 px-3 py-2 text-zinc-900 !outline-none backdrop-blur-xl placeholder:text-zinc-500 dark:bg-zinc-800 dark:text-zinc-100"
/> />
</div> </div>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<label <label
htmlFor="website" htmlFor="website"
className="text-sm font-semibold uppercase tracking-wider text-white/50" className="text-sm font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400"
> >
Website Website
</label> </label>
@ -267,13 +267,13 @@ export function EditProfileModal() {
type={'text'} type={'text'}
{...register('website', { required: false })} {...register('website', { required: false })}
spellCheck={false} spellCheck={false}
className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 !outline-none backdrop-blur-xl placeholder:text-white/50" className="relative h-11 w-full rounded-lg bg-zinc-200 px-3 py-1 text-zinc-900 !outline-none backdrop-blur-xl placeholder:text-zinc-500 dark:bg-zinc-800 dark:text-zinc-100"
/> />
</div> </div>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<label <label
htmlFor="website" htmlFor="website"
className="text-sm font-semibold uppercase tracking-wider text-white/50" className="text-sm font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400"
> >
Lightning address Lightning address
</label> </label>
@ -281,14 +281,14 @@ export function EditProfileModal() {
type={'text'} type={'text'}
{...register('lud16', { required: false })} {...register('lud16', { required: false })}
spellCheck={false} spellCheck={false}
className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 !outline-none backdrop-blur-xl placeholder:text-white/50" className="relative h-11 w-full rounded-lg bg-zinc-200 px-3 py-1 text-zinc-900 !outline-none backdrop-blur-xl placeholder:text-zinc-500 dark:bg-zinc-800 dark:text-zinc-100"
/> />
</div> </div>
<div> <div>
<button <button
type="submit" type="submit"
disabled={!isValid} disabled={!isValid}
className="inline-flex h-11 w-full transform items-center justify-center gap-1 rounded-lg bg-fuchsia-500 font-medium text-white hover:bg-fuchsia-600 focus:outline-none active:translate-y-1 disabled:pointer-events-none disabled:opacity-50" className="inline-flex h-11 w-full transform items-center justify-center gap-1 rounded-lg bg-interor-500 font-medium text-white hover:bg-interor-600 focus:outline-none active:translate-y-1 disabled:pointer-events-none disabled:opacity-50"
> >
{loading ? ( {loading ? (
<LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-white" /> <LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-white" />

22
src/app/users/components/profile.tsx
View File

@ -58,36 +58,36 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
className="h-full w-full object-cover" className="h-full w-full object-cover"
/> />
) : ( ) : (
<div className="h-full w-full bg-black" /> <div className="h-full w-full bg-zinc-100 dark:bg-zinc-900" />
)} )}
</div> </div>
<div className="-mt-7 flex w-full flex-col items-center px-5"> <div className="-mt-7 flex w-full flex-col items-center px-5">
<Image <Image
src={user.picture || user.image} src={user.picture || user.image}
alt={pubkey} alt={pubkey}
className="h-14 w-14 rounded-lg ring-2 ring-black" className="h-14 w-14 rounded-lg ring-2 ring-zinc-100 dark:ring-zinc-900"
/> />
<div className="mt-2 flex flex-1 flex-col gap-6"> <div className="mt-2 flex flex-1 flex-col gap-6">
<div className="flex flex-col items-center gap-1"> <div className="flex flex-col items-center gap-1">
<div className="inline-flex flex-col items-center gap-1.5"> <div className="inline-flex flex-col items-center">
<h5 className="text-center text-xl font-semibold leading-none"> <h5 className="text-center text-xl font-semibold text-zinc-900 dark:text-zinc-100">
{user.name || user.display_name || user.displayName || 'No name'} {user.name || user.display_name || user.displayName || 'No name'}
</h5> </h5>
{user.nip05 ? ( {user.nip05 ? (
<NIP05 <NIP05
pubkey={pubkey} pubkey={pubkey}
nip05={user?.nip05} nip05={user?.nip05}
className="max-w-[15rem] truncate text-sm leading-none text-white/50" className="max-w-[15rem] truncate text-sm text-zinc-500 dark:text-zinc-400"
/> />
) : ( ) : (
<span className="max-w-[15rem] truncate text-sm leading-none text-white/50"> <span className="max-w-[15rem] truncate text-sm text-zinc-500 dark:text-zinc-400">
{displayNpub(pubkey, 16)} {displayNpub(pubkey, 16)}
</span> </span>
)} )}
</div> </div>
<div className="flex flex-col gap-6"> <div className="flex flex-col gap-6">
{user.about || user.bio ? ( {user.about || user.bio ? (
<p className="mt-2 max-w-[500px] select-text break-words text-center text-white"> <p className="mt-2 max-w-[500px] select-text break-words text-center text-zinc-900 dark:text-zinc-100">
{user.about || user.bio} {user.about || user.bio}
</p> </p>
) : ( ) : (
@ -101,7 +101,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
<button <button
type="button" type="button"
onClick={() => unfollowUser(pubkey)} onClick={() => unfollowUser(pubkey)}
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500" className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-zinc-200 text-sm font-medium text-zinc-900 backdrop-blur-xl hover:bg-interor-500 hover:text-zinc-100 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-interor-500 dark:hover:text-zinc-100"
> >
Unfollow Unfollow
</button> </button>
@ -109,20 +109,20 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
<button <button
type="button" type="button"
onClick={() => followUser(pubkey)} onClick={() => followUser(pubkey)}
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500" className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-zinc-200 text-sm font-medium text-zinc-900 backdrop-blur-xl hover:bg-interor-500 hover:text-zinc-100 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-interor-500 dark:hover:text-zinc-100"
> >
Follow Follow
</button> </button>
)} )}
<Link <Link
to={`/chats/${pubkey}`} to={`/chats/${pubkey}`}
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500" className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-zinc-200 text-sm font-medium text-zinc-900 backdrop-blur-xl hover:bg-interor-500 hover:text-zinc-100 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-interor-500 dark:hover:text-zinc-100"
> >
Message Message
</Link> </Link>
{db.account.pubkey === pubkey && ( {db.account.pubkey === pubkey && (
<> <>
<span className="mx-2 inline-flex h-4 w-px bg-white/10 backdrop-blur-xl" /> <span className="mx-2 inline-flex h-4 w-px bg-zinc-200 dark:bg-zinc-800" />
<EditProfileModal /> <EditProfileModal />
</> </>
)} )}

26
src/app/users/components/stats.tsx
View File

@ -16,7 +16,7 @@ export function UserStats({ pubkey }: { pubkey: string }) {
if (status === 'loading') { if (status === 'loading') {
return ( return (
<div className="flex w-full items-center justify-center"> <div className="flex w-full items-center justify-center">
<LoaderIcon className="h-5 w-5 animate-spin text-white" /> <LoaderIcon className="h-5 w-5 animate-spin text-zinc-900 dark:text-zinc-100" />
</div> </div>
); );
} }
@ -28,32 +28,40 @@ export function UserStats({ pubkey }: { pubkey: string }) {
return ( return (
<div className="flex w-full items-center justify-center gap-10"> <div className="flex w-full items-center justify-center gap-10">
<div className="inline-flex flex-col items-center gap-1"> <div className="inline-flex flex-col items-center gap-1">
<span className="font-semibold leading-none text-white"> <span className="font-semibold leading-none text-zinc-900 dark:text-zinc-100">
{compactNumber.format(data.stats[pubkey].followers_pubkey_count) ?? 0} {compactNumber.format(data.stats[pubkey].followers_pubkey_count) ?? 0}
</span> </span>
<span className="text-sm leading-none text-white/50">Followers</span> <span className="text-sm leading-none text-zinc-500 dark:text-zinc-400">
Followers
</span>
</div> </div>
<div className="inline-flex flex-col items-center gap-1"> <div className="inline-flex flex-col items-center gap-1">
<span className="font-semibold leading-none text-white"> <span className="font-semibold leading-none text-zinc-900 dark:text-zinc-100">
{compactNumber.format(data.stats[pubkey].pub_following_pubkey_count) ?? 0} {compactNumber.format(data.stats[pubkey].pub_following_pubkey_count) ?? 0}
</span> </span>
<span className="text-sm leading-none text-white/50">Following</span> <span className="text-sm leading-none text-zinc-500 dark:text-zinc-400">
Following
</span>
</div> </div>
<div className="inline-flex flex-col items-center gap-1"> <div className="inline-flex flex-col items-center gap-1">
<span className="font-semibold leading-none text-white"> <span className="font-semibold leading-none text-zinc-900 dark:text-zinc-100">
{data.stats[pubkey].zaps_received {data.stats[pubkey].zaps_received
? compactNumber.format(data.stats[pubkey].zaps_received.msats / 1000) ? compactNumber.format(data.stats[pubkey].zaps_received.msats / 1000)
: 0} : 0}
</span> </span>
<span className="text-sm leading-none text-white/50">Zaps received</span> <span className="text-sm leading-none text-zinc-500 dark:text-zinc-400">
Zaps received
</span>
</div> </div>
<div className="inline-flex flex-col items-center gap-1"> <div className="inline-flex flex-col items-center gap-1">
<span className="font-semibold leading-none text-white"> <span className="font-semibold leading-none text-zinc-900 dark:text-zinc-100">
{data.stats[pubkey].zaps_sent {data.stats[pubkey].zaps_sent
? compactNumber.format(data.stats[pubkey].zaps_sent.msats / 1000) ? compactNumber.format(data.stats[pubkey].zaps_sent.msats / 1000)
: 0} : 0}
</span> </span>
<span className="text-sm leading-none text-white/50">Zaps sent</span> <span className="text-sm leading-none text-zinc-500 dark:text-zinc-400">
Zaps sent
</span>
</div> </div>
</div> </div>
); );

6
src/app/users/index.tsx
View File

@ -68,7 +68,7 @@ export function UserScreen() {
); );
return ( return (
<div className="scrollbar-hide relative h-full w-full overflow-y-auto bg-white/10 backdrop-blur-xl"> <div className="scrollbar-hide relative h-full w-full overflow-y-auto">
<div data-tauri-drag-region className="absolute left-0 top-0 h-11 w-full" /> <div data-tauri-drag-region className="absolute left-0 top-0 h-11 w-full" />
<UserProfile pubkey={pubkey} /> <UserProfile pubkey={pubkey} />
<div className="mt-6 h-full w-full border-t border-white/5 px-1.5"> <div className="mt-6 h-full w-full border-t border-white/5 px-1.5">
@ -84,9 +84,9 @@ export function UserScreen() {
</div> </div>
) : data.length === 0 ? ( ) : data.length === 0 ? (
<div className="px-3 py-1.5"> <div className="px-3 py-1.5">
<div className="rounded-xl bg-white/10 px-3 py-6 backdrop-blur-xl"> <div className="rounded-xl bg-zinc-100 px-3 py-6 dark:bg-zinc-900">
<div className="flex flex-col items-center gap-4"> <div className="flex flex-col items-center gap-4">
<p className="text-center text-sm font-medium text-white"> <p className="text-center text-sm font-medium text-zinc-900 dark:text-zinc-100">
User doesn&apos;t have any posts in the last 48 hours. User doesn&apos;t have any posts in the last 48 hours.
</p> </p>
</div> </div>

6
src/shared/button.tsx
View File

@ -16,15 +16,15 @@ export function Button({
switch (preset) { switch (preset) {
case 'small': case 'small':
preClass = preClass =
'w-min h-9 px-4 bg-white/10 backdrop-blur-xl rounded-md text-sm font-medium text-white hover:bg-fuchsia-500'; 'w-min h-9 px-4 bg-white/10 backdrop-blur-xl rounded-md text-sm font-medium text-white hover:bg-interor-500';
break; break;
case 'publish': case 'publish':
preClass = preClass =
'w-min h-9 px-4 bg-fuchsia-500 rounded-md text-sm font-medium text-white hover:bg-fuchsia-600'; 'w-min h-9 px-4 bg-interor-500 rounded-md text-sm font-medium text-white hover:bg-interor-600';
break; break;
case 'large': case 'large':
preClass = preClass =
'h-11 w-full bg-fuchsia-500 rounded-lg font-medium text-white hover:bg-fuchsia-600'; 'h-11 w-full bg-interor-500 rounded-lg font-medium text-white hover:bg-interor-600';
break; break;
case 'large-alt': case 'large-alt':
preClass = preClass =

2
src/shared/composer/composer.tsx
View File

@ -150,7 +150,7 @@ export function Composer() {
<button <button
onClick={() => submit()} onClick={() => submit()}
disabled={editor && editor.isEmpty} disabled={editor && editor.isEmpty}
className="inline-flex h-10 w-20 items-center justify-center rounded-lg bg-fuchsia-500 px-2 font-semibold hover:bg-fuchsia-600 disabled:opacity-50" className="inline-flex h-10 w-20 items-center justify-center rounded-lg bg-interor-500 px-2 font-semibold hover:bg-interor-600 disabled:opacity-50"
> >
{loading === true ? ( {loading === true ? (
<LoaderIcon className="h-5 w-5 animate-spin text-white" /> <LoaderIcon className="h-5 w-5 animate-spin text-white" />

6
src/shared/layouts/app.tsx
View File

@ -5,9 +5,9 @@ import { Navigation } from '@shared/navigation';
export function AppLayout() { export function AppLayout() {
return ( return (
<div className="h-screen w-screen bg-zinc-50 text-zinc-50 dark:bg-zinc-950 dark:text-zinc-950"> <div className="flex h-screen w-screen flex-col">
<WindowTitlebar className="border-b border-zinc-200 dark:border-zinc-800" /> <WindowTitlebar />
<div className="flex h-full"> <div className="flex h-full min-h-0 w-full bg-zinc-50 text-zinc-50 dark:bg-zinc-950 dark:text-zinc-950">
<div className="h-full shrink-0"> <div className="h-full shrink-0">
<Navigation /> <Navigation />
</div> </div>

6
src/shared/layouts/auth.tsx
View File

@ -3,9 +3,9 @@ import { WindowTitlebar } from 'tauri-controls';
export function AuthLayout() { export function AuthLayout() {
return ( return (
<div className="relative h-screen w-screen bg-zinc-50 dark:bg-zinc-950"> <div className="relative h-screen w-screen">
<WindowTitlebar className="border-b border-zinc-200 dark:border-zinc-800" /> <WindowTitlebar />
<div className="bg-zinc-100 dark:bg-zinc-900"> <div className="bg-zinc-50 dark:bg-zinc-950">
<Outlet /> <Outlet />
</div> </div>
</div> </div>

2
src/shared/logout.tsx
View File

@ -54,7 +54,7 @@ export function Logout() {
<button <button
type="button" type="button"
onClick={() => logout()} onClick={() => logout()}
className="inline-flex h-9 items-center justify-center rounded-md bg-white/10 px-4 text-sm font-medium leading-none text-white outline-none hover:bg-fuchsia-500" className="inline-flex h-9 items-center justify-center rounded-md bg-white/10 px-4 text-sm font-medium leading-none text-white outline-none hover:bg-interor-500"
> >
Logout Logout
</button> </button>

2
src/shared/notes/actions.tsx
View File

@ -28,7 +28,7 @@ export function NoteActions({
return ( return (
<Tooltip.Provider> <Tooltip.Provider>
<div className="-ml-1 mt-2 inline-flex w-full items-center"> <div className="-ml-1 mt-3 inline-flex w-full items-center">
<div className="inline-flex items-center gap-2"> <div className="inline-flex items-center gap-2">
<NoteReply id={id} pubkey={pubkey} root={root} /> <NoteReply id={id} pubkey={pubkey} root={root} />
<NoteReaction id={id} pubkey={pubkey} /> <NoteReaction id={id} pubkey={pubkey} />

10
src/shared/notes/actions/more.tsx
View File

@ -30,9 +30,9 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
<DropdownMenu.Trigger asChild> <DropdownMenu.Trigger asChild>
<button <button
type="button" type="button"
className="group ml-auto inline-flex h-7 w-7 items-center justify-center text-white/80" className="group ml-auto inline-flex h-7 w-7 items-center justify-center text-zinc-500 dark:text-zinc-300"
> >
<HorizontalDotsIcon className="h-5 w-5 text-white/80 group-hover:text-fuchsia-400" /> <HorizontalDotsIcon className="h-5 w-5 group-hover:text-interor-600" />
</button> </button>
</DropdownMenu.Trigger> </DropdownMenu.Trigger>
</Tooltip.Trigger> </Tooltip.Trigger>
@ -49,7 +49,7 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
<button <button
type="button" type="button"
onClick={() => copyLink()} onClick={() => copyLink()}
className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white hover:bg-white/10" className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white hover:bg-white/10 focus:outline-none"
> >
Copy shareable link Copy shareable link
</button> </button>
@ -58,7 +58,7 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
<button <button
type="button" type="button"
onClick={() => copyID()} onClick={() => copyID()}
className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white hover:bg-white/10" className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white hover:bg-white/10 focus:outline-none"
> >
Copy ID Copy ID
</button> </button>
@ -66,7 +66,7 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
<DropdownMenu.Item asChild> <DropdownMenu.Item asChild>
<Link <Link
to={`/users/${pubkey}`} to={`/users/${pubkey}`}
className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white hover:bg-white/10" className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white hover:bg-white/10 focus:outline-none"
> >
View profile View profile
</Link> </Link>

4
src/shared/notes/actions/reaction.tsx
View File

@ -62,12 +62,12 @@ export function NoteReaction({ id, pubkey }: { id: string; pubkey: string }) {
<Popover.Trigger asChild> <Popover.Trigger asChild>
<button <button
type="button" type="button"
className="group inline-flex h-7 w-7 items-center justify-center text-white/80" className="group inline-flex h-7 w-7 items-center justify-center text-zinc-500 dark:text-zinc-300"
> >
{reaction ? ( {reaction ? (
<img src={getReactionImage(reaction)} alt={reaction} className="h-6 w-6" /> <img src={getReactionImage(reaction)} alt={reaction} className="h-6 w-6" />
) : ( ) : (
<ReactionIcon className="h-5 w-5 text-white/80 group-hover:text-red-400" /> <ReactionIcon className="h-5 w-5 group-hover:text-red-400" />
)} )}
</button> </button>
</Popover.Trigger> </Popover.Trigger>

4
src/shared/notes/actions/reply.tsx
View File

@ -21,9 +21,9 @@ export function NoteReply({
<button <button
type="button" type="button"
onClick={() => setReply(id, pubkey, root)} onClick={() => setReply(id, pubkey, root)}
className="group inline-flex h-7 w-7 items-center justify-center text-white/80" className="group inline-flex h-7 w-7 items-center justify-center text-zinc-500 dark:text-zinc-300"
> >
<ReplyIcon className="h-5 w-5 text-white/80 group-hover:text-green-500" /> <ReplyIcon className="h-5 w-5 group-hover:text-green-500" />
</button> </button>
</Tooltip.Trigger> </Tooltip.Trigger>
<Tooltip.Portal> <Tooltip.Portal>

8
src/shared/notes/actions/repost.tsx
View File

@ -44,12 +44,12 @@ export function NoteRepost({ id, pubkey }: { id: string; pubkey: string }) {
<AlertDialog.Trigger asChild> <AlertDialog.Trigger asChild>
<button <button
type="button" type="button"
className="group inline-flex h-7 w-7 items-center justify-center text-white/80" className="group inline-flex h-7 w-7 items-center justify-center text-zinc-500 dark:text-zinc-300"
> >
<RepostIcon <RepostIcon
className={twMerge( className={twMerge(
'h-5 w-5 group-hover:text-blue-500', 'h-5 w-5 group-hover:text-blue-500',
isRepost ? 'text-blue-500' : 'text-white/80' isRepost ? 'text-blue-500' : ''
)} )}
/> />
</button> </button>
@ -62,7 +62,7 @@ export function NoteRepost({ id, pubkey }: { id: string; pubkey: string }) {
</Tooltip.Content> </Tooltip.Content>
</Tooltip.Portal> </Tooltip.Portal>
</Tooltip.Root> </Tooltip.Root>
<AlertDialog.Portal className="relative z-10"> <AlertDialog.Portal>
<AlertDialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-2xl" /> <AlertDialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-2xl" />
<AlertDialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center"> <AlertDialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
<div className="relative h-min w-full max-w-md rounded-xl bg-white/10 backdrop-blur-xl"> <div className="relative h-min w-full max-w-md rounded-xl bg-white/10 backdrop-blur-xl">
@ -84,7 +84,7 @@ export function NoteRepost({ id, pubkey }: { id: string; pubkey: string }) {
<button <button
type="button" type="button"
onClick={() => submit()} onClick={() => submit()}
className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium leading-none text-white outline-none hover:bg-fuchsia-500" className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium leading-none text-white outline-none hover:bg-interor-500"
> >
{isLoading ? ( {isLoading ? (
<LoaderIcon className="h-4 w-4 animate-spin text-white" /> <LoaderIcon className="h-4 w-4 animate-spin text-white" />

8
src/shared/notes/actions/zap.tsx
View File

@ -93,9 +93,9 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
<Dialog.Trigger asChild> <Dialog.Trigger asChild>
<button <button
type="button" type="button"
className="group inline-flex h-7 w-7 items-center justify-center text-white/80" className="group inline-flex h-7 w-7 items-center justify-center text-zinc-500 dark:text-zinc-300"
> >
<ZapIcon className="h-5 w-5 text-white/80 group-hover:text-orange-400" /> <ZapIcon className="h-5 w-5 group-hover:text-orange-400" />
</button> </button>
</Dialog.Trigger> </Dialog.Trigger>
<Dialog.Portal> <Dialog.Portal>
@ -186,7 +186,7 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
<button <button
type="button" type="button"
onClick={() => createZapRequest()} onClick={() => createZapRequest()}
className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-fuchsia-500 px-4 font-medium text-white hover:bg-fuchsia-600" className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-interor-500 px-4 font-medium text-white hover:bg-interor-600"
> >
{isCompleted ? ( {isCompleted ? (
<p>Successfully tipped</p> <p>Successfully tipped</p>
@ -210,7 +210,7 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
<button <button
type="button" type="button"
onClick={() => createZapRequest()} onClick={() => createZapRequest()}
className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-fuchsia-500 px-4 font-medium hover:bg-fuchsia-600" className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-interor-500 px-4 font-medium hover:bg-interor-600"
> >
<p>Create Lightning invoice</p> <p>Create Lightning invoice</p>
</button> </button>

2
src/shared/notes/kinds/text.tsx
View File

@ -21,7 +21,7 @@ export function TextNote(props: { content?: string }) {
return ( return (
<div> <div>
<ReactMarkdown <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]} remarkPlugins={[remarkGfm]}
disallowedElements={['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'code']} disallowedElements={['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'code']}
unwrapDisallowed={true} unwrapDisallowed={true}

4
src/shared/user.tsx
View File

@ -359,13 +359,13 @@ export const User = memo(function User({
<div className="flex items-center gap-2 px-3 py-3"> <div className="flex items-center gap-2 px-3 py-3">
<Link <Link
to={`/users/${pubkey}`} to={`/users/${pubkey}`}
className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-white/10 text-sm font-semibold backdrop-blur-xl hover:bg-fuchsia-500" className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-white/10 text-sm font-semibold backdrop-blur-xl hover:bg-interor-500"
> >
View profile View profile
</Link> </Link>
<Link <Link
to={`/chats/${pubkey}`} to={`/chats/${pubkey}`}
className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-white/10 text-sm font-semibold backdrop-blur-xl hover:bg-fuchsia-500" className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-white/10 text-sm font-semibold backdrop-blur-xl hover:bg-interor-500"
> >
Message Message
</Link> </Link>

6
src/shared/userProfile.tsx
View File

@ -62,7 +62,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
<button <button
type="button" type="button"
onClick={() => unfollowUser(pubkey)} onClick={() => unfollowUser(pubkey)}
className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500" className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-interor-500"
> >
Unfollow Unfollow
</button> </button>
@ -70,14 +70,14 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
<button <button
type="button" type="button"
onClick={() => followUser(pubkey)} onClick={() => followUser(pubkey)}
className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500" className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-interor-500"
> >
Follow Follow
</button> </button>
)} )}
<Link <Link
to={`/chats/${pubkey}`} to={`/chats/${pubkey}`}
className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500" className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-interor-500"
> >
Message Message
</Link> </Link>

10
src/shared/widgets/eventLoader.tsx
View File

@ -42,29 +42,29 @@ export function EventLoader({ firstTime }: { firstTime: boolean }) {
return ( return (
<div className="mb-3 px-3"> <div className="mb-3 px-3">
<div className="h-max w-full rounded-lg border-t border-white/10 bg-white/20 p-3"> <div className="h-max w-full rounded-lg bg-zinc-100 p-3 dark:bg-zinc-900">
<div className="flex flex-col items-center gap-3"> <div className="flex flex-col items-center gap-3">
{firstTime ? ( {firstTime ? (
<div> <div>
<span className="text-4xl">👋</span> <span className="text-4xl">👋</span>
<h3 className="mt-2 font-semibold leading-tight"> <h3 className="mt-2 font-semibold leading-tight text-zinc-100 dark:text-zinc-900">
Hello, this is the first time you&apos;re using Lume Hello, this is the first time you&apos;re using Lume
</h3> </h3>
<p className="text-sm text-white/70"> <p className="text-sm text-zinc-500">
Lume is downloading all events since the last 24 hours. It will auto Lume is downloading all events since the last 24 hours. It will auto
refresh when it done, please be patient refresh when it done, please be patient
</p> </p>
</div> </div>
) : ( ) : (
<div className="text-center"> <div className="text-center">
<h3 className="font-semibold leading-tight"> <h3 className="font-semibold leading-tight text-zinc-500">
Downloading all events while you&apos;re away... Downloading all events while you&apos;re away...
</h3> </h3>
</div> </div>
)} )}
<div className="flex h-1.5 w-full overflow-hidden rounded-full bg-white/20"> <div className="flex h-1.5 w-full overflow-hidden rounded-full bg-white/20">
<div <div
className="flex flex-col justify-center overflow-hidden bg-fuchsia-500 transition-all duration-1000 ease-smooth" className="flex flex-col justify-center overflow-hidden bg-interor-600 transition-all duration-1000 ease-smooth"
role="progressbar" role="progressbar"
style={{ width: `${progress}%` }} style={{ width: `${progress}%` }}
/> />

2
src/shared/widgets/local/articles.tsx
View File

@ -72,7 +72,7 @@ export function LocalArticlesWidget({ params }: { params: Widget }) {
<button <button
onClick={() => fetchNextPage()} onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage} disabled={!hasNextPage || isFetchingNextPage}
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none" className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
> >
{isFetchingNextPage ? ( {isFetchingNextPage ? (
<> <>

2
src/shared/widgets/local/feeds.tsx
View File

@ -108,7 +108,7 @@ export function LocalFeedsWidget({ params }: { params: Widget }) {
<button <button
onClick={() => fetchNextPage()} onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage} disabled={!hasNextPage || isFetchingNextPage}
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none" className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
> >
{isFetchingNextPage ? ( {isFetchingNextPage ? (
<> <>

2
src/shared/widgets/local/files.tsx
View File

@ -74,7 +74,7 @@ export function LocalFilesWidget({ params }: { params: Widget }) {
<button <button
onClick={() => fetchNextPage()} onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage} disabled={!hasNextPage || isFetchingNextPage}
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none" className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
> >
{isFetchingNextPage ? ( {isFetchingNextPage ? (
<> <>

2
src/shared/widgets/local/follows.tsx
View File

@ -107,7 +107,7 @@ export function LocalFollowsWidget({ params }: { params: Widget }) {
<button <button
onClick={() => fetchNextPage()} onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage} disabled={!hasNextPage || isFetchingNextPage}
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none" className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
> >
{isFetchingNextPage ? ( {isFetchingNextPage ? (
<> <>

10
src/shared/widgets/local/network.tsx
View File

@ -106,7 +106,7 @@ export function LocalNetworkWidget() {
<div className="flex-1"> <div className="flex-1">
{status === 'loading' ? ( {status === 'loading' ? (
<div className="px-3 py-1.5"> <div className="px-3 py-1.5">
<div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl"> <div className="rounded-xl bg-zinc-100 px-3 py-3 backdrop-blur-xl dark:bg-zinc-900">
<NoteSkeleton /> <NoteSkeleton />
</div> </div>
</div> </div>
@ -121,21 +121,21 @@ export function LocalNetworkWidget() {
<button <button
onClick={() => fetchNextPage()} onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage} disabled={!hasNextPage || isFetchingNextPage}
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none" className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium hover:bg-interor-600 focus:outline-none"
> >
{isFetchingNextPage ? ( {isFetchingNextPage ? (
<> <>
<span>Loading...</span> <span>Loading...</span>
<LoaderIcon className="h-5 w-5 animate-spin text-white" /> <LoaderIcon className="h-5 w-5 animate-spin text-zinc-900 dark:text-zinc-100" />
</> </>
) : hasNextPage ? ( ) : hasNextPage ? (
<> <>
<ArrowRightCircleIcon className="h-5 w-5 text-white" /> <ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
<span>Load more</span> <span>Load more</span>
</> </>
) : ( ) : (
<> <>
<ArrowRightCircleIcon className="h-5 w-5 text-white" /> <ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
<span>Nothing more to load</span> <span>Nothing more to load</span>
</> </>
)} )}

4
src/shared/widgets/nostrBandUserProfile.tsx
View File

@ -94,7 +94,7 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
<button <button
type="button" type="button"
onClick={() => unfollowUser(data.pubkey)} onClick={() => unfollowUser(data.pubkey)}
className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-white/10 text-white backdrop-blur-xl hover:bg-fuchsia-500 hover:text-white" className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-white/10 text-white backdrop-blur-xl hover:bg-interor-500 hover:text-white"
> >
<UnfollowIcon className="h-4 w-4" /> <UnfollowIcon className="h-4 w-4" />
</button> </button>
@ -102,7 +102,7 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
<button <button
type="button" type="button"
onClick={() => followUser(data.pubkey)} onClick={() => followUser(data.pubkey)}
className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-white/10 text-white backdrop-blur-xl hover:bg-fuchsia-500 hover:text-white" className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-white/10 text-white backdrop-blur-xl hover:bg-interor-500 hover:text-white"
> >
<FollowIcon className="h-4 w-4" /> <FollowIcon className="h-4 w-4" />
</button> </button>

2
src/shared/widgets/tmp/feeds.tsx
View File

@ -78,7 +78,7 @@ export function XfeedsWidget({ params }: { params: Widget }) {
type="submit" type="submit"
disabled={groups.length < 1} disabled={groups.length < 1}
onClick={submit} onClick={submit}
className="inline-flex h-11 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-11 w-full items-center justify-between gap-2 rounded-lg bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none disabled:opacity-50"
> >
<span className="w-5" /> <span className="w-5" />
<span>Add {groups.length} account to group feed</span> <span>Add {groups.length} account to group feed</span>

8
src/shared/widgets/tmp/hashtag.tsx
View File

@ -62,7 +62,7 @@ export function XhashtagWidget({ params }: { params: Widget }) {
}; };
return ( return (
<div className="flex h-full shrink-0 grow-0 basis-[400px] flex-col items-center justify-center bg-white/10 backdrop-blur-xl"> <div className="flex h-full shrink-0 grow-0 basis-[400px] flex-col items-center justify-center">
<div className="w-full px-5"> <div className="w-full px-5">
<h3 className="mb-4 text-center text-lg font-semibold"> <h3 className="mb-4 text-center text-lg font-semibold">
Enter hashtag you want to follow Enter hashtag you want to follow
@ -72,7 +72,7 @@ export function XhashtagWidget({ params }: { params: Widget }) {
<input <input
{...register('hashtag', { required: true, minLength: 1 })} {...register('hashtag', { required: true, minLength: 1 })}
placeholder="#bitcoin" placeholder="#bitcoin"
className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/50" className="relative h-11 w-full rounded-lg bg-zinc-100 px-3 py-1 text-zinc-900 !outline-none backdrop-blur-xl placeholder:text-white/50 dark:bg-zinc-900 dark:text-zinc-100"
/> />
<span className="text-sm text-red-400"> <span className="text-sm text-red-400">
{errors.hashtag && <p>{errors.hashtag.message}</p>} {errors.hashtag && <p>{errors.hashtag.message}</p>}
@ -82,7 +82,7 @@ export function XhashtagWidget({ params }: { params: Widget }) {
<button <button
type="submit" type="submit"
disabled={!isDirty || !isValid} disabled={!isDirty || !isValid}
className="inline-flex h-11 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-11 w-full items-center justify-between gap-2 rounded-lg bg-interor-500 px-6 font-medium text-zinc-900 hover:bg-interor-600 focus:outline-none disabled:opacity-50 dark:text-zinc-100"
> >
<span className="w-5" /> <span className="w-5" />
<span>Create</span> <span>Create</span>
@ -91,7 +91,7 @@ export function XhashtagWidget({ params }: { params: Widget }) {
<button <button
type="button" type="button"
onClick={cancel} onClick={cancel}
className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-white/10 px-6 font-medium leading-none text-white backdrop-blur-xl hover:bg-white/20 focus:outline-none disabled:opacity-50" className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-zinc-100 px-6 font-medium leading-none text-zinc-900 backdrop-blur-xl hover:bg-white/20 focus:outline-none disabled:opacity-50 dark:bg-zinc-900 dark:text-zinc-100"
> >
Cancel Cancel
</button> </button>

5
src/shared/widgets/wrapper.tsx
View File

@ -20,10 +20,7 @@ export function WidgetWrapper({
}} }}
minWidth={420} minWidth={420}
minHeight={'100vh'} minHeight={'100vh'}
className={twMerge( className={twMerge('relative shrink-0 grow-0', className)}
'relative shrink-0 grow-0 bg-white/10 backdrop-blur-xl',
className
)}
enable={{ right: true }} enable={{ right: true }}
> >
{children} {children}

4
src/utils/parser.ts
View File

@ -102,9 +102,7 @@ export function parser(eventContent: string) {
if (word.startsWith('nostr:naddr1') || word.startsWith('naddr1')) { if (word.startsWith('nostr:naddr1') || word.startsWith('naddr1')) {
const naddr = word.replace('nostr:', '').replace(/[^a-zA-Z0-9 ]/g, ''); const naddr = word.replace('nostr:', '').replace(/[^a-zA-Z0-9 ]/g, '');
const decoded = nip19.decode(naddr).data as AddressPointer; const decoded = nip19.decode(naddr).data as AddressPointer;
// TODO return word.replace(word, `~pub-${decoded.pubkey}~`);
console.log('todo: ', decoded);
return word.replace(word, '');
} }
// normal word // normal word