highperfocused/lume
1
0
Fork 0
mirror of https://github.com/lumehq/lume.git synced 2025-03-18 05:41:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(columns): add group column

Browse Source
This commit is contained in:
reya 2024-01-01 17:32:57 +07:00
parent 499765c10a
commit a52fb3c437
17 changed files with 430 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/desktop/package.json
View File

@ -8,6 +8,7 @@
"build": "vite build"
},
"dependencies": {
"@columns/group": "workspace:^",
"@columns/hashtag": "workspace:^",
"@columns/notification": "workspace:^",
"@columns/thread": "workspace:^",

3
apps/desktop/src/routes/home/index.tsx
View File

@ -1,3 +1,4 @@
import { Group } from "@columns/group";
import { Hashtag } from "@columns/hashtag";
import { Thread } from "@columns/thread";
import { Timeline } from "@columns/timeline";
@ -23,6 +24,8 @@ export function HomeScreen() {
return <User key={column.id} column={column} />;
case COL_TYPES.hashtag:
return <Hashtag key={column.id} column={column} />;
case COL_TYPES.group:
return <Group key={column.id} column={column} />;
default:
return <Timeline key={column.id} column={column} />;
}

26
packages/@columns/group/package.json Normal file
View File

@ -0,0 +1,26 @@
{
"name": "@columns/group",
"version": "0.0.0",
"private": true,
"main": "./src/index.tsx",
"dependencies": {
"@lume/ark": "workspace:^",
"@lume/icons": "workspace:^",
"@lume/ui": "workspace:^",
"@lume/utils": "workspace:^",
"@nostr-dev-kit/ndk": "^2.3.2",
"@tanstack/react-query": "^5.17.0",
"react": "^18.2.0",
"react-router-dom": "^6.21.1",
"sonner": "^1.3.1",
"virtua": "^0.18.0"
},
"devDependencies": {
"@lume/tailwindcss": "workspace:^",
"@lume/tsconfig": "workspace:^",
"@lume/types": "workspace:^",
"@types/react": "^18.2.46",
"tailwind": "^4.0.0",
"typescript": "^5.3.3"
}
}

92
packages/@columns/group/src/components/form.tsx Normal file
View File

@ -0,0 +1,92 @@
import { useColumnContext, useStorage } from "@lume/ark";
import { CancelIcon, CheckCircleIcon } from "@lume/icons";
import { User } from "@lume/ui";
import { useState } from "react";
export function GroupForm({ id }: { id: number }) {
const storage = useStorage();
const { updateColumn, removeColumn } = useColumnContext();
const [title, setTitle] = useState<string>(`Group-${id}`);
const [users, setUsers] = useState<Array<string>>([]);
// toggle follow state
const toggleUser = (pubkey: string) => {
const arr = users.includes(pubkey)
? users.filter((i) => i !== pubkey)
: [...users, pubkey];
setUsers(arr);
};
const submit = async () => {
await updateColumn(id, title, JSON.stringify(users));
};
return (
<div className="flex flex-col justify-between h-full">
<div className="flex flex-col flex-1 min-h-0">
<div className="flex items-center justify-between w-full px-3 border-b h-11 shrink-0 border-neutral-100 dark:border-neutral-900">
<h1 className="text-sm font-semibold">Create a new Group</h1>
<button
type="button"
onClick={async () => await removeColumn(id)}
className="inline-flex items-center justify-center rounded size-6 hover:bg-neutral-100 dark:hover:bg-neutral-900"
>
<CancelIcon className="size-4" />
</button>
</div>
<div className="flex flex-col gap-5 px-3 pt-2 overflow-y-auto">
<div className="flex flex-col gap-1">
<label
htmlFor="name"
className="font-medium text-neutral-700 dark:text-neutral-300"
>
Group Name
</label>
<input
name="name"
value={title}
onChange={(e) => setTitle(e.target.value)}
placeholder="Nostrichs..."
className="px-3 rounded-xl border-neutral-200 dark:border-neutral-900 h-11 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
/>
</div>
<div className="flex flex-col gap-1">
<div className="inline-flex items-center justify-between">
<span className="font-medium text-neutral-700 dark:text-neutral-300">
Pick user
</span>
<span className="text-sm font-medium text-neutral-600 dark:text-neutral-400">{`${users.length} / ∞`}</span>
</div>
<div className="flex flex-col gap-2">
{storage.account?.contacts?.map((item: string) => (
<button
key={item}
type="button"
onClick={() => toggleUser(item)}
className="inline-flex items-center justify-between px-3 py-2 rounded-xl bg-neutral-50 dark:bg-neutral-950 hover:bg-neutral-100 dark:hover:bg-neutral-900"
>
<User pubkey={item} variant="simple" />
{users.includes(item) ? (
<CheckCircleIcon className="w-5 h-5 text-teal-500" />
) : null}
</button>
))}
<div className="h-20" />
</div>
</div>
</div>
</div>
<div className="absolute z-10 flex items-center justify-center w-full bottom-3">
<button
type="button"
onClick={submit}
disabled={users.length < 1}
className="inline-flex items-center justify-center gap-2 px-6 font-medium text-white transform bg-blue-500 rounded-full active:translate-y-1 w-36 h-11 hover:bg-blue-600 focus:outline-none disabled:cursor-not-allowed"
>
Create
</button>
</div>
</div>
);
}

119
packages/@columns/group/src/home.tsx Normal file
View File

@ -0,0 +1,119 @@
import { RepostNote, TextNote, useArk, useStorage } from "@lume/ark";
import { ArrowRightCircleIcon, LoaderIcon } from "@lume/icons";
import { FETCH_LIMIT } from "@lume/utils";
import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
import { useInfiniteQuery } from "@tanstack/react-query";
import { useEffect, useMemo, useRef } from "react";
import { CacheSnapshot, VList, VListHandle } from "virtua";
export function HomeRoute({
colKey,
content,
}: { colKey: string; content: string }) {
const ark = useArk();
const ref = useRef<VListHandle>();
const cacheKey = `${colKey}-vlist`;
const [offset, cache] = useMemo(() => {
const serialized = sessionStorage.getItem(cacheKey);
if (!serialized) return [];
return JSON.parse(serialized) as [number, CacheSnapshot];
}, []);
const { data, hasNextPage, isLoading, isFetchingNextPage, fetchNextPage } =
useInfiniteQuery({
queryKey: [colKey],
initialPageParam: 0,
queryFn: async ({
signal,
pageParam,
}: {
signal: AbortSignal;
pageParam: number;
}) => {
const authors = JSON.parse(content);
const events = await ark.getInfiniteEvents({
filter: {
kinds: [NDKKind.Text, NDKKind.Repost],
authors: authors,
},
limit: FETCH_LIMIT,
pageParam,
signal,
});
return events;
},
getNextPageParam: (lastPage) => {
const lastEvent = lastPage.at(-1);
if (!lastEvent) return;
return lastEvent.created_at - 1;
},
refetchOnWindowFocus: false,
});
const allEvents = useMemo(
() => (data ? data.pages.flatMap((page) => page) : []),
[data],
);
const renderItem = (event: NDKEvent) => {
switch (event.kind) {
case NDKKind.Text:
return <TextNote key={event.id} event={event} className="mt-3" />;
case NDKKind.Repost:
return <RepostNote key={event.id} event={event} className="mt-3" />;
default:
return <TextNote key={event.id} event={event} className="mt-3" />;
}
};
useEffect(() => {
if (!ref.current) return;
const handle = ref.current;
if (offset) {
handle.scrollTo(offset);
}
return () => {
sessionStorage.setItem(
cacheKey,
JSON.stringify([handle.scrollOffset, handle.cache]),
);
};
}, []);
return (
<div className="w-full h-full">
<VList ref={ref} cache={cache} overscan={2} className="flex-1 px-3">
{isLoading ? (
<div className="w-full flex h-16 items-center justify-center gap-2 px-3 py-1.5">
<LoaderIcon className="size-5 animate-spin" />
</div>
) : (
allEvents.map((item) => renderItem(item))
)}
<div className="flex items-center justify-center h-16">
{hasNextPage ? (
<button
type="button"
onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage}
className="inline-flex items-center justify-center w-40 h-10 gap-2 font-medium text-white bg-blue-500 rounded-full hover:bg-blue-600 focus:outline-none"
>
{isFetchingNextPage ? (
<LoaderIcon className="w-5 h-5 animate-spin" />
) : (
<>
<ArrowRightCircleIcon className="w-5 h-5" />
Load more
</>
)}
</button>
) : null}
</div>
</VList>
</div>
);
}

