[READ-ONLY] Mirror of https://github.com/probablykasper/ferrum. Music library app for Mac, Linux and Windows
ferrum.kasper.space
electron
linux
macos
music
music-library
music-player
napi
windows
Add header
+30
-33
+30
-6
src/App.svelte
+30
-6
src/App.svelte
···
9
9
import PlaylistInfoModal from './components/PlaylistInfo.svelte'
10
10
import { queueVisible } from './lib/queue'
11
11
import { ipcListen, ipcRenderer } from '@/lib/window'
12
-
import { importTracks, type PlaylistInfo, methods, page } from './lib/data'
12
+
import { importTracks, type PlaylistInfo, methods, page, isMac } from './lib/data'
13
13
import { playPause } from './lib/player'
14
14
import DragGhost from './components/DragGhost.svelte'
15
15
import ItunesImport from './components/ItunesImport.svelte'
···
185
185
>
186
186
<div class="meat">
187
187
<Sidebar />
188
-
{#if $page.viewAs === 0}
189
-
<TrackList {onTrackInfo} />
190
-
{:else}
191
-
<ArtistList />
192
-
{/if}
188
+
<div class="flex size-full min-w-0 flex-col">
189
+
<div class="relative pt-4 px-5 pb-5">
190
+
<div
191
+
class="absolute top-0 left-0 h-10 w-full"
192
+
class:dragbar={$modalCount === 0 && isMac}
193
+
class:queue-visible={$queueVisible}
194
+
/>
195
+
<h3 class="m-0 pb-0.5 text-[19px] font-medium leading-none">
196
+
{#if $page.tracklist.id === 'root'}
197
+
Songs
198
+
{:else if $page.tracklist.type !== 'special'}
199
+
{$page.tracklist.name}
200
+
{/if}
201
+
</h3>
202
+
<div class="text-[13px] leading-4 opacity-70">{$page.length} songs</div>
203
+
{#if 'description' in $page.tracklist && $page.tracklist.description !== ''}
204
+
<div class="mt-2.5 text-sm text-[13px] opacity-70">{$page.tracklist.description}</div>
205
+
{/if}
206
+
</div>
207
+
{#if $page.viewAs === 0}
208
+
<TrackList {onTrackInfo} />
209
+
{:else}
210
+
<ArtistList />
211
+
{/if}
212
+
</div>
193
213
{#if $queueVisible}
194
214
<Queue {onTrackInfo} />
195
215
{/if}
···
267
287
height: 100%
268
288
top: 0px
269
289
left: 0px
290
+
.dragbar
291
+
-webkit-app-region: drag
292
+
&.queue-visible
293
+
width: calc(100% - var(--right-sidebar-width))
270
294
.drag-overlay
271
295
display: flex
272
296
align-items: center
-27
src/components/TrackList.svelte
-27
src/components/TrackList.svelte
···
214
214
on:dragleave={() => (dragToIndex = null)}
215
215
class:no-selection={$selection.count === 0}
216
216
>
217
-
<div class="relative pt-4 px-5 pb-5">
218
-
<div class:dragbar={$modalCount === 0 && isMac} class:queue-visible={$queueVisible} />
219
-
<h3 class="title pb-0.5 text-[19px] leading-none">
220
-
{#if $page.tracklist.id === 'root'}
221
-
Songs
222
-
{:else if $page.tracklist.type !== 'special'}
223
-
{$page.tracklist.name}
224
-
{/if}
225
-
</h3>
226
-
<div class="text-[13px] leading-4 opacity-70">{$page.length} songs</div>
227
-
{#if 'description' in $page.tracklist && $page.tracklist.description !== ''}
228
-
<div class="mt-2.5 text-sm text-[13px] opacity-70">{$page.tracklist.description}</div>
229
-
{/if}
230
-
</div>
231
217
<div class="row table-header" class:desc={$page.sortDesc} role="row">
232
218
<!-- svelte-ignore a11y-interactive-supports-focus -->
233
219
<!-- svelte-ignore a11y-click-events-have-key-events -->
···
412
398
:global(:focus)
413
399
.selected
414
400
background-color: hsla(var(--hue), 70%, 46%, 1)
415
-
416
-
.dragbar
417
-
-webkit-app-region: drag
418
-
position: absolute
419
-
height: 40px
420
-
width: 100%
421
-
top: 0px
422
-
left: 0px
423
-
&.queue-visible
424
-
width: calc(100% - var(--right-sidebar-width))
425
-
.title
426
-
margin: 0px
427
-
font-weight: 500
428
401
.tracklist
429
402
display: flex
430
403
flex-direction: column