### Install Project Dependencies

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/client/README.md

Run this command to install all necessary project dependencies before starting development or building.

```bash
npm install
```

--------------------------------

### Install Frontend Dependencies

Source: https://github.com/giuseppe99barchetta/suggestarr/wiki/Installation

Navigates to the client directory and installs frontend dependencies using npm. Ensure you are in the project's root directory before running.

```bash
cd client
npm install
cd ..
```

--------------------------------

### Start SuggestArr Frontend Development Server

Source: https://github.com/giuseppe99barchetta/suggestarr/wiki/Installation

Navigates to the client directory and starts the frontend development server using npm. This command is typically run in parallel with the backend server.

```bash
cd client
npm run serve
```

--------------------------------

### Start SuggestArr Backend Server

Source: https://github.com/giuseppe99barchetta/suggestarr/wiki/Installation

Activates the Python virtual environment and starts the Flask development server for the SuggestArr backend. It binds to all network interfaces on port 5000.

```bash
source venv/bin/activate
python -m flask run --host=0.0.0.0 --port=5000
```

--------------------------------

### Valid but Empty Response Example

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/TMDB_API_ENDPOINTS.md

Example of a successful connection with no users found.

```json
{
  "status": "success",
  "message": "Seer connection successful but no users found",
  "data": {
    "users_count": 0,
    "server_url": "http://localhost:5055"
  }
}
```

--------------------------------

### Serve Frontend Development Server

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/CLAUDE.md

Starts the development server for the Vue.js frontend.

```bash
cd client && npm run serve
```

--------------------------------

### Reload systemd and Start SuggestArr Service

Source: https://github.com/giuseppe99barchetta/suggestarr/wiki/Installation

Commands to reload the systemd manager configuration, start the SuggestArr service, and enable it to start on boot.

```bash
sudo systemctl daemon-reload
sudo systemctl start suggestarr.service
sudo systemctl enable suggestarr.service
```

--------------------------------

### Set Up Python Virtual Environment

Source: https://github.com/giuseppe99barchetta/suggestarr/wiki/Installation

Creates and activates a Python virtual environment, then installs project dependencies from requirements.txt.

```bash
python3 -m venv venv
source venv/bin/activate
pip install -r requirements.txt
```

--------------------------------

### Run Development Server

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/client/README.md

Use this command to compile and hot-reload the project for development. It starts a local development server.

```bash
npm run serve
```

--------------------------------

### Run Local Flask Backend

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/CLAUDE.md

Starts the Flask-based backend API locally. Defaults to port 5000, can be overridden by setting SUGGESTARR_PORT.

```bash
cd api_service && python app.py
```

--------------------------------

### Run Docker Compose Container

Source: https://github.com/giuseppe99barchetta/suggestarr/wiki/Installation

Command to start the SuggestArr Docker container using Docker Compose. Access the web interface at http://localhost:5000 after it's running.

```bash
docker-compose up
```

--------------------------------

### Common Service Connection Test Example

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/TMDB_API_ENDPOINTS.md

A JavaScript function to test service connections using fetch. It handles success and error responses, logging outcomes to the console.

```javascript
async function testServiceConnection(service, config) {
  const endpoint = `/api/${service}/test`;

  const response = await fetch(endpoint, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(config)
  });

  const result = await response.json();
  if (result.status === 'success') {
    console.log(`${service} connection successful!`);
    return result;
  } else {
    console.error(`${service} connection failed:`, result.message);
    throw new Error(result.message);
  }
}

// Example usage:
try {
  await testServiceConnection('tmdb', { api_key: 'your_api_key' });
  await testServiceConnection('plex', {
    token: 'your_plex_token',
    api_url: 'http://localhost:32400'
  });
} catch (error) {
  console.error('Service test failed:', error);
}
```

--------------------------------

### Docker Compose for SuggestArr and Ollama

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/README.md

This Docker Compose configuration sets up SuggestArr and a local Ollama instance for AI model serving. Ensure Ollama is running and models are pulled before starting.

```yaml
services:
  suggestarr:
    image: ciuse99/suggestarr:latest
    container_name: SuggestArr
    restart: always
    ports:
      - "5000:5000"
    volumes:
      - ./config_files:/app/config/config_files

  ollama:
    image: ollama/ollama
    container_name: ollama
    restart: always
    ports:
      - "11434:11434"
    volumes:
      - ollama_data:/root/.ollama

volumes:
  ollama_data:
```

