scheduling ui

package-lock.json

@@ -9,12 +9,18 @@
       "version": "0.0.1-alpha.0",
       "dependencies": {
         "@radix-ui/react-checkbox": "^1.1.4",
+        "@radix-ui/react-context-menu": "^2.2.6",
         "@radix-ui/react-dialog": "^1.1.6",
         "@radix-ui/react-label": "^2.1.2",
         "@radix-ui/react-separator": "^1.1.2",
         "@radix-ui/react-slot": "^1.1.2",
         "@radix-ui/react-tabs": "^1.1.3",
         "@radix-ui/react-tooltip": "^1.1.8",
+        "@schedule-x/drag-and-drop": "^2.19.0",
+        "@schedule-x/events-service": "^2.19.0",
+        "@schedule-x/react": "^2.19.0",
+        "@schedule-x/theme-shadcn": "^2.19.0",
+        "@types/react-big-calendar": "^1.16.1",
         "axios": "^1.7.9",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
@@ -727,6 +733,34 @@
         "node": ">=14"
       }
     },
+    "node_modules/@preact/signals": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@preact/signals/-/signals-1.3.2.tgz",
+      "integrity": "sha512-naxcJgUJ6BTOROJ7C3QML7KvwKwCXQJYTc5L/b0eEsdYgPB6SxwoQ1vDGcS0Q7GVjAenVq/tXrybVdFShHYZWg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@preact/signals-core": "^1.7.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      },
+      "peerDependencies": {
+        "preact": "10.x"
+      }
+    },
+    "node_modules/@preact/signals-core": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@preact/signals-core/-/signals-core-1.8.0.tgz",
+      "integrity": "sha512-OBvUsRZqNmjzCZXWLxkZfhcgT+Fk8DDcT/8vD6a1xhDemodyy87UJRJfASMuSD8FaAIeGgGm85ydXhm7lr4fyA==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      }
+    },
     "node_modules/@radix-ui/primitive": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.1.tgz",
@@ -842,6 +876,34 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-context-menu": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context-menu/-/react-context-menu-2.2.6.tgz",
+      "integrity": "sha512-aUP99QZ3VU84NPsHeaFt4cQUNgJqFsLLOt/RbbWXszZ6MP0DpDyjkFZORr4RpAEx3sUBk+Kc8h13yGtC5Qw8dg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-menu": "2.1.6",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-dialog": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.6.tgz",
@@ -1001,6 +1063,46 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-menu": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.6.tgz",
+      "integrity": "sha512-tBBb5CXDJW3t2mo9WlO7r6GTmWV0F0uzHZVFmlRmYpiSK1CDU5IKojP1pm7oknpBOrFZx/YgBRW9oorPO2S/Lg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-collection": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-dismissable-layer": "1.1.5",
+        "@radix-ui/react-focus-guards": "1.1.1",
+        "@radix-ui/react-focus-scope": "1.1.2",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-popper": "1.2.2",
+        "@radix-ui/react-portal": "1.1.4",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-roving-focus": "1.1.2",
+        "@radix-ui/react-slot": "1.1.2",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popper": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.2.tgz",
@@ -1386,6 +1488,46 @@
       "integrity": "sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==",
       "license": "MIT"
     },
