├── .github
    └── FUNDING.yml
├── src
    ├── vite-env.d.ts
    ├── providers
    │   ├── theme-provider.tsx
    │   ├── toaster.tsx
    │   └── halloween-provider.tsx
    ├── components
    │   ├── logo.tsx
    │   ├── ui
    │   │   ├── avatar.tsx
    │   │   ├── input.tsx
    │   │   ├── toggle.tsx
    │   │   ├── button.tsx
    │   │   ├── tooltip.tsx
    │   │   ├── modal.tsx
    │   │   ├── dropdown.tsx
    │   │   ├── accordion.tsx
    │   │   └── toast.tsx
    │   ├── EmptyState.tsx
    │   ├── ErrorBoundary.tsx
    │   ├── theme-switcher.tsx
    │   ├── ErrorMessage.tsx
    │   ├── halloween-switcher.tsx
    │   ├── UserCursor.tsx
    │   ├── lander
    │   │   ├── footer.tsx
    │   │   ├── preview.tsx
    │   │   ├── selfhost.tsx
    │   │   ├── faqs.tsx
    │   │   ├── hero.tsx
    │   │   ├── nav.tsx
    │   │   └── pricing-beta.tsx
    │   ├── halloween-decorations.tsx
    │   ├── privacy.tsx
    │   ├── HelpModal.tsx
    │   ├── terms.tsx
    │   ├── FeedbackModal.tsx
    │   └── UserStack.tsx
    ├── libs
    │   └── utils.ts
    ├── authenticated
    │   ├── ToolsBar
    │   │   ├── index.tsx
    │   │   └── NoteButton.tsx
    │   ├── LoadingIndicator.tsx
    │   ├── Onboarding.tsx
    │   ├── IconButton.tsx
    │   ├── index.tsx
    │   ├── NoteControls.tsx
    │   ├── Note.tsx
    │   └── Board.tsx
    ├── auth
    │   ├── signin.tsx
    │   └── signup.tsx
    ├── main.tsx
    ├── hooks
    │   ├── useConvexAuth.ts
    │   ├── usePresence.ts
    │   └── use-toast.tsx
    ├── index.css
    ├── App.tsx
    └── assets
    │   └── react.svg
├── tsconfig.node.tsbuildinfo
├── .gitattributes
├── public
    ├── board.png
    ├── duct-tape.png
    ├── robots.txt
    ├── sticky-sad.png
    ├── sticky-logo.png
    ├── sitemap.xml
    └── vite.svg
├── convex.json
├── postcss.config.js
├── vercel.json
├── tsconfig.json
├── convex
    ├── auth.config.ts
    ├── convex.config.ts
    ├── _generated
    │   ├── api.js
    │   ├── dataModel.d.ts
    │   ├── server.js
    │   ├── api.d.ts
    │   └── server.d.ts
    ├── support.ts
    ├── tsconfig.json
    ├── boardSharing.ts
    ├── emails.ts
    ├── schema.ts
    ├── notes.ts
    ├── README.md
    ├── welcomeEmail.tsx
    ├── presence.ts
    ├── users.ts
    └── boards.ts
├── .template.env
├── vite.config.ts
├── .gitignore
├── tsconfig.node.json
├── tsconfig.app.json
├── eslint.config.js
├── LICENSE
├── tsconfig.app.tsbuildinfo
├── tailwind.config.js
├── package.json
├── index.html
└── README.md


/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | github: [hamzasaleem2]
2 | 


--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/tsconfig.node.tsbuildinfo:
--------------------------------------------------------------------------------
1 | {"root":["./vite.config.ts"],"version":"5.6.2"}


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/public/board.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hamzasaleem2/sticky/HEAD/public/board.png


--------------------------------------------------------------------------------
/public/duct-tape.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hamzasaleem2/sticky/HEAD/public/duct-tape.png


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | User-agent: *
2 | Allow: /
3 | 
4 | Sitemap: https://sticky.today/sitemap.xml


--------------------------------------------------------------------------------
/public/sticky-sad.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hamzasaleem2/sticky/HEAD/public/sticky-sad.png


--------------------------------------------------------------------------------
/public/sticky-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hamzasaleem2/sticky/HEAD/public/sticky-logo.png


--------------------------------------------------------------------------------
/convex.json:
--------------------------------------------------------------------------------
1 | {
2 |   "node": {
3 |     "externalPackages": [
4 |       "resend"
5 |     ]
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |     plugins: {
3 |       tailwindcss: {},
4 |       autoprefixer: {},
5 |     }
6 |   }


--------------------------------------------------------------------------------
/vercel.json:
--------------------------------------------------------------------------------
1 | {
2 |     "rewrites": [
3 |       {
4 |         "source": "/(.*)",
5 |         "destination": "/index.html"
6 |       }
7 |     ]
8 |   }


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "files": [],
3 |   "references": [
4 |     { "path": "./tsconfig.app.json" },
5 |     { "path": "./tsconfig.node.json" }
6 |   ]
7 | }
8 | 


--------------------------------------------------------------------------------
/convex/auth.config.ts:
--------------------------------------------------------------------------------
1 | export default {
2 |     providers: [
3 |       {
4 |         domain: process.env.CLERK_JWT_ISSUER_DOMAIN,
5 |         applicationID: "convex",
6 |       },
7 |     ]
8 | };


--------------------------------------------------------------------------------
/.template.env:
--------------------------------------------------------------------------------
 1 | # Deployment used by `npx convex dev`
 2 | CONVEX_DEPLOYMENT=
 3 | 
 4 | VITE_CONVEX_URL=
 5 | 
 6 | VITE_CLERK_PUBLISHABLE_KEY=
 7 | 
 8 | VITE_POSTHOG_KEY=
 9 | VITE_POSTHOG_API_HOST=
10 | 


--------------------------------------------------------------------------------
/convex/convex.config.ts:
--------------------------------------------------------------------------------
1 | import { defineApp } from "convex/server";
2 | import aggregate from "@convex-dev/aggregate/convex.config.js";
3 | 
4 | const app = defineApp();
5 | app.use(aggregate, { name: "aggregateBoardsByUser" });
6 | export default app;


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite'
 2 | import react from '@vitejs/plugin-react'
 3 | import { resolve } from 'path';
 4 | 
 5 | // https://vitejs.dev/config/
 6 | export default defineConfig({
 7 |   plugins: [react()],
 8 |   resolve: {
 9 |     alias: {
10 |       '@': resolve(__dirname, 'src'),
11 |     },
12 |   },
13 | })
14 | 


--------------------------------------------------------------------------------
/src/providers/theme-provider.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 | 
3 | import { ThemeProvider as NextThemesProvider } from 'next-themes'
4 | import { type ThemeProviderProps } from 'next-themes/dist/types'
5 | 
6 | export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
7 |   return <NextThemesProvider {...props}>{children}</NextThemesProvider>
8 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 
26 | Dockerfile
27 | 


--------------------------------------------------------------------------------
/src/components/logo.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { LazyLoadImage } from 'react-lazy-load-image-component';
 3 | import 'react-lazy-load-image-component/src/effects/blur.css';
 4 | 
 5 | interface LogoProps {
 6 |   className?: string;
 7 | }
 8 | 
 9 | const Logo: React.FC<LogoProps> = ({ className }) => {
10 |   return (
11 |     <LazyLoadImage
12 |       src="/sticky-logo.png"
13 |       alt="Sticky Logo"
14 |       className={className}
15 |       effect="blur"
16 |     />
17 |   );
18 | };
19 | 
20 | export default Logo;


--------------------------------------------------------------------------------
/src/components/ui/avatar.tsx:
--------------------------------------------------------------------------------
 1 | import { ClassValue } from 'clsx'
 2 | 
 3 | import { cn } from '../../libs/utils'
 4 | 
 5 | export default function Avatar({
 6 |   className,
 7 |   imageUrl,
 8 | }: {
 9 |   className?: ClassValue
10 |   imageUrl: string
11 | }) {
12 |   return (
13 |     <div
14 |       style={{
15 |         backgroundImage: `url(${imageUrl})`,
16 |       }}
17 |       className={cn(
18 |         'h-16 w-16 rounded-full border-2 border-border dark:border-darkBorder bg-cover bg-center',
19 |         className,
20 |       )}
21 |     ></div>
22 |   )
23 | }


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2022",
 4 |     "lib": ["ES2023"],
 5 |     "module": "ESNext",
 6 |     "skipLibCheck": true,
 7 | 
 8 |     /* Bundler mode */
 9 |     "moduleResolution": "bundler",
10 |     "allowImportingTsExtensions": true,
11 |     "isolatedModules": true,
12 |     "moduleDetection": "force",
13 |     "noEmit": true,
14 | 
15 |     /* Linting */
16 |     "strict": true,
17 |     "noUnusedLocals": true,
18 |     "noUnusedParameters": true,
19 |     "noFallthroughCasesInSwitch": true
20 |   },
21 |   "include": ["vite.config.ts"]
22 | }
23 | 


--------------------------------------------------------------------------------
/convex/_generated/api.js:
--------------------------------------------------------------------------------
 1 | /* prettier-ignore-start */
 2 | 
 3 | /* eslint-disable */
 4 | /**
 5 |  * Generated `api` utility.
 6 |  *
 7 |  * THIS CODE IS AUTOMATICALLY GENERATED.
 8 |  *
 9 |  * To regenerate, run `npx convex dev`.
10 |  * @module
11 |  */
12 | 
13 | import { anyApi, componentsGeneric } from "convex/server";
14 | 
15 | /**
16 |  * A utility for referencing Convex functions in your app's API.
17 |  *
18 |  * Usage:
19 |  * ```js
20 |  * const myFunctionReference = api.myModule.myFunction;
21 |  * ```
22 |  */
23 | export const api = anyApi;
24 | export const internal = anyApi;
25 | export const components = componentsGeneric();
26 | 
27 | /* prettier-ignore-end */
28 | 


--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2020",
 4 |     "useDefineForClassFields": true,
 5 |     "lib": ["ES2020", "DOM", "DOM.Iterable"],
 6 |     "module": "ESNext",
 7 |     "skipLibCheck": true,
 8 | 
 9 |     /* Bundler mode */
10 |     "moduleResolution": "bundler",
11 |     "allowImportingTsExtensions": true,
12 |     "isolatedModules": true,
13 |     "moduleDetection": "force",
14 |     "noEmit": true,
15 |     "jsx": "react-jsx",
16 | 
17 |     /* Linting */
18 |     "strict": true,
19 |     "noUnusedLocals": true,
20 |     "noUnusedParameters": true,
21 |     "noFallthroughCasesInSwitch": true
22 |   },
23 |   "include": ["src", "convex/emails"]
24 | }
25 | 


--------------------------------------------------------------------------------
/convex/support.ts:
--------------------------------------------------------------------------------
 1 | import { mutation } from './_generated/server'
 2 | import { v } from 'convex/values'
 3 | 
 4 | export const supportRequest = mutation({
 5 |   args: { input: v.string() },
 6 |   handler: async (ctx, args) => {
 7 |     const identity = await ctx.auth.getUserIdentity();
 8 |     if (!identity) {
 9 |       throw new Error("Not authenticated");
10 |     }
11 |     const user = await ctx.db
12 |       .query("users")
13 |       .withIndex("by_token", (q) => q.eq("tokenIdentifier", identity.tokenIdentifier.split('|')[1]))
14 |       .unique();
15 |     if (!user) {
16 |       throw new Error("User not found");
17 |     }
18 |     await ctx.db.insert('supportRequest', {
19 |       userId: user._id,
20 |       input: args.input,
21 |     })
22 |   },
23 | })


--------------------------------------------------------------------------------
/src/components/EmptyState.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Button } from './ui/button';
 3 | 
 4 | interface EmptyStateProps {
 5 |   message: string;
 6 |   buttonText?: string;
 7 |   onButtonClick?: () => void;
 8 | }
 9 | 
10 | const EmptyState: React.FC<EmptyStateProps> = ({ message, buttonText, onButtonClick }) => {
11 |   return (
12 |     <div className="flex flex-col items-center justify-center h-full">
13 |       <img src="/sticky-sad.png" alt="Sad Sticky" className="w-32 h-32 mb-4" />
14 |       <p className="text-lg text-gray-600 dark:text-gray-300 mb-4">{message}</p>
15 |       {buttonText && onButtonClick && (
16 |         <Button onClick={onButtonClick}>{buttonText}</Button>
17 |       )}
18 |     </div>
19 |   );
20 | };
21 | 
22 | export default EmptyState;


--------------------------------------------------------------------------------
/src/components/ErrorBoundary.tsx:
--------------------------------------------------------------------------------
 1 | import { Component, ReactNode } from "react";
 2 | import ErrorMessage from "./ErrorMessage";
 3 | 
 4 | interface Props {
 5 |   children?: ReactNode;
 6 | }
 7 | 
 8 | interface State {
 9 |   hasError: boolean;
10 |   error: Error | null;
11 | }
12 | 
13 | class ErrorBoundary extends Component<Props, State> {
14 |   public state: State = {
15 |     hasError: false,
16 |     error: null,
17 |   };
18 | 
19 |   public static getDerivedStateFromError(error: Error): State {
20 |     return { hasError: true, error };
21 |   }
22 | 
23 |   public render() {
24 |     if (this.state.hasError) {
25 |       return <ErrorMessage message={"An unexpected error occurred"} />;
26 |     }
27 | 
28 |     return this.props.children;
29 |   }
30 | }
31 | 
32 | export default ErrorBoundary;


--------------------------------------------------------------------------------
/src/libs/utils.ts:
--------------------------------------------------------------------------------
 1 | import { clsx, type ClassValue } from 'clsx'
 2 | import { twMerge } from 'tailwind-merge'
 3 | 
 4 | export function cn(...inputs: ClassValue[]) {
 5 |   return twMerge(clsx(inputs))
 6 | }
 7 | 
 8 | export function formatLastModified(timestamp: number): string {
 9 |   const date = new Date(timestamp);
10 |   const now = new Date();
11 |   const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);
12 | 
13 |   if (diffInSeconds < 60) return 'Just now';
14 |   if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)}m ago`;
15 |   if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)}h ago`;
16 |   if (diffInSeconds < 604800) return `${Math.floor(diffInSeconds / 86400)}d ago`;
17 | 
18 |   return date.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
19 | }


--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
 1 | import js from '@eslint/js'
 2 | import globals from 'globals'
 3 | import reactHooks from 'eslint-plugin-react-hooks'
 4 | import reactRefresh from 'eslint-plugin-react-refresh'
 5 | import tseslint from 'typescript-eslint'
 6 | 
 7 | export default tseslint.config(
 8 |   { ignores: ['dist'] },
 9 |   {
10 |     extends: [js.configs.recommended, ...tseslint.configs.recommended],
11 |     files: ['**/*.{ts,tsx}'],
12 |     languageOptions: {
13 |       ecmaVersion: 2020,
14 |       globals: globals.browser,
15 |     },
16 |     plugins: {
17 |       'react-hooks': reactHooks,
18 |       'react-refresh': reactRefresh,
19 |     },
20 |     rules: {
21 |       ...reactHooks.configs.recommended.rules,
22 |       'react-refresh/only-export-components': [
23 |         'warn',
24 |         { allowConstantExport: true },
25 |       ],
26 |     },
27 |   },
28 | )
29 | 


--------------------------------------------------------------------------------
/convex/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   /* This TypeScript project config describes the environment that
 3 |    * Convex functions run in and is used to typecheck them.
 4 |    * You can modify it, but some settings required to use Convex.
 5 |    */
 6 |   "compilerOptions": {
 7 |     /* These settings are not required by Convex and can be modified. */
 8 |     "allowJs": true,
 9 |     "strict": true,
10 |     "moduleResolution": "Bundler",
11 |     "jsx": "react-jsx",
12 |     "skipLibCheck": true,
13 |     "allowSyntheticDefaultImports": true,
14 | 
15 |     /* These compiler options are required by Convex */
16 |     "target": "ESNext",
17 |     "lib": ["ES2021", "dom"],
18 |     "forceConsistentCasingInFileNames": true,
19 |     "module": "ESNext",
20 |     "isolatedModules": true,
21 |     "noEmit": true
22 |   },
23 |   "include": ["./**/*"],
24 |   "exclude": ["./_generated"]
25 | }
26 | 


--------------------------------------------------------------------------------
/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import { ClassValue } from 'clsx'
 2 | import { cn } from '../../libs/utils'
 3 | 
 4 | 
 5 | type Props = {
 6 |   className?: ClassValue
 7 |   value: string
 8 |   onChange: any;
 9 |   placeholder: string
10 | }
11 | 
12 | export default function Input({
13 |   className,
14 |   value,
15 |   onChange,
16 |   placeholder,
17 | }: Props) {
18 |   return (
19 |     <input
20 |       className={cn(
21 |         'rounded-base bg-white dark:bg-secondaryBlack border-2 border-border dark:border-darkBorder p-[10px] font-base ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2 outline-none',
22 |         className,
23 |       )}
24 |       type="text"
25 |       name="text"
26 |       placeholder={placeholder}
27 |       value={value}
28 |       onChange={onChange}
29 |       aria-label={placeholder}
30 |     />
31 |   )
32 | }


--------------------------------------------------------------------------------
/src/components/theme-switcher.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import { Moon, Sun, Monitor } from 'lucide-react'
 4 | import { useTheme } from 'next-themes'
 5 | 
 6 | export function ThemeSwitcher() {
 7 |   const { setTheme, theme } = useTheme()
 8 | 
 9 |   return (
10 |     <button
11 |       className="flex items-center justify-center h-7 w-7 rounded-full border border-border bg-white text-text transition-all hover:border-main hover:scale-110 dark:border-darkBorder dark:bg-secondaryBlack dark:text-darkText dark:hover:border-main"
12 |       onClick={() => setTheme(theme === 'system' ? 'light' : theme === 'light' ? 'dark' : 'system')}
13 |     >
14 |       {theme === 'system' && <Monitor className="h-4 w-4" />}
15 |       {theme === 'light' && <Sun className="h-4 w-4" />}
16 |       {theme === 'dark' && <Moon className="h-4 w-4" />}
17 |       <span className="sr-only">Toggle theme</span>
18 |     </button>
19 |   )
20 | }


--------------------------------------------------------------------------------
/src/components/ErrorMessage.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import Logo from './logo';
 3 | import { Button } from './ui/button';
 4 | import { useNavigate } from 'react-router-dom';
 5 | 
 6 | interface ErrorMessageProps {
 7 |   message: string;
 8 | }
 9 | 
10 | const ErrorMessage: React.FC<ErrorMessageProps> = ({ message }) => {
11 |   const navigate = useNavigate();
12 |   return (
13 |     <div className="p-4 min-h-screen flex flex-col items-center justify-center bg-gradient-to-b from-purple-50 to-pink-50 dark:from-gray-900 dark:to-purple-900">
14 |       <Logo className="h-16 w-16 mb-6" />
15 |       <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">Oops! Something went wrong</h1>
16 |       <p className="text-xl text-gray-600 dark:text-gray-300 mb-8">{message}</p>
17 |       <Button onClick={() => {
18 |         navigate("/boards")
19 |       }}>Go to Your Boards</Button>
20 |     </div>
21 |   );
22 | };
23 | 
24 | export default ErrorMessage;


--------------------------------------------------------------------------------
/src/providers/toaster.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { useToast } from "../hooks/use-toast"
 4 | import {
 5 |   Toast,
 6 |   ToastClose,
 7 |   ToastDescription,
 8 |   ToastProvider,
 9 |   ToastTitle,
10 |   ToastViewport,
11 | } from "../components/ui/toast"
12 | 
13 | export function Toaster() {
14 |   const { toasts } = useToast()
15 | 
16 |   return (
17 |     <ToastProvider>
18 |       {toasts.map(function ({ id, title, description, action, ...props }) {
19 |         return (
20 |           <Toast key={id} {...props}>
21 |             <div className="grid gap-1">
22 |               {title && <ToastTitle>{title}</ToastTitle>}
23 |               {description && (
24 |                 <ToastDescription>{description}</ToastDescription>
25 |               )}
26 |             </div>
27 |             {action}
28 |             <ToastClose />
29 |           </Toast>
30 |         )
31 |       })}
32 |       <ToastViewport />
33 |     </ToastProvider>
34 |   )
35 | }
36 | 


--------------------------------------------------------------------------------
/src/authenticated/ToolsBar/index.tsx:
--------------------------------------------------------------------------------
 1 | import NoteButton from "./NoteButton";
 2 | 
 3 | interface Props {
 4 |     onCreate: () => void;
 5 |     currentTool: 'note' | null;
 6 |     onDeselectTool: () => void;
 7 | }
 8 | 
 9 | const ToolsBar: React.FC<Props> = ({ onCreate, currentTool, onDeselectTool }) => {
10 |     return (
11 |         <div
12 |             className="absolute bottom-6 left-0 right-0 flex items-center justify-center pointer-events-none"
13 |             onClick={(e) => e.stopPropagation()}
14 |         >
15 |             <div className="bg-transparent flex items-center justify-center pointer-events-auto">
16 |                 <NoteButton
17 |                     isActive={currentTool === 'note'}
18 |                     onClick={() => currentTool === 'note' ? onDeselectTool() : onCreate()}
19 |                     currentTool={currentTool}
20 |                 />
21 |             </div>
22 |         </div>
23 |     );
24 | }
25 | 
26 | export default ToolsBar;


--------------------------------------------------------------------------------
/src/authenticated/ToolsBar/NoteButton.tsx:
--------------------------------------------------------------------------------
 1 | import IconButton from "../IconButton";
 2 | 
 3 | type Props = {
 4 |   isActive: boolean;
 5 |   onClick: () => void;
 6 |   currentTool: 'note' | null;
 7 | };
 8 | 
 9 | export default function NoteButton({ isActive, onClick }: Props) {
10 |   return (
11 |     <IconButton isActive={isActive} onClick={onClick} tooltip="Add new sticky">
12 |       <svg
13 |         xmlns="http://www.w3.org/2000/svg"
14 |         viewBox="0 0 24 24"
15 |         fill={isActive ? "currentColor" : "none"}
16 |         stroke={isActive ? "none" : "currentColor"}
17 |         strokeWidth={isActive ? "0" : "2"}
18 |         className="w-8 h-8"
19 |       >
20 |         <path d="M21.731 2.269a2.625 2.625 0 00-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 000-3.712zM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 00-1.32 2.214l-.8 2.685a.75.75 0 00.933.933l2.685-.8a5.25 5.25 0 002.214-1.32L19.513 8.2z" />
21 |       </svg>
22 |     </IconButton>
23 |   );
24 | }


--------------------------------------------------------------------------------
/public/sitemap.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
 3 |   <url>
 4 |     <loc>https://sticky.today/</loc>
 5 |     <changefreq>weekly</changefreq>
 6 |     <priority>1.0</priority>
 7 |   </url>
 8 |   <url>
 9 |     <loc>https://sticky.today/signin</loc>
10 |     <changefreq>monthly</changefreq>
11 |     <priority>0.8</priority>
12 |   </url>
13 |   <url>
14 |     <loc>https://sticky.today/signup</loc>
15 |     <changefreq>monthly</changefreq>
16 |     <priority>0.8</priority>
17 |   </url>
18 |   <url>
19 |     <loc>https://sticky.today/terms</loc>
20 |     <changefreq>yearly</changefreq>
21 |     <priority>0.5</priority>
22 |   </url>
23 |   <url>
24 |     <loc>https://sticky.today/privacy</loc>
25 |     <changefreq>yearly</changefreq>
26 |     <priority>0.5</priority>
27 |   </url>
28 |   <url>
29 |     <loc>https://sticky.today/boards</loc>
30 |     <changefreq>daily</changefreq>
31 |     <priority>0.9</priority>
32 |   </url>
33 | </urlset>


--------------------------------------------------------------------------------
/src/authenticated/LoadingIndicator.tsx:
--------------------------------------------------------------------------------
 1 | import Logo from '../components/logo';
 2 | import { useHalloween } from '../providers/halloween-provider';
 3 | import { Ghost, Loader } from 'lucide-react';
 4 | 
 5 | export const LoadingIndicator = () => {
 6 |     const { isHalloweenMode } = useHalloween();
 7 | 
 8 |     return (
 9 |         <div className="flex justify-center items-center mt-8">
10 |             {isHalloweenMode ? (
11 |                 <div className="flex flex-col items-center space-y-4">
12 |                     <Ghost className="w-12 h-12 text-halloween-orange animate-float" />
13 |                     <p className="text-halloween-ghost halloween-glow">Summoning your boards...</p>
14 |                 </div>
15 |             ) : (
16 |                 <div className="flex relative w-16 h-16 items-center">
17 |                     <Logo className="w-8 h-8 text-purple-500" />
18 |                     <Loader className="animate-spin ml-2" />
19 |                 </div>
20 |             )}
21 |         </div>
22 |     );
23 | };


--------------------------------------------------------------------------------
/src/components/ui/toggle.tsx:
--------------------------------------------------------------------------------
 1 | export default function ToggleSwitch({
 2 |     isToggled,
 3 |     setIsToggled,
 4 |   }: {
 5 |     isToggled: boolean
 6 |     setIsToggled: React.Dispatch<React.SetStateAction<boolean>>
 7 |   }) {
 8 |     return (
 9 |       <label className="relative inline-flex cursor-pointer items-center">
10 |         <input
11 |           type="checkbox"
12 |           onChange={(e) => {
13 |             setIsToggled(e.target.checked)
14 |           }}
15 |           checked={isToggled}
16 |           value=""
17 |           className="peer sr-only"
18 |         />
19 |         <div className="peer h-8 w-[70px] rounded-full border-2 border-border dark:border-darkBorder bg-white dark:bg-secondaryBlack after:absolute after:start-[6px] after:top-[6px] after:h-5 after:w-5 after:rounded-full after:border-2 after:border-border after:dark:border-darkBorder after:bg-white after:transition-all after:content-[''] peer-checked:bg-main peer-checked:after:translate-x-[37px] peer-focus:outline-none rtl:peer-checked:after:-translate-x-[37px]"></div>
20 |       </label>
21 |     )
22 |   }


--------------------------------------------------------------------------------
/src/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import { ClassValue } from 'clsx'
 4 | import { cn } from '../../libs/utils'
 5 | 
 6 | type Props = {
 7 |   className?: ClassValue
 8 |   children: React.ReactNode
 9 |   onClick: (event: React.MouseEvent<HTMLButtonElement>) => void
10 |   size?: 'sm' | 'default'
11 | }
12 | 
13 | export function Button({ className, children, onClick, size = 'default' }: Props) {
14 |   const sizeClasses = {
15 |     sm: 'px-2 py-1 text-xs',
16 |     default: 'px-4 py-2 text-sm'
17 |   }
18 | 
19 |   return (
20 |     <button
21 |       role="button"
22 |       aria-label="Click to perform an action"
23 |       onClick={onClick}
24 |       className={cn(
25 |         'flex text-text cursor-pointer items-center rounded-base border-2 border-border dark:border-darkBorder bg-main font-base shadow-light dark:shadow-white transition-all hover:translate-x-boxShadowX hover:translate-y-boxShadowY hover:shadow-none dark:hover:shadow-none',
26 |         sizeClasses[size],
27 |         className,
28 |       )}
29 |     >
30 |       {children}
31 |     </button>
32 |   )
33 | }


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 hamzasaleem2
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/components/halloween-switcher.tsx:
--------------------------------------------------------------------------------
 1 | import { useHalloween } from '../providers/halloween-provider';
 2 | import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip';
 3 | 
 4 | export function HalloweenSwitcher() {
 5 |   const { isHalloweenMode, toggleHalloweenMode } = useHalloween();
 6 | 
 7 |   return (
 8 |     <TooltipProvider>
 9 |       <Tooltip>
10 |         <TooltipTrigger asChild>
11 |           <button
12 |             onClick={toggleHalloweenMode}
13 |             className={`
14 |               flex items-center justify-center h-8 w-8
15 |               rounded-full border-2 transition-all
16 |               ${isHalloweenMode ? 
17 |                 'bg-halloween-orange border-halloween-purple hover:bg-halloween-purple animate-spooky-shake' : 
18 |                 'bg-white border-border hover:border-halloween-orange dark:border-darkBorder dark:bg-secondaryBlack'
19 |               }
20 |             `}
21 |           >
22 |             <span className="text-xl">{isHalloweenMode ? '🎃' : '👻'}</span>
23 |           </button>
24 |         </TooltipTrigger>
25 |         <TooltipContent>
26 |           <p>{isHalloweenMode ? 'Disable' : 'Enable'} Halloween mode</p>
27 |         </TooltipContent>
28 |       </Tooltip>
29 |     </TooltipProvider>
30 |   );
31 | }


