Split existing and new tags in tags suggestions

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "app",
-	"version": "5.6.68",
+	"version": "5.6.69",
 	"description": "All-in-one bookmark manager",
 	"author": "Rustem Mussabekov",
 	"license": "MIT",

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

@@ -1,5 +1,5 @@
 import s from './suggested.module.styl'
-import React, { useMemo, useCallback } from 'react'
+import React, { useState, useMemo, useCallback } from 'react'
 import { useSelector } from 'react-redux'
 import { makeSuggestedFields } from '~data/selectors/bookmarks'
 import { makeCollectionPath } from '~data/selectors/collections'
@@ -43,6 +43,10 @@ export default function BookmarkEditFormCollectionSuggested({ item, events: { on
     const getSuggestedFields = useMemo(()=>makeSuggestedFields(), [])
     const { collections=[] } = useSelector(state=>getSuggestedFields(state, item))
 
+    //expand
+    const [expanded, setExpanded] = useState(false)
+    const onMouseOver = useCallback(()=>setExpanded(true), [])
+
     //click
     const onSuggestionClick = useCallback(e=>{
         const _id = parseInt(e.currentTarget.getAttribute('data-id'))
@@ -55,7 +59,9 @@ export default function BookmarkEditFormCollectionSuggested({ item, events: { on
     return (
         <div 
             className={s.suggested} 
-            data-is-new={item.collectionId <= 0}>
+            data-expanded={expanded}
+            data-is-new={item.collectionId <= 0}
+            onMouseOver={onMouseOver}>
             {collections.map(id=>(
                 <Suggestion 
                     key={id} 

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

@@ -4,10 +4,10 @@
     overflow: hidden
     min-height: calc(var(--icon-size) + var(--padding-small))
     max-height: calc(var(--icon-size) + var(--padding-small))
-    transition: opacity .15s ease-in, max-height .2s ease-out, min-height .2s ease-out
+    transition: opacity .2s ease-in, max-height .3s ease-out, min-height .3s ease-out
 
-    &:hover:not(:empty) {
-        transition-delay: .2s
+    &[data-expanded=true]:not(:empty) {
+        transition-delay: .2s;
         max-height: calc( (var(--icon-size) + var(--padding-small)) * 3 )
     }
 
@@ -43,14 +43,4 @@
     &[data-tint]:not([data-tint='']) {
         background: unquote('color-mix(in srgb, var(--tint) 12%, transparent)')
     }
-}
-
-@media screen and (min-width: 600px) {
-    .path {
-        max-width: 30ch
-    }
-
-    .suggested {
-        max-height: 100% !important
-    }
 }

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

@@ -1,23 +1,25 @@
 import s from './suggested.module.styl'
-import React, { useMemo, useCallback } from 'react'
+import React, { useState, useMemo, useCallback } from 'react'
 import t from '~t'
 import { useSelector } from 'react-redux'
 import { makeSuggestedFields } from '~data/selectors/bookmarks'
 import { isPro } from '~data/selectors/user'
 
+import Icon from '~co/common/icon'
 import Button from '~co/common/button'
 
-function Suggestion({ tag, onClick }) {
+function Suggestion({ tag, isNew=false, onClick }) {
     return (
         <Button 
             data-tag={tag}
             className={s.suggestion}
             variant='dotted'
             data-shape='pill'
+            data-is-new={isNew}
             size='small'
             tabIndex='-1'
             onClick={onClick}>
-            {tag}
+            {isNew?<Icon name='add' size='micro' />:null}{tag}
         </Button>
     )
 }
@@ -27,7 +29,11 @@ export default function BookmarkEditFormTagsSuggested({ item, onTagClick }) {
     const enabled = useSelector(state=>state.config.ai_suggestions)
     const pro = useSelector(state=>isPro(state))
     const getSuggestedFields = useMemo(()=>makeSuggestedFields(), [])
-    const { tags=[] } = useSelector(state=>getSuggestedFields(state, item))
+    const { tags, new_tags } = useSelector(state=>getSuggestedFields(state, item))
+
+    //expand
+    const [expanded, setExpanded] = useState(false)
+    const onMouseOver = useCallback(()=>setExpanded(true), [])
 
     //click
     const onSuggestionClick = useCallback(e=>{
@@ -39,15 +45,24 @@ export default function BookmarkEditFormTagsSuggested({ item, onTagClick }) {
         return null
 
     return (
-        <div 
+        <div
             className={s.suggested}
-            title={t.s('suggested')+' '+t.s('tags').toLowerCase()}>            
+            data-expanded={expanded}
+            title={t.s('suggested')+' '+t.s('tags').toLowerCase()}
+            onMouseOver={onMouseOver}>            
             {tags.map(tag=>(
                 <Suggestion 
                     key={tag} 
                     tag={tag} 
                     onClick={onSuggestionClick} />
             ))}
+            {new_tags.map(tag=>(
+                <Suggestion 
+                    key={tag} 
+                    tag={tag}
+                    isNew={true}
+                    onClick={onSuggestionClick} />
+            ))}
         </div>
     )
 }

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

@@ -4,10 +4,10 @@
     overflow: hidden
     min-height: calc(var(--icon-size) + var(--padding-small))
     max-height: calc(var(--icon-size) + var(--padding-small))
-    transition: opacity .15s ease-in, max-height .2s ease-out, min-height .2s ease-out
+    transition: opacity .2s ease-in, max-height .3s ease-out, min-height .3s ease-out
 
-    &:hover:not(:empty) {
-        transition-delay: .2s
+    &[data-expanded=true]:not(:empty) {
+        transition-delay: .2s;
         max-height: calc( (var(--icon-size) + var(--padding-small)) * 3 )
     }
 
@@ -30,7 +30,7 @@
         --icon-size: var(--padding-medium)
     }
 
-    &[data-tint]:not([data-tint='']) {
-        background: unquote('color-mix(in srgb, var(--tint) 12%, transparent)')
+    &[data-is-new=true] {
+        color: var(--secondary-text-color)
     }
 }

src/co/common/button/index.module.styl

@@ -237,6 +237,7 @@
     font-size: var(--secondary-font-size)
     line-height: var(--icon-size)
     --button-height: var(--icon-size)
+    grid-gap: var(--padding-mini)
 
     &[data-shape='pill'] {
         padding: 0 var(--padding-small)

src/data/reducers/bookmarks/index.js

@@ -66,7 +66,7 @@ const initialState = Immutable({
 	elements: {},
 	meta: {},
 	html: {},
-	suggestedFields: {}, //{ urlString: { collections: [], tags: [] } }
+	suggestedFields: {}, //{ urlString: { collections: [], tags: [], new_tags: [] } }
 
 	selectMode: blankSelectMode
 })

src/data/reducers/bookmarks/single.js

@@ -206,10 +206,10 @@ export default function(state, action) {
 
 		//Suggestions
 		case BOOKMARK_SUGGESTED_FIELDS:{
-			const { link, collections, tags } = action
+			const { link, collections=[], tags=[], new_tags=[] } = action
 
 			return state
-				.setIn(['suggestedFields', link], { collections, tags })
+				.setIn(['suggestedFields', link], { collections, tags, new_tags })
 		}
 
 		//Update tags

src/data/sagas/bookmarks/single.js

@@ -386,8 +386,9 @@ function* suggestFields({ obj, ignore }) {
 		yield put({
 			type: BOOKMARK_SUGGESTED_FIELDS,
 			link: obj.link,
-			collections: item.collections.map(({$id})=>$id),
-			tags: item.tags
+			collections: (item.collections || []).map(({$id})=>$id),
+			tags: item.tags || [],
+			new_tags: item.new_tags || []
 		})
 	} catch (error) {
 		console.error(error)

src/data/selectors/bookmarks/single.js

@@ -54,16 +54,19 @@ export const makeSuggestedFields = ()=>createSelector(
 	[
 		({bookmarks}, { link })=>bookmarks.suggestedFields[link] || {},
 		(_, { collectionId })=>collectionId,
-		(_, { tags })=>tags
+		(_, { tags })=>tags,
+		(_, { new_tags })=>new_tags
 	],
-	({ collections=[], tags=[] }, collectionId, itemTags)=>{
+	({ collections=[], tags=[], new_tags=[] }, collectionId, itemTags)=>{
 		return ({
 			collections: collections?.[0] == collectionId ? 
 				emptyArray : 
 				[...collections]
 					.filter(cid=>cid!=collectionId)
 					.splice(0, 5),
 			tags: tags
+				.filter(tag=>!itemTags?.includes(tag)),
+			new_tags: new_tags
 				.filter(tag=>!itemTags?.includes(tag))
 		})
 	}