feat: add waifu column and fix wrong package

apps/desktop/package.json

@@ -17,6 +17,7 @@
 		"@columns/timeline": "workspace:^",
 		"@columns/trending-notes": "workspace:^",
 		"@columns/user": "workspace:^",
+		"@columns/waifu": "workspace:^",
 		"@getalby/sdk": "^3.2.3",
 		"@lume/ark": "workspace:^",
 		"@lume/icons": "workspace:^",

apps/desktop/src/routes/home/index.tsx

@@ -8,6 +8,7 @@ import { Thread } from "@columns/thread";
 import { Timeline } from "@columns/timeline";
 import { TrendingNotes } from "@columns/trending-notes";
 import { User } from "@columns/user";
+import { Waifu } from "@columns/waifu";
 import { useColumnContext } from "@lume/ark";
 import {
 	ArrowLeftIcon,
@@ -51,6 +52,8 @@ export function HomeScreen() {
 				return <Global key={column.id} column={column} />;
 			case COL_TYPES.trendingNotes:
 				return <TrendingNotes key={column.id} column={column} />;
+			case COL_TYPES.waifu:
+				return <Waifu key={column.id} column={column} />;
 			default:
 				return <Default key={column.id} column={column} />;
 		}

packages/lume-column-antenas/package.json

@@ -20,7 +20,7 @@
 		"@lume/tsconfig": "workspace:^",
 		"@lume/types": "workspace:^",
 		"@types/react": "^18.2.48",
-		"tailwind": "^4.0.0",
+		"tailwindcss": "^3.4.1",
 		"typescript": "^5.3.3"
 	}
 }

packages/lume-column-antenas/src/index.tsx

@@ -1,9 +1,8 @@
 import { Column } from "@lume/ark";
-import { GroupFeedsIcon } from "@lume/icons";
 import { IColumn } from "@lume/types";
+import { EventRoute, UserRoute } from "@lume/ui";
 import { AntenasForm } from "./components/form";
 import { HomeRoute } from "./home";
