added a set of new Vue files and rewrite download and search frontend;

src/components/toggleButton.vue

@@ -0,0 +1,141 @@
+<template>
+  <label :for="name" :class="{ active: isActive }" class="toggle-button">
+    <span class="toggle-label">{{ text }}</span>
+    <input
+      type="checkbox"
+      :disabled="disabled"
+      :id="name"
+      :name="name"
+      :value="value"
+      v-model="inputValue"
+    />
+    <span class="toggle-switch"></span>
+  </label>
+</template>
+
+<script>
+export default {
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    enabledText: {
+      type: String,
+      default: "On",
+    },
+
+    disabledText: {
+      type: String,
+      default: "Off",
+    },
+
+    name: {
+      type: String,
+      default: "check-button",
+    },
+
+    defaultStatus: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      status: this.defaultStatus,
+    };
+  },
+
+  watch: {
+    defaultStatus() {
+      this.status = Boolean(this.defaultStatus);
+    },
+  },
+
+  computed: {
+    isActive() {
+      return this.status;
+    },
+
+    text() {
+      return this.status ? this.disabledText : this.enabledText;
+    },
+    inputValue: {
+      get() {
+        return this.status;
+      },
+
+      set(value) {
+        this.status = value;
+        this.$emit("change", value);
+      },
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+$toggle-height: 25px;
+$toggle-width: 45px;
+$bg-color: #e5e5ee;
+
+.toggle-button,
+.toggle-label {
+  user-select: none;
+  cursor: pointer;
+}
+
+.toggle-button,
+.toggle-label,
+.toggle-switch {
+  vertical-align: middle;
+}
+
+.toggle-button input[type="checkbox"] {
+  opacity: 0;
+  position: absolute;
+  width: 1px;
+  height: 1px;
+}
+
+.toggle-button .toggle-switch {
+  display: inline-block;
+  height: $toggle-height;
+  border-radius: $toggle-height / 3;
+  width: $toggle-width;
+  background: $bg-color;
+  box-shadow: inset 0 0 1px #b1bbc7;
+  position: relative;
+  margin-left: 6px;
+  transition: all 0.25s;
+}
+
+.toggle-button .toggle-switch::after {
+  content: "";
+  position: absolute;
+  display: block;
+  height: $toggle-height;
+  width: $toggle-width / 2;
+  border-radius: 50%;
+  left: 0;
+  transform: translateX(0);
+  transition: all 0.25s cubic-bezier(0.5, -0.6, 0.5, 1.6);
+}
+
+.toggle-button .toggle-switch::after {
+  background: #ffffff;
+  box-shadow: 0 0 1px #666;
+}
+
+.active .toggle-switch {
+  background: #adedcb;
+  box-shadow: inset 0 0 1px #adedcb;
+}
+
+.active .toggle-switch::after {
+  transform: translateX($toggle-width / 2);
+  background: #488c68;
+  box-shadow: 0 0 1px #53b883;
+}
+</style>