From 700847f4adbf82d6e6215672ceb40f555a78d7d5 Mon Sep 17 00:00:00 2001 From: arabcoders Date: Tue, 6 Jan 2026 17:51:55 +0300 Subject: [PATCH] Refactor: more UX consistency changes --- ui/app/components/History.vue | 11 ++++++----- ui/app/pages/conditions.vue | 6 +++--- ui/app/pages/notifications.vue | 16 ++++++++-------- ui/app/utils/index.ts | 17 +++++++++-------- 4 files changed, 26 insertions(+), 24 deletions(-) diff --git a/ui/app/components/History.vue b/ui/app/components/History.vue index 4c3842ab..71a2f8db 100644 --- a/ui/app/components/History.vue +++ b/ui/app/components/History.vue @@ -114,11 +114,12 @@ -
+
{{ formatTime(item.extras.duration) }} - @@ -135,8 +136,8 @@ {{ item.preset }} - +

{{ item.description }}

@@ -276,7 +277,7 @@
-
+
diff --git a/ui/app/pages/conditions.vue b/ui/app/pages/conditions.vue index 744a72a1..0c77a191 100644 --- a/ui/app/pages/conditions.vue +++ b/ui/app/pages/conditions.vue @@ -235,9 +235,9 @@
    -
  • Filtering is based on yt-dlp’s --match-filter logic. Any expression that works with yt-dlp +
  • Filtering is based on yt-dlp’s --match-filter logic. Any expression that works with yt-dlp will also work here, including the same boolean operators. We added extended support for the - OR ( || ) operator, which yt-dlp does not natively support. This allows you to combine + OR ( || ) operator, which yt-dlp does not natively support. This allows you to combine multiple conditions more flexibly.
  • @@ -245,7 +245,7 @@
  • For example, i follow specific channel that sometimes region lock some videos, by using the following - filter i am able to bypass it availability = 'needs_auth' & channel_id = 'channel_id'. + filter i am able to bypass it availability = 'needs_auth' & channel_id = 'channel_id'. and set proxy for that specific video, while leaving the rest of the videos to be downloaded normally.
  • diff --git a/ui/app/pages/notifications.vue b/ui/app/pages/notifications.vue index 5d643d77..92d058dc 100644 --- a/ui/app/pages/notifications.vue +++ b/ui/app/pages/notifications.vue @@ -218,22 +218,22 @@
    • - When you export notification target, We remove Authorization header key by default, + When you export notification target, We remove Authorization header key by default, However this might not be enough to remove credentials from the exported data. it's your responsibility to ensure that the exported data does not contain any sensitive information for sharing.
    • - When you set the request type as Form, the event data will be JSON encoded and sent as - ...&data_key=json_string, only the data field will be JSON encoded. - The other keys id, event and created_at will be sent as they are. + When you set the request type as Form, the event data will be JSON encoded and sent as + ...&data_key=json_string, only the data field will be JSON encoded. + The other keys id, event and created_at will be sent as they are.
      • -
    • We also send two special headers X-Event-ID and X-Event with the request.
      • +
    • We also send two special headers X-Event-ID and X-Event with the request.
    • If you have selected specific presets or events, this will take priority, For example, if you limited the - target to default preset and selected ALL events, only events that reference the - default preset will be sent to that target. Like wise, if you have limited both events and + target to default preset and selected ALL events, only events that reference the + default preset will be sent to that target. Like wise, if you have limited both events and presets, then ONLY events that satisfy both conditions will be sent to that target. Only the - test events can bypass these conditions. + test events can bypass these conditions.
    diff --git a/ui/app/utils/index.ts b/ui/app/utils/index.ts index af83eddb..af7321f0 100644 --- a/ui/app/utils/index.ts +++ b/ui/app/utils/index.ts @@ -792,26 +792,27 @@ const deepIncludes = ( } const getPath = (basePath: string, item: StoreItem): string => { - if (!item.download_dir) { - return '' + if (!item.folder && ((!item.filename && item.download_dir === basePath) || !item.download_dir)) { + return shortPath(basePath) } if (!item?.filename) { - return item.download_dir + return stripPath(eTrim(basePath, '/'), '/' + sTrim(eTrim(item.download_dir || item.folder, '/'), '/')) } - return stripPath(basePath, eTrim(item.download_dir, '/') + '/' + sTrim(item.filename, '/')) + return stripPath(eTrim(basePath, '/'), '/' + eTrim(item.download_dir, '/') + '/' + sTrim(item.filename, '/')) } -const getImage = (basePath: string, item: StoreItem): string => { + +const getImage = (basePath: string, item: StoreItem, fallback: boolean = true): string => { if (item.sidecar?.image && item.sidecar.image.length > 0) { return uri('/api/download/' + encodeURIComponent(stripPath(basePath, item.sidecar.image[0]?.file || ''))) } - if (!item?.extras?.thumbnail) { - return '/images/placeholder.png' + if (item?.extras?.thumbnail) { + return uri('/api/thumbnail?id=' + item._id + '&url=' + encodePath(item.extras.thumbnail)) } - return uri('/api/thumbnail?id=' + item._id + '&url=' + encodePath(item.extras.thumbnail)) + return fallback ? uri('/images/placeholder.png') : '' } export {