improve for desktop

packages/app/config/sidebar.json

@@ -15,7 +15,7 @@
         "id": "music",
         "path": "/music",
         "title": "Music",
-        "icon": "MdMusicVideo"
+        "icon": "MdMusicNote"
     },
     {
         "id": "groups",

packages/app/package.json

@@ -40,6 +40,7 @@
         "@mui/material": "^5.11.9",
         "@ragestudio/cordova-nfc": "^1.2.0",
         "@sentry/browser": "^7.64.0",
+        "@tauri-apps/api": "^1.5.4",
         "@tsmx/human-readable": "^1.0.7",
         "antd": "^5.6.4",
         "antd-mobile": "^5.31.0",

packages/app/src/App.jsx

@@ -6,6 +6,9 @@ import { EviteRuntime } from "evite"
 import { Helmet } from "react-helmet"
 import { Translation } from "react-i18next"
 import * as Sentry from "@sentry/browser"
+import { invoke } from "@tauri-apps/api/tauri"
+import { Lightbox } from "react-modal-image"
+import * as antd from "antd"
 
 import { StatusBar, Style } from "@capacitor/status-bar"
 import { App as CapacitorApp } from "@capacitor/app"
@@ -15,9 +18,6 @@ import AuthModel from "@models/auth"
 import SessionModel from "@models/session"
 import UserModel from "@models/user"
 
-import { Lightbox } from "react-modal-image"
-import * as antd from "antd"
-
 import {
 	NotFound,
 	RenderError,
@@ -29,8 +29,8 @@ import {
 	PostCreator,
 } from "@components"
 import { DOMWindow } from "@components/RenderWindow"
-
 import { Icons } from "@components/Icons"
+import DesktopTopBar from "@components/DesktopTopBar"
 
 import { ThemeProvider } from "@cores/style/style.core.jsx"
 
@@ -52,6 +52,7 @@ class ComtyApp extends React.Component {
 	}
 
 	state = {
+		desktopMode: false,
 		session: null,
 		initialized: false,
 	}
@@ -77,6 +78,10 @@ class ComtyApp extends React.Component {
 				release: "comty-web-app",
 			})
 		}
+
+		if (window.__TAURI__) {
+			window.__TAURI__.invoke = invoke
+		}
 	}
 
 	static publicEvents = {}
@@ -250,7 +255,7 @@ class ComtyApp extends React.Component {
 				return await StatusBar.show()
 			},
 		},
