wip

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>
 
@@ -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/pages/browser/[...slug].vue

@@ -29,6 +29,7 @@
             <div class="control">
               <button class="button is-danger is-light" @click="toggleFilter" v-tooltip.bottom="'Filter content'">
                 <span class="icon"><i class="fas fa-filter" /></span>
+                <span v-if="!isMobile">Filter</span>
               </button>
             </div>
 
@@ -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">
                 <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>
@@ -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)

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>>({})

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'">
+                @click="() => display_style = display_style === 'list' ? 'grid' : 'list'">
-                <span class="icon"><i class="fa-solid"
+                <span class="icon">
-                    :class="{ 'fa-table': display_style === 'cards', 'fa-table-list': display_style === 'list' }" /></span>
+                  <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[]>([])

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'">
+                @click="() => display_style = display_style === 'list' ? 'grid' : 'list'">
-                <span class="icon"><i class="fa-solid"
+                <span class="icon">
-                    :class="{ 'fa-table': display_style === 'cards', 'fa-table-list': display_style === 'list' }" /></span>
+                  <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>>({})

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'">
+                @click="() => display_style = display_style === 'list' ? 'grid' : 'list'">
-                <span class="icon"><i class="fa-solid"
+                <span class="icon">
-                    :class="{ 'fa-table': display_style === 'cards', 'fa-table-list': display_style === 'list' }" /></span>
+                  <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>({})