- Show suggested collection even for old

- Improve collection name search

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "app",
-	"version": "5.6.25",
+	"version": "5.6.26",
 	"description": "",
 	"author": "",
 	"license": "ISC",

src/co/bookmarks/edit/form/collection/index.js

@@ -60,11 +60,9 @@ export default function BookmarkEditFormCollection({ item, onChange, onSave }) {
                     <Icon name='arrow' />
                 </Button>
 
-                {item?.collectionId <= 0 ? (
-                    <Suggested 
-                        item={item}
-                        events={pickerEvents} />
-                ) : null}
+                <Suggested 
+                    item={item}
+                    events={pickerEvents} />
             </div>
 
             {pick && (

src/co/bookmarks/edit/form/collection/suggested.js

@@ -1,23 +1,24 @@
 import s from './suggested.module.styl'
 import React, { useMemo, useCallback } from 'react'
-import t from '~t'
 import { useSelector } from 'react-redux'
 import { makeSuggestedFields } from '~data/selectors/bookmarks'
-import { makeCollection } from '~data/selectors/collections'
+import { makeCollectionPath } from '~data/selectors/collections'
 import { isPro } from '~data/selectors/user'
 
 import Button from '~co/common/button'
-import CollectionIcon from '~co/collections/item/icon'
 
 function Suggestion({ id, onClick }) {
-    const getCollection = useMemo(()=>makeCollection(), [])
-    const collection = useSelector(state=>getCollection(state, id))
+    const getCollectionPath = useMemo(()=>makeCollectionPath(), [])
+    const path = useSelector(state=>getCollectionPath(state, id, { self: true }))
+    const shortPath = useMemo(()=>path.map((p)=>p.title).slice(-2).join(' / '), [path])
+    const fullPath = useMemo(()=>path.map((p)=>p.title).join(' / '), [path])
+    const collection = useMemo(()=>path?.[path.length-1], [path])
 
-    if (!collection.title)
+    if (!collection?.title)
         return null
 
     return (
-        <Button 
+        <Button
             data-id={id}
             className={s.suggestion}
             data-tint={collection.color}
@@ -26,9 +27,9 @@ function Suggestion({ id, onClick }) {
             data-shape='pill'
             size='small'
             tabIndex='-1'
+            title={fullPath}
             onClick={onClick}>
-            {collection.cover?.[0] ? <CollectionIcon {...collection} /> : null}
-            <span>{collection.title}</span>
+            <span className={s.path}>{shortPath}</span>
         </Button>
     )
 }
@@ -51,8 +52,8 @@ export default function BookmarkEditFormCollectionSuggested({ item, events: { on
 
     return (
         <div 
-            className={s.suggested}
-            title={t.s('suggested')+' '+t.s('collection').toLowerCase()}>            
+            className={s.suggested} 
+            data-is-new={item.collectionId <= 0}>
             {collections.map(id=>(
                 <Suggestion 
                     key={id} 

src/co/bookmarks/edit/form/collection/suggested.module.styl

@@ -4,26 +4,37 @@
     overflow: hidden
     min-height: calc(var(--icon-size) + var(--padding-small))
     max-height: calc(var(--icon-size) + var(--padding-small))
-    transition: opacity .3s ease-in-out, max-height .2s ease-in-out
+    transition: opacity .5s ease-in-out, transform .2s ease-in-out, max-height .2s ease-in-out, min-height .2s ease-in-out
 
-    &:hover {
+    &:hover:not(:empty) {
         transition-delay: .2s
         max-height: calc( (var(--icon-size) + var(--padding-small)) * 3 )
     }
 
     &:empty {
         opacity: 0
+        transform: translateY(5px)
+
+        &[data-is-new='false'] {
+            min-height: 0
+            max-height: 0
+        }
     }
 
     > * {
         margin-top: var(--padding-small)
         margin-right: var(--padding-small)
-        max-width: 300px
-        overflow: hidden
-        overflow: clip
     }
 }
 
+.path {
+    max-width: 150px
+    overflow: hidden
+    overflow: clip
+    direction: rtl
+    text-align: left
+}
+
 .suggestion {
     --shadow-color: var(--shadow-light-color)
     * {

src/co/bookmarks/edit/form/index.js

@@ -21,7 +21,7 @@ export default function BookmarkEditForm(props) {
     //load suggestions
     useEffect(()=>
         dispatch(suggestFields(props.item)),
-        [props.item._id, props.item.cover]
+        [props.item._id, props.item.media]
     )
 
     const onSubmitForm = useCallback(e=>{

src/co/bookmarks/edit/form/tags/suggested.module.styl

@@ -4,7 +4,7 @@
     overflow: hidden
     min-height: calc(var(--icon-size) + var(--padding-small))
     max-height: calc(var(--icon-size) + var(--padding-small))
-    transition: opacity .2s ease-in-out, max-height .15s ease-in-out, min-height .15s ease-in-out
+    transition: opacity .5s ease-in-out, transform .2s ease-in-out, max-height .2s ease-in-out, min-height .2s ease-in-out
 
     &:hover:not(:empty) {
         transition-delay: .2s
@@ -13,6 +13,7 @@
 
     &:empty {
         opacity: 0
+        transform: translateY(5px)
         min-height: 0
         max-height: 0
     }

src/data/helpers/collections.js

@@ -58,7 +58,8 @@ export const getPath = (allCollections, allGroups, objectId, options={})=>{
 		_id: 	parent._id,
 		type:   'collection',
 		title: 	parent.title,
-		cover: 	parent.cover
+		cover: 	parent.cover,
+		color:	parent.color
 	})
 	const findParents = (findId, deep=0)=>{
 		const parent = allCollections[findId]

src/data/selectors/bookmarks/single.js

@@ -7,6 +7,7 @@ import {
 } from '../../helpers/bookmarks'
 
 const emptyObject = {}
+const emptyArray = []
 
 //Single
 export const bookmark = ({bookmarks}, _id)=>bookmarks.elements[_id] ? bookmarks.elements[_id] : blankBookmark
@@ -52,15 +53,14 @@ export const makeCreatorRef = ()=>createSelector(
 export const makeSuggestedFields = ()=>createSelector(
 	[
 		({bookmarks}, { link })=>bookmarks.suggestedFields[link] || {},
-		({config})=>config.last_collection,
 		(_, { collectionId })=>collectionId
 	],
-	({ collections=[], tags=[] }, last_collection, collectionId)=>({
-		collections: [
-			...(last_collection == 0 || collectionId == last_collection || collections.includes(last_collection) ? [] : [last_collection]),
-			...collections
-		].splice(0, 5),
-
+	({ collections=[], tags=[] }, collectionId)=>({
+		collections: collections?.[0] == collectionId ? 
+			emptyArray : 
+			[...collections]
+				.filter(cid=>cid!=collectionId)
+				.splice(0, 5),
 		tags
 	})
 )

src/data/selectors/search/collections.js

@@ -11,9 +11,10 @@ export const makeCollectionsSearch = ()=>createSelector(
 		({collections={}})=>collections.groups,
         (state, ignore)=>parseInt(ignore),
         (state, ignore, filter)=>filter,
+		(state, ignore, filter, query)=>query,
     ],
-	(items, groups, ignore, _filter)=>{
-		const filter = (_filter||'').toLowerCase().trim()
+	(items, groups, ignore, _filter, _query)=>{
+		const filter = (_query||_filter||'').toLowerCase().trim()
 		if (!filter) return emptyArray
 
 		const found = []

src/data/selectors/search/suggestions.js

@@ -4,7 +4,7 @@ import { makeTagsSearch } from '../tags'
 import { makeCollectionsSearch } from './collections'
 import { makeOptions } from './options'
 
-//(state, spaceId, filter) -> []
+//(state, spaceId, filter, query) -> []
 export const makeSuggestions = ()=>createSelector(
     [
         makeOptions(),