<commit_before><template>
  <div class="list-content">
    <div class="list-count" v-show="listItems.length > 0">
      Count: {{listCount}}
    </div>
    <div v-for="listItem in listItems" :key="listItem._id">
      <div class="list-item" @click="selectItem(listItem)"
        :class="selectedItemId === listItem._id ? 'list-item-selected' : 'list-item-unselected'">
        <h4 class="list-item-subject">
          <i class="list-item-subject-icon material-icons" v-if="listItem.folder_name === undefined">folder</i>
          <span class="list-item-subject-title">{{listItem.name | truncate(50)}}</span>
          <i class="list-item-subject-action list-item-margin material-icons"
            v-if="listItem.deleted === 1" @click="restoreItem(listItem._id)">restore</i>
          <i class="list-item-subject-action material-icons" @click="deleteItem(listItem)">delete</i>
        </h4>
        <p class="list-item-desc">
          {{listItem.digest | truncate(100)}}
        </p>
        <h5 class="list-item-time">{{listItem.updated_at | fmtDate}} {{listItem.folder_name}}</h5>
      </div>
    </div>
    <div id="list-loader">
      <i class="el-icon-loading" v-show="loadMoreFlag"></i>
    </div>
    <div class="list-empty-hint" v-show="listItems.length === 0">
      {{listPanelHint}}
    </div>
  </div>
</template>

<style scoped>
.list-content {
  position: relative; /* needed for perfert-scrollbar */
  height: 100%; /* needed for perfert-scrollbar */
}

.list-content a {
  text-decoration: none;
  outline: none;
  color: #434343;
}

.list-count {
  top: 0;
  position: sticky;
  font-size: 14px;
  padding: 15px 15px;
  border-bottom: 1px solid #ddd;
  background: #F5F5F5;
}

.list-item {
  cursor: pointer;
  padding: 15px 15px;
  border-bottom: 1px solid #ddd;
}

.list-item-unselected:hover {
  background: #F6F7F9;
}

.list-item-selected {
  background: #EAF0FB;
}

.list-item-time,
.list-item-subject {
  margin: 0;
}

.list-item-time {
  color: #999;
}

.list-item-subject {
  min-height: 24px;
  display: flex;
  flex-flow: row;
  align-items: center;
}

.list-item-margin,
.list-item-subject-icon {
  margin-right: 10px;
}

.list-item-subject-title {
  flex: auto;
}<commit_msg>add attachment indicator to note list<commit_after><template>
  <div class="list-content">
    <div class="list-count" v-show="listItems.length > 0">
      Count: {{listCount}}
    </div>
    <div v-for="listItem in listItems" :key="listItem._id">
      <div class="list-item" @click="selectItem(listItem)"
        :class="selectedItemId === listItem._id ? 'list-item-selected' : 'list-item-unselected'">
        <h4 class="list-item-subject">
          <i class="list-item-subject-icon material-icons" v-if="listItem.folder_name === undefined">folder</i>
          <span class="list-item-subject-title">{{listItem.name | truncate(50)}}</span>
          <i class="list-item-subject-action list-item-margin material-icons"
            v-if="listItem.deleted === 1" @click="restoreItem(listItem._id)">restore</i>
          <i class="list-item-subject-action material-icons" @click="deleteItem(listItem)">delete</i>
        </h4>
        <p class="list-item-desc">
          {{listItem.digest | truncate(100)}}
        </p>
        <h5 class="list-item-time">
          <i class="material-icons list-item-icon-size" v-show="listItem.has_attachment">attach_file</i>
          {{listItem.updated_at | fmtDate}} {{listItem.folder_name}}
        </h5>
      </div>
    </div>
    <div id="list-loader">
      <i class="el-icon-loading" v-show="loadMoreFlag"></i>
    </div>
    <div class="list-empty-hint" v-show="listItems.length === 0">
      {{listPanelHint}}
    </div>
  </div>
</template>

<style scoped>
.list-content {
  position: relative; /* needed for perfert-scrollbar */
  height: 100%; /* needed for perfert-scrollbar */
}

.list-content a {
  text-decoration: none;
  outline: none;
  color: #434343;
}

.list-count {
  top: 0;
  position: sticky;
  font-size: 14px;
  padding: 15px 15px;
  border-bottom: 1px solid #ddd;
  background: #F5F5F5;
}

.list-item {
  cursor: pointer;
  padding: 15px 15px;
  border-bottom: 1px solid #ddd;
}

.list-item-unselected:hover {
  background: #F6F7F9;
}

.list-item-selected {
  background: #EAF0FB;
}

.list-item-time,
.list-item-subject {
  margin: 0;
}

.list-item-time {
  color: #999;
  display: flex;
  flex-flow: row;
  align-items: center;
}

.list-item-icon-size {
  font-size: 16px;
}

.list-item-subject {
  min-height: 24px;
  display: flex;
  flex-flow: row;
  align-items: center;
}

.list-item-margin,
.list-item-subject-icon {
  margin-right: 10px;
}

.list-item-subject-title {
  flex: auto;
}
{'fraction_non_alphanumeric': 0.17967409948542024, 'fraction_numerical': 0.02144082332761578, 'mean_word_length': 3.0921052631578947, 'pattern_counts': {'":': 0, '<': 67, '<?xml version=': 0, '>': 69, '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': '3367701', 'n_tokens_mistral': 1776, 'n_tokens_neox': 1693, 'n_words': 310}