--------------------------------

### Invalid API Key Response Example

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/TMDB_API_ENDPOINTS.md

Illustrates the error response when an invalid TMDB API key is provided.

```json
{
  "status": "error",
  "message": "HTTP test failed: Invalid API key"
}
```

--------------------------------

### Invalid Server URL Response Example

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/TMDB_API_ENDPOINTS.md

Shows the error response for connection failures to the TMDB server.

```json
{
  "status": "error",
  "message": "HTTP test failed: Connection error: Name or service not known"
}
```

--------------------------------

### Pull Ollama Model via Docker Exec

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/README.md

After starting the Docker containers, use this command to pull a specific model (e.g., 'mistral') into the Ollama service.

```bash
docker exec -it ollama ollama pull mistral
```

--------------------------------

### GET /api/tmdb/genres/movie

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/TMDB_API_ENDPOINTS.md

Retrieves a list of movie genres from TMDB. Requires a valid TMDB API key.

```APIDOC
## GET /api/tmdb/genres/movie

### Description
Gets a list of movie genres from TMDB.

### Method
GET

### Endpoint
/api/tmdb/genres/movie

### Parameters
#### Query Parameters
- `api_key` (string) - Required - Your TMDB API key

### Response
#### Success Response (200)
- `status` (string) - Indicates the success of the operation.
- `genres` (array) - A list of genre objects, each containing an `id` and `name`.
  - `id` (integer) - The genre ID.
  - `name` (string) - The genre name.

#### Response Example
```json
{
  "status": "success",
  "genres": [
    {
      "id": 28,
      "name": "Action"
    },
    {
      "id": 12,
      "name": "Adventure"
    }
  ]
}
```
```

--------------------------------

### GET /api/tmdb/genres/tv

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/TMDB_API_ENDPOINTS.md

Retrieves a list of TV show genres from TMDB. Requires a valid TMDB API key.

```APIDOC
## GET /api/tmdb/genres/tv

### Description
Gets a list of TV show genres from TMDB.

### Method
GET

### Endpoint
/api/tmdb/genres/tv

### Parameters
#### Query Parameters
- `api_key` (string) - Required - Your TMDB API key

### Response
#### Success Response (200)
- `status` (string) - Indicates the success of the operation.
- `genres` (array) - A list of genre objects, each containing an `id` and `name`.
  - `id` (integer) - The genre ID.
  - `name` (string) - The genre name.

#### Response Example
```json
{
  "status": "success",
  "genres": [
    {
      "id": 10759,
      "name": "Action & Adventure"
    },
    {
      "id": 16,
      "name": "Animation"
    }
  ]
}
```
```

--------------------------------

### Get TV Show Genres API Endpoint

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/TMDB_API_ENDPOINTS.md

Retrieves a list of TV show genres from TMDB. Requires a valid TMDB API key.

```json
{
  "status": "success",
  "genres": [
    {
      "id": 10759,
      "name": "Action & Adventure"
    },
    {
      "id": 16,
      "name": "Animation"
    },
    // ... more genres
  ]
}
```

--------------------------------

### Get Movie Genres API Endpoint

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/TMDB_API_ENDPOINTS.md

Retrieves a list of movie genres from TMDB. Requires a valid TMDB API key.

```json
{
  "status": "success",
  "genres": [
    {
      "id": 28,
      "name": "Action"
    },
    {
      "id": 12,
      "name": "Adventure"
    },
    // ... more genres
  ]
}
```

--------------------------------

### Build for Production

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/client/README.md

Execute this command to compile and minify the project for production deployment. This creates optimized build artifacts.

```bash
npm run build
```

--------------------------------

### Build Frontend for Production

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/CLAUDE.md

Builds the Vue.js frontend for production deployment, skipping ESLint plugin.

```bash
cd client && npm run build --skip-plugins @vue/cli-plugin-eslint
```

--------------------------------

### Create SuggestArr systemd Service File

Source: https://github.com/giuseppe99barchetta/suggestarr/wiki/Installation

Creates a systemd service file for SuggestArr on Linux. This allows the application to run as a background service.

```bash
sudo nano /etc/systemd/system/suggestarr.service
```

--------------------------------

### Using Design Tokens

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/client/src/assets/styles/README.md

Demonstrates the correct way to apply design tokens for various style properties like background, padding, font size, border-radius, and box-shadow.

