diff --git a/src/shared/accounts/active.tsx b/src/shared/accounts/active.tsx
index 88322647..12198783 100644
--- a/src/shared/accounts/active.tsx
+++ b/src/shared/accounts/active.tsx
@@ -8,6 +8,7 @@ import { useProfile } from "@utils/hooks/useProfile";
import { sendNativeNotification } from "@utils/notification";
import { produce } from "immer";
import { useContext, useEffect } from "react";
+import { Link } from "react-router-dom";
const lastLogin = await getLastLogin();
@@ -92,7 +93,10 @@ export function ActiveAccount({ data }: { data: any }) {
}
return (
-
+
-
+
);
}
diff --git a/src/shared/avatarUploader.tsx b/src/shared/avatarUploader.tsx
index 8a92379b..59c4cd05 100644
--- a/src/shared/avatarUploader.tsx
+++ b/src/shared/avatarUploader.tsx
@@ -1,11 +1,10 @@
-import { createBlobFromFile } from "@utils/createBlobFromFile";
-
-import { LoaderIcon } from "./icons";
+import { LoaderIcon, PlusIcon } from "@shared/icons";
import { open } from "@tauri-apps/api/dialog";
import { Body, fetch } from "@tauri-apps/api/http";
+import { createBlobFromFile } from "@utils/createBlobFromFile";
import { useState } from "react";
-export function AvatarUploader({ valueState }: { valueState: any }) {
+export function AvatarUploader({ setPicture }: { setPicture: any }) {
const [loading, setLoading] = useState(false);
const openFileDialog = async () => {
@@ -44,23 +43,26 @@ export function AvatarUploader({ valueState }: { valueState: any }) {
body: Body.bytes(buf),
},
);
- const webpImage = `https://void.cat/d/${res.data.file.id}.webp`;
+ const image = `https://void.cat/d/${res.data.file.id}.jpg`;
- valueState(webpImage);
+ // update parent state
+ setPicture(image);
+
+ // disable loader
setLoading(false);
}
};
return (
);
diff --git a/src/shared/bannerUploader.tsx b/src/shared/bannerUploader.tsx
new file mode 100644
index 00000000..af417232
--- /dev/null
+++ b/src/shared/bannerUploader.tsx
@@ -0,0 +1,69 @@
+import { LoaderIcon, PlusIcon } from "@shared/icons";
+import { open } from "@tauri-apps/api/dialog";
+import { Body, fetch } from "@tauri-apps/api/http";
+import { createBlobFromFile } from "@utils/createBlobFromFile";
+import { useState } from "react";
+
+export function BannerUploader({ setBanner }: { setBanner: any }) {
+ const [loading, setLoading] = useState(false);
+
+ const openFileDialog = async () => {
+ const selected: any = await open({
+ multiple: false,
+ filters: [
+ {
+ name: "Image",
+ extensions: ["png", "jpeg", "jpg", "gif"],
+ },
+ ],
+ });
+ if (Array.isArray(selected)) {
+ // user selected multiple files
+ } else if (selected === null) {
+ // user cancelled the selection
+ } else {
+ setLoading(true);
+
+ const filename = selected.split("/").pop();
+ const file = await createBlobFromFile(selected);
+ const buf = await file.arrayBuffer();
+
+ const res: { data: { file: { id: string } } } = await fetch(
+ "https://void.cat/upload?cli=false",
+ {
+ method: "POST",
+ timeout: 5,
+ headers: {
+ accept: "*/*",
+ "Content-Type": "application/octet-stream",
+ "V-Filename": filename,
+ "V-Description": "Upload from https://lume.nu",
+ "V-Strip-Metadata": "true",
+ },
+ body: Body.bytes(buf),
+ },
+ );
+ const image = `https://void.cat/d/${res.data.file.id}.jpg`;
+
+ // update parent state
+ setBanner(image);
+
+ // disable loader
+ setLoading(false);
+ }
+ };
+
+ return (
+
+ );
+}
diff --git a/src/shared/editProfileModal.tsx b/src/shared/editProfileModal.tsx
new file mode 100644
index 00000000..e48e98a3
--- /dev/null
+++ b/src/shared/editProfileModal.tsx
@@ -0,0 +1,226 @@
+import { Dialog, Transition } from "@headlessui/react";
+import { usePublish } from "@libs/ndk";
+import { getPleb } from "@libs/storage";
+import { AvatarUploader } from "@shared/avatarUploader";
+import { BannerUploader } from "@shared/bannerUploader";
+import { CancelIcon, LoaderIcon } from "@shared/icons";
+import { Image } from "@shared/image";
+import { DEFAULT_AVATAR } from "@stores/constants";
+import { useAccount } from "@utils/hooks/useAccount";
+import { Fragment, useState } from "react";
+import { useForm } from "react-hook-form";
+
+export function EditProfileModal() {
+ const publish = usePublish();
+
+ const [isOpen, setIsOpen] = useState(false);
+ const [loading, setLoading] = useState(false);
+ const [picture, setPicture] = useState(DEFAULT_AVATAR);
+ const [banner, setBanner] = useState(null);
+
+ const { account } = useAccount();
+ const {
+ register,
+ handleSubmit,
+ reset,
+ formState: { isValid },
+ } = useForm({
+ defaultValues: async () => {
+ const res = await getPleb(account.npub);
+ if (res.picture) {
+ setPicture(res.image);
+ }
+ if (res.banner) {
+ setBanner(res.banner);
+ }
+ return res;
+ },
+ });
+
+ const closeModal = () => {
+ setIsOpen(false);
+ };
+
+ const openModal = () => {
+ setIsOpen(true);
+ };
+
+ const onSubmit = (data: any) => {
+ // start loading
+ setLoading(true);
+
+ // publish
+ const event = publish({
+ content: JSON.stringify({
+ ...data,
+ display_name: data.name,
+ bio: data.about,
+ image: data.picture,
+ }),
+ kind: 0,
+ tags: [],
+ });
+
+ if (event) {
+ setTimeout(() => {
+ // reset form
+ reset();
+ // reset state
+ setLoading(false);
+ setIsOpen(false);
+ setPicture(DEFAULT_AVATAR);
+ setBanner(null);
+ }, 1200);
+ }
+ };
+
+ return (
+ <>
+
+
+
+
+
+ );
+}
diff --git a/src/shared/icons/thread.tsx b/src/shared/icons/thread.tsx
index 0e6cc95a..4f9689fd 100644
--- a/src/shared/icons/thread.tsx
+++ b/src/shared/icons/thread.tsx
@@ -13,8 +13,11 @@ export function ThreadIcon(
{...props}
>
);
diff --git a/src/shared/mediaUploader.tsx b/src/shared/mediaUploader.tsx
index 49f009a9..6ae4ebec 100644
--- a/src/shared/mediaUploader.tsx
+++ b/src/shared/mediaUploader.tsx
@@ -1,5 +1,5 @@
-import { MediaIcon } from "@shared/icons";
-import { Tooltip } from "@shared/tooltip";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import { LoaderIcon, MediaIcon } from "@shared/icons";
import { open } from "@tauri-apps/api/dialog";
import { Body, fetch } from "@tauri-apps/api/http";
import { createBlobFromFile } from "@utils/createBlobFromFile";
@@ -56,42 +56,35 @@ export function MediaUploader({ setState }: { setState: any }) {
};
return (
-
-
-
+ {loading ? (
+
+ ) : (
+
+ )}
+
+
+
+
+ Upload media
+
+
+
+
+
);
}
diff --git a/src/shared/notes/metadata.tsx b/src/shared/notes/metadata.tsx
index a6af71cd..faf5fe93 100644
--- a/src/shared/notes/metadata.tsx
+++ b/src/shared/notes/metadata.tsx
@@ -1,11 +1,13 @@
-import { createReplyNote } from "@libs/storage";
+import { createBlock, createReplyNote } from "@libs/storage";
import { NDKEvent, NDKFilter } from "@nostr-dev-kit/ndk";
+import * as Tooltip from "@radix-ui/react-tooltip";
import { LoaderIcon, ReplyIcon, RepostIcon, ZapIcon } from "@shared/icons";
+import { ThreadIcon } from "@shared/icons/thread";
import { NoteReply } from "@shared/notes/metadata/reply";
import { NoteRepost } from "@shared/notes/metadata/repost";
import { NoteZap } from "@shared/notes/metadata/zap";
import { RelayContext } from "@shared/relayProvider";
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { decode } from "light-bolt11-decoder";
import { useContext } from "react";
@@ -19,6 +21,8 @@ export function NoteMetadata({
eventPubkey: string;
}) {
const ndk = useContext(RelayContext);
+ const queryClient = useQueryClient();
+
const { status, data } = useQuery(["note-metadata", id], async () => {
let replies = 0;
let reposts = 0;
@@ -67,49 +71,71 @@ export function NoteMetadata({
return { replies, reposts, zap };
});
+ const block = useMutation({
+ mutationFn: (data: any) => {
+ return createBlock(data.kind, data.title, data.content);
+ },
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ["blocks"] });
+ },
+ });
+
+ const openThread = (thread: string) => {
+ const selection = window.getSelection();
+ if (selection.toString().length === 0) {
+ block.mutate({ kind: 2, title: "Thread", content: thread });
+ } else {
+ event.stopPropagation();
+ }
+ };
+
+ if (status === "loading") {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+
return (
-
- {status === "loading" ? (
- <>
-
-
-
-
-
-
-
-
-
-
-
-
-
- ) : (
- <>
+
+
+
+
+
+
+
+
+ Open thread
+
+
+
+
+
+
);
}
diff --git a/src/shared/notes/metadata/reply.tsx b/src/shared/notes/metadata/reply.tsx
index 3445e804..b515416b 100644
--- a/src/shared/notes/metadata/reply.tsx
+++ b/src/shared/notes/metadata/reply.tsx
@@ -1,3 +1,4 @@
+import * as Tooltip from "@radix-ui/react-tooltip";
import { ReplyIcon } from "@shared/icons";
import { useComposer } from "@stores/composer";
import { compactNumber } from "@utils/number";
@@ -11,19 +12,30 @@ export function NoteReply({
const setReply = useComposer((state) => state.setReply);
return (
-
+
+
+
+
+ Quick reply
+
+
+
+
);
}
diff --git a/src/shared/notes/metadata/repost.tsx b/src/shared/notes/metadata/repost.tsx
index 46cc443a..15669e2c 100644
--- a/src/shared/notes/metadata/repost.tsx
+++ b/src/shared/notes/metadata/repost.tsx
@@ -1,3 +1,4 @@
+import * as Tooltip from "@radix-ui/react-tooltip";
import { RepostIcon } from "@shared/icons";
import { useComposer } from "@stores/composer";
import { compactNumber } from "@utils/number";
@@ -10,19 +11,30 @@ export function NoteRepost({
const setRepost = useComposer((state) => state.setRepost);
return (
-
+
+
+
+
+ Repost
+
+
+
+
);
}
diff --git a/src/shared/notes/metadata/zap.tsx b/src/shared/notes/metadata/zap.tsx
index 26e5a5ef..70aafc65 100644
--- a/src/shared/notes/metadata/zap.tsx
+++ b/src/shared/notes/metadata/zap.tsx
@@ -1,20 +1,32 @@
+import * as Tooltip from "@radix-ui/react-tooltip";
import { ZapIcon } from "@shared/icons";
import { compactNumber } from "@utils/number";
export function NoteZap({ zaps }: { zaps: number }) {
return (
-
+
+
+
+
+ Coming Soon
+
+
+
+
);
}
diff --git a/src/shared/tooltip.tsx b/src/shared/tooltip_dep.tsx
similarity index 100%
rename from src/shared/tooltip.tsx
rename to src/shared/tooltip_dep.tsx
diff --git a/src/utils/hooks/useProfile.tsx b/src/utils/hooks/useProfile.tsx
index 719ea660..5f846cb2 100644
--- a/src/utils/hooks/useProfile.tsx
+++ b/src/utils/hooks/useProfile.tsx
@@ -24,12 +24,10 @@ export function useProfile(id: string) {
const result = await getPleb(npub);
if (result && parseInt(result.created_at) + 86400 >= current) {
- console.log("cache", result);
return result;
} else {
const user = ndk.getUser({ npub });
await user.fetchProfile();
- console.log("new", user);
await createPleb(id, user.profile);
return user.profile;
diff --git a/tailwind.config.js b/tailwind.config.js
index 650c71e8..7915eeb6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,7 +4,35 @@ module.exports = {
content: ["./src/**/*.{js,ts,jsx,tsx}", "index.html"],
darkMode: "class",
theme: {
- extend: {},
+ extend: {
+ keyframes: {
+ slideDownAndFade: {
+ from: { opacity: 0, transform: "translateY(-2px)" },
+ to: { opacity: 1, transform: "translateY(0)" },
+ },
+ slideLeftAndFade: {
+ from: { opacity: 0, transform: "translateX(2px)" },
+ to: { opacity: 1, transform: "translateX(0)" },
+ },
+ slideUpAndFade: {
+ from: { opacity: 0, transform: "translateY(2px)" },
+ to: { opacity: 1, transform: "translateY(0)" },
+ },
+ slideRightAndFade: {
+ from: { opacity: 0, transform: "translateX(-2px)" },
+ to: { opacity: 1, transform: "translateX(0)" },
+ },
+ },
+ animation: {
+ slideDownAndFade:
+ "slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+ slideLeftAndFade:
+ "slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+ slideUpAndFade: "slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+ slideRightAndFade:
+ "slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+ },
+ },
},
plugins: [require("@tailwindcss/typography")],
};
diff --git a/tsconfig.json b/tsconfig.json
index 0ce1e749..2f86f511 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -8,7 +8,6 @@
"@stores/*": ["src/stores/*"],
"@utils/*": ["src/utils/*"]
},
- "types": ["vidstack/globals"],
"target": "es2017",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
@@ -25,6 +24,6 @@
"jsx": "preserve",
"strictNullChecks": false
},
- "include": ["global.d.ts", "**/*.ts", "**/*.tsx", "src/main.tsx"],
+ "include": ["**/*.ts", "**/*.tsx"],
"exclude": ["node_modules", "dist", "src-tauri"]
}