TASK.md — Fix: App Info Page Bugs

Read CLAUDE.md first for project context, workspace layout, and build instructions.

Problems

Two bugs on the /apps/romm info page:

Bug 1: Logo SVG renders at native size (fills entire viewport)

The .app-info-logo CSS sets width: 80px; height: 80px but the SVG logo image ignores these constraints and renders at its intrinsic size (hundreds of pixels wide/tall), pushing all content off-screen.

Root cause: SVG images inside <img> tags can ignore width/height CSS if the SVG file itself has explicit width/height attributes or no viewBox. The object-fit: contain only works when the container actually constrains the image.

Fix: Make the logo constraint bulletproof. Update the .app-info-logo CSS in templates.go:

.app-info-logo {
    width: 80px;
    height: 80px;
    min-width: 80px;
    min-height: 80px;
    max-width: 80px;
    max-height: 80px;
    border-radius: 12px;
    object-fit: contain;
    background: var(--bg-secondary);
    padding: 10px;
    flex-shrink: 0;
    overflow: hidden;
}

The key additions are max-width, max-height, and overflow: hidden which will force the image to stay within bounds regardless of the SVG's intrinsic dimensions.

Bug 2: App info sections not rendering (use cases, first steps, optional config all missing)

The hero section renders (logo + badges) but the app_info content (tagline, use cases, first steps, prerequisites, default creds, docs link) and optional_config (metadata provider fields) are completely absent. The <p class="app-info-tagline"> is empty in the DOM.

This means HasAppInfo() returns false and HasOptionalConfig() returns false, which means the .felhom.yml file on the demo node does NOT contain the new app_info and optional_config sections.

Diagnosis steps (run these first):

# 1. Check if the stacks dir has the updated .felhom.yml
ssh kisfenyo@192.168.0.162 "cat /opt/docker/stacks/romm/.felhom.yml"

If the output does NOT contain app_info: and optional_config:, the catalog sync hasn't picked up the changes. Check:

# 2. Check if app-catalog repo was actually updated
cd /e/git/app-catalog-felhom.eu
git log --oneline -3
cat templates/romm/.felhom.yml | grep -c "app_info"

If the local repo doesn't have app_info in the romm .felhom.yml, the previous session didn't update the app-catalog repo. You need to:

Update E:\git\app-catalog-felhom.eu\templates\romm\.felhom.yml with the full content (see "RoMM .felhom.yml content" section below)
Update E:\git\app-catalog-felhom.eu\templates\romm\docker-compose.yml — add the missing ScreenScraper + MobyGames env vars (see "RoMM docker-compose.yml changes" section below)
Commit and push the app-catalog repo
Trigger a catalog sync on the demo node (or wait 15 minutes)

If the local repo DOES have app_info but the demo node doesn't, force a sync:

# Trigger sync via API (need to login first to get session cookie)
# Or use the dashboard "Sablonok frissítése" button

After the catalog sync, verify the fix:

ssh kisfenyo@192.168.0.162 "grep -c 'app_info' /opt/docker/stacks/romm/.felhom.yml"
# Should return 1 (meaning the app_info section exists)

ssh kisfenyo@192.168.0.162 "grep -c 'optional_config' /opt/docker/stacks/romm/.felhom.yml"
# Should return 1

Then reload /apps/romm in the browser — the info cards and optional config form should appear.

RoMM .felhom.yml content

Replace templates/romm/.felhom.yml in the app-catalog-felhom.eu repo entirely with:

# =============================================================================
# .felhom.yml — App metadata for felhom-controller
# =============================================================================

# --- Display info (shown on dashboard) ---
display_name: "RomM"
description: "Retró játékgyűjtemény kezelő"
category: "media"
subdomain: "arcade"
slug: "romm"

# --- Resource hints (displayed on deploy screen) ---
resources:
  mem_request: "300M"
  mem_limit: "1024M"
  pi_compatible: false
  needs_hdd: true

# --- Deploy fields (first deployment only) ---
deploy_fields:
  - env_var: DOMAIN
    label: "Domain"
    type: domain
    description: "A szerver domain neve"
    locked_after_deploy: true

  - env_var: DB_PASSWORD
    label: "Adatbázis jelszó"
    type: secret
    generate: "password:24"
    locked_after_deploy: true

  - env_var: MYSQL_ROOT_PASSWORD
    label: "MariaDB root jelszó"
    type: secret
    generate: "password:24"
    locked_after_deploy: true

  - env_var: ROMM_AUTH_SECRET_KEY
    label: "Hitelesítési titkosítási kulcs"
    type: secret
    generate: "hex:32"
    locked_after_deploy: true

  - env_var: HDD_PATH
    label: "Adattárolási útvonal"
    type: path
    required: true
    placeholder: "/mnt/hdd_1"
    description: "A külső merevlemez elérési útja, ahol a ROM-ok és borítóképek tárolódnak"
    locked_after_deploy: true

