Joren/qbz
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(views): drag regions on top-bars across remaining views

Browse Source
This commit is contained in:
Afonso Jorge Ramos committed 2026-05-13 20:40:43 +01:00
1 parent 47f3a9f335
commit e54c5de08b
24 files changed
+47 -49
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/lib/components/views/ArtistsByLocationView.svelte
+2 -2
View File
@@ -422,7 +422,7 @@
<div class="scene-view">
{#if !loading}
<!-- Back button (always visible) -->
<div class="top-bar">
<div class="top-bar" data-tauri-drag-region="deep">
<button class="back-btn" onclick={onBack}>
<ArrowLeft size={16} />
<span>{$t('actions.back')}</span>
@@ -431,7 +431,7 @@
<!-- Compact sticky header (appears when hero scrolls out) -->
{#if heroScrolledPast}
<div class="compact-header">
<div class="compact-header" data-tauri-drag-region="deep">
{#if flagUrl}
<img src={flagUrl} alt="" class="compact-flag" />
{/if}
src/lib/components/views/AwardAlbumsView.svelte
+3 -3
View File
@@ -163,8 +163,8 @@
</script>
<div class="award-albums-view">
<div class="top-bar">
<div class="top-bar-left">
<div class="top-bar" data-tauri-drag-region="deep">
<div class="top-bar-left" data-tauri-drag-region="false">
<button class="back-btn" onclick={onBack} title={$t('actions.back')}>
<ChevronLeft size={20} />
</button>
@@ -173,7 +173,7 @@
<h1 class="page-title">{$t('award.section.releases')}</h1>
</div>
</div>
<div class="top-bar-right">
<div class="top-bar-right" data-tauri-drag-region="false">
<div class="search-wrapper">
<Search size={16} />
<input
src/lib/components/views/AwardView.svelte
+2 -2
View File
@@ -227,13 +227,13 @@
const heroImage = $derived(page?.image || page?.magazine?.image || '');
</script>
<div class="award-detail-view">
<div class="award-detail-view" data-tauri-drag-region>
<button class="back-btn" onclick={onBack}>
<ArrowLeft size={16} />
<span>{$t('actions.back')}</span>
</button>
<header class="award-header">
<header class="award-header" data-tauri-drag-region="deep">
<div class="award-image-wrapper">
{#if heroImage && !heroImageFailed}
<img
src/lib/components/views/BlacklistManagerView.svelte
+1 -1
View File
@@ -105,7 +105,7 @@
<ViewTransition duration={200} distance={12} direction="down">
<div class="blacklist-manager">
<div class="top-bar">
<div class="top-bar" data-tauri-drag-region="deep">
<button class="back-btn" onclick={onBack}>
<ArrowLeft size={16} />
<span>{$t('actions.back')}</span>
src/lib/components/views/CollectionsView.svelte
+2 -2
View File
@@ -156,9 +156,9 @@
<span>{$t('actions.back')}</span>
</button>
{/if}
<header class="view-header">
<header class="view-header" data-tauri-drag-region="deep">
<h1>{$t('collections.nav')}</h1>
<div class="header-actions">
<div class="header-actions" data-tauri-drag-region="false">
<button
type="button"
class="primary-cta"
src/lib/components/views/DiscographyBuilderView.svelte
+2 -3
View File
@@ -567,7 +567,7 @@
</script>
<div class="builder-view">
<div class="builder-scroll">
<div class="builder-scroll" data-tauri-drag-region>
{#if onBack}
<button class="back-btn" onclick={() => onBack?.()}>
<ArrowLeft size={16} />
@@ -575,7 +575,7 @@
</button>
{/if}
<header class="builder-header">
<header class="builder-header" data-tauri-drag-region="deep">
{#if artistAvatarUrl}
<img class="avatar" src={artistAvatarUrl} alt="" />
{:else}
@@ -1157,7 +1157,6 @@
color: var(--text-muted);
font-size: 12px;
line-height: 1;
user-select: none;
flex-shrink: 0;
}
src/lib/components/views/DiscoverBrowseView.svelte
+3 -3
View File
@@ -234,14 +234,14 @@
<div class="discover-browse">
<!-- Top bar -->
<div class="top-bar">
<div class="top-bar-left">
<div class="top-bar" data-tauri-drag-region="deep">
<div class="top-bar-left" data-tauri-drag-region="false">
<button class="back-btn" onclick={onBack}>
<ChevronLeft size={20} />
</button>
<h1 class="page-title">{$t(titleKey)}</h1>
</div>
<div class="top-bar-right">
<div class="top-bar-right" data-tauri-drag-region="false">
<div class="search-wrapper">
<Search size={16} />
<input
src/lib/components/views/DiscoverPlaylistsBrowseView.svelte
+3 -3
View File
@@ -163,14 +163,14 @@
<div class="discover-playlists">
<!-- Top bar -->
<div class="top-bar">
<div class="top-bar-left">
<div class="top-bar" data-tauri-drag-region="deep">
<div class="top-bar-left" data-tauri-drag-region="false">
<button class="back-btn" onclick={onBack}>
<ChevronLeft size={20} />
</button>
<h1 class="page-title">{$t('discover.qobuzPlaylists')}</h1>
</div>
<div class="top-bar-right">
<div class="top-bar-right" data-tauri-drag-region="false">
<div class="search-wrapper">
<Search size={16} />
<input
src/lib/components/views/DynamicSuggestView.svelte
+2 -2
View File
@@ -514,7 +514,7 @@
</button>
</div>
<div class="playlist-header">
<div class="playlist-header" data-tauri-drag-region="deep">
<div class="artwork-container">
<div class="artwork artwork-daily"></div>
</div>
@@ -594,7 +594,7 @@
<div class="empty">{$t('qobuzMixes.result.empty')}</div>
{:else if result}
<div class="track-list">
<div class="track-list-header">
<div class="track-list-header" data-tauri-drag-region="deep">
{#if multiSelectMode}
<div class="col-select-all">
<input
src/lib/components/views/FavQView.svelte
+2 -2
View File
@@ -442,7 +442,7 @@
</button>
</div>
<div class="playlist-header">
<div class="playlist-header" data-tauri-drag-region="deep">
<div class="artwork-container">
<div class="artwork artwork-favq"></div>
</div>
@@ -525,7 +525,7 @@
<div class="empty">{$t('qobuzMixes.result.empty')}</div>
{:else if tracks.length > 0}
<div class="track-list">
<div class="track-list-header">
<div class="track-list-header" data-tauri-drag-region="deep">
{#if multiSelectMode}
<div class="col-select-all">
<input
src/lib/components/views/LabelReleasesView.svelte
+2 -2
View File
@@ -345,7 +345,7 @@
<div class="label-view" onscroll={handleScroll}>
<!-- Back button -->
<div class="top-bar">
<div class="top-bar" data-tauri-drag-region="deep">
<button class="back-btn" onclick={onBack}>
<ArrowLeft size={16} />
<span>{$t('actions.back')}</span>
@@ -353,7 +353,7 @@
</div>
<!-- Header -->
<header class="label-header">
<header class="label-header" data-tauri-drag-region="deep">
<div class="label-image-wrapper">
{#if getLabelImage()}
<img src={getLabelImage()} alt={label?.name || labelName} class="label-image" loading="lazy" decoding="async" />
src/lib/components/views/LabelView.svelte
+2 -2
View File
@@ -842,7 +842,7 @@
});
</script>
<div class="label-detail-view" bind:this={labelDetailEl}>
<div class="label-detail-view" bind:this={labelDetailEl} data-tauri-drag-region>
{#if loading}
<div class="loading-state">
<div class="spinner"></div>
@@ -862,7 +862,7 @@
</button>
<!-- Header -->
<header class="label-header section-anchor" bind:this={headerSection}>
<header class="label-header section-anchor" bind:this={headerSection} data-tauri-drag-region="deep">
<div class="label-image-wrapper">
{#if getLabelImage(pageData)}
<img
src/lib/components/views/MixtapeCollectionDetailView.svelte
+1 -1
View File
@@ -1391,7 +1391,7 @@
</div>
{:else}
<!-- Header -->
<header class="detail-header">
<header class="detail-header" data-tauri-drag-region="deep">
{#if onBack}
<button class="back-btn" onclick={() => onBack()}>
<ArrowLeft size={16} />
src/lib/components/views/MixtapesView.svelte
+1 -1
View File
@@ -132,7 +132,7 @@
<span>{$t('actions.back')}</span>
</button>
{/if}
<header class="view-header">
<header class="view-header" data-tauri-drag-region="deep">
<h1>{$t('mixtapes.nav')}</h1>
<button
type="button"
src/lib/components/views/MusicianPageView.svelte
+1 -1
View File
@@ -91,7 +91,7 @@
<div class="musician-page">
<!-- Header -->
<header class="page-header">
<header class="page-header" data-tauri-drag-region="deep">
<button class="back-btn" onclick={onBack} title={ $t('actions.back') }>
<ArrowLeft size={20} />
</button>
src/lib/components/views/OfflineCacheManagerView.svelte
+1 -1
View File
@@ -212,7 +212,7 @@
</script>
<div class="offline-cache-manager">
<header class="ocm-header">
<header class="ocm-header" data-tauri-drag-region="deep">
<button type="button" class="back-btn" onclick={onBack} aria-label={$t('actions.back')}>
<ArrowLeft size={18} />
</button>
src/lib/components/views/PlaylistManagerView.svelte
+2 -2
View File
@@ -890,14 +890,14 @@
<span>{$t('actions.back')}</span>
</button>
<!-- Header -->
<div class="header">
<div class="header" data-tauri-drag-region="deep">
<h1>{$t('playlistManager.heading')}</h1>
</div>
<!-- Breadcrumb Navigation (when inside a folder, only in folder mode and not tree) -->
{#if folderMode && viewMode !== 'tree' && currentFolderId && currentFolder}
{@const breadcrumbFolder = currentFolder}
<div class="breadcrumb">
<div class="breadcrumb" data-tauri-drag-region="deep">
<button class="breadcrumb-item" onclick={navigateToRoot}>
{$t('playlist.allPlaylists')}
</button>
src/lib/components/views/PurchaseAlbumDetailView.svelte
+2 -2
View File
@@ -218,7 +218,7 @@
</script>
<ViewTransition duration={200} distance={12} direction="up">
<div class="purchase-album-detail">
<div class="purchase-album-detail" data-tauri-drag-region>
<!-- Back Navigation -->
<button class="back-btn" onclick={onBack}>
<ArrowLeft size={16} />
@@ -235,7 +235,7 @@
</div>
{:else if album}
<!-- Album Header -->
<div class="album-header">
<div class="album-header" data-tauri-drag-region="deep">
<div class="artwork" class:unavailable={!album.downloadable}>
<img src={getQobuzImage(album.image)} alt={album.title} />
{#if !album.downloadable}
src/lib/components/views/PurchasesView.svelte
+3 -3
View File
@@ -484,7 +484,7 @@
<div class="purchases-view">
<!-- Header -->
<div class="header">
<div class="header" data-tauri-drag-region="deep">
<div class="header-icon">
<ShoppingBag size={32} color="var(--accent-primary)" />
</div>
@@ -503,8 +503,8 @@
{/if}
<!-- Sticky Navigation Bar -->
<div class="purchases-nav">
<div class="nav-left">
<div class="purchases-nav" data-tauri-drag-region="deep">
<div class="nav-left" data-tauri-drag-region="false">
<button
class="nav-link"
class:active={activeTab === 'albums'}
src/lib/components/views/ReleaseWatchView.svelte
+2 -2
View File
@@ -159,7 +159,7 @@
</script>
<div class="release-watch">
<div class="top-bar">
<div class="top-bar" data-tauri-drag-region="deep">
<button class="back-btn" onclick={onBack} title={$t('actions.back')}>
<ChevronLeft size={20} />
</button>
@@ -169,7 +169,7 @@
</div>
</div>
<div class="tabs">
<div class="tabs" data-tauri-drag-region="deep">
{#each tabs as tab}
{@const Icon = tab.icon}
<button
src/lib/components/views/SearchView.svelte
+3 -3
View File
@@ -1136,9 +1136,9 @@
{/if}
<!-- Sticky Header Container -->
<div class="sticky-header" class:scrolled={isScrolled}>
<div class="sticky-header" class:scrolled={isScrolled} data-tauri-drag-region="deep">
{#if !searchInTitlebar}
<div class="search-input-container" class:compact={isScrolled}>
<div class="search-input-container" class:compact={isScrolled} data-tauri-drag-region="false">
<Search size={isScrolled ? 18 : 20} class="search-icon" />
<input
type="text"
@@ -1157,7 +1157,7 @@
{/if}
<!-- Tabs and Filters Row -->
<div class="tabs-row">
<div class="tabs-row" data-tauri-drag-region="false">
<div class="tabs">
<button
class="tab"
src/lib/components/views/SettingsView.svelte
+1 -2
View File
@@ -4181,7 +4181,7 @@
{/if}
<!-- Header -->
<div class="header">
<div class="header" data-tauri-drag-region="deep">
{#if onBack}
<button class="back-btn" onclick={onBack}>
<ArrowLeft size={16} />
@@ -7157,7 +7157,6 @@ flatpak override --user --filesystem=/home/USUARIO/Música com.blitzfc.qbz</pre>
color: var(--text-secondary);
font-size: 13px;
list-style: none;
user-select: none;
}
.discord-rpc-override > summary::-webkit-details-marker {
src/lib/components/views/TopQView.svelte
+2 -2
View File
@@ -570,7 +570,7 @@
</button>
</div>
<div class="playlist-header">
<div class="playlist-header" data-tauri-drag-region="deep">
<div class="artwork-container">
<div class="artwork artwork-topq"></div>
</div>
@@ -653,7 +653,7 @@
<div class="empty">{$t('qobuzMixes.result.empty')}</div>
{:else if result}
<div class="track-list">
<div class="track-list-header">
<div class="track-list-header" data-tauri-drag-region="deep">
{#if multiSelectMode}
<div class="col-select-all">
<input
src/lib/components/views/WeeklySuggestView.svelte
+2 -2
View File
@@ -512,7 +512,7 @@
</button>
</div>
<div class="playlist-header">
<div class="playlist-header" data-tauri-drag-region="deep">
<div class="artwork-container">
<div class="artwork artwork-weekly"></div>
</div>
@@ -589,7 +589,7 @@
<div class="empty">{$t('qobuzMixes.result.empty')}</div>
{:else if result}
<div class="track-list">
<div class="track-list-header">
<div class="track-list-header" data-tauri-drag-region="deep">
{#if multiSelectMode}
<div class="col-select-all">
<input