группировка по папкам + удоление источников

src/components/Settings_section/DatePicker.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="date-input-container relative flex-grow">
+    <input
+      :value="modelValue"
+      @input="$emit('update:modelValue', $event.target.value)"
+      type="date"
+      :placeholder="placeholder"
+      class="date-input dark:bg-gray-900 border-slate-100 shadow rounded-xl p-3 cursor-pointer w-full appearance-none"
+    />
+    <span class="calendar-icon dark:text-neutral-400 pointer-events-none">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-5 w-5"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+        />
+      </svg>
+    </span>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  modelValue: {
+    type: String,
+    default: "",
+  },
+  placeholder: {
+    type: String,
+    default: "",
+  },
+});
+
+defineEmits(["update:modelValue"]);
+</script>
+
+<style scoped>
+/* Скрываем стандартную иконку календаря */
+.date-input::-webkit-calendar-picker-indicator {
+  opacity: 0;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+
+.calendar-icon {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: #999;
+}
+</style>