32
packages/@columns/group/src/index.tsx Normal file
View File

@ -0,0 +1,32 @@
import { Column } from "@lume/ark";
import { GroupFeedsIcon } from "@lume/icons";
import { IColumn } from "@lume/types";
import { GroupForm } from "./components/form";
import { HomeRoute } from "./home";
export function Group({ column }: { column: IColumn }) {
const colKey = `group-${column.id}`;
const created = !!column.content?.length;
return (
<Column.Root>
{created ? (
<>
<Column.Header
id={column.id}
title={column.title}
icon={<GroupFeedsIcon className="size-4" />}
/>
<Column.Content>
<Column.Route
path="/"
element={<HomeRoute colKey={colKey} content={column.content} />}
/>
</Column.Content>
</>
) : (
<GroupForm id={column.id} />
)}
</Column.Root>
);
}

8
packages/@columns/group/tailwind.config.js Normal file
View File

@ -0,0 +1,8 @@
import sharedConfig from "@lume/tailwindcss";
const config = {
content: ["./src/**/*.{js,ts,jsx,tsx}"],
presets: [sharedConfig],
};
export default config;

8
packages/@columns/group/tsconfig.json Normal file
View File

@ -0,0 +1,8 @@
{
"extends": "@lume/tsconfig/base.json",
"compilerOptions": {
"outDir": "dist"
},
"include": ["src"],
"exclude": ["node_modules", "dist"]
}

