From d3fa59d2b167acb53a656d1b77490682efbda88a Mon Sep 17 00:00:00 2001
From: reya <reya@lume.nu>
Date: Wed, 27 Mar 2024 08:36:34 +0700
Subject: [PATCH] chore: polish

---
 apps/desktop2/src/routes/$account.tsx          |  4 +++-
 apps/desktop2/src/routes/editor/index.tsx      |  2 +-
 .../src/routes/events/$eventId.lazy.tsx        |  2 +-
 packages/ark/src/ark.ts                        |  3 ++-
 packages/ui/src/note/content.tsx               | 18 ++++++++++++++++--
 5 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/apps/desktop2/src/routes/$account.tsx b/apps/desktop2/src/routes/$account.tsx
index 52231828..14067002 100644
--- a/apps/desktop2/src/routes/$account.tsx
+++ b/apps/desktop2/src/routes/$account.tsx
@@ -1,5 +1,5 @@
 import { ComposeFilledIcon, PlusIcon } from "@lume/icons";
-import { Outlet, createFileRoute } from "@tanstack/react-router";
+import { Outlet, createFileRoute, useNavigate } from "@tanstack/react-router";
 import { cn } from "@lume/utils";
 import { Accounts } from "@/components/accounts";
 import { useArk } from "@lume/ark";
@@ -10,6 +10,7 @@ export const Route = createFileRoute("/$account")({
 
 function App() {
   const ark = useArk();
+  const navigate = useNavigate();
   const { platform } = Route.useRouteContext();
 
   return (
@@ -25,6 +26,7 @@ function App() {
           <Accounts />
           <button
             type="button"
+            onClick={() => navigate({ to: "/landing" })}
             className="inline-flex size-8 items-center justify-center rounded-full bg-neutral-200 text-neutral-800 hover:bg-neutral-400 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-600"
           >
             <PlusIcon className="size-5" />
diff --git a/apps/desktop2/src/routes/editor/index.tsx b/apps/desktop2/src/routes/editor/index.tsx
index 01d852dd..6b9d4041 100644
--- a/apps/desktop2/src/routes/editor/index.tsx
+++ b/apps/desktop2/src/routes/editor/index.tsx
@@ -211,7 +211,7 @@ function Screen() {
           <button
             type="button"
             onClick={publish}
-            className="inline-flex h-9 w-24 items-center justify-center rounded-full bg-blue-500 px-3 text-sm font-medium text-white hover:bg-blue-600"
+            className="inline-flex h-9 w-24 items-center justify-center rounded-full bg-blue-500 px-3 font-medium text-white hover:bg-blue-600"
           >
             {loading ? (
               <LoaderIcon className="size-5 animate-spin" />
diff --git a/apps/desktop2/src/routes/events/$eventId.lazy.tsx b/apps/desktop2/src/routes/events/$eventId.lazy.tsx
index e26b9377..a35c2718 100644
--- a/apps/desktop2/src/routes/events/$eventId.lazy.tsx
+++ b/apps/desktop2/src/routes/events/$eventId.lazy.tsx
@@ -58,7 +58,7 @@ function MainNote({ data }: { data: Event }) {
           </User.Root>
         </User.Provider>
         <Note.Thread className="mb-2" />
-        <Note.Content className="min-w-0" />
+        <Note.Content className="min-w-0" compact={false} />
         <div className="mt-4 flex items-center justify-between">
           <div className="-ml-1 inline-flex items-center gap-4">
             <Note.Repost />
diff --git a/packages/ark/src/ark.ts b/packages/ark/src/ark.ts
index 2af5e51c..78128d8e 100644
--- a/packages/ark/src/ark.ts
+++ b/packages/ark/src/ark.ts
@@ -504,10 +504,11 @@ export class Ark {
 			title: "Thread",
 			url: `/events/${id}`,
 			minWidth: 500,
-			width: 600,
+			width: 500,
 			height: 800,
 			hiddenTitle: true,
 			titleBarStyle: "overlay",
+			center: false,
 		});
 	}
 
diff --git a/packages/ui/src/note/content.tsx b/packages/ui/src/note/content.tsx
index ecfd2507..12415f5b 100644
--- a/packages/ui/src/note/content.tsx
+++ b/packages/ui/src/note/content.tsx
@@ -18,14 +18,22 @@ import { VideoPreview } from "./preview/video";
 import { ImagePreview } from "./preview/image";
 import reactStringReplace from "react-string-replace";
 
-export function NoteContent({ className }: { className?: string }) {
+export function NoteContent({
+  compact = true,
+  className,
+}: {
+  compact?: boolean;
+  className?: string;
+}) {
   const event = useNoteContext();
   const content = useMemo(() => {
     const text = event.content.trim();
     const words = text.split(/( |\n)/);
 
     // @ts-ignore, kaboom !!!
-    let parsedContent: ReactNode[] = text;
+    let parsedContent: ReactNode[] = compact
+      ? text.replace(/\n\s*\n/g, "\n")
+      : text;
 
     const hashtags = words.filter((word) => word.startsWith("#"));
     const events = words.filter((word) =>
@@ -112,6 +120,12 @@ export function NoteContent({ className }: { className?: string }) {
         },
       );
 
+      if (compact) {
+        parsedContent = reactStringReplace(parsedContent, /\n|\r/g, () => (
+          <div key={nanoid()} className="h-1.5" />
+        ));
+      }
+
       return parsedContent;
     } catch (e) {
       return text;