add tabs

DOCS.md

@@ -10,6 +10,8 @@ The Header section contains metadata about the modpack, such as the name, subtit
 - `modpack_version`: This field is the modpack version. It has to change for the installer to know an update is available.
 - `name`: This field specifies the modpack name. This can be any string.
 - `subtitle`: Name of modpack version
+- `tab_group`: The id of the tab the version will appear in. The id can be any non negative number. `0` is the default tab.
+- `tab_title`: The name of the tab.
 - `description`: This field is a html representation of the description show in the installer.
 - `uuid`: This field is a [UUID4](https://www.uuidgenerator.net/) and should be the same across all modpack versions. But different across branches/alt versions.
 - `icon`: If this field is set to `true` the installer will look for an `icon.png` in the modpack root.

src/gui.rs

@@ -1,4 +1,4 @@
-use std::path::PathBuf;
+use std::{collections::HashMap, path::PathBuf};
 
 use base64::{engine, Engine};
 use dioxus::prelude::*;
@@ -512,6 +512,8 @@ struct VersionProps {
     launcher: super::Launcher,
     error: Signal<Option<String>>,
     name: Signal<String>,
+    page: Signal<usize>,
+    pages: Signal<HashMap<usize, String>>,
 }
 
 #[component]
@@ -542,6 +544,17 @@ fn Version(mut props: VersionProps) -> Element {
             return None;
         }
     };
+    let tab_group = if let Some(tab_group) = installer_profile.manifest.tab_group {
+        tab_group
+    } else {
+        0
+    };
+    let tab_title = if let Some(ref tab_title) = installer_profile.manifest.tab_title {
+        tab_title.clone()
+    } else {
+        String::from("Default")
+    };
+    props.pages.with_mut(|x| x.insert(tab_group, tab_title));
     let mut installing = use_signal(|| false);
     let mut spinner_status = use_signal(|| "");
     let mut modify = use_signal(|| false);