-		maintenance:{
+		maintenance: {
 			clearInternalStorage: async () => {
 				antd.Modal.confirm({
 					title: "Clear internal storage",
@@ -431,7 +436,7 @@ class ComtyApp extends React.Component {
 		app.userData = user
 
 		await this.setState({
-			user
+			user: user,
 		})
 	}
 
@@ -444,6 +449,9 @@ class ComtyApp extends React.Component {
 			</Helmet>
 			<Router.InternalRouter>
 				<ThemeProvider>
+					{
+						window.__TAURI__ && <DesktopTopBar />
+					}
 					<Layout
 						user={this.state.user}
 						staticRenders={ComtyApp.staticRenders}

packages/app/src/components/DesktopTopBar/index.jsx

@@ -0,0 +1,12 @@
+import React from "react"
+
+import "./index.less"
+
+const DesktopTopBar = (props) => {
+    return <div
+        className="app-desktop_topbar_wrapper"
+        data-tauri-drag-region
+    />
+}
+
+export default DesktopTopBar

packages/app/src/components/DesktopTopBar/index.less

@@ -0,0 +1,14 @@
+.app-desktop_topbar_wrapper {
+    user-select: none;
+
+    position: absolute;
+
+    top: 0;
+    left: 0;
+
+    z-index: 99999;
+
+    width: 100vw;
+
+    height: 15px;
+}

packages/app/src/components/Layout/sidebar/index.jsx

@@ -352,6 +352,13 @@ export default class Sidebar extends React.Component {
 						onMouseEnter={this.onMouseEnter}
 						onMouseLeave={this.handleMouseLeave}
 					>
+						{
+							window.__TAURI__ && navigator.platform.includes("Mac") && <div
+								className="app_sidebar_tauri"
+								data-tauri-drag-region
+							/>
+						}
+
 						<div
 							className={classnames(
 								"app_sidebar",

packages/app/src/components/Layout/sidebar/index.less

@@ -1,25 +1,8 @@
 @import "@styles/vars.less";
 
-.siderender_wrapper {
+.app_sidebar_tauri {
-	//position: absolute;
+	width: 100%;
-	position: relative;
+	height: 10px;
-
-	z-index: 100;
-
-	left: 0;
-	top: 0;
-
-	height: 100vh;
-	height: 100dvh;
-
-	width: fit-content;
-
-	display: flex;
-	flex-direction: column;
-
-	align-items: center;
-
-	padding: 10px 20px;
 }
 
 .app_sidebar_wrapper {
@@ -31,11 +14,11 @@
 	z-index: 1000;
 
 	display: flex;
-	flex-direction: row;
+	flex-direction: column;
 
 	align-items: center;
 
-	gap: 20px;
+	gap: 10px;
 
 	width: fit-content;
 

packages/app/src/pages/auth/index.less

@@ -14,7 +14,7 @@
     .background {
         position: absolute;
 
-        z-index: 50;
+        z-index: 10;
 
         top: 0;
         left: 0;
@@ -40,7 +40,7 @@
 
     .wrapper {
         position: relative;
-        z-index: 55;
+        z-index: 15;
 
         display: flex;
         flex-direction: row;
@@ -52,13 +52,14 @@
         overflow: hidden;
 
         height: 50vh;
+        min-height: 500px;
         max-height: 500px;
 
         transition: all 250ms ease-in-out;
 
         background-color: var(--background-color-accent);
 
-        outline: 1px solid var(--border-color);
+        border: 1px solid var(--border-color);
 
         border-radius: 12px;
 

packages/app/src/pages/tv/live/[id].jsx

@@ -306,10 +306,19 @@ export default class StreamViewer extends React.Component {
             {this.props.query.id}
             <div className="livestream_player">
                 <div className="livestream_player_header">
+                    <div
+                        className="livestream_player_header_exit"
+                        onClick={() => app.location.back()}
+                    >
+                        <Icons.IoMdExit />
+                    </div>
+
                     {
                         this.state.stream
                             ? <>
                                 <div className="livestream_player_header_user">
+
+
                                     <UserPreview user={this.state.stream.user} />
 
                                     <div className="livestream_player_indicators">

packages/app/src/pages/tv/live/index.less

@@ -168,9 +168,11 @@ html {
             min-width: 20vw;
             max-width: 50vw;
 
-            margin: 20px;
+            margin: 25px;
             padding: 10px;
 
+            gap: 10px;
+
             background-color: var(--background-color-accent);
 
             border-radius: 12px;
@@ -188,12 +190,23 @@ html {
                 white-space: nowrap;
             }
 
+            .livestream_player_header_exit {
+                display: flex;
+                flex-direction: row;
+
+                width: fit-content;
+                height: fit-content;
+
+                svg {
+                    font-size: 1.5rem;
+                    margin: 0;
+                }
+            }
+            
             .livestream_player_header_user {
                 display: flex;
                 flex-direction: column;
 
-                margin-right: 20px;
-
                 .livestream_player_indicators {
                     display: flex;
                     flex-direction: row;

packages/app/src/pages/tv/tabs/livestreamsList/index.jsx

@@ -9,6 +9,7 @@ import SpectrumAPI from "@classes/SpectrumAPI"
 import useCenteredContainer from "@hooks/useCenteredContainer"
 
 import "./index.less"
+import classNames from "classnames"
 
 const fac = new FastAverageColor()
 
@@ -114,7 +115,14 @@ export default (props) => {
         return <antd.Skeleton active />
     }
 
-    return <div className="livestream_list">
+    return <div
+        className={classNames(
+            "livestream_list",
+            {
+                ["empty"]: R_Streams.length === 0,
+            }
+        )}
+    >
         {
             R_Streams.length === 0 && <antd.Result>
                 <h1>
@@ -132,8 +140,9 @@ export default (props) => {
         }
 
         {
-            R_Streams.length !== 0 && R_Streams.map((livestream) => {
+            R_Streams.length !== 0 && R_Streams.map((livestream, index) => {
                 return <LivestreamItem
+                    key={index}
                     livestream={livestream}
                     onClick={onClickItem}
                 />

packages/app/src/pages/tv/tabs/livestreamsList/index.less

@@ -33,14 +33,14 @@
         align-items: center;
 
         width: 100%;
-        height: 100%;
+        height: fit-content;
 
         padding: 10px;
         transition: all 150ms ease-in-out;
 
         background-color: var(--background-color-primary-2);
 
-        outline: 1px solid var(--border-color);
+        border: 1px solid var(--border-color);
         border-radius: @item_border_radius;
 
         cursor: pointer;