diff --git a/src/components/Settings.css b/src/components/Settings.css index 95221b0..3495f49 100644 --- a/src/components/Settings.css +++ b/src/components/Settings.css @@ -28,7 +28,7 @@ display: flex; flex-direction: column; gap: 24px; - + overflow-y: auto; max-width: 35em; max-height: 35em; } @@ -102,5 +102,5 @@ } .settings .settings-content > * { - margin-bottom: 2em; + margin-bottom: 1em; } diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx index cae77ba..1aac5fe 100644 --- a/src/components/Settings.tsx +++ b/src/components/Settings.tsx @@ -62,7 +62,7 @@ const SettingsDialog = ({ onClose }: SettingsProps) => {
diff --git a/src/components/SlideShow.css b/src/components/SlideShow.css index 678d0f9..691e454 100644 --- a/src/components/SlideShow.css +++ b/src/components/SlideShow.css @@ -121,7 +121,7 @@ .controls button svg { fill: white; opacity: 0.8; - height: 1.5em; + height: 1.8em; width: 2em; transform: fill 0.5s ease-in-out; } @@ -173,22 +173,6 @@ margin: auto; } -@media screen and (max-width: 960px) { - .bottomPanel .caption { - font-size: 1.5em; - } - .controls button svg { - height: 1.3em; - width: 1.3em; - } -} - -@media screen and (max-width: 600px) { - .bottomPanel .caption { - font-size: 1em; - } -} - .centerSymbol { position: absolute; top: 50%; diff --git a/src/components/SlideShow.tsx b/src/components/SlideShow.tsx index 376efcd..d7fe52c 100644 --- a/src/components/SlideShow.tsx +++ b/src/components/SlideShow.tsx @@ -24,9 +24,14 @@ import IconSettings from './Icons/IconSettings'; import IconPlay from './Icons/IconPlay'; import IconGrid from './Icons/IconGrid'; import useNav from '../utils/useNav'; -import SearchDialog from './TagEditor'; /* FEATURES: +- fix issues with user/settings tags not being clickable +- add option to view global without filter +- add radiobutton or tabs to choose either user or tag filter +- improve mobile support +- widescreen mobile details view should be 2 columns +- how to get back from a filtered user/tag to the full feed? - always update title (grid and slideshow, maybe details too?) - add respost/reply filter to the settings dialog - Support re-posts and replies (incl. filter in settings) diff --git a/src/components/TagEditor.tsx b/src/components/TagEditor.tsx index 41c819f..3639604 100644 --- a/src/components/TagEditor.tsx +++ b/src/components/TagEditor.tsx @@ -3,6 +3,7 @@ import './TagEditor.css'; import useNav from '../utils/useNav'; import uniq from 'lodash/uniq'; import { visibleHashTags } from './env'; +import useUserTags from '../utils/useUserTags'; type TagEditorProps = { selectedTags: Tag[]; @@ -19,27 +20,23 @@ const TagEditor = ({ selectedTags, setSelectedTags }: TagEditorProps) => { const { currentSettings } = useNav(); const [editMode, setEditMode] = useState(false); - const [userTags, setUserTags] = useState([]); + const [userTags, setUserTags] = useUserTags(); useEffect(() => { const previousSelected = selectedTags.filter(tag => tag.selected).map(tag => tag.name); const previousDeletable = selectedTags.filter(tag => tag.deletable).map(tag => tag.name); - //add currentSettings.tags to userTags + const tags = uniq([...userTags, ...visibleHashTags, ...currentSettings.tags]).sort(); - const tags = uniq([...userTags, ...visibleHashTags, ...currentSettings.tags]) - .sort() - .map(name => ({ name, selected: false })); const selected = tags.map(tag => ({ - ...tag, - selected: previousSelected.includes(tag.name), - deletable: previousDeletable.includes(tag.name), + name: tag, + selected: previousSelected.includes(tag), + deletable: previousDeletable.includes(tag) || userTags.includes(tag), })); setSelectedTags([...selected]); }, [currentSettings, userTags]); - const selectTag = (e: any) => { - const tagName = e.target.innerText; + const selectTag = (tagName: string) => { const tag = selectedTags.find(tag => tag.name === tagName); if (tag) { tag.selected = !tag.selected; @@ -59,13 +56,14 @@ const TagEditor = ({ selectedTags, setSelectedTags }: TagEditorProps) => { const deleteTag = (tagName: string) => { const tags = selectedTags.filter(tag => tag.name !== tagName); + setUserTags(userTags.filter(t => t !== tagName)); setSelectedTags([...tags]); }; return (
{selectedTags.map(tag => ( -
selectTag(e)}> +
selectTag(tag.name)}> {tag.name} {tag.deletable && ( deleteTag(tag.name)}> diff --git a/src/components/env.ts b/src/components/env.ts index d2bffaa..b18aee3 100644 --- a/src/components/env.ts +++ b/src/components/env.ts @@ -71,6 +71,7 @@ export const nfswTags = [ 'nasstr', 'nsfw', 'nude', + 'nodestr', 'nudeart', 'nudes', 'onlyfans', @@ -125,6 +126,9 @@ export const nsfwNPubs = [ 'npub1nkw853ncf4nmsctujc3hdahwtm03hssrskc2t33qjqedxtpwupfqeukt53', // bpufa 'npub1hjdtj67ckrq0lzga2mchny3wmgn6rptp826djd6edgyru7x6dszq093c0a', // ai 'npub1peq5ds2jaj5en35xgl6r6rxvvk9eh4ppzhs4mpdh9s5y8ffdwl5q7nmyda', // Furry Artworks 18+ + 'npub1qg550au9hqmpgye4kfrtj7yt85dn60ty5hk0hcm7pktq6g6mzugsufnfcx', // Poppy Clements + 'npub16932qv3sz53t9fdlm2n7scct5ahe9fy9vsct36qd0wcwxm94gyks47dcg6', // Preggers + 'npub16ye5pezunzcx8y0ecjquks0sr5jkj6lrhfjyu2n9qxt5cxgzrvcqgnvx8s', // Aru Moon ]; export const nsfwPublicKeys = nsfwNPubs.map(npub => (nip19.decode(npub).data as string).toLowerCase()); diff --git a/src/utils/useNav.ts b/src/utils/useNav.ts index 18a113b..9c21f2e 100644 --- a/src/utils/useNav.ts +++ b/src/utils/useNav.ts @@ -20,7 +20,7 @@ const useNav = () => { let useTags = tags?.split(',') || []; if (npub == undefined && (useTags == undefined || useTags.length == 0)) { - useTags = defaultHashTags; + useTags = []; // defaultHashTags; } return { diff --git a/src/utils/useUserTags.ts b/src/utils/useUserTags.ts new file mode 100644 index 0000000..b761481 --- /dev/null +++ b/src/utils/useUserTags.ts @@ -0,0 +1,30 @@ +import { useEffect, useState } from 'react'; + +declare global { + interface Window { + localStorage: any; + } +} + +const useUserTags = (): [string[], (tags: string[]) => void] => { + const [userTags, setUserTags] = useState([]); + + useEffect(() => { + const previousUserTags = JSON.parse(localStorage.getItem('userTags') as string); + console.log(previousUserTags); + if (previousUserTags) { + setUserTags(previousUserTags); + } + }, []); + + return [ + userTags, + (tags: string[]) => { + console.log(tags); + setUserTags(tags); + localStorage.setItem('userTags', JSON.stringify(tags)); + }, + ]; +}; + +export default useUserTags;