+    "node_modules/@schedule-x/calendar": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/@schedule-x/calendar/-/calendar-2.19.0.tgz",
+      "integrity": "sha512-XgGWX1iV7mwJw+Zr7dSUhhGbV2Z3OTdD2BsuUMfMlKutbWb3qXzqL4I+jernTgRhY0M1310i5lm7LJ5/hOpJqQ==",
+      "license": "MIT",
+      "peer": true,
+      "peerDependencies": {
+        "@preact/signals": "^1.1.5",
+        "preact": "^10.19.2"
+      }
+    },
+    "node_modules/@schedule-x/drag-and-drop": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/@schedule-x/drag-and-drop/-/drag-and-drop-2.19.0.tgz",
+      "integrity": "sha512-xlBNzAK7BvtCt3AS6anHT8hC0m58J/Sof/YYgH9XzwxwgksEkzO9/A+NUFMh5w2O/JK77cRO8858WJqJINPbUw==",
+      "license": "MIT"
+    },
+    "node_modules/@schedule-x/events-service": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/@schedule-x/events-service/-/events-service-2.19.0.tgz",
+      "integrity": "sha512-klOOKRM6HE0scP8+cgZOG8/g3ahxip0l1ubc5REz6EX5pcmvQ1DbjKgk0O80XSWrJga20Ppbw32oduMmt2BvFw==",
+      "license": "MIT"
+    },
+    "node_modules/@schedule-x/react": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/@schedule-x/react/-/react-2.19.0.tgz",
+      "integrity": "sha512-w6JrjFFJqXKvYQPb7DIdOp0llGkB+QZ6pWyUqxXEEspyY2iIjWMzcoR+PKEAK+wKlS8TCj/fG2KdFxLxU5Ltag==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@schedule-x/calendar": "^2.18.0",
+        "react": "^16.7.0 || ^17 || ^18 || ^19",
+        "react-dom": "^16.7.0 || ^17 || ^18 || ^19"
+      }
+    },
+    "node_modules/@schedule-x/theme-shadcn": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/@schedule-x/theme-shadcn/-/theme-shadcn-2.19.0.tgz",
+      "integrity": "sha512-ntyJ57r35qmHjj992TUQwdz4wIWqrULsFiNRexQAiMHgG+qqBBfWLcBaLPGy4qcmjv1cOY1HCABM4idQozDhaw==",
+      "license": "MIT"
+    },
     "node_modules/@swc/counter": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
@@ -1464,6 +1606,12 @@
       "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
       "license": "MIT"
     },
