diff --git a/ui/app/components/Queue.vue b/ui/app/components/Queue.vue
index 63811d7a..7ab145b4 100644
--- a/ui/app/components/Queue.vue
+++ b/ui/app/components/Queue.vue
@@ -240,7 +240,7 @@
v-rtime="item.datetime" />
+ v-if="item.downloaded_bytes" v-tooltip="`Saving to: ${makePath(item)}`">
{{ formatBytes(item.downloaded_bytes) }}
@@ -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('/'), '/')
+}
diff --git a/ui/app/pages/browser/[...slug].vue b/ui/app/pages/browser/[...slug].vue
index f1e06e18..9e204a6f 100644
--- a/ui/app/pages/browser/[...slug].vue
+++ b/ui/app/pages/browser/[...slug].vue
@@ -29,6 +29,7 @@
@@ -37,12 +38,14 @@
:class="{ 'is-loading': isLoading }" :disabled="!socket.isConnected || isLoading"
v-tooltip.bottom="'Create new directory'" v-if="config.app.browser_control_enabled">
+ New Folder
@@ -201,6 +204,7 @@ const route = useRoute()
const toast = useNotification()
const config = useConfigStore()
const socket = useSocketStore()
+const isMobile = useMediaQuery({ maxWidth: 1024 })
const bg_enable = useStorage('random_bg', true)
const bg_opacity = useStorage('random_bg_opacity', 0.95)
diff --git a/ui/app/pages/conditions.vue b/ui/app/pages/conditions.vue
index 64cf6964..afcbfa82 100644
--- a/ui/app/pages/conditions.vue
+++ b/ui/app/pages/conditions.vue
@@ -13,12 +13,14 @@
@@ -121,6 +123,7 @@ const toast = useNotification()
const config = useConfigStore()
const socket = useSocketStore()
const box = useConfirm()
+const isMobile = useMediaQuery({ maxWidth: 1024 })
const items = ref([])
const item = ref>({})
diff --git a/ui/app/pages/index.vue b/ui/app/pages/index.vue
index 27c065ba..dea27146 100644
--- a/ui/app/pages/index.vue
+++ b/ui/app/pages/index.vue
@@ -46,9 +46,9 @@
@@ -123,8 +123,9 @@ const stateStore = useStateStore()
const socket = useSocketStore()
const bg_enable = useStorage('random_bg', true)
const bg_opacity = useStorage('random_bg_opacity', 0.95)
-const display_style = useStorage('display_style', 'cards')
+const display_style = useStorage('display_style', 'grid')
const show_thumbnail = useStorage('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) => {
if (!item) {
diff --git a/ui/app/pages/notifications.vue b/ui/app/pages/notifications.vue
index a7325da6..bc234741 100644
--- a/ui/app/pages/notifications.vue
+++ b/ui/app/pages/notifications.vue
@@ -14,19 +14,25 @@
@@ -203,6 +209,7 @@ const config = useConfigStore()
const socket = useSocketStore()
const box = useConfirm()
const display_style = useStorage("tasks_display_style", "cards")
+const isMobile = useMediaQuery({ maxWidth: 1024 })
const allowedEvents = ref([])
const notifications = ref([])
diff --git a/ui/app/pages/presets.vue b/ui/app/pages/presets.vue
index a66dec20..28698370 100644
--- a/ui/app/pages/presets.vue
+++ b/ui/app/pages/presets.vue
@@ -14,20 +14,26 @@
@@ -214,6 +220,7 @@ const socket = useSocketStore()
const box = useConfirm()
const display_style = useStorage('preset_display_style', 'cards')
+const isMobile = useMediaQuery({ maxWidth: 1024 })
const presets = ref([])
const preset = ref>({})
diff --git a/ui/app/pages/tasks.vue b/ui/app/pages/tasks.vue
index 4277af39..be648b2f 100644
--- a/ui/app/pages/tasks.vue
+++ b/ui/app/pages/tasks.vue
@@ -20,6 +20,7 @@
@@ -27,14 +28,19 @@
@@ -42,6 +48,7 @@
@@ -382,6 +389,7 @@ const config = useConfigStore()
const socket = useSocketStore()
const { confirmDialog: cDialog } = useDialog()
const display_style = useStorage("tasks_display_style", "cards")
+const isMobile = useMediaQuery({ maxWidth: 1024 })
const tasks = ref>([])
const task = ref({})