Sempruijs add themes

site/src/main.rs

@@ -123,6 +123,31 @@ fn BibleApp() -> impl IntoView {
                     let _ = body.style().set_property("margin", "0");
                     let _ = body.style().set_property("padding", "0");
                 }
+
+                // Inject text selection CSS with direct color values
+                let selection_css = format!(
+                    "::selection {{ background-color: {} !important; color: {} !important; }} ::-moz-selection {{ background-color: {} !important; color: {} !important; }}",
+                    theme.colors.verses.selected_background,
+                    theme.colors.verses.selected,
+                    theme.colors.verses.selected_background,
+                    theme.colors.verses.selected
+                );
+
+                // Remove existing selection style if present
+                if let Ok(Some(existing_style)) = document.query_selector("style[data-selection-theme]") {
+                    if let Some(parent) = existing_style.parent_node() {
+                        let _ = parent.remove_child(&existing_style);
+                    }
+                }
+
+                // Create and inject new selection style
+                if let Ok(style_element) = document.create_element("style") {
+                    style_element.set_text_content(Some(&selection_css));
+                    let _ = style_element.set_attribute("data-selection-theme", "true");
+                    if let Some(head) = document.head() {
+                        let _ = head.append_child(&style_element);
+                    }
+                }
             }
         }
     });
