feat(columns): add default column

packages/@columns/default/package.json

@@ -0,0 +1,26 @@
+{
+	"name": "@columns/default",
+	"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.1"
+	},
+	"devDependencies": {
+		"@lume/tailwindcss": "workspace:^",
+		"@lume/tsconfig": "workspace:^",
+		"@lume/types": "workspace:^",
+		"@types/react": "^18.2.46",
+		"tailwind": "^4.0.0",
+		"typescript": "^5.3.3"
+	}
+}

packages/@columns/default/src/index.tsx

@@ -0,0 +1,45 @@
+import { Column } from "@lume/ark";
+import { ColumnIcon } from "@lume/icons";
+import { IColumn } from "@lume/types";
+import { TOPICS } from "@lume/utils";
+
+export function Default({ column }: { column: IColumn }) {
+	return (
+		<Column.Root>
+			<Column.Header
+				id={column.id}
+				title="Add columns"
+				icon={<ColumnIcon className="size-4" />}
+			/>
+			<div className="h-full px-3 mt-3 overflow-y-auto scrollbar-none">
+				<div className="flex flex-col gap-5">
+					<div>
+						<h1 className="text-lg font-semibold leading-tight">Topics</h1>
+						<p className="text-neutral-600 dark:text-neutral-400">
+							Discover content based on your interests.
+						</p>
+					</div>
+					<div className="grid grid-cols-2 gap-3">
+						{TOPICS.sort((a, b) => a.title.localeCompare(b.title)).map(
+							(topic, index) => (
+								<div
+									key={topic + index.toString()}
+									className="flex flex-col w-full px-3 rounded-lg bg-neutral-100"
+								>
+									<div className="rounded-md h-9 w-9 shrink-0">
+										<img
+											src={`/${topic.title.toLowerCase()}.jpg`}
+											alt={topic.title}
+											className="rounded-md h-9 w-9"
+										/>
+									</div>
+									<p className="font-medium">{topic.title}</p>
+								</div>
+							),
+						)}
+					</div>
+				</div>
+			</div>
+		</Column.Root>
+	);
+}

packages/@columns/default/tailwind.config.js

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

packages/@columns/default/tsconfig.json

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

packages/icons/index.ts

@@ -98,3 +98,6 @@ export * from "./src/depotFilled";
 export * from "./src/nwcFilled";
 export * from "./src/moveLeft";
 export * from "./src/moveRight";
+export * from "./src/help";
+export * from "./src/plusSquare";
+export * from "./src/column";

packages/icons/src/column.tsx

@@ -0,0 +1,20 @@
+export function ColumnIcon(props: JSX.IntrinsicElements["svg"]) {
+	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="M3 6.2c0-1.12 0-1.68.218-2.108a2 2 0 01.874-.874C4.52 3 5.08 3 6.2 3h.6c1.12 0 1.68 0 2.108.218a2 2 0 01.874.874C10 4.52 10 5.08 10 6.2v11.6c0 1.12 0 1.68-.218 2.108a2 2 0 01-.874.874C8.48 21 7.92 21 6.8 21h-.6c-1.12 0-1.68 0-2.108-.218a2 2 0 01-.874-.874C3 19.48 3 18.92 3 17.8V6.2zM14 6.2c0-1.12 0-1.68.218-2.108a2 2 0 01.874-.874C15.52 3 16.08 3 17.2 3h.6c1.12 0 1.68 0 2.108.218a2 2 0 01.874.874C21 4.52 21 5.08 21 6.2v11.6c0 1.12 0 1.68-.218 2.108a2 2 0 01-.874.874C19.48 21 18.92 21 17.8 21h-.6c-1.12 0-1.68 0-2.108-.218a2 2 0 01-.874-.874C14 19.48 14 18.92 14 17.8V6.2z"
+			/>
+		</svg>
+	);
+}

packages/icons/src/help.tsx

@@ -0,0 +1,20 @@
+export function HelpIcon(props: JSX.IntrinsicElements["svg"]) {
+	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="M9.281 9.719A2.719 2.719 0 1113.478 12c-.724.47-1.478 1.137-1.478 2m0 3h.001M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+			/>
+		</svg>
+	);
+}

packages/icons/src/plusSquare.tsx

@@ -0,0 +1,20 @@
+export function PlusSquareIcon(props: JSX.IntrinsicElements["svg"]) {
+	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="M12 15v-3m0 0V9m0 3H9m3 0h3m-3 9c-2.796 0-4.193 0-5.296-.457a6 6 0 01-3.247-3.247C3 16.194 3 14.796 3 12c0-2.796 0-4.193.457-5.296a6 6 0 013.247-3.247C7.807 3 9.204 3 12 3c2.796 0 4.194 0 5.296.457a6 6 0 013.247 3.247C21 7.807 21 9.204 21 12c0 2.796 0 4.194-.457 5.296a6 6 0 01-3.247 3.247C16.194 21 14.796 21 12 21z"
+			/>
+		</svg>
+	);
+}

packages/utils/src/constants.ts

@@ -32,6 +32,7 @@ export const HASHTAGS = [
 ];
 
 export const COL_TYPES = {
+	default: 0,
 	user: 1,
 	thread: 2,
 	hashtag: 3,