1- import { BookOpen , ChevronDown , ChevronsUpDown , ChevronUp , ScrollText } from 'lucide-react' ;
1+ import { BookOpen , ChevronDown , ChevronsUpDown , ChevronUp , Scroll , ScrollText } from 'lucide-react' ;
22import {
33 Button ,
44 Card ,
@@ -11,6 +11,10 @@ import {
1111 SearchBar ,
1212 Spinner ,
1313 Table ,
14+ Tooltip ,
15+ TooltipContent ,
16+ TooltipProvider ,
17+ TooltipTrigger ,
1418 TableBody ,
1519 TableCell ,
1620 TableHead ,
@@ -56,6 +60,10 @@ export const HOME_STRING_KEYS = Object.freeze([
5660 '%resources_searchedFor%' ,
5761 '%resources_sync%' ,
5862 '%resources_paratextProjects_label%' ,
63+ '%resources_paratextProject_tooltip%' ,
64+ '%resources_resource_tooltip%' ,
65+ '%resources_editable%' ,
66+ '%resources_readOnly%' ,
5967 '%resources_resources_label%' ,
6068] as const ) ;
6169
@@ -211,6 +219,12 @@ export function Home({
211219 const searchedForText : string = getLocalizedString ( '%resources_searchedFor%' ) ;
212220 const syncText : string = getLocalizedString ( '%resources_sync%' ) ;
213221 const paratextProjectsText : string = getLocalizedString ( '%resources_paratextProjects_label%' ) ;
222+ const paratextProjectTooltipText : string = getLocalizedString (
223+ '%resources_paratextProject_tooltip%' ,
224+ ) ;
225+ const resourceTooltipText : string = getLocalizedString ( '%resources_resource_tooltip%' ) ;
226+ const editableText : string = getLocalizedString ( '%resources_editable%' ) ;
227+ const readOnlyText : string = getLocalizedString ( '%resources_readOnly%' ) ;
214228 const resourcesText : string = getLocalizedString ( '%resources_resources_label%' ) ;
215229
216230 const mergedProjectInfo : MergedProjectInfo [ ] = useMemo ( ( ) => {
@@ -528,43 +542,62 @@ export function Home({
528542 < TableCell
529543 className = { cn ( { 'tw-ps-2' : project . editedStatus === 'edited' } ) }
530544 >
531- < div
532- className = { cn (
533- 'tw-flex tw-flex-row tw-items-center tw-gap-4 tw-ps-2' ,
534- { 'tw-ps-0' : project . editedStatus === 'edited' } ,
535- ) }
536- >
537- < div className = "tw-flex tw-flex-row tw-items-center tw-gap-2" >
538- { project . editedStatus === 'edited' && (
539- < div className = "tw-rounded-full tw-bg-primary tw-h-2 tw-w-2 tw-m-[-10px]" />
540- ) }
541- { ( ( ) => {
542- const Icon = project . isResource ? BookOpen : ScrollText ;
543- return < Icon className = "tw-h-4 tw-w-4" /> ;
544- } ) ( ) }
545- </ div >
545+ < TooltipProvider >
546+ < Tooltip >
547+ < TooltipTrigger asChild >
548+ < div
549+ className = { cn (
550+ 'tw-flex tw-flex-row tw-items-center tw-gap-4 tw-ps-2' ,
551+ { 'tw-ps-0' : project . editedStatus === 'edited' } ,
552+ ) }
553+ >
554+ < div className = "tw-flex tw-flex-row tw-items-center tw-gap-2" >
555+ { project . editedStatus === 'edited' && (
556+ < div className = "tw-rounded-full tw-bg-primary tw-h-2 tw-w-2 tw-m-[-10px]" />
557+ ) }
558+ { ( ( ) => {
559+ let Icon = ScrollText ;
560+ if ( project . isResource ) Icon = BookOpen ;
561+ else if ( ! project . isEditable ) Icon = Scroll ;
562+ return < Icon className = "tw-h-4 tw-w-4" /> ;
563+ } ) ( ) }
564+ </ div >
546565
547- < div className = "tw-whitespace-nowrap tw-cursor-default" >
548- { project . name }
549- </ div >
566+ < div className = "tw-whitespace-nowrap tw-cursor-default" >
567+ { project . name }
568+ </ div >
550569
551- < div className = "tw-grow tw-hidden max-[300px]:!tw-flex" >
552- < div className = "tw-grow" />
553- < HomeItemDropdownMenu ellipsisButtonClassName = "tw-h-6" >
554- { ( ! project . isLocallyAvailable ||
555- project . editedStatus === 'edited' ) && (
556- < DropdownMenuItem asChild >
557- { syncOrGetButton ( project , true ) }
558- </ DropdownMenuItem >
559- ) }
560- { project . isLocallyAvailable && (
561- < DropdownMenuItem asChild >
562- { openButton ( project , true ) }
563- </ DropdownMenuItem >
564- ) }
565- </ HomeItemDropdownMenu >
566- </ div >
567- </ div >
570+ < div className = "tw-grow tw-hidden max-[300px]:!tw-flex" >
571+ < div className = "tw-grow" />
572+ < HomeItemDropdownMenu ellipsisButtonClassName = "tw-h-6" >
573+ { ( ! project . isLocallyAvailable ||
574+ project . editedStatus === 'edited' ) && (
575+ < DropdownMenuItem asChild >
576+ { syncOrGetButton ( project , true ) }
577+ </ DropdownMenuItem >
578+ ) }
579+ { project . isLocallyAvailable && (
580+ < DropdownMenuItem asChild >
581+ { openButton ( project , true ) }
582+ </ DropdownMenuItem >
583+ ) }
584+ </ HomeItemDropdownMenu >
585+ </ div >
586+ </ div >
587+ </ TooltipTrigger >
588+ < TooltipContent >
589+ < div > { project . fullName } </ div >
590+ < div >
591+ { project . isResource
592+ ? resourceTooltipText
593+ : paratextProjectTooltipText . replace (
594+ '{0}' ,
595+ project . isEditable ? editableText : readOnlyText ,
596+ ) }
597+ </ div >
598+ </ TooltipContent >
599+ </ Tooltip >
600+ </ TooltipProvider >
568601 </ TableCell >
569602 < TableCell className = "tw-hidden md:!tw-table-cell tw-font-medium tw-break-words tw-cursor-default tw-break-all" >
570603 { project . fullName }
0 commit comments