Fix syntax highlighting theme resolution and update Docker build for restored API files

Dockerfile

@@ -27,12 +27,11 @@ ENV VITE_ANALYTICS_ENABLED=$VITE_ANALYTICS_ENABLED
 
 # Remove problematic packages from package.json to prevent them from being bundled
 RUN sed -i '/"mysql2"/d' package.json
-RUN sed -i '/"drizzle-orm"/d' package.json  
+RUN sed -i '/"drizzle-orm"/d' package.json
 RUN sed -i '/"bcrypt"/d' package.json
 RUN sed -i '/"jsonwebtoken"/d' package.json
 RUN sed -i '/"@types\/bcrypt"/d' package.json
 RUN sed -i '/"@types\/jsonwebtoken"/d' package.json
-RUN sed -i '/"nanoid"/d' package.json
 
 # Reinstall dependencies without server packages
 RUN npm install
@@ -50,8 +49,8 @@ RUN echo "export const users = {}; export const scripts = {}; export const ratin
 
 # Create comprehensive mock API files using printf for reliable multiline content
 
-# Mock API index with proper types and re-exports
+# Mock API index with proper types and re-exports (keep nanoid import to match real API)
-RUN printf 'export const generateId = () => Math.random().toString(36).substr(2, 9);\nexport class ApiError extends Error {\n  constructor(message: string, public status: number = 500) {\n    super(message);\n    this.name = "ApiError";\n  }\n}\nexport * from "./scripts";\nexport * from "./users";\nexport * from "./ratings";\nexport * from "./analytics";\nexport * from "./collections";\nexport * from "./auth";' > src/lib/api/index.ts
+RUN printf 'import { nanoid } from "nanoid";\nexport const generateId = () => nanoid();\nexport class ApiError extends Error {\n  constructor(message: string, public status: number = 500) {\n    super(message);\n    this.name = "ApiError";\n  }\n}\nexport * from "./scripts";\nexport * from "./users";\nexport * from "./ratings";\nexport * from "./analytics";\nexport * from "./collections";\nexport * from "./auth";' > src/lib/api/index.ts
 
 # Mock auth API with individual function exports
 RUN printf 'export interface LoginCredentials {\n  email: string;\n  password: string;\n}\nexport interface RegisterData {\n  email: string;\n  username: string;\n  displayName: string;\n  password: string;\n}\nexport interface AuthToken {\n  token: string;\n  user: any;\n}\nexport async function login(credentials: LoginCredentials): Promise<AuthToken> {\n  return { token: "demo-token", user: { id: "1", username: "demo", email: "demo@example.com", displayName: "Demo User", isAdmin: false, isModerator: false } };\n}\nexport async function register(data: RegisterData): Promise<AuthToken> {\n  return { token: "demo-token", user: { id: "1", username: data.username, email: data.email, displayName: data.displayName, isAdmin: false, isModerator: false } };\n}\nexport async function refreshToken(token: string): Promise<AuthToken> {\n  return { token: "demo-token", user: { id: "1", username: "demo", email: "demo@example.com", displayName: "Demo User", isAdmin: false, isModerator: false } };\n}\nexport async function changePassword(userId: string, currentPassword: string, newPassword: string): Promise<boolean> {\n  return true;\n}' > src/lib/api/auth.ts

src/pages/ScriptDetail.tsx

@@ -138,7 +138,7 @@ echo "Setting up Docker environment for $PROJECT_NAME..."
 export default function ScriptDetail() {
   const { scriptId } = useParams();
   const { user } = useAuth();
-  const { theme } = useTheme();
+  const { resolvedTheme } = useTheme();
   
   // API hooks
   const { data: script } = useScript(scriptId || '');
@@ -360,7 +360,7 @@ export default function ScriptDetail() {
                   <div className="rounded-lg overflow-hidden border">
                     <SyntaxHighlighter
                       language="bash"
-                      style={theme === 'dark' ? vscDarkPlus : vs}
+                      style={resolvedTheme === 'dark' ? vscDarkPlus : vs}
                       customStyle={{
                         margin: 0,
                         borderRadius: 0,
@@ -404,7 +404,7 @@ export default function ScriptDetail() {
                     <div className="rounded-lg overflow-hidden border">
                       <SyntaxHighlighter
                         language="bash"
-                        style={theme === 'dark' ? vscDarkPlus : vs}
+                        style={resolvedTheme === 'dark' ? vscDarkPlus : vs}
                         customStyle={{
                           margin: 0,
                           borderRadius: 0,
@@ -423,7 +423,7 @@ export default function ScriptDetail() {
                     <div className="rounded-lg overflow-hidden border">
                       <SyntaxHighlighter
                         language="bash"
-                        style={theme === 'dark' ? vscDarkPlus : vs}
+                        style={resolvedTheme === 'dark' ? vscDarkPlus : vs}
                         customStyle={{
                           margin: 0,
                           borderRadius: 0,

src/pages/SubmitScript.tsx

@@ -29,7 +29,7 @@ import {
 export default function SubmitScript() {
   const { user } = useAuth();
   const navigate = useNavigate();
-  const { theme } = useTheme();
+  const { resolvedTheme } = useTheme();
   const [isLoading, setIsLoading] = useState(false);
   const [showPreview, setShowPreview] = useState(false);
   const [formData, setFormData] = useState({
@@ -336,7 +336,7 @@ export default function SubmitScript() {
                       <div className="rounded-lg overflow-hidden border">
                         <SyntaxHighlighter
                           language="bash"
-                          style={theme === 'dark' ? vscDarkPlus : vs}
+                          style={resolvedTheme === 'dark' ? vscDarkPlus : vs}
                           customStyle={{
                             margin: 0,
                             borderRadius: 0,
@@ -484,7 +484,7 @@ export default function SubmitScript() {
                         <div className="rounded-lg overflow-hidden border">
                           <SyntaxHighlighter
                             language="bash"
-                            style={theme === 'dark' ? vscDarkPlus : vs}
+                            style={resolvedTheme === 'dark' ? vscDarkPlus : vs}
                             customStyle={{
                               margin: 0,
                               borderRadius: 0,
@@ -525,7 +525,7 @@ export default function SubmitScript() {
                         <div className="rounded-lg overflow-hidden border">
                           <SyntaxHighlighter
                             language="bash"
-                            style={theme === 'dark' ? vscDarkPlus : vs}
+                            style={resolvedTheme === 'dark' ? vscDarkPlus : vs}
                             customStyle={{
                               margin: 0,
                               borderRadius: 0,