konnosDashboard
RecentItems.tsx96 lines · main
1import { useParams } from 'common'
2import dayjs from 'dayjs'
3import { AnimatePresence, motion } from 'framer-motion'
4import Link from 'next/link'
5
6import { useEditorType } from '../editors/EditorsLayout.hooks'
7import { buildTableEditorUrl } from '@/components/grid/BrivenGrid.utils'
8import { EntityTypeIcon } from '@/components/ui/EntityTypeIcon'
9import { ENTITY_TYPE } from '@/data/entity-types/entity-type-constants'
10import { editorEntityTypes, useTabsStateSnapshot } from '@/state/tabs'
11
12export function RecentItems() {
13 const { ref } = useParams()
14 const tabs = useTabsStateSnapshot()
15 const editor = useEditorType()
16
17 if (!tabs?.recentItems || !ref) return null
18
19 // Filter items based on editor type
20 const filteredItems = !editor
21 ? [...tabs.recentItems]
22 : tabs.recentItems.filter((item) => editorEntityTypes[editor].includes(item.type))
23
24 const sortedItems = filteredItems.sort((a, b) => b.timestamp - a.timestamp)
25
26 return (
27 <div className="space-y-4">
28 <h2 className="text-sm text-foreground">Recent items</h2>
29 <div className="flex flex-col gap-0">
30 {sortedItems.length === 0 ? (
31 <motion.div
32 layout
33 initial={false}
34 className="flex flex-col items-center justify-center p-8 text-center border rounded-md border-muted gap-3"
35 >
36 <EntityTypeIcon type={'r' as ENTITY_TYPE} />
37 <div>
38 <p className="text-xs text-foreground-light">No recent items yet</p>
39 <p className="text-xs text-foreground-lighter">
40 Items will appear here as you browse through your project
41 </p>
42 </div>
43 </motion.div>
44 ) : (
45 <AnimatePresence>
46 <div className="grid grid-cols-1 gap-12 gap-y-0">
47 {sortedItems.map((item, index: number) => (
48 <motion.div
49 key={item.id}
50 initial={{ opacity: 0 }}
51 animate={{ opacity: 1 }}
52 exit={{ opacity: 0 }}
53 transition={{ delay: index * 0.012, duration: 0.15 }}
54 >
55 <Link
56 href={
57 item.type === 'sql'
58 ? `/project/${ref}/sql/${item.metadata?.sqlId}`
59 : item.type === 'r' ||
60 item.type === 'v' ||
61 item.type === 'm' ||
62 item.type === 'f' ||
63 item.type === 'p'
64 ? buildTableEditorUrl({
65 projectRef: ref,
66 tableId: item.metadata?.tableId!,
67 schema: item.metadata?.schema,
68 })
69 : `/project/${ref}/explorer/${item.type}/${item.metadata?.schema}/${item.metadata?.name}`
70 }
71 className="flex items-center gap-4 rounded-lg bg-surface-100 py-2 transition-colors hover:bg-surface-200"
72 >
73 <div className="flex h-6 w-6 items-center justify-center rounded-sm bg-surface-100 border">
74 <EntityTypeIcon type={item.type} />
75 </div>
76 <div className="flex flex-1 gap-5 items-center">
77 <span className="text-sm text-foreground">
78 <span className="text-foreground-lighter">{item.metadata?.schema}</span>
79 {item.metadata?.schema && <span className="text-foreground-light">.</span>}
80 <span className="text-foreground">{item.label || 'Untitled'}</span>
81 </span>
82 <div className="bg-border-muted flex grow h-px"></div>
83 <span className="text-xs text-foreground-lighter">
84 {dayjs(item.timestamp).fromNow()}
85 </span>
86 </div>
87 </Link>
88 </motion.div>
89 ))}
90 </div>
91 </AnimatePresence>
92 )}
93 </div>
94 </div>
95 )
96}