--------------------------------------------------------------------------------
/src/authenticated/Onboarding.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect } from 'react';
 2 | import { useUser } from '@clerk/clerk-react';
 3 | import { useNavigate, useLocation } from 'react-router-dom';
 4 | import { useMutation } from 'convex/react';
 5 | import { api } from '../../convex/_generated/api';
 6 | import Logo from '../components/logo';
 7 | 
 8 | const Onboarding: React.FC = () => {
 9 |     const { user } = useUser();
10 |     const navigate = useNavigate();
11 |     const location = useLocation();
12 |     const searchParams = new URLSearchParams(location.search);
13 |     const selectedPlan = searchParams.get('plan') || 'free';
14 | 
15 |     const storePlan = useMutation(api.users.storePlan);
16 | 
17 |     useEffect(() => {
18 |         const saveUserPlan = async () => {
19 |             if (user) {
20 |                 await storePlan({ plan: selectedPlan });
21 |                 navigate('/boards');
22 |             }
23 |         };
24 | 
25 |         saveUserPlan();
26 |     }, [user, selectedPlan, storePlan, navigate]);
27 | 
28 |     return (
29 |         <div className="min-h-screen flex items-center justify-center bg-[#121212]">
30 |             <Logo className="h-16 w-16" />
31 |             <p className="text-white ml-4">Setting up your stickies...</p>
32 |         </div>
33 |     );
34 | };
35 | 
36 | export default Onboarding;


--------------------------------------------------------------------------------
/src/components/ui/tooltip.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import * as TooltipPrimitive from '@radix-ui/react-tooltip'
 4 | 
 5 | import * as React from 'react'
 6 | 
 7 | import { cn } from '../../libs/utils'
 8 | 
 9 | const TooltipProvider = TooltipPrimitive.Provider
10 | 
11 | const Tooltip = TooltipPrimitive.Root
12 | 
13 | const TooltipTrigger = TooltipPrimitive.Trigger
14 | 
15 | const TooltipContent = React.forwardRef<
16 |   React.ElementRef<typeof TooltipPrimitive.Content>,
17 |   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
18 | >(({ className, sideOffset = 4, ...props }, ref) => (
19 |   <TooltipPrimitive.Content
20 |     ref={ref}
21 |     sideOffset={sideOffset}
22 |     className={cn(
23 |       'z-50 overflow-hidden rounded-base border-2 border-border dark:border-darkBorder bg-main px-3 py-1.5 text-sm font-base text-black animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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',
24 |       className,
25 |     )}
26 |     {...props}
27 |   />
28 | ))
29 | TooltipContent.displayName = TooltipPrimitive.Content.displayName
30 | 
31 | export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }


--------------------------------------------------------------------------------
/src/auth/signin.tsx:
--------------------------------------------------------------------------------
 1 | import { SignIn } from "@clerk/clerk-react";
 2 | import Logo from "../components/logo";
 3 | import { dark } from "@clerk/themes";
 4 | import { useState, useEffect } from "react";
 5 | import posthog from "posthog-js";
 6 | 
 7 | function Signin() {
 8 |     const [isLoading, setIsLoading] = useState(true);
 9 | 
10 |     useEffect(() => {
11 |         const timer = setTimeout(() => {
12 |             setIsLoading(false);
13 |         }, 500);
14 | 
15 |         return () => clearTimeout(timer);
16 |     }, []);
17 | 
18 |     if (isLoading) {
19 |         return (
20 |             <div className="min-h-screen flex items-center justify-center bg-[#121212]">
21 |                 <Logo className="h-16 w-16" />
22 |             </div>
23 |         );
24 |     }
25 |     posthog.capture('signin page', { property: 'visit' })
26 |     return (
27 |         <div className="min-h-screen flex flex-col items-center justify-center bg-[#121212]">
28 |             <div className="p-8 rounded-lg w-full max-w-md">
29 |                 <SignIn
30 |                     appearance={{
31 |                         baseTheme: dark
32 |                     }}
33 |                     forceRedirectUrl={"/boards"}
34 |                     signUpForceRedirectUrl={"/boards"}
35 |                     signUpUrl="/signup"
36 |                 />
37 |             </div>
38 |         </div>
39 |     );
40 | }
41 | 
42 | export default Signin;


--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/tsconfig.app.tsbuildinfo:
--------------------------------------------------------------------------------
1 | {"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/auth/signin.tsx","./src/auth/signup.tsx","./src/authenticated/board.tsx","./src/authenticated/boardslist.tsx","./src/authenticated/iconbutton.tsx","./src/authenticated/note.tsx","./src/authenticated/notecontrols.tsx","./src/authenticated/onboarding.tsx","./src/authenticated/index.tsx","./src/authenticated/toolsbar/notebutton.tsx","./src/authenticated/toolsbar/index.tsx","./src/components/emptystate.tsx","./src/components/errorboundary.tsx","./src/components/errormessage.tsx","./src/components/feedbackmodal.tsx","./src/components/helpmodal.tsx","./src/components/mobilemessage.tsx","./src/components/usercursor.tsx","./src/components/userstack.tsx","./src/components/logo.tsx","./src/components/privacy.tsx","./src/components/terms.tsx","./src/components/theme-switcher.tsx","./src/components/lander/faqs.tsx","./src/components/lander/footer.tsx","./src/components/lander/hero.tsx","./src/components/lander/nav.tsx","./src/components/lander/preview.tsx","./src/components/lander/pricing-beta.tsx","./src/components/ui/accordion.tsx","./src/components/ui/avatar.tsx","./src/components/ui/button.tsx","./src/components/ui/dropdown.tsx","./src/components/ui/input.tsx","./src/components/ui/modal.tsx","./src/components/ui/toast.tsx","./src/components/ui/toggle.tsx","./src/hooks/use-toast.tsx","./src/hooks/useconvexauth.ts","./src/hooks/usepresence.ts","./src/libs/utils.ts","./src/providers/theme-provider.tsx","./src/providers/toaster.tsx"],"version":"5.6.2"}


--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom/client";
 3 | import App from "./App";
 4 | import "./index.css";
 5 | import { ConvexReactClient } from "convex/react";
 6 | import { ThemeProvider } from "./providers/theme-provider";
 7 | import { ClerkProvider, useAuth } from "@clerk/clerk-react";
 8 | import { ConvexProviderWithClerk } from "convex/react-clerk";
 9 | import { PostHogProvider } from 'posthog-js/react'
10 | import { Toaster } from "./providers/toaster";
11 | import { HalloweenProvider } from "./providers/halloween-provider";
12 | import HalloweenDecorations from "./components/halloween-decorations";
13 | 
14 | const convex = new ConvexReactClient(import.meta.env.VITE_CONVEX_URL as string);
15 | 
16 | const options = {
17 |   api_host: import.meta.env.VITE_POSTHOG_API_HOST,
18 | }
19 | 
20 | ReactDOM.createRoot(document.getElementById("root")!).render(
21 |   <React.StrictMode>
22 |     <PostHogProvider apiKey={import.meta.env.VITE_POSTHOG_KEY} options={options}>
23 |       <ClerkProvider publishableKey={import.meta.env.VITE_CLERK_PUBLISHABLE_KEY}>
24 |         <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
25 |           <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
26 |             <HalloweenProvider>
27 |               <HalloweenDecorations />
28 |               <App />
29 |               <Toaster/>
30 |             </HalloweenProvider>
31 |           </ThemeProvider>
32 |         </ConvexProviderWithClerk>
33 |       </ClerkProvider>
34 |     </PostHogProvider>
35 |   </React.StrictMode>,
36 | );


--------------------------------------------------------------------------------
/src/providers/halloween-provider.tsx:
--------------------------------------------------------------------------------
 1 | import React, { createContext, useContext, useState } from 'react';
 2 | 
 3 | interface HalloweenContextType {
 4 |     isHalloweenMode: boolean;
 5 |     toggleHalloweenMode: () => void;
 6 | }
 7 | 
 8 | const HalloweenContext = createContext<HalloweenContextType | undefined>(undefined);
 9 | 
10 | export function HalloweenProvider({ children }: { children: React.ReactNode }) {
11 |     const [isHalloweenMode, setIsHalloweenMode] = useState(() => {
12 |         const savedMode = localStorage.getItem('halloweenMode');
13 |         
14 |         if (savedMode !== null) {
15 |             return savedMode === 'true';
16 |         }
17 | 
18 |         const OCTOBER = 9;
19 |         const isOctober = new Date().getMonth() === OCTOBER;
20 |         
21 |         localStorage.setItem('halloweenMode', String(isOctober));
22 |         return isOctober;
23 |     });
24 |     const toggleHalloweenMode = () => {
25 |         setIsHalloweenMode(prev => {
26 |             const newValue = !prev;
27 |             localStorage.setItem('halloweenMode', String(newValue));
28 |             return newValue;
29 |         });
30 |     };
31 | 
32 |     return (
33 |         <HalloweenContext.Provider value={{ isHalloweenMode, toggleHalloweenMode }}>
34 |             {children}
35 |         </HalloweenContext.Provider>
36 |     );
37 | }
38 | 
39 | export const useHalloween = () => {
40 |     const context = useContext(HalloweenContext);
41 |     if (context === undefined) {
42 |         throw new Error('useHalloween must be used within a HalloweenProvider');
43 |     }
44 |     return context;
45 | };


--------------------------------------------------------------------------------
/src/hooks/useConvexAuth.ts:
--------------------------------------------------------------------------------
 1 | import { useAuth, useUser } from "@clerk/clerk-react";
 2 | import { api } from "../../convex/_generated/api";
 3 | import { useEffect, useState } from "react";
 4 | import { useMutation } from "convex/react";
 5 | 
 6 | export function useConvexAuth() {
 7 |   const { isLoaded: clerkLoaded, isSignedIn } = useAuth();
 8 |   const { user } = useUser();
 9 |   const [isLoaded, setIsLoaded] = useState(false);
10 | 
11 |   const createOrUpdateUser = useMutation(api.users.createOrUpdateUser);
12 | 
13 |   useEffect(() => {
14 |     if (!clerkLoaded) return;
15 | 
16 |     if (isSignedIn && user) {
17 |       const userName = getUserName(user);
18 |       createOrUpdateUser({
19 |         tokenIdentifier: user.id,
20 |         name: userName,
21 |         email: user.primaryEmailAddress?.emailAddress,
22 |         profileImageUrl: user.imageUrl,
23 |       }).then(() => setIsLoaded(true));
24 |     } else {
25 |       setIsLoaded(true);
26 |     }
27 |   }, [clerkLoaded, isSignedIn, user, createOrUpdateUser]);
28 | 
29 |   return {
30 |     isLoaded: isLoaded && clerkLoaded,
31 |     isAuthenticated: isSignedIn,
32 |     user: isSignedIn ? user : null,
33 |   };
34 | }
35 | 
36 | function getUserName(user: any): string {
37 |   if (user.fullName) return user.fullName;
38 |   if (user.firstName && user.lastName) return `${user.firstName} ${user.lastName}`;
39 |   if (user.firstName) return user.firstName;
40 |   if (user.username) return user.username;
41 |   if (user.emailAddresses && user.emailAddresses.length > 0) {
42 |     return user.emailAddresses[0].emailAddress.split('@')[0];
43 |   }
44 |   return "Anonymous User";
45 | }


--------------------------------------------------------------------------------
/src/auth/signup.tsx:
--------------------------------------------------------------------------------
 1 | import { SignUp } from "@clerk/clerk-react";
 2 | import Logo from "../components/logo";
 3 | import { dark } from "@clerk/themes";
 4 | import { useState, useEffect } from "react";
 5 | import { useLocation } from "react-router-dom";
 6 | 
 7 | function Signup() {
 8 |     const [isLoading, setIsLoading] = useState(true);
 9 |     const location = useLocation();
10 |     const searchParams = new URLSearchParams(location.search);
11 |     const selectedPlan = searchParams.get('plan') || 'free';
12 | 
13 |     useEffect(() => {
14 |         const timer = setTimeout(() => {
15 |             setIsLoading(false);
16 |         }, 500);
17 | 
18 |         return () => clearTimeout(timer);
19 |     }, []);
20 | 
21 |     if (isLoading) {
22 |         return (
23 |             <div className="min-h-screen flex items-center justify-center bg-[#121212]">
24 |                 <Logo className="h-16 w-16" />
25 |             </div>
26 |         );
27 |     }
28 | 
29 |     return (
30 |         <div className="min-h-screen flex flex-col items-center justify-center bg-[#121212]">
31 |             <div className="p-8 rounded-lg w-full max-w-md">
32 |                 <SignUp
33 |                     appearance={{
34 |                         baseTheme: dark
35 |                     }}
36 |                     forceRedirectUrl={`/onboarding?plan=${selectedPlan}`}
37 |                     signInForceRedirectUrl={"/boards"}
38 |                     signInUrl="/signin"
39 |                     fallbackRedirectUrl={`/onboarding?plan=${selectedPlan}`}
40 |                 />
41 |             </div>
42 |         </div>
43 |     );
44 | }
45 | 
46 | export default Signup;


--------------------------------------------------------------------------------
/convex/boardSharing.ts:
--------------------------------------------------------------------------------
 1 | import { mutation, query } from "./_generated/server";
 2 | import { v } from "convex/values";
 3 | 
 4 | export const shareBoard = mutation({
 5 |   args: { boardId: v.id("boards") },
 6 |   handler: async (ctx, args) => {
 7 |     const board = await ctx.db.get(args.boardId);
 8 |     if (!board) throw new Error("Board not found");
 9 | 
10 |     if (board.isShared && board.shareCode) {
11 |       return board.shareCode;
12 |     }
13 | 
14 |     const shareCode = Math.random().toString(36).substring(2, 8).toUpperCase();
15 |     await ctx.db.patch(args.boardId, { isShared: true, shareCode });
16 |     return shareCode;
17 |   },
18 | });
19 | 
20 |   export const getSharedBoardId = query({
21 |     args: { shareCode: v.string() },
22 |     handler: async (ctx, args) => {
23 |       const board = await ctx.db
24 |         .query("boards")
25 |         .withIndex("by_shareCode", (q) => q.eq("shareCode", args.shareCode))
26 |         .first();
27 |       return board && board.isShared ? board._id : null;
28 |     },
29 |   });
30 | 
31 |   export const toggleBoardSharing = mutation({
32 |     args: { boardId: v.id("boards") },
33 |     handler: async (ctx, args) => {
34 |       const board = await ctx.db.get(args.boardId);
35 |       if (!board) throw new Error("Board not found");
36 |   
37 |       const isShared = !board.isShared;
38 |       await ctx.db.patch(args.boardId, { isShared });
39 |   
40 |       if (!isShared) {
41 |         await ctx.db.patch(args.boardId, { shareCode: undefined });
42 |       } else if (!board.shareCode) {
43 |         const shareCode = Math.random().toString(36).substring(2, 8).toUpperCase();
44 |         await ctx.db.patch(args.boardId, { shareCode });
45 |       }
46 |   
47 |       return isShared;
48 |     },
49 |   });


--------------------------------------------------------------------------------
/src/authenticated/IconButton.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | 
 3 | type Props = {
 4 |   onClick: () => void;
 5 |   children: React.ReactNode;
 6 |   isActive?: boolean;
 7 |   disabled?: boolean;
 8 |   tooltip: string;
 9 | };
10 | 
11 | export default function IconButton({
12 |   onClick,
13 |   children,
14 |   isActive,
15 |   disabled,
16 |   tooltip,
17 | }: Props) {
18 |   const [showTooltip, setShowTooltip] = useState(false);
19 | 
20 |   return (
21 |     <div className="relative group">
22 |       <button
23 |         className={`
24 |           w-12 h-12 relative
25 |           flex items-center justify-center
26 |           rounded-full
27 |           ${isActive
28 |             ? 'bg-main text-text'
29 |             : 'bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300'
30 |           }
31 |           ${disabled
32 |             ? 'opacity-50 cursor-default'
33 |             : 'hover:bg-main hover:text-text transition-all duration-200'
34 |           }
35 |           focus:outline-none
36 |           shadow-md hover:shadow-lg transform hover:-translate-y-1
37 |           border-2 border-transparent hover:border-text
38 |           ${isActive ? 'cursor-pointer' : ''}
39 |         `}
40 |         onClick={onClick}
41 |         disabled={disabled}
42 |         onMouseEnter={() => setShowTooltip(true)}
43 |         onMouseLeave={() => setShowTooltip(false)}
44 |       >
45 |         <div className="relative z-10">
46 |           {children}
47 |         </div>
48 |       </button>
49 |       {showTooltip && (
50 |         <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 bg-text text-white text-xs rounded whitespace-nowrap">
51 |           {tooltip}
52 |         </div>
53 |       )}
54 |     </div>
55 |   );
56 | }


--------------------------------------------------------------------------------
/src/components/UserCursor.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from 'react';
 2 | export const COLORS = ["#DC2626", "#D97706", "#059669", "#7C3AED", "#DB2777", "#2563EB", "#7C3AED", "#C026D3", "#059669", "#CA8A04"];
 3 | 
 4 | interface UserCursorProps {
 5 |   position: { x: number; y: number };
 6 |   color: string;
 7 |   name: string;
 8 | }
 9 | 
10 | 
11 | const UserCursor: React.FC<UserCursorProps> = ({ position, color, name }) => {
12 |   const [currentPosition, setCurrentPosition] = useState(position);
13 | 
14 |   useEffect(() => {
15 |     const animationDuration = 500;
16 |     const startTime = Date.now();
17 |     const startPosition = { ...currentPosition };
18 | 
19 |     const animate = () => {
20 |       const now = Date.now();
21 |       const progress = Math.min((now - startTime) / animationDuration, 1);
22 |       
23 |       setCurrentPosition({
24 |         x: startPosition.x + (position.x - startPosition.x) * progress,
25 |         y: startPosition.y + (position.y - startPosition.y) * progress,
26 |       });
27 | 
28 |       if (progress < 1) {
29 |         requestAnimationFrame(animate);
30 |       }
31 |     };
32 | 
33 |     requestAnimationFrame(animate);
34 |   }, [position]);
35 | 
36 |   return (
37 |     <div style={{
38 |       position: 'absolute',
39 |       left: currentPosition.x,
40 |       top: currentPosition.y,
41 |       pointerEvents: 'none',
42 |       zIndex: 1000,
43 |       transition: 'transform 0.1s linear',
44 |     }}>
45 |       <svg width="36" height="36" viewBox="0 0 36 36" fill="none">
46 |         <path d="M13 26V9L25 21.1428H18.2189L13 26Z" fill={color} />
47 |       </svg>
48 |       <span style={{
49 |         backgroundColor: color,
50 |         color: 'white',
51 |         padding: '2px 4px',
52 |         borderRadius: '4px',
53 |         fontSize: '12px',
54 |         marginLeft: '4px',
55 |       }}>
56 |         {name}
57 |       </span>
58 |     </div>
59 |   );
60 | };
61 | 
62 | export default UserCursor;


--------------------------------------------------------------------------------
/convex/emails.ts:
--------------------------------------------------------------------------------
 1 | "use node";
 2 | 
 3 | import { internalAction } from "./_generated/server";
 4 | import { v } from "convex/values";
 5 | import { Resend as ResendAPI } from "resend";
 6 | import { WelcomeEmail } from "./welcomeEmail";
 7 | import { internal } from "./_generated/api";
 8 | 
 9 | const resend = new ResendAPI(process.env.RESEND_API_KEY);
10 | 
11 | export const sendWelcomeEmail = internalAction({
12 |     args: {
13 |         userId: v.id("users"),
14 |         email: v.string(),
15 |         name: v.string()
16 |     },
17 |     handler: async (ctx, args) => {
18 |         const { userId, email, name } = args;
19 | 
20 |         // Check if welcome email has already been sent
21 |         const IsSent = await ctx.runQuery(internal.users.existingLogforEmail, { userId })
22 | 
23 |         if (IsSent) {
24 |             return false;
25 |         }
26 | 
27 |         try {
28 |             await resend.emails.send({
29 |                 from: 'Sticky.today <welcome@sticky.today>',
30 |                 to: email,
31 |                 subject: 'Welcome to Sticky - Let\'s make your ideas stick!',
32 |                 react: WelcomeEmail({ name: name }),
33 |                 text: `
34 |                     Welcome to Sticky, ${name}!
35 | 
36 |                     Ideas that stick, literally! 😉
37 | 
38 |                     You've just found the duct tape for your brain!
39 | 
40 |                     Get started: https://www.sticky.today/boards
41 | 
42 |                     Need help? Visit your Board and use the ? button to ask.
43 | 
44 |                     Best,
45 |                     The Sticky team
46 |                     `.trim()
47 |             });
48 | 
49 | 
50 |             // Log the sent email
51 |             await ctx.runMutation(internal.users.LogEmailSend, {
52 |                 userId: userId,
53 |                 type: "welcome"
54 |             })
55 | 
56 |         } catch (error) {
57 |             console.error(`Failed to send welcome email to user ${userId}:`, error);
58 |         }
59 |     },
60 | });


--------------------------------------------------------------------------------
/convex/_generated/dataModel.d.ts:
--------------------------------------------------------------------------------
 1 | /* prettier-ignore-start */
 2 | 
 3 | /* eslint-disable */
 4 | /**
 5 |  * Generated data model types.
 6 |  *
 7 |  * THIS CODE IS AUTOMATICALLY GENERATED.
 8 |  *
 9 |  * To regenerate, run `npx convex dev`.
10 |  * @module
11 |  */
12 | 
13 | import type {
14 |   DataModelFromSchemaDefinition,
15 |   DocumentByName,
16 |   TableNamesInDataModel,
17 |   SystemTableNames,
18 | } from "convex/server";
19 | import type { GenericId } from "convex/values";
20 | import schema from "../schema.js";
21 | 
22 | /**
23 |  * The names of all of your Convex tables.
24 |  */
25 | export type TableNames = TableNamesInDataModel<DataModel>;
26 | 
27 | /**
28 |  * The type of a document stored in Convex.
29 |  *
30 |  * @typeParam TableName - A string literal type of the table name (like "users").
31 |  */
32 | export type Doc<TableName extends TableNames> = DocumentByName<
33 |   DataModel,
34 |   TableName
35 | >;
36 | 
37 | /**
38 |  * An identifier for a document in Convex.
39 |  *
40 |  * Convex documents are uniquely identified by their `Id`, which is accessible
41 |  * on the `_id` field. To learn more, see [Document IDs](https://docs.convex.dev/using/document-ids).
42 |  *
43 |  * Documents can be loaded using `db.get(id)` in query and mutation functions.
44 |  *
45 |  * IDs are just strings at runtime, but this type can be used to distinguish them from other
46 |  * strings when type checking.
47 |  *
48 |  * @typeParam TableName - A string literal type of the table name (like "users").
49 |  */
50 | export type Id<TableName extends TableNames | SystemTableNames> =
51 |   GenericId<TableName>;
52 | 
53 | /**
54 |  * A type describing your Convex data model.
55 |  *
56 |  * This type includes information about what tables you have, the type of
57 |  * documents stored in those tables, and the indexes defined on them.
58 |  *
59 |  * This type is used to parameterize methods like `queryGeneric` and
60 |  * `mutationGeneric` to make them type-safe.
61 |  */
62 | export type DataModel = DataModelFromSchemaDefinition<typeof schema>;
63 | 
64 | /* prettier-ignore-end */
65 | 


--------------------------------------------------------------------------------
/src/components/lander/footer.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import Logo from '../logo';
 3 | import { ThemeSwitcher } from '../theme-switcher';
 4 | import { Link } from 'react-router-dom';
 5 | import { HalloweenSwitcher } from '../halloween-switcher';
 6 | import { useHalloween } from '../../providers/halloween-provider';
 7 | 
 8 | const Footer: React.FC = () => {
 9 |   const { isHalloweenMode } = useHalloween();
10 | 
11 |   return (
12 |     <footer className={`${
13 |       isHalloweenMode 
14 |         ? 'bg-halloween-black/90 text-halloween-ghost' 
15 |         : 'bg-white dark:bg-secondaryBlack text-text dark:text-text-dark'
16 |     }`}>
17 |       <div className="max-w-6xl mx-auto px-4 py-8">
18 |         <div className="flex flex-col sm:flex-row justify-between items-center">
19 |           <div className="flex items-center mb-4 sm:mb-0">
20 |             <Logo className={`h-8 w-8 mr-2 ${isHalloweenMode ? 'animate-spooky-shake' : ''}`} />
21 |             <span className={`text-xl font-bold ${
22 |               isHalloweenMode ? 'text-halloween-orange' : ''
23 |             }`}>Sticky</span>
24 |           </div>
25 |           <div className="flex items-center space-x-4">
26 |             <Link to="/terms" className={`text-sm sm:text-base transition-colors ${
27 |               isHalloweenMode ? 'hover:text-halloween-orange' : 'hover:text-main'
28 |             }`}>Terms</Link>
29 |             <Link to="/privacy" className={`text-sm sm:text-base transition-colors ${
30 |               isHalloweenMode ? 'hover:text-halloween-orange' : 'hover:text-main'
31 |             }`}>Privacy</Link>
32 |             <ThemeSwitcher />
33 |             <HalloweenSwitcher />
34 |           </div>
35 |         </div>
36 |         <div className={`mt-4 text-center text-xs sm:text-sm ${
37 |           isHalloweenMode ? 'text-halloween-ghost/80' : ''
38 |         }`}>
39 |           &copy; {new Date().getUTCFullYear()} Sticky. {isHalloweenMode ? 'All souls reserved.' : 'All rights reserved.'}
40 |         </div>
41 |       </div>
42 |     </footer>
43 |   );
44 | };
45 | 
46 | export default Footer;


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | export default {
 3 |   content: ["./src/**/*.{html,js,jsx,ts,tsx,mdx}"],
 4 |   theme: {
 5 |     extend: {
 6 |       colors: {
 7 |         main: '#FFDC58',
 8 |         mainAccent: '#ffc800',
 9 |         overlay: 'rgba(0,0,0,0.8)',
10 |   
11 |         // light mode
12 |         bg: '#FEF2E8',
13 |         text: '#1f1f1f',
14 |         border: '#000',
15 |   
16 |         // dark mode
17 |         darkBg: '#1f1f1f',
18 |         darkText: '#eeefe9',
19 |         darkBorder: '#000',
20 |         secondaryBlack: '#1b1b1b',
21 | 
22 |         text: {
23 |           DEFAULT: '#1f1f1f',
24 |           dark: '#eeefe9',
25 |         },
26 |         halloween: {
27 |           orange: '#FF6B1A',
28 |           purple: '#6B1AFF',
29 |           green: '#4CAF50',
30 |           black: '#1a1a1a',
31 |           ghost: 'rgba(255, 255, 255, 0.9)',
32 |         },
33 |       },
34 |       keyframes: {
35 |         float: {
36 |           '0%, 100%': { transform: 'translateY(0)' },
37 |           '50%': { transform: 'translateY(-20px)' },
38 |         },
39 |         spookyShake: {
40 |           '0%, 100%': { transform: 'rotate(0deg)' },
41 |           '25%': { transform: 'rotate(-5deg)' },
42 |           '75%': { transform: 'rotate(5deg)' },
43 |         },
44 |       },
45 |       animation: {
46 |         'float': 'float 6s ease-in-out infinite',
47 |         'spooky-shake': 'spookyShake 2s ease-in-out infinite',
48 |       },
49 |       borderRadius: {
50 |         base: '20px'
51 |       },
52 |       boxShadow: {
53 |         light: '3px 3px 0px 0px #000',
54 |         dark: '3px 3px 0px 0px #000',
55 |         white: '3px 3px 0px 0px #fff',
56 |       },
57 |       translate: {
58 |         boxShadowX: '3px',
59 |         boxShadowY: '3px',
60 |         reverseBoxShadowX: '-3px',
61 |         reverseBoxShadowY: '-3px',
62 |       },
63 |       fontWeight: {
64 |         base: '500',
65 |         heading: '800',
66 |       },
67 |       minHeight: {
68 |         screen: '100vh',
69 |       },
70 |     },
71 |   },
72 |   darkMode: 'class',
73 |   plugins: [],
74 | }
75 | 
76 | 


