docs: add notice about upcoming test branch transition

Add a prominent notice to both the README and the web UI to inform users of an upcoming major change. The test branch will merge into main in the coming weeks, introducing a rebuilt app and a single combined container image. Users are advised to either migrate to the test branch's docker-compose or pin their current deployment to a specific image tag to avoid breaking changes.

The UI notice includes a link to the test branch details on GitHub.

Author: lklynet

README.md

@@ -10,6 +10,16 @@
 
 ---
 
+## Notice: Test branch transition
+
+We’re actively developing a new test branch with a rebuilt app and a single combined container image. It will merge into `main` in the coming weeks.
+
+Please start transitioning to the test-branch `docker-compose` or pin your current deployment to a specific image tag instead of `latest` to avoid breaking changes during the merge.
+
+Test branch details: https://github.com/lklynet/aurral/tree/test
+
+---
+
 ## What is Aurral?
 
 Aurral is a simple web application that allows users to search for artists using the MusicBrainz database and seamlessly add them to their Lidarr music library. Think of it as an Overseerr or Jellyseerr, but specifically focused on music artists and Lidarr integration.

frontend/src/components/Layout.jsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
-import { Search, Menu } from "lucide-react";
+import { Search, Menu, Info } from "lucide-react";
 import Sidebar from "./Sidebar";
 
 function Layout({ children, isHealthy, lidarrConfigured, lidarrStatus }) {
@@ -55,6 +55,25 @@ function Layout({ children, isHealthy, lidarrConfigured, lidarrStatus }) {
           </form>
         </header>
 
+        <div className="px-4 md:px-6 pt-4">
+          <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-3 rounded-2xl border border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-500/20 dark:bg-amber-900/20 dark:text-amber-200 px-4 py-3">
+            <div className="flex items-start gap-3">
+              <Info className="w-5 h-5 mt-0.5 text-amber-700 dark:text-amber-300" />
+              <div className="text-sm">
+                <span className="font-semibold">Upcoming transition:</span> The new test branch will merge into main in the coming weeks. Please migrate to its docker-compose or pin your current deployment to a specific image tag instead of latest.
+              </div>
+            </div>
+            <a
+              href="https://github.com/lklynet/aurral/tree/test"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-sm font-medium text-amber-800 hover:text-amber-900 dark:text-amber-200 dark:hover:text-amber-100 whitespace-nowrap"
+            >
+              View test branch
+            </a>
+          </div>
+        </div>
+
         <main className="flex-1 w-full max-w-[1600px] mx-auto p-4 md:p-8 lg:p-10">
           <div className="animate-fade-in">{children}</div>
         </main>