From 7d91b5f8df933db9d18f0967bb06b213855a0e06 Mon Sep 17 00:00:00 2001
From: khalilzitouni2058 <114951550+khalilzitouni2058@users.noreply.github.com>
Date: Thu, 17 Apr 2025 12:41:57 +0100
Subject: [PATCH] [WEB-3892] feat: add icon to Quicklinks (#6927)

* [feature]: add icon to Quicklinks

* fix: moving  getIconForLink to utils packages
---
 packages/utils/src/get-icon-for-link.ts       | 109 ++++++++++++++++++
 packages/utils/src/index.ts                   |   4 +
 .../home/widgets/links/link-detail.tsx        |  16 ++-
 3 files changed, 126 insertions(+), 3 deletions(-)
 create mode 100644 packages/utils/src/get-icon-for-link.ts

diff --git a/packages/utils/src/get-icon-for-link.ts b/packages/utils/src/get-icon-for-link.ts
new file mode 100644
index 000000000..d0f3d9bc2
--- /dev/null
+++ b/packages/utils/src/get-icon-for-link.ts
@@ -0,0 +1,109 @@
+import {
+    Github,
+    Linkedin,
+    Twitter,
+    Facebook,
+    Instagram,
+    Youtube,
+    Dribbble,
+    Figma,
+    FileText,
+    FileImage,
+    FileVideo,
+    FileAudio,
+    FileArchive,
+    FileSpreadsheet,
+    FileCode,
+    Mail,
+    Chrome,
+    Link2,
+  } from "lucide-react";
+
+  
+  // get-icon-for-link.ts
+
+  export const getIconForLink = (url: string) => {
+    const lowerUrl = url.toLowerCase();
+  
+    // Social Media
+    if (lowerUrl.indexOf("github.com") !== -1) return Github;
+    if (lowerUrl.indexOf("linkedin.com") !== -1) return Linkedin;
+    if (lowerUrl.indexOf("twitter.com") !== -1 || lowerUrl.indexOf("x.com") !== -1) return Twitter;
+    if (lowerUrl.indexOf("facebook.com") !== -1) return Facebook;
+    if (lowerUrl.indexOf("instagram.com") !== -1) return Instagram;
+    if (lowerUrl.indexOf("youtube.com") !== -1 || lowerUrl.indexOf("youtu.be") !== -1) return Youtube;
+    if (lowerUrl.indexOf("dribbble.com") !== -1) return Dribbble;
+  
+    // Productivity / Tools
+    if (lowerUrl.indexOf("figma.com") !== -1) return Figma;
+    
+    if (
+      lowerUrl.indexOf("google.com") !== -1 ||
+      lowerUrl.indexOf("docs.") !== -1 ||
+      lowerUrl.indexOf("doc.") !== -1
+    ) return FileText;
+  
+    // File types
+    if (
+      lowerUrl.indexOf(".jpg") !== -1 ||
+      lowerUrl.indexOf(".jpeg") !== -1 ||
+      lowerUrl.indexOf(".png") !== -1 ||
+      lowerUrl.indexOf(".gif") !== -1 ||
+      lowerUrl.indexOf(".bmp") !== -1 ||
+      lowerUrl.indexOf(".svg") !== -1 ||
+      lowerUrl.indexOf(".webp") !== -1
+    ) return FileImage;
+  
+    if (
+      lowerUrl.indexOf(".mp4") !== -1 ||
+      lowerUrl.indexOf(".mov") !== -1 ||
+      lowerUrl.indexOf(".avi") !== -1 ||
+      lowerUrl.indexOf(".wmv") !== -1 ||
+      lowerUrl.indexOf(".flv") !== -1 ||
+      lowerUrl.indexOf(".mkv") !== -1
+    ) return FileVideo;
+  
+    if (
+      lowerUrl.indexOf(".mp3") !== -1 ||
+      lowerUrl.indexOf(".wav") !== -1 ||
+      lowerUrl.indexOf(".ogg") !== -1
+    ) return FileAudio;
+  
+    if (
+      lowerUrl.indexOf(".zip") !== -1 ||
+      lowerUrl.indexOf(".rar") !== -1 ||
+      lowerUrl.indexOf(".7z") !== -1 ||
+      lowerUrl.indexOf(".tar") !== -1 ||
+      lowerUrl.indexOf(".gz") !== -1
+    ) return FileArchive;
+  
+    if (
+      lowerUrl.indexOf(".xls") !== -1 ||
+      lowerUrl.indexOf(".xlsx") !== -1 ||
+      lowerUrl.indexOf(".csv") !== -1
+    ) return FileSpreadsheet;
+  
+    if (
+      lowerUrl.indexOf(".pdf") !== -1 ||
+      lowerUrl.indexOf(".doc") !== -1 ||
+      lowerUrl.indexOf(".docx") !== -1 ||
+      lowerUrl.indexOf(".txt") !== -1
+    ) return FileText;
+  
+    if (
+      lowerUrl.indexOf(".html") !== -1 ||
+      lowerUrl.indexOf(".js") !== -1 ||
+      lowerUrl.indexOf(".ts") !== -1 ||
+      lowerUrl.indexOf(".jsx") !== -1 ||
+      lowerUrl.indexOf(".tsx") !== -1 ||
+      lowerUrl.indexOf(".css") !== -1 ||
+      lowerUrl.indexOf(".scss") !== -1
+    ) return FileCode;
+  
+    // Other
+    if (lowerUrl.indexOf("mailto:") !== -1) return Mail;
+    if (lowerUrl.indexOf("http") === 0) return Chrome;
+  
+    return Link2;
+  };
+  
\ No newline at end of file
diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts
index 177a7fc0c..765dce49d 100644
--- a/packages/utils/src/index.ts
+++ b/packages/utils/src/index.ts
@@ -12,4 +12,8 @@ export * from "./string";
 export * from "./theme";
 export * from "./workspace";
 export * from "./work-item";
+
+export * from "./get-icon-for-link";
+
 export * from "./subscription";
+
diff --git a/web/core/components/home/widgets/links/link-detail.tsx b/web/core/components/home/widgets/links/link-detail.tsx
index e632aaa2f..1b4953d07 100644
--- a/web/core/components/home/widgets/links/link-detail.tsx
+++ b/web/core/components/home/widgets/links/link-detail.tsx
@@ -2,11 +2,18 @@
 
 import { FC } from "react";
 import { observer } from "mobx-react";
-import { Pencil, Trash2, ExternalLink, EllipsisVertical, Link2, Link } from "lucide-react";
+import {
+  Pencil,
+  ExternalLink,
+  Link,
+  Trash2
+} from "lucide-react";
 import { useTranslation } from "@plane/i18n";
 import { TOAST_TYPE, setToast, CustomMenu, TContextMenuItem } from "@plane/ui";
 // plane utils
-import { cn, copyTextToClipboard } from "@plane/utils";
+import { cn, copyTextToClipboard,getIconForLink } from "@plane/utils";
+
+
 // helpers
 import { calculateTimeAgo } from "@/helpers/date-time.helper";
 // hooks
@@ -32,6 +39,8 @@ export const ProjectLinkDetail: FC<TProjectLinkDetail> = observer((props) => {
   if (!linkDetail) return <></>;
 
   const viewLink = linkDetail.url;
+  
+  const Icon = getIconForLink(linkDetail.url);
 
   const handleEdit = (modalToggle: boolean) => {
     toggleLinkModal(modalToggle);
@@ -47,6 +56,7 @@ export const ProjectLinkDetail: FC<TProjectLinkDetail> = observer((props) => {
       });
     });
   const handleOpenInNewTab = () => window.open(`${viewLink}`, "_blank");
+ 
 
   const MENU_ITEMS: TContextMenuItem[] = [
     {
@@ -81,7 +91,7 @@ export const ProjectLinkDetail: FC<TProjectLinkDetail> = observer((props) => {
       className="cursor-pointer group flex items-center bg-custom-background-100 px-4 w-[230px] h-[56px] border-[0.5px] border-custom-border-200 rounded-md gap-4 hover:shadow-md transition-shadow"
     >
       <div className="flex-shrink-0 size-8 rounded p-2 bg-custom-background-80 grid place-items-center">
-        <Link2 className="size-4 stroke-2 text-custom-text-350 -rotate-45" />
+        <Icon className="size-4 stroke-2 text-custom-text-350" />
       </div>
       <div className="flex-1 truncate">
         <div className="text-sm font-medium truncate">{linkDetail.title || linkDetail.url}</div>