--------------------------------------------------------------------------------
/src/hooks/usePresence.ts:
--------------------------------------------------------------------------------
 1 | import { useQuery, useMutation } from "convex/react";
 2 | import { api } from "../../convex/_generated/api";
 3 | import { useEffect, useCallback, useRef, useState } from "react";
 4 | import { Id } from "../../convex/_generated/dataModel";
 5 | import debounce from 'lodash.debounce';
 6 | 
 7 | const PRESENCE_UPDATE_INTERVAL = 100;
 8 | const HEARTBEAT_INTERVAL = 30000;
 9 | 
10 | export function usePresence(boardId: Id<"boards">, isShared: boolean) {
11 |   const updatePresence = useMutation(api.presence.updatePresence);
12 |   const removePresence = useMutation(api.presence.removePresence);
13 |   const activeUsers = useQuery(api.presence.getActiveUsers, { boardId });
14 |   const cursorPositionRef = useRef({ x: 0, y: 0 });
15 |   const [localCursorPosition, setLocalCursorPosition] = useState({ x: 0, y: 0 });
16 | 
17 |   const debouncedUpdatePresence = useCallback(
18 |     debounce((position: { x: number; y: number }) => {
19 |       if (isShared) {
20 |         updatePresence({
21 |           boardId,
22 |           cursorPosition: position,
23 |           isHeartbeat: false
24 |         });
25 |       }
26 |     }, PRESENCE_UPDATE_INTERVAL, { maxWait: PRESENCE_UPDATE_INTERVAL * 2 }),
27 |     [boardId, updatePresence, isShared]
28 |   );
29 | 
30 |   const updateCursorPosition = useCallback((position: { x: number; y: number }) => {
31 |     cursorPositionRef.current = position;
32 |     setLocalCursorPosition(position);
33 |     if (isShared) {
34 |       debouncedUpdatePresence(position);
35 |     }
36 |   }, [debouncedUpdatePresence, isShared]);
37 | 
38 |   useEffect(() => {
39 |     if (!isShared) return;
40 | 
41 |     const heartbeatInterval = setInterval(() => {
42 |       updatePresence({
43 |         boardId,
44 |         cursorPosition: cursorPositionRef.current,
45 |         isHeartbeat: true
46 |       });
47 |     }, HEARTBEAT_INTERVAL);
48 |   
49 |     return () => {
50 |       clearInterval(heartbeatInterval);
51 |       removePresence({ boardId });
52 |     };
53 |   }, [boardId, updatePresence, removePresence, isShared]);
54 | 
55 |   return {
56 |     activeUsers: isShared ? activeUsers : [],
57 |     updateCursorPosition,
58 |     localCursorPosition
59 |   };
60 | }


--------------------------------------------------------------------------------
/convex/schema.ts:
--------------------------------------------------------------------------------
 1 | import { defineSchema, defineTable } from "convex/server";
 2 | import { v } from "convex/values";
 3 | 
 4 | export default defineSchema({
 5 |   users: defineTable({
 6 |     name: v.string(),
 7 |     email: v.optional(v.string()),
 8 |     profileImageUrl: v.optional(v.string()),
 9 |     tokenIdentifier: v.string(),
10 |     plan: v.optional(v.string()),
11 |     onBoarding: v.optional(v.boolean())
12 |   }).index("by_token", ["tokenIdentifier"]),
13 | 
14 |   boards: defineTable({
15 |     name: v.string(),
16 |     ownerId: v.id("users"),
17 |     isShared: v.boolean(),
18 |     shareCode: v.optional(v.string()),
19 |     notesCount: v.optional(v.number()),
20 |     inTrash: v.boolean(),
21 |     _creationTime: v.number(),
22 |     lastModified: v.number(),
23 |   })
24 |     .index("by_owner", ["ownerId"])
25 |     .index("by_owner_and_modified", ["ownerId", "lastModified"])
26 |     .index("by_owner_and_name", ["ownerId", "name"])
27 |     .index("by_owner_and_notes", ["ownerId", "notesCount"])
28 |     .index("by_shareCode", ["shareCode"])
29 |     .searchIndex("search_name", {
30 |       searchField: "name",
31 |       filterFields: ["ownerId", "inTrash"]
32 |     }),
33 | 
34 |   notes: defineTable({
35 |     boardId: v.id("boards"),
36 |     content: v.string(),
37 |     color: v.string(),
38 |     position: v.object({
39 |       x: v.number(),
40 |       y: v.number(),
41 |     }),
42 |     size: v.object({
43 |       width: v.number(),
44 |       height: v.number(),
45 |     }),
46 |     zIndex: v.optional(v.number()),
47 |   }).index("by_board", ["boardId"]),
48 | 
49 |   presence: defineTable({
50 |     userId: v.id("users"),
51 |     boardId: v.id("boards"),
52 |     lastUpdated: v.number(),
53 |     cursorPosition: v.object({
54 |       x: v.number(),
55 |       y: v.number()
56 |     }),
57 |   }).index("by_board", ["boardId"])
58 |     .index("by_user_and_board", ["userId", "boardId"])
59 |     .index("by_board_and_lastUpdated", ["boardId", "lastUpdated"]),
60 | 
61 |   supportRequest: defineTable({
62 |     userId: v.id("users"),
63 |     input: v.string()
64 |   }),
65 | 
66 |   emailLogs: defineTable({
67 |     userId: v.id("users"),
68 |     type: v.string(),
69 |     sentAt: v.number(),
70 |   }).index("by_user_and_type", ["userId", "type"]),
71 | });


--------------------------------------------------------------------------------
/src/components/halloween-decorations.tsx:
--------------------------------------------------------------------------------
 1 | import { useHalloween } from '../providers/halloween-provider';
 2 | 
 3 | const HalloweenDecorations = () => {
 4 |     const { isHalloweenMode } = useHalloween();
 5 | 
 6 |     if (!isHalloweenMode) return null;
 7 | 
 8 |     const decorations = [
 9 |         { emoji: '👻', position: 'top-20 left-10', delay: 'delay-0' },
10 |         { emoji: '🎃', position: 'top-40 right-20', delay: 'delay-1000' },
11 |         { emoji: '🦇', position: 'bottom-20 left-30', delay: 'delay-2000' },
12 |         { emoji: '💀', position: 'bottom-40 right-30', delay: 'delay-3000' },
13 |         { emoji: '🕸️', position: 'top-60 left-1/4', delay: 'delay-4000' },
14 |         { emoji: '🕯️', position: 'bottom-60 right-1/4', delay: 'delay-5000' },
15 |     ];
16 | 
17 |     if (location.pathname.includes('/board')) {
18 |         return (
19 |             <>
20 |                 <div className="fixed inset-0 pointer-events-none z-50 overflow-hidden">
21 |                     <div className="absolute inset-0 bg-gradient-to-r from-transparent via-halloween-ghost to-transparent opacity-20 animate-fog-roll" />
22 |                     <div className="absolute inset-0 bg-gradient-to-b from-halloween-purple/10 to-transparent mix-blend-overlay" />
23 |                 </div>
24 |             </>
25 |         );
26 |     }
27 | 
28 |     return (
29 |         <>
30 |             <div className="fixed inset-0 pointer-events-none z-50 overflow-hidden">
31 |                 {decorations.map((decoration, index) => (
32 |                     <div key={index} className={`ghost-container ${decoration.position}`}>
33 |                         <div className={`animate-float ${decoration.delay} text-4xl opacity-60 hover:opacity-100 transition-opacity`}>
34 |                             {decoration.emoji}
35 |                         </div>
36 |                     </div>
37 |                 ))}
38 | 
39 |                 <div className="absolute inset-0 bg-gradient-to-r from-transparent via-halloween-ghost to-transparent opacity-20 animate-fog-roll" />
40 |                 <div className="absolute inset-0 bg-gradient-to-b from-halloween-purple/10 to-transparent mix-blend-overlay" />
41 |             </div>
42 |         </>
43 |     );
44 | };
45 | 
46 | export default HalloweenDecorations;


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "sticky",
 3 |   "private": false,
 4 |   "version": "0.2.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "tsc -b && vite build",
 9 |     "lint": "eslint .",
10 |     "preview": "vite preview"
11 |   },
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "https://github.com/hamzasaleem2/sticky"
15 |   },
16 |   "keywords": [
17 |     "sticky-notes",
18 |     "collaboration",
19 |     "organization",
20 |     "react",
21 |     "typescript",
22 |     "convex.dev"
23 |   ],
24 |   "author": "Hamza Saleem",
25 |   "license": "MIT",
26 |   "bugs": {
27 |     "url": "https://github.com/hamzasaleem2/sticky/issues"
28 |   },
29 |   "homepage": "https://github.com/hamzasaleem2/sticky#readme",
30 |   "dependencies": {
31 |     "@clerk/clerk-react": "^5.11.0",
32 |     "@clerk/themes": "^2.1.35",
33 |     "@convex-dev/aggregate": "^0.1.14",
34 |     "@radix-ui/react-toast": "^1.2.2",
35 |     "@radix-ui/react-tooltip": "^1.1.3",
36 |     "@react-email/components": "^0.0.41",
37 |     "@types/lodash.debounce": "^4.0.9",
38 |     "@types/react-lazy-load-image-component": "^1.6.4",
39 |     "class-variance-authority": "^0.7.0",
40 |     "clsx": "^2.1.1",
41 |     "convex": "^1.20.0",
42 |     "convex-helpers": "^0.1.60",
43 |     "lodash.debounce": "^4.0.8",
44 |     "lucide-react": "^0.447.0",
45 |     "next-themes": "^0.3.0",
46 |     "posthog-js": "^1.180.0",
47 |     "react": "^18.3.1",
48 |     "react-dom": "^18.3.1",
49 |     "react-lazy-load-image-component": "^1.6.2",
50 |     "react-router-dom": "^6.26.2",
51 |     "resend": "^4.0.0",
52 |     "tailwind-merge": "^2.5.2",
53 |     "use-image": "^1.1.1"
54 |   },
55 |   "devDependencies": {
56 |     "@eslint/js": "^9.9.0",
57 |     "@types/node": "^22.7.4",
58 |     "@types/react": "^18.3.3",
59 |     "@types/react-dom": "^18.3.0",
60 |     "@types/uuid": "^10.0.0",
61 |     "@vitejs/plugin-react": "^4.3.4",
62 |     "autoprefixer": "^10.4.20",
63 |     "eslint": "^9.9.0",
64 |     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
65 |     "eslint-plugin-react-refresh": "^0.4.9",
66 |     "globals": "^15.9.0",
67 |     "postcss": "^8.4.47",
68 |     "tailwindcss": "^3.4.13",
69 |     "typescript": "^5.5.3",
70 |     "typescript-eslint": "^8.0.1",
71 |     "vite": "^6.3.5"
72 |   }
73 | }
74 | 


--------------------------------------------------------------------------------
/src/components/ui/modal.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import { X } from 'lucide-react'
 4 | import ReactDom from 'react-dom'
 5 | 
 6 | import React, { useEffect, useState } from 'react'
 7 | 
 8 | type Props = {
 9 |   active: boolean
10 |   setActive: React.Dispatch<React.SetStateAction<boolean>>
11 |   children: React.ReactNode
12 | }
13 | 
14 | export default function Modal({ active, setActive, children }: Props) {
15 |   const [isVisible, setIsVisible] = useState(false)
16 | 
17 |   const closeModal = () => {
18 |     setIsVisible(false)
19 |     setTimeout(() => {
20 |       setActive(false)
21 |     }, 300)
22 |   }
23 | 
24 |   useEffect(() => {
25 |     if (active) {
26 |       setIsVisible(true)
27 |     }
28 |   }, [active])
29 | 
30 |   if (!active) return null
31 | 
32 |   return ReactDom.createPortal(
33 |     <div
34 |       role="dialog"
35 |       aria-modal="true"
36 |       data-visible={isVisible ? 'true' : 'false'}
37 |       onClick={closeModal}
38 |       className="fixed text-text left-0 top-0 z-50 flex h-screen w-screen items-center justify-center data-[visible=true]:opacity-100 data-[visible=true]:visible data-[visible=false]:opacity-0 data-[visible=false]:invisible transition-all duration-300 bg-overlay"
39 |     >
40 |       <div
41 |         onClick={(e) => e.stopPropagation()}
42 |         className="relative flex w-[300px] group-data-[visible=true]:opacity-100 group-data-[visible=true]:visible group-data-[visible=false]:opacity-0 group-data-[visible=false]:invisible flex-col items-center justify-center rounded-base border-2 border-border dark:border-darkBorder bg-white dark:bg-darkBg p-10 text-text dark:text-darkText pt-12 font-base shadow-light dark:shadow-dark transition-all duration-300"
43 |       >
44 |         <button onClick={closeModal}>
45 |           <X className="absolute right-3 top-3 h-6 w-6" />
46 |         </button>
47 |         {children}
48 |         <button
49 |           className="mt-5 cursor-pointer rounded-base border-2 text-text border-border dark:border-darkBorder bg-main px-4 py-1.5 font-base shadow-light dark:shadow-dark transition-all hover:translate-x-boxShadowX hover:translate-y-boxShadowY hover:shadow-none dark:hover:shadow-none"
50 |           onClick={closeModal}
51 |         >
52 |           Ok
53 |         </button>
54 |       </div>
55 |     </div>,
56 |     document.getElementById('modal') as HTMLElement,
57 |   )
58 | }


--------------------------------------------------------------------------------
/convex/notes.ts:
--------------------------------------------------------------------------------
 1 | import { mutation, query } from "./_generated/server";
 2 | import { v } from "convex/values";
 3 | import { internal } from "./_generated/api";
 4 | 
 5 | export const createNote = mutation({
 6 |   args: {
 7 |     boardId: v.id("boards"),
 8 |     content: v.string(),
 9 |     color: v.string(),
10 |     position: v.object({
11 |       x: v.number(),
12 |       y: v.number(),
13 |     }),
14 |     size: v.object({
15 |       width: v.number(),
16 |       height: v.number(),
17 |     }),
18 |     zIndex: v.number(),
19 |   },
20 |   handler: async (ctx, args) => {
21 |     const noteId = await ctx.db.insert("notes", args);
22 |     await ctx.runMutation(internal.boards.updateNotesCount, { boardId: args.boardId, increment: 1 });
23 |     await ctx.db.patch(args.boardId, { lastModified: Date.now() });
24 |     return noteId;
25 |   },
26 | });
27 | 
28 | export const updateNote = mutation({
29 |   args: {
30 |     noteId: v.id("notes"),
31 |     content: v.optional(v.string()),
32 |     color: v.optional(v.string()),
33 |     position: v.optional(v.object({
34 |       x: v.number(),
35 |       y: v.number(),
36 |     })),
37 |     size: v.optional(v.object({
38 |       width: v.number(),
39 |       height: v.number(),
40 |     })),
41 |     zIndex: v.optional(v.number()),
42 |   },
43 |   handler: async (ctx, args) => {
44 |     const { noteId, ...updates } = args;
45 |     const note = await ctx.db.get(noteId);
46 |     if (!note) throw new Error("Note not found");
47 | 
48 |     await ctx.db.patch(noteId, updates);
49 |     
50 |     await ctx.db.patch(note.boardId, { lastModified: Date.now() });
51 |   },
52 | });
53 | 
54 | export const deleteNote = mutation({
55 |   args: { noteId: v.id("notes") },
56 |   handler: async (ctx, args) => {
57 |     const note = await ctx.db.get(args.noteId);
58 |     if (!note) throw new Error("Note not found");
59 |     
60 |     await ctx.db.delete(args.noteId);
61 |     await ctx.runMutation(internal.boards.updateNotesCount, { boardId: note.boardId, increment: -1 });
62 |     await ctx.db.patch(note.boardId, { lastModified: Date.now() });
63 |   },
64 | });
65 | 
66 | export const getNotes = query({
67 |   args: { boardId: v.id("boards") },
68 |   handler: async (ctx, args) => {
69 |     return await ctx.db
70 |       .query("notes")
71 |       .withIndex("by_board", (q) => q.eq("boardId", args.boardId))
72 |       .collect();
73 |   },
74 | });


--------------------------------------------------------------------------------
/src/components/privacy.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | const PrivacyPolicy: React.FC = () => {
 4 |   return (
 5 |     <div className="min-h-screen bg-white dark:bg-darkBg text-text dark:text-text-dark p-8 mt-20">
 6 |       <div className="max-w-3xl mx-auto">
 7 |         <h1 className="text-4xl font-bold mb-8">Privacy Policy</h1>
 8 |         <div className="space-y-6">
 9 |           <section>
10 |             <h2 className="text-2xl font-semibold mb-4">1. Sticky Notes, Not Sticky Situations</h2>
11 |             <p>At Sticky, we're all about keeping your ideas organized, not your personal data. We promise to treat your information with the same care you'd give to your most precious sticky note collection.</p>
12 |           </section>
13 |           <section>
14 |             <h2 className="text-2xl font-semibold mb-4">2. Data We Collect (It's Not Much, We Promise)</h2>
15 |             <p>We only collect what we need to make Sticky work for you. This includes your email, your brilliant ideas (in sticky note form), and occasionally, the number of times you've procrastinated by rearranging your virtual sticky notes.</p>
16 |           </section>
17 |           <section>
18 |             <h2 className="text-2xl font-semibold mb-4">3. How We Use Your Data</h2>
19 |             <p>We use your data to make Sticky better, not to sell you things you don't need. Your sticky notes are for your eyes only (unless you choose to share them, of course).</p>
20 |           </section>
21 |           <section>
22 |             <h2 className="text-2xl font-semibold mb-4">4. Security: Fort Knox, but for Sticky Notes</h2>
23 |             <p>We protect your data like it's the last piece of cake at an office party. Our security measures are top-notch, because we know your ideas are priceless.</p>
24 |           </section>
25 |           <section>
26 |             <h2 className="text-2xl font-semibold mb-4">5. Your Rights (Yes, You Have Them!)</h2>
27 |             <p>You have the right to access, correct, or delete your data at any time. Just like you can peel off a sticky note, you can remove your data from our systems.</p>
28 |           </section>
29 |           <section>
30 |             <h2 className="text-2xl font-semibold mb-4">6. Changes to This Policy</h2>
31 |             <p>We may update this policy occasionally, but we promise not to do it as often as you change the color of your sticky notes. We'll notify you of any significant changes.</p>
32 |           </section>
33 |         </div>
34 |       </div>
35 |     </div>
36 |   );
37 | };
38 | 
39 | export default PrivacyPolicy;


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
  1 | @tailwind base;
  2 | @tailwind components;
  3 | @tailwind utilities;
  4 | 
  5 | @layer components {
  6 |     .halloween-bg {
  7 |         background: linear-gradient(to bottom, #1a1a1a, #2d1b3d);
  8 |         background-size: 400% 400%;
  9 |         animation: gradient 15s ease infinite;
 10 |     }
 11 | 
 12 |     .spooky-text {
 13 |         text-shadow: 0 0 10px #FF6B1A, 0 0 20px #FF6B1A, 0 0 30px #FF6B1A;
 14 |     }
 15 | 
 16 |     .ghost-container {
 17 |         position: fixed;
 18 |         pointer-events: none;
 19 |         z-index: 50;
 20 |     }
 21 | 
 22 |     .floating-ghost {
 23 |         animation: float 6s ease-in-out infinite;
 24 |         opacity: 0.6;
 25 |     }
 26 | 
 27 |     .halloween-glow {
 28 |         animation: glow 2s ease-in-out infinite alternate;
 29 |     }
 30 | 
 31 |     .spooky-hover {
 32 |         transition: all 0.3s ease;
 33 |     }
 34 | 
 35 |     .spooky-hover:hover {
 36 |         transform: scale(1.05) rotate(2deg);
 37 |         filter: brightness(1.2);
 38 |     }
 39 | }
 40 | 
 41 | @keyframes glow {
 42 |     from {
 43 |         text-shadow: 0 0 5px #FF6B1A, 0 0 10px #FF6B1A, 0 0 15px #FF6B1A;
 44 |     }
 45 |     to {
 46 |         text-shadow: 0 0 10px #FF6B1A, 0 0 20px #FF6B1A, 0 0 30px #FF6B1A;
 47 |     }
 48 | }
 49 | 
 50 | @keyframes gradient {
 51 |     0% {
 52 |         background-position: 0% 50%;
 53 |     }
 54 | 
 55 |     50% {
 56 |         background-position: 100% 50%;
 57 |     }
 58 | 
 59 |     100% {
 60 |         background-position: 0% 50%;
 61 |     }
 62 | }
 63 | 
 64 | @keyframes glow {
 65 |     from {
 66 |         text-shadow: 0 0 5px #FF6B1A, 0 0 10px #FF6B1A, 0 0 15px #FF6B1A;
 67 |     }
 68 |     to {
 69 |         text-shadow: 0 0 10px #FF6B1A, 0 0 20px #FF6B1A, 0 0 30px #FF6B1A;
 70 |     }
 71 | }
 72 | 
 73 | @keyframes spookyShake {
 74 |     0%, 100% { transform: translate(0, 0) rotate(0deg); }
 75 |     25% { transform: translate(2px, 2px) rotate(2deg); }
 76 |     50% { transform: translate(0, -2px) rotate(-2deg); }
 77 |     75% { transform: translate(-2px, 2px) rotate(2deg); }
 78 | }
 79 | 
 80 | @keyframes fog {
 81 |     0% { transform: translateX(-100%); }
 82 |     100% { transform: translateX(100%); }
 83 | }
 84 | 
 85 | @keyframes flicker {
 86 |     0%, 100% { opacity: 1; }
 87 |     50% { opacity: 0.7; }
 88 | }
 89 | 
 90 | .halloween-card-hover {
 91 |     transition: all 0.3s ease;
 92 | }
 93 | 
 94 | .halloween-card-hover:hover {
 95 |     transform: translateY(-5px) rotate(2deg);
 96 |     box-shadow: 0 10px 20px rgba(255, 107, 26, 0.2);
 97 | }
 98 | 
 99 | .spooky-text-shadow {
100 |     text-shadow: 2px 2px 4px rgba(255, 107, 26, 0.5);
101 | }


--------------------------------------------------------------------------------
/src/components/HelpModal.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useCallback } from 'react';
 2 | import Modal from './ui/modal';
 3 | import { Button } from './ui/button';
 4 | import Input from './ui/input';
 5 | import { useMutation } from 'convex/react';
 6 | import { api } from '../../convex/_generated/api';
 7 | import { useToast } from '../hooks/use-toast';
 8 | 
 9 | interface HelpModalProps {
10 |     isOpen: boolean;
11 |     onClose: () => void;
12 | }
13 | 
14 | const HelpModal: React.FC<HelpModalProps> = ({ isOpen, onClose }) => {
15 |     const [input, setInput] = useState('');
16 |     const [error, setError] = useState('');
17 |     const submitHelpRequest = useMutation(api.support.supportRequest);
18 |     const { toast } = useToast();
19 | 
20 |     const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
21 |         setInput(e.target.value);
22 |         setError('');
23 |     }, []);
24 | 
25 |     const handleSubmit = async () => {
26 |         if (!input.trim()) {
27 |             setError('Please enter a question before submitting.');
28 |             return;
29 |         }
30 | 
31 |         try {
32 |             await submitHelpRequest({ input });
33 |             toast({
34 |                 title: "Help Request Submitted",
35 |                 description: "We've received your question and will get back to you soon!",
36 |             });
37 |             setInput('');
38 |             onClose();
39 |         } catch (error) {
40 |             toast({
41 |                 title: "Error",
42 |                 description: "Failed to submit help request. Please try again.",
43 |                 variant: "destructive",
44 |             });
45 |         }
46 |     };
47 | 
48 |     return (
49 |         <Modal active={isOpen} setActive={onClose}>
50 |             <h2 className="text-2xl font-bold mb-4 text-text dark:text-text-dark">Need Help?</h2>
51 |             <p className="mb-4 text-text dark:text-text-dark">Ask your question below, and we'll get back to you as soon as possible!</p>
52 |             <Input
53 |                 className={`w-full mb-2 ${error ? 'border-red-500' : ''}`}
54 |                 value={input}
55 |                 onChange={handleInputChange}
56 |                 placeholder="Type your question here..."
57 |             />
58 |             {error && <p className="text-red-500 text-sm mb-2">{error}</p>}
59 |             <div className="flex justify-end">
60 |                 <Button 
61 |                     onClick={handleSubmit} 
62 |                     className={`bg-main hover:bg-mainAccent ${!input.trim() ? 'opacity-50 cursor-not-allowed' : ''}`}
63 |                 >
64 |                     Submit Question
65 |                 </Button>
66 |             </div>
67 |         </Modal>
68 |     );
69 | };
70 | 
71 | export default HelpModal;


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8" />
 5 |   <link rel="icon" type="image/png" href="/sticky-logo.png" />
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |   <meta name="google-adsense-account" content="ca-pub-5714068042700777">
 8 |   <title>Ideas that Stick, literally</title>
 9 |   <meta name="description" content="Organize thoughts, collaborate in real-time, and access your ideas from anywhere. Try it free today!">
10 |   <meta name="keywords" content="sticky notes, digital notes, brainstorming, collaboration, productivity, idea organization">
11 |   <link rel="canonical" href="https://sticky.today" />
12 |   
13 |   <!-- Open Graph / Facebook -->
14 |   <meta property="og:type" content="website">
15 |   <meta property="og:url" content="https://sticky.today">
16 |   <meta property="og:title" content="Ideas that Stick, literally">
17 |   <meta property="og:description" content="Organize thoughts, collaborate in real-time, and access your ideas from anywhere. Try it free today!">
18 |   <meta property="og:image" content="https://stickyapp.com/board.png">
19 | 
20 |   <!-- Twitter -->
21 |   <meta property="twitter:card" content="summary_large_image">
22 |   <meta property="twitter:url" content="https://sticky.today">
23 |   <meta property="twitter:title" content="Ideas that Stick, literally">
24 |   <meta property="twitter:description" content="Organize thoughts, collaborate in real-time, and access your ideas from anywhere. Try it free today!">
25 |   <meta property="twitter:image" content="https://stickyapp.com/board.png">
26 | 
27 |   <link rel="preconnect" href="https://fonts.googleapis.com">
28 |   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
29 |   <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Text:ital,wght@0,300..700;1,300..700&display=swap" rel="stylesheet">
30 |   
31 |   <!-- Structured Data -->
32 |   <script type="application/ld+json">
33 |   {
34 |     "@context": "https://schema.org",
35 |     "@type": "SoftwareApplication",
36 |     "name": "Sticky",
37 |     "description": "Organize thoughts, collaborate in real-time, and access your ideas from anywhere. Try it free today!",
38 |     "applicationCategory": "ProductivityApplication",
39 |     "operatingSystem": "Web",
40 |     "offers": {
41 |       "@type": "Offer",
42 |       "price": "0",
43 |       "priceCurrency": "USD"
44 |     },
45 |     "featureList": [
46 |       "Unlimited digital sticky notes",
47 |       "Real-time collaboration",
48 |       "Cloud sync across devices",
49 |       "Customizable note colors",
50 |       "Easy organization and search"
51 |     ]
52 |   }
53 |   </script>
54 | </head>
55 | <body>
56 |   <div id="root"></div>
57 |   <script type="module" src="/src/main.tsx"></script>
58 |   <div id="modal"></div>
59 | </body>
60 | </html>


