new modal [WIP]

components/InputSelect/styles.ts

@@ -8,20 +8,27 @@ export const styles: StylesConfig = {
     ...styles,
     fontFamily: font,
     cursor: "pointer",
-    backgroundColor: state.isSelected ? "#0ea5e9" : "inherit",
+    backgroundColor: state.isSelected ? "oklch(var(--p))" : "inherit",
     "&:hover": {
-      backgroundColor: state.isSelected ? "#0ea5e9" : "#e2e8f0",
+      backgroundColor: state.isSelected
+        ? "oklch(var(--p))"
+        : "oklch(var(--nc))",
     },
     transition: "all 50ms",
   }),
-  control: (styles) => ({
+  control: (styles, state) => ({
     ...styles,
     fontFamily: font,
-    border: "none",
+    borderRadius: "0.375rem",
+    border: state.isFocused
+      ? "1px solid oklch(var(--p))"
+      : "1px solid oklch(var(--nc))",
+    boxShadow: "none",
+    height: "2.6rem",
   }),
-  container: (styles) => ({
+  container: (styles, state) => ({
     ...styles,
-    border: "1px solid #e0f2fe",
+    height: "full",
     borderRadius: "0.375rem",
     lineHeight: "1.25rem",
     // "@media screen and (min-width: 1024px)": {

components/Modal/Link/AddOrEditLink.tsx

@@ -156,6 +156,7 @@ export default function AddOrEditLink({
               value={link.url}
               onChange={(e) => setLink({ ...link, url: e.target.value })}
               placeholder="e.g. http://example.com/"
+              className="bg-base-200"
             />
           </div>
           <div className="sm:col-span-2 col-span-5">
@@ -194,6 +195,7 @@ export default function AddOrEditLink({
                 value={link.name}
                 onChange={(e) => setLink({ ...link, name: e.target.value })}
                 placeholder="e.g. Example Link"
+                className="bg-base-200"
               />
             </div>
 

components/Modals/New.tsx

@@ -0,0 +1,159 @@
+import { Tab } from "@headlessui/react";
+import React, { useEffect, useState } from "react";
+import TextInput from "../TextInput";
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import { useRouter } from "next/router";
+import useCollectionStore from "@/store/collections";
+import useLinkStore from "@/store/links";
+import { useSession } from "next-auth/react";
+import CollectionSelection from "../InputSelect/CollectionSelection";
+
+export default function New() {
+  const { data } = useSession();
+
+  const [link, setLink] = useState<LinkIncludingShortenedCollectionAndTags>({
+    name: "",
+    url: "",
+    description: "",
+    tags: [],
+    screenshotPath: "",
+    pdfPath: "",
+    readabilityPath: "",
+    textContent: "",
+    collection: {
+      name: "",
+      ownerId: data?.user.id as number,
+    },
+  });
+
+  const { updateLink, addLink } = useLinkStore();
+
+  const router = useRouter();
+  const { collections } = useCollectionStore();
+
+  const setCollection = (e: any) => {
+    if (e?.__isNew__) e.value = null;
+
+    setLink({
+      ...link,
+      collection: { id: e?.value, name: e?.label, ownerId: e?.ownerId },
+    });
+  };
+
+  useEffect(() => {
+    if (router.query.id) {
+      const currentCollection = collections.find(
+        (e) => e.id == Number(router.query.id)
+      );
+
+      if (
+        currentCollection &&
+        currentCollection.ownerId &&
+        router.asPath.startsWith("/collections/")
+      )
+        setLink({
+          ...link,
+          collection: {
+            id: currentCollection.id,
+            name: currentCollection.name,
+            ownerId: currentCollection.ownerId,
+          },
+        });
+    } else
+      setLink({
+        ...link,
+        collection: {
+          // id: ,
+          name: "Unorganized",
+          ownerId: data?.user.id as number,
+        },
+      });
+  }, []);
+
+  return (
+    <dialog id="new-link-modal" className="modal backdrop-blur-sm">
+      <div className="modal-box border border-neutral-content">
+        <form method="dialog">
+          <button className="btn btn-sm outline-none btn-circle btn-ghost absolute right-2 top-2">
+            ✕
+          </button>
+        </form>
+
+        <Tab.Group>
+          <Tab.List className="tabs-boxed flex w-fit mr-auto justify-center gap-1 p-1">
+            <Tab
+              className={({ selected }) =>
+                `${
+                  selected ? "btn-primary" : "btn-ghost"
+                } outline-none rounded-md btn btn-sm`
+              }
+            >
+              Link
+            </Tab>
+            {/* <Tab
+              className={({ selected }) =>
+                `${
+                  selected ? "btn-primary" : "btn-ghost"
+                } outline-none rounded-md btn btn-sm`
+              }
+            >
+              File
+            </Tab> */}
+            <Tab
+              className={({ selected }) =>
+                `${
+                  selected ? "btn-primary" : "btn-ghost"
+                } outline-none rounded-md btn btn-sm`
+              }
+            >
+              Collection
+            </Tab>
+          </Tab.List>
+          <Tab.Panels className="mt-5">
+            <Tab.Panel>
+              <div className="grid grid-flow-row-dense sm:grid-cols-5 gap-3">
+                <div className="sm:col-span-3 col-span-5">
+                  <p className="mb-2">Address (URL)</p>
+                  <TextInput
+                    value={link.url}
+                    onChange={(e) => setLink({ ...link, url: e.target.value })}
+                    placeholder="e.g. http://example.com/"
+                    className="bg-base-200"
+                  />
+                </div>
+                <div className="sm:col-span-2 col-span-5">
+                  <p className="mb-2">Collection</p>
+                  {link.collection.name ? (
+                    <CollectionSelection
+                      onChange={setCollection}
+                      // defaultValue={{
+                      //   label: link.collection.name,
+                      //   value: link.collection.id,
+                      // }}
+                      defaultValue={
+                        link.collection.id
+                          ? {
+                              value: link.collection.id,
+                              label: link.collection.name,
+                            }
+                          : {
+                              value: null as unknown as number,
+                              label: "Unorganized",
+                            }
+                      }
+                    />
+                  ) : null}
+                </div>
+              </div>
+            </Tab.Panel>
+            {/* <Tab.Panel>Content 2</Tab.Panel> */}
+            <Tab.Panel>Content 3</Tab.Panel>
+          </Tab.Panels>
+        </Tab.Group>
+      </div>
+      <form method="dialog" className="modal-backdrop">
+        <button>close</button>
+      </form>
+    </dialog>
+  );
+}

components/Navbar.tsx

@@ -13,6 +13,7 @@ import useModalStore from "@/store/modals";
 import useWindowDimensions from "@/hooks/useWindowDimensions";
 import ToggleDarkMode from "./ToggleDarkMode";
 import useLocalSettingsStore from "@/store/localSettings";
+import New from "./Modals/New";
 
 export default function Navbar() {
   const { setModal } = useModalStore();
@@ -61,7 +62,7 @@ export default function Navbar() {
       <div className="flex items-center gap-2">
         <ToggleDarkMode className="sm:inline-grid hidden" />
 
-        <button
+        {/* <button
           onClick={() => {
             setModal({
               modal: "LINK",
@@ -78,6 +79,21 @@ export default function Navbar() {
           <span className="hidden sm:block group-hover:opacity-0 text-right w-full duration-100">
             New
           </span>
+        </button> */}
+
+        <button
+          className="inline-flex sm:gap-1 relative sm:w-[5rem] items-center duration-100 group btn btn-accent text-white btn-sm"
+          onClick={() =>
+            (document.getElementById("new-link-modal") as any).showModal()
+          }
+        >
+          <FontAwesomeIcon
+            icon={faPlus}
+            className="w-5 h-5 sm:group-hover:ml-5 sm:absolute duration-100 left-2"
+          />
+          <span className="hidden sm:block group-hover:opacity-0 text-right w-full duration-100">
+            New
+          </span>
         </button>
 
         <div className="relative">
@@ -138,6 +154,7 @@ export default function Navbar() {
           ) : null}
         </div>
       </div>
+      <New />
     </div>
   );
 }

styles/globals.css

@@ -157,24 +157,16 @@ body {
 
 @layer components {
   .react-select-container .react-select__control {
-    @apply bg-base-200 dark:hover:border-neutral-500 border-red-500 border;
+    @apply bg-base-200 hover:border-neutral-content;
   }
 
   .react-select-container .react-select__menu {
-    @apply dark:bg-neutral-900 dark:border-neutral-700 border;
+    @apply bg-base-100 border-neutral-content border absolute;
-  }
-
-  .react-select-container .react-select__menu {
-    @apply dark:bg-neutral-900 border;
-  }
-
-  .react-select-container .react-select__option {
-    @apply dark:hover:bg-neutral-800;
   }
 
   .react-select-container .react-select__input-container,
   .react-select-container .react-select__single-value {
-    @apply dark:text-white;
+    @apply text-base-content;
   }
 }
 .react-select__clear-indicator * {