hiddennote style changes, new preference to hide muted notes

packages/app/src/Element/Event/HiddenNote.tsx

@@ -7,12 +7,12 @@ const HiddenNote = ({ children }: { children: React.ReactNode }) => {
   return show ? (
     children
   ) : (
-    <div className="card note hidden-note">
+    <div className="card note hidden-note p0">
       <div className="header">
         <p>
           <FormattedMessage defaultMessage="This note has been muted" id="qfmMQh" />
         </p>
-        <button type="button" onClick={() => setShow(true)}>
+        <button className="btn btn-sm btn-neutral" onClick={() => setShow(true)}>
           <FormattedMessage {...messages.Show} />
         </button>
       </div>

packages/app/src/Element/Event/NoteInner.tsx

@@ -47,6 +47,9 @@ export function NoteInner(props: NoteProps) {
   const [showTranslation, setShowTranslation] = useState(true);
   const { formatMessage } = useIntl();
   const [showMore, setShowMore] = useState(false);
+  const { hideMutedNotes } = useLogin(s => ({
+    hideMutedNotes: s.appData.item.preferences.hideMutedNotes,
+  }));
 
   const totalReactions = reactions.positive.length + reactions.negative.length + reposts.length + zaps.length;
 
@@ -410,5 +413,5 @@ export function NoteInner(props: NoteProps) {
     </div>
   );
 
-  return !ignoreModeration && isEventMuted(ev) ? <HiddenNote>{note}</HiddenNote> : note;
+  return !ignoreModeration && isEventMuted(ev) ? hideMutedNotes ? <></> : <HiddenNote>{note}</HiddenNote> : note;
 }

packages/app/src/Login/Preferences.ts

@@ -96,6 +96,12 @@ export interface UserPreferences {
    * Auto-translate when available
    */
   autoTranslate?: boolean;
+
+  /**
+   * Hides muted notes when selected
+   */
+  hideMutedNotes: boolean;
+
 }
 
 export const DefaultPreferences = {
@@ -116,4 +122,5 @@ export const DefaultPreferences = {
   showStatus: true,
   checkSigs: CONFIG.defaultPreferences.checkSigs,
   autoTranslate: true,
+  hideMutedNotes:false
 } as UserPreferences;

packages/app/src/Pages/settings/Preferences.tsx

@@ -497,6 +497,23 @@ const PreferencesPage = () => {
           />
         </div>
       </div>
+      <div className="flex justify-between">
+        <div className="flex flex-col g8">
+          <h4>
+            <FormattedMessage {...messages.HideMutedNotes} />
+          </h4>
+          <small>
+            <FormattedMessage {...messages.HideMutedNotesHelp} />
+          </small>
+        </div>
+        <div>
+          <input
+            type="checkbox"
+            checked={perf.hideMutedNotes}
+            onChange={e => updatePreferences(id, { ...perf, hideMutedNotes: e.target.checked })}
+          />
+        </div>
+      </div>
     </div>
   );
 };

packages/app/src/Pages/settings/messages.ts

@@ -76,4 +76,9 @@ export default defineMessages({
   ServiceWorkerNotRunning: { defaultMessage: "Service Worker Not Running", id: "RDha9y" },
   SubscribedToPush: { defaultMessage: "Subscribed to Push", id: "G3A56c" },
   NotSubscribedToPush: { defaultMessage: "Not Subscribed to Push", id: "d2ebEu" },
+  HideMutedNotes: { defaultMessage: "Hide Muted Notes", id: "M3Oira" },
+  HideMutedNotesHelp: {
+    defaultMessage: "Muted notes will not be shown",
+    id: "MBAYRA",
+  },
 });