--------------------------------------------------------------------------------
/convex/README.md:
--------------------------------------------------------------------------------
 1 | # Welcome to your Convex functions directory!
 2 | 
 3 | Write your Convex functions here.
 4 | See https://docs.convex.dev/functions for more.
 5 | 
 6 | A query function that takes two arguments looks like:
 7 | 
 8 | ```ts
 9 | // functions.js
10 | import { query } from "./_generated/server";
11 | import { v } from "convex/values";
12 | 
13 | export const myQueryFunction = query({
14 |   // Validators for arguments.
15 |   args: {
16 |     first: v.number(),
17 |     second: v.string(),
18 |   },
19 | 
20 |   // Function implementation.
21 |   handler: async (ctx, args) => {
22 |     // Read the database as many times as you need here.
23 |     // See https://docs.convex.dev/database/reading-data.
24 |     const documents = await ctx.db.query("tablename").collect();
25 | 
26 |     // Arguments passed from the client are properties of the args object.
27 |     console.log(args.first, args.second);
28 | 
29 |     // Write arbitrary JavaScript here: filter, aggregate, build derived data,
30 |     // remove non-public properties, or create new objects.
31 |     return documents;
32 |   },
33 | });
34 | ```
35 | 
36 | Using this query function in a React component looks like:
37 | 
38 | ```ts
39 | const data = useQuery(api.functions.myQueryFunction, {
40 |   first: 10,
41 |   second: "hello",
42 | });
43 | ```
44 | 
45 | A mutation function looks like:
46 | 
47 | ```ts
48 | // functions.js
49 | import { mutation } from "./_generated/server";
50 | import { v } from "convex/values";
51 | 
52 | export const myMutationFunction = mutation({
53 |   // Validators for arguments.
54 |   args: {
55 |     first: v.string(),
56 |     second: v.string(),
57 |   },
58 | 
59 |   // Function implementation.
60 |   handler: async (ctx, args) => {
61 |     // Insert or modify documents in the database here.
62 |     // Mutations can also read from the database like queries.
63 |     // See https://docs.convex.dev/database/writing-data.
64 |     const message = { body: args.first, author: args.second };
65 |     const id = await ctx.db.insert("messages", message);
66 | 
67 |     // Optionally, return a value from your mutation.
68 |     return await ctx.db.get(id);
69 |   },
70 | });
71 | ```
72 | 
73 | Using this mutation function in a React component looks like:
74 | 
75 | ```ts
76 | const mutation = useMutation(api.functions.myMutationFunction);
77 | function handleButtonPress() {
78 |   // fire and forget, the most common way to use mutations
79 |   mutation({ first: "Hello!", second: "me" });
80 |   // OR
81 |   // use the result once the mutation has completed
82 |   mutation({ first: "Hello!", second: "me" }).then((result) =>
83 |     console.log(result),
84 |   );
85 | }
86 | ```
87 | 
88 | Use the Convex CLI to push your functions to a deployment. See everything
89 | the Convex CLI can do by running `npx convex -h` in your project root
90 | directory. To learn more, launch the docs with `npx convex docs`.
91 | 


--------------------------------------------------------------------------------
/src/components/ui/dropdown.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import { ChevronDown } from 'lucide-react'
 4 | import { useState, useRef, useEffect } from 'react'
 5 | 
 6 | type DropdownItem = {
 7 |   name: string;
 8 |   link: string;
 9 | }
10 | 
11 | type DropdownProps = {
12 |   items: DropdownItem[];
13 |   text: string;
14 |   onSelect: (option: string) => void;
15 | }
16 | 
17 | export default function Dropdown({ items, text, onSelect }: DropdownProps) {
18 |   const [isActiveDropdown, setIsActiveDropdown] = useState(false)
19 |   const dropdownRef = useRef<HTMLDivElement>(null)
20 | 
21 |   useEffect(() => {
22 |     const handleClickOutside = (event: MouseEvent) => {
23 |       if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
24 |         setIsActiveDropdown(false)
25 |       }
26 |     }
27 | 
28 |     document.addEventListener('mousedown', handleClickOutside)
29 |     return () => {
30 |       document.removeEventListener('mousedown', handleClickOutside)
31 |     }
32 |   }, [])
33 | 
34 |   const handleItemClick = (item: DropdownItem) => {
35 |     onSelect(item.name);
36 |     setIsActiveDropdown(false);
37 |   }
38 | 
39 |   return (
40 |     <div
41 |       ref={dropdownRef}
42 |       data-state={isActiveDropdown ? 'open' : 'closed'}
43 |       className="relative group text-text"
44 |     >
45 |       <button
46 |         aria-haspopup="listbox"
47 |         aria-expanded={isActiveDropdown}
48 |         onClick={() => setIsActiveDropdown(!isActiveDropdown)}
49 |         className="flex w-[180px] cursor-pointer items-center rounded-base border-2 border-border dark:border-darkBorder bg-main px-3 py-2 text-sm font-base shadow-light dark:shadow-dark transition-all hover:translate-x-boxShadowX hover:translate-y-boxShadowY hover:shadow-none dark:hover:shadow-none"
50 |       >
51 |         <div className="mx-auto flex items-center">
52 |           {text}
53 |           <ChevronDown
54 |             className={
55 |               'ml-2 h-4 w-4 transition-transform group-data-[state=open]:rotate-180 group-data-[state=closed]:rotate-0 ease-in-out'
56 |             }
57 |           />
58 |         </div>
59 |       </button>
60 |       {isActiveDropdown && (
61 |         <div
62 |           role="listbox"
63 |           className="absolute left-0 z-50 w-[140px] mt-1 overflow-hidden rounded-base border-2 border-border dark:border-darkBorder text-center font-base shadow-light dark:shadow-dark bg-main"
64 |         >
65 |           {items.map((item, index) => (
66 |             <button
67 |               key={index}
68 |               onClick={() => handleItemClick(item)}
69 |               className="block w-full border-b-2 border-border dark:border-darkBorder bg-main px-3 py-2 text-sm no-underline hover:bg-mainAccent text-left"
70 |             >
71 |               {item.name}
72 |             </button>
73 |           ))}
74 |         </div>
75 |       )}
76 |     </div>
77 |   )
78 | }


--------------------------------------------------------------------------------
/src/components/terms.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | const TermsOfConditions: React.FC = () => {
 4 |   return (
 5 |     <div className="min-h-screen bg-white dark:bg-darkBg text-text dark:text-text-dark p-8 mt-20">
 6 |       <div className="max-w-3xl mx-auto">
 7 |         <h1 className="text-4xl font-bold mb-8">Terms of Conditions</h1>
 8 |         <div className="space-y-6">
 9 |           <section>
10 |             <h2 className="text-2xl font-semibold mb-4">1. Acceptance of Terms</h2>
11 |             <p>By using Sticky, you agree to these terms. If you don't agree, well, we'll be sad, but you shouldn't use Sticky. It's like agreeing to play a board game – you've got to follow the rules to have fun!</p>
12 |           </section>
13 |           <section>
14 |             <h2 className="text-2xl font-semibold mb-4">2. Use of Service</h2>
15 |             <p>Use Sticky for good, not evil. Don't do anything illegal, harmful, or that would make your grandmother disappointed in you. Sticky is for organizing ideas, not planning world domination (unless it's in a fun, non-threatening way).</p>
16 |           </section>
17 |           <section>
18 |             <h2 className="text-2xl font-semibold mb-4">3. User Accounts</h2>
19 |             <p>Keep your account info safe and sound. You're responsible for everything that happens under your account, so don't share it – not even with your cat, no matter how trustworthy they seem.</p>
20 |           </section>
21 |           <section>
22 |             <h2 className="text-2xl font-semibold mb-4">4. Content Responsibility</h2>
23 |             <p>You're responsible for your sticky notes. We're not liable for any embarrassing ideas you jot down at 3 AM. Remember, with great sticky power comes great sticky responsibility.</p>
24 |           </section>
25 |           <section>
26 |             <h2 className="text-2xl font-semibold mb-4">5. Intellectual Property</h2>
27 |             <p>We own Sticky, you own your stickies. It's a beautiful relationship, let's keep it that way. Don't try to claim you invented Sticky – we all know it was the ancient Egyptians who first used sticky notes (okay, maybe not, but you get the idea).</p>
28 |           </section>
29 |           <section>
30 |             <h2 className="text-2xl font-semibold mb-4">6. Termination</h2>
31 |             <p>We reserve the right to terminate accounts for misconduct. Don't make us use this power – we prefer to use our energy for creating awesome features instead.</p>
32 |           </section>
33 |           <section>
34 |             <h2 className="text-2xl font-semibold mb-4">7. Changes to Terms</h2>
35 |             <p>We may update these terms occasionally. We'll let you know when we do, but it's up to you to stay informed. Think of it like checking your sticky notes for updates!</p>
36 |           </section>
37 |         </div>
38 |       </div>
39 |     </div>
40 |   );
41 | };
42 | 
43 | export default TermsOfConditions;


--------------------------------------------------------------------------------
/src/components/FeedbackModal.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useCallback } from 'react';
 2 | import Modal from './ui/modal';
 3 | import { Button } from './ui/button';
 4 | import { useMutation } from 'convex/react';
 5 | import { api } from '../../convex/_generated/api';
 6 | import { useToast } from '../hooks/use-toast';
 7 | 
 8 | interface FeedbackModalProps {
 9 |     isOpen: boolean;
10 |     onClose: () => void;
11 | }
12 | 
13 | const FeedbackModal: React.FC<FeedbackModalProps> = ({ isOpen, onClose }) => {
14 |     const [input, setInput] = useState('');
15 |     const [error, setError] = useState('');
16 |     const submitHelpRequest = useMutation(api.support.supportRequest);
17 |     const { toast } = useToast();
18 | 
19 |     const handleInputChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
20 |         setInput(e.target.value);
21 |         setError('');
22 |     }, []);
23 | 
24 |     const handleSubmit = async () => {
25 |         if (!input.trim()) {
26 |             setError('Please enter your feedback before submitting.');
27 |             return;
28 |         }
29 | 
30 |         try {
31 |             await submitHelpRequest({ input });
32 |             toast({
33 |                 title: "Feedback Submitted",
34 |                 description: "Thank you for your feedback! We appreciate your input.",
35 |             });
36 |             setInput('');
37 |             onClose();
38 |         } catch (error) {
39 |             toast({
40 |                 title: "Error",
41 |                 description: "Failed to submit feedback. Please try again.",
42 |                 variant: "destructive",
43 |             });
44 |         }
45 |     };
46 | 
47 |     return (
48 |         <Modal active={isOpen} setActive={onClose}>
49 |             <h2 className="text-2xl font-bold mb-4 text-text dark:text-text-dark">We Value Your Feedback!</h2>
50 |             <p className="mb-4 text-text dark:text-text-dark">Your thoughts help us improve. Share your experience or suggestions below:</p>
51 |             <textarea
52 |                 className={`w-full mb-2 p-2 rounded-base border-2 border-border dark:border-darkBorder bg-white dark:bg-secondaryBlack text-text dark:text-text-dark ${error ? 'border-red-500' : ''}`}
53 |                 value={input}
54 |                 onChange={handleInputChange}
55 |                 placeholder="Type your feedback here..."
56 |                 rows={4}
57 |             />
58 |             {error && <p className="text-red-500 text-sm mb-2">{error}</p>}
59 |             <div className="flex justify-end">
60 |                 <Button 
61 |                     onClick={handleSubmit} 
62 |                     className={`bg-main hover:bg-mainAccent ${!input.trim() ? 'opacity-50 cursor-not-allowed' : ''}`}
63 |                 >
64 |                     Submit Feedback
65 |                 </Button>
66 |             </div>
67 |         </Modal>
68 |     );
69 | };
70 | 
71 | export default FeedbackModal;


--------------------------------------------------------------------------------
/src/components/ui/accordion.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import { ClassValue } from 'clsx'
 4 | import { ChevronDown } from 'lucide-react'
 5 | import { useEffect, useRef, useState } from 'react'
 6 | import { cn } from '../../libs/utils'
 7 | import { useHalloween } from '../../providers/halloween-provider'
 8 | 
 9 | type Props = {
10 |   className?: ClassValue
11 |   question: string
12 |   answer: string
13 | }
14 | 
15 | export default function Accordion({ question, answer, className }: Props) {
16 |   const [showContent, setShowContent] = useState(false)
17 |   const [contentHeight, setContentHeight] = useState('0px')
18 |   const contentRef = useRef<HTMLDivElement>(null)
19 |   const { isHalloweenMode } = useHalloween()
20 | 
21 |   useEffect(() => {
22 |     if (contentRef.current) {
23 |       setContentHeight(`${contentRef.current.scrollHeight}px`)
24 |     }
25 |   }, [showContent])
26 | 
27 |   return (
28 |     <div
29 |       data-state={showContent ? 'open' : 'closed'}
30 |       className={cn(
31 |         "w-full group rounded-base overflow-x-hidden border-2 shadow-light dark:shadow-dark",
32 |         isHalloweenMode 
33 |           ? "border-halloween-orange/50 hover:border-halloween-orange bg-halloween-purple/20" 
34 |           : "border-border dark:border-darkBorder"
35 |       )}
36 |     >
37 |       <button
38 |         role="button"
39 |         aria-expanded={showContent}
40 |         className={cn(
41 |           'flex w-full items-center transition-[border-radius] justify-between border-b-0 group-data-[state=open]:border-b-2 p-3 sm:p-4 md:p-5 font-heading text-sm sm:text-base',
42 |           isHalloweenMode 
43 |             ? 'text-halloween-ghost border-b-halloween-orange/50 bg-halloween-black/50' 
44 |             : 'text-text border-b-border dark:border-b-darkBorder bg-main',
45 |           className,
46 |         )}
47 |         onClick={() => {
48 |           setShowContent(!showContent)
49 |         }}
50 |       >
51 |         {question}
52 |         <ChevronDown className={cn(
53 |           "ml-2 sm:ml-3 md:ml-4 min-h-[18px] min-w-[18px] sm:min-h-[24px] sm:min-w-[24px] group-data-[state=open]:rotate-180 group-data-[state=closed]:0 transition-transform ease-in-out",
54 |           isHalloweenMode ? "text-halloween-orange" : ""
55 |         )} />
56 |       </button>
57 |       <div
58 |         ref={contentRef}
59 |         style={{ height: showContent ? `${contentHeight}` : '0' }}
60 |         className={cn(
61 |           "overflow-hidden rounded-b-base font-base transition-[height] ease-in-out",
62 |           isHalloweenMode 
63 |             ? "bg-halloween-black/50" 
64 |             : "bg-white dark:bg-secondaryBlack"
65 |         )}
66 |       >
67 |         <p className={cn(
68 |           "p-3 sm:p-4 md:p-5 text-xs sm:text-sm md:text-base leading-relaxed",
69 |           isHalloweenMode ? "text-halloween-ghost/80" : ""
70 |         )}>
71 |           {answer}
72 |         </p>
73 |       </div>
74 |     </div>
75 |   )
76 | }


--------------------------------------------------------------------------------
/convex/welcomeEmail.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   Body,
  3 |   Button,
  4 |   Container,
  5 |   Head,
  6 |   Heading,
  7 |   Html,
  8 |   Img,
  9 |   Preview,
 10 |   Section,
 11 |   Text,
 12 | } from "@react-email/components";
 13 | 
 14 | const baseUrl = "https://www.sticky.today";
 15 | 
 16 | export function WelcomeEmail({ name = "there" }) {
 17 |   const firstName = getFirstName(name);
 18 | 
 19 |   return (
 20 |     <Html>
 21 |       <Head />
 22 |       <Preview>Ideas that stick, literally! 😉</Preview>
 23 |       <Body style={main}>
 24 |         <Container style={container}>
 25 |           <Img
 26 |             src={`${baseUrl}/sticky-logo.png`}
 27 |             width="80"
 28 |             height="80"
 29 |             alt="Sticky Logo"
 30 |             style={logo}
 31 |           />
 32 |           <Heading style={heading}>Welcome to Sticky, {firstName}!</Heading>
 33 |           <Text style={paragraph}>
 34 |             You've just found the duct tape for your brain!
 35 |             <Img src={`${baseUrl}/duct-tape.png`}
 36 |               width="80"
 37 |               height="80"
 38 |               alt="Duct Tape"
 39 |               style={logo}
 40 |             />
 41 |           </Text>
 42 |           <Section style={btnContainer}>
 43 |             <Button style={button} href={`${baseUrl}/boards`}>
 44 |               Get started!
 45 |             </Button>
 46 |           </Section>
 47 |           <Text style={paragraph}>
 48 |             Need help? Visit your Board and use the ? button to ask.
 49 |           </Text>
 50 |           <Text style={footer}>
 51 |             Best,<br />
 52 |             The Sticky team
 53 |           </Text>
 54 |         </Container>
 55 |       </Body>
 56 |     </Html>
 57 |   );
 58 | }
 59 | 
 60 | const main = {
 61 |   backgroundColor: "#f3e8ff",
 62 |   fontFamily: '"Red Hat Text", sans-serif',
 63 | };
 64 | 
 65 | const container = {
 66 |   margin: "0 auto",
 67 |   padding: "40px 20px",
 68 |   maxWidth: "580px",
 69 | };
 70 | 
 71 | const logo = {
 72 |   margin: "0 auto 20px",
 73 |   display: "block",
 74 | };
 75 | 
 76 | const heading = {
 77 |   fontSize: "32px",
 78 |   lineHeight: "1.3",
 79 |   fontWeight: "700",
 80 |   textAlign: "center" as const,
 81 |   color: "#5F51E8",
 82 | };
 83 | 
 84 | const paragraph = {
 85 |   fontSize: "18px",
 86 |   lineHeight: "26px",
 87 |   marginBottom: "26px",
 88 |   color: "#333",
 89 | };
 90 | 
 91 | const btnContainer = {
 92 |   textAlign: "center" as const,
 93 |   marginTop: "32px",
 94 |   marginBottom: "32px",
 95 | };
 96 | 
 97 | const button = {
 98 |   backgroundColor: "#5F51E8",
 99 |   borderRadius: "5px",
100 |   color: "#fff",
101 |   fontSize: "18px",
102 |   textDecoration: "none",
103 |   textAlign: "center" as const,
104 |   display: "inline-block",
105 |   padding: "14px 28px",
106 |   fontWeight: "600",
107 | };
108 | 
109 | const footer = {
110 |   fontSize: "16px",
111 |   lineHeight: "24px",
112 |   marginTop: "32px",
113 |   color: "#666",
114 | };
115 | 
116 | function getFirstName(fullName: string): string {
117 |   const trimmedName = fullName.trim();
118 |   const nameParts = trimmedName.split(' ');
119 |   if (nameParts.length <= 1) {
120 |     return trimmedName;
121 |   }
122 |   return nameParts[0];
123 | }
124 | 


--------------------------------------------------------------------------------
/src/authenticated/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from 'react';
 2 | import { SignedIn } from '@clerk/clerk-react';
 3 | import { useQuery } from 'convex/react';
 4 | import { api } from '../../convex/_generated/api';
 5 | import Whiteboard from './Board';
 6 | import { Id } from '../../convex/_generated/dataModel';
 7 | import BoardsList from './BoardsList';
 8 | import { useParams, useLocation } from 'react-router-dom';
 9 | import { MessageCircle } from 'lucide-react';
10 | import FeedbackModal from '../components/FeedbackModal';
11 | 
12 | const AuthenticatedApp: React.FC = () => {
13 |   const [boardId, setBoardId] = useState<Id<"boards"> | null>(null);
14 |   const [isLoading, setIsLoading] = useState(true);
15 |   const boards = useQuery(api.boards.getBoards);
16 |   const { id } = useParams<{ id: string }>();
17 |   const location = useLocation();
18 |   const searchParams = new URLSearchParams(location.search);
19 |   const shareCode = searchParams.get('shareCode') || '';
20 |   const sharedBoardId = useQuery(api.boardSharing.getSharedBoardId, { shareCode });
21 |   const [shareCodeError, setShareCodeError] = useState<string | null>(null);
22 |   const [isFeedbackModalOpen, setIsFeedbackModalOpen] = useState(false);
23 | 
24 |   useEffect(() => {
25 |     const initializeBoard = async () => {
26 |       setIsLoading(true);
27 |       if (shareCode) {
28 |         if (sharedBoardId === undefined) {
29 |           return;
30 |         }
31 |         if (sharedBoardId === null) {
32 |           setShareCodeError("Invalid share code. The board you're trying to access doesn't exist or has been deleted.");
33 |           setIsLoading(false);
34 |           return;
35 |         }
36 |         setBoardId(sharedBoardId);
37 |         setShareCodeError(null);
38 |       } else if (id) {
39 |         setBoardId(id as Id<"boards">);
40 |       } else if (location.pathname === '/boards' || location.pathname === '/board') {
41 |         setBoardId(null);
42 |       }
43 |       setIsLoading(false);
44 |     };
45 |     initializeBoard();
46 |   }, [boards, sharedBoardId, shareCode, id, location.pathname]);
47 | 
48 |   if (isLoading) {
49 |     return <div>Loading...</div>;
50 |   }
51 | 
52 |   return (
53 |     <SignedIn>
54 |       {shareCodeError ? (
55 |         <div className="flex items-center justify-center h-screen">
56 |           <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
57 |             <strong className="font-bold">Error: </strong>
58 |             <span className="block sm:inline">{shareCodeError}</span>
59 |           </div>
60 |         </div>
61 |       ) : boardId ? (
62 |         <Whiteboard boardId={boardId} />
63 |       ) : (
64 |         <BoardsList />
65 |       )}
66 |           <button
67 |                 onClick={() => setIsFeedbackModalOpen(true)}
68 |                 className="fixed bottom-4 right-4 bg-main hover:bg-mainAccent text-text p-3 rounded-full shadow-md transition-colors duration-200"
69 |             >
70 |                 <MessageCircle size={24} />
71 |             </button>
72 |             <FeedbackModal isOpen={isFeedbackModalOpen} onClose={() => setIsFeedbackModalOpen(false)} />
73 |     </SignedIn>
74 |   );
75 | };
76 | 
77 | export default AuthenticatedApp;


--------------------------------------------------------------------------------
/src/authenticated/NoteControls.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | import { ChevronUp, ChevronDown, Trash2, MoreHorizontal } from 'lucide-react';
 3 | import { Id } from '../../convex/_generated/dataModel';
 4 | 
 5 | interface NoteControlsProps {
 6 |   noteId: Id<"notes"> | 'tempId';
 7 |   zIndex: number;
 8 |   onUpdate: (noteId: Id<"notes"> | 'tempId', updates: any) => void;
 9 |   onDelete: (noteId: Id<"notes"> | 'tempId') => void;
10 | }
11 | 
12 | const NoteControls: React.FC<NoteControlsProps> = ({ noteId, zIndex, onUpdate, onDelete }) => {
13 |   const [isOpen, setIsOpen] = useState(false);
14 | 
15 |   const colors = [
16 |     { name: 'Yellow', value: '#ffff88' },
17 |     { name: 'Pink', value: '#ff7eb9' },
18 |     { name: 'Blue', value: '#7afcff' },
19 |     { name: 'Green', value: '#98fb98' },
20 |   ];
21 | 
22 |   return (
23 |     <div className="absolute bottom-2 right-3">
24 |       <button
25 |         onClick={() => setIsOpen(!isOpen)}
26 |         className="w-8 h-8 bg-white dark:bg-gray-800 rounded-full shadow-md flex items-center justify-center hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
27 |       >
28 |         <MoreHorizontal className="w-5 h-5 dark:text-white text-gray-600" />
29 |       </button>
30 |       {isOpen && (
31 |         <div className="absolute bottom-full right-0 mb-2 bg-white dark:bg-gray-800 rounded-lg shadow-lg p-2 flex flex-col items-end">
32 |           <div className="flex space-x-1 mb-2">
33 |             {colors.map((color) => (
34 |               <button
35 |                 key={color.name}
36 |                 onClick={() => onUpdate(noteId, { color: color.value })}
37 |                 className="w-6 h-6 rounded-full transition-transform hover:scale-110"
38 |                 style={{ backgroundColor: color.value }}
39 |                 title={color.name}
40 |               />
41 |             ))}
42 |           </div>
43 |           <div className="flex space-x-1">
44 |             <button
45 |               onClick={() => onUpdate(noteId, { zIndex: zIndex + 1 })}
46 |               className="w-8 h-8 bg-gray-200 dark:bg-gray-700 rounded-full flex items-center justify-center hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
47 |               title="Bring forward"
48 |             >
49 |               <ChevronUp className="w-4 h-4 text-gray-600 dark:text-gray-300" />
50 |             </button>
51 |             <button
52 |               onClick={() => onUpdate(noteId, { zIndex: Math.max(0, zIndex - 1) })}
53 |               className="w-8 h-8 bg-gray-200 dark:bg-gray-700 rounded-full flex items-center justify-center hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
54 |               title="Send backward"
55 |             >
56 |               <ChevronDown className="w-4 h-4 text-gray-600 dark:text-gray-300" />
57 |             </button>
58 |             <button
59 |               onClick={() => onDelete(noteId)}
60 |               className="w-8 h-8 bg-red-500 rounded-full flex items-center justify-center hover:bg-red-600 transition-colors"
61 |               title="Delete note"
62 |             >
63 |               <Trash2 className="w-4 h-4 text-white" />
64 |             </button>
65 |           </div>
66 |         </div>
67 |       )}
68 |     </div>
69 |   );
70 | };
71 | 
72 | export default NoteControls;


--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
  1 | import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
  2 | import { SignedIn, SignedOut } from '@clerk/clerk-react';
  3 | import FAQSection from "./components/lander/faqs"
  4 | import Footer from "./components/lander/footer"
  5 | import HeroSection from "./components/lander/hero"
  6 | import NavBar from "./components/lander/nav"
  7 | import PricingSection from "./components/lander/pricing-beta"
  8 | import PrivacyPolicy from "./components/privacy"
  9 | import TermsOfConditions from "./components/terms"
 10 | import Signin from './auth/signin';
 11 | import { useConvexAuth } from './hooks/useConvexAuth';
 12 | import AuthenticatedApp from './authenticated';
 13 | import Signup from './auth/signup';
 14 | import ErrorBoundary from './components/ErrorBoundary';
 15 | import Onboarding from './authenticated/Onboarding';
 16 | import SelfHostSection from './components/lander/selfhost';
 17 | 
 18 | function App() {
 19 |   const { isLoaded } = useConvexAuth();
 20 | 
 21 |   if (!isLoaded) {
 22 |     return;
 23 |   }
 24 | 
 25 |   return (
 26 |     <ErrorBoundary>
 27 |       <Router>
 28 |         <Routes>
 29 |           <Route path="/signin" element={<Signin />} />
 30 |           <Route path="/signup" element={<Signup />} />
 31 |           <Route path="/" element={
 32 |             <>
 33 |               <NavBar />
 34 |               <main>
 35 |                 <HeroSection />
 36 |                 <PricingSection />
 37 |                 <FAQSection />
 38 |                 <SelfHostSection />
 39 |               </main>
 40 |               <Footer />
 41 |             </>
 42 |           } />
 43 |           <Route path="/privacy" element={
 44 |             <>
 45 |               <NavBar />
 46 |               <PrivacyPolicy />
 47 |               <Footer />
 48 |             </>
 49 |           } />
 50 |           <Route path="/terms" element={
 51 |             <>
 52 |               <NavBar />
 53 |               <TermsOfConditions />
 54 |               <Footer />
 55 |             </>
 56 |           } />
 57 |           <Route path="/onboarding" element={
 58 |             <>
 59 |               <SignedIn>
 60 |                 <Onboarding />
 61 |               </SignedIn>
 62 |               <SignedOut>
 63 |                 <Navigate to="/signin" />
 64 |               </SignedOut>
 65 |             </>
 66 |           } />
 67 |           <Route path="/boards" element={
 68 |             <>
 69 |               <SignedIn>
 70 |                 <AuthenticatedApp />
 71 |               </SignedIn>
 72 |               <SignedOut>
 73 |                 <Navigate to="/signin" />
 74 |               </SignedOut>
 75 |             </>
 76 |           } />
 77 |           <Route path="/board/:id" element={
 78 |             <>
 79 |               <SignedIn>
 80 |                 <AuthenticatedApp />
 81 |               </SignedIn>
 82 |               <SignedOut>
 83 |                 <Navigate to="/signin" />
 84 |               </SignedOut>
 85 |             </>
 86 |           } />
 87 |           <Route path="/board" element={
 88 |             <>
 89 |               <SignedIn>
 90 |                 <AuthenticatedApp />
 91 |               </SignedIn>
 92 |               <SignedOut>
 93 |                 <Navigate to="/signin" />
 94 |               </SignedOut>
 95 |             </>
 96 |           } />
 97 |           <Route path="*" element={<Navigate to="/" replace />} />
 98 |         </Routes>
 99 |       </Router>
100 |     </ErrorBoundary>
101 |   )
102 | }
103 | 
104 | export default App


