From 324100852f9799b747e9cb7117a38d20e5c73f1f Mon Sep 17 00:00:00 2001 From: Yash Date: Fri, 5 Apr 2024 08:21:58 +0000 Subject: [PATCH 1/6] context added --- apps/web/src/app/ui/content.tsx | 15 +++++++++ apps/web/src/app/ui/page.tsx | 18 +++-------- apps/web/src/components/Main.tsx | 30 +++++++----------- apps/web/src/components/Sidebar/index.tsx | 38 +++++++++++------------ apps/web/src/contexts/MemoryContext.tsx | 27 ++++++++++++++++ 5 files changed, 78 insertions(+), 50 deletions(-) create mode 100644 apps/web/src/app/ui/content.tsx create mode 100644 apps/web/src/contexts/MemoryContext.tsx diff --git a/apps/web/src/app/ui/content.tsx b/apps/web/src/app/ui/content.tsx new file mode 100644 index 00000000..6e28eaf8 --- /dev/null +++ b/apps/web/src/app/ui/content.tsx @@ -0,0 +1,15 @@ +"use client"; +import Main from "@/components/Main"; +import Sidebar from "@/components/Sidebar/index"; +import { useState } from "react"; + +export default function Content() { + const [selectedItem, setSelectedItem] = useState(); + + return ( +
+ +
+
+ ); +} diff --git a/apps/web/src/app/ui/page.tsx b/apps/web/src/app/ui/page.tsx index 03a35535..35175334 100644 --- a/apps/web/src/app/ui/page.tsx +++ b/apps/web/src/app/ui/page.tsx @@ -1,18 +1,10 @@ -import Main from '@/components/Main'; -import Sidebar from '@/components/Sidebar/index'; -import { cookies } from 'next/headers'; +import { MemoryProvider } from "@/contexts/MemoryContext"; +import Content from "./content"; export default function Home() { - const selectedItem = cookies().get('selectedItem')?.value; - const setSelectedItem = async (selectedItem: string | null) => { - 'use server'; - cookies().set('selectedItem', selectedItem!); - }; - return ( -
- -
-
+ + + ); } diff --git a/apps/web/src/components/Main.tsx b/apps/web/src/components/Main.tsx index aa72a48e..e9a7071d 100644 --- a/apps/web/src/components/Main.tsx +++ b/apps/web/src/components/Main.tsx @@ -8,6 +8,14 @@ import useViewport from "@/hooks/useViewport"; import { motion } from "framer-motion"; import { cn } from "@/lib/utils"; +function supportsDVH() { + try { + return CSS.supports("height: 100dvh"); + } catch { + return false; + } +} + export default function Main({ sidebarOpen }: { sidebarOpen: boolean }) { const [hide, setHide] = useState(false); const [value, setValue] = useState(""); @@ -16,19 +24,9 @@ export default function Main({ sidebarOpen }: { sidebarOpen: boolean }) { const textArea = useRef(null); const main = useRef(null); - console.log("main px", sidebarOpen); - useEffect(() => { function onResize() { if (!main.current || !window.visualViewport) return; - // setValue( - // (prev) => - // prev + - // " changed to " + - // window.visualViewport?.height + - // " " + - // window.innerHeight, - // ); if ( window.visualViewport.height < window.innerHeight + 20 && window.visualViewport.height > window.innerHeight - 20 @@ -52,20 +50,16 @@ export default function Main({ sidebarOpen }: { sidebarOpen: boolean }) { data-sidebar-open={sidebarOpen} ref={main} className={cn( - "sidebar flex w-full flex-col items-end justify-center gap-5 px-5 pt-5 transition-[padding-left,padding-top,padding-right] delay-200 duration-200 md:items-center md:px-72 [&[data-sidebar-open='true']]:pr-10 [&[data-sidebar-open='true']]:delay-0 md:[&[data-sidebar-open='true']]:pl-[calc(2.5rem+30vw)]", - hide - ? "pb-5" - : CSS.supports("height: 100dvh") - ? "pb-[13vh]" - : "pb-[20vh]", + "sidebar flex w-full flex-col items-end justify-center gap-5 px-5 pt-5 transition-[padding-left,padding-top,padding-right] delay-200 duration-200 md:items-center md:gap-10 md:px-72 [&[data-sidebar-open='true']]:pr-10 [&[data-sidebar-open='true']]:delay-0 md:[&[data-sidebar-open='true']]:pl-[calc(2.5rem+30vw)]", + hide ? "pb-5" : supportsDVH() ? "pb-[13vh]" : "pb-[20vh]", )} > -

+

Ask your Second brain

= [ { icon: , - label: 'Memories', + label: "Memories", content: MemoriesBar, }, ]; @@ -24,18 +24,18 @@ const menuItemsTop: Array = [ const menuItemsBottom: Array = [ { icon: , - label: 'Trash', + label: "Trash", }, { icon: , - label: 'Profile', + label: "Profile", }, ]; export default function Sidebar({ - selectChange, + onSelectChange, }: { - selectChange?: (selectedItem: string | null) => Promise; + onSelectChange?: (selectedItem: string | null) => void; }) { const menuItems = [...menuItemsTop, ...menuItemsBottom]; const [selectedItem, setSelectedItem] = useState(null); @@ -44,7 +44,7 @@ export default function Sidebar({ menuItems.find((i) => i.label === selectedItem)?.content ?? (() => <>); useEffect(() => { - void selectChange?.(selectedItem); + void onSelectChange?.(selectedItem); }, [selectedItem]); return ( @@ -53,7 +53,7 @@ export default function Sidebar({
, content: MemoriesBar, }} @@ -65,7 +65,7 @@ export default function Sidebar({ , }} selectedItem={selectedItem} @@ -74,7 +74,7 @@ export default function Sidebar({ /> , }} selectedItem={selectedItem} @@ -117,11 +117,11 @@ const MenuItem = ({ export function SubSidebar({ children }: { children?: React.ReactNode }) { return ( ({ + spaces: [], +}); + +export const MemoryProvider: React.FC< + { spaces: Space[] } & React.PropsWithChildren +> = ({ children, spaces }) => { + return ( + + {children} + + ); +}; + +export const useMemory = () => { + const context = React.useContext(MemoryContext); + if (context === undefined) { + throw new Error("useMemory must be used within a MemoryProvider"); + } + return context; +}; From 4faf6bd82a2f93f3b78bad6250ef44ef8b372ba0 Mon Sep 17 00:00:00 2001 From: Yash Date: Fri, 5 Apr 2024 08:33:09 +0000 Subject: [PATCH 2/6] add context and fix sidebar --- apps/web/src/app/ui/content.tsx | 4 ++-- apps/web/src/app/ui/page.tsx | 18 +++++------------- apps/web/src/components/Sidebar/index.tsx | 7 ++++--- apps/web/src/contexts/MemoryContext.tsx | 7 ++++--- 4 files changed, 15 insertions(+), 21 deletions(-) diff --git a/apps/web/src/app/ui/content.tsx b/apps/web/src/app/ui/content.tsx index 16f66394..8bfebcb9 100644 --- a/apps/web/src/app/ui/content.tsx +++ b/apps/web/src/app/ui/content.tsx @@ -4,11 +4,11 @@ import Sidebar from "@/components/Sidebar/index"; import { useState } from "react"; export default function Content() { - const [selectedItem, setSelectedItem] = useState(); + const [selectedItem, setSelectedItem] = useState(null); return (
- {/* */} +
); diff --git a/apps/web/src/app/ui/page.tsx b/apps/web/src/app/ui/page.tsx index ec1998b6..35175334 100644 --- a/apps/web/src/app/ui/page.tsx +++ b/apps/web/src/app/ui/page.tsx @@ -1,18 +1,10 @@ -import Main from "@/components/Main"; -import Sidebar from "@/components/Sidebar/index"; -import { cookies } from "next/headers"; +import { MemoryProvider } from "@/contexts/MemoryContext"; +import Content from "./content"; export default function Home() { - const selectedItem = cookies().get("selectedItem")?.value; - const setSelectedItem = async (selectedItem: string | null) => { - "use server"; - cookies().set("selectedItem", selectedItem!); - }; - return ( -
- {/* */} -
-
+ + + ); } diff --git a/apps/web/src/components/Sidebar/index.tsx b/apps/web/src/components/Sidebar/index.tsx index c4328b5d..b7230291 100644 --- a/apps/web/src/components/Sidebar/index.tsx +++ b/apps/web/src/components/Sidebar/index.tsx @@ -7,6 +7,7 @@ import { MemoriesBar } from "./MemoriesBar"; import { AnimatePresence, motion } from "framer-motion"; import { Bin } from "@/assets/Bin"; import { CollectedSpaces } from "../../../types/memory"; +import { useMemory } from "@/contexts/MemoryContext"; export type MenuItem = { icon: React.ReactNode | React.ReactNode[]; @@ -27,11 +28,11 @@ const menuItemsBottom: Array = [ export default function Sidebar({ selectChange, - spaces, }: { - selectChange?: (selectedItem: string | null) => Promise; - spaces: CollectedSpaces[]; + selectChange?: (selectedItem: string | null) => void; }) { + const { spaces } = useMemory(); + const menuItemsTop: Array = [ { icon: , diff --git a/apps/web/src/contexts/MemoryContext.tsx b/apps/web/src/contexts/MemoryContext.tsx index c8b406c0..5be39ffc 100644 --- a/apps/web/src/contexts/MemoryContext.tsx +++ b/apps/web/src/contexts/MemoryContext.tsx @@ -1,15 +1,16 @@ +"use client"; import React from "react"; -import { Space } from "../../types/memory"; +import { CollectedSpaces } from "../../types/memory"; // temperory (will change) export const MemoryContext = React.createContext<{ - spaces: Space[]; + spaces: CollectedSpaces[]; }>({ spaces: [], }); export const MemoryProvider: React.FC< - { spaces: Space[] } & React.PropsWithChildren + { spaces: CollectedSpaces[] } & React.PropsWithChildren > = ({ children, spaces }) => { return ( From 3340c291f695ca6f7420030c04df564294ed2a2c Mon Sep 17 00:00:00 2001 From: Yash Date: Fri, 5 Apr 2024 08:47:06 +0000 Subject: [PATCH 3/6] `addSpace` function to the context --- .../src/components/Sidebar/FilterCombobox.tsx | 158 ++---------------- apps/web/src/contexts/MemoryContext.tsx | 17 +- 2 files changed, 31 insertions(+), 144 deletions(-) diff --git a/apps/web/src/components/Sidebar/FilterCombobox.tsx b/apps/web/src/components/Sidebar/FilterCombobox.tsx index d22e8d8c..ae433c95 100644 --- a/apps/web/src/components/Sidebar/FilterCombobox.tsx +++ b/apps/web/src/components/Sidebar/FilterCombobox.tsx @@ -20,141 +20,17 @@ import { } from "@/components/ui/popover"; import { SpaceIcon } from "@/assets/Memories"; import { AnimatePresence, LayoutGroup, motion } from "framer-motion"; - -const spaces = [ - { - value: "1", - label: "Cool Tech", - }, - { - value: "2", - label: "Cool Courses", - }, - { - 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", - }, -]; +import { useMemory } from "@/contexts/MemoryContext"; export interface Props extends React.ButtonHTMLAttributes {} export function FilterCombobox({ className, ...props }: Props) { - const [open, setOpen] = React.useState(false); - const [values, setValues] = React.useState([]); + const { spaces, addSpace } = useMemory(); - const sortedSpaces = spaces.sort(({ value: a }, { value: b }) => + const [open, setOpen] = React.useState(false); + const [values, setValues] = React.useState([]); + + const sortedSpaces = spaces.sort(({ id: a }, { id: b }) => values.includes(a) && !values.includes(b) ? -1 : values.includes(b) && !values.includes(a) @@ -192,8 +68,8 @@ export function FilterCombobox({ className, ...props }: Props) { spaces - .find((s) => s.value === val) - ?.label.toLowerCase() + .find((s) => s.id.toString() === val) + ?.title.toLowerCase() .includes(search.toLowerCase().trim()) ? 1 : 0 @@ -206,13 +82,13 @@ export function FilterCombobox({ className, ...props }: Props) { {sortedSpaces.map((space) => ( { setValues((prev) => - prev.includes(val) - ? prev.filter((v) => v !== val) - : [...prev, val], + prev.includes(parseInt(val)) + ? prev.filter((v) => v !== parseInt(val)) + : [...prev, parseInt(val)], ); }} asChild @@ -222,14 +98,14 @@ export function FilterCombobox({ className, ...props }: Props) { animate={{ opacity: 1, transition: { delay: 0.05 } }} transition={{ duration: 0.15 }} layout - layoutId={`space-combobox-${space.value}`} + layoutId={`space-combobox-${space.id}`} className="text-rgray-11" > - {space.label} - {values.includes(space.value)} + {space.title} + {values.includes(space.id)} Promise; }>({ spaces: [], + addSpace: async (space) => {}, }); export const MemoryProvider: React.FC< { spaces: CollectedSpaces[] } & React.PropsWithChildren -> = ({ children, spaces }) => { +> = ({ children, spaces: initalSpaces }) => { + const [spaces, setSpaces] = React.useState(initalSpaces); + + const addSpace = useCallback( + async (space: CollectedSpaces) => { + setSpaces((prev) => [...prev, space]); + }, + [spaces], + ); + return ( - + {children} ); From d4592196f9df4e73715007d3e0c2db575f7d1d62 Mon Sep 17 00:00:00 2001 From: Yash Date: Fri, 5 Apr 2024 08:49:49 +0000 Subject: [PATCH 4/6] delete no longer needed components --- .../src/components/Sidebar/CategoryItem.tsx | 307 ------------------ apps/web/src/components/Sidebar/PagesItem.tsx | 189 ----------- 2 files changed, 496 deletions(-) delete mode 100644 apps/web/src/components/Sidebar/CategoryItem.tsx delete mode 100644 apps/web/src/components/Sidebar/PagesItem.tsx diff --git a/apps/web/src/components/Sidebar/CategoryItem.tsx b/apps/web/src/components/Sidebar/CategoryItem.tsx deleted file mode 100644 index c2e72ba5..00000000 --- a/apps/web/src/components/Sidebar/CategoryItem.tsx +++ /dev/null @@ -1,307 +0,0 @@ -"use client"; -import { cleanUrl } from "@/lib/utils"; -import { StoredContent } from "@/server/db/schema"; -import { - DropdownMenu, - DropdownMenuTrigger, - DropdownMenuContent, - DropdownMenuItem, -} from "../ui/dropdown-menu"; -import { Label } from "../ui/label"; -import { - ArrowUpRight, - MoreHorizontal, - Tags, - ChevronDown, - Edit3, - Trash2, - Save, - ChevronRight, - Plus, - Minus, -} from "lucide-react"; -import { useState } from "react"; -import { - Drawer, - DrawerContent, - DrawerHeader, - DrawerTitle, - DrawerDescription, - DrawerFooter, - DrawerClose, -} from "../ui/drawer"; -import { Input } from "../ui/input"; -import { Textarea } from "../ui/textarea"; -import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover"; -import { - AnimatePresence, - motion, - Reorder, - useMotionValue, -} from "framer-motion"; - -const pages: StoredContent[] = [ - { - id: 1, - content: "", - title: "Visual Studio Code", - url: "https://code.visualstudio.com", - description: "", - image: "https://code.visualstudio.com/favicon.ico", - baseUrl: "https://code.visualstudio.com", - savedAt: new Date(), - space: "" - }, - { - id: 2, - content: "", - title: "yxshv/vscode: An unofficial remake of vscode's landing page", - url: "https://github.com/yxshv/vscode", - description: "", - image: "https://github.com/favicon.ico", - baseUrl: "https://github.com", - savedAt: new Date(), - space: "" - }, - { - id: 3, - content: "", - title: "yxshv/vscode: An unofficial remake of vscode's landing page", - url: "https://github.com/yxshv/vscode", - description: "", - image: "https://github.com/favicon.ico", - baseUrl: "https://github.com", - savedAt: new Date(), - space: "" - }, - { - id: 4, - content: "", - title: "yxshv/vscode: An unofficial remake of vscode's landing page", - url: "https://github.com/yxshv/vscode", - description: "", - image: "https://github.com/favicon.ico", - baseUrl: "https://github.com", - savedAt: new Date(), - space: "" - }, - { - id: 5, - content: "", - title: "yxshv/vscode: An unofficial remake of vscode's landing page", - url: "https://github.com/yxshv/vscode", - description: "", - image: "https://github.com/favicon.ico", - baseUrl: "https://github.com", - savedAt: new Date(), - space: "" - }, - { - id: 6, - content: "", - title: "yxshv/vscode: An unofficial remake of vscode's landing page", - url: "https://github.com/yxshv/vscode", - description: "", - image: "https://github.com/favicon.ico", - baseUrl: "https://github.com", - savedAt: new Date(), - space: "" - }, - { - id: 7, - content: "", - title: "yxshv/vscode: An unofficial remake of vscode's landing page", - url: "https://github.com/yxshv/vscode", - description: "", - image: "https://github.com/favicon.ico", - baseUrl: "https://github.com", - savedAt: new Date(), - space: "" - }, - { - id: 8, - content: "", - title: "yxshv/vscode: An unofficial remake of vscode's landing page", - url: "https://github.com/yxshv/vscode", - description: "", - image: "https://github.com/favicon.ico", - baseUrl: "https://github.com", - savedAt: new Date(), - space: "" - }, - { - id: 9, - content: "", - title: "yxshv/vscode: An unofficial remake of vscode's landing page", - url: "https://github.com/yxshv/vscode", - description: "", - image: "https://github.com/favicon.ico", - baseUrl: "https://github.com", - savedAt: new Date(), - space: "" - }, -]; -export const CategoryItem: React.FC<{ item: StoredContent }> = ({ item }) => { - const [isExpanded, setIsExpanded] = useState(false); - const [isEditDrawerOpen, setIsEditDrawerOpen] = useState(false); - - const [items, setItems] = useState(pages); - - return ( - <> -
- - - - - - Edit Page Details - - Change the page details - - - {cleanUrl(item.url)} - - - -
- - -
-
- -