mirror of
https://github.com/lumehq/lume.git
synced 2025-07-14 03:02:18 +02:00
chore: polish
This commit is contained in:
@ -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" />
|
||||||
|
@ -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" />
|
||||||
|
@ -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 />
|
||||||
|
@ -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,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
Reference in New Issue
Block a user