# --- App info (info page content) ---
app_info:
  tagline: "Retró játékgyűjtemény kezelő, böngésző és lejátszó"
  default_creds: "admin / admin"
  docs_url: "https://github.com/rommapp/romm/wiki"

  use_cases:
    - "Retró játékgyűjtemény rendszerezése és böngészése webes felületen"
    - "Játékok metaadatainak automatikus letöltése — borítók, leírások, értékelések"
    - "Platformonkénti szűrés és keresés a teljes gyűjteményben"
    - "ROM fájlok webes feltöltése és letöltése"
    - "Többfelhasználós hozzáférés a háztartás tagjai számára"

  first_steps:
    - "Nyisd meg az arcade.DOMAIN címet a böngészőben"
    - "Jelentkezz be az alapértelmezett admin / admin fiókkal"
    - "Változtasd meg azonnal a jelszót a Settings menüben"
    - "Töltsd fel a ROM fájlokat a library mappába (platform/játéknév struktúrával)"
    - "Indíts egy Scan-t a bal oldali menüben a ROM-ok beolvasásához"
    - "Opcionális: állíts be metaadat-szolgáltatókat a borítóképek és leírások automatikus letöltéséhez (lásd lent)"

  prerequisites:
    - "Külső HDD szükséges a ROM fájlok és borítóképek tárolásához"
    - "Legalább 1 GB szabad RAM ajánlott (MariaDB + Redis + RomM)"
    - "ROM fájlok platform mappákba rendezve (pl. library/gba/, library/snes/)"

# --- Optional config (configurable before or after deployment) ---
optional_config:
  - group: "Metaadat-szolgáltatók"
    description: "Játékok borítóinak, leírásainak és értékeléseinek automatikus letöltéséhez. Legalább az IGDB beállítása ajánlott. Mindegyik ingyenesen használható regisztráció után."
    fields:
      - env_var: IGDB_CLIENT_ID
        label: "IGDB Client ID"
        type: text
        help_url: "https://api-docs.igdb.com/#getting-started"
        help_text: "1) Regisztrálj / jelentkezz be a Twitch fejlesztői portálon (dev.twitch.tv). 2) Hozz létre egy új alkalmazást (bármilyen névvel). 3) Másold be a Client ID-t."

      - env_var: IGDB_CLIENT_SECRET
        label: "IGDB Client Secret"
        type: secret_input
        help_text: "A Twitch alkalmazásod Client Secret-je (a „New Secret" gombbal generálhatod)."

      - env_var: STEAMGRIDDB_API_KEY
        label: "SteamGridDB API Key"
        type: text
        help_url: "https://www.steamgriddb.com/profile/preferences/api"
        help_text: "Regisztrálj a SteamGridDB oldalon, majd a Preferences → API fül alatt kattints a „Generate API key" gombra."

      - env_var: SCREENSCRAPER_USER
        label: "ScreenScraper felhasználónév"
        type: text
        help_url: "https://www.screenscraper.fr/"
        help_text: "Regisztrálj a screenscraper.fr oldalon. A felhasználóneved lesz az API felhasználónév."

      - env_var: SCREENSCRAPER_PASSWORD
        label: "ScreenScraper jelszó"
        type: secret_input
        help_text: "A screenscraper.fr fiókod jelszava."

      - env_var: MOBYGAMES_API_KEY
        label: "MobyGames API Key"
        type: text
        help_url: "https://www.mobygames.com/info/api/"
        help_text: "Regisztrálj a MobyGames oldalon, majd az API oldalon igényelj kulcsot. Részletes játékinformációkat és krediteket biztosít."

RoMM docker-compose.yml changes

In E:\git\app-catalog-felhom.eu\templates\romm\docker-compose.yml, in the romm service's environment: section, after the existing STEAMGRIDDB_API_KEY line, add these three lines:

      - SCREENSCRAPER_USER=${SCREENSCRAPER_USER:-}
      - SCREENSCRAPER_PASSWORD=${SCREENSCRAPER_PASSWORD:-}
      - MOBYGAMES_API_KEY=${MOBYGAMES_API_KEY:-}

Implementation order

Diagnose Bug 2 first — run the SSH commands above to check if .felhom.yml on the node has the app_info section. This tells us whether the catalog update was missed or sync failed.
Fix Bug 1 — update .app-info-logo CSS in controller/internal/web/templates.go
Fix Bug 2 — if the app-catalog wasn't updated: a. Update templates/romm/.felhom.yml in E:\git\app-catalog-felhom.eu\ b. Update templates/romm/docker-compose.yml in E:\git\app-catalog-felhom.eu\ c. Commit + push the app-catalog repo:
```
cd /e/git/app-catalog-felhom.eu
git add -A && git commit -m "romm: add app_info + optional_config metadata, add ScreenScraper + MobyGames env vars" && git push
```
Build + deploy the controller with the CSS fix (follow CLAUDE.md build workflow)
Trigger catalog sync — either wait 15m or use the dashboard "Sablonok frissítése" button
Verify — reload /apps/romm and confirm:
- Logo is 80x80, not filling the screen
- Tagline text visible: "Retró játékgyűjtemény kezelő, böngésző és lejátszó"
- "Mire használható?" card with 5 use cases
- "Első lépések" card with 6 steps
- "Előfeltételek" card with 3 items
- "Alapértelmezett belépés" card showing "admin / admin"
- "Dokumentáció" card with link to RomM wiki
- "Opcionális beállítások" section with 6 metadata provider fields
- "Mentés" button on optional config form
Update CONTEXT.md with the fixes applied

10 KiB Raw Blame History