+
*/}
+ Update mods for X
+
+
+
+
+
-
-
- Get Mods
- Settings
-
-
-
-
-
-
-
-
-
-
-
-
+ - Welcome to the mod manager! Click a button at the top to get - started! -
-
-
-
-
- {installedGames?.map((game: GameInformation, index: number) => {
- return (
- - We found these games already installed -
-Only one game is supported.
-
- {activeFilter == "filter.supported" &&
- game.app_id == 218620 ? (
-
- );
- })}
-
-
- ) : null}
- {activeFilter == "filter.all" ? (
-
- 
-
-
-
-
-
-
-
-
-
-
- Install PAYDAY 2 mod loader?
-
-
- This will install the mod loader required to
- run payday 2 mods
-
-
-
-
-
- {/*
- Cancel
- {
- toast.info(
- "We would do something, but it's not implimented yet, so..."
- );
- }}
- >
- Start download
-
-
-
-
- ) : null}
-
-
-
- {game.name}
-•
-{game.app_id}
- {game.app_id == 218620 ? ( -- {game.install_dir} -
- {game.app_id == 218620 ? ( -More content
*/} -
-
- ) : null}
-
- {
- toast.warning("Missing picture", {
- description: `Failed to get icon for game: ${game.name} (${game.app_id})`,
- });
- }}
- />
-
- {
- toast.warning("Missing picture", {
- description: `Failed to get icon for game: ${game.name} (${game.app_id})`,
- });
- }}
- />
-
-
-
-
- {game.name}
-•
-{game.app_id}
- {game.app_id == 218620 ? ( -- {game.install_dir} -
-
+ {/* Render the navbar */}
+ {/* Because of how this works, we pass the child element into the navbar. */}
+
+ {activeState == "mods" ?
+
);
}
diff --git a/src/components/GameSelector.tsx b/src/components/GameSelector.tsx
deleted file mode 100644
index 5a969ff..0000000
--- a/src/components/GameSelector.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-import { useState, useEffect } from "react";
-import { AppSettings, GameInformation } from "../lib/types";
-import { invoke } from "@tauri-apps/api/tauri";
-import {
- CheckCircle2Icon,
- GamepadIcon,
- EyeIcon,
- EyeOffIcon,
- BugIcon,
-} from "lucide-react";
-import { Button } from "./ui/button";
-import { toast } from "sonner";
-import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
-import { Toggle } from "./ui/toggle";
-
-interface GameSelectorProps {
- onGameSelect: (game: GameInformation) => void;
-}
-
-function GameSelector({ onGameSelect }: GameSelectorProps) {
- const [installedGames, setInstalledGames] = useState
-
- {showUnsupported ? (
-
- ) : (
-
- Select Active Game
-- Choose the game you want to manage mods for: -
- {supportedGamesExist ? ( -
-
-
- ) : null}
-
- )}
- - No supported games found. -
-- Did you know, you can force show them by turning on debug mode? -
- {settings?.show_debug_options ? ( -
-
-
- {(showDebug ? installedGames : filteredGames).map((game) => (
-
- ))}
-
-
- 
-
- );
-}
-
-export default ModItem;
diff --git a/src/components/ModItemSheet.tsx b/src/components/ModItemSheet.tsx
deleted file mode 100644
index adbbc06..0000000
--- a/src/components/ModItemSheet.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { ModInfo } from "../lib/types";
-import {
- Sheet,
- SheetContent,
- SheetDescription,
- SheetHeader,
- SheetTitle,
- SheetTrigger,
-} from "./ui/sheet";
-
-interface ModItemSheetProps {
- mod: ModInfo;
- trigger: React.ReactNode;
-}
-
-function ModItemSheet(props: ModItemSheetProps) {
- console.log("ModItemSheet render:", props.mod);
- return (
-
-
-
-
-
-
- {/* Button to trigger mod download */}
- {mod.mod_data.name}
-
-
- {mod.mod_data.author ? mod.mod_data.author : "Unknown"}
-|
-- {mod.mod_data.downloads - ? mod.mod_data.downloads - : "??? Downloads"} -
-
-
-
-
-
- 
-
-
-
- {props.mod.mod_data.name}
-
- By {props.mod.mod_data.author}
-
-
- - {props.mod.mod_data.downloads} Downloads -
-- Debug information: -
-- {props.mod.mod_data.id} | - {props.mod.mod_data.download_type - ? props.mod.mod_data.download_type - : `Unknown download type [${props.mod.mod_data.download_type}]`} -
-
-
- {props.mod.mod_data.description}
-
-
- - Markdown support will be added in the future -
-
- {/* Loader component displayed when loading */}
- {isLoading ? (
- Open search /
-
-
- {/* Previous button */}
-
-
- {/* TODO programmatically add pages depending on response from mod.mod_meta */}
- {currentPage - 1 <= 0 ? null : (
-
- {currentPage - 1}
-
- )}
-
- {
- toast("No");
- }}
- >
- {currentPage}
-
-
-
- {currentPage + 1}
-
-
-
-
-
- ) : null}
-
- );
-}
-
-export default ModManager;
diff --git a/src/components/ModManagerSearch.tsx b/src/components/ModManagerSearch.tsx
deleted file mode 100644
index 6748d8f..0000000
--- a/src/components/ModManagerSearch.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import { ModInfo } from "@/lib/types";
-import {
- CommandDialog,
- CommandEmpty,
- CommandGroup,
- CommandInput,
- CommandItem,
- CommandList,
-} from "./ui/command";
-import { useEffect, useState } from "react";
-import { invoke } from "@tauri-apps/api/tauri";
-
-interface ModManagerSearchProps {
- mods: ModInfo[];
-}
-
-function ModManagerSearch(_: ModManagerSearchProps) {
- const [commandOpen, setCommandOpen] = useState(false);
- const [searchQuery, setSearchQuery] = useState("");
- const [mods, setMods] = useState
-
- ) : null}
-
- {/* Error message displayed when an error occurs */}
- {hasErrored ? (
- The mods are on the way...
- -
-
- ) : null}
-
- {settings?.show_debug_options ? (
- (╯°□°）╯︵ ┻━┻
-{errorMessage}
- - {settings?.show_debug_options ? ( - - ) : null} -
-
-
-
-
-
-
-
-
- ) : null}
-
- {/* setCommandOpen(true)}
- /> */}
- Debug options
- -
-
-
-
- - Set error information -
-
-
-
-
-
-
-
-
- {
- setErrorMessage(event.target.value);
- }}
- />
-
-
-
- {mods.map((mod: ModInfo, _) => (
-
- ) : (
-
- {selectedGame ? (
- <>
-
- )}
-
- {/* Pagination (TODO) */}
- {baseModMeta ? (
- - Sorry, {selectedGame?.name} is not supported yet! -
-- We are working on adding support for more games. In the - meantime, you can check out the mods that are currently - supported. If you want to request support for your game, you can - make a issue on github! -
- - ) : ( -- Select a game to get started! -
- )} -
-
-
-
-
- {mod.mod_data.name}
- {mod.mod_data.author}
-
- No mods found.
- )} -
+
*/}
+ Update mods for X
+
+
+
+
+ + Sorry! Mod loader installer isn't ready. +
+
+
+ + Mods for Cyberpunk 2077 +
+
+
+
+
+ (╯°□°）╯︵ ┻━┻
++ We couldn't connect to the mod servers, try again later +
+ +
+
*/}
+ Update mods for X
+
+
+
+
+ + Sorry! Profiles isn't ready. +
+
+
*/}
+ Update mods for X
+
+
+
+
+ + Sorry! Updater isn't ready. +
+
- {props.ignoreHint ? null : (
-
-
-
-
-
-
-
-
- {props.noResults ? props.noResults : "No results found :("}
-
-
- {props.options.map((status) => (
- {
- console.log("Something clicked...");
- console.info(value);
- setSelectedStatus(
- props.options.find(
- (priority) => priority.value === value
- ) || null
- );
- setOpen(false);
- }}
- >
-
- ))}
-
-
-
-
-
-
- );
-}
-
-export default PopoverComboBox;
diff --git a/src/components/Settings/SettingsCheckbox.tsx b/src/components/Settings/SettingsCheckbox.tsx
deleted file mode 100644
index 125d7b1..0000000
--- a/src/components/Settings/SettingsCheckbox.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { CheckedState } from "@radix-ui/react-checkbox";
-import { Badge } from "../ui/badge";
-import { Checkbox } from "../ui/checkbox";
-
-export interface SettingsProps {
- title: string;
- description?: string;
- experimental?: boolean;
- checked?: boolean;
- onChecked?: (checked: CheckedState) => void;
-}
-
-function SettingsCheckbox(props: SettingsProps) {
- return (
- {props.hint}
- )} -
-
- );
-}
-
-export default SettingsCheckbox;
diff --git a/src/components/Settings/SettingsInput.tsx b/src/components/Settings/SettingsInput.tsx
deleted file mode 100644
index 80dfc48..0000000
--- a/src/components/Settings/SettingsInput.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Input } from "../ui/input";
-import { useEffect, useState } from "react";
-
-export interface SettingsInput {
- title: string;
- description: string;
- placeholder: string;
- experimental?: boolean;
- value?: string;
- onChange?: (value: string) => void;
-}
-
-function SettingsInput(props: SettingsInput) {
- const [internalValue, setInternalValue] = useState("");
-
- useEffect(() => {
- if (!props.value) {
- return;
- }
- setInternalValue(props.value);
- }, [props.value]);
-
- useEffect(() => {
- if (!props.onChange) {
- return;
- }
- console.log("Value updated: " + internalValue);
- props.onChange(internalValue);
- }, [internalValue]);
-
- return (
-
-
-
-
-
-
-
-
- {props.experimental ? (
- EXPERIMENTAL
- ) : null}
-
- {props.description}
-
-
- );
-}
-
-export default SettingsInput;
diff --git a/src/components/Settings/SettingsSelect.tsx b/src/components/Settings/SettingsSelect.tsx
deleted file mode 100644
index 724ff0d..0000000
--- a/src/components/Settings/SettingsSelect.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { SelectItem } from "@radix-ui/react-select";
-import {
- Select,
- SelectContent,
- SelectTrigger,
- SelectValue,
-} from "../ui/select";
-
-export interface SettingsSelectProps {
- title: string;
- description: string;
- placeholder: string;
- experimental?: boolean;
- items?: { value: string; label: string }[];
-}
-
-function SettingsSelect(props: SettingsSelectProps) {
- return (
-
-
- {props.title}
-
- {
- setInternalValue(e.target.value);
- }}
- />
-
-
- {props.description}
-
-
- );
-}
-
-export default SettingsSelect;
diff --git a/src/components/SettingsPage.tsx b/src/components/SettingsPage.tsx
deleted file mode 100644
index 1616753..0000000
--- a/src/components/SettingsPage.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import { useEffect, useState } from "react";
-import SettingsCheckbox from "./Settings/SettingsCheckbox";
-import { Badge } from "./ui/badge";
-import { AppSettings } from "@/lib/types";
-import { invoke } from "@tauri-apps/api/tauri";
-import { Button } from "./ui/button";
-import { toast } from "sonner";
-import SettingsInput from "./Settings/SettingsInput";
-import { SaveIcon } from "lucide-react";
-// import { Checkbox } from "./ui/checkbox";
-
-function SettingsPage() {
- async function loadSettings(): Promise
-
- {props.title}
-
-
-
-
- {props.description}
-
-
- );
-}
-
-export default SettingsPage;
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
new file mode 100644
index 0000000..5316804
--- /dev/null
+++ b/src/components/navbar.tsx
@@ -0,0 +1,176 @@
+// navbar.tsx
+
+import {
+ CloudUpload,
+ Package,
+ PanelLeftCloseIcon,
+ PuzzleIcon,
+ Search,
+ SettingsIcon,
+ Users,
+ Wrench,
+} from "lucide-react";
+
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import { ReactNode, useState } from "react";
+import NavbarLink from "./navbarLink";
+
+export interface NavbarProps {
+ onStateChanged: (
+ newState:
+ | "mods"
+ | "updates"
+ | "mod_loader"
+ | "config_tweaker"
+ | "profiles"
+ | "settings"
+ ) => void;
+
+ children: ReactNode;
+}
+
+export default function Navbar(props: NavbarProps) {
+ const [navbarCollapsed, setNavbarCollapsed] = useState(false);
+
+ const [activeState, setActiveState] = useState<
+ | "mods"
+ | "updates"
+ | "mod_loader"
+ | "config_tweaker"
+ | "profiles"
+ | "settings"
+ >("mods");
+
+ return (
+
-
- Experimental
-
-
- Settings
-Only settings from the config are displayed here.
- -
- {
- if (!settings?.theme) {
- return;
- }
-
- if (checked) {
- setSettings({ ...settings, theme: "Light" });
- } else {
- setSettings({ ...settings, theme: "Dark" });
- }
- }}
- />
- {
- if (settings?.show_debug_options == null) {
- toast.error("Failed to find key.");
- return;
- }
-
- if (checked) {
- setSettings({ ...settings, show_debug_options: true });
- } else {
- setSettings({ ...settings, show_debug_options: false });
- }
- }}
- />
-
- {
- if (settings) {
- setSettings({ ...settings, download_path: newText });
- }
- }}
- value={settings?.download_path}
- />
-
-
+ {/* Left Sidebar (NavBar) */}
+
+ );
+}
diff --git a/src/components/navbarLink.tsx b/src/components/navbarLink.tsx
new file mode 100644
index 0000000..9bf1e44
--- /dev/null
+++ b/src/components/navbarLink.tsx
@@ -0,0 +1,46 @@
+import { ReactNode } from "react";
+import { Badge } from "./ui/badge";
+import { Button } from "./ui/button";
+
+export interface NavbarLinkProps {
+ // Appears on all types
+ text: String;
+ children: ReactNode;
+ onClick?: () => void;
+ collapsed?: boolean;
+
+ // Active specific
+ active?: boolean;
+
+ // Notification specific
+ hasNotifications?: boolean;
+ notificationAmount?: String;
+}
+
+// Note Children in this context assumes an icon
+function NavbarLink(props: NavbarLinkProps) {
+ return (
+
+ );
+}
+
+export default NavbarLink;
diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx
deleted file mode 100644
index bc674d3..0000000
--- a/src/components/ui/accordion.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDown } from "lucide-react"
-
-import { cn } from "../../lib/utils"
-
-const Accordion = AccordionPrimitive.Root
-
-const AccordionItem = React.forwardRef<
- React.ElementRef
+
+
+ {/* Main Content Area */}
+
+ {/* Title */}
+
+
+ {!navbarCollapsed && (
+
+
+ {/* Buttons & icons */}
+ + Void mod manager + + v0.0.0 - Dev branch + +
+ )} +
+
+
+
+ setNavbarCollapsed(!navbarCollapsed)}
+ collapsed={navbarCollapsed}
+ >
+
+
+
+
+
+ {/* Topbar */}
+
+
+
+ {/* Scrollable Content */}
+ {props.children}
+
+
+
+
+ {children}
-
-
-));
-
-CommandInput.displayName = CommandPrimitive.Input.displayName;
-
-const CommandList = React.forwardRef<
- React.ElementRef