@@ -679,20 +692,22 @@ fn Version(mut props: VersionProps) -> Element {
     if *props.name.read() == String::default() {
         props.name.set(installer_profile.manifest.name.clone())
     }
-
-    if *installing.read() {
-        SpinnerView(SpinnerViewProps {
-            title: installer_profile.manifest.subtitle,
-            status: spinner_status.to_string(),
-        })
-    } else if *credits.read() {
-        Credits(CreditsProps {
-            manifest: installer_profile.manifest,
-            enabled: installer_profile.enabled_features,
-            credits,
-        })
-    } else {
-        rsx! {
+    if (props.page)() != tab_group {
+        return None;
+    }
+    rsx! {
+        if *installing.read() {
+            SpinnerView {
+                title: installer_profile.manifest.subtitle,
+                status: spinner_status.to_string(),
+            }
+        } else if *credits.read() {
+            Credits {
+                manifest: installer_profile.manifest,
+                enabled: installer_profile.enabled_features,
+                credits,
+            }
+        } else {
             div {
                 class: "version-container",
                 form {
@@ -780,6 +795,26 @@ fn Version(mut props: VersionProps) -> Element {
     }
 }
 
+#[component]
+fn Pagination(mut page: Signal<usize>, mut pages: Signal<HashMap<usize, String>>) -> Element {
+    rsx!(
+        div {
+            class: "pagination",
+            for (index, name) in pages() {
+                button {
+                    class: "toolbar-button",
+                    disabled: index == page(),
+                    onclick: move |evt| {
+                        *page.write() = index;
+                        evt.stop_propagation();
+                    },
+                    "{name}"
+                }
+            }
+        }
+    )
+}
+
 #[derive(PartialEq, Props, Clone)]
 struct ErrorProps {
     error: String,
@@ -814,6 +849,8 @@ pub(crate) fn app() -> Element {
             error: err.read().clone().unwrap()
         });
     }
+    let page = use_signal(|| 0);
+    let pages = use_signal(|| HashMap::new());
     let cfg = config.with(|cfg| cfg.clone());
     let launcher = match super::get_launcher(&cfg.launcher) {
         Ok(val) => Some(val),
@@ -830,7 +867,6 @@ pub(crate) fn app() -> Element {
         if *settings.read() {
             div {
                 class: "fake-body",
-                onclick: |_| {},
                 Settings {
                     config: config,
                     settings: settings,
@@ -842,7 +878,6 @@ pub(crate) fn app() -> Element {
         } else if config.read().first_launch.unwrap_or(true) || launcher.is_none() {
             div {
                 class: "fake-body",
-                onclick: |_| {},
                 Launcher {
                     config: config,
                     config_path: props.config_path,
@@ -852,26 +887,34 @@ pub(crate) fn app() -> Element {
             }
         }
         else {
-            button {
-                class: "settings-button",
-                onclick: move |evt| {
-                    settings.set(true);
-                    evt.stop_propagation();
-                },
-                img {
-                    src: "{cog}",
+            div {
+                class: "toolbar",
+                Pagination {
+                    page,
+                    pages
+                }
+                button {
+                    class: "toolbar-button",
+                    onclick: move |evt| {
+                        settings.set(true);
+                        evt.stop_propagation();
+                    },
+                    img {
+                        src: "{cog}",
+                    }
                 }
             }
             div {
                 class: "fake-body",
-                onclick: |_| {},
                 for i in 0..branches.len() {
                     Version {
                         modpack_source: props.modpack_source.clone(),
                         modpack_branch: branches[i].name.clone(),
                         launcher: launcher.as_ref().unwrap().clone(),
                         error: err,
                         name,
+                        page,
+                        pages
                     }
                 }
             }

src/main.rs

@@ -404,6 +404,8 @@ struct Manifest {
     modpack_version: String,
     name: String,
     subtitle: String,
+    tab_group: Option<usize>,
+    tab_title: Option<String>,
     description: String,
     icon: bool,
     uuid: String,
@@ -1429,6 +1431,8 @@ async fn install(installer_profile: &InstallerProfile) -> Result<(), String> {
         modpack_version: manifest.modpack_version.clone(),
         name: manifest.name.clone(),
         subtitle: manifest.subtitle.clone(),
+        tab_group: manifest.tab_group.clone(),
+        tab_title: manifest.tab_title.clone(),
         description: manifest.subtitle.clone(),
         icon: manifest.icon,
         uuid: manifest.uuid.clone(),

src/style.css

@@ -16,7 +16,6 @@ body {
     background-image: url(data:image/png;base64,background_installer.png.base64);
     background-size: cover;
     color: #fce8f6;
-    background-size: cover;
     height: 88vh;
     overflow: hidden;
 }
@@ -242,16 +241,12 @@ input {
     cursor: pointer;
     border: 0.16vw solid black;
     height: 3vw;
-    justify-content: space-around;
     align-items: center;
-    position: absolute;
-    right: 0.5%;
-    top: 0.5%;
     justify-content: center;
 }
 
 img {
-    height: 100%;
+    height: inherit;
 }
 
 .button-container {
@@ -335,4 +330,45 @@ li {
 .custom-multimc-button {
     margin-top: 1vh;
     padding: 0.25em;
+}
+
+.toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: .25em;
+}
+
+.toolbar>* {
+    margin-left: 1em;
+}
+
+.toolbar-button {
+    font-family: "wynncraft";
+    width: 3vw;
+    background-color: #073c17;
+    padding: 1%;
+    text-align: center;
+    text-decoration: none;
+    display: flex;
+    font-size: 100%;
+    cursor: pointer;
+    border: 0.16vw solid black;
+    height: 3vw;
+    align-items: center;
+    justify-content: center;
+}
+
+.toolbar-button:disabled {
+    cursor: default;
+    color: gray;
+}
+
+.pagination {
+    display: flex;
+}
+
+.pagination>* {
+    margin-left: .25em;
+    width: 100%;
 }