Add SimilarPapersSection component and integrate it into WorkRightSidebar

components/work/WorkRightSidebar.tsx

@@ -12,6 +12,7 @@ import { LicenseSection } from './components/LicenseSection';
 import { FormatsSection } from './components/FormatsSection';
 import { VersionsSection } from './components/VersionsSection';
 import { JournalSection } from './components/JournalSection';
+import { SimilarPapersSection } from './components/SimilarPapersSection';
 import { useMemo } from 'react';
 
 interface WorkRightSidebarProps {
@@ -34,6 +35,7 @@ export const WorkRightSidebar = ({ work, metadata }: WorkRightSidebarProps) => {
       <SupportersSection tips={work.tips || []} documentId={work.id} />
       {work.journal && <JournalSection journal={work.journal} />}
       <TopicsSection topics={metadata.topics || []} />
+      {work.contentType === 'paper' && <SimilarPapersSection paperId={work.id} />}
       {work.doi && <DOISection doi={work.doi} />}
       {work.postType !== 'QUESTION' && <LicenseSection license={work.license} />}
       <FormatsSection formats={work.formats} />

components/work/components/SimilarPapersSection.tsx

@@ -0,0 +1,130 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { PaperService } from '@/services/paper.service';
+import { Work } from '@/types/work';
+import { FileText } from 'lucide-react';
+import Link from 'next/link';
+import { AuthorList } from '@/components/ui/AuthorList';
+import { truncateText } from '@/utils/stringUtils';
+import { Skeleton } from '@/components/ui/Skeleton';
+
+interface SimilarPapersSectionProps {
+  paperId: number;
+}
+
+const SimilarPaperCardSkeleton = () => (
+  <div className="bg-gray-50 rounded-md border border-l-2 border-l-gray-400 border-gray-200 p-2.5">
+    <Skeleton className="h-4 w-full mb-2" />
+    <Skeleton className="h-3 w-3/4" />
+  </div>
+);
+
+export const SimilarPapersSection = ({ paperId }: SimilarPapersSectionProps) => {
+  const [similarPapers, setSimilarPapers] = useState<Work[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchSimilarPapers = async () => {
+      try {
+        setIsLoading(true);
+        setError(null);
+        const papers = await PaperService.getSimilarPapers(paperId);
+        setSimilarPapers(papers || []);
+      } catch (err) {
+        console.error('Error fetching similar papers:', err);
+        setError('Failed to load similar papers');
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    if (paperId) {
+      fetchSimilarPapers();
+    }
+  }, [paperId]);
+
+  // Don't render if there's an error
+  if (error) {
+    return null;
+  }
+
+  if (isLoading) {
+    return (
+      <section>
+        <div className="flex items-center space-x-2 mb-4">
+          <FileText className="h-6 w-6 text-gray-500" />
+          <h2 className="text-base font-semibold text-gray-900">Similar Papers</h2>
+        </div>
+        <div className="space-y-2">
+          {[...Array(3)].map((_, i) => (
+            <SimilarPaperCardSkeleton key={`skeleton-${i}`} />
+          ))}
+        </div>
+      </section>
+    );
+  }
+
+  if (!similarPapers || similarPapers.length === 0) {
+    return null;
+  }
+
+  return (
+    <section>
+      <div className="flex items-center space-x-2 mb-4">
+        <FileText className="h-6 w-6 text-gray-500" />
+        <h2 className="text-base font-semibold text-gray-900">Similar Papers</h2>
+      </div>
+      <div className="space-y-2">
+        {similarPapers.slice(0, 3).map((paper) => {
+          const authors =
+            paper.authors?.map((author) => ({
+              name: author.authorProfile.fullName,
+              verified: author.authorProfile.user?.isVerified,
+              profileUrl: author.authorProfile.profileUrl,
+            })) || [];
+
+          const paperUrl = `/paper/${paper.id}/${paper.slug}`;
+          const truncatedTitle = truncateText(paper.title, 80);
+          const formattedDate = paper.publishedDate
+            ? new Date(paper.publishedDate).toLocaleDateString('en-US', {
+                year: 'numeric',
+                month: 'short',
+                day: 'numeric',
+              })
+            : null;
+
+          return (
+            <Link
+              key={paper.id}
+              href={paperUrl}
+              className="block bg-gray-50 rounded-md border border-l-2 border-l-gray-400 border-gray-200 p-2.5 hover:bg-gray-100 transition-colors"
+            >
+              <h3 className="text-xs font-medium text-gray-900 line-clamp-2 mb-1.5">
+                {truncatedTitle}
+              </h3>
+              <div className="flex items-center gap-2 flex-wrap">
+                {authors.length > 0 && (
+                  <AuthorList
+                    authors={authors}
+                    size="xs"
+                    className="text-gray-600 font-normal"
+                    delimiter="•"
+                    maxLength={2}
+                  />
+                )}
+                {formattedDate && (
+                  <>
+                    {authors.length > 0 && <span className="text-xs text-gray-400">•</span>}
+                    <span className="text-xs text-gray-500">{formattedDate}</span>
+                  </>
+                )}
+              </div>
+            </Link>
+          );
+        })}
+      </div>
+    </section>
+  );
+};

services/paper.service.ts

@@ -230,4 +230,18 @@ export class PaperService {
     const response = await ApiClient.patch(`${this.BASE_PATH}/${paperId}/`, payload);
     return transformPaper(response);
   }
+
+  /**
+   * Get similar papers for a given paper
+   * API returns: {count: number, results: [paper1, paper2, ...]}
+   */
+  static async getSimilarPapers(paperId: number): Promise<Work[]> {
+    const response = await ApiClient.get<any>(`${this.BASE_PATH}/${paperId}/similar_papers/`);
+
+    // Extract papers array from response (handles {results: [...]} or direct array)
+    const papers = Array.isArray(response) ? response : response?.results || [];
+
+    // Transform each paper
+    return papers.map(transformPaper);
+  }
 }