3dtours/ace-step-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add always-visible player, play button on sidebar thumbnail, and GitHub link

Browse Source 
- Player: Show minimal placeholder when no song is playing instead of hiding
- RightSidebar: Add play button overlay on cover art thumbnail
  - Hover to reveal play/pause button
  - Click anywhere on cover to play
  - Shows pause icon when song is currently playing
- SettingsModal: Add GitHub repo link for issues and feature requests
This commit is contained in:
fspecii
2026-02-04 13:43:25 +02:00
parent e616713ec1
commit 02fa32bc53
4 changed files with 72 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/SettingsModal.tsx
+27 -13
View File
@@ -1,5 +1,5 @@
import React, { useState } from 'react';
import { X, User as UserIcon, Palette, Info, Edit3, ExternalLink } from 'lucide-react';
import { X, User as UserIcon, Palette, Info, Edit3, ExternalLink, Github } from 'lucide-react';
import { useAuth } from '../context/AuthContext';
import { EditProfileModal } from './EditProfileModal';
@@ -144,18 +144,32 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({ isOpen, onClose, t
Powered by ACE-Step 1.5. Open source and free to use.
</p>
<div className="pt-3 border-t border-zinc-200 dark:border-zinc-700/50 mt-4">
<p className="text-zinc-900 dark:text-white font-medium mb-2">Created by Ambsd</p>
<a
href="https://x.com/AmbsdOP"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-2 px-4 py-2 bg-black dark:bg-white text-white dark:text-black rounded-lg text-sm font-medium hover:bg-zinc-800 dark:hover:bg-zinc-200 transition-colors"
>
<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
</svg>
Follow @AmbsdOP
</a>
<p className="text-zinc-900 dark:text-white font-medium mb-3">Created by Ambsd</p>
<div className="flex flex-wrap gap-2">
<a
href="https://x.com/AmbsdOP"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-2 px-4 py-2 bg-black dark:bg-white text-white dark:text-black rounded-lg text-sm font-medium hover:bg-zinc-800 dark:hover:bg-zinc-200 transition-colors"
>
<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
</svg>
Follow @AmbsdOP
</a>
<a
href="https://github.com/fspecii/ace-step-ui"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-2 px-4 py-2 bg-zinc-800 dark:bg-zinc-700 text-white rounded-lg text-sm font-medium hover:bg-zinc-700 dark:hover:bg-zinc-600 transition-colors"
>
<Github size={16} />
GitHub Repo
</a>
</div>
<p className="text-xs text-zinc-400 dark:text-zinc-500 mt-3">
Report issues or request features on GitHub
</p>
</div>
</div>
</div>