```css
/* Use design tokens */
.my-component {
  background: var(--surface-elevated);
  padding: var(--spacing-lg);
  font-size: var(--font-size-base);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
```

--------------------------------

### Clone SuggestArr Repository

Source: https://github.com/giuseppe99barchetta/suggestarr/wiki/Installation

Clones the SuggestArr project repository and navigates into the project directory. Replace <REPOSITORY_URL> and <PROJECT_DIRECTORY> with actual values.

```bash
git clone <REPOSITORY_URL>
cd <PROJECT_DIRECTORY>
```

--------------------------------

### Build Backend Docker Image

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/CLAUDE.md

Builds the development Docker image for the backend service.

```bash
docker build . -f ./docker/Dockerfile --target dev --tag suggestarr:nightly
```

--------------------------------

### Run Frontend Style Linting

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/CONTRIBUTING.md

Execute advisory linting for frontend styles to check for adherence to design token usage. This command is run from the client directory.

```bash
cd client && npm run lint:styles
```

--------------------------------

### SuggestArr systemd Service Configuration

Source: https://github.com/giuseppe99barchetta/suggestarr/wiki/Installation

Configuration content for the SuggestArr systemd service file. Customize User and ProjectDirectory placeholders.

```ini
[Unit]
Description=SuggestArr
After=network.target

[Service]
User=<YOUR_USER>
WorkingDirectory=<PROJECT_DIRECTORY>
ExecStart=<PROJECT_DIRECTORY>/venv/bin/python -m flask run --host=0.0.0.0 --port=5000
Environment="FLASK_APP=api_service/app.py"
Environment="FLASK_DEBUG=0"
Restart=always

[Install]
WantedBy=multi-user.target
```

--------------------------------

### Force Automation Tasks via API

Source: https://github.com/giuseppe99barchetta/suggestarr/wiki/FAQ

Manually trigger the automation process by sending a POST request to the SuggestArr API. This is an alternative to using the 'Run Now' button in the web interface.

```bash
curl -X POST http://localhost:5000/api/automation/force_run
```

--------------------------------

### Lint Frontend Code

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/CLAUDE.md

Runs ESLint to check the Vue.js frontend code for style and potential errors.

```bash
cd client && npm run lint
```

--------------------------------

### Check Docker Logs for SuggestArr

Source: https://github.com/giuseppe99barchetta/suggestarr/wiki/Configuration

Use this command to view the logs of the SuggestArr Docker container for monitoring and debugging.

```bash
docker logs SuggestArr
```

--------------------------------

### View Docker Container Logs

Source: https://github.com/giuseppe99barchetta/suggestarr/wiki/FAQ

Use this command to check the logs of a running SuggestArr Docker container. Replace '<container-name>' with the actual name of your container.

```bash
docker logs <container-name>
```

--------------------------------

### CSS Hardcoded vs. Tokenized Values

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/client/src/assets/styles/DESIGN_TOKENS_CHEATSHEET.md

Illustrates the contrast between using hardcoded CSS values and the recommended approach of using design tokens for consistency and maintainability.

```css
/* ❌ Hardcoded values */
color: #10b981;
padding: 1.35rem;
font-size: 0.95rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);

/* ✅ Use tokens */
color: var(--color-success);
padding: var(--spacing-lg);
font-size: var(--font-size-base);
box-shadow: var(--shadow-md);
```

--------------------------------

### Run Single Backend Test

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/CLAUDE.md

Executes a specific test function within a test class in the backend.

```bash
cd api_service && python -m pytest test/test_file.py::TestClass::test_function -v
```

--------------------------------

### Docker Compose Configuration for SuggestArr

Source: https://github.com/giuseppe99barchetta/suggestarr/wiki/Installation

Defines the Docker service for SuggestArr, specifying the image, container name, restart policy, port mapping, and volume for configuration files.

```yaml
services:
  suggestarr:
    image: ciuse99/SuggestArr:latest
    container_name: SuggestArr
    restart: always
    ports:
      - "5000:5000"
    volumes:
      - ./config_files:/app/config/config_files
```

--------------------------------

### Run Backend Tests

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/CLAUDE.md

Executes all backend tests using pytest.

```bash
cd api_service && python -m pytest
```

--------------------------------

### Lint and Fix Files

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/client/README.md

Run this command to lint the project files and automatically fix any linting issues found. This helps maintain code quality and consistency.

