Merge branch 'small-fixes-and-improvements' into shigusegubu-themes3

src/components/checkbox/checkbox.vue

@@ -61,12 +61,14 @@ export default {
 <style lang="scss">
 .checkbox {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
   min-height: 1.2em;
+  align-items: baseline;
+  gap: 0 0.5em;
 
   &-indicator,
   & .label {
-    vertical-align: middle;
+    align-self: center;
   }
 
   & > &-indicator {
@@ -138,15 +140,5 @@ export default {
       content: "–";
     }
   }
-
-  & > .label {
-    &.-after {
-      margin-left: 0.5em;
-    }
-
-    &.-before {
-      margin-right: 0.5em;
-    }
-  }
 }
 </style>

src/components/post_status_form/post_status_form.scss

@@ -59,7 +59,6 @@
     flex: 10 0 auto;
     cursor: pointer;
     user-select: none;
-    padding-left: 0.5em;
 
     &:hover {
       text-decoration: underline;

src/components/post_status_form/post_status_form.vue

@@ -301,7 +301,7 @@
           <button
             v-if="quotingAvailable"
             class="bottom-left-button quote-icon button-unstyled"
-            :disabled="newStatus.quote.thread"
+            :disabled="quoteThreadToggled"
             :class="{ toggled: quoteFormVisible }"
             :title="$t('tool_tip.add_quote')"
             @click="toggleQuoteForm"

src/components/settings_modal/helpers/help_indicator.vue

@@ -5,7 +5,6 @@
       :trigger-attrs="{ 'aria-label': $t('settings.setting_changed') }"
     >
       <template #trigger>
-        &nbsp;
         <FAIcon icon="circle-question" />
       </template>
       <template #content>

src/components/settings_modal/helpers/local_setting_indicator.vue

@@ -7,7 +7,6 @@
       trigger="hover"
     >
       <template #trigger>
-        &nbsp;
         <FAIcon
           icon="desktop"
           :aria-label="$t('settings.setting_local_side')"

src/components/settings_modal/helpers/modified_indicator.vue

@@ -8,7 +8,6 @@
       :trigger-attrs="{ 'aria-label': $t('settings.setting_changed') }"
     >
       <template #trigger>
-        &nbsp;
         <FAIcon
           icon="wrench"
         />

src/components/settings_modal/settings_modal.scss

@@ -40,10 +40,6 @@
     line-height: 1.5;
   }
 
-  .suboptions {
-    margin-left: 1em;
-  }
-
   .sidenote {
     margin-left: 5em;
     padding: 0.25em 1em;
@@ -66,6 +62,7 @@
     column-gap: 0.5em;
     align-items: baseline;
     padding: 0.5em 0;
+    line-height: 1.5em;
 
     .setting-label {
       grid-area: label;
@@ -96,6 +93,9 @@
 
         .checkbox-indicator {
           grid-area: control;
+          height: 1.5em;
+          line-height: 1.5em;
+          align-self: baseline;
         }
 
         .-mobile & {
@@ -130,6 +130,12 @@
     padding-left: 0;
     margin: 0;
 
+    &.suboptions {
+      margin-left: 2em;
+      border-top: 1px dotted var(--border);
+    }
+
+
     .btn:not(.dropdown-button) {
       padding: 0 2em;
     }
@@ -207,6 +213,12 @@
       }
     }
 
+    li {
+      .sidenote {
+        margin-left: 1em;
+      }
+    }
+
     /* stylelint-disable no-descending-specificity */
     .setting-item {
       grid-template-columns: 1fr min-content;
@@ -221,9 +233,14 @@
       .checkbox {
         .label {
           text-align: left;
-          margin-left: 0;
+          order: 2;
+        }
+
+        .checkbox-indicator {
+          order: 1;
         }
       }
+
     }
 
     ul {
@@ -236,14 +253,16 @@
       }
     }
 
-
-
     .setting-list:not(.suboptions),
     .option-list {
       &.two-column {
         grid-template-columns: 1fr;
       }
     }
+
+    .UnitSetting {
+      padding-right: 0.5em;
+    }
   }
 
   &.peek {

src/components/settings_modal/tabs/filtering_tab.js

@@ -58,6 +58,7 @@ const FilteringTab = {
             hide = false,
             name = '',
             value = '',
+            caseSensitive = false,
           } = data
 
           this.createFilter({
@@ -66,6 +67,7 @@ const FilteringTab = {
             hide,
             name,
             value,
+            caseSensitive,
           })
         },
         onImportFailure(result) {

src/components/settings_modal/tabs/filtering_tab.scss

@@ -51,7 +51,16 @@
       text-align: right;
     }
 
+    > label.checkbox {
+      display: grid;
+      grid-template-columns: subgrid;
+      grid-template-rows: subgrid;
+      grid-column: 1 / span 2;
+      text-align: right;
+    }
+
     .filter-field-value {
+      display: flex;
       grid-column: 2 / span 2;
     }
   }

