diff --git a/apps/desktop/package.json b/apps/desktop/package.json index acf0fa48..d7173132 100644 --- a/apps/desktop/package.json +++ b/apps/desktop/package.json @@ -9,6 +9,7 @@ }, "dependencies": { "@columns/antenas": "workspace:^", + "@columns/default": "workspace:^", "@columns/group": "workspace:^", "@columns/hashtag": "workspace:^", "@columns/notification": "workspace:^", diff --git a/apps/desktop/src/routes/home/index.tsx b/apps/desktop/src/routes/home/index.tsx index b655fae1..85f81399 100644 --- a/apps/desktop/src/routes/home/index.tsx +++ b/apps/desktop/src/routes/home/index.tsx @@ -1,10 +1,17 @@ import { Antenas } from "@columns/antenas"; +import { Default } from "@columns/default"; import { Group } from "@columns/group"; import { Hashtag } from "@columns/hashtag"; import { Thread } from "@columns/thread"; import { Timeline } from "@columns/timeline"; import { User } from "@columns/user"; import { useColumnContext } from "@lume/ark"; +import { + ArrowLeftIcon, + ArrowRightIcon, + HelpIcon, + PlusSquareIcon, +} from "@lume/icons"; import { IColumn } from "@lume/types"; import { COL_TYPES } from "@lume/utils"; import { useRef, useState } from "react"; @@ -12,11 +19,13 @@ import { VList, VListHandle } from "virtua"; export function HomeScreen() { const ref = useRef(null); - const { columns } = useColumnContext(); + const { addColumn, columns } = useColumnContext(); const [selectedIndex, setSelectedIndex] = useState(-1); const renderItem = (column: IColumn) => { switch (column.kind) { + case COL_TYPES.default: + return ; case COL_TYPES.newsfeed: return ; case COL_TYPES.thread: @@ -30,12 +39,12 @@ export function HomeScreen() { case COL_TYPES.antenas: return ; default: - return ; + return ; } }; return ( -
+
{columns.map((column) => renderItem(column))} +
+
+ + + +
+ +
+
); } diff --git a/packages/@columns/default/package.json b/packages/@columns/default/package.json new file mode 100644 index 00000000..925e4673 --- /dev/null +++ b/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" + } +} diff --git a/packages/@columns/default/src/index.tsx b/packages/@columns/default/src/index.tsx new file mode 100644 index 00000000..9304fb7e --- /dev/null +++ b/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 ( + + } + /> +
+
+
+

Topics

+

+ Discover content based on your interests. +

+
+
+ {TOPICS.sort((a, b) => a.title.localeCompare(b.title)).map( + (topic, index) => ( +
+
+ {topic.title} +
+

{topic.title}

+
+ ), + )} +
+
+
+ + ); +} diff --git a/packages/@columns/default/tailwind.config.js b/packages/@columns/default/tailwind.config.js new file mode 100644 index 00000000..49c48c7a --- /dev/null +++ b/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; diff --git a/packages/@columns/default/tsconfig.json b/packages/@columns/default/tsconfig.json new file mode 100644 index 00000000..34a32891 --- /dev/null +++ b/packages/@columns/default/tsconfig.json @@ -0,0 +1,8 @@ +{ + "extends": "@lume/tsconfig/base.json", + "compilerOptions": { + "outDir": "dist" + }, + "include": ["src"], + "exclude": ["node_modules", "dist"] +} diff --git a/packages/icons/index.ts b/packages/icons/index.ts index 3e3a6a1c..acb2c03d 100644 --- a/packages/icons/index.ts +++ b/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"; diff --git a/packages/icons/src/column.tsx b/packages/icons/src/column.tsx new file mode 100644 index 00000000..d8ebc1b9 --- /dev/null +++ b/packages/icons/src/column.tsx @@ -0,0 +1,20 @@ +export function ColumnIcon(props: JSX.IntrinsicElements["svg"]) { + return ( + + + + ); +} diff --git a/packages/icons/src/help.tsx b/packages/icons/src/help.tsx new file mode 100644 index 00000000..827bb580 --- /dev/null +++ b/packages/icons/src/help.tsx @@ -0,0 +1,20 @@ +export function HelpIcon(props: JSX.IntrinsicElements["svg"]) { + return ( + + + + ); +} diff --git a/packages/icons/src/plusSquare.tsx b/packages/icons/src/plusSquare.tsx new file mode 100644 index 00000000..a84d0d26 --- /dev/null +++ b/packages/icons/src/plusSquare.tsx @@ -0,0 +1,20 @@ +export function PlusSquareIcon(props: JSX.IntrinsicElements["svg"]) { + return ( + + + + ); +} diff --git a/packages/utils/src/constants.ts b/packages/utils/src/constants.ts index 9d65e920..4fd65460 100644 --- a/packages/utils/src/constants.ts +++ b/packages/utils/src/constants.ts @@ -32,6 +32,7 @@ export const HASHTAGS = [ ]; export const COL_TYPES = { + default: 0, user: 1, thread: 2, hashtag: 3, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2c1a4b36..feb43928 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -23,6 +23,9 @@ importers: '@columns/antenas': specifier: workspace:^ version: link:../../packages/@columns/antenas + '@columns/default': + specifier: workspace:^ + version: link:../../packages/@columns/default '@columns/group': specifier: workspace:^ version: link:../../packages/@columns/group @@ -347,6 +350,58 @@ importers: specifier: ^5.3.3 version: 5.3.3 + packages/@columns/default: + 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.1 + version: 0.18.1(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/group: dependencies: '@lume/ark':