2.0.2

package.json

@@ -1,7 +1,7 @@
 {
   "name": "sirus-next",
   "private": true,
-  "version": "1.3.1",
+  "version": "2.0.4",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -10,14 +10,15 @@
     "tauri": "tauri"
   },
   "dependencies": {
-    "vue": "^3.3.4",
-    "@tauri-apps/api": "^1.5.2"
+    "@iconify/vue": "^4.1.1",
+    "@tauri-apps/api": "^1.5.2",
+    "vue": "^3.3.4"
   },
   "devDependencies": {
+    "@tauri-apps/cli": "^1.5.8",
     "@vitejs/plugin-vue": "^4.2.3",
     "typescript": "^5.0.2",
     "vite": "^5.0.0",
-    "vue-tsc": "^1.8.5",
-    "@tauri-apps/cli": "^1.5.8"
+    "vue-tsc": "^1.8.5"
   }
 }

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "sirus-next"
-version = "1.3.1"
+version = "2.0.4"
 description = "Sirus Next Launcher"
 authors = ["Nikolay Kost <jilizart@gmail.com>"]
 edition = "2021"

src-tauri/tauri.conf.json

@@ -51,7 +51,9 @@
         "resizable": false,
         "title": "sirus-next",
         "width": 1366,
-        "height": 900,
+        "height": 768,
+        "maxWidth": 1366,
+        "maxHeight": 768,
         "minWidth": 1366,
         "minHeight": 600,
         "center": true,

src/App.vue

@@ -7,11 +7,13 @@ import Layout from "./components/Layout.vue";
 import ProgressBar from "./components/ProgressBar.vue";
 import ServerStatus from "./components/ServerStatus.vue";
 import Button from "./components/Button.vue";
+import Addons from "./components/Addons.vue";
 import UsersIcon from "./components/UsersIcon.vue";
 import DropdownMenu from "./components/DropdownMenu.vue";
-import AccountOutline from "./components/AccountOutline.vue";
+import AccountOutlineIcon from "./components/AccountOutlineIcon.vue";
 import ChevronDown from "./components/ChevronDown.vue";
 import Link from "./components/Link.vue";
+import { Icon } from "@iconify/vue";
 
 import { getVersion } from "@tauri-apps/api/app";
 
@@ -69,10 +71,10 @@ onMounted(async () => {
 
 <template>
   <Layout>
-    <template v-slot:header>
+    <template #header>
       <na class="primary-nav">
-        <Button variant="nav" href="#">Community</Button>
         <Button variant="nav" href="#">News</Button>
+        <Button variant="nav" href="#">Addons</Button>
         <DropdownMenu open-on="hover">
           <Button variant="nav"> Game Info </Button>
           <template #primary>
@@ -99,7 +101,7 @@ onMounted(async () => {
         </DropdownMenu>
         <DropdownMenu open-on="hover">
           <Button variant="nav">
-            <AccountOutline /> Account <ChevronDown />
+            <AccountOutlineIcon />&nbsp;Account <ChevronDown />
           </Button>
           <template #primary>
             <div class="dropdown-login">
@@ -117,10 +119,11 @@ onMounted(async () => {
       </aside>
     </template>
 
+    <Addons />
     <CardFull v-if="cardItem" :item="cardItem" @back="hideCard" />
     <CardList v-else :items="items" @show="showCard" />
 
-    <template v-slot:aside>
+    <template #aside>
       <div id="logo"></div>
       <div class="users-online">
         <UsersIcon /> {{ online }} <span class="users-online-meta">online</span>
@@ -140,9 +143,20 @@ onMounted(async () => {
 
       <ServerStatus :items="statusRealms" />
     </template>
-    <template v-slot:footer>
+    <template #footer>
       <section class="footer-content">
-        <Button variant="play">Play</Button>
+        <div class="play-button">
+          <Button class="play-button-run" variant="play"> Play </Button>
+          <Button class="play-button-edit" variant="play">
+            <Icon
+              icon="mdi:settings"
+              width="1.5rem"
+              height="1.5rem"
+              color="white"
+            />
+          </Button>
+        </div>
+
         <ProgressBar />
         <div class="meta">Version: {{ version }}</div>
       </section>
@@ -151,6 +165,26 @@ onMounted(async () => {
 </template>
 
 <style scoped>
+.play-button {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+}
+
+button.play-button-run {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  min-width: 200px;
+}
+
+.play-button-edit {
+  border-left: 1px solid hsl(15, 100%, 40%);
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  min-width: 40px;
+  padding: 0 4px;
+}
+
 .primary-nav,
 .aside-nav {
   display: flex;

src/api.ts

@@ -27,6 +27,16 @@ export type StatusResponse = {
 
 export type StatusRealm = StatusResponse["realms"][0];
 
+export type AddonItem = {
+  id: number;
+  name: string;
+  version: string;
+  category: number;
+  downloads: number;
+  repo_updated_at: string;
+  repository: string;
+};
+
 export function httpGet<T>(url: string) {
   return fetch<T>(url, {
     method: "GET",