+    "node_modules/@types/date-arithmetic": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/@types/date-arithmetic/-/date-arithmetic-4.1.4.tgz",
+      "integrity": "sha512-p9eZ2X9B80iKiTW4ukVj8B4K6q9/+xFtQ5MGYA5HWToY9nL4EkhV9+6ftT2VHpVMEZb5Tv00Iel516bVdO+yRw==",
+      "license": "MIT"
+    },
     "node_modules/@types/node": {
       "version": "20.17.19",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.19.tgz",
@@ -1478,20 +1626,29 @@
       "version": "15.7.14",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz",
       "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@types/react": {
       "version": "18.3.18",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.18.tgz",
       "integrity": "sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/react-big-calendar": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/@types/react-big-calendar/-/react-big-calendar-1.16.1.tgz",
+      "integrity": "sha512-pDHFcVWx+BvZbX6U39R4l8c9930vKnfx+09lf4W8r8HuxBDLzGk7Q63ncBmqqnQImEFNDKfwa6MDyu90cfzJ2A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/date-arithmetic": "*",
+        "@types/prop-types": "*",
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-dom": {
       "version": "18.3.5",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.5.tgz",
@@ -2896,6 +3053,17 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "license": "MIT"
     },
+    "node_modules/preact": {
+      "version": "10.25.4",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.25.4.tgz",
+      "integrity": "sha512-jLdZDb+Q+odkHJ+MpW/9U5cODzqnB+fy2EiHSZES7ldV5LK7yjlVzTp7R8Xy6W6y75kfK8iWYtFVH7lvjwrCMA==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",

package.json

@@ -11,12 +11,18 @@
   },
   "dependencies": {
     "@radix-ui/react-checkbox": "^1.1.4",
+    "@radix-ui/react-context-menu": "^2.2.6",
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-label": "^2.1.2",
     "@radix-ui/react-separator": "^1.1.2",
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-tabs": "^1.1.3",
     "@radix-ui/react-tooltip": "^1.1.8",
+    "@schedule-x/drag-and-drop": "^2.19.0",
+    "@schedule-x/events-service": "^2.19.0",
+    "@schedule-x/react": "^2.19.0",
+    "@schedule-x/theme-shadcn": "^2.19.0",
+    "@types/react-big-calendar": "^1.16.1",
     "axios": "^1.7.9",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

src/app/api/account/route.ts

@@ -1,10 +1,5 @@
 import { NextResponse, NextRequest } from 'next/server';
-import { TwitterApi } from 'twitter-api-v2';
-import config from '@/app/api/env';
-import { PostRequest } from '@/utils';
-import { inspect } from 'util';
 import database from '../database';
-import { generateUrlSafeString } from '@/utils';
 
 // Account creation
 // Email doesn't exist

src/app/api/database.ts

@@ -1,6 +1,6 @@
 import { MongoClient } from 'mongodb';
 import config from './env';
-import { generateUrlSafeString, Session, User } from '@/utils';
+import { Session, User } from '@/utils';
 
 const client = new MongoClient(config.mongoUrl);
 

src/app/api/posts/route.ts

@@ -20,6 +20,14 @@ export async function POST(req: NextRequest) {
                     });
 
                     await twitterClient.v2.tweet(content);
+
+                default:
+                    return NextResponse.json(
+                        {
+                            message: 'Not implemented',
+                        },
+                        { status: 501 }
+                    );
             }
         }
     } catch (err) {

src/app/calendar/page.tsx

@@ -0,0 +1,115 @@
+'use client';
+import { useCalendarApp, ScheduleXCalendar } from '@schedule-x/react';
+import {
+    createViewDay,
+    createViewMonthAgenda,
+    createViewMonthGrid,
+    createViewWeek,
+} from '@schedule-x/calendar';
+
+import { createEventsServicePlugin } from '@schedule-x/events-service';
+import { createDragAndDropPlugin } from '@schedule-x/drag-and-drop';
+
+import '@/calendar-theme.css';
+import { useEffect, useState } from 'react';
+import App from '@/components/app';
+import {
+    ContextMenu,
+    ContextMenuContent,
+    ContextMenuItem,
+    ContextMenuTrigger,
+} from '@/components/ui/context-menu';
+
+import { PlusCircle } from 'lucide-react';
+import {
+    Dialog,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+
+function CalendarApp() {
+    const eventsService = useState(() => createEventsServicePlugin())[0];
+    const dragAndDrop = useState(() => createDragAndDropPlugin())[0];
+
+    const calendar = useCalendarApp({
+        views: [
+            createViewDay(),
+            createViewWeek(),
+            createViewMonthGrid(),
+            createViewMonthAgenda(),
+        ],
+        events: [
+            {
+                id: '1',
+                title: 'Linus tech tips drama',
+                start: '2025-02-16 01:00',
+                end: '2025-02-16 02:00',
+            },
+        ],
+        plugins: [eventsService, dragAndDrop],
+        isDark: true,
+    });
+
+    useEffect(() => {
+        console.log(eventsService.getAll());
+    }, [eventsService]);
+
+    const [newPostDialogOpen, setNewPostDialogOpen] = useState(false);
+
+    return (
+        <App>
+            <div>
+                <Dialog
+                    open={newPostDialogOpen}
+                    onOpenChange={setNewPostDialogOpen}
+                >
+                    <DialogContent>
+                        <DialogHeader>
+                            <DialogTitle>Feature not available</DialogTitle>
+                        </DialogHeader>
+                        <div></div>
+                        <DialogFooter>
+                            <Button
+                                variant="outline"
+                                onClick={() => setNewPostDialogOpen(false)}
+                            >
+                                Cancel
+                            </Button>
+                            <Button>Submit</Button>
+                        </DialogFooter>
+                    </DialogContent>
+                </Dialog>
+
+                <ContextMenu>
+                    <ContextMenuTrigger>
+                        <ScheduleXCalendar
+                            calendarApp={calendar}
+                            customComponents={{
+                                headerContent: CalendarHeader,
+                            }}
+                        />
+                    </ContextMenuTrigger>
+                    <ContextMenuContent>
+                        <ContextMenuItem
+                            onClick={() => {
+                                setNewPostDialogOpen(true);
+                            }}
+                        >
+                            <PlusCircle className="w-4 mt-0.5" />{' '}
+                            <p className="ml-1">New post</p>
+                        </ContextMenuItem>
+                    </ContextMenuContent>
+                </ContextMenu>
+            </div>
+        </App>
+    );
+}
+
+function CalendarHeader() {
+    return <div className="flex flex-row w-full"></div>;
+}
+
+export default CalendarApp;

src/app/dashboard/page.tsx

@@ -2,25 +2,12 @@ import AccountStatus from '@/components/accountStatus';
 import Engagement from '@/components/engagement';
 import Ideas from '@/components/ideas';
 import RecentPosts from '@/components/recentPosts';
+import App from '@/components/app';
 import { Calendar } from '@/components/ui/calendar';
 
-import {
-    SidebarProvider,
-    Sidebar,
-    SidebarContent,
-} from '@/components/ui/sidebar';
-
 export default function Dashboard() {
     return (
-        <div className="flex w-full">
+        <App>
-            <div>
-                <SidebarProvider>
-                    <Sidebar className="w-64 h-full">
-                        <SidebarContent className="p-6">Hello</SidebarContent>
-                    </Sidebar>
-                </SidebarProvider>
-            </div>
-
             <div className="flex flex-1 flex-col p-6 px-5 md:px-10 h-max">
                 <div className="w-full">
                     <h1 className="text-3xl font-bold">Dashboard</h1>
@@ -103,6 +90,6 @@ export default function Dashboard() {
                     />
                 </div>
             </div>
-        </div>
+        </App>
     );
 }

src/components/app.tsx

@@ -0,0 +1,73 @@
+import {
+    SidebarContent,
+    SidebarProvider,
+    Sidebar,
+    SidebarGroup,
+    SidebarGroupLabel,
+    SidebarGroupContent,
+    SidebarMenu,
+    SidebarMenuItem,
+    SidebarMenuButton,
+} from '@/components/ui/sidebar';
+
+import { Calendar, LayoutDashboardIcon, Settings } from 'lucide-react';
+import Link from 'next/link';
+
+// Menu items.
+const items = [
+    {
+        title: 'Dashboard',
+        url: '/dashboard',
+        icon: LayoutDashboardIcon,
+    },
+    {
+        title: 'Calendar',
+        url: '/calendar',
+        icon: Calendar,
+    },
+    {
+        title: 'Settings',
+        url: '/settings',
+        icon: Settings,
+    },
+];
+
+export default function App({ children }: { children?: any }) {
+    return (
+        <div className="flex w-full">
+            <div>
+                <SidebarProvider>
+                    <Sidebar>
+                        <SidebarContent>
+                            <SidebarGroup>
+                                <SidebarGroupLabel>
+                                    Klayrion v0.0.1-alpha.0
+                                </SidebarGroupLabel>
+                                <SidebarGroupContent>
+                                    <SidebarMenu>
+                                        {items.map((item) => (
+                                            <SidebarMenuItem key={item.title}>
+                                                <SidebarMenuButton asChild>
+                                                    <Link
+                                                        href={item.url}
+                                                        className="font-semibold"
+                                                    >
+                                                        <item.icon />
+                                                        <span>
+                                                            {item.title}
+                                                        </span>
+                                                    </Link>
+                                                </SidebarMenuButton>
+                                            </SidebarMenuItem>
+                                        ))}
+                                    </SidebarMenu>
+                                </SidebarGroupContent>
+                            </SidebarGroup>
+                        </SidebarContent>
+                    </Sidebar>
+                </SidebarProvider>
+            </div>
+            <div className="w-full">{children}</div>
+        </div>
+    );
+}

src/components/ui/context-menu.tsx

@@ -0,0 +1,200 @@
+"use client"
+
+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const ContextMenu = ContextMenuPrimitive.Root
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+
+const ContextMenuGroup = ContextMenuPrimitive.Group
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal
+
+const ContextMenuSub = ContextMenuPrimitive.Sub
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </ContextMenuPrimitive.SubTrigger>
+))
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
+
+const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </ContextMenuPrimitive.Portal>
+))
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
+
+const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+))
+ContextMenuCheckboxItem.displayName =
+  ContextMenuPrimitive.CheckboxItem.displayName
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Circle className="h-4 w-4 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+))
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+
+const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
+
+const ContextMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+ContextMenuShortcut.displayName = "ContextMenuShortcut"
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}

src/components/ui/dialog.tsx

@@ -0,0 +1,122 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}

src/utils.ts

@@ -1,12 +1,3 @@
-export function generateUrlSafeString(length = 16) {
-    const chars =
-        'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_';
-    const array = new Uint8Array(length);
-    crypto.getRandomValues(array);
-
-    return Array.from(array, (byte) => chars[byte % chars.length]).join('');
-}
-
 export type PlatformKind = 'x' | 'linkedin';
 
 export interface Platform {