Made links in descriptions clickable

client/package.json

@@ -6,6 +6,7 @@
     "@monaco-editor/react": "^4.6.0",
     "date-fns": "^4.1.0",
     "framer-motion": "^11.11.9",
+    "linkify-react": "^4.1.3",
     "lucide-react": "^0.452.0",
     "monaco-editor": "^0.52.0",
     "parse-duration": "^1.1.0",

client/src/components/snippets/list/SnippetCard.tsx

@@ -6,6 +6,8 @@ import { ConfirmationModal } from '../../common/modals/ConfirmationModal';
 import { Snippet } from '../../../types/snippets';
 import CategoryList from '../../categories/CategoryList';
 import { PreviewCodeBlock } from '../../editor/PreviewCodeBlock';
+import Linkify from 'linkify-react';
+import { linkifyOptions } from '../../../constants/linkify';
 
 interface SnippetCardProps {
   snippet: Snippet;
@@ -110,7 +112,9 @@ export const SnippetCard: React.FC<SnippetCardProps> = ({
 
         {!compactView && (
           <p className="text-sm text-gray-300 mb-3 line-clamp-1">
-            {snippet.description || 'No description available'}
+            <Linkify options={linkifyOptions} >
+              {snippet.description || 'No description available'}
+            </Linkify>
           </p>
         )}
 

client/src/components/snippets/view/FullCodeView.tsx

@@ -5,15 +5,19 @@ import { Snippet } from '../../../types/snippets';
 import CategoryList from '../../categories/CategoryList';
 import { getLanguageLabel } from '../../../utils/language/languageUtils';
 import { FullCodeBlock } from '../../editor/FullCodeBlock';
+import Linkify from 'linkify-react';
+import { linkifyOptions } from '../../../constants/linkify';
 
 interface FullCodeViewProps {
+  showTitle?: boolean;
   snippet: Snippet;
   onCategoryClick?: (category: string) => void;
   showLineNumbers?: boolean;
   className?: string;
 }
 
 export const FullCodeView: React.FC<FullCodeViewProps> = ({
+  showTitle = true,
   snippet,
   onCategoryClick,
   showLineNumbers = true,
@@ -27,8 +31,14 @@ export const FullCodeView: React.FC<FullCodeViewProps> = ({
   return (
     <div className={className}>
       <div className="mb-8">
-        <h1 className="text-3xl font-bold mb-4">{snippet.title}</h1>
-        <p className="text-gray-300 mb-4">{snippet.description}</p>
+        {showTitle && (
+          <h1 className="text-3xl font-bold mb-4">{snippet.title}</h1>
+        )}
+        <p className="text-gray-300 mb-4">
+          <Linkify options={linkifyOptions}>
+            {snippet.description || 'No description available'}
+          </Linkify>
+        </p>
 
         <div className="flex items-center gap-4 text-sm text-gray-400">
           <div className="flex items-center gap-1">
@@ -37,15 +47,13 @@ export const FullCodeView: React.FC<FullCodeViewProps> = ({
           </div>
         </div>
 
-        {snippet.categories?.length > 0 && (
-          <CategoryList
-            categories={snippet.categories}
-            onCategoryClick={handleCategoryClick}
-            className="mt-4"
-            variant="clickable"
-            showAll={true}
-          />
-        )}
+        <CategoryList
+          categories={snippet.categories}
+          onCategoryClick={handleCategoryClick}
+          className="mt-4"
+          variant="clickable"
+          showAll={true}
+        />
       </div>
 
       <div className="space-y-6">

client/src/components/snippets/view/SnippetModal.tsx

@@ -1,10 +1,7 @@
 import React from "react";
-import { FileCode } from "lucide-react";
 import { Snippet } from "../../../types/snippets";
 import Modal from "../../common/modals/Modal";
-import CategoryList from "../../categories/CategoryList";
-import { getLanguageLabel } from "../../../utils/language/languageUtils";
-import { FullCodeBlock } from "../../editor/FullCodeBlock";
+import { FullCodeView } from "./FullCodeView";
 
 export interface SnippetModalProps {
   snippet: Snippet | null;
@@ -36,42 +33,12 @@ const SnippetModal: React.FC<SnippetModalProps> = ({
         <h2 className="text-2xl font-bold text-gray-100">{snippet.title}</h2>
       }
     >
-      <p className="text-sm text-gray-300 mb-4 break-words">
-        {snippet.description}
-      </p>
-
-      <CategoryList
-        categories={snippet.categories || []}
-        onCategoryClick={handleCategoryClick}
-        className="mb-6"
-        variant="clickable"
-        showAll={true}
+      <FullCodeView
+        showTitle={false}
+        snippet={snippet}
+        showLineNumbers={showLineNumbers}
+        onCategoryClick={() => handleCategoryClick}
       />
-
-      <div className="space-y-6">
-        {snippet.fragments.map((fragment, index) => (
-          <div key={index} className="bg-gray-700 rounded-lg overflow-hidden">
-            <div className="flex items-center justify-between px-4 pt-4">
-              <div className="flex items-center gap-2">
-                <FileCode size={16} className="text-gray-400" />
-                <span className="text-sm font-medium text-gray-200">
-                  {fragment.file_name}
-                </span>
-              </div>
-              <span className="text-sm text-gray-400">
-                {getLanguageLabel(fragment.language)}
-              </span>
-            </div>
-            <div className="p-4">
-              <FullCodeBlock
-                code={fragment.code}
-                language={fragment.language}
-                showLineNumbers={showLineNumbers}
-              />
-            </div>
-          </div>
-        ))}
-      </div>
     </Modal>
   );
 };

client/src/constants/linkify.ts

@@ -0,0 +1,9 @@
+export const linkifyOptions = {
+  defaultProtocol: 'https',
+  target: '_blank',
+  rel: 'noopener noreferrer',
+  className: 'text-blue-400 hover:text-blue-300 transition-colors duration-200 underline decoration-blue-400/50 hover:decoration-blue-300 cursor-pointer',
+  validate: {
+    url: (_: any) => true
+  }
+};