src/components/settings_modal/tabs/filtering_tab.vue

@@ -254,6 +254,20 @@
                   :value="filter[1].value"
                   @input="updateFilter(filter[0], 'value', $event.target.value)"
                 >
+                {{ ' ' }}
+              </div>
+              <div class="filter-value filter-field">
+                <Checkbox
+                  :id="'filterCaseSensitive' + filter[0]"
+                  :model-value="filter[1].caseSensitive"
+                  :name="'filterCaseSensitive' + filter[0]"
+                  class="input-inset input-boolean case-sensitive"
+                  @update:model-value="updateFilter(filter[0], 'caseSensitive', $event)"
+                >
+                  <template #before>
+                    {{ $t('settings.filter.case_sensitive') }}
+                  </template>
+                </Checkbox>
               </div>
               <div class="filter-expires filter-field">
                 <label

src/components/status_action_buttons/status_action_buttons.scss

@@ -4,7 +4,7 @@
   .quick-action-buttons {
     display: grid;
     margin-left: -0.5em;
-    grid-template-columns: repeat(auto-fill, minmax(3.5em, 10%));
+    grid-template-columns: repeat(auto-fill, minmax(3.75em, 10%));
     grid-auto-flow: row dense;
     grid-auto-rows: 1fr;
     grid-gap: 0.5em 0.1em;

src/i18n/en.json

@@ -440,6 +440,7 @@
       "plain": "Simple",
       "user": "User (Simple)",
       "user_regexp": "User (RegExp)",
+      "case_sensitive": "Case-sensitive",
       "hide": "Hide completely",
       "name": "Name",
       "value": "Value",

src/services/status_parser/status_parser.js

@@ -10,24 +10,32 @@ export const muteFilterHits = (muteFilters, status) => {
   return muteFilters
     .toSorted((a, b) => b.order - a.order)
     .map((filter) => {
-      const { hide, expires, name, value, type, enabled } = filter
+      const { hide, expires, name, value, type, enabled, caseSensitive = false } = filter
       if (!enabled) return false
       if (value === '') return false
       if (expires !== null && expires < Date.now()) return false
       switch (type) {
         case 'word': {
+          let match = false
+          if (caseSensitive) {
+            match =
+              statusText.includes(value) ||
+              statusSummary.includes(value)
+          } else {
             const lowercaseValue = value.toLowerCase()
-          if (
+            match =
               statusText.toLowerCase().includes(lowercaseValue) ||
               statusSummary.toLowerCase().includes(lowercaseValue)
-          ) {
+          }
+
+          if (match) {
             return { hide, name }
           }
           break
         }
         case 'regexp': {
           try {
-            const re = new RegExp(value, 'i')
+            const re = new RegExp(value, caseSensitive ? '' : 'i')
             if (re.test(statusText) || re.test(statusSummary)) {
               return { hide, name }
             }
@@ -37,18 +45,27 @@ export const muteFilterHits = (muteFilters, status) => {
           }
         }
         case 'user': {
-          if (
+          let match = false
+          if (caseSensitive) {
+            match =
               poster.includes(value) ||
               replyToUser.includes(value) ||
               mentions.some((mention) => mention.includes(value))
-          ) {
+          } else {
+            const lowercaseValue = value.toLowerCase()
+            match =
+              poster.toLowerCase().includes(lowercaseValue) ||
+              replyToUser.toLowerCase().includes(lowercaseValue) ||
+              mentions.some((mention) => mention.toLowerCase().includes(lowercaseValue))
+          }
+          if (match) {
             return { hide, name }
           }
           break
         }
         case 'user_regexp': {
           try {
-            const re = new RegExp(value, 'i')
+            const re = new RegExp(value, caseSensitive ? '' : 'i')
             if (
               re.test(poster) ||
               re.test(replyToUser) ||