Import reordering and minor display tweaks

app/(landing)/page.jsx

@@ -4,7 +4,7 @@ import { Heroes } from './_components/heroes';
 
 const LandingPage = () => {
   return (
-    <div className="flex min-h-full flex-col">
+    <div className="flex min-h-full flex-col dark:bg-[#1f1f1f]">
       <div className="flex flex-1 flex-col items-center justify-center gap-y-8 px-6 pb-10 text-center md:justify-start">
         <Heading />
         <Heroes />

app/(main)/_components/banner.jsx

@@ -1,11 +1,11 @@
 'use client';
 
+import { Button } from '@/components/ui/button';
+import { ConfirmModal } from '@/components/modals/confirm-modal';
 import { api } from '@/convex/_generated/api';
 import { toast } from 'sonner';
 import { useMutation } from 'convex/react';
 import { useRouter } from 'next/navigation';
-import { Button } from '@/components/ui/button';
-import { ConfirmModal } from '@/components/modals/confirm-modal';
 
 export const Banner = ({ noteId }) => {
   const router = useRouter();

app/(main)/_components/menu.jsx

@@ -8,13 +8,13 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
+import { MoreHorizontal, Trash } from 'lucide-react';
+import { Skeleton } from '@/components/ui/skeleton';
 import { api } from '@/convex/_generated/api';
+import { toast } from 'sonner';
 import { useMutation } from 'convex/react';
 import { useRouter } from 'next/navigation';
 import { useUser } from '@clerk/clerk-react';
-import { toast } from 'sonner';
-import { MoreHorizontal, Trash } from 'lucide-react';
-import { Skeleton } from '@/components/ui/skeleton';
 
 export const Menu = ({ noteId }) => {
   const { user } = useUser();

app/(main)/_components/publish.jsx

@@ -8,10 +8,10 @@ import {
   PopoverTrigger,
 } from '@/components/ui/popover';
 import { api } from '@/convex/_generated/api';
+import { toast } from 'sonner';
 import { useMutation } from 'convex/react';
 import { useOrigin } from '@/hooks/use-origin';
 import { useState } from 'react';
-import { toast } from 'sonner';
 
 export const Publish = ({ data }) => {
   const origin = useOrigin();
@@ -77,12 +77,29 @@ export const Publish = ({ data }) => {
               </p>
             </div>
             <div className="flex items-center">
-              <input className="flex-1 px-2 text-xs border rounded-l-md h-8 bg-muted truncate" value={url} disabled />
-              <Button onClick={onCopy} disabled={copied} className="rounded-l-none">
-                {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+              <input
+                className="h-8 flex-1 truncate rounded-l-md border bg-muted px-2 text-xs"
+                value={url}
+                disabled
+              />
+              <Button
+                onClick={onCopy}
+                disabled={copied}
+                className="rounded-l-none"
+              >
+                {copied ? (
+                  <Check className="h-4 w-4" />
+                ) : (
+                  <Copy className="h-4 w-4" />
+                )}
               </Button>
             </div>
-            <Button size="sm" disabled={submitting} onClick={onUnpublish} className="w-full text-xs">
+            <Button
+              size="sm"
+              disabled={submitting}
+              onClick={onUnpublish}
+              className="w-full text-xs"
+            >
               Unpublish
             </Button>
           </div>

app/(main)/_components/sidebar-item.jsx

@@ -107,7 +107,7 @@ export const SidebarItem = ({
       {noteIcon ? (
         <div className="mr-2 shrink-0 text-[18px]">{noteIcon}</div>
       ) : (
-        <Icon className="mr-2 h-[18px] shrink-0 text-muted-foreground" />
+        <Icon className="mr-2 h-[18px] w-[18px] shrink-0 text-muted-foreground" />
       )}
       <span className="truncate">{label}</span>
       {isSearch && (

app/(main)/_components/title.jsx

@@ -4,8 +4,8 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Skeleton } from '@/components/ui/skeleton';
 import { api } from '@/convex/_generated/api';
-import { useRef, useState } from 'react';
 import { useMutation } from 'convex/react';
+import { useRef, useState } from 'react';
 
 export const Title = ({ data }) => {
   const inputRef = useRef(null);

app/(main)/_components/trash-box.jsx

@@ -1,13 +1,13 @@
 'use client';
 
+import { ConfirmModal } from '@/components/modals/confirm-modal';
 import { Input } from '@/components/ui/input';
 import { Search, Trash, Undo } from 'lucide-react';
 import { Spinner } from '@/components/spinner';
 import { api } from '@/convex/_generated/api';
 import { useMutation, useQuery } from 'convex/react';
 import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
-import { ConfirmModal } from '@/components/modals/confirm-modal';
 
 export const TrashBox = () => {
   const router = useRouter();

app/(public)/layout.jsx

@@ -0,0 +1,5 @@
+const PublicLayout = ({ children }) => {
+  return <div className="h-full dark:bg-[#1f1f1f]">{children}</div>;
+};
+
+export default PublicLayout;

components/icon-picker.jsx

@@ -1,12 +1,12 @@
 'use client';
 
-import EmojiPicker from 'emoji-picker-react';
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from '@/components/ui/popover';
 import { useTheme } from 'next-themes';
+import EmojiPicker from 'emoji-picker-react';
 
 export const IconPicker = ({ onChange, children, asChild }) => {
   const { resolvedTheme } = useTheme();

components/single-image-dropzone.jsx

@@ -1,10 +1,10 @@
 'use client';
 
+import * as React from 'react';
 import { Spinner } from '@/components/spinner';
 import { UploadCloudIcon, X } from 'lucide-react';
 import { twMerge } from 'tailwind-merge';
 import { useDropzone } from 'react-dropzone';
-import * as React from 'react';
 
 const variants = {
   base: 'relative rounded-md flex justify-center items-center flex-col cursor-pointer min-h-[150px] min-w-[200px] border border-dashed border-gray-400 dark:border-gray-300 transition-colors duration-200 ease-in-out',

package.json

@@ -47,6 +47,8 @@
     "zustand": "^4.5.2"
   },
   "devDependencies": {
+    "@types/node": "20.12.12",
+    "@types/react": "18.3.2",
     "autoprefixer": "^10.0.1",
     "eslint": "^8",
     "eslint-config-next": "14.0.4",

yarn.lock

@@ -2285,11 +2285,31 @@
   resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.34.tgz#10964ba0dee6ac4cd462e2795b6bebd407303433"
   integrity sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==
 
+"@types/node@20.12.12":
+  version "20.12.12"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.12.12.tgz#7cbecdf902085cec634fdb362172dfe12b8f2050"
+  integrity sha512-eWLDGF/FOSPtAvEqeRAQ4C8LSA7M1I7i0ky1I8U7kD1J5ITyW3AsRhQrKVoWf5pFKZ2kILsEGJhsI9r93PYnOw==
+  dependencies:
+    undici-types "~5.26.4"
+
 "@types/parse5@^6.0.0":
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-6.0.3.tgz#705bb349e789efa06f43f128cef51240753424cb"
   integrity sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==
 
+"@types/prop-types@*":
+  version "15.7.12"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.12.tgz#12bb1e2be27293c1406acb6af1c3f3a1481d98c6"
+  integrity sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==
+
+"@types/react@18.3.2":
+  version "18.3.2"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.2.tgz#462ae4904973bc212fa910424d901e3d137dbfcd"
+  integrity sha512-Btgg89dAnqD4vV7R3hlwOxgqobUQKgx3MmrQRi0yYbs/P0ym8XozIAlkqVilPqHQwXs4e9Tf63rrCgl58BcO4w==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^3.0.2"
+
 "@types/unist@*", "@types/unist@^3.0.0":
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-3.0.2.tgz#6dd61e43ef60b34086287f83683a5c1b2dc53d20"
@@ -2804,6 +2824,11 @@ csstype@3.1.1:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9"
   integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
 
+csstype@^3.0.2:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
+  integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
+
 damerau-levenshtein@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
@@ -6062,6 +6087,11 @@ unbox-primitive@^1.0.2:
     has-symbols "^1.0.3"
     which-boxed-primitive "^1.0.2"
 
+undici-types@~5.26.4:
+  version "5.26.5"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617"
+  integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==
+
 unified@^10.0.0, unified@^10.1.2:
   version "10.1.2"
   resolved "https://registry.yarnpkg.com/unified/-/unified-10.1.2.tgz#b1d64e55dafe1f0b98bb6c719881103ecf6c86df"