--------------------------------------------------------------------------------
/convex/presence.ts:
--------------------------------------------------------------------------------
  1 | import { mutation, query } from "./_generated/server";
  2 | import { v } from "convex/values";
  3 | 
  4 | export const updatePresence = mutation({
  5 |   args: { 
  6 |     boardId: v.id("boards"),
  7 |     cursorPosition: v.object({
  8 |       x: v.number(),
  9 |       y: v.number()
 10 |     }),
 11 |     isHeartbeat: v.boolean()
 12 |   },
 13 |   handler: async (ctx, args) => {
 14 |     const identity = await ctx.auth.getUserIdentity();
 15 |     if (!identity) {
 16 |       throw new Error("Not authenticated");
 17 |     }
 18 |     const user = await ctx.db
 19 |       .query("users")
 20 |       .withIndex("by_token", (q) => q.eq("tokenIdentifier", identity.tokenIdentifier.split('|')[1]))
 21 |       .unique();
 22 |     if (!user) {
 23 |       throw new Error("User not found");
 24 |     }
 25 | 
 26 |     const now = Date.now();
 27 |     const existingPresence = await ctx.db
 28 |       .query("presence")
 29 |       .withIndex("by_user_and_board", (q) => 
 30 |         q.eq("userId", user._id).eq("boardId", args.boardId)
 31 |       )
 32 |       .first();
 33 | 
 34 |     if (existingPresence) {
 35 |       await ctx.db.patch(existingPresence._id, {
 36 |         lastUpdated: now,
 37 |         cursorPosition: args.isHeartbeat ? existingPresence.cursorPosition : args.cursorPosition
 38 |       });
 39 |     } else {
 40 |       await ctx.db.insert("presence", {
 41 |         userId: user._id,
 42 |         boardId: args.boardId,
 43 |         lastUpdated: now,
 44 |         cursorPosition: args.cursorPosition
 45 |       });
 46 |     }
 47 |   },
 48 | });
 49 | 
 50 | export const getActiveUsers = query({
 51 |   args: { boardId: v.id("boards") },
 52 |   handler: async (ctx, args) => {
 53 |     const thirtySecondsAgo = Date.now() - 30000;
 54 |     const activePresence = await ctx.db
 55 |       .query("presence")
 56 |       .withIndex("by_board_and_lastUpdated", (q) => 
 57 |         q.eq("boardId", args.boardId)
 58 |          .gte("lastUpdated", thirtySecondsAgo)
 59 |       )
 60 |       .collect();
 61 | 
 62 |     const userIds = [...new Set(activePresence.map((p) => p.userId))];
 63 |     const users = await Promise.all(
 64 |       userIds.map(async (userId) => {
 65 |         const user = await ctx.db.get(userId);
 66 |         const presence = activePresence.find(p => p.userId === userId);
 67 |         if (user && presence) {
 68 |           return {
 69 |             _id: user._id,
 70 |             name: user.name,
 71 |             profileImageUrl: user.profileImageUrl,
 72 |             cursorPosition: presence.cursorPosition
 73 |           };
 74 |         }
 75 |         return null;
 76 |       })
 77 |     );
 78 | 
 79 |     return users.filter((user): user is NonNullable<typeof user> => user !== null);
 80 |   },
 81 | });
 82 | 
 83 | export const removePresence = mutation({
 84 |   args: { boardId: v.id("boards") },
 85 |   handler: async (ctx, args) => {
 86 |     const identity = await ctx.auth.getUserIdentity();
 87 |     if (!identity) {
 88 |       throw new Error("Not authenticated");
 89 |     }
 90 |     const user = await ctx.db
 91 |       .query("users")
 92 |       .withIndex("by_token", (q) => q.eq("tokenIdentifier", identity.tokenIdentifier.split('|')[1]))
 93 |       .unique();
 94 |     if (!user) {
 95 |       throw new Error("User not found");
 96 |     }
 97 | 
 98 |     const presence = await ctx.db
 99 |       .query("presence")
100 |       .withIndex("by_user_and_board", (q) => 
101 |         q.eq("userId", user._id).eq("boardId", args.boardId)
102 |       )
103 |       .first();
104 | 
105 |     if (presence) {
106 |       await ctx.db.delete(presence._id);
107 |     }
108 |   },
109 | });


--------------------------------------------------------------------------------
/src/components/UserStack.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | import { Id } from "../../convex/_generated/dataModel";
 3 | import Avatar from './ui/avatar';
 4 | import { Button } from './ui/button';
 5 | import Modal from './ui/modal';
 6 | 
 7 | interface ActiveUser {
 8 |     _id: Id<"users">;
 9 |     name: string;
10 |     profileImageUrl: string;
11 | }
12 | 
13 | interface UserStackProps {
14 |     activeUsers: ActiveUser[];
15 |     currentUserId: Id<"users">;
16 | }
17 | 
18 | const UserStack: React.FC<UserStackProps> = ({ activeUsers, currentUserId }) => {
19 |     const [hoveredUser, setHoveredUser] = useState<Id<"users"> | null>(null);
20 |     const [showAllUsers, setShowAllUsers] = useState(false);
21 |     const maxVisibleUsers = 2;
22 | 
23 |     const sortedUsers = [...activeUsers].sort((a, b) => a._id.localeCompare(b._id));
24 | 
25 |     if (sortedUsers.length === 0) {
26 |         return null;
27 |     }
28 |     return (
29 |         <div className="bg-white dark:bg-gray-800 rounded-full shadow-md p-2">
30 |             <div className="flex -space-x-2 relative">
31 |                 {sortedUsers.slice(0, maxVisibleUsers).map((user) => (
32 |                     <div
33 |                         key={user._id}
34 |                         className="relative"
35 |                         onMouseEnter={() => setHoveredUser(user._id)}
36 |                         onMouseLeave={() => setHoveredUser(null)}
37 |                     >
38 |                         <Avatar
39 |                             className="w-8 h-8 border-2 border-white dark:border-gray-800 rounded-full"
40 |                             imageUrl={user.profileImageUrl || `https://ui-avatars.com/api/?name=${encodeURIComponent(user.name)}&background=random`}
41 |                         />
42 |                         {hoveredUser === user._id && (
43 |                             <div className="absolute top-full left-1/2 transform -translate-x-1/2 mt-2 px-2 py-1 bg-gray-800 text-white text-xs rounded whitespace-nowrap z-10">
44 |                                 {user._id === currentUserId ? `${user.name} (You)` : user.name}
45 |                             </div>
46 |                         )}
47 |                     </div>
48 |                 ))}
49 |                 {sortedUsers.length > maxVisibleUsers && (
50 |                     <Button
51 |                         onClick={() => setShowAllUsers(true)}
52 |                         className="w-8 h-8 rounded-full bg-gray-300 border-2 border-white dark:border-gray-800 text-sm font-medium text-gray-800 flex items-center justify-center"
53 |                     >
54 |                         +{sortedUsers.length - maxVisibleUsers}
55 |                     </Button>
56 |                 )}
57 |             </div>
58 | 
59 |             <Modal active={showAllUsers} setActive={setShowAllUsers}>
60 |                 <h3 className="text-lg font-medium leading-6 text-gray-900 dark:text-white mb-4">
61 |                     Active Users
62 |                 </h3>
63 |                 <div className="max-h-60 overflow-y-auto">
64 |                     {sortedUsers.map((user) => (
65 |                         <div key={user._id} className="flex items-center space-x-3 mb-2">
66 |                             <Avatar
67 |                                 className="w-8 h-8"
68 |                                 imageUrl={user.profileImageUrl || `https://ui-avatars.com/api/?name=${encodeURIComponent(user.name)}&background=random`}
69 |                             />
70 |                             <span>{user._id === currentUserId ? `${user.name} (You)` : user.name}</span>
71 |                         </div>
72 |                     ))}
73 |                 </div>
74 |             </Modal>
75 |         </div>
76 |     );
77 | };
78 | 
79 | export default UserStack;


--------------------------------------------------------------------------------
/src/components/lander/preview.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Button } from '../ui/button';
 3 | import { useHalloween } from '../../providers/halloween-provider';
 4 | 
 5 | const Preview: React.FC = () => {
 6 |     const { isHalloweenMode } = useHalloween();
 7 | 
 8 |     const scrollToSection = (id: string) => {
 9 |         const element = document.getElementById(id);
10 |         if (element) {
11 |             element.scrollIntoView({ behavior: 'smooth' });
12 |         }
13 |     };
14 | 
15 |     return (
16 |         <section className="px-4 -mt-20 sm:-mt-24 md:-mt-28 lg:-mt-32">
17 |             <div className="relative w-full min-h-[60vh] overflow-hidden rounded-3xl">
18 |                 <div className={`absolute inset-0 ${isHalloweenMode
19 |                         ? 'bg-halloween-black/90 animate-flicker'
20 |                         : 'bg-white dark:bg-darkBg opacity-90'
21 |                     }`}></div>
22 |                 <div className="relative z-10 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12 lg:py-16 flex flex-col lg:flex-row items-center justify-between">
23 |                     <div className="w-full lg:w-1/2 mb-8 lg:mb-0 pr-0 lg:pr-8">
24 |                         <h2 className={`text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-bold mb-4 sm:mb-6 
25 |                             ${isHalloweenMode ? 'text-halloween-orange' : 'text-text dark:text-text-dark'}`}>
26 |                             {isHalloweenMode ? 'The haunted tape for your brain' : 'The duct tape for your brain'}
27 |                             <img
28 |                                 src={"/duct-tape.png"}
29 |                                 alt="Tape for your brain"
30 |                                 className={`w-16 h-16 mr-4 ${isHalloweenMode ? 'animate-spooky-shake' : ''}`}
31 |                             />
32 |                         </h2>
33 |                         <p className={`text-base sm:text-lg lg:text-xl mb-6 sm:mb-8 opacity-80
34 |                             ${isHalloweenMode ? 'text-halloween-ghost' : 'text-text dark:text-text-dark'}`}>
35 |                             {isHalloweenMode ? 'Who needs a memory when you have ghostly notes?' : 'Who needs a photographic memory?'}
36 |                         </p>
37 |                         <Button
38 |                             onClick={() => scrollToSection('pricing')}
39 |                             className={`text-base sm:text-lg lg:text-xl px-4 sm:px-6 lg:px-8 py-2 sm:py-3
40 |                                 ${isHalloweenMode ? 'bg-halloween-orange hover:bg-halloween-purple text-white' : ''}`}
41 |                         >
42 |                             {isHalloweenMode ? 'Summon Your Notes!' : 'Stick It to Chaos!'}
43 |                         </Button>
44 |                     </div>
45 |                     <div className={`relative w-full aspect-square rounded-2xl shadow-2xl overflow-hidden group
46 |                         ${isHalloweenMode ? 'bg-gradient-to-tr from-halloween-purple/20 to-halloween-orange/20' :
47 |                             'bg-gradient-to-tr from-main/20 to-base-secondary/20'}`}>
48 |                         <img
49 |                             src="/board.png"
50 |                             alt="Sticky app preview"
51 |                             className={`absolute inset-0 w-full h-full object-cover transition-all duration-300 
52 |                                 ${isHalloweenMode ? 'filter hue-rotate-180 contrast-125' : 'filter grayscale group-hover:grayscale-0'}`}
53 |                         />
54 |                         <div className="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
55 |                     </div>
56 |                 </div>
57 |             </div>
58 |         </section>
59 |     );
60 | };
61 | 
62 | export default Preview;


--------------------------------------------------------------------------------
/convex/_generated/server.js:
--------------------------------------------------------------------------------
 1 | /* prettier-ignore-start */
 2 | 
 3 | /* eslint-disable */
 4 | /**
 5 |  * Generated utilities for implementing server-side Convex query and mutation functions.
 6 |  *
 7 |  * THIS CODE IS AUTOMATICALLY GENERATED.
 8 |  *
 9 |  * To regenerate, run `npx convex dev`.
10 |  * @module
11 |  */
12 | 
13 | import {
14 |   actionGeneric,
15 |   httpActionGeneric,
16 |   queryGeneric,
17 |   mutationGeneric,
18 |   internalActionGeneric,
19 |   internalMutationGeneric,
20 |   internalQueryGeneric,
21 |   componentsGeneric,
22 | } from "convex/server";
23 | 
24 | /**
25 |  * Define a query in this Convex app's public API.
26 |  *
27 |  * This function will be allowed to read your Convex database and will be accessible from the client.
28 |  *
29 |  * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
30 |  * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
31 |  */
32 | export const query = queryGeneric;
33 | 
34 | /**
35 |  * Define a query that is only accessible from other Convex functions (but not from the client).
36 |  *
37 |  * This function will be allowed to read from your Convex database. It will not be accessible from the client.
38 |  *
39 |  * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
40 |  * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
41 |  */
42 | export const internalQuery = internalQueryGeneric;
43 | 
44 | /**
45 |  * Define a mutation in this Convex app's public API.
46 |  *
47 |  * This function will be allowed to modify your Convex database and will be accessible from the client.
48 |  *
49 |  * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
50 |  * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
51 |  */
52 | export const mutation = mutationGeneric;
53 | 
54 | /**
55 |  * Define a mutation that is only accessible from other Convex functions (but not from the client).
56 |  *
57 |  * This function will be allowed to modify your Convex database. It will not be accessible from the client.
58 |  *
59 |  * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
60 |  * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
61 |  */
62 | export const internalMutation = internalMutationGeneric;
63 | 
64 | /**
65 |  * Define an action in this Convex app's public API.
66 |  *
67 |  * An action is a function which can execute any JavaScript code, including non-deterministic
68 |  * code and code with side-effects, like calling third-party services.
69 |  * They can be run in Convex's JavaScript environment or in Node.js using the "use node" directive.
70 |  * They can interact with the database indirectly by calling queries and mutations using the {@link ActionCtx}.
71 |  *
72 |  * @param func - The action. It receives an {@link ActionCtx} as its first argument.
73 |  * @returns The wrapped action. Include this as an `export` to name it and make it accessible.
74 |  */
75 | export const action = actionGeneric;
76 | 
77 | /**
78 |  * Define an action that is only accessible from other Convex functions (but not from the client).
79 |  *
80 |  * @param func - The function. It receives an {@link ActionCtx} as its first argument.
81 |  * @returns The wrapped function. Include this as an `export` to name it and make it accessible.
82 |  */
83 | export const internalAction = internalActionGeneric;
84 | 
85 | /**
86 |  * Define a Convex HTTP action.
87 |  *
88 |  * @param func - The function. It receives an {@link ActionCtx} as its first argument, and a `Request` object
89 |  * as its second.
90 |  * @returns The wrapped endpoint function. Route a URL path to this function in `convex/http.js`.
91 |  */
92 | export const httpAction = httpActionGeneric;
93 | 
94 | /* prettier-ignore-end */
95 | 


--------------------------------------------------------------------------------
/src/components/lander/selfhost.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Skull, GitFork, Lock, Server } from 'lucide-react';
 3 | import { Button } from '../ui/button';
 4 | import { useHalloween } from '../../providers/halloween-provider';
 5 | 
 6 | const SelfHostSection: React.FC = () => {
 7 |   const { isHalloweenMode } = useHalloween();
 8 | 
 9 |   return (
10 |     <section className={`px-4 py-2 ${isHalloweenMode
11 |       ? 'bg-gradient-to-b from-halloween-black/50 to-halloween-purple/20'
12 |       : 'bg-gradient-to-b from-purple-50/50 to-pink-50/50 dark:from-gray-900/50 dark:to-purple-900/50'
13 |       }`}>
14 |       <div className="max-w-3xl mx-auto">
15 |         <div className={`flex items-center justify-between p-2 border rounded-lg ${isHalloweenMode
16 |           ? 'bg-halloween-black/50 border-halloween-orange/50'
17 |           : 'bg-white dark:bg-secondaryBlack border-border dark:border-darkBorder'
18 |           }`}>
19 |           <div className="flex items-center gap-4">
20 |             <div className={`p-1.5 rounded-md ${isHalloweenMode
21 |               ? 'bg-halloween-orange/10'
22 |               : 'bg-purple-50 dark:bg-gray-800'
23 |               }`}>
24 |               {isHalloweenMode
25 |                 ? <Skull className="h-4 w-4 text-halloween-orange" />
26 |                 : <GitFork className="h-4 w-4 text-main" />
27 |               }
28 |             </div>
29 |             <div className="flex flex-col items-start">
30 |               <h3 className={`text-sm font-medium ${isHalloweenMode
31 |                 ? 'text-halloween-orange'
32 |                 : 'text-text dark:text-text-dark'
33 |                 }`}>
34 |                 {isHalloweenMode ? 'Summon Your Instance' : 'Self-Host Sticky'}
35 |               </h3>
36 |               <p className={`text-xs ${isHalloweenMode
37 |                 ? 'text-halloween-ghost'
38 |                 : 'text-gray-500 dark:text-gray-400'
39 |                 }`}>
40 |                 {isHalloweenMode
41 |                   ? 'Deploy in your haunted realm'
42 |                   : 'Deploy on your infrastructure'}
43 |               </p>
44 |               <div className="flex gap-3 mt-1">
45 |                 <span className={`flex items-center gap-1 text-xs ${isHalloweenMode
46 |                     ? 'text-halloween-ghost/80'
47 |                     : 'text-gray-400 dark:text-gray-500'
48 |                   }`}>
49 |                   <Lock className="h-3 w-3" />
50 |                   {isHalloweenMode ? 'Dark Security' : 'Full Control'}
51 |                 </span>
52 |                 <span className={`flex items-center gap-1 text-xs ${isHalloweenMode
53 |                   ? 'text-halloween-ghost/80'
54 |                   : 'text-gray-400 dark:text-gray-500'
55 |                   }`}>
56 |                   <Server className="h-3 w-3" />
57 |                   {isHalloweenMode ? 'Cursed Stack' : 'React + Convex.dev'}
58 |                 </span>
59 |               </div>
60 |             </div>
61 |           </div>
62 |           <div className="flex flex-col items-end gap-2">
63 |             <Button
64 |               onClick={() => window.open('https://github.com/hamzasaleem2/sticky', '_blank')}
65 |               className={`text-xs px-3 py-1 ${isHalloweenMode
66 |                 ? 'bg-halloween-orange hover:bg-halloween-purple text-white'
67 |                 : 'hover:bg-gray-50 dark:hover:bg-gray-800'
68 |                 }`}
69 |             >
70 |               {isHalloweenMode ? 'Conjure' : 'Deploy'}
71 |             </Button>
72 |             <span className={`text-[10px] ${isHalloweenMode
73 |               ? 'text-halloween-ghost/60'
74 |               : 'text-gray-400 dark:text-gray-500'
75 |               }`}>
76 |               {isHalloweenMode ? 'MIT Licensed Curse' : 'MIT Licensed'}
77 |             </span>
78 |           </div>
79 |         </div>
80 |       </div>
81 |     </section>
82 |   );
83 | };
84 | 
85 | export default SelfHostSection;


--------------------------------------------------------------------------------
/src/assets/react.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>


--------------------------------------------------------------------------------
/src/components/lander/faqs.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import Accordion from '../ui/accordion';
 3 | import { useHalloween } from '../../providers/halloween-provider';
 4 | 
 5 | const FAQSection: React.FC = () => {
 6 |     const { isHalloweenMode } = useHalloween();
 7 | 
 8 |     const faqs = isHalloweenMode ? [
 9 |         {
10 |             question: "What dark magic is Sticky?",
11 |             answer: "Sticky is a haunted digital parchment that captures your spectral thoughts and cursed ideas in an otherworldly realm."
12 |         },
13 |         {
14 |             question: "How does this supernatural force work?",
15 |             answer: "Through ancient rituals, Sticky allows you to manifest ethereal notes that float and dance across your digital void. Summon fellow spirits for real-time haunted collaboration perfect for ghostly brainstorming."
16 |         },
17 |         {
18 |             question: "Is there a cursed free version?",
19 |             answer: "Indeed! Our Spectral Starter plan includes haunted notes, spirit synchronization, and ouija board support. For more dark powers, venture into our Phantom Pro plan."
20 |         },
21 |         {
22 |             question: "Can I conjure Sticky across different vessels?",
23 |             answer: "Absolutely! Sticky's dark energy flows through all your devices, allowing you to channel your notes from any cursed computer, haunted tablet, or possessed smartphone."
24 |         },
25 |         {
26 |             question: "Are my supernatural secrets safe?",
27 |             answer: "Your mystical manuscripts are protected by powerful encryption spells and stored in our cursed cloud vault. We never share your arcane knowledge with other dimensional beings."
28 |         }
29 |     ] : [
30 |         {
31 |             question: "What is Sticky?",
32 |             answer: "Sticky is a digital sticky note app that helps you organize your thoughts, ideas, and tasks in a visual and intuitive way."
33 |         },
34 |         {
35 |             question: "How does Sticky work?",
36 |             answer: "Sticky allows you to create virtual sticky notes that you can organize, resize, and move around on a digital canvas. You can collaborate with others in real-time, making it perfect for brainstorming and project planning."
37 |         },
38 |         {
39 |             question: "Is there a free version of Sticky?",
40 |             answer: "Yes! We offer a free Sticky Starter plan that includes 50 sticky notes, cloud sync, and email support. For more features, check out our Sticky Pro plan."
41 |         },
42 |         {
43 |             question: "Can I use Sticky on multiple devices?",
44 |             answer: "Absolutely! Sticky syncs across all your devices, so you can access your notes on your computer, tablet, or smartphone."
45 |         },
46 |         {
47 |             question: "Is my data secure with Sticky?",
48 |             answer: "We take data security seriously. All your notes are encrypted and stored securely in the cloud. We never share your data with third parties."
49 |         }
50 |     ];
51 | 
52 |     return (
53 |         <section id="faq" className={`px-4 py-16 ${
54 |             isHalloweenMode ? 'bg-halloween-black/90' : 'bg-white dark:bg-darkBg'
55 |         }`}>
56 |             <div className="max-w-3xl mx-auto">
57 |                 <h2 className={`text-3xl sm:text-4xl font-bold text-center mb-8 sm:mb-12 ${
58 |                     isHalloweenMode ? 'text-halloween-orange' : 'text-text dark:text-text-dark'
59 |                 }`}>
60 |                     {isHalloweenMode ? 'Supernatural Inquiries' : 'FAQ'}
61 |                 </h2>
62 |                 <div className="space-y-4 flex flex-col items-center">
63 |                     {faqs.map((faq, index) => (
64 |                         <Accordion
65 |                             key={index}
66 |                             question={faq.question}
67 |                             answer={faq.answer}
68 |                             className={`w-full ${
69 |                                 isHalloweenMode ? 'halloween-accordion' : ''
70 |                             }`}
71 |                         />
72 |                     ))}
73 |                 </div>
74 |             </div>
75 |         </section>
76 |     );
77 | };
78 | 
79 | export default FAQSection;


--------------------------------------------------------------------------------
/src/components/lander/hero.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Button } from '../ui/button';
 3 | import { Check, Skull } from 'lucide-react';
 4 | import Preview from './preview';
 5 | import { useHalloween } from '../../providers/halloween-provider';
 6 | 
 7 | const HeroSection: React.FC = () => {
 8 |     const { isHalloweenMode } = useHalloween();
 9 | 
10 |     const scrollToSection = (id: string) => {
11 |         const element = document.getElementById(id);
12 |         if (element) {
13 |             element.scrollIntoView({ behavior: 'smooth' });
14 |         }
15 |     };
16 | 
17 |     const features = isHalloweenMode 
18 |         ? ['Haunt your ideas', 'Spooky organization', 'Ghostly collaboration']
19 |         : ['Capture ideas', 'Organize effortlessly', 'Collaborate in real-time'];
20 | 
21 |     return (
22 |         <>
23 |             <section className={`flex flex-col items-center justify-center min-h-screen px-4 py-8 sm:py-12 md:py-16 lg:py-20 overflow-hidden
24 |                 ${isHalloweenMode ? 'bg-gradient-to-b from-halloween-black to-halloween-purple/30' : ''}`}>
25 |                 <div className="text-center w-full max-w-5xl mx-auto">
26 |                     <h1 className={`mb-6 sm:mb-8 text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-extrabold tracking-tight
27 |                         ${isHalloweenMode ? 'text-halloween-orange animate-spooky-shake' : 'text-text dark:text-text-dark'}`}>
28 |                         {isHalloweenMode ? 'Spooky ideas that stick' : 'Ideas that stick'}
29 |                         <span className="relative inline-block ml-2">
30 |                             <span className={`text-base-secondary absolute -bottom-2 left-1/2 flex -translate-x-1/2 translate-y-full -rotate-3 
31 |                                 flex-nowrap items-center gap-1 whitespace-nowrap text-base sm:text-lg md:text-xl lg:text-2xl font-normal tracking-wide
32 |                                 ${isHalloweenMode ? 'text-halloween-orange' : ''}`}>
33 |                                 {isHalloweenMode ? 'if you dare 👻' : 'literally 😉'}
34 |                             </span>
35 |                         </span>
36 |                     </h1>
37 |                     <p className={`mb-8 sm:mb-10 text-xl sm:text-2xl md:text-3xl font-medium leading-relaxed max-w-2xl mx-auto
38 |                         ${isHalloweenMode ? 'text-halloween-ghost animate-float' : 'text-text dark:text-text-dark'}`}>
39 |                         {isHalloweenMode ? 'Where your thoughts come alive... muhahaha!' : 'Connect your thoughts in one sticky playground.'}
40 |                     </p>
41 |                     <div className="flex flex-col sm:flex-row items-center justify-center gap-6 sm:gap-8 mb-12 sm:mb-16">
42 |                         {features.map((feature, index) => (
43 |                             <div key={index} className="flex items-center justify-center gap-2">
44 |                                 {isHalloweenMode ? (
45 |                                     <Skull className="h-6 w-6 sm:h-7 sm:w-7 text-halloween-orange flex-shrink-0" strokeWidth={3} />
46 |                                 ) : (
47 |                                     <Check className="h-6 w-6 sm:h-7 sm:w-7 text-main flex-shrink-0" strokeWidth={3} />
48 |                                 )}
49 |                                 <span className={`text-lg sm:text-xl font-medium ${isHalloweenMode ? 'text-halloween-ghost' : ''}`}>
50 |                                     {feature}
51 |                                 </span>
52 |                             </div>
53 |                         ))}
54 |                     </div>
55 |                     <div className="flex flex-col items-center justify-center gap-4">
56 |                         <Button 
57 |                             onClick={() => scrollToSection('pricing')} 
58 |                             className={`text-xl sm:text-2xl px-8 sm:px-10 py-4 sm:py-5
59 |                                 ${isHalloweenMode ? 'bg-halloween-orange hover:bg-halloween-purple text-white' : ''}`}
60 |                         >
61 |                             {isHalloweenMode ? 'Enter if you dare!' : 'Try now!'}
62 |                         </Button>
63 |                     </div>
64 |                 </div>
65 |             </section>
66 |             <Preview />
67 |         </>
68 |     );
69 | };
70 | 
71 | export default HeroSection;


