[Feature Request] - Additional Settings Request

[ondrovic]

Discussed in #789

^{Originally posted by ondrovic August 17, 2024}
Can settings be added under the User Interface tab for, I know it defaults to hidden on mobile devices which is great, this would be for any screen size larger than the limit already set

Sidebar - Checkbox control
Collapsed

Status Filters - Checkbox control
Collapsed

Filter By Tracker - Checkbox control
Collapsed

Default Filter - Dropdown box
Allows you to select the filter you want to always see by default

UI Mockup

Code:

<h2 class="h4">Default Filter</h2>
  <div class="form__row form__row--justify--start form__row--align--start">
    <div class="form__row__item form__row__item--auto form__row__item--grow form__row__item--shrink">
      <div class="select form__element">
        <input class="input input--hidden" name="filter" tabindex="-1" type="text" value="auto" />
        <div class="form__element__wrapper">
          <button class="button form__element select__button form__element--has-addon form__element--has-addon--placed-after button--quaternary" type="button">
            <div class="button__content"><div class="context-menu__item css-1an49rn" role="button" tabindex="0">Downloading</div></div>
          </button>
          <div class="form__element__addon form__element__addon--placed-after form__element__addon--is-icon select__indicator css-1wfsguk" role="button" tabindex="0">
            <svg class="icon icon--chevron" width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M5.193 6.631A1 1 0 0 0 3.733 8l5.199 5.549 5.376-5.536a1 1 0 0 0-1.435-1.394L8.958 10.65 5.193 6.631z" fill-rule="nonzero"></path></svg>
          </div>
        </div>
      </div>
    </div>
  </div>
  <h2 class="h4">Sidebar</h2>
  <div class="form__row form__row--justify--start form__row--align--start">
    <div class="form__row__item form__row__item--auto form__row__item--grow form__row__item--shrink">
      <div class="select form__element">
        <label class="form__element toggle-input checkbox">
          <input class="toggle-input__element" name="sideBar" type="checkbox" value="" checked="" />
          <div class="toggle-input__indicator">
            <div class="toggle-input__indicator__icon">
              <svg class="icon icon--checkmark" width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M4.904 8.563a1.25 1.25 0 1 0-1.597 1.924l3.895 3.23a1.25 1.25 0 0 0 1.727-.125l6.777-7.525a1.25 1.25 0 1 0-1.858-1.673l-5.974 6.633-2.97-2.464z" fill-rule="nonzero"></path></svg>
            </div>
          </div>
      <div class="toggle-input__label">Collapsed</div></label>
      </div>
    </div>
  </div>
  <h2 class="h4">Filter by Status</h2>
  <div class="form__row form__row--justify--start form__row--align--start">
    <div class="form__row__item form__row__item--auto form__row__item--grow form__row__item--shrink">
      <div class="select form__element">
        <label class="form__element toggle-input checkbox">
          <input class="toggle-input__element" name="filterByStatus" type="checkbox" value="" checked="" />
          <div class="toggle-input__indicator">
            <div class="toggle-input__indicator__icon">
              <svg class="icon icon--checkmark" width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M4.904 8.563a1.25 1.25 0 1 0-1.597 1.924l3.895 3.23a1.25 1.25 0 0 0 1.727-.125l6.777-7.525a1.25 1.25 0 1 0-1.858-1.673l-5.974 6.633-2.97-2.464z" fill-rule="nonzero"></path></svg>
            </div>
          </div>
      <div class="toggle-input__label">Collapsed</div></label>
      </div>
    </div>
  </div>
  <h2 class="h4">Filter by Tracker</h2>
  <div class="form__row form__row--justify--start form__row--align--start">
    <div class="form__row__item form__row__item--auto form__row__item--grow form__row__item--shrink">
      <div class="select form__element">
        <label class="form__element toggle-input checkbox">
          <input class="toggle-input__element" name="filterByTracker" type="checkbox" value="" checked="" />
          <div class="toggle-input__indicator">
            <div class="toggle-input__indicator__icon">
              <svg class="icon icon--checkmark" width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M4.904 8.563a1.25 1.25 0 1 0-1.597 1.924l3.895 3.23a1.25 1.25 0 0 0 1.727-.125l6.777-7.525a1.25 1.25 0 1 0-1.858-1.673l-5.974 6.633-2.97-2.464z" fill-rule="nonzero"></path></svg>
            </div>
          </div>
      <div class="toggle-input__label">Collapsed</div></label>
      </div>
    </div>
  </div>