Added geo targeting + link comments

app/dub.sh/changelog/[slug]/page.tsx

@@ -83,7 +83,7 @@ export default async function ChangelogPost({
           priority // since it's above the fold
           placeholder="blur"
           blurDataURL={await getBlurDataURL(post.image)}
-          className="border border-gray-100 md:rounded-2xl"
+          className="aspect-video border border-gray-100 object-cover md:rounded-2xl"
         />
         <div className="mx-5 mb-10 flex items-center justify-between md:mx-0">
           <Author username={post.author} />

app/dub.sh/changelog/page.tsx

@@ -75,7 +75,7 @@ export default function Changelog() {
                     priority={idx === 0} // since it's above the fold
                     placeholder="blur"
                     blurDataURL={await getBlurDataURL(post.image!)}
-                    className="border border-gray-100 md:rounded-2xl"
+                    className="aspect-video border border-gray-100 object-cover md:rounded-2xl"
                   />
                 </Link>
                 <Link

app/ui/modal.tsx

@@ -87,7 +87,7 @@ export default function Modal({
           onOpenAutoFocus={(e) => e.preventDefault()}
           onCloseAutoFocus={(e) => e.preventDefault()}
           className={cn(
-            "fixed inset-0 z-50 m-auto hidden max-h-fit w-full max-w-md animate-scale-in overflow-hidden rounded-2xl border border-gray-200 bg-white p-0 shadow-xl md:block",
+            "fixed inset-0 z-40 m-auto hidden max-h-fit w-full max-w-md animate-scale-in overflow-hidden rounded-2xl border border-gray-200 bg-white p-0 shadow-xl md:block",
             className,
           )}
         >

app/ui/modals/add-edit-link-modal/android-section.tsx

@@ -1,5 +1,5 @@
 import { Dispatch, SetStateAction, useEffect, useState } from "react";
-import { LinkProps } from "#/lib/types";
+import { type Link as LinkProps } from "@prisma/client";
 import Switch from "#/ui/switch";
 import { motion } from "framer-motion";
 import { FADE_IN_ANIMATION_SETTINGS, HOME_DOMAIN } from "#/lib/constants";

app/ui/modals/add-edit-link-modal/expiration-section.tsx

@@ -1,5 +1,5 @@
 import { Dispatch, SetStateAction, useEffect, useState } from "react";
-import { LinkProps } from "#/lib/types";
+import { type Link as LinkProps } from "@prisma/client";
 import { getDateTimeLocal } from "#/lib/utils";
 import Switch from "#/ui/switch";
 import { motion } from "framer-motion";

app/ui/modals/add-edit-link-modal/index.tsx

@@ -25,7 +25,7 @@ import { LoadingCircle, Logo } from "#/ui/icons";
 import Modal from "#/ui/modal";
 import Tooltip, { TooltipContent } from "#/ui/tooltip";
 import useProject from "#/lib/swr-app/use-project";
-import { LinkProps } from "#/lib/types";
+import { type Link as LinkProps } from "@prisma/client";
 import {
   getApexDomain,
   getUrlWithoutUTMParams,

app/ui/modals/add-edit-link-modal/ios-section.tsx

@@ -1,5 +1,5 @@
 import { Dispatch, SetStateAction, useEffect, useState } from "react";
-import { LinkProps } from "#/lib/types";
+import { type Link as LinkProps } from "@prisma/client";
 import Switch from "#/ui/switch";
 import { motion } from "framer-motion";
 import { FADE_IN_ANIMATION_SETTINGS, HOME_DOMAIN } from "#/lib/constants";

app/ui/modals/add-edit-link-modal/og-section.tsx

@@ -9,7 +9,7 @@ import { motion } from "framer-motion";
 import TextareaAutosize from "react-textarea-autosize";
 import { UploadCloud } from "@/components/shared/icons";
 import { LoadingCircle } from "#/ui/icons";
-import { LinkProps } from "#/lib/types";
+import { type Link as LinkProps } from "@prisma/client";
 import Switch from "#/ui/switch";
 import { FADE_IN_ANIMATION_SETTINGS, HOME_DOMAIN } from "#/lib/constants";
 import { InfoTooltip, SimpleTooltipContent } from "#/ui/tooltip";

app/ui/modals/add-edit-link-modal/password-section.tsx

@@ -1,5 +1,5 @@
 import { Dispatch, SetStateAction, useEffect, useState } from "react";
-import { LinkProps } from "#/lib/types";
+import { type Link as LinkProps } from "@prisma/client";
 import Switch from "#/ui/switch";
 import { motion } from "framer-motion";
 import { FADE_IN_ANIMATION_SETTINGS, HOME_DOMAIN } from "#/lib/constants";

app/ui/modals/add-edit-link-modal/preview.tsx

@@ -1,7 +1,7 @@
 import BlurImage from "#/ui/blur-image";
 import { Facebook, LinkedIn, Photo, Twitter } from "@/components/shared/icons";
 import { LoadingCircle } from "#/ui/icons";
-import { LinkProps } from "#/lib/types";
+import { type Link as LinkProps } from "@prisma/client";
 import { getDomainWithoutWWW } from "#/lib/utils";
 import { useMemo } from "react";
 import { useDebounce } from "use-debounce";

app/ui/modals/add-edit-link-modal/rewrite-section.tsx

@@ -1,5 +1,5 @@
 import { Dispatch, SetStateAction, useEffect, useState } from "react";
-import { LinkProps } from "#/lib/types";
+import { type Link as LinkProps } from "@prisma/client";
 import Switch from "#/ui/switch";
 import { HOME_DOMAIN } from "#/lib/constants";
 import { InfoTooltip, SimpleTooltipContent } from "#/ui/tooltip";

app/ui/modals/add-edit-link-modal/utm-section.tsx

@@ -1,5 +1,5 @@
 import { Dispatch, SetStateAction, useEffect, useMemo, useState } from "react";
-import { LinkProps } from "#/lib/types";
+import { type Link as LinkProps } from "@prisma/client";
 import { motion } from "framer-motion";
 import {
   constructURLFromUTMParams,

components/app/links/link-card.tsx

@@ -13,7 +13,7 @@ import { Chart, Delete, ThreeDots } from "@/components/shared/icons";
 import Popover from "#/ui/popover";
 import Tooltip, { SimpleTooltipContent, TooltipContent } from "#/ui/tooltip";
 import useProject from "#/lib/swr/use-project";
-import { LinkProps } from "#/lib/types";
+import { type Link as LinkProps } from "@prisma/client";
 import {
   cn,
   fetcher,
@@ -25,7 +25,14 @@ import {
 } from "#/lib/utils";
 import useIntersectionObserver from "#/lib/hooks/use-intersection-observer";
 import useDomains from "#/lib/swr/use-domains";
-import { Archive, CopyPlus, Edit3, EyeOff, QrCode } from "lucide-react";
+import {
+  Archive,
+  CopyPlus,
+  Edit3,
+  EyeOff,
+  MessageCircle,
+  QrCode,
+} from "lucide-react";
 import punycode from "punycode/";
 import { GOOGLE_FAVICON_URL, HOME_DOMAIN } from "#/lib/constants";
 import useTags from "#/lib/swr/use-tags";
@@ -34,7 +41,8 @@ import { ModalContext } from "#/ui/modal-provider";
 import Number from "#/ui/number";
 
 export default function LinkCard({ props }: { props: LinkProps }) {
-  const { key, domain, url, rewrite, createdAt, archived, tagId } = props;
+  const { key, domain, url, rewrite, createdAt, archived, tagId, comments } =
+    props;
   const { tags } = useTags();
   const tag = useMemo(() => tags?.find((t) => t.id === tagId), [tags, tagId]);
 
@@ -81,6 +89,7 @@ export default function LinkCard({ props }: { props: LinkProps }) {
     setShowAddEditLinkModal: setShowDuplicateLinkModal,
     AddEditLinkModal: DuplicateLinkModal,
   } = useAddEditLinkModal({
+    // @ts-expect-error
     duplicateProps: {
       ...propsToDuplicate,
       key: `${key}-copy`,
@@ -245,6 +254,25 @@ export default function LinkCard({ props }: { props: LinkProps }) {
                 </a>
               )}
               <CopyButton url={linkConstructor({ key, domain })} />
+              {comments && (
+                <Tooltip
+                  content={
+                    <div className="block max-w-sm px-4 py-2 text-center text-sm text-gray-700">
+                      {comments}
+                    </div>
+                  }
+                >
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setShowAddEditLinkModal(true);
+                    }}
+                    className="group rounded-full bg-gray-100 p-1.5 transition-all duration-75 hover:scale-105 active:scale-95"
+                  >
+                    <MessageCircle className="h-3.5 w-3.5 text-gray-700" />
+                  </button>
+                </Tooltip>
+              )}
               {tag?.color && (
                 <button
                   onClick={(e) => {

components/app/modals/add-edit-link-modal/android-section.tsx

@@ -1,5 +1,5 @@
 import { Dispatch, SetStateAction, useEffect, useState } from "react";
-import { LinkProps } from "#/lib/types";
+import { type Link as LinkProps } from "@prisma/client";
 import Switch from "#/ui/switch";
 import { motion } from "framer-motion";
 import { FADE_IN_ANIMATION_SETTINGS, HOME_DOMAIN } from "#/lib/constants";

components/app/modals/add-edit-link-modal/comments-section.tsx

@@ -0,0 +1,66 @@
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
+import { type Link as LinkProps } from "@prisma/client";
+import TextareaAutosize from "react-textarea-autosize";
+import Switch from "#/ui/switch";
+import { motion } from "framer-motion";
+import { FADE_IN_ANIMATION_SETTINGS, HOME_DOMAIN } from "#/lib/constants";
+import { InfoTooltip, SimpleTooltipContent } from "#/ui/tooltip";
+
+export default function CommentsSection({
+  props,
+  data,
+  setData,
+}: {
+  props?: LinkProps;
+  data: LinkProps;
+  setData: Dispatch<SetStateAction<LinkProps>>;
+}) {
+  const { comments } = data;
+  const [enabled, setEnabled] = useState(!!comments);
+  useEffect(() => {
+    if (enabled) {
+      // if enabling, add previous comments if exists
+      setData({
+        ...data,
+        comments: props?.comments || comments,
+      });
+    } else {
+      // if disabling, remove comments
+      setData({ ...data, comments: null });
+    }
+  }, [enabled]);
+
+  return (
+    <div className="border-b border-gray-200 pb-5">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center justify-between space-x-2">
+          <h2 className="text-sm font-medium text-gray-900">Comments</h2>
+          <InfoTooltip
+            content={
+              <SimpleTooltipContent
+                title="Use comments to add context to your short links – for you and your team."
+                cta="Learn more."
+                href={`${HOME_DOMAIN}/help/article/how-to-create-link#comments`}
+              />
+            }
+          />
+        </div>
+        <Switch fn={() => setEnabled(!enabled)} checked={enabled} />
+      </div>
+      {enabled && (
+        <motion.div className="mt-3" {...FADE_IN_ANIMATION_SETTINGS}>
+          <TextareaAutosize
+            name="comments"
+            minRows={3}
+            className="block w-full rounded-md border-gray-300 text-gray-900 placeholder-gray-300 focus:border-gray-500 focus:outline-none focus:ring-gray-500 sm:text-sm"
+            placeholder="Add comments"
+            value={comments || ""}
+            onChange={(e) => {
+              setData({ ...data, comments: e.target.value });
+            }}
+          />
+        </motion.div>
+      )}
+    </div>
+  );
+}

components/app/modals/add-edit-link-modal/expiration-section.tsx

@@ -1,5 +1,5 @@
 import { Dispatch, SetStateAction, useEffect, useState } from "react";
-import { LinkProps } from "#/lib/types";
+import { type Link as LinkProps } from "@prisma/client";
 import { getDateTimeLocal } from "#/lib/utils";
 import Switch from "#/ui/switch";
 import { motion } from "framer-motion";