```bash
npm run lint
```

--------------------------------

### POST /api/jellyfin/test

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/TMDB_API_ENDPOINTS.md

Tests the Jellyfin server connection by sending an API token and URL in the request body. It validates the connection and returns a success or error message.

```APIDOC
## POST /api/jellyfin/test

### Description
Tests the Jellyfin server connection with provided API token and URL.

### Method
POST

### Endpoint
/api/jellyfin/test

### Parameters
#### Request Body
- **token** (string) - Required - The API token for Jellyfin authentication.
- **api_url** (string) - Required - The URL of the Jellyfin server.

### Request Example
```json
{
  "token": "your_jellyfin_token_here",
  "api_url": "http://localhost:8096"
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates the success of the operation.
- **message** (string) - A confirmation message for a successful connection.
- **data** (object) - Contains additional information about the connection, such as the count of libraries and the server URL.
  - **libraries_count** (integer) - The number of libraries found on the Jellyfin server.
  - **server_url** (string) - The URL of the Jellyfin server.

#### Response Example
```json
{
  "status": "success",
  "message": "Jellyfin connection successful!",
  "data": {
    "libraries_count": 3,
    "server_url": "http://localhost:8096"
  }
}
```

### Error Handling
- **400 Bad Request**: Missing token or URL, or connection failed.
- **500 Internal Server Error**: Internal error.
```

--------------------------------

### CSS Form Input Size Tokens

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/client/src/assets/styles/DESIGN_TOKENS_CHEATSHEET.md

Tokens for defining the height and padding for different form input sizes.

```css
/* Small (32px) */
height: var(--input-height-sm);
padding: 0 var(--input-padding-x-sm);

/* Medium (40px) - DEFAULT */
height: var(--input-height-md);
padding: 0 var(--input-padding-x-md);

/* Large (48px) */
height: var(--input-height-lg);
padding: 0 var(--input-padding-x-lg);
```

--------------------------------

### CSS Button Size Tokens

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/client/src/assets/styles/DESIGN_TOKENS_CHEATSHEET.md

Tokens for defining the height, padding, and font size for different button sizes.

```css
/* Small (32px) */
height: var(--btn-height-sm);
padding: 0 var(--btn-padding-x-sm);
font-size: var(--btn-font-size-sm);

/* Medium (40px) - DEFAULT */
height: var(--btn-height-md);
padding: 0 var(--btn-padding-x-md);
font-size: var(--btn-font-size-md);

/* Large (48px) */
height: var(--btn-height-lg);
padding: 0 var(--btn-padding-x-lg);
font-size: var(--btn-font-size-lg);
```

--------------------------------

### Plex API Test Success Response

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/TMDB_API_ENDPOINTS.md

A successful Plex connection returns a status of 'success' with library information.

```json
{
  "status": "success",
  "message": "Plex connection successful!",
  "data": {
    "libraries_count": 5,
    "server_url": "http://localhost:32400"
  }
}
```

--------------------------------

### POST /api/plex/test

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/TMDB_API_ENDPOINTS.md

Tests the Plex server connection by sending an API token and URL in the request body. It validates the connection and returns a success or error message.

```APIDOC
## POST /api/plex/test

### Description
Tests the Plex server connection with provided API token and URL.

### Method
POST

### Endpoint
/api/plex/test

### Parameters
#### Request Body
- **token** (string) - Required - The API token for Plex authentication.
- **api_url** (string) - Required - The URL of the Plex server.

### Request Example
```json
{
  "token": "your_plex_token_here",
  "api_url": "http://localhost:32400"
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates the success of the operation.
- **message** (string) - A confirmation message for a successful connection.
- **data** (object) - Contains additional information about the connection, such as the count of libraries and the server URL.
  - **libraries_count** (integer) - The number of libraries found on the Plex server.
  - **server_url** (string) - The URL of the Plex server.

#### Response Example
```json
{
  "status": "success",
  "message": "Plex connection successful!",
  "data": {
    "libraries_count": 5,
    "server_url": "http://localhost:32400"
  }
}
```

### Error Handling
- **400 Bad Request**: Missing token or URL, or connection failed.
- **500 Internal Server Error**: Internal error.
```

--------------------------------

### CSS Elevation (Shadow) Tokens

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/client/src/assets/styles/DESIGN_TOKENS_CHEATSHEET.md

Tokens for applying shadows to create depth and hierarchy, from subtle to floating effects.

```css
--shadow-sm         /* Subtle - Cards */
--shadow-md         /* Raised - Dropdowns */
--shadow-lg         /* Elevated - Modals */
--shadow-xl         /* Floating - Alerts */
--shadow-focus      /* Focus rings */
--shadow-glow       /* Primary emphasis */
```

--------------------------------

### Plex API Test Request Body

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/TMDB_API_ENDPOINTS.md

Provide your Plex API token and server URL to test the connection.

```json
{
  "token": "your_plex_token_here",
  "api_url": "http://localhost:32400"
}
```

--------------------------------

### Check SuggestArr Service Status

Source: https://github.com/giuseppe99barchetta/suggestarr/wiki/Installation

Command to check the current status of the SuggestArr systemd service. Useful for verifying if the service is running correctly.

```bash
sudo systemctl status suggestarr.service
```

--------------------------------

### CSS Modal Styling Tokens

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/client/src/assets/styles/DESIGN_TOKENS_CHEATSHEET.md

Tokens for styling modal backdrops and the modal content itself, including padding, border-radius, and shadow.

```css
/* Backdrop */
background: var(--modal-backdrop);
z-index: var(--z-modal-backdrop);

/* Modal */
background: var(--modal-background);
padding: var(--modal-padding);          /* 32px */
border-radius: var(--modal-border-radius); /* 12px */
box-shadow: var(--modal-shadow);
z-index: var(--z-modal);
```

--------------------------------

### CSS Card Styling with Tokens

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/client/src/assets/styles/DESIGN_TOKENS_CHEATSHEET.md

Applies design tokens to style a card component, defining its background, padding, border radius, border, and shadow.

```css
.card {
  background: var(--card-background);
  padding: var(--card-padding-md);
  border-radius: var(--card-border-radius);
  border: 1px solid var(--card-border-color);
  box-shadow: var(--shadow-sm);
}
```

--------------------------------

### CSS Input Styling with Tokens

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/client/src/assets/styles/DESIGN_TOKENS_CHEATSHEET.md

Styles an input field using design tokens for height, padding, font size, borders, and focus states.

```css
.input {
  height: var(--input-height-md);
  padding: 0 var(--input-padding-x-md);
  font-size: var(--input-font-size-md);
  border-radius: var(--input-border-radius);
  border: 1px solid var(--color-border-light);
  background: var(--surface-interactive);
  color: var(--color-text-primary);
}

.input:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus);
}
```

--------------------------------

### Pull Latest Docker Image

Source: https://github.com/giuseppe99barchetta/suggestarr/wiki/FAQ

Update SuggestArr to the latest version by pulling the most recent Docker image. This command fetches the latest image from the Docker registry.

```bash
docker pull ciuse99/SuggestArr
```

--------------------------------

### CSS Button Styling with Tokens

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/client/src/assets/styles/DESIGN_TOKENS_CHEATSHEET.md

Applies design tokens to style a button component, ensuring consistent height, padding, font size, and appearance.

```css
.btn {
  height: var(--btn-height-md);
  padding: 0 var(--btn-padding-x-md);
  font-size: var(--btn-font-size-md);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--btn-border-radius);
  background: var(--color-primary);
  color: white;
  transition: var(--transition-base);
}
```

--------------------------------

### CSS Success Message Styling with Tokens

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/client/src/assets/styles/DESIGN_TOKENS_CHEATSHEET.md

Styles a success message component using design tokens for background, text color, border, padding, and radius.

```css
.success {
  background: var(--color-success-alpha-10);
  color: var(--color-success);
  border: 1px solid var(--color-success);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
}
```

--------------------------------

### CSS Card Styling Tokens

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/client/src/assets/styles/DESIGN_TOKENS_CHEATSHEET.md

Tokens for styling standard cards, including background, padding, border-radius, border, and shadow.

```css
/* Standard card */
background: var(--card-background);
padding: var(--card-padding-md);        /* 24px */
border-radius: var(--card-border-radius); /* 12px */
border: 1px solid var(--card-border-color);
box-shadow: var(--shadow-sm);

/* Card header */
padding-bottom: var(--spacing-md);
border-bottom: 1px solid var(--color-border-light);
```

--------------------------------

### Form Input Styles

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/client/src/assets/styles/README.md

Styles for form inputs, including default appearance and focus states, leveraging design tokens for dimensions, colors, and borders.

```css
.form-input {
  height: var(--input-height-md);
  padding: 0 var(--input-padding-x-md);
  font-size: var(--input-font-size-md);
  background: var(--surface-interactive);
  border: 1px solid var(--color-border-light);
  border-radius: var(--input-border-radius);
  color: var(--color-text-primary);
}

.form-input:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus);
}
```

--------------------------------

### CSS Transition Tokens

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/client/src/assets/styles/DESIGN_TOKENS_CHEATSHEET.md

Defines CSS variables for different transition durations, suitable for micro-interactions, default animations, and larger movements.

```css
--transition-fast    /* 150ms - Micro-interactions */
--transition-base    /* 200ms - DEFAULT */
--transition-slow    /* 300ms - Large movements */
```

--------------------------------

### CSS Color Tokens - Text

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/client/src/assets/styles/DESIGN_TOKENS_CHEATSHEET.md

Tokens for controlling text color based on emphasis and context.

```css
--color-text-primary     /* Main content */
--color-text-secondary   /* Supporting text */
--color-text-tertiary    /* De-emphasized */
--color-text-muted       /* Disabled/subtle */
```

--------------------------------

### CSS Form Input State Styles

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/client/src/assets/styles/DESIGN_TOKENS_CHEATSHEET.md

Styles for different states of form inputs, including default, focus, and error.

```css
/* Default */
border: 1px solid var(--color-border-light);
background: var(--surface-interactive);

/* Focus */
border-color: var(--color-border-focus);
box-shadow: var(--shadow-focus);

/* Error */
border-color: var(--color-error);
box-shadow: var(--shadow-focus);
```

--------------------------------

### POST /api/seer/test

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/TMDB_API_ENDPOINTS.md

Tests the Seer API connection by sending an API key, URL, and an optional session token in the request body. It validates the connection and returns a success or error message.

```APIDOC
## POST /api/seer/test

### Description
Tests the Seer API connection with provided API key and URL.

### Method
POST

### Endpoint
/api/seer/test

### Parameters
#### Request Body
- **token** (string) - Required - The API token for Seer authentication.
- **api_url** (string) - Required - The URL of the Seer API.
- **session_token** (string) - Optional - A session token for enhanced authentication.

### Request Example
```json
{
  "token": "your_seer_token_here",
  "api_url": "http://localhost:5055",
  "session_token": "optional_session_token_here"
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates the success of the operation.
- **message** (string) - A confirmation message for a successful connection.
- **data** (object) - Contains additional information about the connection, such as user count, server URL, and HTTP status.
  - **users_count** (integer) - The number of users detected.
  - **server_url** (string) - The URL of the Seer API.
  - **http_status** (integer) - The HTTP status code of the test response.

#### Response Example
```json
{
  "status": "success",
  "message": "Seer connection successful!",
  "data": {
    "users_count": 4,
    "server_url": "http://localhost:5055",
    "http_status": 200
  }
}
```

### Error Handling
- **400 Bad Request**: Missing token or URL, invalid credentials, or connection failed.
- **500 Internal Server Error**: Internal error.

*Note: The Seer test performs a two-stage validation: first a direct HTTP test, then a client API test to ensure full functionality.*
```

--------------------------------

### CSS Color Tokens - Borders

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/client/src/assets/styles/DESIGN_TOKENS_CHEATSHEET.md

Tokens for border colors, including focus states.

```css
--color-border-light     /* #444444 */
--color-border-medium    /* #444444 */
--color-border-focus     /* Primary color */
```

--------------------------------

### Avoiding Hardcoded Values

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/client/src/assets/styles/README.md

Illustrates the incorrect practice of using hardcoded values for styling properties, which should be replaced by design tokens.

```css
/* Hardcoded values */
.my-component {
  background: rgba(0, 0, 0, 0.8);
  padding: 1.5rem;
  font-size: 16px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
```

--------------------------------

### Jellyfin API Test Request Body

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/TMDB_API_ENDPOINTS.md

Submit your Jellyfin API token and server URL to test the connection.

```json
{
  "token": "your_jellyfin_token_here",
  "api_url": "http://localhost:8096"
}
```

--------------------------------

### Seer API Test Success Response

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/TMDB_API_ENDPOINTS.md

A successful Seer connection returns a status of 'success' with user and server details.

```json
{
  "status": "success",
  "message": "Seer connection successful!",
  "data": {
    "users_count": 4,
    "server_url": "http://localhost:5055",
    "http_status": 200
  }
}
```

--------------------------------

### Jellyfin API Test Success Response

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/TMDB_API_ENDPOINTS.md

A successful Jellyfin connection returns a status of 'success' with library information.

```json
{
  "status": "success",
  "message": "Jellyfin connection successful!",
  "data": {
    "libraries_count": 3,
    "server_url": "http://localhost:8096"
  }
}
```

--------------------------------

### POST /api/tmdb/test

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/TMDB_API_ENDPOINTS.md

Tests the TMDB API connection by sending an API key in the request body. It validates the connection and returns a success or error message.

```APIDOC
## POST /api/tmdb/test

### Description
Tests the TMDB API connection with a provided API key.

### Method
POST

### Endpoint
/api/tmdb/test

### Parameters
#### Request Body
- **api_key** (string) - Required - The API key for TMDB authentication.

### Request Example
```json
{
  "api_key": "your_tmdb_api_key_here"
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates the success of the operation.
- **message** (string) - A confirmation message for a successful connection.
- **data** (object) - Contains additional information about the connection, such as total results and pages.
  - **total_results** (integer) - The total number of results found.
  - **total_pages** (integer) - The total number of pages available.

#### Response Example
```json
{
  "status": "success",
  "message": "TMDB API connection successful!",
  "data": {
    "total_results": 20,
    "total_pages": 1
  }
}
```

### Error Handling
- **400 Bad Request**: Missing or invalid API key.
- **401 Unauthorized**: Invalid TMDB API key.
- **500 Internal Server Error**: Connection error or timeout.
```

--------------------------------

### Card Component Styles

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/client/src/assets/styles/README.md

Defines styles for a card component, including its header, with hover effects and borders, using design tokens for spacing, colors, and shadows.

```css
.card {
  background: var(--card-background);
  padding: var(--card-padding-md);
  border-radius: var(--card-border-radius);
  border: 1px solid var(--card-border-color);
  box-shadow: var(--shadow-sm);
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  transition: var(--transition-base);
}

.card-header {
  padding-bottom: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--color-border-light);
}
```

--------------------------------

### CSS Spacing Tokens

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/client/src/assets/styles/DESIGN_TOKENS_CHEATSHEET.md

Tokens for consistent spacing and gaps between elements. Includes common use cases.

```css
--spacing-2xs     /* 2px  - Fine details */
--spacing-xs      /* 4px  - Minimal */
--spacing-sm      /* 8px  - Tight */
--spacing-md      /* 16px - Standard */
--spacing-lg      /* 24px - Comfortable (DEFAULT card) */
--spacing-xl      /* 32px - Large */
--spacing-2xl     /* 48px - Extra large */
--spacing-3xl     /* 64px - Maximum */
```

--------------------------------

### CSS Typography Tokens - Sizes

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/client/src/assets/styles/DESIGN_TOKENS_CHEATSHEET.md

Tokens for font sizes, ranging from captions to display headings.

```css
--font-size-xs      /* 12px - Captions */
--font-size-sm      /* 14px - Small labels */
--font-size-base    /* 16px - Body (DEFAULT) */
--font-size-lg      /* 18px - Emphasized */
--font-size-xl      /* 20px - h4 */
--font-size-2xl     /* 24px - h3 */
--font-size-3xl     /* 30px - h2 */
--font-size-4xl     /* 36px - h1 */
--font-size-5xl     /* 48px - Display */
```

--------------------------------

### Alert Message Styles

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/client/src/assets/styles/README.md

Provides styles for success and error alert messages, using design tokens for background, text color, borders, padding, and radius.

```css
.alert-success {
  background: var(--color-success-alpha-10);
  color: var(--color-success);
  border: 1px solid var(--color-success);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
}

.alert-error {
  background: var(--color-error-alpha-10);
  color: var(--color-error);
  border: 1px solid var(--color-error);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
}
```

--------------------------------

### CSS Typography Tokens - Weights

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/client/src/assets/styles/DESIGN_TOKENS_CHEATSHEET.md

Tokens for font weights, suitable for body text, labels, and headings.

```css
--font-weight-normal      /* 400 - Body */
--font-weight-medium      /* 500 - Labels */
--font-weight-semibold    /* 600 - Headings */
--font-weight-bold        /* 700 - Strong */
```

--------------------------------

### CSS Z-Index Scale Tokens

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/client/src/assets/styles/DESIGN_TOKENS_CHEATSHEET.md

Tokens defining the z-index layering for various UI elements like dropdowns, modals, and tooltips.

```css
--z-dropdown: 1000
--z-sticky: 1020
--z-fixed: 1030
--z-modal-backdrop: 1040
--z-modal: 1050
--z-popover: 1060
--z-tooltip: 1070
```

--------------------------------

### Primary and Success Button Styles

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/client/src/assets/styles/README.md

Defines CSS classes for primary and large success buttons, utilizing design tokens for size, padding, font, and color.

```css
/* Primary button (default size) */
.btn-primary {
  height: var(--btn-height-md);
  padding: 0 var(--btn-padding-x-md);
  font-size: var(--btn-font-size-md);
  font-weight: var(--font-weight-semibold);
  background: var(--color-primary);
  color: white;
  border-radius: var(--btn-border-radius);
  transition: var(--transition-base);
}

/* Success button (large) */
.btn-success-lg {
  height: var(--btn-height-lg);
  padding: 0 var(--btn-padding-x-lg);
  font-size: var(--btn-font-size-lg);
  background: var(--color-success);
  color: white;
  border-radius: var(--btn-border-radius);
}
```

--------------------------------

### CSS Button Border Radius Token

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/client/src/assets/styles/DESIGN_TOKENS_CHEATSHEET.md

Token for applying a consistent border radius to buttons.

```css
border-radius: var(--btn-border-radius); /* 8px */
```

--------------------------------

### Seer API Test Request Body

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/TMDB_API_ENDPOINTS.md

Provide your Seer API token, URL, and an optional session token to test the connection.

```json
{
  "token": "your_seer_token_here",
  "api_url": "http://localhost:5055",
  "session_token": "optional_session_token_here"
}
```

--------------------------------

### CSS Color Tokens - Alpha Overlays

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/client/src/assets/styles/DESIGN_TOKENS_CHEATSHEET.md

Tokens for semi-transparent color overlays, often used for alerts or notifications.

```css
--color-success-alpha-10    /* 10% opacity */
--color-success-alpha-20    /* 20% opacity */
--color-error-alpha-10      /* 10% opacity */
--color-warning-alpha-10    /* 10% opacity */
```

--------------------------------

### CSS Color Tokens - Semantic

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/client/src/assets/styles/DESIGN_TOKENS_CHEATSHEET.md

Semantic color tokens for conveying status or primary branding.

```css
--color-success          /* Green: #10b981 */
--color-warning          /* Orange: #f59e0b */
--color-error            /* Red: #ef4444 */
--color-info             /* Cyan: #06b6d4 */
--color-primary          /* Gray: #636363 */
```

--------------------------------

### CSS Color Tokens - Surfaces

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/client/src/assets/styles/DESIGN_TOKENS_CHEATSHEET.md

Use these tokens for background colors of different UI elements like pages, cards, and modals.

```css
--surface-base           /* Page background */
--surface-raised         /* Cards, panels */
--surface-elevated       /* Modals, dialogs */
--surface-overlay        /* Dropdowns, tooltips */
--surface-interactive    /* Hover states */
--surface-hover          /* Active hover states */
```

--------------------------------

### TMDB API Test Request Body

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/TMDB_API_ENDPOINTS.md

Send a JSON object containing your TMDB API key to test the connection.

```json
{
  "api_key": "your_tmdb_api_key_here"
}
```

--------------------------------

### CSS Border Radius Tokens

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/client/src/assets/styles/DESIGN_TOKENS_CHEATSHEET.md

Tokens for controlling the roundness of corners on elements like badges, inputs, and cards.

```css
--radius-sm      /* 6px  - Badges */
--radius-md      /* 8px  - Inputs, buttons */
--radius-lg      /* 12px - Cards (DEFAULT) */
--radius-xl      /* 16px - Large containers */
--radius-full    /* 9999px - Pills, circles */
```

--------------------------------

### TMDB API Test Success Response

Source: https://github.com/giuseppe99barchetta/suggestarr/blob/main/TMDB_API_ENDPOINTS.md

A successful TMDB API connection returns a status of 'success' with connection details.

```json
{
  "status": "success",
  "message": "TMDB API connection successful!",
  "data": {
    "total_results": 20,
    "total_pages": 1
  }
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.