A svelte frontend for gonic
  • Svelte 74.8%
  • TypeScript 23.1%
  • CSS 1%
  • Dockerfile 0.5%
  • JavaScript 0.3%
  • Other 0.3%
Find a file
Théophile Gervreau-Mercier aa5b494e72 Add folder selector component and improve UI components
- Add FolderSelector component for browsing music library folders
- Update ContextMenu with improved styling and dark mode support
- Enhance IconButton with better hover states and accessibility
- Update MusicLibrary to integrate folder navigation
- Improve MusicPlayer UI with refined controls
2026-02-01 13:49:32 +01:00
.forgejo/workflows Add playlist management, Docker support, and project documentation 2025-10-06 18:23:01 +02:00
.github Add playlist management, Docker support, and project documentation 2025-10-06 18:23:01 +02:00
src Add folder selector component and improve UI components 2026-02-01 13:49:32 +01:00
static Implement comprehensive right-click context menus and enhance UI components 2025-10-06 11:05:03 +02:00
.dockerignore Add playlist management, Docker support, and project documentation 2025-10-06 18:23:01 +02:00
.gitignore Initialize SvelteKit project configuration 2025-10-05 02:12:52 +02:00
.npmrc Initialize SvelteKit project configuration 2025-10-05 02:12:52 +02:00
CHANGELOG.md Add playlist management, Docker support, and project documentation 2025-10-06 18:23:01 +02:00
COMPLETION_SUMMARY.md Add playlist management, Docker support, and project documentation 2025-10-06 18:23:01 +02:00
CONTRIBUTING.md Add playlist management, Docker support, and project documentation 2025-10-06 18:23:01 +02:00
docker-compose.yml Add playlist management, Docker support, and project documentation 2025-10-06 18:23:01 +02:00
DOCKER.md Add playlist management, Docker support, and project documentation 2025-10-06 18:23:01 +02:00
Dockerfile Add playlist management, Docker support, and project documentation 2025-10-06 18:23:01 +02:00
LICENSE Initial commit 2025-10-05 01:49:09 +02:00
package-lock.json Implement enhanced cover art generation and song list column toggles 2025-10-06 11:14:42 +02:00
package.json Implement enhanced cover art generation and song list column toggles 2025-10-06 11:14:42 +02:00
README.md Add comprehensive project documentation 2025-10-05 02:13:33 +02:00
RELEASE.md Add playlist management, Docker support, and project documentation 2025-10-06 18:23:01 +02:00
SECURITY_AUDIT.md Add playlist management, Docker support, and project documentation 2025-10-06 18:23:01 +02:00
svelte.config.js Initialize SvelteKit project configuration 2025-10-05 02:12:52 +02:00
tmp_todo.md Add playlist management, Docker support, and project documentation 2025-10-06 18:23:01 +02:00
tsconfig.json Initialize SvelteKit project configuration 2025-10-05 02:12:52 +02:00
vite.config.ts Initialize SvelteKit project configuration 2025-10-05 02:12:52 +02:00

Gonic Svelte Frontend

A modern SvelteKit frontend for the Gonic Subsonic music server.

Features

  • 🎵 Music Library Browsing: Browse artists, albums, and songs
  • 🔍 Search: Search across your entire music collection
  • 🎧 Music Player: Built-in audio player with progress control
  • 📱 Responsive Design: Works on desktop and mobile devices
  • 🔐 Authentication: Secure login with your Gonic server credentials
  • 🎨 Modern UI: Clean, intuitive interface built with SvelteKit

Prerequisites

  • A running Gonic server
  • Node.js 18+ and npm

Quick Start

  1. Clone and install dependencies:

    git clone <repository-url>
    cd gonic-svelte
    npm install
    
  2. Start the development server:

    npm run dev
    
  3. Open your browser and navigate to http://localhost:5173

  4. Connect to your Gonic server:

    • Enter your Gonic server URL (e.g., http://localhost:4747)
    • Enter your username and password
    • Click "Connect"

Configuration

The app will remember your server connection details in browser storage. Default Gonic credentials are:

  • Username: admin
  • Password: admin

Building for Production

To create a production build:

npm run build

Preview the production build:

npm run preview

API Compatibility

This frontend implements the Subsonic API v1.16.0 and is compatible with:

  • Gonic
  • Other Subsonic-compatible servers

Development

The project structure:

src/
├── lib/
│   ├── components/          # Svelte components
│   │   ├── Login.svelte     # Authentication form
│   │   ├── MusicLibrary.svelte  # Main library interface
│   │   └── MusicPlayer.svelte   # Audio player
│   ├── stores.ts            # Svelte stores for state management
│   └── subsonic.ts          # Subsonic API client
├── routes/
│   ├── +layout.svelte       # App layout
│   └── +page.svelte         # Main page
└── app.css                  # Global styles

Contributing

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes
  4. Test thoroughly
  5. Submit a pull request

License

MIT License - see the LICENSE file for details.

Acknowledgments