fix: Added custom hashtag fixes

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;
 }

src/components/Settings.tsx

@@ -62,7 +62,7 @@ const SettingsDialog = ({ onClose }: SettingsProps) => {
       </div>
       <div className="settings-footer">
         <button type="submit" className="btn btn-primary" onClick={onSubmit}>
-          Save Settings
+          Apply settings
         </button>
       </div>
     </div>

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%;

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)

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<string[]>([]);
+  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 (
     <div className="tag-editor">
       {selectedTags.map(tag => (
-        <div className={`tag ${tag.selected ? 'selected' : ''}`} key={tag.name} onClick={e => selectTag(e)}>
+        <div className={`tag ${tag.selected ? 'selected' : ''}`} key={tag.name} onClick={() => selectTag(tag.name)}>
           {tag.name}
           {tag.deletable && (
             <span className="delete-tag" onClick={() => deleteTag(tag.name)}>

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());

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 {

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<string[]>([]);
+
+  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;