<commit_before><template>
  <div class="quickbar view-toolbar">
    <a
      @click="emitClickEvent('mobile','mobile')"
      id="rssmonster"
      class="view-button"
      data-behavior="view_unread change_view_mode"
      data-view-mode="view_unread"
      data-remote="true"
    ></a>
    <a
      v-on:click="loadType('unread')"
      v-bind:class="{ 'selected':  store.currentSelection.status === 'unread' }"
      id="unread"
      class="view-button"
      title="View unread"
      data-behavior="view_unread change_view_mode"
      data-view-mode="view_unread"
      data-remote="true"
    >
      <i class="fas fa-circle" data-fa-transform="down-0 shrink-0 left-5"></i>
      Unread {{ this.store.unreadCount }}
    </a>
    <a
      v-on:click="loadType('read')"
      v-bind:class="{ 'selected':  store.currentSelection.status === 'read' }"
      id="read"
      class="view-button selected"
      title="View read"
      data-behavior="view_all change_view_mode"
      data-view-mode="view_all"
      data-remote="true"
    >
      <i class="far fa-circle" data-fa-transform="down-0 shrink-0 left-5"></i>
      Read {{ this.store.readCount }}
    </a>
    <a
      v-on:click="loadType('star')"
      v-bind:class="{ 'selected':  store.currentSelection.status === 'star' }"
      id="star"
      class="view-button"
      title="View starred"
      data-behavior="view_starred change_view_mode"
      data-view-mode="view_starred"
      data-remote="true"
    >
      <i class="far fa-heart" data-fa-transform="down-0 shrink-0 left-5"></i>
      Star {{ this.store.starCount }}
    </a>
  </div>
</template>

<style>
div.quickbar a {
  font-size: 12px;
  cursor: pointer;
}
</style>

<script>
import store from "../store";

export default {
  data() {
    return {
      store: store
    };
  },
  methods: {
    loadType: function(status) {
      this.store.currentSelection.status = status;
    },
    emitClickEvent(eventType, value) {
      this.$emit(eventType, value);
    }
  }
};
</script>
<style>
.view-toolbar {
  width: 100%;
  background-color: #31344B;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 41px;
  border-bottom: 1px solid transparent;
  border-color: #dcdee0;
  position: absolute;
  color: #fff;
}

.view-button {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: center;
  line-height: 41px;
  height: 100%;
  text-decoration: none;
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: bold;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #b4b6b8;
}

a#rssmonster.view-button {
  background: url(../assets/monster.svg) 10px 10px no-repeat;
  background-size: 20px 20px;
  max-width: 40px;
  min-width: 40px;
}

a#title.view-button {
  text-align: left;
  margin-left: 10px;
  max-width: 90px;
}

a#unread.view-button,
a#star.view-button,
a#read.view-button {
  border-left: 1px solid transparent;
  border-color: #dcdee0;
  cursor: pointer;
}
</style><commit_msg>fix and highlight selection in mobile quickbar<commit_after><template>
  <div class="quickbar view-toolbar">
    <a
      @click="emitClickEvent('mobile','mobile')"
      id="rssmonster"
      class="view-button"
      data-behavior="view_unread change_view_mode"
      data-view-mode="view_unread"
      data-remote="true"
    ></a>
    <a
      v-on:click="loadType('unread')"
      v-bind:class="{ 'selected':  store.currentSelection.status == 'unread' }"
      id="unread"
      class="view-button"
      title="View unread"
      data-behavior="view_unread change_view_mode"
      data-view-mode="view_unread"
      data-remote="true"
    >
      <i class="fas fa-circle" data-fa-transform="down-0 shrink-0 left-5"></i>
      Unread {{ this.store.unreadCount }}
    </a>
    <a
      v-on:click="loadType('read')"
      v-bind:class="{ 'selected':  store.currentSelection.status == 'read' }"
      id="read"
      class="view-button"
      title="View read"
      data-behavior="view_all change_view_mode"
      data-view-mode="view_all"
      data-remote="true"
    >
      <i class="far fa-circle" data-fa-transform="down-0 shrink-0 left-5"></i>
      Read {{ this.store.readCount }}
    </a>
    <a
      v-on:click="loadType('star')"
      v-bind:class="{ 'selected':  store.currentSelection.status == 'star' }"
      id="star"
      class="view-button"
      title="View starred"
      data-behavior="view_starred change_view_mode"
      data-view-mode="view_starred"
      data-remote="true"
    >
      <i class="far fa-heart" data-fa-transform="down-0 shrink-0 left-5"></i>
      Star {{ this.store.starCount }}
    </a>
  </div>
</template>

<style>
div.quickbar a {
  font-size: 12px;
  cursor: pointer;
}
</style>

<script>
import store from "../store";

export default {
  data() {
    return {
      store: store
    };
  },
  methods: {
    loadType: function(status) {
      this.store.currentSelection.status = status;
    },
    emitClickEvent(eventType, value) {
      this.$emit(eventType, value);
    }
  }
};
</script>
<style>
.view-toolbar {
  width: 100%;
  background-color: #31344B;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 41px;
  border-bottom: 1px solid transparent;
  border-color: #dcdee0;
  position: absolute;
  color: #fff;
}

.view-button {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: center;
  line-height: 41px;
  height: 100%;
  text-decoration: none;
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: bold;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #b4b6b8;
}

a#rssmonster.view-button {
  background: url(../assets/monster.svg) 10px 10px no-repeat;
  background-size: 20px 20px;
  max-width: 40px;
  min-width: 40px;
}

a#title.view-button {
  text-align: left;
  margin-left: 10px;
  max-width: 90px;
}

a#unread.view-button,
a#star.view-button,
a#read.view-button {
  border-left: 1px solid transparent;
  border-color: #dcdee0;
  cursor: pointer;
}

.view-button.selected {
  color: #18bc9c !important;
}
</style>
{'fraction_non_alphanumeric': 0.16519647153167602, 'fraction_numerical': 0.018123496391339214, 'mean_word_length': 2.9121706398996237, 'pattern_counts': {'":': 0, '<': 51, '<?xml version=': 0, '>': 51, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4719449', 'n_tokens_mistral': 2394, 'n_tokens_neox': 2276, 'n_words': 422}