Merge pull request #402 from arabcoders/dev

Enhance file browser API

app/library/Archiver.py

@@ -26,6 +26,7 @@ class _Entry:
         self.size: int = -1
         self.mtime: float = -1.0
         self.loaded: bool = False
+        self.last_check: float = 0.0
 
 
 class Archiver(metaclass=ThreadSafe):
@@ -45,7 +46,8 @@ class Archiver(metaclass=ThreadSafe):
         self._cache: dict[str, _Entry] = {}
         self._locks: dict[str, threading.RLock] = {}
         self._global_lock = threading.RLock()
-        self._stats_check: bool = False
+        self._stats_check: bool = True
+        self._stats_ttl: float = 0.2
         self._initialized = True
 
     @classmethod
@@ -130,7 +132,13 @@ class Archiver(metaclass=ThreadSafe):
             if not self._stats_check:
                 return entry
 
+            if self._stats_ttl > 0:
+                now = time.monotonic()
+                if (now - (entry.last_check or 0.0)) < self._stats_ttl:
+                    return entry
+
             st: os.stat_result | None = self._stat(key)
+            entry.last_check = time.monotonic()
 
             if not st:
                 self._cache[key] = _Entry()
@@ -148,6 +156,7 @@ class Archiver(metaclass=ThreadSafe):
                 entry.size = -1
                 entry.mtime = -1
                 entry.loaded = True
+                entry.last_check = time.monotonic()
                 self._cache[key] = entry
                 return entry
 
@@ -178,6 +187,7 @@ class Archiver(metaclass=ThreadSafe):
                 entry.size = st.st_size
                 entry.mtime = st.st_mtime
             entry.loaded = True
+            entry.last_check = time.monotonic()
             self._cache[key] = entry
             return entry
 
@@ -284,6 +294,7 @@ class Archiver(metaclass=ThreadSafe):
             st: os.stat_result | None = self._stat(key)
             if st:
                 entry.size, entry.mtime = st.st_size, st.st_mtime
+                entry.last_check = time.monotonic()
 
             return True
 
@@ -353,12 +364,12 @@ class Archiver(metaclass=ThreadSafe):
             st: os.stat_result | None = self._stat(key)
             if st:
                 entry.size, entry.mtime = st.st_size, st.st_mtime
+                entry.last_check = time.monotonic()
 
             self._cache[key] = entry
 
             return True
 
-    # Global configuration
     @classmethod
     def set_skip_read_stat_checks(cls, skip: bool = True) -> None:
         """
@@ -375,3 +386,17 @@ class Archiver(metaclass=ThreadSafe):
         inst = cls.get_instance()
         with inst._global_lock:
             inst._stats_check = not skip
+
+    @classmethod
+    def set_read_stat_ttl(cls, seconds: float = 0.0) -> None:
+        """
+        Set a short TTL to throttle os.stat checks on reads.
+
+        Args:
+            seconds (float): Minimum time between successive stat() calls per file
+                when checking for external changes. Use 0 to disable throttling.
+
+        """
+        inst = cls.get_instance()
+        with inst._global_lock:
+            inst._stats_ttl = max(0.0, float(seconds))

app/library/ItemDTO.py

@@ -151,11 +151,7 @@ class Item:
             from .Utils import arg_converter
 
             try:
-                removed_options: list = []
-                arg_converter(args=cli, level=True, removed_options=removed_options)
-                if len(removed_options) > 0:
-                    LOG.warning("Removed the following options '%s' for '%s'.", ", ".join(removed_options), url)
-
+                arg_converter(args=cli, level=True)
                 data["cli"] = cli
             except Exception as e:
                 msg = f"Failed to parse command options for yt-dlp. {e!s}"

app/library/YTDLPOpts.py

@@ -76,18 +76,12 @@ class YTDLPOpts:
         if from_user:
             bad_options: dict[str, str] = {k: v for d in REMOVE_KEYS for k, v in d.items()}
 
-        removed_options: list = []
-
         for key, value in config.items():
             if from_user and key in bad_options:
-                removed_options.append(bad_options[key])
                 continue
 
             self._item_opts[key] = value
 
-        if len(removed_options) > 0:
-            LOG.warning("Removed the following options: '%s'.", ", ".join(removed_options))
-
         return self
 
     def preset(self, name: str) -> "YTDLPOpts":
@@ -175,15 +169,7 @@ class YTDLPOpts:
 
         if len(self._item_cli) > 0:
             try:
-                removed_options: list = []
-                user_cli: dict = arg_converter(
-                    args="\n".join(self._item_cli),
-                    level=True,
-                    removed_options=removed_options,
-                )
-
-                if len(removed_options) > 0:
-                    LOG.warning("Removed the following options: '%s'.", ", ".join(removed_options))
+                user_cli: dict = arg_converter(args="\n".join(self._item_cli), level=True)
             except Exception as e:
                 msg = f"Invalid command options for yt-dlp were given. '{e!s}'."
                 raise ValueError(msg) from e

app/library/ytdlp.py

@@ -1,12 +1,9 @@
-import logging
 from typing import Any
 
 import yt_dlp
 
 import app.postprocessors  # noqa: F401
 
-LOG: logging.Logger = logging.getLogger(__name__)
-
 
 class _ArchiveProxy:
     """
@@ -26,7 +23,6 @@ class _ArchiveProxy:
             from app.library.Archiver import Archiver
 
             status: bool = item in Archiver.get_instance().read(self._file, [item])
-            LOG.debug(f"ArchiveProxy: '{item}' in '{self._file}': {'yes' if status else 'no'}.")
             return status
         except Exception:
             return False
@@ -39,7 +35,6 @@ class _ArchiveProxy:
             from app.library.Archiver import Archiver
 
             status: bool = Archiver.get_instance().add(self._file, [item])
-            LOG.debug(f"ArchiveProxy: Added '{item}' to '{self._file}': {'yes' if status else 'no'}.")
             return status
         except Exception:
             return False

app/routes/api/browser.py

@@ -135,7 +135,24 @@ async def file_browser(request: Request, config: Config, encoder: Encoder) -> Re
     req_path: str = request.match_info.get("path")
     req_path: str = "/" if not req_path else unquote_plus(req_path)
 
