src/App.scss

@@ -21,7 +21,7 @@
 }
 
 html {
-  font-size: var(--textSize, 1rem);
+  font-size: var(--textSize, 14px);
 
   --navbar-height: var(--navbarSize, 3.5rem);
   --emoji-size: var(--emojiSize, 32px);
@@ -382,10 +382,6 @@ nav {
   font-family: sans-serif;
   font-family: var(--font);
 
-  &.-transparent {
-    backdrop-filter: blur(0.125em) contrast(60%);
-  }
-
   &::-moz-focus-inner {
     border: none;
   }

src/components/button.style.js

@@ -64,26 +64,6 @@ export default {
         opacity: 0.5
       }
     },
-    {
-      component: 'Text',
-      parent: {
-        component: 'Button',
-        variant: 'transparent'
-      },
-      directives: {
-        textColor: '--text'
-      }
-    },
-    {
-      component: 'Icon',
-      parent: {
-        component: 'Button',
-        variant: 'transparent'
-      },
-      directives: {
-        textColor: '--text'
-      }
-    },
     {
       state: ['hover'],
       directives: {

src/components/emoji_picker/emoji_picker.js

@@ -140,7 +140,7 @@ const EmojiPicker = {
     },
     updateEmojiSize () {
       const css = window.getComputedStyle(this.$refs.popover.$el)
-      const fontSize = css.getPropertyValue('font-size') || '1rem'
+      const fontSize = css.getPropertyValue('font-size') || '14px'
       const emojiSize = css.getPropertyValue('--emojiSize') || '2.2rem'
 
       const fontSizeUnit = fontSize.replace(/[0-9,.]+/, '').trim()

src/components/notification/notification.js

@@ -42,7 +42,6 @@ library.add(
 const Notification = {
   data () {
     return {
-      selecting: false,
       statusExpanded: false,
       unmuted: false,
       showingApproveConfirmDialog: false,
@@ -63,35 +62,11 @@ const Notification = {
     UserLink,
     ConfirmModal
   },
-  mounted () {
-    document.addEventListener('selectionchange', this.onContentSelect)
-  },
-  unmounted () {
-    document.removeEventListener('selectionchange', this.onContentSelect)
-  },
   methods: {
     toggleStatusExpanded () {
       if (!this.expandable) return
       this.statusExpanded = !this.statusExpanded
     },
-    onContentSelect () {
-      const { isCollapsed, anchorNode, offsetNode } = document.getSelection()
-      if (isCollapsed) {
-        this.selecting = false
-        return
-      }
-      const within = this.$refs.root.contains(anchorNode) || this.$refs.root.contains(offsetNode)
-      if (within) {
-        this.selecting = true
-      } else {
-        this.selecting = false
-      }
-    },
-    onContentClick (e) {
-      if (!this.selecting && !e.target.closest('a') && !e.target.closest('button')) {
-        this.toggleStatusExpanded()
-      }
-    },
     generateUserProfileLink (user) {
       return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
     },
@@ -163,7 +138,7 @@ const Notification = {
       return highlightStyle(highlight[user.screen_name])
     },
     expandable () {
-      return (new Set(['like', 'pleroma:emoji_reaction', 'repeat'])).has(this.notification.type)
+      return (new Set(['like', '-pleroma:emoji_reaction', 'repeat'])).has(this.notification.type)
     },
     user () {
       return this.$store.getters.findUser(this.notification.from_profile.id)

src/components/notification/notification.vue

@@ -1,7 +1,6 @@
 <template>
   <article
     v-if="notification.type === 'mention' || notification.type === 'status'"
-    ref="root"
   >
     <Status
       class="Notification"
@@ -13,14 +12,13 @@
   <article
     class="NotificationParent"
     :class="{ '-expandable': expandable }"
-    ref="root"
+    :aria-controls="'notif-' +notification.id"
     v-else
   >
     <div
       v-if="needMute && !unmuted"
       :id="'notif-' +notification.id"
       :aria-expanded="statusExpanded"
-      :aria-controls="'notif-' +notification.id"
       class="Notification container -muted"
     >
       <small>
@@ -258,8 +256,8 @@
             class="status-content"
             :compact="!statusExpanded"
             :status="notification.status"
-            :collapse="!statusExpanded"
-            @click="onContentClick"
+            :collapse="statusExpanded"
+            @click="toggleStatusExpanded()"
           />
         </template>
       </div>

src/components/rich_content/rich_content.jsx

@@ -92,12 +92,6 @@ export default {
       required: false,
       type: Boolean,
       default: true
-    },
-    // Collapse newlines
-    collapse: {
-      required: false,
-      type: Boolean,
-      default: false
     }
   },
   // NEVER EVER TOUCH DATA INSIDE RENDER
@@ -296,20 +290,11 @@ export default {
 
     const pass1 = convertHtmlToTree(html).map(processItem)
     const pass2 = [...pass1].reverse().map(processItemReverse).reverse()
-
     // DO NOT USE SLOTS they cause a re-render feedback loop here.
     // slots updated -> rerender -> emit -> update up the tree -> rerender -> ...
     // at least until vue3?
-    const result =
-    <span class={['RichContent', this.faint ? '-faint' : '']}>
-      {
-        this.collapse
-          ? pass2.map(x => {
-            if (!Array.isArray(x)) return x.replace(/\n/g, ' ')
-            return x.map(y => y.type === 'br' ? ' ' : y)
-          })
-          : pass2
-      }
+    const result = <span class={['RichContent', this.faint ? '-faint' : '']}>
+      { pass2 }
     </span>
 
     const event = {

src/components/status/status.scss

@@ -245,8 +245,8 @@
     margin-right: 0;
 
     .emoji {
-      width: 1em;
-      height: 1em;
+      width: 14px;
+      height: 14px;
       vertical-align: middle;
       object-fit: contain;
     }

src/components/status_body/status_body.js

@@ -41,7 +41,6 @@ const StatusBody = {
       parseReadyDone: false
     }
   },
-  emits: ['parseReady'],
   computed: {
     localCollapseSubjectDefault () {
       return this.mergedConfig.collapseMessageWithSubject

src/components/status_body/status_body.vue

@@ -39,8 +39,7 @@
           v-if="!hideSubjectStatus && !(singleLine && status.summary_raw_html)"
           :class="{ '-single-line': singleLine }"
           class="text media-body"
-          :html="status.raw_html"
-          :collapse="collapse"
+          :html="collapse ? collapsedStatus : status.raw_html"
           :emoji="status.emojis"
           :handle-links="true"
           :faint="compact"
@@ -60,6 +59,32 @@
             @click.prevent="toggleShowMore"
           >
             {{ toggleText }}
+            <template v-if="!showingMore">
+              <FAIcon
+                v-if="attachmentTypes.includes('image')"
+                icon="image"
+              />
+              <FAIcon
+                v-if="attachmentTypes.includes('video')"
+                icon="video"
+              />
+              <FAIcon
+                v-if="attachmentTypes.includes('audio')"
+                icon="music"
+              />
+              <FAIcon
+                v-if="attachmentTypes.includes('unknown')"
+                icon="file"
+              />
+              <FAIcon
+                v-if="status.poll && status.poll.options"
+                icon="poll-h"
+              />
+              <FAIcon
+                v-if="status.card"
+                icon="link"
+              />
+            </template>
           </button>
         </div>
       </div>

src/components/status_content/status_content.js

@@ -65,7 +65,6 @@ const StatusContent = {
     'controlledShowingLongSubject',
     'controlledToggleShowingLongSubject'
   ],
-  emits: ['parseReady', 'mediaplay', 'mediapause'],
   data () {
     return {
       uncontrolledShowingTall: this.fullContent || (this.inConversation && this.focused),

src/components/status_content/status_content.vue

@@ -24,7 +24,7 @@
         />
       </div>
 
-      <div class="poll-icon" v-else-if="status.poll && status.poll.options && compact">
+      <div v-else-if="status.poll && status.poll.options && compact">
         <FAIcon
           icon="poll-h"
           size="2x"
@@ -63,9 +63,5 @@
 .StatusContent {
   flex: 1;
   min-width: 0;
-
-  .poll-icon {
-    margin: 0.5em;
-  }
 }
 </style>

src/modules/instance.js

@@ -108,7 +108,7 @@ const defaultState = {
   palette: null,
   style: null,
   emojiReactionsScale: 0.5,
-  textSize: '1rem',
+  textSize: '14px',
   emojiSize: '2.2rem',
   navbarSize: '3.5rem',
   panelHeaderSize: '3.2rem',