github and discord links

src-tauri/src/main.rs

@@ -19,6 +19,7 @@ fn main() {
       disconnect,
       run_program,
       run_jar,
+      open_in_browser,
       req_get,
       get_bg_file,
       downloader::download_file,
@@ -65,6 +66,15 @@ fn run_jar(path: String, execute_in: String) {
   };
 }
 
+#[tauri::command]
+fn open_in_browser(url: String) {
+  // Open the URL in the default browser.
+  match open::that(url) {
+    Ok(_) => (),
+    Err(e) => println!("Failed to open URL: {}", e),
+  };
+}
+
 #[tauri::command]
 async fn req_get(url: String) -> String {
   // Send a GET request to the specified URL.

src/resources/icons/discord.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="256" height="256" viewBox="0 0 256 256" xml:space="preserve">
+<desc>Created with Fabric.js 1.7.22</desc>
+<defs>
+</defs>
+<g transform="translate(128 128) scale(0.72 0.72)" style="">
+	<g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(-175.05 -175.05) scale(3.89 3.89)" >
+	<path d="M 78.527 20.998 c -10.973 -8.229 -21.412 -8.001 -21.412 -8.001 l -1.067 1.219 c 12.954 3.962 18.973 9.677 18.973 9.677 c -7.925 -4.343 -15.697 -6.477 -22.936 -7.315 c -5.486 -0.61 -10.744 -0.457 -15.392 0.152 c -0.457 0 -0.838 0.076 -1.295 0.152 c -2.667 0.229 -9.144 1.219 -17.297 4.801 c -2.819 1.295 -4.496 2.21 -4.496 2.21 s 6.325 -6.02 20.04 -9.982 l -0.762 -0.914 c 0 0 -10.439 -0.229 -21.412 8.001 c 0 0 -10.973 19.888 -10.973 44.424 c 0 0 6.401 11.049 23.241 11.582 c 0 0 2.819 -3.429 5.105 -6.324 c -9.677 -2.896 -13.335 -8.991 -13.335 -8.991 s 0.762 0.533 2.134 1.295 c 0.076 0.076 0.152 0.152 0.305 0.229 c 0.229 0.152 0.457 0.229 0.686 0.381 c 1.905 1.067 3.81 1.905 5.563 2.591 c 3.124 1.219 6.858 2.438 11.201 3.276 c 5.715 1.067 12.42 1.448 19.735 0.076 c 3.581 -0.61 7.239 -1.676 11.049 -3.277 c 2.667 -0.991 5.639 -2.438 8.763 -4.496 c 0 0 -3.81 6.248 -13.792 9.068 c 2.286 2.896 5.029 6.172 5.029 6.172 C 83.023 76.47 89.5 65.422 89.5 65.422 C 89.5 40.886 78.527 20.998 78.527 20.998 z M 30.751 58.335 c -4.267 0 -7.772 -3.81 -7.772 -8.458 s 3.429 -8.458 7.772 -8.458 s 7.848 3.81 7.772 8.458 C 38.523 54.525 35.094 58.335 30.751 58.335 z M 58.563 58.335 c -4.267 0 -7.772 -3.81 -7.772 -8.458 s 3.429 -8.458 7.772 -8.458 s 7.772 3.81 7.772 8.458 S 62.907 58.335 58.563 58.335 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
+</g>
+</g>
+</svg>

src/resources/icons/github.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="256" height="256" viewBox="0 0 256 256" xml:space="preserve">
+<desc>Created with Fabric.js 1.7.22</desc>
+<defs>
+</defs>
+<g transform="translate(128 128) scale(0.72 0.72)" style="">
+	<g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(-175.05 -175.05) scale(3.89 3.89)" >
+	<path d="M 45 0 C 20.147 0 0 20.467 0 45.714 C 0 67.034 14.367 84.944 33.802 90 c -0.013 -5.283 -0.03 -11.763 -0.04 -13.782 c -12.986 2.869 -15.726 -5.595 -15.726 -5.595 c -2.123 -5.481 -5.183 -6.939 -5.183 -6.939 c -4.236 -2.943 0.319 -2.883 0.319 -2.883 c 4.687 0.334 7.156 4.887 7.156 4.887 c 4.163 7.249 10.92 5.153 13.584 3.942 c 0.419 -3.064 1.628 -5.157 2.964 -6.341 c -10.368 -1.199 -21.268 -5.265 -21.268 -23.435 c 0 -5.177 1.824 -9.407 4.81 -12.728 c -0.485 -1.195 -2.083 -6.018 0.452 -12.55 c 0 0 3.92 -1.274 12.84 4.861 c 3.724 -1.051 7.717 -1.578 11.684 -1.596 c 3.967 0.018 7.963 0.545 11.694 1.596 c 8.91 -6.135 12.824 -4.861 12.824 -4.861 c 2.541 6.532 0.943 11.355 0.458 12.55 c 2.993 3.321 4.804 7.551 4.804 12.728 c 0 18.214 -10.92 22.223 -21.315 23.398 c 1.674 1.472 3.166 4.357 3.166 8.781 c 0 3.513 -0.016 11.601 -0.031 17.74 C 76.021 84.439 90 66.74 90 45.714 C 90 20.467 69.853 0 45 0 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
+</g>
+</g>
+</svg>

src/ui/App.css

@@ -1,6 +1,8 @@
+html,
 body {
   user-select: none;
   height: 100vh;
+  overflow: hidden;
 }
 
 #root, .App {

src/ui/App.tsx

@@ -13,6 +13,7 @@ import MiniDialog from './components/MiniDialog'
 import DownloadList from './components/common/DownloadList'
 import Downloads from './components/menu/Downloads'
 import NewsSection from './components/news/NewsSection'
+import RightBar from './components/RightBar'
 
 interface IProps {
   [key: string]: never;
@@ -52,6 +53,8 @@ class App extends React.Component<IProps, IState> {
           downFunc={() => this.setState({ downloadsOpen: !this.state.downloadsOpen })}
         />
 
+        <RightBar />
+
         <NewsSection />
 
         {

src/ui/components/RightBar.css

@@ -0,0 +1,27 @@
+.RightBar {
+  position: absolute;
+
+  display:flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+
+  height: 100vh;
+  width: 6%;
+  left: 94%;
+
+  background-color: rgba(77, 77, 77, 0.6);
+}
+
+.BarImg:hover {
+  cursor: pointer;
+}
+
+.RightBarInner > div {
+  margin: 30px 0;
+}
+
+.RightBar img {
+  height: 40px;
+  filter: invert(100%) sepia(0%) saturate(11%) hue-rotate(227deg) brightness(103%) contrast(105%);
+}

src/ui/components/RightBar.tsx

@@ -0,0 +1,31 @@
+import { invoke } from '@tauri-apps/api'
+import React from 'react'
+
+import Discord from  '../../resources/icons/discord.svg'
+import Github from  '../../resources/icons/github.svg'
+
+import './RightBar.css'
+
+const DISCORD = 'https://discord.gg/T5vZU6UyeG'
+const GITHUB = 'https://github.com/Grasscutters/Grasscutter'
+
+export default class RightBar extends React.Component {
+  openInBrowser(url: string) {
+    invoke('open_in_browser', { url })
+  }
+
+  render() {
+    return (
+      <div className="RightBar">
+        <div className="RightBarInner">
+          <div className="BarDiscord BarImg" onClick={() => this.openInBrowser(DISCORD)}>
+            <img src={Discord} />
+          </div>
+          <div className="BarGithub BarImg" onClick={() => this.openInBrowser(GITHUB)}>
+            <img src={Github} />
+          </div>
+        </div>
+      </div>
+    )
+  }
+}