mbrucedogs/singsalot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Signed-off-by: mbrucedogs <mbrucedogs@gmail.com>

Browse Source
This commit is contained in:
mbrucedogs 2025-07-20 13:24:27 -05:00
parent bb8ed2deec
commit 58b393f937
3 changed files with 43 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
.firebase/hosting.ZGlzdA.cache
View File

@ -1,11 +1,11 @@
vite.svg,499162500000,699a02e0e68a579f687d364bbbe7633161244f35af068220aee37b1b33dfb3c7 vite.svg,499162500000,699a02e0e68a579f687d364bbbe7633161244f35af068220aee37b1b33dfb3c7
index.html,1752951605613,3b193e76d96e2e703454d5fc53b1954151ddd57f6538ba62fdcbece720b6dd61 index.html,1753035405872,3c6158b71f45d6e999fa49b429eac62310b4fbbc3a5d610313ab240eb484f92a
assets/swipe-back-DMtim9hn.js,1752951605613,71353f9332d9e973fac6d43a2f028817d120295deff524e1e1807fa8d2049477 assets/swipe-back-CGSdR0aI.js,1753035405872,517c817b67e87bb2d8be7273e40d76dc6046afddee62757c5a30ecaa4dc6e985
assets/status-tap-WuGNn0YA.js,1752951605613,777d7cabd00c9519602ec5e3dcb2bd757a370a43ffd52d7d51ce4a886195ed29 assets/status-tap-CLf1Wfnc.js,1753035405872,74cfde934919ae1a235d219096b646fec1fc240688d58b039cecd11f6fe9de97
assets/md.transition-ClxjfWXF.js,1752951605613,a739784f987dc1fb17597abc73ca83ee9116ae3e6aab9893539370da414efbe2 assets/md.transition-BcHE0Hfy.js,1753035405872,957736badb3da354a52c022261dbce86539188b7de89f5b9761e478aa79b1512
assets/input-shims-BPveaFSt.js,1752951605613,d3a570cd052e230f87c5c0902f68af08eb6c5920b8bf896d70101bccc4abccbb assets/input-shims-DNsJ2SsM.js,1753035405872,0c88fd6b629bc2dc618613c3b0dea275eebe9ff9a54f0e550519b71e2f87e889
assets/ios.transition-BENZxPNL.js,1752951605613,bf5fb0825a54f61164be113cf6d3f33be57615cddc76b75742cc28385d6332f8 assets/index7-CvVnXkg4.js,1753035405872,bc175c80e2f773729b6b034071fad7830f0cde004d184285cd8c29722271b66f
assets/index7-1SPNlktY.js,1752951605613,238893fbf39dbf781502b1829d7e0d77baa505b5d0f918e73bb94e1dccee0fcc assets/ios.transition-C4vHCq5E.js,1753035405872,614a85d6eb6c5f73c8024c65bab5e008c271a6e77817519d0035cadc2652e8f5
assets/focus-visible-supuXXMI.js,1752951605613,df9266429356671847fa2c8123e1564bae645f75df3094f0055c365fa2beae28 assets/focus-visible-supuXXMI.js,1753035405872,df9266429356671847fa2c8123e1564bae645f75df3094f0055c365fa2beae28
assets/index-DPys672b.css,1752951605613,c9c7d948a7ceefaff59d2530320f6139094e045985c18a068675d4fb76a70b7f assets/index-CzY-nILz.css,1753035405872,c68362f490f176fbe950e6cc313da199ed6e08c67058d82b833a2026a0be75c9
assets/index-CtEACmTC.js,1752951605614,3ccf47f5377df1aa3ec9069325bb5eddaf8eda45bbda0bf692f67a946f3a4489 assets/index-BijPmtNu.js,1753035405873,9729127c742119efd72ff5f7f4628f939053ad2f25abe6b78e74801e8e599326

24
src/components/Navigation/Navigation.tsx
View File

@ -98,9 +98,9 @@ const Navigation: React.FC = () => {
alignItems: 'center', alignItems: 'center',
padding: '12px 16px', padding: '12px 16px',
cursor: 'pointer', cursor: 'pointer',
backgroundColor: location.pathname === item.path ? 'var(--ion-color-primary-tint)' : 'transparent', backgroundColor: location.pathname === item.path ? 'var(--ion-color-primary)' : 'transparent',
color: location.pathname === item.path ? 'var(--ion-color-primary)' : 'var(--ion-text-color)', color: location.pathname === item.path ? 'white' : 'var(--ion-text-color)',
borderRight: location.pathname === item.path ? '2px solid var(--ion-color-primary)' : 'none', borderRight: location.pathname === item.path ? '2px solid var(--ion-color-primary-shade)' : 'none',
transition: 'background-color 0.2s, color 0.2s' transition: 'background-color 0.2s, color 0.2s'
}} }}
onMouseEnter={(e) => { onMouseEnter={(e) => {
@ -175,8 +175,24 @@ const Navigation: React.FC = () => {
button button
onClick={() => handleNavigation(item.path)} onClick={() => handleNavigation(item.path)}
className={location.pathname === item.path ? 'ion-activated' : ''} 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> <IonLabel>{item.label}</IonLabel>
</IonItem> </IonItem>
))} ))}

15
src/features/Queue/Queue.tsx
View File

@ -1,10 +1,10 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { IonItem, IonLabel, IonItemSliding, IonItemOptions, IonItemOption, IonButton, IonIcon, IonReorderGroup, IonReorder } from '@ionic/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 { useQueue } from '../../hooks';
import { useAppSelector } from '../../redux'; import { useAppSelector } from '../../redux';
import { selectQueueLength, selectPlayerStateMemoized, selectIsAdmin, selectControllerName } 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 { SongInfoDisplay } from '../../components/common/SongItem';
import { queueService } from '../../firebase/services'; import { queueService } from '../../firebase/services';
import { debugLog } from '../../utils/logger'; 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 ( return (
<> <>
<div className="ion-padding ion-text-end"> <div className="ion-padding ion-text-end">