-import { EventRoute, UserRoute } from "@lume/ui";
 
 export function Antenas({ column }: { column: IColumn }) {
 	const colKey = `antenas-${column.id}`;
@@ -13,11 +12,7 @@ export function Antenas({ column }: { column: IColumn }) {
 		<Column.Root>
 			{created ? (
 				<>
-					<Column.Header
-						id={column.id}
-						title={column.title}
-						icon={<GroupFeedsIcon className="size-4" />}
-					/>
+					<Column.Header id={column.id} title={column.title} />
 					<Column.Content>
 						<Column.Route
 							path="/"

packages/lume-column-default/package.json

@@ -20,7 +20,7 @@
 		"@lume/tsconfig": "workspace:^",
 		"@lume/types": "workspace:^",
 		"@types/react": "^18.2.48",
-		"tailwind": "^4.0.0",
+		"tailwindcss": "^3.4.1",
 		"typescript": "^5.3.3"
 	}
 }

packages/lume-column-default/src/index.tsx

@@ -8,8 +8,8 @@ export function Default({ column }: { column: IColumn }) {
 	return (
 		<Column.Root>
 			<Column.Header id={column.id} title="Add columns" />
-			<div className="h-full px-3 mt-3 flex flex-col gap-3 overflow-y-auto scrollbar-none">
-				<div className="h-11 flex items-center gap-5">
+			<div className="h-full flex-1 px-3 mt-3 flex flex-col gap-3 overflow-y-auto scrollbar-none">
+				<div className="shrink-0 h-11 flex items-center gap-5">
 					<button
 						type="button"
 						className="h-9 w-max px-3 text-sm font-semibold inline-flex items-center justify-center bg-neutral-100 dark:bg-neutral-900 rounded-lg"
@@ -24,7 +24,7 @@ export function Default({ column }: { column: IColumn }) {
 						Community (Coming Soon)
 					</button>
 				</div>
-				<div className="flex flex-col rounded-xl overflow-hidden bg-neutral-50 dark:bg-neutral-950 ring-1 ring-neutral-100 dark:ring-neutral-900">
+				<div className="shrink-0 flex flex-col rounded-xl overflow-hidden bg-neutral-50 dark:bg-neutral-950 ring-1 ring-neutral-100 dark:ring-neutral-900">
 					<div className="h-[100px] w-full px-3 pt-3">
 						<img
 							src="/columns/group.jpg"
@@ -53,7 +53,7 @@ export function Default({ column }: { column: IColumn }) {
 						</button>
 					</div>
 				</div>
-				<div className="flex flex-col rounded-xl overflow-hidden bg-neutral-50 dark:bg-neutral-950 ring-1 ring-neutral-100 dark:ring-neutral-900">
+				<div className="shrink-0 flex flex-col rounded-xl overflow-hidden bg-neutral-50 dark:bg-neutral-950 ring-1 ring-neutral-100 dark:ring-neutral-900">
 					<div className="h-[100px] w-full px-3 pt-3">
 						<img
 							src="/columns/antenas.jpg"
@@ -82,7 +82,7 @@ export function Default({ column }: { column: IColumn }) {
 						</button>
 					</div>
 				</div>
-				<div className="flex flex-col rounded-xl overflow-hidden bg-neutral-50 dark:bg-neutral-950 ring-1 ring-neutral-100 dark:ring-neutral-900">
+				<div className="shrink-0 flex flex-col rounded-xl overflow-hidden bg-neutral-50 dark:bg-neutral-950 ring-1 ring-neutral-100 dark:ring-neutral-900">
 					<div className="h-[100px] w-full px-3 pt-3">
 						<img
 							src="/columns/trending-notes.jpg"
@@ -97,7 +97,7 @@ export function Default({ column }: { column: IColumn }) {
 						<div>
 							<h1 className="font-semibold">Trending Notes</h1>
 							<p className="max-w-[18rem] truncate text-sm text-neutral-600 dark:text-neutral-500">
-								What is trending on Nostr?
+								What is trending on Nostr?.
 							</p>
 						</div>
 						<button
@@ -115,7 +115,7 @@ export function Default({ column }: { column: IColumn }) {
 						</button>
 					</div>
 				</div>
-				<div className="flex flex-col rounded-xl overflow-hidden bg-neutral-50 dark:bg-neutral-950 ring-1 ring-neutral-100 dark:ring-neutral-900">
+				<div className="shrink-0 flex flex-col rounded-xl overflow-hidden bg-neutral-50 dark:bg-neutral-950 ring-1 ring-neutral-100 dark:ring-neutral-900">
 					<div className="h-[100px] w-full px-3 pt-3">
 						<img
 							src="/columns/global.jpg"
@@ -130,7 +130,7 @@ export function Default({ column }: { column: IColumn }) {
 						<div>
 							<h1 className="font-semibold">Global</h1>
 							<p className="max-w-[18rem] truncate text-sm text-neutral-600 dark:text-neutral-500">
-								All things around the world
+								All things around the world.
 							</p>
 						</div>
 						<button
@@ -148,6 +148,40 @@ export function Default({ column }: { column: IColumn }) {
 						</button>
 					</div>
 				</div>
+				<div className="shrink-0 flex flex-col rounded-xl overflow-hidden bg-neutral-50 dark:bg-neutral-950 ring-1 ring-neutral-100 dark:ring-neutral-900">
+					<div className="h-[100px] w-full px-3 pt-3">
+						<img
+							src="/columns/waifu.jpg"
+							srcSet="/columns/[email protected] 2x"
+							alt="waifu"
+							loading="lazy"
+							decoding="async"
+							className="w-full h-auto object-cover rounded-lg"
+						/>
+					</div>
+					<div className="h-16 shrink-0 px-3 flex items-center justify-between">
+						<div>
+							<h1 className="font-semibold">Waifu</h1>
+							<p className="max-w-[18rem] truncate text-sm text-neutral-600 dark:text-neutral-500">
+								Show a random waifu image to boost your morale.
+							</p>
+						</div>
+						<button
+							type="button"
+							onClick={() => {
+								addColumn({
+									kind: COL_TYPES.waifu,
+									title: "Waifu",
+									content: "",
+								});
+							}}
+							className="shrink-0 w-16 h-8 rounded-lg text-sm font-semibold bg-neutral-100 dark:bg-neutral-900 text-blue-500 hover:bg-neutral-200 dark:hover:bg-neutral-800 inline-flex items-center justify-center"
+						>
+							Add
+						</button>
+					</div>
+				</div>
+				<div className="h-3" />
 			</div>
 		</Column.Root>
 	);

packages/lume-column-foryou/package.json

@@ -21,7 +21,7 @@
 		"@lume/tsconfig": "workspace:^",
 		"@lume/types": "workspace:^",
 		"@types/react": "^18.2.48",
-		"tailwind": "^4.0.0",
+		"tailwindcss": "^3.4.1",
 		"typescript": "^5.3.3"
 	}
 }

packages/lume-column-foryou/src/index.tsx

@@ -1,5 +1,4 @@
 import { Column } from "@lume/ark";
-import { ForyouIcon } from "@lume/icons";
 import { useStorage } from "@lume/storage";
 import { IColumn } from "@lume/types";
 import { EventRoute, UserRoute } from "@lume/ui";
@@ -27,12 +26,7 @@ export function ForYou({ column }: { column: IColumn }) {
 
 	return (
 		<Column.Root>
-			<Column.Header
-				id={column.id}
-				queryKey={[colKey]}
-				title="For You"
-				icon={<ForyouIcon className="size-4" />}
-			/>
+			<Column.Header id={column.id} queryKey={[colKey]} title="For You" />
 			{storage.interests?.hashtags ? (
 				<Column.Live
 					filter={{

packages/lume-column-global/package.json

@@ -20,7 +20,7 @@
 		"@lume/tsconfig": "workspace:^",
 		"@lume/types": "workspace:^",
 		"@types/react": "^18.2.48",
-		"tailwind": "^4.0.0",
+		"tailwindcss": "^3.4.1",
 		"typescript": "^5.3.3"
 	}
 }

packages/lume-column-group/package.json

@@ -20,7 +20,7 @@
 		"@lume/tsconfig": "workspace:^",
 		"@lume/types": "workspace:^",
 		"@types/react": "^18.2.48",
-		"tailwind": "^4.0.0",
+		"tailwindcss": "^3.4.1",
 		"typescript": "^5.3.3"
 	}
 }

packages/lume-column-group/src/index.tsx

@@ -1,9 +1,8 @@
 import { Column } from "@lume/ark";
-import { GroupFeedsIcon } from "@lume/icons";
 import { IColumn } from "@lume/types";
+import { EventRoute, UserRoute } from "@lume/ui";
 import { GroupForm } from "./components/form";
 import { HomeRoute } from "./home";
-import { EventRoute, UserRoute } from "@lume/ui";
 
 export function Group({ column }: { column: IColumn }) {
 	const colKey = `group-${column.id}`;
@@ -13,11 +12,7 @@ export function Group({ column }: { column: IColumn }) {
 		<Column.Root>
 			{created ? (
 				<>
-					<Column.Header
-						id={column.id}
-						title={column.title}
-						icon={<GroupFeedsIcon className="size-4" />}
-					/>
+					<Column.Header id={column.id} title={column.title} />
 					<Column.Content>
 						<Column.Route
 							path="/"

packages/lume-column-hashtag/package.json

@@ -20,7 +20,7 @@
 		"@lume/tsconfig": "workspace:^",
 		"@lume/types": "workspace:^",
 		"@types/react": "^18.2.48",
-		"tailwind": "^4.0.0",
+		"tailwindcss": "^3.4.1",
 		"typescript": "^5.3.3"
 	}
 }

packages/lume-column-hashtag/src/index.tsx

@@ -1,21 +1,15 @@
 import { Column } from "@lume/ark";
-import { HashtagIcon } from "@lume/icons";
 import { IColumn } from "@lume/types";
-import { HomeRoute } from "./home";
 import { EventRoute, UserRoute } from "@lume/ui";
+import { HomeRoute } from "./home";
 
 export function Hashtag({ column }: { column: IColumn }) {
 	const colKey = `hashtag-${column.id}`;
 	const hashtag = column.content.replace("#", "");
 
 	return (
 		<Column.Root>
-			<Column.Header
-				id={column.id}
-				queryKey={[colKey]}
-				title={hashtag}
-				icon={<HashtagIcon className="size-4" />}
-			/>
+			<Column.Header id={column.id} queryKey={[colKey]} title={hashtag} />
 			<Column.Content>
 				<Column.Route
 					path="/"

packages/lume-column-thread/package.json

@@ -20,7 +20,7 @@
 		"@lume/tsconfig": "workspace:^",
 		"@lume/types": "workspace:^",
 		"@types/react": "^18.2.48",
-		"tailwind": "^4.0.0",
+		"tailwindcss": "^3.4.1",
 		"typescript": "^5.3.3"
 	}
 }

packages/lume-column-timeline/package.json

@@ -20,7 +20,7 @@
 		"@lume/tsconfig": "workspace:^",
 		"@lume/types": "workspace:^",
 		"@types/react": "^18.2.48",
-		"tailwind": "^4.0.0",
+		"tailwindcss": "^3.4.1",
 		"typescript": "^5.3.3"
 	}
 }

packages/lume-column-timeline/src/index.tsx

@@ -1,5 +1,4 @@
 import { Column, useArk } from "@lume/ark";
-import { TimelineIcon } from "@lume/icons";
 import { IColumn } from "@lume/types";
 import { EventRoute, SuggestRoute, UserRoute } from "@lume/ui";
 import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
@@ -26,12 +25,7 @@ export function Timeline({ column }: { column: IColumn }) {
 
 	return (
 		<Column.Root>
-			<Column.Header
-				id={column.id}
-				queryKey={[colKey]}
-				title="Timeline"
-				icon={<TimelineIcon className="size-5" />}
-			/>
+			<Column.Header id={column.id} queryKey={[colKey]} title="Timeline" />
 			{ark.account.contacts.length ? (
 				<Column.Live
 					filter={{

packages/lume-column-trending-notes/package.json

@@ -20,7 +20,7 @@
 		"@lume/tsconfig": "workspace:^",
 		"@lume/types": "workspace:^",
 		"@types/react": "^18.2.48",
-		"tailwind": "^4.0.0",
+		"tailwindcss": "^3.4.1",
 		"typescript": "^5.3.3"
 	}
 }

packages/lume-column-user/package.json

@@ -20,7 +20,7 @@
 		"@lume/tsconfig": "workspace:^",
 		"@lume/types": "workspace:^",
 		"@types/react": "^18.2.48",
-		"tailwind": "^4.0.0",
+		"tailwindcss": "^3.4.1",
 		"typescript": "^5.3.3"
 	}
 }

packages/lume-column-user/src/index.tsx

@@ -1,17 +1,12 @@
 import { Column } from "@lume/ark";
-import { UserIcon } from "@lume/icons";
 import { IColumn } from "@lume/types";
-import { HomeRoute } from "./home";
 import { EventRoute, UserRoute } from "@lume/ui";
+import { HomeRoute } from "./home";
 
 export function User({ column }: { column: IColumn }) {
 	return (
 		<Column.Root>
-			<Column.Header
-				id={column.id}
-				title={column.title}
-				icon={<UserIcon className="size-4" />}
-			/>
+			<Column.Header id={column.id} title={column.title} />
 			<Column.Content>
 				<Column.Route path="/" element={<HomeRoute id={column.content} />} />
 				<Column.Route path="/events/:id" element={<EventRoute />} />

packages/lume-column-waifu/package.json

@@ -0,0 +1,23 @@
+{
+	"name": "@columns/waifu",
+	"version": "0.0.0",
+	"private": true,
+	"main": "./src/index.tsx",
+	"dependencies": {
+		"@lume/ark": "workspace:^",
+		"@lume/icons": "workspace:^",
+		"@lume/ui": "workspace:^",
+		"@lume/utils": "workspace:^",
+		"@tanstack/react-query": "^5.17.19",
+		"react": "^18.2.0",
+		"react-router-dom": "^6.21.3"
+	},
+	"devDependencies": {
+		"@lume/tailwindcss": "workspace:^",
+		"@lume/tsconfig": "workspace:^",
+		"@lume/types": "workspace:^",
+		"@types/react": "^18.2.48",
+		"tailwindcss": "^3.4.1",
+		"typescript": "^5.3.3"
+	}
+}