feat: add drag-and-drop, toast notifications, connection status, and …

app/components/Toast.vue

@@ -0,0 +1,51 @@
+<template>
+  <transition-group name="toast" tag="div" class="fixed bottom-4 right-4 z-50 flex flex-col gap-2">
+    <div
+      v-for="toast in store.toasts"
+      :key="toast.id"
+      class="flex items-center gap-2 px-4 py-3 rounded-lg shadow-lg min-w-[280px] max-w-sm"
+      :class="{
+        'bg-teal-600 text-white': toast.type === 'success',
+        'bg-red-600 text-white': toast.type === 'error',
+        'bg-gray-700 text-white': toast.type === 'info',
+      }"
+    >
+      <Icon
+        :name="toast.type === 'success'
+          ? 'material-symbols:check-circle'
+          : toast.type === 'error'
+            ? 'material-symbols:error'
+            : 'material-symbols:info'"
+        class="size-5 shrink-0"
+      />
+      <span class="flex-1 text-sm">{{ toast.message }}</span>
+      <button
+        class="shrink-0 opacity-70 hover:opacity-100"
+        @click="dismissToast(toast.id)"
+      >
+        <Icon name="material-symbols:close" class="size-4" />
+      </button>
+    </div>
+  </transition-group>
+</template>
+
+<script setup lang="ts">
+import { store, dismissToast } from "~/services/store";
+</script>
+
+<style scoped>
+.toast-enter-active {
+  transition: all 0.3s ease-out;
+}
+.toast-leave-active {
+  transition: all 0.2s ease-in;
+}
+.toast-enter-from {
+  opacity: 0;
+  transform: translateX(30px);
+}
+.toast-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+</style>

app/components/dialog/Dialog.vue

@@ -5,7 +5,7 @@
       class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
     >
       <div
-        class="bg-white w-full max-w-lg mx-4 rounded shadow-md text-black"
+        class="bg-white dark:bg-gray-800 w-full max-w-lg mx-4 rounded shadow-md text-black dark:text-white"
         role="dialog"
         aria-modal="true"
       >

app/components/dialog/InputDialog.vue

@@ -0,0 +1,74 @@
+<template>
+  <Dialog :visible="visible">
+    <div class="p-6">
+      <h2 class="text-lg font-bold mb-4">{{ title }}</h2>
+      <input
+        ref="inputRef"
+        v-model="inputValue"
+        type="text"
+        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg
+               bg-white dark:bg-gray-700 text-black dark:text-white
+               focus:outline-none focus:ring-2 focus:ring-teal-500"
+        :placeholder="placeholder"
+        @keyup.enter="confirm"
+      />
+      <div class="flex justify-end gap-2 mt-4">
+        <button
+          class="px-4 py-2 rounded-lg text-gray-600 dark:text-gray-300
+                 hover:bg-gray-100 dark:hover:bg-gray-700"
+          @click="cancel"
+        >
+          {{ cancelText }}
+        </button>
+        <button
+          class="px-4 py-2 rounded-lg bg-teal-600 text-white hover:bg-teal-500"
+          @click="confirm"
+        >
+          {{ confirmText }}
+        </button>
+      </div>
+    </div>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import Dialog from "~/components/dialog/Dialog.vue";
+
+const props = defineProps<{
+  visible: boolean;
+  title: string;
+  placeholder?: string;
+  defaultValue?: string;
+  confirmText?: string;
+  cancelText?: string;
+}>();
+
+const emit = defineEmits<{
+  confirm: [value: string];
+  cancel: [];
+}>();
+
+const inputValue = ref(props.defaultValue ?? "");
+const inputRef = ref<HTMLInputElement | null>(null);
+
+watch(
+  () => props.visible,
+  (val) => {
+    if (val) {
+      inputValue.value = props.defaultValue ?? "";
+      nextTick(() => {
+        inputRef.value?.focus();
+        inputRef.value?.select();
+      });
+    }
+  },
+);
+
+const confirm = () => {
+  emit("confirm", inputValue.value);
+};
+
+const cancel = () => {
+  emit("cancel");
+};
+</script>

app/components/dialog/SessionDialog.vue

@@ -10,12 +10,12 @@
       </h1>
 
       <div class="flex">
-        <span class="flex-1 font-bold">Total:</span>
+        <span class="flex-1 font-bold">{{ t("index.progress.total") }}:</span>
         <span>{{ totalCurr }} / {{ totalTotal }}</span>
       </div>
       <ProgressBar :progress="store.session.curr / store.session.total" />
 
-      <p class="mt-4 font-bold">Files:</p>
+      <p class="mt-4 font-bold">{{ t("index.progress.files") }}:</p>
     </div>
 
     <div class="pl-4 pt-2 pr-4 max-h-[300px] overflow-y-auto">