--------------------------------------------------------------------------------
/convex/users.ts:
--------------------------------------------------------------------------------
  1 | import { internal } from "./_generated/api";
  2 | import { internalMutation, internalQuery, mutation, query } from "./_generated/server";
  3 | import { v } from "convex/values";
  4 | 
  5 | export const createOrUpdateUser = mutation({
  6 |   args: {
  7 |     tokenIdentifier: v.string(),
  8 |     name: v.string(),
  9 |     email: v.optional(v.string()),
 10 |     profileImageUrl: v.optional(v.string()),
 11 |   },
 12 |   handler: async (ctx, args) => {
 13 |     const identity = await ctx.auth.getUserIdentity();
 14 |     if (!identity) {
 15 |       throw new Error("Called createOrUpdateUser without authentication present");
 16 |     }
 17 | 
 18 |     const user = await ctx.db
 19 |       .query("users")
 20 |       .withIndex("by_token", (q) => q.eq("tokenIdentifier", args.tokenIdentifier))
 21 |       .unique();
 22 | 
 23 |     if (user !== null) {
 24 |       await ctx.db.patch(user._id, { 
 25 |         name: args.name,
 26 |         profileImageUrl: args.profileImageUrl,
 27 |       });
 28 |       return user._id;
 29 |     }
 30 | 
 31 |     const userId = await ctx.db.insert("users", {
 32 |       name: args.name,
 33 |       email: args.email,
 34 |       tokenIdentifier: args.tokenIdentifier,
 35 |       profileImageUrl: args.profileImageUrl,
 36 |     });
 37 | 
 38 |      if (args.email) {
 39 |       await ctx.scheduler.runAfter(0, internal.emails.sendWelcomeEmail, {
 40 |         userId: userId,
 41 |         email: args.email,
 42 |         name: args.name
 43 |       });
 44 |     }
 45 | 
 46 |     return userId;
 47 |   },
 48 | });
 49 | 
 50 | export const getCurrentUser = query({
 51 |   handler: async (ctx) => {
 52 |     const identity = await ctx.auth.getUserIdentity();
 53 |     if (!identity) {
 54 |       throw new Error("No User Logged in.");
 55 |     }
 56 |     const user = await ctx.db
 57 |       .query("users")
 58 |       .withIndex("by_token", (q) => q.eq("tokenIdentifier", identity.tokenIdentifier.split('|')[1]))
 59 |       .unique();
 60 |     return user;
 61 |   }
 62 | })
 63 | 
 64 | export const storePlan = mutation({
 65 |   args: { plan: v.string() },
 66 |   handler: async (ctx, args) => {
 67 |     const identity = await ctx.auth.getUserIdentity();
 68 |     if (!identity) {
 69 |       throw new Error("Not authenticated");
 70 |     }
 71 | 
 72 |     const user = await ctx.db
 73 |       .query("users")
 74 |       .withIndex("by_token", (q) => q.eq("tokenIdentifier", identity.tokenIdentifier.split('|')[1]))
 75 |       .unique();
 76 | 
 77 |     if (!user) {
 78 |       throw new Error("User not found");
 79 |     }
 80 | 
 81 |     if(!user.onBoarding){
 82 |       await ctx.db.patch(user._id, { plan: args.plan, onBoarding: true });
 83 |       return true;
 84 |     }
 85 |     else{
 86 |       return true;
 87 |     }
 88 |   },
 89 | });
 90 | 
 91 | export const existingLogforEmail = internalQuery({
 92 |   args: {
 93 |     userId: v.id("users")
 94 |   },
 95 |   handler: async(ctx,args)=>{
 96 |     const existingLog = await ctx.db
 97 |     .query("emailLogs")
 98 |     .withIndex("by_user_and_type", (q) => 
 99 |       q.eq("userId", args.userId).eq("type", "welcome")
100 |     )
101 |     .first();
102 | 
103 |     if (existingLog) {
104 |       return true;
105 |     }
106 |     return false;
107 |   }
108 | })
109 | 
110 | export const LogEmailSend = internalMutation({
111 |   args: {
112 |     userId: v.id("users"),
113 |     type: v.string(),
114 |   },
115 |   handler: async (ctx, args) => {
116 |     try{
117 |       const res = await ctx.db.insert("emailLogs", {
118 |         userId: args.userId,
119 |         type: args.type,
120 |         sentAt: Date.now()
121 |       });
122 |       return res;
123 |     }
124 |     catch(error){
125 |       return error;
126 |     }
127 |   }
128 | })
129 | 
130 | export const backfillWelcomeEmails = internalMutation({
131 |   handler: async (ctx) => {
132 |     const users = await ctx.db.query("users").collect();
133 |     for (const user of users) {
134 |       const emailSent = await ctx.db
135 |         .query("emailLogs")
136 |         .withIndex("by_user_and_type", (q) => 
137 |           q.eq("userId", user._id).eq("type", "welcome")
138 |         )
139 |         .first();
140 |       
141 |       if (!emailSent && user.email) {
142 |         await ctx.scheduler.runAfter(0, internal.emails.sendWelcomeEmail, {
143 |           userId: user._id,
144 |           email: user.email,
145 |           name: user.name
146 |         });
147 |       }
148 |     }
149 |   },
150 | });


--------------------------------------------------------------------------------
/src/components/ui/toast.tsx:
--------------------------------------------------------------------------------
  1 | 'use client'
  2 | 
  3 | import * as ToastPrimitives from '@radix-ui/react-toast'
  4 | import { cva, type VariantProps } from 'class-variance-authority'
  5 | import { X } from 'lucide-react'
  6 | 
  7 | import * as React from 'react'
  8 | 
  9 | import { cn } from '../../libs/utils'
 10 | 
 11 | const ToastProvider = ToastPrimitives.Provider
 12 | 
 13 | const ToastViewport = React.forwardRef<
 14 |   React.ElementRef<typeof ToastPrimitives.Viewport>,
 15 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
 16 | >(({ className, ...props }, ref) => (
 17 |   <ToastPrimitives.Viewport
 18 |     ref={ref}
 19 |     className={cn(
 20 |       'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 font-base sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
 21 |       className,
 22 |     )}
 23 |     {...props}
 24 |   />
 25 | ))
 26 | ToastViewport.displayName = ToastPrimitives.Viewport.displayName
 27 | 
 28 | const toastVariants = cva(
 29 |   'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-base border-2 border-border dark:border-darkBorder shadow-light dark:shadow-dark p-6 pr-8 transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
 30 |   {
 31 |     variants: {
 32 |       variant: {
 33 |         default: 'bg-main text-black',
 34 |         destructive: 'bg-black text-white',
 35 |       },
 36 |     },
 37 |     defaultVariants: {
 38 |       variant: 'default',
 39 |     },
 40 |   },
 41 | )
 42 | 
 43 | const Toast = React.forwardRef<
 44 |   React.ElementRef<typeof ToastPrimitives.Root>,
 45 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
 46 |     VariantProps<typeof toastVariants>
 47 | >(({ className, variant, ...props }, ref) => {
 48 |   return (
 49 |     <ToastPrimitives.Root
 50 |       ref={ref}
 51 |       className={cn(toastVariants({ variant }), className)}
 52 |       {...props}
 53 |     />
 54 |   )
 55 | })
 56 | Toast.displayName = ToastPrimitives.Root.displayName
 57 | 
 58 | const ToastAction = React.forwardRef<
 59 |   React.ElementRef<typeof ToastPrimitives.Action>,
 60 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
 61 | >(({ className, ...props }, ref) => (
 62 |   <ToastPrimitives.Action
 63 |     ref={ref}
 64 |     className={cn(
 65 |       'inline-flex h-8 shrink-0 items-center justify-center rounded-base border-2 border-border dark:border-darkBorder bg-white px-3 text-sm font-base text-black ring-offset-white transition-colors disabled:pointer-events-none disabled:opacity-50',
 66 |       className,
 67 |     )}
 68 |     {...props}
 69 |   />
 70 | ))
 71 | ToastAction.displayName = ToastPrimitives.Action.displayName
 72 | 
 73 | const ToastClose = React.forwardRef<
 74 |   React.ElementRef<typeof ToastPrimitives.Close>,
 75 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
 76 | >(({ className, ...props }, ref) => (
 77 |   <ToastPrimitives.Close
 78 |     ref={ref}
 79 |     className={cn(
 80 |       'absolute right-2 top-2 rounded-md p-1 text-black text-inherit opacity-0 transition-opacity group-hover:opacity-100',
 81 |       className,
 82 |     )}
 83 |     toast-close=""
 84 |     {...props}
 85 |   >
 86 |     <X className="h-4 w-4" />
 87 |   </ToastPrimitives.Close>
 88 | ))
 89 | ToastClose.displayName = ToastPrimitives.Close.displayName
 90 | 
 91 | const ToastTitle = React.forwardRef<
 92 |   React.ElementRef<typeof ToastPrimitives.Title>,
 93 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
 94 | >(({ className, ...props }, ref) => (
 95 |   <ToastPrimitives.Title
 96 |     ref={ref}
 97 |     className={cn('text-sm font-heading', className)}
 98 |     {...props}
 99 |   />
100 | ))
101 | ToastTitle.displayName = ToastPrimitives.Title.displayName
102 | 
103 | const ToastDescription = React.forwardRef<
104 |   React.ElementRef<typeof ToastPrimitives.Description>,
105 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
106 | >(({ className, ...props }, ref) => (
107 |   <ToastPrimitives.Description
108 |     ref={ref}
109 |     className={cn('text-sm font-base', className)}
110 |     {...props}
111 |   />
112 | ))
113 | ToastDescription.displayName = ToastPrimitives.Description.displayName
114 | 
115 | type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
116 | 
117 | type ToastActionElement = React.ReactElement<typeof ToastAction>
118 | 
119 | export {
120 |   type ToastProps,
121 |   type ToastActionElement,
122 |   ToastProvider,
123 |   ToastViewport,
124 |   Toast,
125 |   ToastTitle,
126 |   ToastDescription,
127 |   ToastClose,
128 |   ToastAction,
129 | }


--------------------------------------------------------------------------------
/src/hooks/use-toast.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | // Inspired by react-hot-toast library
  4 | import * as React from "react"
  5 | 
  6 | import type {
  7 |   ToastActionElement,
  8 |   ToastProps,
  9 | } from "../components/ui/toast"
 10 | 
 11 | const TOAST_LIMIT = 1
 12 | const TOAST_REMOVE_DELAY = 1000000
 13 | 
 14 | type ToasterToast = ToastProps & {
 15 |   id: string
 16 |   title?: React.ReactNode
 17 |   description?: React.ReactNode
 18 |   action?: ToastActionElement
 19 | }
 20 | 
 21 | const actionTypes = {
 22 |   ADD_TOAST: "ADD_TOAST",
 23 |   UPDATE_TOAST: "UPDATE_TOAST",
 24 |   DISMISS_TOAST: "DISMISS_TOAST",
 25 |   REMOVE_TOAST: "REMOVE_TOAST",
 26 | } as const
 27 | 
 28 | let count = 0
 29 | 
 30 | function genId() {
 31 |   count = (count + 1) % Number.MAX_SAFE_INTEGER
 32 |   return count.toString()
 33 | }
 34 | 
 35 | type ActionType = typeof actionTypes
 36 | 
 37 | type Action =
 38 |   | {
 39 |       type: ActionType["ADD_TOAST"]
 40 |       toast: ToasterToast
 41 |     }
 42 |   | {
 43 |       type: ActionType["UPDATE_TOAST"]
 44 |       toast: Partial<ToasterToast>
 45 |     }
 46 |   | {
 47 |       type: ActionType["DISMISS_TOAST"]
 48 |       toastId?: ToasterToast["id"]
 49 |     }
 50 |   | {
 51 |       type: ActionType["REMOVE_TOAST"]
 52 |       toastId?: ToasterToast["id"]
 53 |     }
 54 | 
 55 | interface State {
 56 |   toasts: ToasterToast[]
 57 | }
 58 | 
 59 | const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
 60 | 
 61 | const addToRemoveQueue = (toastId: string) => {
 62 |   if (toastTimeouts.has(toastId)) {
 63 |     return
 64 |   }
 65 | 
 66 |   const timeout = setTimeout(() => {
 67 |     toastTimeouts.delete(toastId)
 68 |     dispatch({
 69 |       type: "REMOVE_TOAST",
 70 |       toastId: toastId,
 71 |     })
 72 |   }, TOAST_REMOVE_DELAY)
 73 | 
 74 |   toastTimeouts.set(toastId, timeout)
 75 | }
 76 | 
 77 | export const reducer = (state: State, action: Action): State => {
 78 |   switch (action.type) {
 79 |     case "ADD_TOAST":
 80 |       return {
 81 |         ...state,
 82 |         toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
 83 |       }
 84 | 
 85 |     case "UPDATE_TOAST":
 86 |       return {
 87 |         ...state,
 88 |         toasts: state.toasts.map((t) =>
 89 |           t.id === action.toast.id ? { ...t, ...action.toast } : t
 90 |         ),
 91 |       }
 92 | 
 93 |     case "DISMISS_TOAST": {
 94 |       const { toastId } = action
 95 | 
 96 |       // ! Side effects ! - This could be extracted into a dismissToast() action,
 97 |       // but I'll keep it here for simplicity
 98 |       if (toastId) {
 99 |         addToRemoveQueue(toastId)
100 |       } else {
101 |         state.toasts.forEach((toast) => {
102 |           addToRemoveQueue(toast.id)
103 |         })
104 |       }
105 | 
106 |       return {
107 |         ...state,
108 |         toasts: state.toasts.map((t) =>
109 |           t.id === toastId || toastId === undefined
110 |             ? {
111 |                 ...t,
112 |                 open: false,
113 |               }
114 |             : t
115 |         ),
116 |       }
117 |     }
118 |     case "REMOVE_TOAST":
119 |       if (action.toastId === undefined) {
120 |         return {
121 |           ...state,
122 |           toasts: [],
123 |         }
124 |       }
125 |       return {
126 |         ...state,
127 |         toasts: state.toasts.filter((t) => t.id !== action.toastId),
128 |       }
129 |   }
130 | }
131 | 
132 | const listeners: Array<(state: State) => void> = []
133 | 
134 | let memoryState: State = { toasts: [] }
135 | 
136 | function dispatch(action: Action) {
137 |   memoryState = reducer(memoryState, action)
138 |   listeners.forEach((listener) => {
139 |     listener(memoryState)
140 |   })
141 | }
142 | 
143 | type Toast = Omit<ToasterToast, "id">
144 | 
145 | function toast({ ...props }: Toast) {
146 |   const id = genId()
147 | 
148 |   const update = (props: ToasterToast) =>
149 |     dispatch({
150 |       type: "UPDATE_TOAST",
151 |       toast: { ...props, id },
152 |     })
153 |   const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
154 | 
155 |   dispatch({
156 |     type: "ADD_TOAST",
157 |     toast: {
158 |       ...props,
159 |       id,
160 |       open: true,
161 |       onOpenChange: (open : any) => {
162 |         if (!open) dismiss()
163 |       },
164 |     },
165 |   })
166 | 
167 |   return {
168 |     id: id,
169 |     dismiss,
170 |     update,
171 |   }
172 | }
173 | 
174 | function useToast() {
175 |   const [state, setState] = React.useState<State>(memoryState)
176 | 
177 |   React.useEffect(() => {
178 |     listeners.push(setState)
179 |     return () => {
180 |       const index = listeners.indexOf(setState)
181 |       if (index > -1) {
182 |         listeners.splice(index, 1)
183 |       }
184 |     }
185 |   }, [state])
186 | 
187 |   return {
188 |     ...state,
189 |     toast,
190 |     dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
191 |   }
192 | }
193 | 
194 | export { useToast, toast }
195 | 


--------------------------------------------------------------------------------
/convex/_generated/api.d.ts:
--------------------------------------------------------------------------------
  1 | /* prettier-ignore-start */
  2 | 
  3 | /* eslint-disable */
  4 | /**
  5 |  * Generated `api` utility.
  6 |  *
  7 |  * THIS CODE IS AUTOMATICALLY GENERATED.
  8 |  *
  9 |  * To regenerate, run `npx convex dev`.
 10 |  * @module
 11 |  */
 12 | 
 13 | import type * as boardSharing from "../boardSharing.js";
 14 | import type * as boards from "../boards.js";
 15 | import type * as emails from "../emails.js";
 16 | import type * as notes from "../notes.js";
 17 | import type * as presence from "../presence.js";
 18 | import type * as support from "../support.js";
 19 | import type * as users from "../users.js";
 20 | import type * as welcomeEmail from "../welcomeEmail.js";
 21 | 
 22 | import type {
 23 |   ApiFromModules,
 24 |   FilterApi,
 25 |   FunctionReference,
 26 | } from "convex/server";
 27 | /**
 28 |  * A utility for referencing Convex functions in your app's API.
 29 |  *
 30 |  * Usage:
 31 |  * ```js
 32 |  * const myFunctionReference = api.myModule.myFunction;
 33 |  * ```
 34 |  */
 35 | declare const fullApi: ApiFromModules<{
 36 |   boardSharing: typeof boardSharing;
 37 |   boards: typeof boards;
 38 |   emails: typeof emails;
 39 |   notes: typeof notes;
 40 |   presence: typeof presence;
 41 |   support: typeof support;
 42 |   users: typeof users;
 43 |   welcomeEmail: typeof welcomeEmail;
 44 | }>;
 45 | declare const fullApiWithMounts: typeof fullApi;
 46 | 
 47 | export declare const api: FilterApi<
 48 |   typeof fullApiWithMounts,
 49 |   FunctionReference<any, "public">
 50 | >;
 51 | export declare const internal: FilterApi<
 52 |   typeof fullApiWithMounts,
 53 |   FunctionReference<any, "internal">
 54 | >;
 55 | 
 56 | export declare const components: {
 57 |   aggregateBoardsByUser: {
 58 |     btree: {
 59 |       aggregateBetween: FunctionReference<
 60 |         "query",
 61 |         "internal",
 62 |         { k1?: any; k2?: any },
 63 |         { count: number; sum: number }
 64 |       >;
 65 |       atNegativeOffset: FunctionReference<
 66 |         "query",
 67 |         "internal",
 68 |         { k1?: any; k2?: any; offset: number },
 69 |         { k: any; s: number; v: any }
 70 |       >;
 71 |       atOffset: FunctionReference<
 72 |         "query",
 73 |         "internal",
 74 |         { k1?: any; k2?: any; offset: number },
 75 |         { k: any; s: number; v: any }
 76 |       >;
 77 |       count: FunctionReference<"query", "internal", {}, any>;
 78 |       get: FunctionReference<
 79 |         "query",
 80 |         "internal",
 81 |         { key: any },
 82 |         null | { k: any; s: number; v: any }
 83 |       >;
 84 |       offset: FunctionReference<
 85 |         "query",
 86 |         "internal",
 87 |         { k1?: any; key: any },
 88 |         number
 89 |       >;
 90 |       offsetUntil: FunctionReference<
 91 |         "query",
 92 |         "internal",
 93 |         { k2?: any; key: any },
 94 |         number
 95 |       >;
 96 |       paginate: FunctionReference<
 97 |         "query",
 98 |         "internal",
 99 |         {
100 |           cursor?: string;
101 |           k1?: any;
102 |           k2?: any;
103 |           limit: number;
104 |           order: "asc" | "desc";
105 |         },
106 |         {
107 |           cursor: string;
108 |           isDone: boolean;
109 |           page: Array<{ k: any; s: number; v: any }>;
110 |         }
111 |       >;
112 |       sum: FunctionReference<"query", "internal", {}, number>;
113 |       validate: FunctionReference<"query", "internal", {}, any>;
114 |     };
115 |     inspect: {
116 |       display: FunctionReference<"query", "internal", {}, any>;
117 |       dump: FunctionReference<"query", "internal", {}, string>;
118 |       inspectNode: FunctionReference<
119 |         "query",
120 |         "internal",
121 |         { node?: string },
122 |         null
123 |       >;
124 |     };
125 |     public: {
126 |       clear: FunctionReference<
127 |         "mutation",
128 |         "internal",
129 |         { maxNodeSize?: number; rootLazy?: boolean },
130 |         null
131 |       >;
132 |       deleteIfExists: FunctionReference<
133 |         "mutation",
134 |         "internal",
135 |         { key: any },
136 |         any
137 |       >;
138 |       delete_: FunctionReference<"mutation", "internal", { key: any }, null>;
139 |       init: FunctionReference<
140 |         "mutation",
141 |         "internal",
142 |         { maxNodeSize?: number; rootLazy?: boolean },
143 |         null
144 |       >;
145 |       insert: FunctionReference<
146 |         "mutation",
147 |         "internal",
148 |         { key: any; summand?: number; value: any },
149 |         null
150 |       >;
151 |       makeRootLazy: FunctionReference<"mutation", "internal", {}, null>;
152 |       replace: FunctionReference<
153 |         "mutation",
154 |         "internal",
155 |         { currentKey: any; newKey: any; summand?: number; value: any },
156 |         null
157 |       >;
158 |       replaceOrInsert: FunctionReference<
159 |         "mutation",
160 |         "internal",
161 |         { currentKey: any; newKey: any; summand?: number; value: any },
162 |         any
163 |       >;
164 |     };
165 |   };
166 | };
167 | 
168 | /* prettier-ignore-end */
169 | 


--------------------------------------------------------------------------------
/src/components/lander/nav.tsx:
--------------------------------------------------------------------------------
  1 | import { Link } from 'react-router-dom';
  2 | import Logo from "../logo";
  3 | import { Menu, X } from "lucide-react";
  4 | import { useState } from "react";
  5 | import { Button } from "../ui/button";
  6 | import { useHalloween } from '../../providers/halloween-provider';
  7 | import { HalloweenSwitcher } from '../halloween-switcher';
  8 | 
  9 | const NavBar = () => {
 10 |     const [isMenuOpen, setIsMenuOpen] = useState(false);
 11 |     const { isHalloweenMode } = useHalloween();
 12 | 
 13 |     const scrollToSection = (id: string) => {
 14 |         const element = document.getElementById(id);
 15 |         if (element) {
 16 |             element.scrollIntoView({ behavior: 'smooth' });
 17 |         }
 18 |         setIsMenuOpen(false);
 19 |     };
 20 | 
 21 |     return (
 22 |         <nav className="fixed left-0 top-0 z-50 w-full px-4 pt-4">
 23 |             <div className={`z-50 mx-auto flex h-14 w-full max-w-[1024px] items-center justify-between rounded-base border px-4 shadow-light
 24 |                 ${isHalloweenMode
 25 |                     ? 'border-halloween-orange/50 bg-halloween-black/90 text-halloween-ghost'
 26 |                     : 'border-border bg-white text-text dark:border-darkBorder dark:bg-secondaryBlack dark:text-text-dark dark:shadow-dark'}`}>
 27 |                 <Link to="/" className="flex items-center">
 28 |                     <Logo className={`h-8 w-8 mr-2 ${isHalloweenMode ? 'animate-spooky-shake' : ''}`} />
 29 |                     <span className={`text-lg font-heading sm:text-base ${isHalloweenMode ? 'text-halloween-orange' : ''
 30 |                         }`}>
 31 |                         Sticky
 32 |                     </span>
 33 |                 </Link>
 34 | 
 35 |                 <div className="hidden sm:flex items-center space-x-8 text-sm flex-grow justify-center">
 36 |                     <button
 37 |                         className={`transition-colors ${isHalloweenMode ? 'hover:text-halloween-orange' : 'hover:text-main'
 38 |                             }`}
 39 |                         onClick={() => scrollToSection('pricing')}
 40 |                     >
 41 |                         {isHalloweenMode ? 'Cursed Plans' : 'Pricing'}
 42 |                     </button>
 43 |                     <button
 44 |                         className={`transition-colors ${isHalloweenMode ? 'hover:text-halloween-orange' : 'hover:text-main'
 45 |                             }`}
 46 |                         onClick={() => scrollToSection('faq')}
 47 |                     >
 48 |                         {isHalloweenMode ? 'Dark Secrets' : 'FAQ'}
 49 |                     </button>
 50 |                 </div>
 51 | 
 52 |                 <div className="hidden sm:flex items-center space-x-4">
 53 |                     <HalloweenSwitcher />
 54 |                     <Link to="/signin">
 55 |                         <Button className={isHalloweenMode
 56 |                             ? 'bg-halloween-orange hover:bg-halloween-purple text-white'
 57 |                             : 'bg-white'
 58 |                         } onClick={() => { }}>
 59 |                             {isHalloweenMode ? 'Enter Portal' : 'Sign In'}
 60 |                         </Button>
 61 |                     </Link>
 62 |                 </div>
 63 | 
 64 |                 <button
 65 |                     className="sm:hidden"
 66 |                     onClick={() => setIsMenuOpen(!isMenuOpen)}
 67 |                 >
 68 |                     {isMenuOpen
 69 |                         ? <X className={`h-6 w-6 ${isHalloweenMode ? 'text-halloween-orange' : ''}`} />
 70 |                         : <Menu className={`h-6 w-6 ${isHalloweenMode ? 'text-halloween-orange' : ''}`} />
 71 |                     }
 72 |                 </button>
 73 |             </div>
 74 | 
 75 |             {isMenuOpen && (
 76 |                 <div className={`sm:hidden relative top-full left-0 w-full mt-2 rounded-base border ${isHalloweenMode
 77 |                         ? 'bg-halloween-black/90 border-halloween-orange/50 text-halloween-ghost'
 78 |                         : 'bg-white dark:bg-secondaryBlack border-border dark:border-darkBorder'
 79 |                     }`}>
 80 |                     <div className="flex flex-col items-center py-4 space-y-4">
 81 |                         <button
 82 |                             className={`transition-colors ${isHalloweenMode ? 'hover:text-halloween-orange' : 'hover:text-main'
 83 |                                 }`}
 84 |                             onClick={() => scrollToSection('pricing')}
 85 |                         >
 86 |                             {isHalloweenMode ? 'Cursed Plans' : 'Pricing'}
 87 |                         </button>
 88 |                         <button
 89 |                             className={`transition-colors ${isHalloweenMode ? 'hover:text-halloween-orange' : 'hover:text-main'
 90 |                                 }`}
 91 |                             onClick={() => scrollToSection('faq')}
 92 |                         >
 93 |                             {isHalloweenMode ? 'Dark Secrets' : 'FAQ'}
 94 |                         </button>
 95 |                         <div className="flex items-center space-x-4">
 96 |                             <HalloweenSwitcher />
 97 |                             <Link to="/signin">
 98 |                                 <Button className={isHalloweenMode
 99 |                                     ? 'bg-halloween-orange hover:bg-halloween-purple text-white'
100 |                                     : 'bg-white'
101 |                                 } onClick={() => { }}>
102 |                                     {isHalloweenMode ? 'Enter Portal' : 'Sign In'}
103 |                                 </Button>
104 |                             </Link>
105 |                         </div>
106 |                     </div>
107 |                 </div>
108 |             )}
109 |         </nav>
110 |     );
111 | }
112 | 
113 | export default NavBar;


