diff --git a/package.json b/package.json
index a26300b4..b42a9a69 100755
--- a/package.json
+++ b/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",
diff --git a/src/co/bookmarks/edit/form/collection/suggested.js b/src/co/bookmarks/edit/form/collection/suggested.js
index 3bc22b74..fe2fce50 100644
--- a/src/co/bookmarks/edit/form/collection/suggested.js
+++ b/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 (
+ data-expanded={expanded}
+ data-is-new={item.collectionId <= 0}
+ onMouseOver={onMouseOver}>
{collections.map(id=>(
- {tag}
+ {isNew?:null}{tag}
)
}
@@ -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 (
-
+ data-expanded={expanded}
+ title={t.s('suggested')+' '+t.s('tags').toLowerCase()}
+ onMouseOver={onMouseOver}>
{tags.map(tag=>(
))}
+ {new_tags.map(tag=>(
+
+ ))}
)
}
\ No newline at end of file
diff --git a/src/co/bookmarks/edit/form/tags/suggested.module.styl b/src/co/bookmarks/edit/form/tags/suggested.module.styl
index 1948242c..1b326519 100644
--- a/src/co/bookmarks/edit/form/tags/suggested.module.styl
+++ b/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)
}
}
\ No newline at end of file
diff --git a/src/co/common/button/index.module.styl b/src/co/common/button/index.module.styl
index 8ae02ecd..eb53397a 100644
--- a/src/co/common/button/index.module.styl
+++ b/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)
diff --git a/src/data/reducers/bookmarks/index.js b/src/data/reducers/bookmarks/index.js
index a5081c3e..239548e9 100755
--- a/src/data/reducers/bookmarks/index.js
+++ b/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
})
\ No newline at end of file
diff --git a/src/data/reducers/bookmarks/single.js b/src/data/reducers/bookmarks/single.js
index b16c84fe..4c928b53 100755
--- a/src/data/reducers/bookmarks/single.js
+++ b/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
diff --git a/src/data/sagas/bookmarks/single.js b/src/data/sagas/bookmarks/single.js
index 32016946..07e16e6d 100755
--- a/src/data/sagas/bookmarks/single.js
+++ b/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)
diff --git a/src/data/selectors/bookmarks/single.js b/src/data/selectors/bookmarks/single.js
index 183b2809..c1316c6e 100755
--- a/src/data/selectors/bookmarks/single.js
+++ b/src/data/selectors/bookmarks/single.js
@@ -54,9 +54,10 @@ 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 :
@@ -64,6 +65,8 @@ export const makeSuggestedFields = ()=>createSelector(
.filter(cid=>cid!=collectionId)
.splice(0, 5),
tags: tags
+ .filter(tag=>!itemTags?.includes(tag)),
+ new_tags: new_tags
.filter(tag=>!itemTags?.includes(tag))
})
}