- {img && 
}
+
);
}
diff --git a/src/element/stream-cards.css b/src/element/stream-cards.css
index 37bfdbd..f7f5eed 100644
--- a/src/element/stream-cards.css
+++ b/src/element/stream-cards.css
@@ -4,14 +4,27 @@
@media (min-width: 1020px) {
.stream-cards {
- display: flex;
+ display: grid;
align-items: flex-start;
- gap: 24px;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 32px;
margin-top: 12px;
flex-wrap: wrap;
}
}
+@media (min-width: 1600px) {
+ .stream-cards {
+ grid-template-columns: repeat(3, 1fr);
+ }
+}
+
+@media (min-width: 2100px) {
+ .stream-cards {
+ grid-template-columns: repeat(4, 1fr);
+ }
+}
+
.card-container {
display: flex;
flex-direction: column;
@@ -28,11 +41,14 @@
display: flex;
align-self: flex-start;
flex-direction: column;
- padding: 20px 24px;
gap: 16px;
- border-radius: 24px;
- background: #111;
- width: 210px;
+ flex: 1;
+ width: 100%;
+}
+
+.stream-card.image-card {
+ padding: 0;
+ background: transparent;
}
.stream-card .card-title {
@@ -83,13 +99,14 @@
line-height: 20px;
}
-
.new-card textarea {
width: unset;
background: #262626;
padding: 8px 16px;
border-radius: 16px;
margin-bottom: 8px;
+ resize: vertical;
+ min-height: 210px;
}
.form-control {
@@ -126,3 +143,29 @@
background: transparent;
color: var(--text-danger);
}
+
+@keyframes shake {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 25% {
+ transform: rotate(5deg);
+ }
+ 50% {
+ transform: rotate(0eg);
+ }
+ 75% {
+ transform: rotate(-5deg);
+ }
+ 100% {
+ transform: rotate(0deg);
+ }
+}
+
+.stream-card .card-image {
+ max-width: 343px;
+}
+
+.stream-card {
+ max-width: 343px;
+}
diff --git a/src/element/stream-cards.tsx b/src/element/stream-cards.tsx
index 608beba..9a53cd9 100644
--- a/src/element/stream-cards.tsx
+++ b/src/element/stream-cards.tsx
@@ -1,10 +1,13 @@
import "./stream-cards.css";
-import { useState } from "react";
+import { useState, forwardRef } from "react";
import * as Dialog from "@radix-ui/react-dialog";
+import { DndProvider, useDrag, useDrop } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
import type { NostrEvent } from "@snort/system";
+import { Toggle } from "element/toggle";
import { useLogin } from "hooks/login";
import { useCards } from "hooks/cards";
import { CARD, USER_CARDS } from "const";
@@ -30,50 +33,150 @@ interface CardProps {
cards: NostrEvent[];
}
+function isEmpty(s?: string) {
+ return !s || s.trim().length === 0;
+}
+
+const CardPreview = forwardRef(
+ ({ style, title, link, image, content }, ref) => {
+ const isImageOnly = !isEmpty(image) && isEmpty(content) && isEmpty(title);
+ return (
+
+ {img?.length > 0 && (
+
+ )}
+ {img && }
+
+ {title &&
+ 
+
+ ) : (
+
+ ))}
+
+ );
+ },
+);
+
function Card({ canEdit, ev, cards }: CardProps) {
+ const login = useLogin();
const identifier = findTag(ev, "d");
const title = findTag(ev, "title") || findTag(ev, "subject");
const image = findTag(ev, "image");
const link = findTag(ev, "r");
- const evCard = { title, image, link, content: ev.content, identifier };
+ const content = ev.content;
+ const evCard = { title, image, link, content, identifier };
+ const tags = cards.map(toTag);
+ const [style, dragRef] = useDrag(
+ () => ({
+ type: "card",
+ item: { identifier },
+ canDrag: () => {
+ return canEdit;
+ },
+ collect: (monitor) => {
+ const isDragging = monitor.isDragging();
+ return {
+ opacity: isDragging ? 0.1 : 1,
+ cursor: !canEdit ? "auto" : isDragging ? "grabbing" : "grab",
+ };
+ },
+ }),
+ [canEdit, identifier],
+ );
+
+ function findTagByIdentifier(d) {
+ return tags.find((t) => t.at(1).endsWith(`:${d}`));
+ }
+
+ const [dropStyle, dropRef] = useDrop(
+ () => ({
+ accept: ["card"],
+ canDrop: () => {
+ return canEdit;
+ },
+ collect: (monitor) => {
+ const isOvering = monitor.isOver({ shallow: true });
+ return {
+ opacity: isOvering ? 0.3 : 1,
+ animation: isOvering ? "shake 0.1s 3" : "",
+ };
+ },
+ async drop(item) {
+ if (identifier === item.identifier) {
+ return;
+ }
+ const newItem = findTagByIdentifier(item.identifier);
+ const oldItem = findTagByIdentifier(identifier);
+ const newTags = tags.map((t) => {
+ if (t === oldItem) {
+ return newItem;
+ }
+ if (t === newItem) {
+ return oldItem;
+ }
+ return t;
+ });
+ const pub = login?.publisher();
+ const userCardsEv = await pub.generic((eb) => {
+ eb.kind(USER_CARDS).content("");
+ for (const tag of newTags) {
+ eb.tag(tag);
+ }
+ return eb;
+ });
+ console.debug(userCardsEv);
+ System.BroadcastEvent(userCardsEv);
+ },
+ }),
+ [canEdit, tags, identifier],
+ );
const card = (
- <>
- {title}
} + {image && + (link?.length > 0 ? ( +
- {title && }
-
-
+ {title}
} - {image &&
-
);
- return link && !canEdit ? (
-
- {card}
- {editor}
-
- ) : (
-
+ return canEdit ? (
+
{card}
{editor}
+ ) : (
+ {card}
);
}
interface CardDialogProps {
header?: string;
cta?: string;
+ cancelCta?: string;
card?: CardType;
onSave(ev: CardType): void;
onCancel(): void;
}
-function CardDialog({ header, cta, card, onSave, onCancel }: CardDialogProps) {
+function CardDialog({
+ header,
+ cta,
+ cancelCta,
+ card,
+ onSave,
+ onCancel,
+}: CardDialogProps) {
const [title, setTitle] = useState(card?.title ?? "");
const [image, setImage] = useState(card?.image ?? "");
const [content, setContent] = useState(card?.content ?? "");
@@ -94,10 +197,14 @@ function CardDialog({ header, cta, card, onSave, onCancel }: CardDialogProps) {
- setImage("")}
+ />
-
+
@@ -137,11 +244,14 @@ function CardDialog({ header, cta, card, onSave, onCancel }: CardDialogProps) {
interface EditCardProps {
card: CardType;
+ cards: NostrEvent[];
}
-function EditCard({ card }: EditCardProps) {
+function EditCard({ card, cards }: EditCardProps) {
const login = useLogin();
const [isOpen, setIsOpen] = useState(false);
+ const identifier = card.identifier;
+ const tags = cards.map(toTag);
async function editCard({ title, image, link, content }) {
const pub = login?.publisher();
@@ -165,8 +275,23 @@ function EditCard({ card }: EditCardProps) {
}
}
- function onCancel() {
- setIsOpen(false);
+ async function onCancel() {
+ const pub = login?.publisher();
+ if (pub) {
+ const userCardsEv = await pub.generic((eb) => {
+ eb.kind(USER_CARDS).content("");
+ for (const tag of tags) {
+ if (!tag.at(1).endsWith(`:${identifier}`)) {
+ eb.tag(tag);
+ }
+ }
+ return eb;
+ });
+
+ console.debug(userCardsEv);
+ System.BroadcastEvent(userCardsEv);
+ setIsOpen(false);
+ }
}
return (
@@ -180,6 +305,7 @@ function EditCard({ card }: EditCardProps) {
- {cards.map((ev) => (
-
+ const [isEditing, setIsEditing] = useState(false);
+ const components = (
+ <>
+
+ {cards.map((ev) => (
+
+ {canEdit && (
+
+
+ )}
+
);
+ return
+
+ {pressed ?
+ {text}
+
+ );
+}
diff --git a/src/hooks/follows.ts b/src/hooks/follows.ts
index d006b60..a9f3921 100644
--- a/src/hooks/follows.ts
+++ b/src/hooks/follows.ts
@@ -18,9 +18,9 @@ export default function useFollows(pubkey: string, leaveOpen = false) {
const { data } = useRequestBuilder