chore: polish

This commit is contained in:
reya
2024-03-27 08:36:34 +07:00
parent aa23e39334
commit d3fa59d2b1
5 changed files with 23 additions and 6 deletions

View File

@ -1,5 +1,5 @@
import { ComposeFilledIcon, PlusIcon } from "@lume/icons"; 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 { cn } from "@lume/utils";
import { Accounts } from "@/components/accounts"; import { Accounts } from "@/components/accounts";
import { useArk } from "@lume/ark"; import { useArk } from "@lume/ark";
@ -10,6 +10,7 @@ export const Route = createFileRoute("/$account")({
function App() { function App() {
const ark = useArk(); const ark = useArk();
const navigate = useNavigate();
const { platform } = Route.useRouteContext(); const { platform } = Route.useRouteContext();
return ( return (
@ -25,6 +26,7 @@ function App() {
<Accounts /> <Accounts />
<button <button
type="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" 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" /> <PlusIcon className="size-5" />

View File

@ -211,7 +211,7 @@ function Screen() {
<button <button
type="button" type="button"
onClick={publish} 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 ? ( {loading ? (
<LoaderIcon className="size-5 animate-spin" /> <LoaderIcon className="size-5 animate-spin" />

View File

@ -58,7 +58,7 @@ function MainNote({ data }: { data: Event }) {
</User.Root> </User.Root>
</User.Provider> </User.Provider>
<Note.Thread className="mb-2" /> <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="mt-4 flex items-center justify-between">
<div className="-ml-1 inline-flex items-center gap-4"> <div className="-ml-1 inline-flex items-center gap-4">
<Note.Repost /> <Note.Repost />

View File

@ -504,10 +504,11 @@ export class Ark {
title: "Thread", title: "Thread",
url: `/events/${id}`, url: `/events/${id}`,
minWidth: 500, minWidth: 500,
width: 600, width: 500,
height: 800, height: 800,
hiddenTitle: true, hiddenTitle: true,
titleBarStyle: "overlay", titleBarStyle: "overlay",
center: false,
}); });
} }

View File

@ -18,14 +18,22 @@ import { VideoPreview } from "./preview/video";
import { ImagePreview } from "./preview/image"; import { ImagePreview } from "./preview/image";
import reactStringReplace from "react-string-replace"; 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 event = useNoteContext();
const content = useMemo(() => { const content = useMemo(() => {
const text = event.content.trim(); const text = event.content.trim();
const words = text.split(/( |\n)/); const words = text.split(/( |\n)/);
// @ts-ignore, kaboom !!! // @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 hashtags = words.filter((word) => word.startsWith("#"));
const events = words.filter((word) => 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; return parsedContent;
} catch (e) { } catch (e) {
return text; return text;