10
packages/@columns/hashtag/src/home.tsx
View File

@ -12,7 +12,7 @@ export function HomeRoute({
}: { colKey: string; hashtag: string }) {
const ark = useArk();
const ref = useRef<VListHandle>();
const cacheKey = "hashtag-vlist";
const cacheKey = `${colKey}-vlist`;
const [offset, cache] = useMemo(() => {
const serialized = sessionStorage.getItem(cacheKey);
@ -84,19 +84,19 @@ export function HomeRoute({
<TextNote key={item.id} event={item} className="mt-3" />
))
)}
<div className="flex h-16 items-center justify-center">
<div className="flex items-center justify-center h-16">
{hasNextPage ? (
<button
type="button"
onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage}
className="inline-flex h-10 w-40 items-center justify-center gap-2 rounded-full bg-blue-500 font-medium text-white hover:bg-blue-600 focus:outline-none"
className="inline-flex items-center justify-center w-40 h-10 gap-2 font-medium text-white bg-blue-500 rounded-full hover:bg-blue-600 focus:outline-none"
>
{isFetchingNextPage ? (
<LoaderIcon className="h-5 w-5 animate-spin" />
<LoaderIcon className="w-5 h-5 animate-spin" />
) : (
<>
<ArrowRightCircleIcon className="h-5 w-5" />
<ArrowRightCircleIcon className="w-5 h-5" />
Load more
</>
)}

4
packages/@columns/hashtag/src/index.tsx
View File

@ -1,12 +1,12 @@
import { Column } from "@lume/ark";
import { HashtagIcon, TimelineIcon } from "@lume/icons";
import { HashtagIcon } from "@lume/icons";
import { IColumn } from "@lume/types";
import { EventRoute } from "./event";
import { HomeRoute } from "./home";
import { UserRoute } from "./user";
export function Hashtag({ column }: { column: IColumn }) {
const colKey = "hashtag";
const colKey = `hashtag-${column.id}`;
const hashtag = column.content.replace("#", "");
return (

10
packages/@columns/timeline/src/home.tsx
View File

@ -10,7 +10,7 @@ export function HomeRoute({ colKey }: { colKey: string }) {
const ark = useArk();
const storage = useStorage();
const ref = useRef<VListHandle>();
const cacheKey = "newsfeed-vlist";
const cacheKey = `${colKey}-vlist`;
const [offset, cache] = useMemo(() => {
const serialized = sessionStorage.getItem(cacheKey);
@ -91,19 +91,19 @@ export function HomeRoute({ colKey }: { colKey: string }) {
) : (
allEvents.map((item) => renderItem(item))
)}
<div className="flex h-16 items-center justify-center">
<div className="flex items-center justify-center h-16">
{hasNextPage ? (
<button
type="button"
onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage}
className="inline-flex h-10 w-40 items-center justify-center gap-2 rounded-full bg-blue-500 font-medium text-white hover:bg-blue-600 focus:outline-none"
className="inline-flex items-center justify-center w-40 h-10 gap-2 font-medium text-white bg-blue-500 rounded-full hover:bg-blue-600 focus:outline-none"
>
{isFetchingNextPage ? (
<LoaderIcon className="h-5 w-5 animate-spin" />
<LoaderIcon className="w-5 h-5 animate-spin" />
) : (
<>
<ArrowRightCircleIcon className="h-5 w-5" />
<ArrowRightCircleIcon className="w-5 h-5" />
Load more
</>
)}

4
packages/@columns/timeline/src/index.tsx
View File

@ -1,15 +1,15 @@
import { Column, useStorage } from "@lume/ark";
import { TimelineIcon } from "@lume/icons";
import { IColumn } from "@lume/types";
import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
import { useQueryClient } from "@tanstack/react-query";
import { useRef } from "react";
import { IColumn } from "../../../types";
import { EventRoute } from "./event";
import { HomeRoute } from "./home";
import { UserRoute } from "./user";
export function Timeline({ column }: { column: IColumn }) {
const colKey = "newsfeed";
const colKey = `timeline-${column.id}`;
const storage = useStorage();
const queryClient = useQueryClient();
const since = useRef(Math.floor(Date.now() / 1000));

23
packages/@columns/user/src/home.tsx
View File

@ -5,20 +5,19 @@ import {
useProfile,
useStorage,
} from "@lume/ark";
import { ArrowLeftIcon, ArrowRightCircleIcon, LoaderIcon } from "@lume/icons";
import { ArrowRightCircleIcon, LoaderIcon } from "@lume/icons";
import { NIP05 } from "@lume/ui";
import { FETCH_LIMIT, displayNpub } from "@lume/utils";
import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
import { useInfiniteQuery } from "@tanstack/react-query";
import { useEffect, useMemo, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import { Link } from "react-router-dom";
import { toast } from "sonner";
import { WVList } from "virtua";
export function HomeRoute({ id }: { id: string }) {
const ark = useArk();
const storage = useStorage();
const navigate = useNavigate();
const { user } = useProfile(id);
const { data, hasNextPage, isLoading, isFetchingNextPage, fetchNextPage } =
@ -108,7 +107,7 @@ export function HomeRoute({ id }: { id: string }) {
<img
src={user?.picture || user?.image}
alt={id}
className="h-12 w-12 shrink-0 rounded-lg object-cover"
className="object-cover w-12 h-12 rounded-lg shrink-0"
loading="lazy"
decoding="async"
/>
@ -117,7 +116,7 @@ export function HomeRoute({ id }: { id: string }) {
<button
type="button"
onClick={() => unfollow(id)}
className="inline-flex h-9 w-28 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
className="inline-flex items-center justify-center text-sm font-medium rounded-lg h-9 w-28 bg-neutral-200 hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
>
Unfollow
</button>
@ -125,14 +124,14 @@ export function HomeRoute({ id }: { id: string }) {
<button
type="button"
onClick={() => follow(id)}
className="inline-flex h-9 w-28 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
className="inline-flex items-center justify-center text-sm font-medium rounded-lg h-9 w-28 bg-neutral-200 hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
>
Follow
</button>
)}
<Link
to={`/chats/${id}`}
className="inline-flex h-9 w-28 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
className="inline-flex items-center justify-center text-sm font-medium rounded-lg h-9 w-28 bg-neutral-200 hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
>
Message
</Link>
@ -170,24 +169,24 @@ export function HomeRoute({ id }: { id: string }) {
<div className="flex h-full w-full flex-col justify-between gap-1.5 pb-10">
{isLoading ? (
<div className="flex items-center justify-center">
<LoaderIcon className="h-4 w-4 animate-spin" />
<LoaderIcon className="w-4 h-4 animate-spin" />
</div>
) : (
allEvents.map((item) => renderItem(item))
)}
<div className="flex h-16 items-center justify-center px-3 pb-3">
<div className="flex items-center justify-center h-16 px-3 pb-3">
{hasNextPage ? (
<button
type="button"
onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage}
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none"
className="inline-flex items-center justify-center h-10 gap-2 px-6 font-medium text-white bg-blue-500 rounded-full w-max hover:bg-blue-600 focus:outline-none"
>
{isFetchingNextPage ? (
<LoaderIcon className="h-4 w-4 animate-spin" />
<LoaderIcon className="w-4 h-4 animate-spin" />
) : (
<>
<ArrowRightCircleIcon className="h-5 w-5" />
<ArrowRightCircleIcon className="w-5 h-5" />
Load more
</>
)}

33
packages/ark/src/components/column/provider.tsx
View File

@ -15,6 +15,7 @@ type ColumnContext = {
addColumn: (column: IColumn) => Promise<void>;
removeColumn: (id: number) => Promise<void>;
moveColumn: (id: number, position: "left" | "right") => void;
updateColumn: (id: number, title: string, content: string) => Promise<void>;
loadAllColumns: () => Promise<IColumn[]>;
};
@ -32,11 +33,11 @@ export function ColumnProvider({ children }: { children: ReactNode }) {
]);
const loadAllColumns = useCallback(async () => {
return await storage.getWidgets();
return await storage.getColumns();
}, []);
const addColumn = useCallback(async (column: IColumn) => {
const result = await storage.createWidget(
const result = await storage.createColumn(
column.kind,
column.title,
column.content,
@ -45,10 +46,27 @@ export function ColumnProvider({ children }: { children: ReactNode }) {
}, []);
const removeColumn = useCallback(async (id: number) => {
await storage.removeWidget(id);
await storage.removeColumn(id);
setColumns((prev) => prev.filter((t) => t.id !== id));
}, []);
const updateColumn = useCallback(
async (id: number, title: string, content: string) => {
const res = await storage.updateColumn(id, title, content);
if (res) {
const newCols = columns.map((col) => {
if (col.id === id) {
return { ...col, title, content };
}
return col;
});
setColumns(newCols);
}
},
[columns],
);
const moveColumn = useCallback(
(id: number, position: "left" | "right") => {
const newCols = [...columns];
@ -80,7 +98,14 @@ export function ColumnProvider({ children }: { children: ReactNode }) {
return (
<ColumnContext.Provider
value={{ columns, addColumn, removeColumn, moveColumn, loadAllColumns }}
value={{
columns,
addColumn,
removeColumn,
moveColumn,
updateColumn,
loadAllColumns,
}}
>
{children}
</ColumnContext.Provider>

42
packages/icons/src/groupFeeds.tsx
View File

@ -1,22 +1,24 @@
import { SVGProps } from 'react';
import { SVGProps } from "react";
export function GroupFeedsIcon(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="M14.425 13.18c3.361-1.396 7.598.605 8.454 6.003.09.573-.372 1.067-.952 1.067H16.75M10.75 7a3.25 3.25 0 11-6.5 0 3.25 3.25 0 016.5 0zm9 0a3.25 3.25 0 11-6.5 0 3.25 3.25 0 016.5 0zm-6.966 13.25H2.072c-.58 0-1.042-.497-.951-1.07 1.362-8.573 11.252-8.573 12.614 0 .091.573-.371 1.07-.951 1.07z"
></path>
</svg>
);
export function GroupFeedsIcon(
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="2"
d="M7.328 8.191a2.596 2.596 0 110-5.191 2.596 2.596 0 010 5.191zm0 0c1.932 0 3.639.959 4.673 2.426a5.704 5.704 0 014.672-2.426m-9.345 0a5.704 5.704 0 00-4.672 2.426m14.017-2.426a2.596 2.596 0 110-5.191 2.596 2.596 0 010 5.191zm0 0c1.93 0 3.638.959 4.672 2.426M7.328 18.575a2.596 2.596 0 110-5.192 2.596 2.596 0 010 5.192zm0 0c1.932 0 3.639.958 4.673 2.426a5.704 5.704 0 014.672-2.426m-9.345 0A5.704 5.704 0 002.656 21m14.017-2.426a2.596 2.596 0 110-5.192 2.596 2.596 0 010 5.192zm0 0c1.93 0 3.638.958 4.672 2.426"
/>
</svg>
);
}

13
packages/storage/index.ts
View File

@ -322,7 +322,7 @@ export class LumeStorage {
}
}
public async getWidgets() {
public async getColumns() {
const widgets: Array<IColumn> = await this.#db.select(
"SELECT * FROM widgets WHERE account_id = $1 ORDER BY created_at DESC;",
[this.account.id],
@ -330,7 +330,7 @@ export class LumeStorage {
return widgets;
}
public async createWidget(
public async createColumn(
kind: number,
title: string,
content: string | string[],
@ -351,7 +351,14 @@ export class LumeStorage {
console.error("create widget failed");
}
public async removeWidget(id: number) {
public async updateColumn(id: number, title: string, content: string) {
return await this.#db.execute(
"UPDATE widgets SET title = $1, content = $2 WHERE id = $3;",
[title, content, id],
);
}
public async removeColumn(id: number) {
const res = await this.#db.execute("DELETE FROM widgets WHERE id = $1;", [
id,
]);

55
pnpm-lock.yaml generated
View File

@ -20,6 +20,9 @@ importers:
apps/desktop:
dependencies:
'@columns/group':
specifier: workspace:^
version: link:../../packages/@columns/group
'@columns/hashtag':
specifier: workspace:^
version: link:../../packages/@columns/hashtag
@ -289,6 +292,58 @@ importers:
specifier: ^4.2.3
version: 4.2.3(typescript@5.3.3)(vite@4.5.1)
packages/@columns/group:
dependencies:
'@lume/ark':
specifier: workspace:^
version: link:../../ark
'@lume/icons':
specifier: workspace:^
version: link:../../icons
'@lume/ui':
specifier: workspace:^
version: link:../../ui
'@lume/utils':
specifier: workspace:^
version: link:../../utils
'@nostr-dev-kit/ndk':
specifier: ^2.3.2
version: 2.3.2(typescript@5.3.3)
'@tanstack/react-query':
specifier: ^5.17.0
version: 5.17.0(react@18.2.0)
react:
specifier: ^18.2.0
version: 18.2.0
react-router-dom:
specifier: ^6.21.1
version: 6.21.1(react-dom@18.2.0)(react@18.2.0)
sonner:
specifier: ^1.3.1
version: 1.3.1(react-dom@18.2.0)(react@18.2.0)
virtua:
specifier: ^0.18.0
version: 0.18.0(react-dom@18.2.0)(react@18.2.0)
devDependencies:
'@lume/tailwindcss':
specifier: workspace:^
version: link:../../tailwindcss
'@lume/tsconfig':
specifier: workspace:^
version: link:../../tsconfig
'@lume/types':
specifier: workspace:^
version: link:../../types
'@types/react':
specifier: ^18.2.46
version: 18.2.46
tailwind:
specifier: ^4.0.0
version: 4.0.0
typescript:
specifier: ^5.3.3
version: 5.3.3
packages/@columns/hashtag:
dependencies:
'@lume/ark':