-    test: Path = Path(config.download_path).joinpath(req_path)
+    # Normalize requested path to always be inside download root.
+    raw_req: str = (req_path or "").strip()
+    root_dir: Path = Path(config.download_path).resolve()
+    if raw_req in ("", "/"):
+        test: Path = root_dir
+        rel_for_listing = "/"
+    else:
+        # Strip leading slash so joinpath doesn't ignore the base path.
+        test = root_dir.joinpath(raw_req.lstrip("/")).resolve(strict=False)
+        rel_for_listing = raw_req.lstrip("/")
+
+    try:
+        test.relative_to(root_dir)
+    except Exception:
+        return web.json_response(
+            data={"error": f"path '{req_path}' does not exist."}, status=web.HTTPNotFound.status_code
+        )
+
     if not test.exists():
         return web.json_response(
             data={"error": f"path '{req_path}' does not exist."}, status=web.HTTPNotFound.status_code
@@ -149,8 +166,8 @@ async def file_browser(request: Request, config: Config, encoder: Encoder) -> Re
     try:
         return web.json_response(
             data={
-                "path": req_path,
-                "contents": get_files(base_path=Path(config.download_path), dir=req_path),
+                "path": rel_for_listing,
+                "contents": get_files(base_path=root_dir, dir=rel_for_listing),
             },
             status=web.HTTPOk.status_code,
             dumps=encoder.encode,
@@ -160,8 +177,8 @@ async def file_browser(request: Request, config: Config, encoder: Encoder) -> Re
         return web.json_response(data={"error": str(e)}, status=web.HTTPInternalServerError.status_code)
 
 
-@route("POST", "api/file/action/{path:.*}", "browser.actions")
-async def path_action(request: Request, config: Config) -> Response:
+@route("POST", "api/file/actions", "browser.file.actions")
+async def path_actions(request: Request, config: Config) -> Response:
     """
     Browser actions.
 
@@ -184,134 +201,254 @@ async def path_action(request: Request, config: Config) -> Response:
     rootPath: Path = Path(config.download_path)
 
     try:
-        params = await request.json()
-        if not params or not isinstance(params, dict):
-            return web.json_response(data={"error": "Invalid parameters."}, status=web.HTTPBadRequest.status_code)
+        actions = await request.json()
+        if not actions or not isinstance(actions, list):
+            return web.json_response(
+                data={"error": "Invalid parameters expecting list of dicts."}, status=web.HTTPBadRequest.status_code
+            )
     except Exception as e:
         LOG.exception(e)
         return web.json_response(data={"error": "Invalid JSON."}, status=web.HTTPBadRequest.status_code)
 
-    action = params.get("action").lower()
-    if not action:
-        return web.json_response(data={"error": "Action is required."}, status=web.HTTPBadRequest.status_code)
-
-    req_path: str = request.match_info.get("path")
-    req_path: str = "/" if not req_path else unquote_plus(req_path)
-
-    test: Path = Path(config.download_path)
-    if req_path and "/" != req_path:
-        test = test.joinpath(req_path)
-
-    if not test.exists():
-        return web.json_response(
-            data={"error": f"path '{req_path}' does not exist."}, status=web.HTTPNotFound.status_code
-        )
-
-    try:
-        path, status = get_file(download_path=config.download_path, file=str(test.relative_to(config.download_path)))
-        if web.HTTPOk.status_code != status:
+    # validate each action before performing any operations
+    for params in actions:
+        action = params.get("action").lower()
+        if not action or action not in ["rename", "delete", "move", "directory"]:
             return web.json_response(
-                data={"error": f"File {status}: '{test}' does not exist."}, status=web.HTTPNotFound.status_code
-            )
-        if not path.is_relative_to(rootPath):
-            return web.json_response(
-                data={"error": "Cannot perform actions on files outside the download path."},
-                status=web.HTTPBadRequest.status_code,
-            )
-    except Exception as e:
-        LOG.exception(e)
-        return web.json_response(data={"error": str(e)}, status=web.HTTPInternalServerError.status_code)
-
-    if "directory" != action:
-        if path == rootPath:
-            return web.json_response(
-                data={"error": "Cannot perform actions on the root directory."}, status=web.HTTPBadRequest.status_code
-            )
-
-        if not path.is_relative_to(rootPath):
-            return web.json_response(
-                data={"error": "Cannot perform actions on files outside the download path."},
+                data={"error": f"Invalid action '{action}'. Must be one of rename, delete, move, directory."},
                 status=web.HTTPBadRequest.status_code,
             )
 
-    if "rename" == action:
-        new_name = params.get("new_name")
-        if not new_name:
-            return web.json_response(data={"error": "New name is required."}, status=web.HTTPBadRequest.status_code)
-
-        new_path = path.parent.joinpath(new_name)
-        if new_path.exists():
+        if "rename" == action and not params.get("new_name"):
             return web.json_response(
-                data={"error": f"File '{new_name}' already exists."}, status=web.HTTPConflict.status_code
+                data={"error": "New name is required for rename action."}, status=web.HTTPBadRequest.status_code
             )
 
-        try:
-            path.rename(new_path)
-            LOG.info(
-                f"Renamed '{path.relative_to(config.download_path)}' to '{test.relative_to(config.download_path)}'"
+        if "move" == action and not params.get("new_path"):
+            return web.json_response(
+                data={"error": "New path is required for move action."}, status=web.HTTPBadRequest.status_code
             )
-        except OSError as e:
-            LOG.exception(e)
-            return web.json_response(data={"error": str(e)}, status=web.HTTPInternalServerError.status_code)
 
-    if "delete" == action:
+        if "directory" == action and not params.get("new_dir"):
+            return web.json_response(
+                data={"error": "New directory name is required for directory action."},
+                status=web.HTTPBadRequest.status_code,
+            )
+
+    operations_status: list[dict[str, Any]] = []
+
+    def record(
+        op_path: str | Path,
+        *,
+        ok: bool,
+        error: str | None = None,
+        action: str | None = None,
+        extra: dict | None = None,
+    ) -> None:
         try:
-            if not path.exists():
-                return web.json_response(
-                    data={"error": f"Path '{path}' does not exist."}, status=web.HTTPNotFound.status_code
-                )
-
-            if path.is_dir():
-                delete_dir(path)
+            if isinstance(op_path, Path):
+                rel: str = str(op_path.relative_to(rootPath)).strip("/")
             else:
-                path.unlink(missing_ok=True)
+                rel: str = str(op_path).strip("/")
+        except Exception:
+            rel = str(op_path)
+        if not rel or rel == ".":
+            rel = "/"
 
-            LOG.info(f"Deleted '{path.relative_to(config.download_path)}'")
-        except OSError as e:
-            LOG.exception(e)
-            return web.json_response(data={"error": str(e)}, status=web.HTTPInternalServerError.status_code)
+        entry: dict = {"path": rel, "status": ok, "error": error}
 
-    if "move" == action:
-        new_path = params.get("new_path")
-        if not new_path:
-            return web.json_response(data={"error": "New path is required."}, status=web.HTTPBadRequest.status_code)
+        if action:
+            entry["action"] = action
 
-        new_path = Path(config.download_path).joinpath(unquote_plus(new_path))
-        if not new_path.exists() or not new_path.is_dir():
-            return web.json_response(
-                data={"error": f"New path '{new_path}' does not exist or is not a directory."},
-                status=web.HTTPNotFound.status_code,
-            )
+        if extra:
+            norm_extra: dict = {}
+            for k, v in extra.items():
+                if isinstance(v, Path):
+                    try:
+                        norm_extra[k] = str(v.relative_to(rootPath)).strip("/") or "/"
+                    except Exception:
+                        norm_extra[k] = str(v)
+                else:
+                    norm_extra[k] = v
+            entry.update(norm_extra)
+
+        operations_status.append(entry)
+
+    # perform each action
+    for params in actions:
+        req_path: str = params.get("path")
+        if not req_path:
+            record("no_path", ok=False, error="Path is required.", extra={"item": params})
+            continue
+
+        action: str = params.get("action", "").lower()
+        if not action:
+            record(req_path, ok=False, error="Action is required.", extra={"item": params})
+            continue
+
+        req_path: str = "/" if not req_path else unquote_plus(req_path)
+
+        test: Path = Path(config.download_path)
+        if req_path and "/" != req_path:
+            test = test.joinpath(req_path)
+
+        if not test.exists():
+            record(req_path, ok=False, error=f"path '{req_path}' does not exist.", action=action)
+            continue
 
         try:
-            path.rename(new_path.joinpath(path.name))
-        except OSError as e:
+            path, status = get_file(
+                download_path=config.download_path, file=str(test.relative_to(config.download_path))
+            )
+            if web.HTTPOk.status_code != status:
+                record(req_path, ok=False, error="Invalid path.", action=action)
+                continue
+            if not path.is_relative_to(rootPath):
+                record(req_path, ok=False, error="Path outside download root.", action=action)
+                continue
+        except Exception as e:
             LOG.exception(e)
-            return web.json_response(data={"error": str(e)}, status=web.HTTPInternalServerError.status_code)
+            record(req_path, ok=False, error=str(e), action=action, extra={"item": params})
+            continue
 
-    if "directory" == action:
-        new_dir = params.get("new_dir").lstrip("/").strip()
-        if not new_dir:
-            return web.json_response(
-                data={"error": "New directory name is required."}, status=web.HTTPBadRequest.status_code
+        if "directory" != action:
+            if path == rootPath:
+                record(path, ok=False, error="Cannot operate on root directory.", action=action)
+                continue
+
+            if not path.is_relative_to(rootPath):
+                record(path, ok=False, error="Path outside download root.", action=action)
+                continue
+
+        if "directory" == action:
+            new_dir = params.get("new_dir").lstrip("/").strip()
+            if not new_dir:
+                record(path, ok=False, error="New directory name is required.", action=action)
+                continue
+
+            new_path = path.joinpath(*new_dir.split("/"))
+            try:
+                new_path = new_path.resolve(strict=False)
+            except Exception:
+                record(path, ok=False, error="Invalid directory path.", action=action, extra={"new_dir": new_dir})
+                continue
+
+            root_real = Path(config.download_path).resolve()
+            if not new_path.is_relative_to(root_real):
+                record(path, ok=False, error="Destination outside root.", action=action, extra={"new_dir": new_path})
+                continue
+
+            if new_path.exists():
+                dst = new_path.relative_to(config.download_path)
+                record(path, ok=False, error="Directory already exists.", action=action, extra={"new_dir": dst})
+                continue
+
+            try:
+                new_path.mkdir(parents=True, exist_ok=True)
+                record(path, ok=True, action=action, extra={"new_dir": new_path.relative_to(config.download_path)})
+                LOG.info(f"Created directory '{new_path.relative_to(config.download_path)}'")
+            except OSError as e:
+                LOG.exception(e)
+                record(path, ok=False, error=str(e), action=action, extra={"item": params})
+                continue
+
+        if "rename" == action:
+            new_name: str = params.get("new_name")
+            if not new_name:
+                record(path, ok=False, error="New name is required for rename action.", action=action)
+                continue
+
+            new_path: Path = path.parent.joinpath(new_name)
+            if new_path.exists():
+                record(
+                    new_path, ok=False, error="Destination already exists.", action=action, extra={"new_path": new_path}
+                )
+                continue
+
+            try:
+                renamed = path.rename(new_path)
+                LOG.info(
+                    f"Renamed '{path.relative_to(config.download_path)}' to '{renamed.relative_to(config.download_path)}'"
+                )
+            except OSError as e:
+                LOG.exception(e)
+                record(path, ok=False, error=str(e), action=action, extra={"item": params})
+                continue
+            else:
+                record(path, ok=True, action=action, extra={"new_path": renamed})
+
+        if "delete" == action:
+            try:
+                if not path.exists():
+                    record(path, ok=False, error="Path does not exist.", action=action)
+                    continue
+
+                if path.is_dir():
+                    delete_dir(path)
+                else:
+                    path.unlink(missing_ok=True)
+
+                LOG.info(f"Deleted '{path.relative_to(config.download_path)}'")
+            except OSError as e:
+                LOG.exception(e)
+                record(path, ok=False, error=str(e), action=action, extra={"item": params})
+                continue
+            else:
+                record(path, ok=True, action=action, extra={"deleted": True})
+
+        if "move" == action:
+            new_path = params.get("new_path")
+            if not new_path:
+                record(path, ok=False, error="New path is required for move.", action=action, extra={"item": params})
+                continue
+
+            raw_new: str = unquote_plus(str(new_path)).strip()
+            target_dir = (
+                Path(config.download_path)
+                if not raw_new or raw_new in ("/", ".")
+                else Path(config.download_path).joinpath(raw_new.lstrip("/"))
             )
 
-        new_path = path.joinpath(*new_dir.split("/"))
-        if new_path.exists():
-            return web.json_response(
-                data={"error": f"Directory '{new_dir}' already exists."}, status=web.HTTPConflict.status_code
-            )
+            try:
+                target_dir = target_dir.resolve()
+            except Exception:
+                record(
+                    path, ok=False, error="Destination path is invalid.", action=action, extra={"new_path": target_dir}
+                )
+                continue
 
-        try:
-            new_path.mkdir(parents=True, exist_ok=True)
-            LOG.info(f"Created directory '{new_path.relative_to(config.download_path)}'")
-        except OSError as e:
-            LOG.exception(e)
-            return web.json_response(
-                data={"error": str(e), "path": str(test)}, status=web.HTTPInternalServerError.status_code
-            )
+            root_real = Path(config.download_path).resolve()
+            if not target_dir.exists() or not target_dir.is_dir():
+                record(
+                    path, ok=False, error="Destination path is invalid.", action=action, extra={"new_path": target_dir}
+                )
+                continue
 
-    return web.Response(status=web.HTTPOk.status_code)
+            if not target_dir.is_relative_to(root_real):
+                record(
+                    path,
+                    ok=False,
+                    error="Destination outside download root.",
+                    action=action,
+                    extra={"new_path": target_dir},
+                )
+                continue
+
+            if path.parent == target_dir:
+                record(path, ok=False, error="Source and destination are the same.", action=action)
+                continue
+
+            try:
+                dest = target_dir.joinpath(path.name)
+                path.rename(dest)
+            except OSError as e:
+                LOG.exception(e)
+                record(path, ok=False, error=str(e), action=action, extra={"item": params})
+                continue
+            else:
+                record(path, ok=True, action=action, extra={"new_path": dest})
+
+    return web.json_response(data=operations_status, status=web.HTTPOk.status_code)
 
 
 @route("POST", "api/file/download", "browser.download.prepare")

ui/app/components/ConditionForm.vue

@@ -343,7 +343,7 @@ const importItem = async (): Promise<void> => {
       return
     }
 
-    if ((form.filter || form.cli) && !box.confirm('Overwrite the current form fields?', true)) {
+    if ((form.filter || form.cli) && !(await box.confirm('Overwrite the current form fields?', true))) {
       return
     }
 

ui/app/components/Dialog.vue

@@ -56,6 +56,8 @@
                 </span>
               </p>
             </div>
+            <div v-else-if="'confirm' === state.current?.type && (state.current?.opts as ConfirmOptions)?.rawHTML"
+              class="content" v-html="(state.current?.opts as ConfirmOptions)?.rawHTML" />
           </section>
 
           <footer class="modal-card-foot p-4 is-justify-content-flex-end">
@@ -71,7 +73,8 @@
             <template v-else-if="state.current?.type === 'confirm' || state.current?.type === 'prompt'">
               <div class="field is-grouped">
                 <div class="control">
-                  <button class="button is-primary" @click="onEnter">
+                  <button class="button" @click="onEnter" :class="state.current?.opts.confirmColor ?? 'is-primary'"
+                    :disabled="localInput === (state.current?.opts as PromptOptions)?.initial">
                     <span class="icon-text">
                       <span class="icon"><i class="fas fa-check" /></span>
                       <span>{{ (state.current?.opts as any)?.confirmText ?? 'OK' }}</span>
@@ -97,7 +100,7 @@
 
 <script setup lang="ts">
 import { ref, watch, nextTick, computed } from 'vue'
-import { useDialog } from '~/composables/useDialog'
+import { useDialog, type ConfirmOptions, type PromptOptions } from '~/composables/useDialog'
 
 const { state, confirm, cancel } = useDialog()
 

ui/app/components/GetInfo.vue

@@ -2,7 +2,6 @@
 code {
   color: var(--bulma-code) !important
 }
-
 </style>
 
 <template>

ui/app/components/History.vue

@@ -588,7 +588,7 @@ const hasDownloaded = computed(() => {
   return false
 })
 
-const deleteSelectedItems = () => {
+const deleteSelectedItems = async () => {
   if (selectedElms.value.length < 1) {
     toast.error('No items selected.')
     return
@@ -597,7 +597,7 @@ const deleteSelectedItems = () => {
   if (true === config.app.remove_files) {
     msg += ' This will remove any associated files if they exists.'
   }
-  if (false === box.confirm(msg, config.app.remove_files)) {
+  if (false === (await box.confirm(msg, config.app.remove_files))) {
     return
   }
   for (const key in selectedElms.value) {
@@ -614,9 +614,9 @@ const deleteSelectedItems = () => {
   selectedElms.value = []
 }
 
-const clearCompleted = () => {
+const clearCompleted = async () => {
   let msg = 'Clear all completed downloads?'
-  if (false === box.confirm(msg)) {
+  if (false === (await box.confirm(msg))) {
     return
   }
   for (const key in stateStore.history) {
@@ -626,8 +626,8 @@ const clearCompleted = () => {
   }
 }
 
-const clearIncomplete = () => {
-  if (false === box.confirm('Clear all in-complete downloads?')) {
+const clearIncomplete = async () => {
+  if (false === (await box.confirm('Clear all in-complete downloads?'))) {
     return
   }
   for (const key in stateStore.history) {
@@ -706,8 +706,8 @@ const setStatus = (item: StoreItem) => {
   return item.status
 }
 
-const retryIncomplete = () => {
-  if (false === box.confirm('Retry all incomplete downloads?')) {
+const retryIncomplete = async () => {
+  if (false === (await box.confirm('Retry all incomplete downloads?'))) {
     return false
   }
   for (const key in stateStore.history) {
@@ -746,12 +746,12 @@ const archiveItem = async (item: StoreItem, opts = {}) => {
   socket.emit('item_delete', { id: item._id, remove_file: false })
 }
 
-const removeItem = (item: StoreItem) => {
+const removeItem = async (item: StoreItem) => {
   let msg = `${config.app.remove_files ? 'Remove' : 'Clear'} '${item.title || item.id || item.url || '??'}'?`
   if (item.status === 'finished' && config.app.remove_files) {
     msg += ' This will remove any associated files if they exists.'
   }
-  if (false === box.confirm(msg, Boolean(item.filename && config.app.remove_files))) {
+  if (false === (await box.confirm(msg, Boolean(item.filename && config.app.remove_files)))) {
     return false
   }
   socket.emit('item_delete', {

ui/app/components/NotificationForm.vue

@@ -373,7 +373,7 @@ const importItem = async () => {
     }
 
     if (form.name || form.request?.url) {
-      if (false === box.confirm('Overwrite the current form fields?', true)) {
+      if (false === (await box.confirm('Overwrite the current form fields?', true))) {
         return
       }
     }

ui/app/components/Queue.vue

@@ -240,7 +240,7 @@
                   v-rtime="item.datetime" />
               </div>
               <div class="column is-half-mobile has-text-centered is-text-overflow is-unselectable"
-                v-if="item.downloaded_bytes">
+                v-if="item.downloaded_bytes" v-tooltip="`Saving to: ${makePath(item)}`">
                 {{ formatBytes(item.downloaded_bytes) }}
               </div>
 
@@ -507,16 +507,16 @@ const updateProgress = (item: StoreItem): string => {
   return string
 }
 
-const confirmCancel = (item: StoreItem) => {
-  if (true !== box.confirm(`Cancel '${item.title}'?`)) {
+const confirmCancel = async (item: StoreItem) => {
+  if (true !== (await box.confirm(`Cancel '${item.title}'?`))) {
     return false
   }
   cancelItems(item._id)
   return true
 }
 
-const cancelSelected = () => {
-  if (true !== box.confirm(`Cancel '${selectedElms.value.length}' selected items?`)) {
+const cancelSelected = async () => {
+  if (true !== (await box.confirm(`Cancel '${selectedElms.value.length}' selected items?`))) {
     return false
   }
   cancelItems(selectedElms.value)
@@ -543,7 +543,7 @@ const cancelItems = (item: string | string[]) => {
 const startItem = (item: StoreItem) => socket.emit('item_start', item._id)
 const pauseItem = (item: StoreItem) => socket.emit('item_pause', item._id)
 
-const startItems = () => {
+const startItems = async () => {
   if (1 > selectedElms.value.length) {
     return
   }
@@ -559,13 +559,13 @@ const startItems = () => {
     toast.error('No eligible items to start.')
     return
   }
-  if (true !== box.confirm(`Start '${filtered.length}' selected items?`)) {
+  if (true !== (await box.confirm(`Start '${filtered.length}' selected items?`))) {
     return false
   }
   filtered.forEach(id => socket.emit('item_start', id))
 }
 
-const pauseSelected = () => {
+const pauseSelected = async () => {
   if (1 > selectedElms.value.length) {
     return
   }
@@ -581,7 +581,7 @@ const pauseSelected = () => {
     toast.error('No eligible items to pause.')
     return
   }
-  if (true !== box.confirm(`Pause '${filtered.length}' selected items?`)) {
+  if (true !== (await box.confirm(`Pause '${filtered.length}' selected items?`))) {
     return false
   }
   filtered.forEach(id => socket.emit('item_pause', id))
@@ -598,4 +598,15 @@ watch(embed_url, v => {
   }
   document.querySelector('body')?.setAttribute('style', `opacity: ${v ? 1 : bg_opacity.value}`)
 })
+
+const makePath = (item: StoreItem) => {
+  const parts = [
+    eTrim(item.download_dir, '/').replace(config.app.download_path, ''),
+  ]
+  if (item?.filename) {
+    parts.push(eTrim(item.filename, '/'))
+  }
+
+  return '/' + sTrim(parts.filter(p => !!p).map(p => p.replace(/\\/g, '/').replace(/\/+/g, '/')).join('/'), '/')
+}
 </script>

ui/app/components/TaskForm.vue

@@ -409,7 +409,7 @@ const importItem = async (): Promise<void> => {
     }
 
     if (form.url || form.timer) {
-      if (false === box.confirm('Overwrite the current form fields?', true)) {
+      if (false === (await box.confirm('Overwrite the current form fields?', true))) {
         return
       }
     }

ui/app/composables/useConfirm.ts

@@ -1,21 +1,48 @@
 import { useStorage } from '@vueuse/core'
+import { useDialog } from './useDialog'
+
+const dialog = useDialog()
 
 const reduceConfirm = useStorage<boolean>('reduce_confirm', false)
 
-function confirm(msg: string, force: boolean = false): boolean {
+const confirm = async (msg: string, force: boolean = false) => {
   if (false === force && true === reduceConfirm.value) {
     return true
   }
 
-  return window.confirm(msg)
+  const { status } = await dialog.confirmDialog({
+    title: 'Please Confirm',
+    message: msg,
+    cancelText: 'Cancel',
+    confirmText: 'OK',
+  })
+
+  return status
 }
 
-function alert(msg: string): boolean {
-  return window.confirm(msg)
+const alert = async (msg: string) => {
+  const { status } = await dialog.alertDialog({
+    title: 'Alert',
+    message: msg,
+    confirmText: 'OK',
+  })
+  return status
 }
 
-function prompt(msg: string, defaultValue: string = ''): string | null {
-  return window.prompt(msg, defaultValue)
+const prompt = async (msg: string, defaultValue: string = '') => {
+  const { status, value } = await dialog.promptDialog({
+    title: 'Input Required',
+    message: msg,
+    initial: defaultValue,
+    cancelText: 'Cancel',
+    confirmText: 'OK',
+  })
+
+  if (status) {
+    return value
+  }
+
+  return null
 }
 
 export default function useConfirm() {

ui/app/composables/useDialog.ts

@@ -1,127 +1,135 @@
-import {reactive, readonly} from 'vue'
+import { reactive, readonly } from 'vue'
 
 export type DialogResult<T = string | null> = { status: boolean; value: T }
 
 type BaseOptions = {
-    /**
-     * Title of the dialog
-     */
-    title?: string
-    /**
-     * Message to display in the dialog
-     */
-    message?: string
-    /**
-     * Text for the confirm button
-     */
-    confirmText?: string
+  /**
+   * Title of the dialog
+   */
+  title?: string
+  /**
+   * Message to display in the dialog
+   */
+  message?: string
+  /**
+   * Text for the confirm button
+   */
+  confirmText?: string
+  /**
+   * Color class for the confirm button (e.g., 'is-primary', 'is-danger')
+   */
+  confirmColor?: string
 }
 
 export type PromptOptions = BaseOptions & {
-    /**
-     * Text for the input field
-     */
-    initial?: string
-    /**
-     * Placeholder text for the input field
-     */
-    placeholder?: string
-    /**
-     * Text for the cancel button
-     */
-    cancelText?: string
-    /**
-     * Function to validate the input value
-     * @returns true if valid, or an error message string if invalid
-     */
-    validate?: (v: string) => true | string
+  /**
+   * Text for the input field
+   */
+  initial?: string
+  /**
+   * Placeholder text for the input field
+   */
+  placeholder?: string
+  /**
+   * Text for the cancel button
+   */
+  cancelText?: string
+  /**
+   * Function to validate the input value
+   * @returns true if valid, or an error message string if invalid
+   */
+  validate?: (v: string) => true | string
 }
 
 export type ConfirmOptions = BaseOptions & {
-    /**
-     * Text for the confirm button
-     */
-    cancelText?: string
+  /**
+   * Text for the confirm button
+   */
+  cancelText?: string
+  /**
+   * Raw HTML content to include in the dialog message.
+   */
+  rawHTML?: string
 }
 
 export type AlertOptions = BaseOptions & {}
 
 type QueueItem = {
-    type: 'prompt' | 'confirm' | 'alert'
-    opts: PromptOptions | ConfirmOptions | AlertOptions
-    resolve: (r: DialogResult<any>) => void
+  type: 'prompt' | 'confirm' | 'alert'
+  opts: PromptOptions | ConfirmOptions | AlertOptions
+  resolve: (r: DialogResult<any>) => void
 }
 
 type DialogState = {
-    current: QueueItem | null
-    queue: QueueItem[]
-    errorMsg: string | null
-    input: string
+  current: QueueItem | null
+  queue: QueueItem[]
+  errorMsg: string | null
+  input: string
 }
 
 export const useDialog = () => {
-    const raw = useState<DialogState>('dialog:state', () => reactive({
-        current: null,
-        queue: [],
-        errorMsg: null,
-        input: '',
-    } as DialogState))
+  const raw = useState<DialogState>('dialog:state', () => reactive({
+    current: null,
+    queue: [],
+    errorMsg: null,
+    input: '',
+  } as DialogState))
 
-    const state = raw.value
+  const state = raw.value
 
-    const _dequeue = () => {
-        if (!state.current && state.queue.length) {
-            state.current = state.queue.shift()!
-            state.errorMsg = null
-            state.input = state.current.type === 'prompt' ? (state.current.opts as PromptOptions).initial ?? '' : ''
-        }
+  const _dequeue = () => {
+    if (!state.current && state.queue.length) {
+      state.current = state.queue.shift()!
+      state.errorMsg = null
+      state.input = state.current.type === 'prompt' ? (state.current.opts as PromptOptions).initial ?? '' : ''
     }
+  }
 
-    const promptDialog = (opts: PromptOptions) => new Promise<DialogResult<string>>((resolve) => {
-        state.queue.push({type: 'prompt', opts, resolve})
-        _dequeue()
-    })
+  const promptDialog = (opts: PromptOptions) => new Promise<DialogResult<string>>((resolve) => {
+    state.queue.push({ type: 'prompt', opts, resolve })
+    _dequeue()
+  })
 
-    const confirmDialog = (opts: ConfirmOptions) => new Promise<DialogResult<null>>((resolve) => {
-        state.queue.push({type: 'confirm', opts, resolve})
-        _dequeue()
-    })
+  const confirmDialog = (opts: ConfirmOptions) => new Promise<DialogResult<null>>((resolve) => {
+    state.queue.push({ type: 'confirm', opts, resolve })
+    _dequeue()
+  })
 
-    const alertDialog = (opts: AlertOptions) => new Promise<DialogResult<null>>((resolve) => {
-        state.queue.push({type: 'alert', opts, resolve})
-        _dequeue()
-    })
+  const alertDialog = (opts: AlertOptions) => new Promise<DialogResult<null>>((resolve) => {
+    state.queue.push({ type: 'alert', opts, resolve })
+    _dequeue()
+  })
 
-    const confirm = (value?: string) => {
-        if (!state.current) return
-        if (state.current.type === 'prompt') {
-            const val = value ?? state.input
-            const v = (state.current.opts as PromptOptions).validate?.(val)
-            if (v && v !== true) {
-                state.errorMsg = v
-                return
-            }
-            state.current.resolve({status: true, value: val})
-        } else {
-            state.current.resolve({status: true, value: null})
-        }
-        state.current = null
-        _dequeue()
+  const confirm = (value?: string) => {
+    if (!state.current) return
+    if (state.current.type === 'prompt') {
+      const val = value ?? state.input
+      const v = (state.current.opts as PromptOptions).validate?.(val)
+      if (v && v !== true) {
+        state.errorMsg = v
+        return
+      }
+      state.current.resolve({ status: true, value: val })
+    } else {
+      state.current.resolve({ status: true, value: null })
     }
+    state.current = null
+    _dequeue()
+  }
 
-    const cancel = () => {
-        if (!state.current) return
-        state.current.resolve({status: false, value: null})
-        state.current = null
-        _dequeue()
-    }
+  const cancel = () => {
+    if (!state.current) return
+    state.current.resolve({ status: false, value: null })
+    state.current = null
+    _dequeue()
+  }
 
-    return {
-        promptDialog,
-        confirmDialog,
-        alertDialog,
-        confirm,
-        cancel,
-        state: readonly(state) as Readonly<DialogState>,
-    }
+  return {
+    promptDialog,
+    confirmDialog,
+    alertDialog,
+    confirm,
+    cancel,
+    state: readonly(state) as Readonly<DialogState>,
+  }
 }

ui/app/pages/browser/[...slug].vue

@@ -27,22 +27,24 @@
             </div>
 
             <div class="control">
-              <button class="button is-danger is-light" @click="toggleFilter" v-tooltip.bottom="'Filter content'">
+              <button class="button is-danger is-light" @click="toggleFilter">
                 <span class="icon"><i class="fas fa-filter" /></span>
+                <span v-if="!isMobile">Filter</span>
               </button>
             </div>
 
             <p class="control">
               <button class="button is-info is-light" @click="createDirectory(path)"
-                :class="{ 'is-loading': isLoading }" :disabled="!socket.isConnected || isLoading"
-                v-tooltip.bottom="'Create new directory'" v-if="config.app.browser_control_enabled">
+                v-if="config.app.browser_control_enabled">
                 <span class="icon"><i class="fas fa-folder-plus" /></span>
+                <span v-if="!isMobile">New Folder</span>
               </button>
             </p>
             <p class="control">
               <button class="button is-info" @click="reloadContent(path, true)" :class="{ 'is-loading': isLoading }"
                 :disabled="!socket.isConnected || isLoading">
                 <span class="icon"><i class="fas fa-refresh" /></span>
+                <span v-if="!isMobile">Reload</span>
               </button>
             </p>
           </div>
@@ -53,6 +55,27 @@
       </div>
     </div>
 
+    <div class="columns is-multiline" v-if="config.app.browser_control_enabled">
+      <div class="column is-half-mobile">
+        <button type="button" class="button is-fullwidth is-danger" @click="deleteSelected"
+          :disabled="selectedElms.length < 1 || isLoading || items.length < 1">
+          <span class="icon-text is-block">
+            <span class="icon"><i class="fa-solid fa-trash-can" /></span>
+            <span>Delete {{ selectedElms.length > 0 ? selectedElms.length : '' }} items</span>
+          </span>
+        </button>
+      </div>
+      <div class="column is-half-mobile">
+        <button type="button" class="button is-fullwidth is-link" @click="moveSelected"
+          :disabled="selectedElms.length < 1 || isLoading || items.length < 1">
+          <span class="icon-text is-block">
+            <span class="icon"><i class="fa-solid fa-arrows-alt" /></span>
+            <span>Move {{ selectedElms.length > 0 ? selectedElms.length : '' }} items</span>
+          </span>
+        </button>
+      </div>
+    </div>
+
     <div class="columns is-multiline">
       <div class="column is-12" v-if="items && items.length > 0">
         <div :class="{ 'table-container': table_container }">
@@ -60,6 +83,9 @@
             style="min-width: 1300px; table-layout: fixed;">
             <thead>
               <tr class="has-text-centered is-unselectable">
+                <th width="5%" v-if="config.app.browser_control_enabled">
+                  <input type="checkbox" v-model="masterSelectAll" />
+                </th>
                 <th width="6%" @click="changeSort('type')">
                   #
                   <span class="icon" v-if="'type' === sort_by">
@@ -67,7 +93,7 @@
                       :class="{ 'fa-sort-up': 'desc' === sort_order, 'fa-sort-down': 'asc' === sort_order }" />
                   </span>
                 </th>
-                <th width="70%" @click="changeSort('name')">
+                <th width="65%" @click="changeSort('name')">
                   Name
                   <span class="icon" v-if="'name' === sort_by">
                     <i class="fas"
@@ -97,6 +123,9 @@
             </thead>
             <tbody>
               <tr v-for="item in filteredItems" :key="item.path">
+                <td class="has-text-centered is-vcentered" v-if="config.app.browser_control_enabled">
+                  <input type="checkbox" v-model="selectedElms" :value="item.path" />
+                </td>
                 <td class="has-text-centered is-vcentered user-hint" v-tooltip="item.name">
                   <span class="icon"><i class="fas fa-2x fa-solid" :class="setIcon(item)" /></span>
                 </td>
@@ -178,6 +207,7 @@
         </Message>
       </div>
     </div>
+
     <div class="modal is-active" v-if="model_item">
       <div class="modal-background" @click="closeModel"></div>
       <div class="modal-content is-unbounded-model">
@@ -189,6 +219,9 @@
       </div>
       <button class="modal-close is-large" aria-label="close" @click="closeModel"></button>
     </div>
+    <ConfirmDialog v-if="dialog_confirm.visible" :visible="dialog_confirm.visible" :title="dialog_confirm.title"
+      :message="dialog_confirm.message" :options="dialog_confirm.options" @confirm="dialog_confirm.confirm"
+      :html_message="dialog_confirm.html_message" @cancel="dialog_confirm = reset_dialog()" />
   </div>
 </template>
 
@@ -201,12 +234,17 @@ const route = useRoute()
 const toast = useNotification()
 const config = useConfigStore()
 const socket = useSocketStore()
+const isMobile = useMediaQuery({ maxWidth: 1024 })
+const dialog = useDialog()
 
 const bg_enable = useStorage('random_bg', true)
 const bg_opacity = useStorage('random_bg_opacity', 0.95)
 const sort_by = useStorage('sort_by', 'name')
 const sort_order = useStorage('sort_order', 'asc')
 
+const selectedElms = ref<string[]>([])
+const masterSelectAll = ref(false)
+
 const isLoading = ref<boolean>(false)
 const initialLoad = ref<boolean>(true)
 const items = ref<FileItem[]>([])
@@ -221,12 +259,31 @@ const table_container = ref<boolean>(false)
 const search = ref<string>('')
 const show_filter = ref<boolean>(false)
 
+const reset_dialog = () => ({
+  visible: false,
+  title: 'Confirm Action',
+  confirm: (opts: any) => { },
+  message: '',
+  html_message: '',
+  options: [],
+});
+
+const dialog_confirm = ref(reset_dialog())
+
+watch(masterSelectAll, v => {
+  if (v) {
+    selectedElms.value = filteredItems.value.map(i => i.path)
+  } else {
+    selectedElms.value = []
+  }
+})
+
 watch(() => config.app.basic_mode, async v => {
   if (!config.isLoaded() || !v) {
     return
   }
   await navigateTo('/')
-},{ immediate: true })
+}, { immediate: true })
 
 
 const filteredItems = computed<FileItem[]>(() => {
@@ -360,6 +417,10 @@ const reloadContent = async (dir: string = '/', fromMounted: boolean = false): P
     }
 
     items.value = []
+    search.value = ''
+    selectedElms.value = []
+    show_filter.value = false
+    masterSelectAll.value = false
 
     const data = await response.json() as FileBrowserResponse
 
@@ -497,8 +558,15 @@ const createDirectory = async (dir: string): Promise<void> => {
     return
   }
 
-  const newDir = prompt('Enter new directory name:', '')
-  if (!newDir) {
+  const { status, value: newDir } = await dialog.promptDialog({
+    title: 'Create New Directory',
+    message: `Enter name for new directory in '${dir || '/'}':`,
+    initial: '',
+    confirmText: 'Create',
+    cancelText: 'Cancel',
+  })
+
+  if (true !== status || !newDir) {
     return
   }
 
@@ -507,7 +575,7 @@ const createDirectory = async (dir: string): Promise<void> => {
     return
   }
 
-  await actionRequest({ path: dir } as FileItem, 'directory', { new_dir: new_dir }, (item, action, data) => {
+  await actionRequest({ path: dir || '/' } as FileItem, 'directory', { new_dir: new_dir }, (item, action, data) => {
     reloadContent(path.value, true)
     toast.success(`Successfully created '${new_dir}'.`)
   })
@@ -519,8 +587,14 @@ const handleAction = async (action: string, item: FileItem): Promise<void> => {
   }
 
   if ('rename' === action) {
-    const newName = prompt('Enter new name for the item:', item.name)
-    if (!newName) {
+    const { status, value: newName } = await dialog.promptDialog({
+      title: 'Rename Item',
+      message: `Enter new name for '${item.name}':`,
+      initial: item.name,
+      confirmText: 'Rename',
+      cancelText: 'Cancel',
+    })
+    if (true !== status) {
       return
     }
 
@@ -529,7 +603,7 @@ const handleAction = async (action: string, item: FileItem): Promise<void> => {
       return
     }
 
-    await actionRequest(item, 'rename', { new_name: new_name }, (item, action, data) => {
+    await actionRequest(item, 'rename', { new_name: new_name }, (item, _, data) => {
       item.name = data.new_name
       item.path = item.path.replace(/[^/]+$/, data.new_name)
       toast.success(`Renamed '${item.name}'.`)
@@ -539,7 +613,15 @@ const handleAction = async (action: string, item: FileItem): Promise<void> => {
 
   if ('delete' === action) {
     const msg = item.is_dir ? `Delete '${item.name}' and all its contents?` : `Delete file '${item.name}'?`
-    if (false === confirm(msg)) {
+    const { status } = await dialog.confirmDialog({
+      title: 'Delete Confirmation',
+      message: msg,
+      confirmText: 'Delete',
+      cancelText: 'Cancel',
+      confirmColor: 'is-danger',
+    })
+
+    if (true !== status) {
       return
     }
 
@@ -552,12 +634,19 @@ const handleAction = async (action: string, item: FileItem): Promise<void> => {
   }
 
   if ('move' === action) {
-    const newPath = prompt('Enter new path:', item.path.replace(/[^/]+$/, ''))
-    if (!newPath) {
+    const { status, value: newPath } = await dialog.promptDialog({
+      title: 'Move Item',
+      message: `Enter new path for '${item.name}':`,
+      initial: item.path.replace(/[^/]+$/, '') || '/',
+      confirmText: 'Move',
+      cancelText: 'Cancel',
+    })
+
+    if (true !== status) {
       return
     }
 
-    let new_path = sTrim(newPath, '/')
+    let new_path = sTrim(newPath, '/') || '/'
     if (!new_path || new_path === item.path) {
       return
     }
@@ -586,13 +675,13 @@ const actionRequest = async (
   }
 
   try {
-    const response = await request(`/api/file/action/${encodePath(item.path)}`, {
+    const response = await request(`/api/file/actions`, {
       method: 'POST',
-      body: JSON.stringify({
+      body: JSON.stringify([{
         path: item.path,
         action: action,
         ...data
-      }),
+      }]),
     })
 
     if (!response.ok) {
@@ -601,9 +690,21 @@ const actionRequest = async (
       return
     }
 
-    if (cb && typeof cb === 'function') {
-      cb(item, action, data)
-    }
+    const json = await response.json() as Array<{ path: string, status: boolean, error?: string }>
+    json.forEach(i => {
+      if (i.path !== item.path) {
+        return
+      }
+
+      if (true !== i.status) {
+        toast.error(`Failed to perform action: ${i.error || 'Unknown error'}`)
+        return
+      }
+
+      if (cb && typeof cb === 'function') {
+        cb(item, action, data)
+      }
+    });
 
     return response
   } catch (error: any) {
@@ -611,4 +712,136 @@ const actionRequest = async (
     toast.error(`Failed to perform action: ${error.message}`)
   }
 }
+
+const massAction = async (items: Array<{ path: string, action: string }>, cb: (item: any) => void): Promise<any> => {
+  if (!config.app.browser_control_enabled) {
+    return
+  }
+
+  if (!items || items.length < 1) {
+    return
+  }
+
+  try {
+    const response = await request(`/api/file/actions`, {
+      method: 'POST',
+      body: JSON.stringify(items),
+    })
+
+    if (!response.ok) {
+      const error = await response.json()
+      toast.error(`Failed to perform action: ${error.error || 'Unknown error'}`)
+      return
+    }
+
+    const json = await response.json() as Array<{ path: string, status: boolean, error?: string }>
+    json.forEach(i => {
+      if (true !== i.status) {
+        toast.error(`Failed to perform action on '${i.path}': ${i.error || 'Unknown error'}`)
+        return
+      }
+
+      if (cb && typeof cb === 'function') {
+        cb(i)
+      }
+    });
+
+    return response
+  } catch (error: any) {
+    console.error(error)
+    toast.error(`Failed to perform action: ${error.message}`)
+  }
+}
+
+const deleteSelected = async () => {
+  if (selectedElms.value.length < 1) {
+    toast.error('No items selected.')
+    return
+  }
+
+  const rawHTML = `<ul>` + selectedElms.value.map(p => {
+    const item = items.value.find(i => i.path === p)
+    if (!item) {
+      return ''
+    }
+    const color = 'dir' === item.type ? 'has-text-danger is-bold' : ''
+
+    return `<li><span class="icon"><i class="fa-solid ${setIcon(item)}"></i></span> <span class="${color}">${item.name}</span></li>`
+  }).join('') + `</ul>`
+
+
+  const { status } = await dialog.confirmDialog({
+    title: 'Delete Confirmation',
+    message: `Delete the following items?`,
+    rawHTML: rawHTML,
+    confirmText: 'Delete',
+    cancelText: 'Cancel',
+    confirmColor: 'is-danger',
+  })
+
+  if (true !== status) {
+    selectedElms.value = []
+    return
+  }
+
+  const actions = [] as Array<{ action: string, path: string }>
+  selectedElms.value.forEach(p => {
+    const item = items.value.find(i => i.path === p)
+    if (!item) {
+      return;
+    }
+
+    actions.push({ path: item.path, action: 'delete' })
+  })
+
+  await massAction(actions, i => {
+    const item = items.value.find(it => it.path === i.path)
+    if (!item) {
+      return
+    }
+    items.value = items.value.filter(it => it.path !== i.path)
+    toast.warning(`Deleted '${item.name}'.`)
+  })
+}
+
+const moveSelected = async () => {
+  if (selectedElms.value.length < 1) {
+    toast.error('No items selected.')
+    return
+  }
+
+  const { status, value: newPath } = await dialog.promptDialog({
+    title: 'Move Items',
+    message: `Enter new path for selected items:`,
+    initial: path.value || '/',
+    confirmText: 'Move',
+    confirmColor: 'is-danger',
+    cancelText: 'Cancel',
+  })
+
+  if (true !== status || !newPath || newPath === path.value) {
+    selectedElms.value = []
+    return
+  }
+
+  const actions = [] as Array<{ action: string, path: string, new_path: string }>
+  selectedElms.value.forEach(p => {
+    const item = items.value.find(i => i.path === p)
+    if (!item) {
+      return;
+    }
+
+    actions.push({
+      path: item.path,
+      action: 'move',
+      new_path: sTrim(newPath, '/') || '/',
+    })
+  })
+
+  await massAction(actions, i => {
+    items.value = items.value.filter(it => it.path !== i.path)
+    toast.success(`Moved '${i.path}' to '${sTrim(newPath, '/')}'.`)
+  })
+}
+
 </script>

ui/app/pages/conditions.vue

@@ -13,12 +13,14 @@
             <p class="control">
               <button class="button is-primary" @click="resetForm(false); toggleForm = !toggleForm;">
                 <span class="icon"><i class="fas fa-add" /></span>
+                <span v-if="!isMobile">New Condition</span>
               </button>
             </p>
             <p class="control">
               <button class="button is-info" @click="reloadContent(false)" :class="{ 'is-loading': isLoading }"
                 :disabled="!socket.isConnected || isLoading" v-if="items && items.length > 0">
                 <span class="icon"><i class="fas fa-refresh" /></span>
+                <span v-if="!isMobile">Reload</span>
               </button>
             </p>
           </div>
@@ -121,6 +123,7 @@ const toast = useNotification()
 const config = useConfigStore()
 const socket = useSocketStore()
 const box = useConfirm()
+const isMobile = useMediaQuery({ maxWidth: 1024 })
 
 const items = ref<ConditionItem[]>([])
 const item = ref<Partial<ConditionItem>>({})
@@ -219,7 +222,7 @@ const updateItems = async (newItems: ConditionItem[]): Promise<boolean> => {
 }
 
 const deleteItem = async (cond: ConditionItem): Promise<void> => {
-  if (!box.confirm(`Delete '${cond.name}'?`, true)) {
+  if (true !== (await box.confirm(`Delete '${cond.name}'?`, true))) {
     return
   }
 

ui/app/pages/index.vue

@@ -46,9 +46,9 @@
               <button v-tooltip.bottom="'Change display style'" class="button has-tooltip-bottom"
                 @click="() => changeDisplay()">
                 <span class="icon"><i class="fa-solid"
-                    :class="{ 'fa-table': display_style === 'cards', 'fa-table-list': display_style === 'list' }" /></span>
+                    :class="{ 'fa-table': display_style !== 'list', 'fa-table-list': display_style === 'list' }" /></span>
                 <span v-if="!isMobile">
-                  {{ display_style === 'cards' ? 'Cards' : 'List' }}
+                  {{ display_style === 'list' ? 'List' : 'Grid' }}
                 </span>
               </button>
             </p>
@@ -123,8 +123,9 @@ const stateStore = useStateStore()
 const socket = useSocketStore()
 const bg_enable = useStorage<boolean>('random_bg', true)
 const bg_opacity = useStorage<number>('random_bg_opacity', 0.95)
-const display_style = useStorage<string>('display_style', 'cards')
+const display_style = useStorage<string>('display_style', 'grid')
 const show_thumbnail = useStorage<boolean>('show_thumbnail', true)
+const isMobile = useMediaQuery({ maxWidth: 1024 })
 
 const info_view = ref({
   url: '',
@@ -143,7 +144,6 @@ const dialog_confirm = ref({
   options: [],
 })
 
-const isMobile = useMediaQuery({ maxWidth: 1024 })
 
 watch(toggleFilter, () => {
   if (!toggleFilter.value) {
@@ -217,7 +217,7 @@ watch(() => info_view.value.url, v => {
   document.querySelector('body')?.setAttribute("style", `opacity: ${v ? 1 : bg_opacity.value}`)
 })
 
-const changeDisplay = () => display_style.value = display_style.value === 'cards' ? 'list' : 'cards'
+const changeDisplay = () => display_style.value = display_style.value === 'grid' ? 'list' : 'grid'
 
 const toNewDownload = async (item: item_request | Partial<StoreItem>) => {
   if (!item) {

ui/app/pages/notifications.vue

@@ -14,19 +14,25 @@
               <button class="button is-primary" @click="resetForm(false); toggleForm = true"
                 v-tooltip="'Add new notification target.'">
                 <span class="icon"><i class="fas fa-add"></i></span>
+                <span v-if="!isMobile">New Notification</span>
               </button>
             </p>
             <p class="control" v-if="notifications.length > 0">
               <button class="button is-warning" @click="sendTest" v-tooltip="'Send test notification.'"
                 :class="{ 'is-loading': isLoading }" :disabled="!socket.isConnected || isLoading">
                 <span class="icon"><i class="fas fa-paper-plane"></i></span>
+                <span v-if="!isMobile">Send Test</span>
               </button>
             </p>
             <p class="control" v-if="notifications.length > 0">
               <button v-tooltip.bottom="'Change display style'" class="button has-tooltip-bottom"
-                @click="() => display_style = display_style === 'cards' ? 'list' : 'cards'">
-                <span class="icon"><i class="fa-solid"
-                    :class="{ 'fa-table': display_style === 'cards', 'fa-table-list': display_style === 'list' }" /></span>
+                @click="() => display_style = display_style === 'list' ? 'grid' : 'list'">
+                <span class="icon">
+                  <i class="fa-solid"
+                    :class="{ 'fa-table': display_style !== 'list', 'fa-table-list': display_style === 'list' }" /></span>
+                <span v-if="!isMobile">
+                  {{ display_style === 'list' ? 'List' : 'Grid' }}
+                </span>
               </button>
             </p>
 
@@ -203,6 +209,7 @@ const config = useConfigStore()
 const socket = useSocketStore()
 const box = useConfirm()
 const display_style = useStorage<string>("tasks_display_style", "cards")
+const isMobile = useMediaQuery({ maxWidth: 1024 })
 
 const allowedEvents = ref<string[]>([])
 const notifications = ref<notification[]>([])
@@ -305,7 +312,7 @@ const updateData = async (items: notification[]) => {
 }
 
 const deleteItem = async (item: notification) => {
-  if (true !== box.confirm(`Delete '${item.name}'?`)) {
+  if (true !== (await box.confirm(`Delete '${item.name}'?`))) {
     return
   }
 
@@ -366,7 +373,7 @@ const join_events = (events: string[]) =>
   !events || events.length < 1 ? 'ALL' : events.map(e => ucFirst(e)).join(', ')
 
 const sendTest = async () => {
-  if (true !== box.confirm('Send test notification?')) {
+  if (true !== (await box.confirm('Send test notification?'))) {
     return
   }
 

ui/app/pages/presets.vue

@@ -14,20 +14,26 @@
               <button class="button is-primary" @click="resetForm(false); toggleForm = !toggleForm;"
                 v-tooltip.bottom="'Toggle add form'">
                 <span class="icon"><i class="fas fa-add" /></span>
+                <span v-if="!isMobile">New Preset</span>
               </button>
             </p>
 
             <p class="control">
               <button v-tooltip.bottom="'Change display style'" class="button has-tooltip-bottom"
-                @click="() => display_style = display_style === 'cards' ? 'list' : 'cards'">
-                <span class="icon"><i class="fa-solid"
-                    :class="{ 'fa-table': display_style === 'cards', 'fa-table-list': display_style === 'list' }" /></span>
+                @click="() => display_style = display_style === 'list' ? 'grid' : 'list'">
+                <span class="icon">
+                  <i class="fa-solid"
+                    :class="{ 'fa-table': display_style !== 'list', 'fa-table-list': display_style === 'list' }" /></span>
+                <span v-if="!isMobile">
+                  {{ display_style === 'list' ? 'List' : 'Grid' }}
+                </span>
               </button>
             </p>
             <p class="control">
               <button class="button is-info" @click="reloadContent()" :class="{ 'is-loading': isLoading }"
                 :disabled="!socket.isConnected || isLoading" v-if="presets && presets.length > 0">
                 <span class="icon"><i class="fas fa-refresh" /></span>
+                <span v-if="!isMobile">Reload</span>
               </button>
             </p>
           </div>
@@ -214,6 +220,7 @@ const socket = useSocketStore()
 const box = useConfirm()
 
 const display_style = useStorage<string>('preset_display_style', 'cards')
+const isMobile = useMediaQuery({ maxWidth: 1024 })
 
 const presets = ref<Preset[]>([])
 const preset = ref<Partial<Preset>>({})
@@ -304,7 +311,7 @@ const updatePresets = async (items: Preset[]): Promise<boolean | undefined> => {
 }
 
 const deleteItem = async (item: Preset) => {
-  if (true !== box.confirm(`Delete preset '${item.name}'?`, true)) {
+  if (true !== (await box.confirm(`Delete preset '${item.name}'?`, true))) {
     return
   }
 

ui/app/pages/tasks.vue

@@ -20,6 +20,7 @@
               <button class="button is-danger is-light" v-tooltip.bottom="'Filter'"
                 @click="toggleFilter = !toggleFilter">
                 <span class="icon"><i class="fas fa-filter" /></span>
+                <span v-if="!isMobile">Filter</span>
               </button>
             </p>
 
@@ -27,14 +28,19 @@
               <button class="button is-primary" @click="resetForm(false); toggleForm = !toggleForm"
                 v-tooltip.bottom="'Toggle Add form'">
                 <span class="icon"><i class="fas fa-add" /></span>
+                <span v-if="!isMobile">New Task</span>
               </button>
             </p>
 
             <p class="control">
               <button v-tooltip.bottom="'Change display style'" class="button has-tooltip-bottom"
-                @click="() => display_style = display_style === 'cards' ? 'list' : 'cards'">
-                <span class="icon"><i class="fa-solid"
-                    :class="{ 'fa-table': display_style === 'cards', 'fa-table-list': display_style === 'list' }" /></span>
+                @click="() => display_style = display_style === 'list' ? 'grid' : 'list'">
+                <span class="icon">
+                  <i class="fa-solid"
+                    :class="{ 'fa-table': display_style !== 'list', 'fa-table-list': display_style === 'list' }" /></span>
+                <span v-if="!isMobile">
+                  {{ display_style === 'list' ? 'List' : 'Grid' }}
+                </span>
               </button>
             </p>
 
@@ -42,6 +48,7 @@
               <button class="button is-info" @click="reloadContent()" :class="{ 'is-loading': isLoading }"
                 :disabled="!socket.isConnected || isLoading" v-if="tasks && tasks.length > 0">
                 <span class="icon"><i class="fas fa-refresh" /></span>
+                <span v-if="!isMobile">Reload</span>
               </button>
             </p>
           </div>
@@ -382,6 +389,7 @@ const config = useConfigStore()
 const socket = useSocketStore()
 const { confirmDialog: cDialog } = useDialog()
 const display_style = useStorage<string>("tasks_display_style", "cards")
+const isMobile = useMediaQuery({ maxWidth: 1024 })
 
 const tasks = ref<Array<task_item>>([])
 const task = ref<task_item | Object>({})
@@ -571,7 +579,7 @@ const deleteSelected = async () => {
 }
 
 const deleteItem = async (item: task_item) => {
-  if (true !== box.confirm(`Delete '${item.name}' task?`, true)) {
+  if (true !== (await box.confirm(`Delete '${item.name}' task?`, true))) {
     return
   }
 
@@ -688,7 +696,7 @@ const runSelected = async () => {
 }
 
 const runNow = async (item: task_item, mass: boolean = false) => {
-  if (!mass && true !== box.confirm(`Run '${item.name}' now? it will also run at the scheduled time.`)) {
+  if (!mass && true !== (await box.confirm(`Run '${item.name}' now? it will also run at the scheduled time.`))) {
     return
   }