polish

src/shared/accounts/active.tsx

@@ -88,20 +88,18 @@ export function ActiveAccount({ data }: { data: any }) {
 	}, []);
 
 	if (status === "loading") {
-		return <div className="w-9 h-9 rounded bg-zinc-800 animate-pulse" />;
+		return <div className="w-9 h-9 rounded-md bg-zinc-800 animate-pulse" />;
 	}
 
 	return (
-		<div className="inline-flex items-center gap-2">
-			<div className="relative inline-block h-9 w-9">
-				<Image
-					src={user.image}
-					fallback={DEFAULT_AVATAR}
-					alt={data.npub}
-					className="h-9 w-9 rounded object-cover"
-				/>
-				<NetworkStatusIndicator />
-			</div>
+		<div className="relative inline-block h-9 w-9">
+			<Image
+				src={user.image}
+				fallback={DEFAULT_AVATAR}
+				alt={data.npub}
+				className="h-9 w-9 rounded-md object-cover"
+			/>
+			<NetworkStatusIndicator />
 		</div>
 	);
 }

src/shared/composer/modal.tsx

@@ -17,7 +17,7 @@ import { useHotkeys } from "react-hotkeys-hook";
 export function Composer() {
 	const { account } = useAccount();
 
-	const [toggle, open] = useComposer((state: any) => [
+	const [toggle, open] = useComposer((state) => [
 		state.toggleModal,
 		state.open,
 	]);
@@ -57,7 +57,7 @@ export function Composer() {
 							leaveFrom="opacity-100 scale-100"
 							leaveTo="opacity-0 scale-95"
 						>
-							<Dialog.Panel className="relative h-min w-full max-w-xl rounded-lg border border-zinc-800 bg-zinc-900">
+							<Dialog.Panel className="relative h-min w-full max-w-xl rounded-xl border-t border-zinc-800/50 bg-zinc-900">
 								<div className="flex items-center justify-between px-4 py-4">
 									<div className="flex items-center gap-2">
 										<div>{account && <User pubkey={account.pubkey} />}</div>
@@ -85,9 +85,7 @@ export function Composer() {
 										/>
 									</div>
 								</div>
-								{account && (
-									<Post pubkey={account.pubkey} privkey={account.privkey} />
-								)}
+								{account && <Post />}
 							</Dialog.Panel>
 						</Transition.Child>
 					</div>

src/shared/composer/types/post.tsx

@@ -4,6 +4,7 @@ import { ImageUploader } from "@shared/composer/imageUploader";
 import { TrashIcon } from "@shared/icons";
 import { MentionNote } from "@shared/notes/mentions/note";
 import { useComposer } from "@stores/composer";
+import { FULL_RELAYS } from "@stores/constants";
 import { useCallback, useMemo, useState } from "react";
 import { Node, Transforms, createEditor } from "slate";
 import { withHistory } from "slate-history";
@@ -44,7 +45,7 @@ const ImagePreview = ({
 				<img
 					alt={element.url}
 					src={element.url}
-					className="m-0 h-auto w-full rounded-md"
+					className="m-0 h-auto max-h-[300px] w-full rounded-md object-cover"
 				/>
 				<button
 					type="button"
@@ -58,11 +59,11 @@ const ImagePreview = ({
 	);
 };
 
-export function Post({ pubkey, privkey }: { pubkey: string; privkey: string }) {
+export function Post() {
 	const publish = usePublish();
-	const [repost, toggle] = useComposer((state: any) => [
+	const [repost, toggle] = useComposer((state) => [
 		state.repost,
-		state.toggle,
+		state.toggleModal,
 	]);
 	const editor = useMemo(
 		() => withReact(withImages(withHistory(createEditor()))),
@@ -86,10 +87,11 @@ export function Post({ pubkey, privkey }: { pubkey: string; privkey: string }) {
 	const submit = () => {
 		let tags: string[][] = [];
 		let kind: number;
+
 		if (repost.id && repost.pubkey) {
 			kind = 6;
 			tags = [
-				["e", repost.id],
+				["e", repost.id, FULL_RELAYS[0], "root"],
 				["p", repost.pubkey],
 			];
 		} else {
@@ -140,7 +142,7 @@ export function Post({ pubkey, privkey }: { pubkey: string; privkey: string }) {
 				</div>
 				<div className="mt-4 flex items-center justify-between">
 					<ImageUploader />
-					<Button onClick={() => submit} preset="publish">
+					<Button onClick={() => submit()} preset="publish">
 						Publish
 					</Button>
 				</div>

src/shared/icons/index.tsx

@@ -37,4 +37,5 @@ export * from "./trending";
 export * from "./empty";
 export * from "./cmd";
 export * from "./verticalDots";
+export * from "./signal";
 // @endindex

src/shared/icons/signal.tsx

@@ -0,0 +1,24 @@
+import { SVGProps } from "react";
+
+export function SignalIcon(
+	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="24"
+			height="24"
+			fill="none"
+			viewBox="0 0 24 24"
+			{...props}
+		>
+			<path
+				stroke="currentColor"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+				strokeWidth="1.5"
+				d="M5.46 5.46A9.221 9.221 0 002.75 12a9.221 9.221 0 002.71 6.541M8.365 8.367a5.123 5.123 0 00-1.505 3.634c0 1.419.575 2.704 1.505 3.633m7.268 0a5.122 5.122 0 001.505-3.633c0-1.42-.575-2.704-1.505-3.634m2.907 10.174a9.22 9.22 0 002.709-6.54 9.22 9.22 0 00-2.71-6.541M12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"
+			/>
+		</svg>
+	);
+}

src/shared/lumeBar.tsx

@@ -2,11 +2,12 @@ import { Transition } from "@headlessui/react";
 import { getActiveAccount } from "@libs/storage";
 import { ActiveAccount } from "@shared/accounts/active";
 import { VerticalDotsIcon } from "@shared/icons";
+import { RelayManager } from "@shared/relayManager";
 import { useQuery } from "@tanstack/react-query";
 import { useState } from "react";
 import { Link } from "react-router-dom";
 
-export function MultiAccounts() {
+export function LumeBar() {
 	const { status, data: activeAccount } = useQuery(
 		["activeAccount"],
 		async () => {
@@ -25,10 +26,11 @@ export function MultiAccounts() {
 			<div className="flex items-center justify-between">
 				<div className="flex items-center gap-2">
 					{status === "loading" ? (
-						<div className="group relative flex h-9 w-9 shrink animate-pulse items-center justify-center rounded-lg bg-zinc-900" />
+						<div className="group relative flex h-9 w-9 shrink animate-pulse items-center justify-center rounded-md bg-zinc-900" />
 					) : (
 						<ActiveAccount data={activeAccount} />
 					)}
+					<RelayManager />
 				</div>
 				<button
 					type="button"

src/shared/navigation.tsx

@@ -1,10 +1,9 @@
-import { ChannelsList } from "@app/channel/components/list";
 import { ChatsList } from "@app/chat/components/list";
 import { Disclosure } from "@headlessui/react";
 import { AppHeader } from "@shared/appHeader";
 import { Composer } from "@shared/composer/modal";
 import { NavArrowDownIcon, SpaceIcon, TrendingIcon } from "@shared/icons";
-import { MultiAccounts } from "@shared/multiAccounts";
+import { LumeBar } from "@shared/lumeBar";
 import { NavLink } from "react-router-dom";
 import { twMerge } from "tailwind-merge";
 
@@ -118,8 +117,8 @@ export function Navigation({ reverse = false }: { reverse?: boolean }) {
 					)}
 				</Disclosure>
 			</div>
-			<div className="absolute bottom-2 left-0 px-8 w-full">
-				<MultiAccounts />
+			<div className="absolute bottom-3 left-0 px-8 w-full">
+				<LumeBar />
 			</div>
 		</div>
 	);

src/shared/notes/contents/kind1.tsx

@@ -17,7 +17,7 @@ export function Kind1({
 				{content.parsed}
 			</div>
 			{Array.isArray(content.images) && content.images.length ? (
-				<ImagePreview urls={content.images} />
+				<ImagePreview urls={content.images} truncate={truncate} />
 			) : (
 				<></>
 			)}

src/shared/notes/mentions/note.tsx

@@ -57,7 +57,7 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
 										Lume isn't fully support this kind in newsfeed
 									</p>
 								</div>
-								<div className="markdown">
+								<div className="select-text whitespace-pre-line	break-words text-base text-zinc-100">
 									<p>{data.content}</p>
 								</div>
 							</div>

src/shared/notes/note.tsx

@@ -71,7 +71,7 @@ export function Note({ event, block }: Note) {
 						time={event.created_at}
 						repost={isRepost}
 					/>
-					<div className="z-10 relative -mt-6 pl-[49px]">
+					<div className="relative -mt-6 pl-[49px]">
 						{renderContent}
 						{!isRepost && (
 							<NoteMetadata

src/shared/notes/preview/image.tsx

@@ -1,6 +1,9 @@
 import { Image } from "@shared/image";
 
-export function ImagePreview({ urls }: { urls: string[] }) {
+export function ImagePreview({
+	urls,
+	truncate,
+}: { urls: string[]; truncate?: boolean }) {
 	return (
 		<div className="mt-3 max-w-[420px] overflow-hidden">
 			<div className="flex flex-col gap-2">
@@ -10,7 +13,9 @@ export function ImagePreview({ urls }: { urls: string[] }) {
 							src={url}
 							fallback="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
 							alt="image"
-							className="h-auto w-full border border-zinc-800/50 rounded-lg object-cover"
+							className={`${
+								truncate ? "h-auto max-h-[300px]" : "h-auto"
+							} w-full border border-zinc-800/50 rounded-lg object-cover`}
 						/>
 					</div>
 				))}

src/shared/relayManager.tsx

@@ -0,0 +1,13 @@
+import { SignalIcon } from "@shared/icons";
+
+export function RelayManager() {
+	return (
+		<button
+			type="button"
+			aria-label="Relay manager"
+			className="inline-flex items-center justify-center w-9 h-9 rounded-md border-t bg-zinc-800 border-zinc-700/50 transform active:translate-y-1"
+		>
+			<SignalIcon className="w-4 h-4 text-zinc-400" />
+		</button>
+	);
+}

src/shared/user.tsx

@@ -33,7 +33,7 @@ export function User({
 			}`}
 		>
 			<Popover.Button
-				className={`${avatarWidth} ${avatarHeight} relative z-50 bg-zinc-900 shrink-0 overflow-hidden`}
+				className={`${avatarWidth} ${avatarHeight} relative z-10 bg-zinc-900 shrink-0 overflow-hidden`}
 			>
 				<Image
 					src={user?.image}