library drafts and favorites filter, fav button

frontend/apps/desktop/src/components/favoriting.tsx

@@ -26,7 +26,13 @@ function RemoveFavoriteButton({
   )
 }
 
-export function FavoriteButton({id}: {id: UnpackedHypermediaId}) {
+export function FavoriteButton({
+  id,
+  hideUntilItemHover,
+}: {
+  id: UnpackedHypermediaId
+  hideUntilItemHover?: boolean
+}) {
   const favorite = useFavorite(id)
   if (favorite.isFavorited) {
     return (
@@ -43,6 +49,8 @@ export function FavoriteButton({id}: {id: UnpackedHypermediaId}) {
       <Button
         icon={Star}
         size="$2"
+        opacity={hideUntilItemHover ? 0 : 1}
+        $group-item-hover={{opacity: 1}}
         onPress={(e: MouseEvent) => {
           e.stopPropagation()
           favorite.addFavorite()

frontend/apps/desktop/src/models/library.ts

@@ -9,6 +9,7 @@ import {
 import {useDrafts} from './accounts'
 import {useDraftList} from './documents'
 import {getParentPaths, useEntities} from './entities'
+import {useFavorites} from './favorites'
 import {useSearch} from './search'
 
 export type FilterItem =
@@ -37,10 +38,12 @@ export type LibraryData = Array<{
   draft?: HMDraft
   location: LibraryDependentData[]
   authors: LibraryDependentData[]
+  isFavorite: boolean
 }>
 
 export function useLibrary(query: LibraryQueryState): LibraryData {
   const search = useSearch(query.filterString, {})
+  const favorites = useFavorites()
   const draftList = useDraftList()
   const searchedIds =
     search.data?.map((entity) => unpackHmId(entity.id)).filter((id) => !!id) ||
@@ -50,6 +53,9 @@ export function useLibrary(query: LibraryQueryState): LibraryData {
       search.data?.findIndex((searchResult) => searchResult.id === draftId) ===
       -1,
   )
+  const selectedFilters = Object.entries(query.filter)
+    .filter(([filterKey, value]) => value)
+    .map(([filterKey]) => filterKey as FilterItem)
   const entities = useEntities(searchedIds)
   const alreadyFetchingIds = new Set<string>()
   searchedIds.forEach((id) => {
@@ -150,7 +156,7 @@ export function useLibrary(query: LibraryQueryState): LibraryData {
       .filter((location) => !!location)
   }
   const dependentEntities = useEntities(dependentEntityIds)
-  const results: LibraryData = [
+  let results: LibraryData = [
     ...(draftQueryList
       ?.map((draftId) => {
         const id = unpackHmId(draftId)
@@ -166,6 +172,7 @@ export function useLibrary(query: LibraryQueryState): LibraryData {
           document: undefined,
           location: getLocation(id),
           authors: getAuthors(draft ? [draft.signingAccount] : []),
+          isFavorite: false,
         }
       })
       .filter((result) => !!result) || []),
@@ -185,10 +192,34 @@ export function useLibrary(query: LibraryQueryState): LibraryData {
           hasDraft,
           location: getLocation(id),
           authors: getAuthors(entity?.data?.document?.authors || []),
+          isFavorite:
+            favorites?.findIndex((fav) => fav && fav.id === id.id) !== -1,
         }
       })
       .filter((result) => !!result) || []),
   ]
+  if (selectedFilters.length) {
+    results = results.filter((result) => {
+      return selectedFilters.some((filter) => {
+        switch (filter) {
+          case 'drafts':
+            return result.hasDraft
+          case 'favorites':
+            return result.isFavorite
+          default:
+            return false
+        }
+      })
+    })
+  }
+  if (query.filterString) {
+    // even though the filter string was passed to search, drafts are not filtered out yet. we had to load them because we don't know their title after listDrafts
+    results = results.filter((result) => {
+      const name =
+        result.document?.metadata?.name || result.draft?.metadata?.name || ''
+      return name.toLowerCase().includes(query.filterString.toLowerCase())
+    })
+  }
   if (query.sort === 'alphabetical') return alphabeticalSort(results)
   if (query.sort === 'lastUpdate') return lastUpdateSort(results)
   return results

frontend/apps/desktop/src/pages/library.tsx

@@ -1,3 +1,4 @@
+import {FavoriteButton} from '@/components/favoriting'
 import {MainWrapper} from '@/components/main-wrapper'
 import {LinkThumbnail, Thumbnail} from '@/components/thumbnail'
 import {
@@ -521,24 +522,25 @@ function LibraryListItem({entry}: {entry: LibraryData[0]}) {
   const navigate = useNavigate()
   const metadata = entry.document?.metadata || entry.draft?.metadata
   const isUnpublished = !!entry.draft && !entry.document
+  const isFavorite = !isUnpublished && entry.isFavorite
   return (
     <Button
       size="$4"
+      group="item"
       borderWidth={0}
       hoverStyle={{
         bg: '$color5',
       }}
       paddingHorizontal={16}
       paddingVertical="$1"
-      h="auto"
       onPress={() => {
         if (isUnpublished) navigate({key: 'draft', id: entry.id})
         else navigate({key: 'document', id: entry.id})
       }}
       h={60}
       icon={
         <Thumbnail
-          size={32}
+          size={42}
           id={entry.id}
           metadata={entry.document?.metadata || entry.draft?.metadata}
         />
@@ -579,6 +581,9 @@ function LibraryListItem({entry}: {entry: LibraryData[0]}) {
         </YStack>
       </XStack>
       <XStack gap="$3" ai="center">
+        {isUnpublished ? null : (
+          <FavoriteButton id={entry.id} hideUntilItemHover />
+        )}
         {entry.hasDraft && !isUnpublished ? (
           <Button
             theme="yellow"