app first commit

2025-08-02 02:08:59 +02:00 · 2025-08-02 02:08:59 +02:00 · 4441012687
commit 4441012687
parent 0e16d3e6be
45 changed files with 12987 additions and 0 deletions
--- a/app/capacitor.config.ts
+++ b/app/capacitor.config.ts
@ -0,0 +1,9 @@
+import type { CapacitorConfig } from '@capacitor/cli';
+
+const config: CapacitorConfig = {
+  appId: 'io.ionic.starter',
+  appName: 'Lido Vibes',
+  webDir: 'dist'
+};
+
+export default config;
--- a/app/cypress.config.ts
+++ b/app/cypress.config.ts
@ -0,0 +1,10 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    baseUrl: "http://localhost:5173",
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});
--- a/app/cypress/e2e/test.cy.ts
+++ b/app/cypress/e2e/test.cy.ts
@ -0,0 +1,6 @@
+describe('My First Test', () => {
+  it('Visits the app root url', () => {
+    cy.visit('/')
+    cy.contains('ion-content', 'Tab 1 page')
+  })
+})
--- a/app/cypress/fixtures/example.json
+++ b/app/cypress/fixtures/example.json
@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}
--- a/app/cypress/support/commands.ts
+++ b/app/cypress/support/commands.ts
@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }
--- a/app/cypress/support/e2e.ts
+++ b/app/cypress/support/e2e.ts
@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
--- a/app/eslint.config.js
+++ b/app/eslint.config.js
@ -0,0 +1,30 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist', 'cypress.config.ts'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+      'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+      'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    },
+  },
+)
--- a/app/index.html
+++ b/app/index.html
@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Ionic App</title>
+    
+    <base href="/" />
+    
+    <meta name="color-scheme" content="light dark" />
+    <meta
+      name="viewport"
+      content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <meta name="format-detection" content="telephone=no" />
+    <meta name="msapplication-tap-highlight" content="no" />
+    
+    <link rel="manifest" href="/manifest.json" />
+    
+    <link rel="shortcut icon" type="image/png" href="/favicon.png" />
+    
+    <!-- add to homescreen for ios -->
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-title" content="Ionic App" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/app/ionic.config.json
+++ b/app/ionic.config.json
@ -0,0 +1,7 @@
+{
+  "name": "Lido Vibes",
+  "integrations": {
+    "capacitor": {}
+  },
+  "type": "react-vite"
+}
--- a/app/package-lock.json
+++ b/app/package-lock.json
--- a/app/package.json
+++ b/app/package.json
@ -0,0 +1,58 @@
+{
+  "name": "lido-vibes",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "test.e2e": "cypress run",
+    "test.unit": "vitest",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@capacitor/app": "7.0.1",
+    "@capacitor/core": "7.4.2",
+    "@capacitor/haptics": "7.0.1",
+    "@capacitor/keyboard": "7.0.1",
+    "@capacitor/status-bar": "7.0.1",
+    "@ionic/react": "^8.5.0",
+    "@ionic/react-router": "^8.5.0",
+    "@types/react-router": "^5.1.20",
+    "@types/react-router-dom": "^5.3.3",
+    "ionicons": "^7.4.0",
+    "jotai": "^2.12.5",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "react-router": "^5.3.4",
+    "react-router-dom": "^5.3.4"
+  },
+  "devDependencies": {
+    "@capacitor/cli": "7.4.2",
+    "@testing-library/dom": ">=7.21.4",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/react": "19.0.10",
+    "@types/react-dom": "19.0.4",
+    "@vitejs/plugin-legacy": "^5.0.0",
+    "@vitejs/plugin-react": "^4.0.1",
+    "cypress": "^13.5.0",
+    "eslint": "^9.20.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^15.15.0",
+    "jsdom": "^22.1.0",
+    "terser": "^5.4.0",
+    "typescript": "^5.1.6",
+    "typescript-eslint": "^8.24.0",
+    "vite": "5.2.14",
+    "vitest": "^0.34.6"
+  },
+  "overrides": {
+    "rollup": "4.44.0"
+  },
+  "description": "An Ionic project"
+}
--- a/app/public/favicon.png
+++ b/app/public/favicon.png
--- a/app/public/manifest.json
+++ b/app/public/manifest.json
@ -0,0 +1,21 @@
+{
+  "short_name": "Ionic App",
+  "name": "My Ionic App",
+  "icons": [
+    {
+      "src": "assets/icon/favicon.png",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "assets/icon/icon.png",
+      "type": "image/png",
+      "sizes": "512x512",
+      "purpose": "maskable"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff"
+}
--- a/app/resources/icon.png
+++ b/app/resources/icon.png
--- a/app/resources/splash.png
+++ b/app/resources/splash.png
--- a/app/src/App.css
+++ b/app/src/App.css
@ -0,0 +1,28 @@
+.floating-tab-bar {
+  /* position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 90%;
+  max-width: 500px; */
+  height: 60px;
+
+  background: #ffffff10;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+
+  border-top: 3px solid #ffffff20;
+
+  /* border-radius: 9999999999999px; */
+  /* box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); */
+
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+
+  padding: 0 10px;
+  z-index: 999;
+
+  --background: transparent;
+  --border: none;
+}
--- a/app/src/App.test.tsx
+++ b/app/src/App.test.tsx
@ -0,0 +1,8 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import App from './App';
+
+test('renders without crashing', () => {
+  const { baseElement } = render(<App />);
+  expect(baseElement).toBeDefined();
+});
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@ -0,0 +1,54 @@
+import './App.css';
+import './theme/variables.css';
+import '@ionic/react/css/core.css';
+import '@ionic/react/css/display.css';
+import '@ionic/react/css/flex-utils.css';
+import '@ionic/react/css/float-elements.css';
+import '@ionic/react/css/normalize.css';
+import '@ionic/react/css/padding.css';
+import '@ionic/react/css/palettes/dark.system.css';
+import '@ionic/react/css/structure.css';
+import '@ionic/react/css/text-alignment.css';
+import '@ionic/react/css/text-transformation.css';
+import '@ionic/react/css/typography.css';
+
+import { IonApp, IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs, setupIonicReact } from '@ionic/react';
+import { IonReactRouter } from '@ionic/react-router';
+import { list, musicalNote, search } from 'ionicons/icons';
+import { useAtom } from 'jotai';
+import { useEffect } from 'react';
+import { Redirect, Route } from 'react-router-dom';
+
+import { currentTrackAtom } from './atoms';
+import { mocks } from './mocks';
+import Tab1 from './pages/Tab1';
+import Tab2 from './pages/Tab2';
+import Tab3 from './pages/Tab3';
+import Tab from './pages/Tab3';
+
+/* Core CSS required for Ionic components to work properly */
+/* Basic CSS for apps built with Ionic */
+/* Optional CSS utils that can be commented out */
+/* Dark mode */
+/* Theme variables */
+/* Custom CSS */
+setupIonicReact();
+
+const App: React.FC = () => {
+  const [current, setCurrent] = useAtom(currentTrackAtom)
+
+  useEffect(() => {
+    setCurrent(mocks.nowPlaying)
+  }, [])
+
+  return (
+    <IonApp>
+      {/* {current && <Background imageUrl={current.coverUrl} color={current.color}/>} */}
+      <IonReactRouter>
+        <Tab />
+      </IonReactRouter>
+    </IonApp>
+  );
+};
+
+export default App;
--- a/app/src/atoms/index.tsx
+++ b/app/src/atoms/index.tsx
@ -0,0 +1,5 @@
+import { atom } from 'jotai';
+import { NowPlayingData } from '../mocks';
+
+export const themeAtom = atom<'light' | 'dark' | 'red'>('light');
+export const currentTrackAtom = atom<NowPlayingData>()
--- a/app/src/components/Backendtest.tsx
+++ b/app/src/components/Backendtest.tsx
@ -0,0 +1,43 @@
+import React, { useEffect, useState } from "react";
+
+const FetchData = () => {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    fetch("https://fbbb261497e3.ngrok-free.app/api/data", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({}), // Body vuoto
+    })
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`HTTP error! Status: ${response.status}`);
+        }
+        return response.json();
+      })
+      .then((json) => {
+        setData(json);
+        setLoading(false);
+      })
+      .catch((err) => {
+        setError(err.message);
+        setLoading(false);
+      });
+  }, []);
+
+  if (loading) return <p>Caricamento in corso...</p>;
+  if (error) return <p>Errore: {error}</p>;
+
+  return (
+    <div>
+      <h1>Risultato dalla POST</h1>
+      <pre>{JSON.stringify(data, null, 2)}</pre>
+    </div>
+  );
+};
+
+export default FetchData;
--- a/app/src/components/Background.tsx
+++ b/app/src/components/Background.tsx
@ -0,0 +1,40 @@
+import React from "react";
+
+type BackgroundProps = {
+  imageUrl: string;
+  color: string;
+};
+
+const Background: React.FC<BackgroundProps> = ({ imageUrl, color }) => {
+  return (
+    <>
+      <div
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "100vw",
+          height: "100vh",
+          backgroundImage: `url(${imageUrl})`,
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+          filter: "blur(30px)",
+          zIndex: -2,
+        }}
+      />
+      <div
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "100vw",
+          height: "100vh",
+          backgroundColor: "rgba(0, 0, 0, 0.5)", // overlay nero semitrasparente
+          zIndex: -1,
+        }}
+      />
+    </>
+  );
+};
+
+export default Background;
--- a/app/src/components/ExploreContainer.css
+++ b/app/src/components/ExploreContainer.css
@ -0,0 +1,24 @@
+.container {
+  text-align: center;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.container strong {
+  font-size: 20px;
+  line-height: 26px;
+}
+
+.container p {
+  font-size: 16px;
+  line-height: 22px;
+  color: #8c8c8c;
+  margin: 0;
+}
+
+.container a {
+  text-decoration: none;
+}
--- a/app/src/components/ExploreContainer.tsx
+++ b/app/src/components/ExploreContainer.tsx
@ -0,0 +1,16 @@
+import './ExploreContainer.css';
+
+interface ContainerProps {
+  name: string;
+}
+
+const ExploreContainer: React.FC<ContainerProps> = ({ name }) => {
+  return (
+    <div className="container">
+      <strong>{name}</strong>
+      <p>Explore <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
+    </div>
+  );
+};
+
+export default ExploreContainer;
--- a/app/src/components/NowPlayingDisc.css
+++ b/app/src/components/NowPlayingDisc.css
@ -0,0 +1,54 @@
+/* @keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+} */
+
+.now-playing-disc {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px;
+}
+
+.cover-circle {
+  animation: spin 8s linear infinite;
+  width: 220px;
+  height: 220px;
+  border-radius: 50%;
+  background-size: cover;
+  background-position: center;
+  box-shadow: var(--box-shadow, 0 4px 10px rgba(0, 0, 0, 0.3));
+  margin-bottom: 16px;
+  outline: 4px solid rgba(218, 218, 218, 0.05);
+}
+
+.song-info {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+}
+
+.song-now-playing {
+  text-transform: uppercase;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-muted);
+  margin-bottom: 3px;
+}
+
+.song-title {
+  font-size: var(--title-font-size, 1.25rem);
+  font-weight: bold;
+  color: var(--text);
+}
+
+.song-artist {
+  font-size: var(--artist-font-size, 1rem);
+  font-weight: 800;
+  color: var(--text-shy);
+}
--- a/app/src/components/NowPlayingDisc.tsx
+++ b/app/src/components/NowPlayingDisc.tsx
@ -0,0 +1,28 @@
+import "./NowPlayingDisc.css";
+
+import { IonText } from "@ionic/react";
+import React from "react";
+
+import { NowPlayingData } from "../mocks";
+
+const NowPlayingDisc: React.FC<NowPlayingData> = ({
+  coverUrl,
+  title,
+  artist,
+}) => {
+  return (
+    <div className="now-playing-disc">
+      <div
+        className="cover-circle"
+        style={{ backgroundImage: `url(${coverUrl})` }}
+      />
+      <div className="song-info">
+        {/* <IonText className="song-now-playing">Now Playing</IonText> */}
+        <IonText className="song-title">{title}</IonText>
+        <IonText className="song-artist">{artist}</IonText>
+      </div>
+    </div>
+  );
+};
+
+export default NowPlayingDisc;
--- a/app/src/components/NowPlayingTab.css
+++ b/app/src/components/NowPlayingTab.css
@ -0,0 +1,69 @@
+.now-playing-cover {
+  margin-top: 25px;
+  margin-left: 25px;
+  width: calc(100% - 50px);
+  height: auto;
+  object-fit: cover;
+  display: block;
+  position: relative;
+  border-radius: 8px;
+}
+
+.now-playing-overlay {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 80px;
+  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.4));
+  pointer-events: none;
+}
+
+.now-playing-info {
+  padding: 0;
+  text-align: center;
+  color: white;
+}
+
+.now-playing-title {
+  font-size: 1.3rem;
+  font-weight: bold;
+  color: var(--text);
+  margin-bottom: 4px;
+}
+
+.now-playing-artist {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--text-shy);
+  margin-top: 0;
+  opacity: 0.8;
+}
+
+.now-playing-timeline-wrapper {
+  padding: 0 25px;
+}
+
+.now-playing-timeline-bg {
+  height: 6px;
+  width: 100%;
+  background-color: rgba(255, 255, 255, 0.3);
+  border-radius: 3px;
+  position: relative;
+}
+
+.now-playing-timeline-progress {
+  height: 100%;
+  background-color: white;
+  transition: width 1s linear;
+  border-radius: 3px;
+}
+
+.now-playing-time-labels {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.9rem;
+  color: white;
+  opacity: 0.7;
+  margin-top: 4px;
+}
--- a/app/src/components/NowPlayingTab.tsx
+++ b/app/src/components/NowPlayingTab.tsx
@ -0,0 +1,74 @@
+import { IonContent } from "@ionic/react";
+import React, { useEffect, useState } from "react";
+import "./NowPlayingTab.css";
+
+export interface NowPlayingData {
+  coverUrl: string;
+  title: string;
+  artist: string;
+  color: string;
+}
+
+interface NowPlayingTabProps {
+  data: NowPlayingData;
+  startTime: number; // timestamp in ms
+  duration: number; // duration in ms
+}
+
+const formatTime = (ms: number) => {
+  const totalSeconds = Math.floor(ms / 1000);
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+};
+
+const NowPlayingTab: React.FC<NowPlayingTabProps> = ({
+  data,
+  startTime,
+  duration,
+}) => {
+  const [progress, setProgress] = useState(0);
+  const [elapsed, setElapsed] = useState(0);
+
+  useEffect(() => {
+    const updateProgress = () => {
+      const now = Date.now();
+      const newElapsed = now - startTime;
+      const percentage = Math.min(newElapsed / duration, 1);
+      setElapsed(newElapsed);
+      setProgress(percentage);
+    };
+
+    updateProgress();
+    const interval = setInterval(updateProgress, 1000);
+    return () => clearInterval(interval);
+  }, [startTime, duration]);
+
+  return (
+    <>
+      <div style={{ position: "relative" }}>
+        <img src={data.coverUrl} alt="cover" className="now-playing-cover" />
+        <div className="now-playing-overlay" />
+      </div>
+      <div className="now-playing-info">
+        <h2 className="now-playing-title">{data.title}</h2>
+        <p className="now-playing-artist">{data.artist}</p>
+      </div>
+      <div className="now-playing-timeline-wrapper">
+        <div className="now-playing-timeline-bg">
+          <div
+            className="now-playing-timeline-progress"
+            style={{ width: `${progress * 100}%` }}
+          />
+        </div>
+
+        <div className="now-playing-time-labels">
+          <span>{formatTime(elapsed)}</span>
+          <span>{formatTime(duration)}</span>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default NowPlayingTab;
--- a/app/src/components/Queue.css
+++ b/app/src/components/Queue.css
@ -0,0 +1,77 @@
+.queue-container {
+  width: calc(100% - 40px);
+  margin: 20px;
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  margin-bottom: 200px;
+}
+
+/* Header con titolo e icona */
+.queue-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+h1.queue {
+  font-size: var(--title-font-size, 1.25rem);
+  font-weight: bold;
+  color: var(--text);
+  margin: 0;
+}
+
+/* Pulsante dell'icona di ricerca */
+.icon-button {
+  background: none;
+  color: var(--text);
+  font-size: 1.4rem;
+  margin-left: auto;
+  /* padding: 4px; */
+}
+
+/* Elementi della coda */
+.song-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 0;
+  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
+}
+
+.cover {
+  width: 48px;
+  height: 48px;
+  border-radius: 8px;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.text-info {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.title {
+  font-weight: 700;
+  font-size: 1.1rem;
+  color: var(--text);
+}
+
+.artist {
+  font-size: 0.9rem;
+  font-weight: 800;
+  color: var(--text-muted);
+}
+
+/* Ionic modal override (optional styling) */
+ion-modal {
+  --border-radius: 16px;
+}
+
+/* Optional: fix spacing inside modal */
+ion-content {
+  padding: 16px;
+}
--- a/app/src/components/Queue.tsx
+++ b/app/src/components/Queue.tsx
@ -0,0 +1,73 @@
+import './Queue.css';
+
+import { IonButton, IonContent, IonHeader, IonIcon, IonModal, IonSearchbar, IonTitle, IonToolbar } from '@ionic/react';
+import { add } from 'ionicons/icons';
+import React, { useState } from 'react';
+
+interface NowPlayingDiscProps {
+  coverUrl: string;
+  title: string;
+  artist: string;
+}
+
+interface QueueProps {
+  songs: NowPlayingDiscProps[];
+}
+
+const Queue: React.FC<QueueProps> = ({ songs }) => {
+  const [showModal, setShowModal] = useState(false);
+  const [searchText, setSearchText] = useState("");
+
+  return (
+    <div className="queue-container">
+      <div className="queue-header">
+        <h1 className="queue">Up next</h1>
+        <IonButton
+          fill="clear"
+          onClick={() => setShowModal(true)}
+          className="icon-button"
+        >
+          <IonIcon icon={add} />
+        </IonButton>
+      </div>
+
+      {songs.map((song, index) => (
+        <div className="song-item" key={index}>
+          <img
+            className="cover"
+            src={song.coverUrl}
+            alt={`${song.title} cover`}
+          />
+          <div className="text-info">
+            <div className="title">{song.title}</div>
+            <div className="artist">{song.artist}</div>
+          </div>
+        </div>
+      ))}
+
+      <IonModal isOpen={showModal} onDidDismiss={() => setShowModal(false)}>
+        <IonHeader>
+          <IonToolbar>
+            <IonTitle>Add Songs</IonTitle>
+            <IonButton
+              slot="end"
+              fill="clear"
+              onClick={() => setShowModal(false)}
+            >
+              Close
+            </IonButton>
+          </IonToolbar>
+        </IonHeader>
+        <IonContent>
+          <IonSearchbar
+            value={searchText}
+            onIonInput={(e) => setSearchText(e.detail.value!)}
+            placeholder="Search..."
+          />
+        </IonContent>
+      </IonModal>
+    </div>
+  );
+};
+
+export default Queue;
--- a/app/src/components/ThemeSelector.tsx
+++ b/app/src/components/ThemeSelector.tsx
@ -0,0 +1,19 @@
+import { IonItem, IonLabel, IonSelect, IonSelectOption } from '@ionic/react';
+import { useTheme } from '../hooks/useTheme';
+
+export function ThemeSelector() {
+  const { theme, setTheme, themes } = useTheme();
+
+  return (
+    <IonItem>
+      <IonLabel>Seleziona tema</IonLabel>
+      <IonSelect value={theme} onIonChange={(e) => setTheme(e.detail.value)}>
+        {themes.map((t) => (
+          <IonSelectOption key={t} value={t}>
+            {t}
+          </IonSelectOption>
+        ))}
+      </IonSelect>
+    </IonItem>
+  );
+}
--- a/app/src/hooks/useTheme.tsx
+++ b/app/src/hooks/useTheme.tsx
@ -0,0 +1,28 @@
+// src/hooks/useTheme.ts
+import { useEffect } from "react";
+import { useAtom } from "jotai";
+import { themeAtom } from "../atoms";
+
+const ALL_THEMES = ["light", "dark", "red"];
+
+export function useTheme() {
+  const [theme, setTheme] = useAtom(themeAtom);
+
+  useEffect(() => {
+    const body = document.body;
+    ALL_THEMES.forEach((t) => body.classList.remove(t));
+    body.classList.add(theme);
+    console.log('set ', theme)
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme((prev) => (prev === "light" ? "dark" : "light"));
+  };
+
+  return {
+    theme,
+    setTheme,
+    toggleTheme,
+    themes: ALL_THEMES,
+  };
+}
--- a/app/src/main.tsx
+++ b/app/src/main.tsx
@ -0,0 +1,11 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+
+const container = document.getElementById('root');
+const root = createRoot(container!);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
--- a/app/src/mocks/index.tsx
+++ b/app/src/mocks/index.tsx
@ -0,0 +1,81 @@
+export interface NowPlayingData {
+  coverUrl: string;
+  title: string;
+  artist: string;
+  color: string;
+}
+
+const nowPlayingMock: NowPlayingData = {
+  coverUrl: 'https://m.media-amazon.com/images/I/61ZE7JzxGgL._UXNaN_FMjpg_QL85_.jpg',
+  title: "Without Warning",
+  artist: "Kesha",
+  color: "#ff1012",
+};
+
+const QueueMock: NowPlayingData[] = [
+  {
+    coverUrl: "https://m.media-amazon.com/images/I/91YnHao9ZVL._SY200_QL15_.jpg",
+    title: "Eternal Groove",
+    artist: "Kesha",
+    color: "#FFD700", // oro
+  },
+  {
+    coverUrl: "https://upload.wikimedia.org/wikipedia/en/0/08/Future_56_Nights_%28mixtape%29.jpeg",
+    title: "56 Nights",
+    artist: "Future",
+    color: "#1E90FF", // blu intenso
+  },
+  {
+    coverUrl: "https://m.media-amazon.com/images/I/91YnHao9ZVL._SY200_QL15_.jpg",
+    title: "Eternal Groove",
+    artist: "Kesha",
+    color: "#FFD700",
+  },
+  {
+    coverUrl: "https://upload.wikimedia.org/wikipedia/en/0/08/Future_56_Nights_%28mixtape%29.jpeg",
+    title: "56 Nights",
+    artist: "Future",
+    color: "#1E90FF",
+  },
+  {
+    coverUrl: "https://m.media-amazon.com/images/I/91YnHao9ZVL._SY200_QL15_.jpg",
+    title: "Eternal Groove",
+    artist: "Kesha",
+    color: "#FFD700",
+  },
+  {
+    coverUrl: "https://upload.wikimedia.org/wikipedia/en/0/08/Future_56_Nights_%28mixtape%29.jpeg",
+    title: "56 Nights",
+    artist: "Future",
+    color: "#1E90FF",
+  },
+  {
+    coverUrl: "https://m.media-amazon.com/images/I/91YnHao9ZVL._SY200_QL15_.jpg",
+    title: "Eternal Groove",
+    artist: "Kesha",
+    color: "#FFD700",
+  },
+  {
+    coverUrl: "https://upload.wikimedia.org/wikipedia/en/0/08/Future_56_Nights_%28mixtape%29.jpeg",
+    title: "56 Nights",
+    artist: "Future",
+    color: "#1E90FF",
+  },
+  {
+    coverUrl: "https://m.media-amazon.com/images/I/91YnHao9ZVL._SY200_QL15_.jpg",
+    title: "Eternal Groove",
+    artist: "Kesha",
+    color: "#FFD700",
+  },
+  {
+    coverUrl: "https://upload.wikimedia.org/wikipedia/en/0/08/Future_56_Nights_%28mixtape%29.jpeg",
+    title: "56 Nights",
+    artist: "Future",
+    color: "#1E90FF",
+  },
+];
+
+export const mocks = {
+  nowPlaying: nowPlayingMock,
+  queue: QueueMock,
+};
--- a/app/src/pages/Tab1.css
+++ b/app/src/pages/Tab1.css
@ -0,0 +1,6 @@
+.tab-1-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+}
--- a/app/src/pages/Tab1.tsx
+++ b/app/src/pages/Tab1.tsx
@ -0,0 +1,30 @@
+import "./Tab1.css";
+
+import { IonContent, IonPage } from "@ionic/react";
+import { useAtom } from "jotai";
+
+import { currentTrackAtom } from "../atoms";
+import NowPlayingDisc from "../components/NowPlayingDisc";
+
+const Tab1: React.FC = () => {
+  const [current] = useAtom(currentTrackAtom);
+
+  return (
+    <IonPage>
+      <IonContent fullscreen className="transparent-content">
+        <div className="tab-1-container">
+          {current && (
+            <NowPlayingDisc
+              coverUrl={current.coverUrl}
+              title={current.title}
+              artist={current.artist}
+              color={current.color}
+            />
+          )}
+        </div>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Tab1;
--- a/app/src/pages/Tab2.css
+++ b/app/src/pages/Tab2.css
--- a/app/src/pages/Tab2.tsx
+++ b/app/src/pages/Tab2.tsx
@ -0,0 +1,17 @@
+import Queue from '../components/Queue';
+import { mocks } from '../mocks';
+import './Tab2.css';
+
+import { IonContent, IonPage } from '@ionic/react';
+
+const Tab2: React.FC = () => {
+  return (
+    <IonPage>
+      <IonContent fullscreen className="transparent-content">
+        <Queue songs={mocks.queue} />
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Tab2;
--- a/app/src/pages/Tab3.css
+++ b/app/src/pages/Tab3.css
--- a/app/src/pages/Tab3.tsx
+++ b/app/src/pages/Tab3.tsx
@ -0,0 +1,31 @@
+import { IonContent, IonPage } from '@ionic/react';
+import { useAtom } from 'jotai';
+import React from 'react';
+
+import { currentTrackAtom } from '../atoms';
+import NowPlayingTab from '../components/NowPlayingTab';
+import Queue from '../components/Queue';
+import { mocks } from '../mocks';
+
+const Tab: React.FC = () => {
+  const [current] = useAtom(currentTrackAtom);
+
+  const now = Date.now();
+
+  return (
+    <IonPage>
+      <IonContent fullscreen>
+        {current && (
+          <NowPlayingTab
+            data={current}
+            startTime={now - 15000} // es. iniziata 15 sec fa
+            duration={180000} // 3 minuti
+          />
+        )}
+        <Queue songs={mocks.queue} />
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Tab;
--- a/app/src/setupTests.ts
+++ b/app/src/setupTests.ts
@ -0,0 +1,14 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect';
+
+// Mock matchmedia
+window.matchMedia = window.matchMedia || function() {
+  return {
+      matches: false,
+      addListener: function() {},
+      removeListener: function() {}
+  };
+};
--- a/app/src/theme/variables.css
+++ b/app/src/theme/variables.css
@ -0,0 +1,75 @@
+.transparent-content {
+  /* --background: transparent; */
+  /* --background: red */
+}
+
+:root {
+  --title-font-size: 1.5rem;
+  --artist-font-size: 1.2rem;
+  --cover-border: 6px solid var(--ion-color-tertiary);
+  --box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
+
+  --text: white;
+  --text-supporting: rgba(255, 255, 255, 0.8);
+  --text-shy: rgba(255, 255, 255, 0.6);
+  --text-muted: rgba(255, 255, 255, 0.4);
+
+}
+
+/* TEMA DI BASE (light) */
+:root {
+  --ion-color-primary: #ff6f61;      /* corallo caldo, energico */
+  --ion-color-secondary: #4a90e2;    /* blu acceso, fresco */
+  --ion-color-tertiary: #f5a623;     /* arancione luminoso, vivace */
+  --ion-color-success: #2ecc71;      /* verde brillante, positivo */
+  --ion-color-warning: #f39c12;      /* giallo oro, invitante */
+  --ion-color-danger: #e74c3c;       /* rosso intenso, emozionante */
+  --ion-color-light: #fafafa;        /* bianco sporco, morbido */
+  --ion-color-medium: #95a5a6;       /* grigio neutro, equilibrato */
+  --ion-color-dark: #2c3e50;         /* blu notte, elegante */
+
+  --ion-background-color: #1e1e1e;   /* sfondo scuro per risaltare i contenuti */
+  --ion-text-color: #ffffff;          /* testo bianco per leggibilità */
+  --ion-toolbar-background: #2c3e50; /* toolbar scura e raffinata */
+  --ion-toolbar-color: #ffffff;       /* testo toolbar chiaro */
+  --ion-item-background: #34495e;     /* background di elementi, tono medio */
+}
+
+
+/* TEMA SCURO */
+body.dark {
+  --ion-color-primary: #222428;
+  --ion-color-secondary: #3dc2ff;
+  --ion-color-tertiary: #5260ff;
+  --ion-color-success: #2fdf75;
+  --ion-color-warning: #ffc409;
+  --ion-color-danger: #eb445a;
+  --ion-color-light: #1e1e1e;
+  --ion-color-medium: #92949c;
+  --ion-color-dark: #f4f5f8;
+
+  --ion-background-color: #121212;
+  --ion-text-color: #f4f4f4;
+  --ion-toolbar-background: #1f1f1f;
+  --ion-toolbar-color: #f4f4f4;
+  --ion-item-background: #1e1e1e;
+}
+
+/* TEMA ROSSO PERSONALIZZATO */
+body.red {
+  --ion-color-primary: #ff4d4f;
+  --ion-color-secondary: #ffa39e;
+  --ion-color-tertiary: #d32029;
+  --ion-color-success: #52c41a;
+  --ion-color-warning: #faad14;
+  --ion-color-danger: #cf1322;
+  --ion-color-light: #fff1f0;
+  --ion-color-medium: #d9d9d9;
+  --ion-color-dark: #000000;
+
+  --ion-background-color: #fff2f0;
+  --ion-text-color: #330000;
+  --ion-toolbar-background: #fff1f0;
+  --ion-toolbar-color: #990000;
+  --ion-item-background: #fff0f0;
+}
--- a/app/src/vite-env.d.ts
+++ b/app/src/vite-env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/app/tsconfig.json
+++ b/app/tsconfig.json
@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
--- a/app/tsconfig.node.json
+++ b/app/tsconfig.node.json
@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/app/vite.config.ts
+++ b/app/vite.config.ts
@ -0,0 +1,18 @@
+/// <reference types="vitest" />
+
+import legacy from '@vitejs/plugin-legacy'
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    react(),
+    legacy()
+  ],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './src/setupTests.ts',
+  }
+})