refactor: connector icon handling by centralizing icon retrieval in contracts.

This commit is contained in:
DESKTOP-RTLN3BA\$punk 2025-09-13 15:13:04 -07:00
parent 8f1fba52b4
commit b33c2904a6
25 changed files with 318 additions and 310 deletions

View file

@ -1,44 +1,12 @@
"use client";
import {
IconBook,
IconBrandDiscord,
IconBrandGithub,
IconBrandNotion,
IconBrandSlack,
IconBrandYoutube,
IconCalendar,
IconChecklist,
IconLayoutKanban,
IconMail,
IconTable,
IconTicket,
} from "@tabler/icons-react";
import { File, Globe, Webhook } from "lucide-react";
import type React from "react";
import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
type IconComponent = React.ComponentType<{ size?: number; className?: string }>;
const documentTypeIcons: Record<string, IconComponent> = {
EXTENSION: Webhook,
CRAWLED_URL: Globe,
SLACK_CONNECTOR: IconBrandSlack,
NOTION_CONNECTOR: IconBrandNotion,
FILE: File,
YOUTUBE_VIDEO: IconBrandYoutube,
GITHUB_CONNECTOR: IconBrandGithub,
LINEAR_CONNECTOR: IconLayoutKanban,
JIRA_CONNECTOR: IconTicket,
DISCORD_CONNECTOR: IconBrandDiscord,
CONFLUENCE_CONNECTOR: IconBook,
CLICKUP_CONNECTOR: IconChecklist,
GOOGLE_CALENDAR_CONNECTOR: IconCalendar,
GOOGLE_GMAIL_CONNECTOR: IconMail,
AIRTABLE_CONNECTOR: IconTable,
};
export function getDocumentTypeIcon(type: string): IconComponent {
return documentTypeIcons[type] ?? File;
export function getDocumentTypeIcon(type: string): React.ReactNode {
return getConnectorIcon(type);
}
export function getDocumentTypeLabel(type: string): string {
@ -49,7 +17,7 @@ export function getDocumentTypeLabel(type: string): string {
}
export function DocumentTypeChip({ type, className }: { type: string; className?: string }) {
const Icon = getDocumentTypeIcon(type);
const icon = getDocumentTypeIcon(type);
return (
<span
className={
@ -57,7 +25,7 @@ export function DocumentTypeChip({ type, className }: { type: string; className?
(className ?? "")
}
>
<Icon size={14} className="text-primary" />
<span className="text-primary">{icon}</span>
{getDocumentTypeLabel(type)}
</span>
);

View file

@ -197,7 +197,7 @@ export function DocumentsTableShell({
</TableHeader>
<TableBody>
{sorted.map((doc, index) => {
const Icon = getDocumentTypeIcon(doc.document_type);
const icon = getDocumentTypeIcon(doc.document_type);
const title = doc.title;
const truncatedTitle = title.length > 30 ? `${title.slice(0, 30)}...` : title;
return (
@ -235,7 +235,7 @@ export function DocumentsTableShell({
<Tooltip>
<TooltipTrigger asChild>
<span className="flex items-center gap-2">
<Icon size={16} className="text-muted-foreground shrink-0" />
<span className="text-muted-foreground shrink-0">{icon}</span>
<span>{truncatedTitle}</span>
</span>
</TooltipTrigger>
@ -293,7 +293,7 @@ export function DocumentsTableShell({
</div>
<div className="md:hidden divide-y">
{sorted.map((doc) => {
const Icon = getDocumentTypeIcon(doc.document_type);
const icon = getDocumentTypeIcon(doc.document_type);
return (
<div key={doc.id} className="p-3">
<div className="flex items-start gap-3">
@ -305,7 +305,7 @@ export function DocumentsTableShell({
<div className="flex-1 min-w-0">
<div className="flex items-center justify-between gap-2">
<div className="flex items-center gap-2 min-w-0">
<Icon size={16} className="text-muted-foreground shrink-0" />
<span className="text-muted-foreground shrink-0">{icon}</span>
<div className="font-medium truncate">{doc.title}</div>
</div>
<RowActions