--------------------------------------------------------------------------------
/convex/_generated/server.d.ts:
--------------------------------------------------------------------------------
  1 | /* prettier-ignore-start */
  2 | 
  3 | /* eslint-disable */
  4 | /**
  5 |  * Generated utilities for implementing server-side Convex query and mutation functions.
  6 |  *
  7 |  * THIS CODE IS AUTOMATICALLY GENERATED.
  8 |  *
  9 |  * To regenerate, run `npx convex dev`.
 10 |  * @module
 11 |  */
 12 | 
 13 | import {
 14 |   ActionBuilder,
 15 |   AnyComponents,
 16 |   HttpActionBuilder,
 17 |   MutationBuilder,
 18 |   QueryBuilder,
 19 |   GenericActionCtx,
 20 |   GenericMutationCtx,
 21 |   GenericQueryCtx,
 22 |   GenericDatabaseReader,
 23 |   GenericDatabaseWriter,
 24 |   FunctionReference,
 25 | } from "convex/server";
 26 | import type { DataModel } from "./dataModel.js";
 27 | 
 28 | type GenericCtx =
 29 |   | GenericActionCtx<DataModel>
 30 |   | GenericMutationCtx<DataModel>
 31 |   | GenericQueryCtx<DataModel>;
 32 | 
 33 | /**
 34 |  * Define a query in this Convex app's public API.
 35 |  *
 36 |  * This function will be allowed to read your Convex database and will be accessible from the client.
 37 |  *
 38 |  * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
 39 |  * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
 40 |  */
 41 | export declare const query: QueryBuilder<DataModel, "public">;
 42 | 
 43 | /**
 44 |  * Define a query that is only accessible from other Convex functions (but not from the client).
 45 |  *
 46 |  * This function will be allowed to read from your Convex database. It will not be accessible from the client.
 47 |  *
 48 |  * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
 49 |  * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
 50 |  */
 51 | export declare const internalQuery: QueryBuilder<DataModel, "internal">;
 52 | 
 53 | /**
 54 |  * Define a mutation in this Convex app's public API.
 55 |  *
 56 |  * This function will be allowed to modify your Convex database and will be accessible from the client.
 57 |  *
 58 |  * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
 59 |  * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
 60 |  */
 61 | export declare const mutation: MutationBuilder<DataModel, "public">;
 62 | 
 63 | /**
 64 |  * Define a mutation that is only accessible from other Convex functions (but not from the client).
 65 |  *
 66 |  * This function will be allowed to modify your Convex database. It will not be accessible from the client.
 67 |  *
 68 |  * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
 69 |  * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
 70 |  */
 71 | export declare const internalMutation: MutationBuilder<DataModel, "internal">;
 72 | 
 73 | /**
 74 |  * Define an action in this Convex app's public API.
 75 |  *
 76 |  * An action is a function which can execute any JavaScript code, including non-deterministic
 77 |  * code and code with side-effects, like calling third-party services.
 78 |  * They can be run in Convex's JavaScript environment or in Node.js using the "use node" directive.
 79 |  * They can interact with the database indirectly by calling queries and mutations using the {@link ActionCtx}.
 80 |  *
 81 |  * @param func - The action. It receives an {@link ActionCtx} as its first argument.
 82 |  * @returns The wrapped action. Include this as an `export` to name it and make it accessible.
 83 |  */
 84 | export declare const action: ActionBuilder<DataModel, "public">;
 85 | 
 86 | /**
 87 |  * Define an action that is only accessible from other Convex functions (but not from the client).
 88 |  *
 89 |  * @param func - The function. It receives an {@link ActionCtx} as its first argument.
 90 |  * @returns The wrapped function. Include this as an `export` to name it and make it accessible.
 91 |  */
 92 | export declare const internalAction: ActionBuilder<DataModel, "internal">;
 93 | 
 94 | /**
 95 |  * Define an HTTP action.
 96 |  *
 97 |  * This function will be used to respond to HTTP requests received by a Convex
 98 |  * deployment if the requests matches the path and method where this action
 99 |  * is routed. Be sure to route your action in `convex/http.js`.
100 |  *
101 |  * @param func - The function. It receives an {@link ActionCtx} as its first argument.
102 |  * @returns The wrapped function. Import this function from `convex/http.js` and route it to hook it up.
103 |  */
104 | export declare const httpAction: HttpActionBuilder;
105 | 
106 | /**
107 |  * A set of services for use within Convex query functions.
108 |  *
109 |  * The query context is passed as the first argument to any Convex query
110 |  * function run on the server.
111 |  *
112 |  * This differs from the {@link MutationCtx} because all of the services are
113 |  * read-only.
114 |  */
115 | export type QueryCtx = GenericQueryCtx<DataModel>;
116 | 
117 | /**
118 |  * A set of services for use within Convex mutation functions.
119 |  *
120 |  * The mutation context is passed as the first argument to any Convex mutation
121 |  * function run on the server.
122 |  */
123 | export type MutationCtx = GenericMutationCtx<DataModel>;
124 | 
125 | /**
126 |  * A set of services for use within Convex action functions.
127 |  *
128 |  * The action context is passed as the first argument to any Convex action
129 |  * function run on the server.
130 |  */
131 | export type ActionCtx = GenericActionCtx<DataModel>;
132 | 
133 | /**
134 |  * An interface to read from the database within Convex query functions.
135 |  *
136 |  * The two entry points are {@link DatabaseReader.get}, which fetches a single
137 |  * document by its {@link Id}, or {@link DatabaseReader.query}, which starts
138 |  * building a query.
139 |  */
140 | export type DatabaseReader = GenericDatabaseReader<DataModel>;
141 | 
142 | /**
143 |  * An interface to read from and write to the database within Convex mutation
144 |  * functions.
145 |  *
146 |  * Convex guarantees that all writes within a single mutation are
147 |  * executed atomically, so you never have to worry about partial writes leaving
148 |  * your data in an inconsistent state. See [the Convex Guide](https://docs.convex.dev/understanding/convex-fundamentals/functions#atomicity-and-optimistic-concurrency-control)
149 |  * for the guarantees Convex provides your functions.
150 |  */
151 | export type DatabaseWriter = GenericDatabaseWriter<DataModel>;
152 | 
153 | /* prettier-ignore-end */
154 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # sticky
  2 | Ideas that Stick, literally
  3 | 
  4 | ![Sticky Logo](https://github.com/hamzasaleem2/sticky/blob/main/public/sticky-logo.png)
  5 | 
  6 | ## About Sticky
  7 | 
  8 | Sticky is a digital sticky note application designed to help you organize your thoughts, ideas, and tasks in a visual and intuitive way. Organize thoughts, collaborate in real-time, and access your ideas from anywhere. Try it free today!
  9 | 
 10 | ![Board](https://github.com/hamzasaleem2/sticky/blob/main/public/board.png)
 11 | 
 12 | ### Key Features:
 13 | 
 14 | - Create and organize digital sticky notes
 15 | - Collaborate with others in real-time
 16 | - Customize note colors and sizes
 17 | - Drag and drop interface for easy organization
 18 | - Cloud sync across devices
 19 | - User-friendly and intuitive design
 20 | 
 21 | Sticky is perfect for brainstorming sessions, project planning, or simply keeping track of your daily tasks. Whether you're a student, professional, or creative thinker, Sticky helps you capture and organize your ideas effortlessly.
 22 | 
 23 | ## Getting Started
 24 | 
 25 | To get started with Sticky, visit our website at [https://sticky.today](https://sticky.today) and sign up for a free account. You can start creating and organizing your sticky notes right away!
 26 | 
 27 | # **Sticky: Self-Hosting Guide**
 28 | 
 29 | https://sticky.today
 30 | 
 31 | ## **Introduction**
 32 | 
 33 | Sticky is an open-source digital sticky note application designed to help users organize thoughts, collaborate in real-time, and access ideas from anywhere. This guide will walk you through the process of self-hosting Sticky on your own infrastructure.
 34 | 
 35 | ## **Prerequisites**
 36 | 
 37 | Before you begin, ensure you have the following:
 38 | 
 39 | - Node.js (version 14 or higher) & npm (Node Package Manager) / Bun (better)
 40 | - Git
 41 | - A [Convex](https://Convex.dev) account (for database and backend services)
 42 | - A [Clerk](https://clerk.com) account (for authentication)
 43 | - A [PostHog](https://posthog.com) account (for analytics, optional)
 44 | 
 45 | ## **Step 1: Clone the Repository**
 46 | 
 47 | First, clone the Sticky repository to your local machine:
 48 | 
 49 | git clone https://github.com/hamzasaleem2/sticky.git
 50 | 
 51 | cd sticky
 52 | 
 53 | ## **Step 2: Install Dependencies**
 54 | 
 55 | Install the project dependencies using npm:
 56 | 
 57 | npm install
 58 | 
 59 | ## **Step 3: Set Up Environment Variables**
 60 | 
 61 | Create a .env file in the root directory of the project. Use the .template.env file as a reference:
 62 | 
 63 | # Deployment used by `npx convex dev`
 64 | 
 65 | CONVEX_DEPLOYMENT=
 66 | 
 67 | VITE_CONVEX_URL=
 68 | 
 69 | VITE_CLERK_PUBLISHABLE_KEY=
 70 | 
 71 | VITE_POSTHOG_KEY=
 72 | 
 73 | VITE_POSTHOG_API_HOST=
 74 | 
 75 | Fill in the following environment variables:
 76 | 
 77 | - CONVEX_DEPLOYMENT: Your Convex deployment URL
 78 | - VITE_CONVEX_URL: Your Convex URL for client-side usage
 79 | - VITE_CLERK_PUBLISHABLE_KEY: Your Clerk publishable key
 80 | - VITE_POSTHOG_KEY: Your PostHog API key (optional)
 81 | - VITE_POSTHOG_API_HOST: Your PostHog API host (optional)
 82 | 
 83 | ## **Step 4: Configure Convex**
 84 | 
 85 | - Set up a Convex account and create a new project.
 86 | - Copy the Convex deployment URL and paste it into your .env file.
 87 | - Update the convex/auth.config.ts file with your Clerk domain:
 88 | 
 89 | `export default {`
 90 | 
 91 | `providers: [`
 92 | 
 93 | `{`
 94 | 
 95 | `domain: process.env.CLERK_JWT_ISSUER_DOMAIN,`
 96 | 
 97 | `applicationID: "convex",`
 98 | 
 99 | `},`
100 | 
101 | `]`
102 | 
103 | `};`
104 | 
105 | Replace process.env.CLERK_JWT_ISSUER_DOMAIN with your actual Clerk domain.
106 | 
107 | ## **Step 5: Configure Clerk**
108 | 
109 | - Set up a Clerk account and create a new application.
110 | - Copy the Clerk publishable key and paste it into your .env file.
111 | - Configure Clerk to use Convex as a JWT template.
112 | 
113 | ## **Step 6: Deploy Convex Functions**
114 | 
115 | Deploy your Convex functions to make them available:
116 | 
117 | npx convex dev
118 | 
119 | This command will push your functions to the Convex cloud and keep them in sync as you make changes.
120 | 
121 | ## **Step 8: Build the Frontend**
122 | 
123 | Build the frontend application:
124 | 
125 | npm run build
126 | 
127 | This command will create a production-ready build in the dist directory.
128 | 
129 | ## **Step 9: Serve the Application**
130 | 
131 | You can serve the built application using a static file server. For example, using serve:
132 | 
133 | npx serve -s dist
134 | 
135 | ## **Additional Configuration**
136 | 
137 | ### **PostHog Analytics (Optional)**
138 | 
139 | If you want to use PostHog for analytics, make sure to set the VITE_POSTHOG_KEY and VITE_POSTHOG_API_HOST in your .env file.
140 | 
141 | ### **Customization**
142 | 
143 | You can customize the application by modifying the following files:
144 | 
145 | - src/components/lander: Landing page components
146 | - src/authenticated: Main application components
147 | - src/components/ui: Reusable UI components
148 | 
149 | ### **Scaling Considerations**
150 | 
151 | As your user base grows, consider the following:
152 | 
153 | - Monitor your Convex usage and upgrade your plan if necessary.
154 | - Optimize database queries and indexes for better performance.
155 | - Implement caching mechanisms for frequently accessed data.
156 | 
157 | ## **Troubleshooting**
158 | 
159 | If you encounter issues:
160 | 
161 | - Check the browser console for frontend errors.
162 | - Review Convex logs for backend errors.
163 | - Ensure all environment variables are correctly set.
164 | - Verify that your Clerk and Convex configurations are correct.
165 | 
166 | ## Open Source
167 | 
168 | Sticky is an open-source project. We believe in transparency and community-driven development. Feel free to contribute to our GitHub repository:
169 | 
170 | [https://github.com/hamzasaleem2/sticky](https://github.com/hamzasaleem2/sticky)
171 | 
172 | ## Star History
173 | 
174 | <a href="https://star-history.com/#hamzasaleem2/sticky&Date">
175 |  <picture>
176 |    <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=hamzasaleem2/sticky&type=Date&theme=dark" />
177 |    <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=hamzasaleem2/sticky&type=Date" />
178 |    <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=hamzasaleem2/sticky&type=Date" />
179 |  </picture>
180 | </a>
181 | 
182 | ## License
183 | 
184 | Sticky is released under the MIT License. See the LICENSE file for more details.
185 | 


--------------------------------------------------------------------------------
/src/authenticated/Note.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useState, useRef, useEffect, useCallback } from 'react';
  2 | import { Id } from '../../convex/_generated/dataModel';
  3 | import NoteControls from './NoteControls';
  4 | 
  5 | interface NoteProps {
  6 |     note: {
  7 |         _id: Id<"notes"> | 'tempId';
  8 |         content: string;
  9 |         color: string;
 10 |         position: { x: number; y: number };
 11 |         size: { width: number; height: number };
 12 |         zIndex: number;
 13 |     };
 14 |     isSelected: boolean;
 15 |     onSelect: () => void;
 16 |     onUpdate: (noteId: Id<"notes"> | 'tempId', updates: any) => void;
 17 |     onDelete: (noteId: Id<"notes"> | 'tempId') => void;
 18 |     setIsDragging: (isDragging: boolean) => void;
 19 | }
 20 | 
 21 | const Note: React.FC<NoteProps> = ({ note, isSelected, onSelect, onUpdate, onDelete, setIsDragging }) => {
 22 |     const [isDragging, setIsNoteDragging] = useState(false);
 23 |     const [isResizing, setIsResizing] = useState(false);
 24 |     const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
 25 |     const [resizeHandle, setResizeHandle] = useState<string | null>(null);
 26 |     const [isTyping, setIsTyping] = useState(false);
 27 |     const noteRef = useRef<HTMLDivElement>(null);
 28 |     const typingTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 29 | 
 30 |     const handleStart = (e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>) => {
 31 |         if (noteRef.current && !isResizing) {
 32 |             const rect = noteRef.current.getBoundingClientRect();
 33 |             const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
 34 |             const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
 35 |             setDragOffset({
 36 |                 x: clientX - rect.left,
 37 |                 y: clientY - rect.top
 38 |             });
 39 |             setIsNoteDragging(true);
 40 |             setIsDragging(true);
 41 |             onSelect();
 42 |         }
 43 |     };
 44 | 
 45 |     const handleMove = useCallback((e: MouseEvent | TouchEvent) => {
 46 |         if (isDragging && noteRef.current) {
 47 |             const parentRect = noteRef.current.offsetParent?.getBoundingClientRect();
 48 |             if (parentRect) {
 49 |                 const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
 50 |                 const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
 51 |                 const newX = clientX - parentRect.left - dragOffset.x;
 52 |                 const newY = clientY - parentRect.top - dragOffset.y;
 53 |                 requestAnimationFrame(() => {
 54 |                     onUpdate(note._id, { position: { x: newX, y: newY } });
 55 |                 });
 56 |             }
 57 |         } else if (isResizing && noteRef.current) {
 58 |             const parentRect = noteRef.current.offsetParent?.getBoundingClientRect();
 59 |             if (parentRect) {
 60 |                 const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
 61 |                 const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
 62 |                 let newWidth = note.size.width;
 63 |                 let newHeight = note.size.height;
 64 |                 let newX = note.position.x;
 65 |                 let newY = note.position.y;
 66 |     
 67 |                 if (resizeHandle?.includes('e')) {
 68 |                     newWidth = clientX - parentRect.left - note.position.x;
 69 |                 }
 70 |                 if (resizeHandle?.includes('s')) {
 71 |                     newHeight = clientY - parentRect.top - note.position.y;
 72 |                 }
 73 |                 if (resizeHandle?.includes('w')) {
 74 |                     newWidth = note.size.width + (note.position.x - (clientX - parentRect.left));
 75 |                     newX = clientX - parentRect.left;
 76 |                 }
 77 |                 if (resizeHandle?.includes('n')) {
 78 |                     newHeight = note.size.height + (note.position.y - (clientY - parentRect.top));
 79 |                     newY = clientY - parentRect.top;
 80 |                 }
 81 |     
 82 |                 onUpdate(note._id, {
 83 |                     size: { width: Math.max(newWidth, 100), height: Math.max(newHeight, 100) },
 84 |                     position: { x: newX, y: newY }
 85 |                 });
 86 |             }
 87 |         }
 88 |     }, [isDragging, isResizing, note._id, onUpdate, dragOffset, resizeHandle, note.position.x, note.position.y, note.size.width, note.size.height]);
 89 | 
 90 |     const handleMouseUp = () => {
 91 |         setIsNoteDragging(false);
 92 |         setIsDragging(false);
 93 |         setIsResizing(false);
 94 |         setResizeHandle(null);
 95 |     };
 96 | 
 97 |     useEffect(() => {
 98 |         if (isDragging || isResizing) {
 99 |             window.addEventListener('mousemove', handleMove);
100 |             window.addEventListener('mouseup', handleMouseUp);
101 |             window.addEventListener('touchmove', handleMove);
102 |             window.addEventListener('touchend', handleMouseUp);
103 |         }
104 |         return () => {
105 |             window.removeEventListener('mousemove', handleMove);
106 |             window.removeEventListener('mouseup', handleMouseUp);
107 |             window.removeEventListener('touchmove', handleMove);
108 |             window.removeEventListener('touchend', handleMouseUp);
109 |         };
110 |     }, [isDragging, isResizing, handleMove]);
111 | 
112 |     const handleTextareaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
113 |         onUpdate(note._id, { content: e.target.value });
114 |         setIsTyping(true);
115 | 
116 |         if (typingTimeoutRef.current) {
117 |             clearTimeout(typingTimeoutRef.current);
118 |         }
119 | 
120 |         typingTimeoutRef.current = setTimeout(() => {
121 |             setIsTyping(false);
122 |         }, 1000);
123 |     };
124 | 
125 |     const handleResizeStart = (handle: string) => (e: React.MouseEvent) => {
126 |         e.stopPropagation();
127 |         setIsResizing(true);
128 |         setResizeHandle(handle);
129 |         onSelect();
130 |     };
131 | 
132 |     return (
133 |             <div
134 |                 ref={noteRef}
135 |                 style={{
136 |                     position: 'absolute',
137 |                     left: note.position.x,
138 |                     top: note.position.y,
139 |                     width: note.size.width,
140 |                     height: note.size.height,
141 |                     backgroundColor: note.color,
142 |                     zIndex: note.zIndex,
143 |                     touchAction: 'none',
144 |                 }}
145 |                 className={`p-2 rounded-md shadow-lg transition-shadow duration-200 group ${isSelected ? ' shadow-xl' : ''}`}
146 |                 onMouseDown={handleStart}
147 |                 onTouchStart={handleStart}
148 |                 onClick={(e) => e.stopPropagation()}
149 |             >
150 |             <textarea
151 |                 value={note.content}
152 |                 onChange={handleTextareaChange}
153 |                 className="w-full h-full resize-none bg-transparent outline-none text-gray-800"
154 |             />
155 |             {isSelected && (
156 |                 <>
157 |                     <div className="absolute top-0 left-0 w-full h-full border-2 border-yellow-500 pointer-events-none"></div>
158 |                     <div className="absolute top-0 left-0 w-3 h-3 bg-white border-2 border-yellow-500 rounded-full cursor-nwse-resize" onMouseDown={handleResizeStart('nw')}></div>
159 |                     <div className="absolute top-0 right-0 w-3 h-3 bg-white border-2 border-yellow-500 rounded-full cursor-nesw-resize" onMouseDown={handleResizeStart('ne')}></div>
160 |                     <div className="absolute bottom-0 left-0 w-3 h-3 bg-white border-2 border-yellow-500 rounded-full cursor-nesw-resize" onMouseDown={handleResizeStart('sw')}></div>
161 |                     <div className="absolute bottom-0 right-0 w-3 h-3 bg-white border-2 border-yellow-500 rounded-full cursor-nwse-resize" onMouseDown={handleResizeStart('se')}></div>
162 |                 </>
163 |             )}
164 |             {isSelected && !isTyping && (
165 |                 <NoteControls
166 |                     noteId={note._id}
167 |                     zIndex={note.zIndex}
168 |                     onUpdate={onUpdate}
169 |                     onDelete={onDelete}
170 |                 />
171 |             )}
172 |         </div>
173 |     );
174 | };
175 | 
176 | export default Note;


--------------------------------------------------------------------------------
/convex/boards.ts:
--------------------------------------------------------------------------------
  1 | import { paginationOptsValidator } from "convex/server";
  2 | import { internalMutation as rawInternalMutation, mutation as rawMutation, query, MutationCtx } from "./_generated/server";
  3 | import { v } from "convex/values";
  4 | import { TableAggregate } from "@convex-dev/aggregate";
  5 | import { DataModel } from "./_generated/dataModel";
  6 | import { components } from "./_generated/api";
  7 | import { Triggers } from "convex-helpers/server/triggers";
  8 | import { customMutation,customCtx } from "convex-helpers/server/customFunctions";
  9 | 
 10 | const aggregateBoardsByUser = new TableAggregate<[string, boolean], DataModel, "boards">(
 11 |   components.aggregateBoardsByUser,
 12 |   (doc) => [doc.ownerId, doc.inTrash],
 13 | );
 14 | 
 15 | const triggers = new Triggers<DataModel,MutationCtx>();
 16 | 
 17 | triggers.register("boards", aggregateBoardsByUser.trigger());
 18 | 
 19 | const mutation = customMutation(rawMutation, customCtx(triggers.wrapDB));
 20 | const internalMutation = customMutation(rawInternalMutation, customCtx(triggers.wrapDB));
 21 | 
 22 | export const backfillAggregates = internalMutation({
 23 |   handler: async (ctx) => {
 24 |     await aggregateBoardsByUser.clear(ctx);
 25 | 
 26 |     for await (const doc of ctx.db.query("boards")) {
 27 |       await aggregateBoardsByUser.insert(ctx, doc);
 28 |     }
 29 |   },
 30 | });
 31 | 
 32 | export const getUserBoardsCount = query({
 33 |   handler: async (ctx) => {
 34 |     const identity = await ctx.auth.getUserIdentity();
 35 |     if (!identity) {
 36 |       throw new Error("Not authenticated");
 37 |     }
 38 |     const user = await ctx.db
 39 |       .query("users")
 40 |       .withIndex("by_token", (q) => q.eq("tokenIdentifier", identity.tokenIdentifier.split('|')[1]))
 41 |       .unique();
 42 |     if (!user) {
 43 |       throw new Error("User not found");
 44 |     }
 45 |     return await aggregateBoardsByUser.count(ctx, { prefix: [user._id, false] });
 46 |   },
 47 | });
 48 | 
 49 | export const getUserBoardsTrashCount = query({
 50 |   handler: async (ctx) => {
 51 |     const identity = await ctx.auth.getUserIdentity();
 52 |     if (!identity) {
 53 |       throw new Error("Not authenticated");
 54 |     }
 55 |     const user = await ctx.db
 56 |       .query("users")
 57 |       .withIndex("by_token", (q) => q.eq("tokenIdentifier", identity.tokenIdentifier.split('|')[1]))
 58 |       .unique();
 59 |     if (!user) {
 60 |       throw new Error("User not found");
 61 |     }
 62 |     return await aggregateBoardsByUser.count(ctx, { prefix: [user._id, true] });
 63 |   },
 64 | });
 65 | 
 66 | export const getBoards = query({
 67 |   handler: async (ctx) => {
 68 |     const identity = await ctx.auth.getUserIdentity();
 69 |     if (!identity) {
 70 |       throw new Error("Not authenticated");
 71 |     }
 72 |     const user = await ctx.db
 73 |       .query("users")
 74 |       .withIndex("by_token", (q) => q.eq("tokenIdentifier", identity.tokenIdentifier.split('|')[1]))
 75 |       .unique();
 76 |     if (!user) {
 77 |       throw new Error("User not found");
 78 |     }
 79 |     return await ctx.db
 80 |       .query("boards")
 81 |       .withIndex("by_owner", (q) => q.eq("ownerId", user._id))
 82 |       .collect();
 83 |   },
 84 | });
 85 | 
 86 | export const getBoard = query({
 87 |   args: { boardId: v.id("boards") },
 88 |   handler: async (ctx, args) => {
 89 |     const identity = await ctx.auth.getUserIdentity();
 90 |     if (!identity) {
 91 |       throw new Error("Not authenticated");
 92 |     }
 93 | 
 94 |     const user = await ctx.db
 95 |       .query("users")
 96 |       .withIndex("by_token", (q) => q.eq("tokenIdentifier", identity.tokenIdentifier.split('|')[1]))
 97 |       .unique();
 98 |     if (!user) {
 99 |       throw new Error("User not found");
100 |     }
101 | 
102 |     const board = await ctx.db.get(args.boardId);
103 |     if (!board) {
104 |       throw new Error("Board not found");
105 |     }
106 | 
107 |     if (board.isShared && !board.inTrash || board.ownerId === user._id) { return board; }
108 |     else throw new Error("Access denied");
109 |     // if (board.ownerId !== user._id || board.inTrash) {
110 |     //   if (!board.isShared) {
111 |     //     throw new Error("Access denied");
112 |     //   }
113 |     // }
114 | 
115 |     return board;
116 |   },
117 | });
118 | 
119 | export const getBoardOwner = query({
120 |   args: { boardId: v.id("boards") },
121 |   handler: async (ctx, args) => {
122 |     const board = await ctx.db.get(args.boardId);
123 |     if (!board) return null;
124 |     const owner = await ctx.db.get(board.ownerId);
125 |     return owner ? owner.name : null;
126 |   },
127 | });
128 | 
129 | export const createBoard = mutation({
130 |   args: { name: v.string() },
131 |   handler: async (ctx, args) => {
132 |     const identity = await ctx.auth.getUserIdentity();
133 |     if (!identity) {
134 |       throw new Error("Not authenticated");
135 |     }
136 |     const user = await ctx.db
137 |       .query("users")
138 |       .withIndex("by_token", (q) => q.eq("tokenIdentifier", identity.tokenIdentifier.split('|')[1]))
139 |       .unique();
140 |     if (!user) {
141 |       throw new Error("User not found");
142 |     }
143 | 
144 |     const boardId = await ctx.db.insert("boards", {
145 |       name: args.name,
146 |       ownerId: user._id,
147 |       isShared: false,
148 |       notesCount: 0,
149 |       inTrash: false,
150 |       lastModified: Date.now()
151 |     });
152 |     return boardId;
153 |   },
154 | });
155 | 
156 | export const updateBoard = mutation({
157 |   args: { boardId: v.id("boards"), name: v.string() },
158 |   handler: async (ctx, args) => {
159 |     const { boardId, name } = args;
160 |     await ctx.db.patch(boardId, { name, lastModified: Date.now() });
161 |   },
162 | });
163 | 
164 | export const deleteBoard = mutation({
165 |   args: { boardId: v.id("boards") },
166 |   handler: async (ctx, args) => {
167 |     const { boardId } = args;
168 |     await ctx.db.patch(boardId, { inTrash: true, isShared: false, shareCode: "" });
169 |   },
170 | });
171 | 
172 | export const restoreBoard = mutation({
173 |   args: { boardId: v.id("boards") },
174 |   handler: async (ctx, args) => {
175 |     const { boardId } = args;
176 |     await ctx.db.patch(boardId, { inTrash: false });
177 |   },
178 | });
179 | 
180 | export const permanentlyDeleteBoard = mutation({
181 |   args: { boardId: v.id("boards") },
182 |   handler: async (ctx, args) => {
183 |     const { boardId } = args;
184 |     const board = await ctx.db.get(boardId);
185 |     if (!board) throw new Error("Board not found");
186 | 
187 |     return await ctx.db.delete(boardId);
188 |   },
189 | });
190 | 
191 | export const getLazyBoards = query({
192 |   args: {
193 |     paginationOpts: paginationOptsValidator,
194 |     searchTerm: v.optional(v.string()),
195 |     sortBy: v.union(v.literal("Recent"), v.literal("Oldest"), v.literal("Alphabetical"), v.literal("Most Notes")),
196 |     showTrashed: v.optional(v.boolean()),
197 |   },
198 |   handler: async (ctx, args) => {
199 |     const identity = await ctx.auth.getUserIdentity();
200 |     if (!identity) {
201 |       throw new Error("Not authenticated");
202 |     }
203 |     const user = await ctx.db
204 |       .query("users")
205 |       .withIndex("by_token", (q) => q.eq("tokenIdentifier", identity.tokenIdentifier.split('|')[1]))
206 |       .unique();
207 |     if (!user) {
208 |       throw new Error("User not found");
209 |     }
210 | 
211 |     let boardsQuery;
212 | 
213 |     switch (args.sortBy) {
214 |       case "Recent":
215 |         boardsQuery = ctx.db.query("boards").withIndex("by_owner_and_modified", (q) => q.eq("ownerId", user._id)).order("desc");
216 |         break;
217 |       case "Oldest":
218 |         boardsQuery = ctx.db.query("boards").withIndex("by_owner_and_modified", (q) => q.eq("ownerId", user._id)).order("asc");
219 |         break;
220 |       case "Alphabetical":
221 |         boardsQuery = ctx.db.query("boards").withIndex("by_owner_and_name", (q) => q.eq("ownerId", user._id)).order("asc");
222 |         break;
223 |       case "Most Notes":
224 |         boardsQuery = ctx.db.query("boards").withIndex("by_owner_and_notes", (q) => q.eq("ownerId", user._id)).order("desc");
225 |         break;
226 |       default:
227 |         boardsQuery = ctx.db.query("boards").withIndex("by_owner_and_modified", (q) => q.eq("ownerId", user._id)).order("desc");
228 |     }
229 | 
230 |     if (args.searchTerm) {
231 |       boardsQuery = ctx.db
232 |         .query("boards")
233 |         .withSearchIndex("search_name", (q) =>
234 |           q.search("name", args.searchTerm!)
235 |             .eq("ownerId", user._id)
236 |             .eq("inTrash", args.showTrashed ?? false)
237 |         );
238 |     }
239 | 
240 |     if (args.showTrashed !== undefined) {
241 |       boardsQuery = boardsQuery.filter((q) => q.eq(q.field("inTrash"), args.showTrashed));
242 |     }
243 | 
244 |     return await boardsQuery.paginate(args.paginationOpts);
245 |   },
246 | });
247 | 
248 | export const updateNotesCount = internalMutation({
249 |   args: { boardId: v.id("boards"), increment: v.number() },
250 |   handler: async (ctx, args) => {
251 |     const { boardId, increment } = args;
252 |     const board = await ctx.db.get(boardId);
253 |     if (!board) throw new Error("Board not found");
254 | 
255 |     const currentCount = board.notesCount || 0;
256 |     await ctx.db.patch(boardId, { notesCount: currentCount + increment });
257 |   },
258 | });


--------------------------------------------------------------------------------
/src/components/lander/pricing-beta.tsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { Button } from '../ui/button';
  3 | import { Check, Skull, Ghost } from 'lucide-react';
  4 | import { useNavigate } from 'react-router-dom';
  5 | import { useHalloween } from '../../providers/halloween-provider';
  6 | 
  7 | const PricingSection: React.FC = () => {
  8 |     const navigate = useNavigate();
  9 |     const { isHalloweenMode } = useHalloween();
 10 | 
 11 |     const handleSignUp = (plan: 'free' | 'pro') => {
 12 |         navigate(`/signup?plan=${plan}`);
 13 |     };
 14 | 
 15 |     return (
 16 |         <section id="pricing" className={`px-4 py-16 overflow-hidden mt-4 ${
 17 |             isHalloweenMode ? 'bg-halloween-black/50' : 'bg-transparent dark:bg-darkBg'
 18 |         }`}>
 19 |             <div className="max-w-6xl mx-auto">
 20 |                 <div className={`text-center mb-12 p-6 rounded-lg border-2 ${
 21 |                     isHalloweenMode 
 22 |                         ? 'bg-halloween-purple/20 border-halloween-orange animate-flicker' 
 23 |                         : 'bg-main/10 border-main'
 24 |                 }`}>
 25 |                     <h2 className={`text-3xl font-bold mb-4 ${
 26 |                         isHalloweenMode ? 'text-halloween-orange' : 'text-main'
 27 |                     }`}>
 28 |                         {isHalloweenMode ? '👻 Haunted Beta Access' : '🎉 Exclusive Beta Access'}
 29 |                     </h2>
 30 |                     <p className={`text-xl mb-4 ${
 31 |                         isHalloweenMode ? 'text-halloween-ghost' : 'text-text dark:text-text-dark'
 32 |                     }`}>
 33 |                         {isHalloweenMode 
 34 |                             ? 'Join our coven and get early access to all supernatural features!' 
 35 |                             : 'Get early access to all features for free during our beta period!'}
 36 |                     </p>
 37 |                     <p className={`text-lg font-semibold ${
 38 |                         isHalloweenMode ? 'text-halloween-ghost' : 'text-text dark:text-text-dark'
 39 |                     }`}>
 40 |                         {isHalloweenMode ? 'No soul required to sign up' : 'No credit card required to sign up'}
 41 |                     </p>
 42 |                 </div>
 43 | 
 44 |                 <h2 className={`text-3xl sm:text-4xl font-bold text-center mb-8 sm:mb-12 ${
 45 |                     isHalloweenMode ? 'text-halloween-orange' : 'text-text dark:text-text-dark'
 46 |                 }`}>
 47 |                     {isHalloweenMode ? 'Choose Your Curse' : 'Future Pricing Plans'}
 48 |                 </h2>
 49 | 
 50 |                 <div className="flex flex-col md:flex-row justify-center items-center gap-8 md:gap-16">
 51 |                     {/* Free Plan */}
 52 |                     <div className="w-full max-w-[350px] transform -rotate-3 transition-transform hover:scale-105">
 53 |                         <div className={`rounded-base p-6 sm:p-8 shadow-xl flex flex-col h-full ${
 54 |                             isHalloweenMode 
 55 |                                 ? 'bg-halloween-black border-2 border-halloween-orange/50 hover:border-halloween-orange' 
 56 |                                 : 'bg-white dark:bg-secondaryBlack border-2 border-border dark:border-darkBorder'
 57 |                         }`}>
 58 |                             <h3 className={`text-xl sm:text-2xl font-bold mb-4 ${
 59 |                                 isHalloweenMode ? 'text-halloween-ghost' : 'text-text dark:text-text-dark'
 60 |                             }`}>
 61 |                                 {isHalloweenMode ? 'Spectral Starter' : 'Sticky Starter'}
 62 |                             </h3>
 63 |                             <p className={`text-3xl sm:text-4xl font-bold mb-6 ${
 64 |                                 isHalloweenMode ? 'text-halloween-orange' : 'text-main'
 65 |                             }`}>
 66 |                                 $0<span className={`text-base sm:text-lg font-normal ${
 67 |                                     isHalloweenMode ? 'text-halloween-ghost' : 'text-text dark:text-text-dark'
 68 |                                 }`}>/month</span>
 69 |                             </p>
 70 |                             <ul className="mb-6 sm:mb-8 flex-grow">
 71 |                                 {[
 72 |                                     isHalloweenMode 
 73 |                                         ? ['1 Haunted Board', 'Unlimited ghostly notes', 'Spirit sync', 'Ouija support']
 74 |                                         : ['1 Board', 'Unlimited sticky notes', 'Cloud sync', 'Email support']
 75 |                                 ][0].map((feature, index) => (
 76 |                                     <li key={index} className={`flex items-center mb-3 text-sm sm:text-base ${
 77 |                                         isHalloweenMode ? 'text-halloween-ghost' : 'text-text dark:text-text-dark'
 78 |                                     }`}>
 79 |                                         <div className={`rounded-full p-1 mr-2 ${
 80 |                                             isHalloweenMode ? 'bg-halloween-orange' : 'bg-main'
 81 |                                         }`}>
 82 |                                             {isHalloweenMode ? <Ghost className="h-3 w-3 sm:h-4 sm:w-4 text-white" /> : 
 83 |                                                               <Check className="h-3 w-3 sm:h-4 sm:w-4 text-text" />}
 84 |                                         </div>
 85 |                                         <span>{feature}</span>
 86 |                                     </li>
 87 |                                 ))}
 88 |                             </ul>
 89 |                             <Button 
 90 |                                 onClick={() => handleSignUp('free')} 
 91 |                                 className={`w-full justify-center text-base sm:text-lg ${
 92 |                                     isHalloweenMode ? 'bg-halloween-orange hover:bg-halloween-purple text-white' : ''
 93 |                                 }`}
 94 |                             >
 95 |                                 {isHalloweenMode ? 'Join the Haunting' : 'Sign Up for Free'}
 96 |                             </Button>
 97 |                         </div>
 98 |                     </div>
 99 | 
100 |                     {/* Pro Plan */}
101 |                     <div className="w-full max-w-[350px] transform rotate-3 transition-transform hover:scale-105">
102 |                         <div className={`rounded-base p-6 sm:p-8 shadow-xl flex flex-col h-full relative overflow-hidden ${
103 |                             isHalloweenMode 
104 |                                 ? 'bg-halloween-black border-2 border-halloween-orange' 
105 |                                 : 'bg-white dark:bg-secondaryBlack border-2 border-main'
106 |                         }`}>
107 |                             <h3 className={`text-xl sm:text-2xl font-bold mb-4 ${
108 |                                 isHalloweenMode ? 'text-halloween-ghost' : 'text-text dark:text-text-dark'
109 |                             }`}>
110 |                                 {isHalloweenMode ? 'Phantom Pro' : 'Sticky Pro'}
111 |                             </h3>
112 |                             <p className={`text-3xl sm:text-4xl font-bold mb-6 ${
113 |                                 isHalloweenMode ? 'text-halloween-orange' : 'text-main'
114 |                             }`}>
115 |                                 $2<span className={`text-base sm:text-lg font-normal ${
116 |                                     isHalloweenMode ? 'text-halloween-ghost' : 'text-text dark:text-text-dark'
117 |                                 }`}>/month</span>
118 |                             </p>
119 |                             <ul className="mb-6 sm:mb-8 flex-grow">
120 |                                 {[
121 |                                     isHalloweenMode 
122 |                                         ? ['Unlimited Haunted Boards', 'Unlimited ghostly notes', 'Spectral collaboration', 'Priority séance support', 'Early access to dark magic']
123 |                                         : ['Unlimited Boards', 'Unlimited sticky notes', 'Real-time collaboration', 'Priority support', 'Early access to new features']
124 |                                 ][0].map((feature, index) => (
125 |                                     <li key={index} className={`flex items-center mb-3 text-sm sm:text-base ${
126 |                                         isHalloweenMode ? 'text-halloween-ghost' : 'text-text dark:text-text-dark'
127 |                                     }`}>
128 |                                         <div className={`rounded-full p-1 mr-2 ${
129 |                                             isHalloweenMode ? 'bg-halloween-orange' : 'bg-main'
130 |                                         }`}>
131 |                                             {isHalloweenMode ? <Skull className="h-3 w-3 sm:h-4 sm:w-4 text-white" /> : 
132 |                                                               <Check className="h-3 w-3 sm:h-4 sm:w-4 text-text" />}
133 |                                         </div>
134 |                                         <span>{feature}</span>
135 |                                     </li>
136 |                                 ))}
137 |                             </ul>
138 |                             <Button
139 |                                 onClick={() => handleSignUp('pro')}
140 |                                 className={`w-full justify-center text-base sm:text-lg ${
141 |                                     isHalloweenMode 
142 |                                         ? 'bg-halloween-orange hover:bg-halloween-purple text-white' 
143 |                                         : 'bg-main hover:bg-mainAccent transition-colors'
144 |                                 }`}
145 |                             >
146 |                                 {isHalloweenMode ? 'Unleash Full Power' : 'Sign Up for Pro (Beta)'}
147 |                             </Button>
148 |                             <div className={`absolute -right-12 top-6 px-12 py-1 transform rotate-45 text-sm font-semibold ${
149 |                                 isHalloweenMode 
150 |                                     ? 'bg-halloween-orange text-white' 
151 |                                     : 'bg-main text-text'
152 |                             }`}>
153 |                                 {isHalloweenMode ? 'Cursed Access' : 'Beta Access'}
154 |                             </div>
155 |                         </div>
156 |                     </div>
157 |                 </div>
158 |             </div>
159 |         </section>
160 |     );
161 | };
162 | 
163 | export default PricingSection;


--------------------------------------------------------------------------------
/src/authenticated/Board.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useState, useRef, useCallback, useEffect } from 'react';
  2 | import { useQuery, useMutation } from 'convex/react';
  3 | import { api } from '../../convex/_generated/api';
  4 | import { Id } from '../../convex/_generated/dataModel';
  5 | import Note from './Note';
  6 | import ToolsBar from './ToolsBar';
  7 | import { UserButton } from '@clerk/clerk-react';
  8 | import Logo from '../components/logo';
  9 | import { usePresence } from '../hooks/usePresence';
 10 | import Modal from '../components/ui/modal';
 11 | import { Button } from '../components/ui/button';
 12 | import UserStack from '../components/UserStack';
 13 | import UserCursor, { COLORS } from '../components/UserCursor';
 14 | import { Link } from 'react-router-dom';
 15 | import ErrorMessage from '../components/ErrorMessage';
 16 | import { HelpCircle } from 'lucide-react';
 17 | import HelpModal from '../components/HelpModal';
 18 | 
 19 | interface WhiteboardProps {
 20 |     boardId: Id<"boards">;
 21 | }
 22 | 
 23 | const generateShareLink = (code: string) => `${window.location.origin}/board?shareCode=${code}`;
 24 | 
 25 | const Whiteboard: React.FC<WhiteboardProps> = ({ boardId }) => {
 26 |     const currentUser = useQuery(api.users.getCurrentUser);
 27 |     const [actualBoardId, setActualBoardId] = useState<Id<"boards">>(boardId);
 28 |     const boardOwner = useQuery(api.boards.getBoardOwner, { boardId: actualBoardId });
 29 |     const shareBoard = useMutation(api.boardSharing.shareBoard);
 30 |     const board = useQuery(api.boards.getBoard, { boardId: actualBoardId });
 31 |     const getSharedBoardId = useQuery(api.boardSharing.getSharedBoardId,
 32 |         { shareCode: new URLSearchParams(window.location.search).get('shareCode') || '' }
 33 |     );
 34 |     const isLoading = currentUser === undefined || board === undefined;
 35 |     const [error, setError] = useState<string | null>(null);
 36 |     const notes = useQuery(api.notes.getNotes, { boardId: actualBoardId });
 37 |     const createNote = useMutation(api.notes.createNote).withOptimisticUpdate((localStore, args) => {
 38 |         const existingNotes = localStore.getQuery(api.notes.getNotes, { boardId: actualBoardId }) || [];
 39 |         const tempId = `temp_${Date.now()}` as Id<"notes">;
 40 |         const now = Date.now();
 41 |         localStore.setQuery(api.notes.getNotes, { boardId: actualBoardId }, [...existingNotes, { _id: tempId, _creationTime: now, ...args }]);
 42 |     });
 43 |     const updateNote = useMutation(api.notes.updateNote).withOptimisticUpdate((localStore, args) => {
 44 |         const existingNotes = localStore.getQuery(api.notes.getNotes, { boardId: actualBoardId }) || [];
 45 |         const updatedNotes = existingNotes.map(note =>
 46 |             note._id === args.noteId ? { ...note, ...args } : note
 47 |         );
 48 |         localStore.setQuery(api.notes.getNotes, { boardId: actualBoardId }, updatedNotes);
 49 |     });
 50 |     const deleteNote = useMutation(api.notes.deleteNote).withOptimisticUpdate((localStore, args) => {
 51 |         const existingNotes = localStore.getQuery(api.notes.getNotes, { boardId: actualBoardId }) || [];
 52 |         const updatedNotes = existingNotes.filter(note => note._id !== args.noteId);
 53 |         localStore.setQuery(api.notes.getNotes, { boardId: actualBoardId }, updatedNotes);
 54 |     });
 55 |     const [isShareModalOpen, setIsShareModalOpen] = useState(false);
 56 |     const [shareLink, setShareLink] = useState('');
 57 |     const toggleBoardSharing = useMutation(api.boardSharing.toggleBoardSharing);
 58 |     const [isSharingEnabled, setIsSharingEnabled] = useState(false);
 59 |     const isShared = board?.isShared ?? false;
 60 |     const [isViewingSharedBoard, setIsViewingSharedBoard] = useState(false);
 61 |     const [sharedByUser, setSharedByUser] = useState<string | null>(null);
 62 |     const inTrash = board?.inTrash;
 63 |     const [helpModalOpen, setHelpModalOpen] = useState(false);
 64 | 
 65 |     useEffect(() => {
 66 |         if (board === null) {
 67 |             setError("You don't have access to this board or it doesn't exist.");
 68 |         } else {
 69 |             setError(null);
 70 |         }
 71 |     }, [board]);
 72 | 
 73 |     useEffect(() => {
 74 |         if (board) {
 75 |             setIsSharingEnabled(board.isShared);
 76 |             if (isViewingSharedBoard && boardOwner) {
 77 |                 setSharedByUser(boardOwner);
 78 |             }
 79 |         }
 80 |     }, [board, isViewingSharedBoard, boardOwner]);
 81 | 
 82 |     useEffect(() => {
 83 |         if (getSharedBoardId !== null && getSharedBoardId !== undefined) {
 84 |             setActualBoardId(getSharedBoardId);
 85 |             setIsViewingSharedBoard(true);
 86 |         } else if (boardId) {
 87 |             setActualBoardId(boardId);
 88 |             setIsViewingSharedBoard(false);
 89 |         }
 90 |     }, [getSharedBoardId, boardId]);
 91 | 
 92 |     const [selectedNote, setSelectedNote] = useState<Id<"notes"> | 'tempId' | null>(null);
 93 |     const [isDragging, setIsDragging] = useState(false);
 94 |     const boardRef = useRef<HTMLDivElement>(null);
 95 |     const [currentTool, setCurrentTool] = useState<'note' | null>(null);
 96 |     const { activeUsers, updateCursorPosition } = usePresence(boardId, isShared);
 97 | 
 98 |     const useStableColorAssignment = (activeUsers: any[] | undefined) => {
 99 |         const colorAssignments = useRef(new Map<Id<"users">, string>());
100 |         const colorIndex = useRef(0);
101 | 
102 |         useEffect(() => {
103 |             if (activeUsers) {
104 |                 activeUsers.forEach((user) => {
105 |                     if (!colorAssignments.current.has(user._id)) {
106 |                         colorAssignments.current.set(user._id, COLORS[colorIndex.current % COLORS.length]);
107 |                         colorIndex.current = (colorIndex.current + 1) % COLORS.length;
108 |                     }
109 |                 });
110 |             }
111 |         }, [activeUsers]);
112 | 
113 |         return colorAssignments.current;
114 |     };
115 | 
116 |     useEffect(() => {
117 |         const handleMouseMove = (e: MouseEvent | TouchEvent) => {
118 |             if (boardRef.current) {
119 |                 const rect = boardRef.current.getBoundingClientRect();
120 |                 const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
121 |                 const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
122 |                 const x = clientX - rect.left;
123 |                 const y = clientY - rect.top;
124 |                 updateCursorPosition({ x, y });
125 |             }
126 |         };
127 | 
128 |         boardRef.current?.addEventListener('mousemove', handleMouseMove);
129 |         boardRef.current?.addEventListener('touchmove', handleMouseMove);
130 | 
131 |         return () => {
132 |             boardRef.current?.removeEventListener('mousemove', handleMouseMove);
133 |             boardRef.current?.removeEventListener('touchmove', handleMouseMove);
134 |         };
135 |     }, [updateCursorPosition]);
136 | 
137 |     const handleCreateNote = (e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>) => {
138 |         if (boardRef.current && currentTool && !isDragging) {
139 |             const rect = boardRef.current.getBoundingClientRect();
140 |             let clientX, clientY;
141 | 
142 |             if ('touches' in e) {
143 |                 // Touch event
144 |                 if (e.touches.length > 0) {
145 |                     clientX = e.touches[0].clientX;
146 |                     clientY = e.touches[0].clientY;
147 |                 } else {
148 |                     return; // Exit if there are no touches
149 |                 }
150 |             } else {
151 |                 // Mouse event
152 |                 clientX = e.clientX;
153 |                 clientY = e.clientY;
154 |             }
155 | 
156 |             const x = clientX - rect.left;
157 |             const y = clientY - rect.top;
158 | 
159 |             if (x >= 0 && y >= 0 && x <= rect.width && y <= rect.height) {
160 |                 createNote({
161 |                     boardId: actualBoardId,
162 |                     content: '',
163 |                     color: '#ffff88',
164 |                     position: { x, y },
165 |                     size: { width: 200, height: 200 },
166 |                     zIndex: notes ? Math.max(...notes.map(note => note.zIndex ?? 0), 0) + 1 : 1,
167 |                 }).catch(error => console.error("Error creating note:", error));
168 |                 setCurrentTool(null);
169 |             }
170 |         }
171 |     };
172 | 
173 |     const updateShareLink = useCallback(async () => {
174 |         if (isSharingEnabled && board?.shareCode) {
175 |             setShareLink(generateShareLink(board.shareCode));
176 |         } else if (isSharingEnabled) {
177 |             const code = await shareBoard({ boardId: actualBoardId });
178 |             setShareLink(generateShareLink(code));
179 |         }
180 |     }, [isSharingEnabled, board?.shareCode, shareBoard, actualBoardId]);
181 | 
182 | 
183 |     const handleShareBoard = async () => {
184 |         if (!isSharingEnabled) {
185 |             const isShared = await toggleBoardSharing({ boardId: actualBoardId });
186 |             setIsSharingEnabled(isShared);
187 |         }
188 |         await updateShareLink();
189 |         setIsShareModalOpen(true);
190 |     };
191 | 
192 |     useEffect(() => {
193 |         if (isShareModalOpen) {
194 |             updateShareLink();
195 |         }
196 |     }, [isShareModalOpen, updateShareLink]);
197 | 
198 |     const copyToClipboard = () => {
199 |         navigator.clipboard.writeText(shareLink);
200 |     };
201 | 
202 |     const handleSetIsDragging = (dragging: boolean) => {
203 |         setIsDragging(dragging);
204 |     };
205 | 
206 |     const handleUpdateNote = useCallback((noteId: Id<"notes"> | 'tempId', updates: Partial<{
207 |         content: string;
208 |         color: string;
209 |         position: { x: number; y: number };
210 |         size: { width: number; height: number };
211 |     }>) => {
212 |         if (noteId !== "tempId") {
213 |             updateNote({ noteId, ...updates }).catch(error => console.error("Error updating note:", error));
214 |         }
215 |     }, [updateNote]);
216 | 
217 |     const handleDeleteNote = (noteId: Id<"notes"> | 'tempId') => {
218 |         if (noteId !== 'tempId') {
219 |             deleteNote({ noteId }).catch(error => console.error("Error deleting note:", error));
220 |         }
221 |         if (selectedNote === noteId) {
222 |             setSelectedNote(null);
223 |         }
224 |     };
225 | 
226 |     const userColors = useStableColorAssignment(activeUsers);
227 | 
228 |     if (inTrash) {
229 |         return <ErrorMessage message='Board is Trashed.' />
230 |     }
231 | 
232 |     if (error) {
233 |         return (
234 |             <div className="flex items-center justify-center h-screen">
235 |                 <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
236 |                     <strong className="font-bold">Error: </strong>
237 |                     <span className="block sm:inline">{error}</span>
238 |                 </div>
239 |             </div>
240 |         );
241 |     }
242 | 
243 |     return (
244 |         <>
245 |             <div className={`relative h-screen w-full overflow-hidden ${currentTool === 'note' ? 'cursor-pointer' : ''}`}>
246 |                 {isShared && activeUsers?.map(user => (
247 |                     user._id !== currentUser?._id && (
248 |                         <UserCursor
249 |                             key={user._id}
250 |                             position={user.cursorPosition}
251 |                             color="#FF0000"
252 |                             name={user.name}
253 |                         />
254 |                     )
255 |                 ))}
256 |                 <div className={`absolute ${isViewingSharedBoard ? 'top-12' : 'top-4'} left-4 z-10 flex items-center space-x-2`}>
257 |                     <Link to="/boards" className="flex items-center bg-white dark:bg-gray-800 p-2 rounded-full shadow-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
258 |                         <Logo className="h-6 w-6" />
259 |                         <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 ml-1" viewBox="0 0 20 20" fill="currentColor">
260 |                             <path fillRule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clipRule="evenodd" />
261 |                         </svg>
262 |                     </Link>
263 |                 </div>
264 |                 <div className={`absolute ${isViewingSharedBoard ? 'top-12' : 'top-4'} right-4 z-10 flex items-center space-x-2 gap-4`}>
265 |                     <UserStack
266 |                         activeUsers={(activeUsers || []).map(user => ({
267 |                             ...user,
268 |                             profileImageUrl: user.profileImageUrl ?? ''
269 |                         }))}
270 |                         currentUserId={currentUser?._id as Id<"users">}
271 |                     />
272 |                     {!isLoading && board && (
273 |                         <div className="flex items-center space-x-2">
274 |                             {currentUser && board.ownerId === currentUser._id && (
275 |                                 <Button onClick={handleShareBoard}>
276 |                                     {isSharingEnabled ? 'Manage Sharing' : 'Share'}
277 |                                 </Button>
278 |                             )}
279 |                             {isSharingEnabled && currentUser && board.ownerId === currentUser._id && (
280 |                                 <Button onClick={async () => {
281 |                                     await toggleBoardSharing({ boardId: actualBoardId });
282 |                                     setIsSharingEnabled(false);
283 |                                     setShareLink('');
284 |                                 }} className="bg-red-500 hover:bg-red-600">
285 |                                     Disable Sharing
286 |                                 </Button>
287 |                             )}
288 |                         </div>
289 |                     )}
290 |                     <Button onClick={() => setHelpModalOpen(true)} className="bg-main hover:bg-mainAccent">
291 |                         <HelpCircle className="w-5 h-5" />
292 |                     </Button>
293 |                     <UserButton />
294 |                 </div>
295 |                 <div
296 |                     ref={boardRef}
297 |                     className="absolute inset-0"
298 |                     onClick={handleCreateNote}
299 |                     onTouchStart={handleCreateNote}
300 |                 >
301 |                     {notes?.map((note) => (
302 |                         <Note
303 |                             key={note._id}
304 |                             note={{ ...note, zIndex: note.zIndex ?? 0 }}
305 |                             isSelected={selectedNote === note._id}
306 |                             onSelect={() => setSelectedNote(note._id)}
307 |                             onUpdate={handleUpdateNote}
308 |                             onDelete={handleDeleteNote}
309 |                             setIsDragging={handleSetIsDragging}
310 |                         />
311 |                     ))}
312 |                     {activeUsers?.filter(user => user._id !== currentUser?._id).map((user) => {
313 |                         const color = userColors.get(user._id) || COLORS[0];
314 |                         return (
315 |                             <UserCursor
316 |                                 key={user._id}
317 |                                 position={user.cursorPosition}
318 |                                 color={color}
319 |                                 name={user.name}
320 |                             />
321 |                         );
322 |                     })}
323 |                     {/* {currentUser && (
324 |                         <UserCursor
325 |                             key={currentUser._id}
326 |                             position={localCursorPosition} // comes from usePresence hook!
327 |                             color={userColors.get(currentUser._id) || COLORS[0]}
328 |                             name={currentUser.name}
329 |                         />
330 |                     )} */}
331 |                 </div>
332 |                 {isViewingSharedBoard && (
333 |                     <div className="fixed top-0 left-0 right-0 bg-[#a17fbc] text-text py-1 px-2 flex justify-between items-center z-40 text-xs">
334 |                         <span>Shared by {sharedByUser}</span>
335 |                         <Button onClick={() => window.location.href = '/boards'} className="text-xs py-0 px-2 h-6">
336 |                             My Boards
337 |                         </Button>
338 |                     </div>
339 |                 )}
340 |                 <ToolsBar
341 |                     onCreate={() => { setCurrentTool('note') }}
342 |                     currentTool={currentTool}
343 |                     onDeselectTool={() => setCurrentTool(null)}
344 |                 />
345 |             </div>
346 |             <Modal active={isShareModalOpen} setActive={setIsShareModalOpen}>
347 |                 <h3 className="text-lg font-medium leading-6 text-gray-900 dark:text-white mb-4">
348 |                     Share Board
349 |                 </h3>
350 |                 <p className="text-sm text-gray-500 mb-2">
351 |                     Copy the link below to share this board:
352 |                 </p>
353 |                 <div className="flex w-min items-center rounded-base border-2 overflow-x-hidden border-border dark:border-darkBorder font-base shadow-light dark:shadow-dark">
354 |                     <input
355 |                         className='p-2'
356 |                         type="text"
357 |                         value={shareLink}
358 |                         disabled
359 |                     />
360 |                     <button
361 |                         className="border-l-2 text-text border-border dark:border-darkBorder bg-main p-[10px] sm:px-5 px-3"
362 |                         onClick={copyToClipboard}
363 |                     >
364 |                         Copy
365 |                     </button>
366 |                 </div>
367 |             </Modal>
368 |             <HelpModal isOpen={helpModalOpen} onClose={() => setHelpModalOpen(false)} />
369 |         </>
370 |     );
371 | };
372 | 
373 | export default Whiteboard;


--------------------------------------------------------------------------------