@@ -466,12 +491,8 @@ fn BibleWithSidebar(
                         <Route
                             path=path!("/:book/:chapter")
                             view=move || {
-                                let chapter = Chapter::from_url().unwrap();
                                 view! {
-                                    <ChapterDetail 
-                                        chapter=chapter 
-                                        verse_visibility_enabled=verse_visibility_enabled
-                                    />
+                                    <ChapterWrapper verse_visibility_enabled=verse_visibility_enabled />
                                 }
                             }
                         />
@@ -559,7 +580,7 @@ fn BibleWithSidebar(
                     when=move || is_theme_sidebar_open.get()
                     fallback=|| view! { <></> }
                 >
-                    <aside class="w-80 border-r p-4 overflow-y-auto md:relative absolute inset-y-0 right-0 z-45 md:z-auto" style="background-color: var(--theme-sidebar-background); border-color: var(--theme-sidebar-border)">
+                    <aside class="w-64 border-r p-3 overflow-y-auto md:relative absolute inset-y-0 right-0 z-45 md:z-auto" style="background-color: var(--theme-sidebar-background); border-color: var(--theme-sidebar-border)">
                         <ThemeSidebar
                             current_theme=current_theme
                             set_current_theme=set_current_theme
@@ -933,22 +954,14 @@ fn Home(
             return; // Don't auto-redirect if user explicitly wants to choose
         }
 
+        // Also don't auto-redirect if there's a return_url (let the translation picker handle it)
+        if search_params.contains("return_url=") {
+            return; 
+        }
+
         if let Some(selected_translation) = get_selected_translation() {
             if is_translation_downloaded(&selected_translation) {
-                // Navigate to a random chapter instead of always Genesis 1
-                use crate::instructions::processor::get_random_chapter_path;
-                if let Some(random_path) = get_random_chapter_path() {
-                    navigate(
-                        &random_path,
-                        NavigateOptions {
-                            scroll: false,
-                            ..Default::default()
-                        },
-                    );
-                    return;
-                }
-
-                // Fallback: try to navigate to a standard Genesis path if random fails
+                // Navigate to Genesis 1 - predictable default chapter
                 navigate(
                     "/Genesis/1",
                     NavigateOptions {
@@ -966,3 +979,88 @@ fn Home(
         </div>
     }
 }
+
+#[component]
+fn ChapterWrapper(
+    verse_visibility_enabled: ReadSignal<bool>,
+) -> impl IntoView {
+    use crate::storage::{get_selected_translation, is_translation_downloaded};
+    use leptos_router::hooks::{use_location, use_navigate};
+    use urlencoding::encode;
+
+    let navigate = use_navigate();
+    let location = use_location();
+
+    // Check if user has a downloaded translation
+    let (redirect_triggered, set_redirect_triggered) = signal(false);
+
+    // Create effect to check translation and redirect if needed
+    Effect::new(move |_| {
+        // Prevent multiple redirects
+        if redirect_triggered.get() {
+            return;
+        }
+
+        // Check if user has a selected translation that's downloaded
+        if let Some(selected_translation) = get_selected_translation() {
+            if is_translation_downloaded(&selected_translation) {
+                // Translation found, no redirect needed
+                return;
+            }
+        }
+
+        // No valid translation found - redirect to home with current URL as return path
+        set_redirect_triggered.set(true);
+        let current_path = format!("{}{}", location.pathname.get(), location.search.get());
+        let encoded_return_url = encode(&current_path);
+        let redirect_url = format!("/?choose=true&return_url={}", encoded_return_url);
+
+        navigate(
+            &redirect_url,
+            NavigateOptions {
+                scroll: false,
+                replace: true, // Use replace to avoid adding to history
+                ..Default::default()
+            },
+        );
+    });
+
+    // Simple check for rendering - if we have a translation, show the chapter
+    let has_translation = move || {
+        if let Some(selected_translation) = get_selected_translation() {
+            is_translation_downloaded(&selected_translation)
+        } else {
+            false
+        }
+    };
+
+    view! {
+        <Show
+            when=move || has_translation()
+            fallback=move || view! {
+                <div class="flex items-center justify-center min-h-[200px]">
+                    <div class="text-center">
+                        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-4"></div>
+                        <p style="color: var(--theme-text-muted)">Redirecting to translation picker...</p>
+                    </div>
+                </div>
+            }
+        >
+            {move || {
+                match Chapter::from_url() {
+                    Ok(chapter) => view! {
+                        <ChapterDetail 
+                            chapter=chapter 
+                            verse_visibility_enabled=verse_visibility_enabled
+                        />
+                    }.into_any(),
+                    Err(_) => view! {
+                        <div class="text-center p-8">
+                            <p style="color: var(--theme-text-primary)">Chapter not found</p>
+                        </div>
+                    }.into_any()
+                }
+            }}
+        </Show>
+    }
+}

site/src/themes/amber_glow.json

@@ -0,0 +1,70 @@
+{
+  "name": "Amber Glow",
+  "id": "amber_glow",
+  "colors": {
+    "background": "#fff8e1",
+    "text": {
+      "primary": "#e65100",
+      "secondary": "#ef6c00",
+      "muted": "#ff8f00"
+    },
+    "verses": {
+      "number": "#ff8f00",
+      "numberHighlighted": "#ff9800",
+      "textHighlighted": "#e65100",
+      "backgroundHighlighted": "#ffecb3",
+      "selected": "#ffffff",
+      "selectedBackground": "#ff9800"
+    },
+    "sidebar": {
+      "background": "#ffecb3",
+      "border": "#ffe082",
+      "text": "#e65100",
+      "textHover": "#bf360c"
+    },
+    "buttons": {
+      "primary": {
+        "background": "#ff9800",
+        "text": "#e65100",
+        "hover": "#ff8f00"
+      },
+      "secondary": {
+        "background": "#ffb74d",
+        "text": "#e65100",
+        "hover": "#ff9800"
+      },
+      "success": {
+        "background": "#4caf50",
+        "text": "#ffffff",
+        "hover": "#388e3c"
+      },
+      "danger": {
+        "background": "#f44336",
+        "text": "#ffffff",
+        "hover": "#d32f2f"
+      }
+    },
+    "header": {
+      "background": "#fff8e1",
+      "border": "#ffe082",
+      "button": {
+        "text": "#ff8f00",
+        "hover": "#e65100",
+        "hoverBackground": "#ffecb3"
+      }
+    },
+    "navigation": {
+      "text": "#e65100",
+      "hover": "#ff9800",
+      "hoverBackground": "#ffecb3"
+    },
+    "commandPalette": {
+      "background": "#ffecb3",
+      "border": "#ffe082",
+      "text": "#e65100",
+      "textMuted": "#ef6c00",
+      "highlight": "#ffffff",
+      "highlightBackground": "#ff9800"
+    }
+  }
+}

site/src/themes/arctic_ice.json

@@ -0,0 +1,70 @@
+{
+  "name": "Arctic Ice",
+  "id": "arctic_ice",
+  "colors": {
+    "background": "#ecfeff",
+    "text": {
+      "primary": "#164e63",
+      "secondary": "#0891b2",
+      "muted": "#06b6d4"
+    },
+    "verses": {
+      "number": "#06b6d4",
+      "numberHighlighted": "#22d3ee",
+      "textHighlighted": "#164e63",
+      "backgroundHighlighted": "#cffafe",
+      "selected": "#ffffff",
+      "selectedBackground": "#22d3ee"
+    },
+    "sidebar": {
+      "background": "#cffafe",
+      "border": "#a5f3fc",
+      "text": "#164e63",
+      "textHover": "#083344"
+    },
+    "buttons": {
+      "primary": {
+        "background": "#22d3ee",
+        "text": "#164e63",
+        "hover": "#06b6d4"
+      },
+      "secondary": {
+        "background": "#67e8f9",
+        "text": "#164e63",
+        "hover": "#22d3ee"
+      },
+      "success": {
+        "background": "#10b981",
+        "text": "#ffffff",
+        "hover": "#059669"
+      },
+      "danger": {
+        "background": "#ef4444",
+        "text": "#ffffff",
+        "hover": "#dc2626"
+      }
+    },
+    "header": {
+      "background": "#ecfeff",
+      "border": "#a5f3fc",
+      "button": {
+        "text": "#06b6d4",
+        "hover": "#164e63",
+        "hoverBackground": "#cffafe"
+      }
+    },
+    "navigation": {
+      "text": "#164e63",
+      "hover": "#22d3ee",
+      "hoverBackground": "#cffafe"
+    },
+    "commandPalette": {
+      "background": "#cffafe",
+      "border": "#a5f3fc",
+      "text": "#164e63",
+      "textMuted": "#0891b2",
+      "highlight": "#ffffff",
+      "highlightBackground": "#22d3ee"
+    }
+  }
+}

site/src/themes/autumn_leaves.json

@@ -0,0 +1,70 @@
+{
+  "name": "Autumn Leaves",
+  "id": "autumn_leaves",
+  "colors": {
+    "background": "#451a03",
+    "text": {
+      "primary": "#fed7aa",
+      "secondary": "#fb923c",
+      "muted": "#dc2626"
+    },
+    "verses": {
+      "number": "#dc2626",
+      "numberHighlighted": "#f97316",
+      "textHighlighted": "#fed7aa",
+      "backgroundHighlighted": "#7c2d12",
+      "selected": "#451a03",
+      "selectedBackground": "#f97316"
+    },
+    "sidebar": {
+      "background": "#7c2d12",
+      "border": "#9a3412",
+      "text": "#fed7aa",
+      "textHover": "#fff7ed"
+    },
+    "buttons": {
+      "primary": {
+        "background": "#f97316",
+        "text": "#451a03",
+        "hover": "#ea580c"
+      },
+      "secondary": {
+        "background": "#dc2626",
+        "text": "#ffffff",
+        "hover": "#b91c1c"
+      },
+      "success": {
+        "background": "#eab308",
+        "text": "#713f12",
+        "hover": "#ca8a04"
+      },
+      "danger": {
+        "background": "#7c2d12",
+        "text": "#fed7aa",
+        "hover": "#92400e"
+      }
+    },
+    "header": {
+      "background": "#451a03",
+      "border": "#7c2d12",
+      "button": {
+        "text": "#fb923c",
+        "hover": "#fed7aa",
+        "hoverBackground": "#7c2d12"
+      }
+    },
+    "navigation": {
+      "text": "#fed7aa",
+      "hover": "#f97316",
+      "hoverBackground": "#7c2d12"
+    },
+    "commandPalette": {
+      "background": "#7c2d12",
+      "border": "#9a3412",
+      "text": "#fed7aa",
+      "textMuted": "#fb923c",
+      "highlight": "#451a03",
+      "highlightBackground": "#f97316"
+    }
+  }
+}