Signed-off-by: mbrucedogs <mbrucedogs@gmail.com>
This commit is contained in:
parent
bb8ed2deec
commit
58b393f937
@ -1,11 +1,11 @@
|
||||
vite.svg,499162500000,699a02e0e68a579f687d364bbbe7633161244f35af068220aee37b1b33dfb3c7
|
||||
index.html,1752951605613,3b193e76d96e2e703454d5fc53b1954151ddd57f6538ba62fdcbece720b6dd61
|
||||
assets/swipe-back-DMtim9hn.js,1752951605613,71353f9332d9e973fac6d43a2f028817d120295deff524e1e1807fa8d2049477
|
||||
assets/status-tap-WuGNn0YA.js,1752951605613,777d7cabd00c9519602ec5e3dcb2bd757a370a43ffd52d7d51ce4a886195ed29
|
||||
assets/md.transition-ClxjfWXF.js,1752951605613,a739784f987dc1fb17597abc73ca83ee9116ae3e6aab9893539370da414efbe2
|
||||
assets/input-shims-BPveaFSt.js,1752951605613,d3a570cd052e230f87c5c0902f68af08eb6c5920b8bf896d70101bccc4abccbb
|
||||
assets/ios.transition-BENZxPNL.js,1752951605613,bf5fb0825a54f61164be113cf6d3f33be57615cddc76b75742cc28385d6332f8
|
||||
assets/index7-1SPNlktY.js,1752951605613,238893fbf39dbf781502b1829d7e0d77baa505b5d0f918e73bb94e1dccee0fcc
|
||||
assets/focus-visible-supuXXMI.js,1752951605613,df9266429356671847fa2c8123e1564bae645f75df3094f0055c365fa2beae28
|
||||
assets/index-DPys672b.css,1752951605613,c9c7d948a7ceefaff59d2530320f6139094e045985c18a068675d4fb76a70b7f
|
||||
assets/index-CtEACmTC.js,1752951605614,3ccf47f5377df1aa3ec9069325bb5eddaf8eda45bbda0bf692f67a946f3a4489
|
||||
index.html,1753035405872,3c6158b71f45d6e999fa49b429eac62310b4fbbc3a5d610313ab240eb484f92a
|
||||
assets/swipe-back-CGSdR0aI.js,1753035405872,517c817b67e87bb2d8be7273e40d76dc6046afddee62757c5a30ecaa4dc6e985
|
||||
assets/status-tap-CLf1Wfnc.js,1753035405872,74cfde934919ae1a235d219096b646fec1fc240688d58b039cecd11f6fe9de97
|
||||
assets/md.transition-BcHE0Hfy.js,1753035405872,957736badb3da354a52c022261dbce86539188b7de89f5b9761e478aa79b1512
|
||||
assets/input-shims-DNsJ2SsM.js,1753035405872,0c88fd6b629bc2dc618613c3b0dea275eebe9ff9a54f0e550519b71e2f87e889
|
||||
assets/index7-CvVnXkg4.js,1753035405872,bc175c80e2f773729b6b034071fad7830f0cde004d184285cd8c29722271b66f
|
||||
assets/ios.transition-C4vHCq5E.js,1753035405872,614a85d6eb6c5f73c8024c65bab5e008c271a6e77817519d0035cadc2652e8f5
|
||||
assets/focus-visible-supuXXMI.js,1753035405872,df9266429356671847fa2c8123e1564bae645f75df3094f0055c365fa2beae28
|
||||
assets/index-CzY-nILz.css,1753035405872,c68362f490f176fbe950e6cc313da199ed6e08c67058d82b833a2026a0be75c9
|
||||
assets/index-BijPmtNu.js,1753035405873,9729127c742119efd72ff5f7f4628f939053ad2f25abe6b78e74801e8e599326
|
||||
|
||||
@ -98,9 +98,9 @@ const Navigation: React.FC = () => {
|
||||
alignItems: 'center',
|
||||
padding: '12px 16px',
|
||||
cursor: 'pointer',
|
||||
backgroundColor: location.pathname === item.path ? 'var(--ion-color-primary-tint)' : 'transparent',
|
||||
color: location.pathname === item.path ? 'var(--ion-color-primary)' : 'var(--ion-text-color)',
|
||||
borderRight: location.pathname === item.path ? '2px solid var(--ion-color-primary)' : 'none',
|
||||
backgroundColor: location.pathname === item.path ? 'var(--ion-color-primary)' : 'transparent',
|
||||
color: location.pathname === item.path ? 'white' : 'var(--ion-text-color)',
|
||||
borderRight: location.pathname === item.path ? '2px solid var(--ion-color-primary-shade)' : 'none',
|
||||
transition: 'background-color 0.2s, color 0.2s'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
@ -175,8 +175,24 @@ const Navigation: React.FC = () => {
|
||||
button
|
||||
onClick={() => handleNavigation(item.path)}
|
||||
className={location.pathname === item.path ? 'ion-activated' : ''}
|
||||
style={{
|
||||
'--color': location.pathname === item.path ? 'white' : 'var(--ion-text-color)',
|
||||
'--color-activated': 'white',
|
||||
'--color-focused': 'white',
|
||||
'--color-hover': location.pathname === item.path ? 'white' : 'var(--ion-color-primary)',
|
||||
'--background': location.pathname === item.path ? 'var(--ion-color-primary)' : 'transparent',
|
||||
'--background-activated': 'var(--ion-color-primary-shade)',
|
||||
'--background-focused': 'var(--ion-color-primary-shade)',
|
||||
'--background-hover': location.pathname === item.path ? 'var(--ion-color-primary-shade)' : 'var(--ion-color-light)'
|
||||
} as React.CSSProperties}
|
||||
>
|
||||
<IonIcon icon={item.icon} slot="start" />
|
||||
<IonIcon
|
||||
icon={item.icon}
|
||||
slot="start"
|
||||
style={{
|
||||
color: location.pathname === item.path ? 'white' : 'var(--ion-text-color)'
|
||||
}}
|
||||
/>
|
||||
<IonLabel>{item.label}</IonLabel>
|
||||
</IonItem>
|
||||
))}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { IonItem, IonLabel, IonItemSliding, IonItemOptions, IonItemOption, IonButton, IonIcon, IonReorderGroup, IonReorder } from '@ionic/react';
|
||||
import { trash, reorderThreeOutline, reorderTwoOutline } from 'ionicons/icons';
|
||||
import { trash, reorderThreeOutline, reorderTwoOutline, list } from 'ionicons/icons';
|
||||
import { useQueue } from '../../hooks';
|
||||
import { useAppSelector } from '../../redux';
|
||||
import { selectQueueLength, selectPlayerStateMemoized, selectIsAdmin, selectControllerName } from '../../redux';
|
||||
import { ActionButton, NumberDisplay } from '../../components/common';
|
||||
import { ActionButton, NumberDisplay, EmptyState } from '../../components/common';
|
||||
import { SongInfoDisplay } from '../../components/common/SongItem';
|
||||
import { queueService } from '../../firebase/services';
|
||||
import { debugLog } from '../../utils/logger';
|
||||
@ -219,6 +219,17 @@ const Queue: React.FC = () => {
|
||||
);
|
||||
};
|
||||
|
||||
// Show empty state if no items in queue
|
||||
if (queueItems.length === 0) {
|
||||
return (
|
||||
<EmptyState
|
||||
title="Queue is Empty"
|
||||
message="No songs are currently in the queue. Add some songs to get started!"
|
||||
icon={<IonIcon icon={list} size="large" />}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="ion-padding ion-text-end">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user