diff --git a/apps/web/package.json b/apps/web/package.json index 34170d57..981e81fd 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -22,7 +22,7 @@ "@radix-ui/react-slot": "^1.0.2", "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", - "cmdk": "^1.0.0", + "cmdk": "latest", "framer-motion": "^11.0.24", "lucide-react": "^0.338.0", "next": "14.1.0", diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx index 9b64f2b7..1b204dec 100644 --- a/apps/web/src/app/layout.tsx +++ b/apps/web/src/app/layout.tsx @@ -1,12 +1,12 @@ -import type { Metadata } from 'next'; -import { Roboto } from 'next/font/google'; -import './globals.css'; +import type { Metadata } from "next"; +import { Roboto } from "next/font/google"; +import "./globals.css"; -const roboto = Roboto({ weight: ['300', '400', '500'], subsets: ['latin'] }); +const roboto = Roboto({ weight: ["300", "400", "500"], subsets: ["latin"] }); export const metadata: Metadata = { - title: 'Create Next App', - description: 'Generated by create next app', + title: "Create Next App", + description: "Generated by create next app", }; export default function RootLayout({ @@ -15,9 +15,8 @@ export default function RootLayout({ children: React.ReactNode; }>) { return ( - + -
{children}
diff --git a/apps/web/src/components/Main.tsx b/apps/web/src/components/Main.tsx index b6ad3787..ef505db5 100644 --- a/apps/web/src/components/Main.tsx +++ b/apps/web/src/components/Main.tsx @@ -5,6 +5,7 @@ import { Textarea2 } from "./ui/textarea"; import { ArrowRight } from "lucide-react"; import { MemoryDrawer } from "./MemoryDrawer"; import useViewport from "@/hooks/useViewport"; +import { motion } from "framer-motion"; export default function Main({ sidebarOpen }: { sidebarOpen: boolean }) { const [value, setValue] = useState(""); @@ -24,10 +25,13 @@ export default function Main({ sidebarOpen }: { sidebarOpen: boolean }) { }, []); return ( -
+

+ Ask your Second brain +

{width <= 768 && } -
+ ); } diff --git a/apps/web/src/components/Sidebar/FilterCombobox.tsx b/apps/web/src/components/Sidebar/FilterCombobox.tsx index ade54711..d22e8d8c 100644 --- a/apps/web/src/components/Sidebar/FilterCombobox.tsx +++ b/apps/web/src/components/Sidebar/FilterCombobox.tsx @@ -19,6 +19,7 @@ import { PopoverTrigger, } from "@/components/ui/popover"; import { SpaceIcon } from "@/assets/Memories"; +import { AnimatePresence, LayoutGroup, motion } from "framer-motion"; const spaces = [ { @@ -33,6 +34,118 @@ const spaces = [ value: "3", label: "Cool Libraries", }, + { + value: "4", + label: "Cool People", + }, + { + value: "5", + label: "Cool Projects", + }, + { + value: "6", + label: "Cool Tools", + }, + { + value: "7", + label: "Cool Websites", + }, + { + value: "8", + label: "Cool Books", + }, + { + value: "9", + label: "Cool Videos", + }, + { + value: "10", + label: "Cool Podcasts", + }, + { + value: "11", + label: "Cool Articles", + }, + { + value: "12", + label: "Cool Blogs", + }, + { + value: "13", + label: "Cool News", + }, + { + value: "14", + label: "Cool Forums", + }, + { + value: "15", + label: "Cool Communities", + }, + { + value: "16", + label: "Cool Events", + }, + { + value: "17", + label: "Cool Jobs", + }, + { + value: "18", + label: "Cool Companies", + }, + { + value: "19", + label: "Cool Startups", + }, + { + value: "20", + label: "Cool Investors", + }, + { + value: "21", + label: "Cool Funds", + }, + { + value: "22", + label: "Cool Incubators", + }, + { + value: "23", + label: "Cool Accelerators", + }, + { + value: "24", + label: "Cool Hackathons", + }, + { + value: "25", + label: "Cool Conferences", + }, + { + value: "26", + label: "Cool Workshops", + }, + { + value: "27", + label: "Cool Seminars", + }, + { + value: "28", + label: "Cool Webinars", + }, + { + value: "29", + label: "Cool Courses", + }, + { + value: "30", + label: "Cool Bootcamps", + }, + { + value: "31", + label: "Cool Certifications", + }, ]; export interface Props extends React.ButtonHTMLAttributes {} @@ -41,69 +154,96 @@ export function FilterCombobox({ className, ...props }: Props) { const [open, setOpen] = React.useState(false); const [values, setValues] = React.useState([]); + const sortedSpaces = spaces.sort(({ value: a }, { value: b }) => + values.includes(a) && !values.includes(b) + ? -1 + : values.includes(b) && !values.includes(a) + ? 1 + : 0, + ); + + console.log(sortedSpaces, values); + return ( - - - - - - - spaces - .find((s) => s.value === val) - ?.label.toLowerCase() - .includes(search.toLowerCase().trim()) - ? 1 - : 0 - } - > - - - Nothing found - {/* bug: doesn't work on clicking with mouse only keyboard, weird */} - - {spaces.map((space) => ( - { - setValues((prev) => - prev.includes(val) - ? prev.filter((v) => v !== val) - : [...prev, val], - ); - }} - > - - {space.label} - {values.includes(space.value)} - - - ))} - - - - - + + + + + + + + + spaces + .find((s) => s.value === val) + ?.label.toLowerCase() + .includes(search.toLowerCase().trim()) + ? 1 + : 0 + } + > + + + + Nothing found + + {sortedSpaces.map((space) => ( + { + setValues((prev) => + prev.includes(val) + ? prev.filter((v) => v !== val) + : [...prev, val], + ); + }} + asChild + > + + + {space.label} + {values.includes(space.value)} + + + + ))} + + + + + + + + ); } diff --git a/apps/web/src/components/Sidebar/MemoriesBar.tsx b/apps/web/src/components/Sidebar/MemoriesBar.tsx index 72ee6d42..2890af56 100644 --- a/apps/web/src/components/Sidebar/MemoriesBar.tsx +++ b/apps/web/src/components/Sidebar/MemoriesBar.tsx @@ -2,98 +2,98 @@ import { MemoryWithImage, MemoryWithImages3, MemoryWithImages2, -} from '@/assets/MemoryWithImages'; -import { type Space } from '../../../types/memory'; -import { InputWithIcon } from '../ui/input'; -import { Search } from 'lucide-react'; +} from "@/assets/MemoryWithImages"; +import { type Space } from "../../../types/memory"; +import { InputWithIcon } from "../ui/input"; +import { MoreHorizontal, Search } from "lucide-react"; export function MemoriesBar() { const spaces: Space[] = [ { id: 1, - title: 'Cool Tech', - description: 'Really cool mind blowing tech', + title: "Cool Tech", + description: "Really cool mind blowing tech", content: [ { id: 1, - title: 'Perplexity', - description: 'A good ui', - content: '', - image: 'https://perplexity.ai/favicon.ico', - url: 'https://perplexity.ai', + title: "Perplexity", + description: "A good ui", + content: "", + image: "https://perplexity.ai/favicon.ico", + url: "https://perplexity.ai", savedAt: new Date(), - baseUrl: 'https://perplexity.ai', - space: 'Cool tech', + baseUrl: "https://perplexity.ai", + space: "Cool tech", }, { id: 2, - title: 'Pi.ai', - description: 'A good ui', - content: '', - image: 'https://pi.ai/pi-logo-192.png?v=2', - url: 'https://pi.ai', + title: "Pi.ai", + description: "A good ui", + content: "", + image: "https://pi.ai/pi-logo-192.png?v=2", + url: "https://pi.ai", savedAt: new Date(), - baseUrl: 'https://pi.ai', - space: 'Cool tech', + baseUrl: "https://pi.ai", + space: "Cool tech", }, { id: 3, - title: 'Visual Studio Code', - description: 'A good ui', - content: '', - image: 'https://code.visualstudio.com/favicon.ico', - url: 'https://code.visualstudio.com', + title: "Visual Studio Code", + description: "A good ui", + content: "", + image: "https://code.visualstudio.com/favicon.ico", + url: "https://code.visualstudio.com", savedAt: new Date(), - baseUrl: 'https://code.visualstudio.com', - space: 'Cool tech', + baseUrl: "https://code.visualstudio.com", + space: "Cool tech", }, ], }, { id: 2, - title: 'Cool Courses', - description: 'Amazng', + title: "Cool Courses", + description: "Amazng", content: [ { id: 1, - title: 'Animation on the web', - description: 'A good ui', - content: '', - image: 'https://animations.dev/favicon.ico', - url: 'https://animations.dev', + title: "Animation on the web", + description: "A good ui", + content: "", + image: "https://animations.dev/favicon.ico", + url: "https://animations.dev", savedAt: new Date(), - baseUrl: 'https://animations.dev', - space: 'Cool courses', + baseUrl: "https://animations.dev", + space: "Cool courses", }, { id: 2, - title: 'Tailwind Course', - description: 'A good ui', - content: '', + title: "Tailwind Course", + description: "A good ui", + content: "", image: - 'https://tailwindcss.com/_next/static/media/tailwindcss-mark.3c5441fc7a190fb1800d4a5c7f07ba4b1345a9c8.svg', - url: 'https://tailwindcss.com', + "https://tailwindcss.com/_next/static/media/tailwindcss-mark.3c5441fc7a190fb1800d4a5c7f07ba4b1345a9c8.svg", + url: "https://tailwindcss.com", savedAt: new Date(), - baseUrl: 'https://tailwindcss.com', - space: 'Cool courses', + baseUrl: "https://tailwindcss.com", + space: "Cool courses", }, ], }, { id: 3, - title: 'Cool Libraries', - description: 'Really cool mind blowing tech', + title: "Cool Libraries", + description: "Really cool mind blowing tech", content: [ { id: 1, - title: 'Perplexity', - description: 'A good ui', - content: '', - image: 'https://yashverma.me/logo.jpg', - url: 'https://perplexity.ai', + title: "Perplexity", + description: "A good ui", + content: "", + image: "https://yashverma.me/logo.jpg", + url: "https://perplexity.ai", savedAt: new Date(), - baseUrl: 'https://perplexity.ai', - space: 'Cool libraries', + baseUrl: "https://perplexity.ai", + space: "Cool libraries", }, ], }, @@ -121,7 +121,16 @@ export function MemoriesBar() { export function Space({ title, description, content, id }: Space) { console.log(title, content.map((c) => c.image).reverse()); return ( - + {content.length > 2 ? ( c.image).reverse() as string[]} /> )} - {title} - + ); } diff --git a/apps/web/src/components/Sidebar/index.tsx b/apps/web/src/components/Sidebar/index.tsx index 1680000b..49ce446a 100644 --- a/apps/web/src/components/Sidebar/index.tsx +++ b/apps/web/src/components/Sidebar/index.tsx @@ -4,6 +4,7 @@ import { MemoryIcon } from "../../assets/Memories"; import { Trash2, User2 } from "lucide-react"; import React, { useState } from "react"; import { MemoriesBar } from "./MemoriesBar"; +import { AnimatePresence, motion } from "framer-motion"; export type MenuItem = { icon: React.ReactNode | React.ReactNode[]; @@ -47,30 +48,34 @@ export default function Sidebar({ return ( <> -
- {menuItemsTop.map((item, index) => ( - - ))} -
- {menuItemsBottom.map((item, index) => ( - - ))} +
+
+ {menuItemsTop.map((item, index) => ( + + ))} +
+ {menuItemsBottom.map((item, index) => ( + + ))} +
+ + {selectedItem && ( + + + + )} +
- {selectedItem && ( - - - - )} ); } @@ -87,7 +92,7 @@ const MenuItem = ({