Merge branch 'feat/public-migration' into main

Author: iamneur0

Dockerfile

@@ -51,7 +51,10 @@ RUN apk add --no-cache curl openssl3
 
 # Set environment variables for Prisma
 ENV PRISMA_CLI_BINARY_TARGETS="linux-musl-openssl-3.0.x,linux-musl-arm64-openssl-3.0.x"
-ENV DATABASE_URL="file:/app/data/sqlite.db"
+
+# Allow building instance-specific images (private/public) and set default instance
+ARG INSTANCE=public
+ENV INSTANCE=$INSTANCE
 
 # Copy built application
 COPY --from=builder --chown=appuser:nodejs /app/package*.json ./

client/src/app/globals.css

@@ -3,18 +3,15 @@
 @tailwind utilities;
 
 /* Prevent theme flash on page load - set default background */
-html {
-  background-color: #000000; /* safe default for dark/mono to avoid white flash */
+html, body, #__next, :root {
+  background-color: transparent; /* allow theme to control actual color */
   color-scheme: light; /* default */
+  min-height: 100%;
 }
 
 /* Match browser chrome/overscroll color to theme by default */
-@media (prefers-color-scheme: light) {
-  html { background-color: #f9fafb; }
-}
-@media (prefers-color-scheme: dark) {
-  html { background-color: #111827; color-scheme: dark; }
-}
+@media (prefers-color-scheme: light) { html { background-color: #f9fafb; } }
+@media (prefers-color-scheme: dark) { html { background-color: #111827; color-scheme: dark; } }
 
 /* Themed scrollbars (WebKit + Firefox) */
 /* Base (light) */
@@ -39,7 +36,8 @@ html {
 
 /* Dark */
 .dark html, .modern-dark html, .mono html { scrollbar-color: #0f172a transparent; }
-.dark html, .modern-dark html, .mono html { color-scheme: dark; }
+  .dark html, .modern-dark html, .mono html { color-scheme: dark; }
+  .mono html { background-color: #000000; }
 .dark *::-webkit-scrollbar-track,
 .modern-dark *::-webkit-scrollbar-track,
 .mono *::-webkit-scrollbar-track { background: transparent; }
@@ -98,8 +96,20 @@ body.theme-loaded {
   .light html, .light body {
     @apply bg-gray-50;
   }
-  .dark html, .dark body {
-    @apply bg-gray-900;
+  .dark html, .dark body { @apply bg-gray-900; }
+  .light html, .light body { @apply bg-gray-50; }
+  .dark html, .dark body { @apply bg-gray-900; }
+  .mono html, .mono body { @apply bg-black; }
+  .light html, .light body, .dark html, .dark body, .mono html, .mono body { min-height: 100%; }
+
+  /* Force overscroll/out-of-bounds to match active theme */
+  .light html, .light body, .light :root, .light #__next { background-color: #f9fafb !important; }
+  .dark html, .dark body, .dark :root, .dark #__next { background-color: #111827 !important; }
+  .mono html, .mono body, .mono :root, .mono #__next { background-color: #000000 !important; }
+
+  /* Ensure the viewport/out-of-bounds rubber-band area inherits theme color */
+  html, body {
+    background-color: inherit;
   }
 
   /* Override body background for modern themes */
@@ -174,8 +184,14 @@ body.theme-loaded {
 
   .mono .card,
   .mono .bg-white,
-  .mono .bg-gray-50,
-  .mono .bg-gray-800 {
+  .mono .bg-gray-50 {
+    @apply bg-black border border-white/20 rounded-lg shadow-[inset_0_1px_0_rgba(255,255,255,0.03),0_8px_30px_rgba(0,0,0,0.6)];
+  }
+
+  /* Override gray-800 only for cards and containers, not for color indicators */
+  .mono .card.bg-gray-800,
+  .mono .bg-white.bg-gray-800,
+  .mono .bg-gray-50.bg-gray-800 {
     @apply bg-black border border-white/20 rounded-lg shadow-[inset_0_1px_0_rgba(255,255,255,0.03),0_8px_30px_rgba(0,0,0,0.6)];
   }
 
@@ -242,18 +258,31 @@ body.theme-loaded {
   .mono .from-*,
   .mono .to-* { /* no-op to avoid gradients */ }
 
-  .mono .bg-blue-600,
-  .mono .bg-red-600,
-  .mono .bg-green-600,
-  .mono .bg-purple-600,
-  .mono .bg-blue-700,
-  .mono .bg-red-700,
-  .mono .bg-green-700,
-  .mono .bg-purple-700,
-  .mono .bg-blue-800,
-  .mono .bg-red-800,
-  .mono .bg-green-800,
-  .mono .bg-purple-800 {
+  /* Override colored backgrounds only for UI elements, not for group color indicators */
+  .mono .card .bg-blue-600,
+  .mono .card .bg-red-600,
+  .mono .card .bg-green-600,
+  .mono .card .bg-purple-600,
+  .mono .card .bg-blue-700,
+  .mono .card .bg-red-700,
+  .mono .card .bg-green-700,
+  .mono .card .bg-purple-700,
+  .mono .card .bg-blue-800,
+  .mono .card .bg-red-800,
+  .mono .card .bg-green-800,
+  .mono .card .bg-purple-800,
+  .mono .bg-white .bg-blue-600,
+  .mono .bg-white .bg-red-600,
+  .mono .bg-white .bg-green-600,
+  .mono .bg-white .bg-purple-600,
+  .mono .bg-white .bg-blue-700,
+  .mono .bg-white .bg-red-700,
+  .mono .bg-white .bg-green-700,
+  .mono .bg-white .bg-purple-700,
+  .mono .bg-white .bg-blue-800,
+  .mono .bg-white .bg-red-800,
+  .mono .bg-white .bg-green-800,
+  .mono .bg-white .bg-purple-800 {
     @apply bg-black;
   }
 
@@ -499,7 +528,8 @@ body.theme-loaded {
     background-color: #1f1f1f !important;
     border: 1px solid rgba(255, 255, 255, 0.2) !important;
   }
-  .mono [class*="inline-flex"][class*="h-5"][class*="w-9"][class*="rounded-full"][class*="bg-"] {
+  /* Override toggle switches only, not group color indicators */
+  .mono [class*="inline-flex"][class*="h-5"][class*="w-9"][class*="rounded-full"][class*="bg-"]:not([class*="w-10"][class*="h-10"]) {
     background-color: #1f1f1f !important;
     border: 1px solid rgba(255, 255, 255, 0.2) !important;
   }
@@ -509,7 +539,8 @@ body.theme-loaded {
     background-color: #1f1f1f !important;
     border: 1px solid rgba(255, 255, 255, 0.2) !important;
   }
-  .mono [class*="inline-flex"][class*="h-6"][class*="w-11"][class*="rounded-full"][class*="bg-"] {
+  /* Override toggle switches only, not group color indicators */
+  .mono [class*="inline-flex"][class*="h-6"][class*="w-11"][class*="rounded-full"][class*="bg-"]:not([class*="w-10"][class*="h-10"]) {
     background-color: #1f1f1f !important;
     border: 1px solid rgba(255, 255, 255, 0.2) !important;
   }
@@ -652,6 +683,15 @@ body.theme-loaded {
 }
 
 @layer components {
+  /* When a modal overlay is present, dim all fixed headers/buttons except the modal */
+  .modal-open .fixed,
+  .modal-open [class*="z-"] {
+    filter: brightness(0.8);
+  }
+  .modal-open .modal-root,
+  .modal-open .modal-root * {
+    filter: none !important;
+  }
   .btn {
     @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
   }

client/src/app/layout.tsx

@@ -32,6 +32,30 @@ export default function RootLayout({
         <meta name="application-name" content="Syncio" />
         <meta name="apple-mobile-web-app-title" content="Syncio" />
         <meta name="description" content="Syncio - Stremio Group Manager" />
+        {/* Single theme-color; ThemeProvider updates it dynamically */}
+        <meta name="theme-color" content="#111827" />
+        {/* Pre-init theme to avoid flash and fix overscroll background before paint */}
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function(){
+                try {
+                  var d = document.documentElement;
+                  var saved = localStorage.getItem('theme');
+                  var isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+                  var theme = saved || (isDark ? 'dark' : 'light');
+                  if (theme === 'modern' || theme === 'modern-dark') theme = 'dark';
+                  d.classList.remove('light','dark','modern','modern-dark','mono');
+                  d.classList.add(theme);
+                  var tag = document.querySelector('meta[name="theme-color"]');
+                  if (!tag) { tag = document.createElement('meta'); tag.setAttribute('name','theme-color'); document.head.appendChild(tag); }
+                  var colors = { light: '#f9fafb', dark: '#111827', mono: '#000000', 'modern': '#f9fafb', 'modern-dark': '#111827' };
+                  tag.setAttribute('content', colors[theme] || '#111827');
+                } catch(e){}
+              })();
+            `
+          }}
+        />
         <link rel="manifest" href="/site.webmanifest" />
         <link rel="icon" href="/favicon.ico" />
         <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

client/src/components/auth/UserMenuButton.tsx

@@ -123,7 +123,7 @@ export default function UserMenuButton({ className = '' }: Props) {
   }`
 
   return (
-    <div className="relative z-[300]" ref={wrapperRef}>
+    <div className="relative z-[10]" ref={wrapperRef}>
       <button className={btnClasses} onClick={() => setShowMenu((s) => !s)} title="Account">
         <UserIcon size={18} />
       </button>

client/src/components/common/SyncBadge.tsx

@@ -45,7 +45,7 @@ export default function SyncBadge({
       case 'connect':
         return {
           text: 'Connect Stremio',
-          dotColor: 'bg-stremio-purple',
+          dotColor: 'bg-purple-200',
           bgColor: 'bg-stremio-purple text-white'
         }
       case 'syncing':

client/src/components/pages/AddonsPage.tsx

@@ -450,6 +450,35 @@ export default function AddonsPage() {
     const theme = isMono ? 'mono' : isModern ? 'modern' : isModernDark ? 'modern-dark' : isDark ? 'dark' : 'light'
     return getColorBgClass(colorIndex, theme)
   }
+
+  // Helper function to convert Tailwind classes to actual color values
+  const getColorValue = (tailwindClass: string): string => {
+    const colorMap: Record<string, string> = {
+      'bg-black': '#000000',
+      'bg-gray-800': '#1f2937',
+      'bg-gray-600': '#4b5563',
+      'bg-gray-400': '#9ca3af',
+      'bg-gray-300': '#d1d5db',
+      'bg-blue-500': '#3b82f6',
+      'bg-green-500': '#10b981',
+      'bg-purple-500': '#8b5cf6',
+      'bg-orange-500': '#f97316',
+      'bg-red-500': '#ef4444',
+      // Add gradient classes for modern themes
+      'bg-gradient-to-br from-blue-500 to-blue-600': '#3b82f6',
+      'bg-gradient-to-br from-green-500 to-green-600': '#10b981',
+      'bg-gradient-to-br from-purple-500 to-purple-600': '#8b5cf6',
+      'bg-gradient-to-br from-orange-500 to-orange-600': '#f97316',
+      'bg-gradient-to-br from-red-500 to-red-600': '#ef4444',
+      'bg-gradient-to-br from-blue-600 to-blue-700': '#2563eb',
+      'bg-gradient-to-br from-green-600 to-green-700': '#059669',
+      'bg-gradient-to-br from-purple-600 to-purple-700': '#7c3aed',
+      'bg-gradient-to-br from-orange-600 to-orange-700': '#ea580c',
+      'bg-gradient-to-br from-red-600 to-red-700': '#dc2626'
+    }
+    return colorMap[tailwindClass] || '#000000'
+  }
+
   const [mounted, setMounted] = useState(false)
   const [hasLoadedData, setHasLoadedData] = useState(false)
   useEffect(() => { setMounted(true) }, [])
@@ -556,10 +585,8 @@ export default function AddonsPage() {
     return base.filter((addon: any) => {
       const name = String(addon.name || '')
       const description = String(addon.description || '')
-      const tags = Array.isArray(addon.tags) ? addon.tags.join(' ') : String(addon.tags || '')
       const matchesSearch = name.toLowerCase().includes(debouncedSearchTerm.toLowerCase()) ||
-                           description.toLowerCase().includes(debouncedSearchTerm.toLowerCase()) ||
-                           tags.toLowerCase().includes(debouncedSearchTerm.toLowerCase())
+                           description.toLowerCase().includes(debouncedSearchTerm.toLowerCase())
       return matchesSearch
     })
   }, [addons, debouncedSearchTerm])
@@ -1335,7 +1362,7 @@ export default function AddonsPage() {
                   onClick={() => handleEditAddon(addon)}
                 >
                   <div className="flex items-center justify-between gap-3">
-                    <div className="flex items-center flex-1 min-w-0">
+                    <div className="flex items-center flex-1 min-w-0 max-w-[calc(100%-200px)]">
                       <div className={`w-10 h-10 rounded-lg flex items-center justify-center mr-3 flex-shrink-0 overflow-hidden ${
                         isMono ? 'border border-white/20' : ''
                       }`}>
@@ -1390,7 +1417,7 @@ export default function AddonsPage() {
                           </div>
                         </div>
                         {addon.description && (
-                          <p className={`hidden sm:block text-sm truncate ${
+                          <p className={`hidden sm:block text-sm truncate max-w-[250px] lg:max-w-[300px] ${
                             isModern 
                               ? 'text-purple-600' 
                               : isModernDark
@@ -1638,10 +1665,10 @@ export default function AddonsPage() {
                               : `bg-gray-100 text-gray-700 border-gray-300 hover:bg-gray-200 hover:border-gray-400 ${isMono ? '' : ''}`
                         }`}
                       >
-                        <div className={`w-10 h-10 rounded-lg flex items-center justify-center text-white ${getGroupColorClass(group?.colorIndex)}`}
-                        style={{
-                          backgroundColor: group?.colorIndex === 2 && isMono ? '#1f2937' : undefined
-                        }}>
+                        <div 
+                          className={`w-10 h-10 rounded-lg flex items-center justify-center text-white ${!isMono ? getGroupColorClass(group?.colorIndex) : ''}`}
+                          style={isMono ? { backgroundColor: getColorValue(getGroupColorClass(group?.colorIndex)) } : undefined}
+                        >
                           <span className="text-sm font-semibold">
                             {group.name ? group.name.charAt(0).toUpperCase() : 'G'}
                           </span>
@@ -1766,10 +1793,10 @@ export default function AddonsPage() {
                               : `bg-gray-100 text-gray-700 border-gray-300 hover:bg-gray-200 hover:border-gray-400 ${isMono ? '' : ''}`
                         }`}
                       >
-                        <div className={`w-10 h-10 rounded-lg flex items-center justify-center text-white ${getGroupColorClass(group?.colorIndex)}`}
-                        style={{
-                          backgroundColor: group?.colorIndex === 2 && isMono ? '#1f2937' : undefined
-                        }}>
+                        <div 
+                          className={`w-10 h-10 rounded-lg flex items-center justify-center text-white ${!isMono ? getGroupColorClass(group?.colorIndex) : ''}`}
+                          style={isMono ? { backgroundColor: getColorValue(getGroupColorClass(group?.colorIndex)) } : undefined}
+                        >
                           <span className="text-sm font-semibold">
                             {group.name ? group.name.charAt(0).toUpperCase() : 'G'}
                           </span>