From bb106bfe2725890b21a55170d0690b130ced6443 Mon Sep 17 00:00:00 2001 From: Sean Boult <996134+Hacksore@users.noreply.github.com> Date: Sat, 18 Nov 2023 10:16:24 -0600 Subject: [PATCH] Fix hover on windows and add channel to title --- apps/desktop/index.html | 2 +- apps/desktop/src/App.tsx | 14 ++------ apps/desktop/src/components/nav-bar.tsx | 47 +++++++++++++------------ apps/desktop/src/components/user.tsx | 3 +- apps/desktop/src/config.ts | 1 - apps/desktop/src/rpc/manager.ts | 6 ++-- apps/desktop/src/store.ts | 14 +++++--- apps/desktop/src/styles.css | 19 +++++++--- 8 files changed, 55 insertions(+), 51 deletions(-) diff --git a/apps/desktop/index.html b/apps/desktop/index.html index 0f83c981..ad2f6e6f 100644 --- a/apps/desktop/index.html +++ b/apps/desktop/index.html @@ -6,7 +6,7 @@ overlayed - +
diff --git a/apps/desktop/src/App.tsx b/apps/desktop/src/App.tsx index cca068f1..a12abd53 100644 --- a/apps/desktop/src/App.tsx +++ b/apps/desktop/src/App.tsx @@ -1,5 +1,5 @@ import { useSocket } from "./rpc/manager"; -import { Routes, Route, useLocation } from "react-router-dom"; +import { Routes, Route } from "react-router-dom"; import { Main } from "./views/main"; import { Channel } from "./views/channel"; @@ -7,7 +7,6 @@ import { Settings } from "./views/settings"; import { Error } from "./views/error"; import { NavBar } from "./components/nav-bar"; import { useClickthrough } from "./use-clickthrough"; -import { useBorder } from "./use-border"; import { useDisableContextMenu } from "./use-disable-context-menu"; function App() { @@ -15,18 +14,9 @@ function App() { useDisableContextMenu(); const { clickthrough } = useClickthrough(); - const { mouseInViewport } = useBorder(); - const location = useLocation(); - - const border = - !clickthrough && mouseInViewport && location.pathname === "/channel" - ? "hover:border-blue-500" - : "border-transparent"; - return (
diff --git a/apps/desktop/src/components/nav-bar.tsx b/apps/desktop/src/components/nav-bar.tsx index 68e6ca69..3ffc2bc9 100644 --- a/apps/desktop/src/components/nav-bar.tsx +++ b/apps/desktop/src/components/nav-bar.tsx @@ -4,10 +4,12 @@ import { Settings, Pin } from "lucide-react"; import { invoke } from "@tauri-apps/api"; import overlayedConfig from "../config"; import { Button } from "./ui/button"; +import { useAppStore } from "../store"; export const NavBar = ({ clickthrough }: { clickthrough: boolean }) => { const location = useLocation(); const navigate = useNavigate(); + const { currentChannel } = useAppStore(); const opacity = clickthrough && location.pathname === "/channel" ? "opacity-0" @@ -18,34 +20,35 @@ export const NavBar = ({ clickthrough }: { clickthrough: boolean }) => { data-tauri-drag-region className={`${opacity} cursor-default rounded-t-lg font-bold select-none pr-3 pl-3 p-2 bg-zinc-900`} > -
-
overlayed
-
+
+
logo +
+ {currentChannel?.name} +
+
+
+ +
-
- -
- -
); diff --git a/apps/desktop/src/components/user.tsx b/apps/desktop/src/components/user.tsx index fb45c1d9..13c8a0dd 100644 --- a/apps/desktop/src/components/user.tsx +++ b/apps/desktop/src/components/user.tsx @@ -16,7 +16,7 @@ export const User = ({ item }: { item: OverlayedUser }) => { const avatarClass = selfMuted || selfDeafened ? "text-red-500" : ""; return ( -
+
@@ -39,7 +39,6 @@ export const User = ({ item }: { item: OverlayedUser }) => {

{item.username}

diff --git a/apps/desktop/src/config.ts b/apps/desktop/src/config.ts index a7562533..16ab471d 100644 --- a/apps/desktop/src/config.ts +++ b/apps/desktop/src/config.ts @@ -26,7 +26,6 @@ export class Config { const config = await readTextFile(this.configPath); this.config = JSON.parse(config); } catch (e) { - console.log(e); this.config = DEFAULT_OVERLAYED_CONFIG; this.save(); } diff --git a/apps/desktop/src/rpc/manager.ts b/apps/desktop/src/rpc/manager.ts index e7ffee72..04122611 100644 --- a/apps/desktop/src/rpc/manager.ts +++ b/apps/desktop/src/rpc/manager.ts @@ -179,8 +179,7 @@ class SocketManager { this.store.clearUsers(); if (this.store.currentChannel) { - console.log("unsub from channel", this.store.currentChannel); - this.channelEvents(RPCCommand.UNSUBSCRIBE, this.store.currentChannel); + this.channelEvents(RPCCommand.UNSUBSCRIBE, this.store.currentChannel.id); } // after unsub we clear the channel @@ -225,7 +224,8 @@ class SocketManager { this.store.setUsers(payload.data.voice_states); // set the current channel - this.store.setCurrentChannel(payload.data.id); + console.log(payload.data) + this.store.setCurrentChannel(payload.data); } } diff --git a/apps/desktop/src/store.ts b/apps/desktop/src/store.ts index fc4f7a1c..6cdb85f7 100644 --- a/apps/desktop/src/store.ts +++ b/apps/desktop/src/store.ts @@ -28,7 +28,10 @@ const createUserStateItem = (payload: VoiceStateUser) => { export interface AppState { clickThrough: boolean; me: OverlayedUser | null; - currentChannel: string | null; + currentChannel: { + id: string; + name: string; + } | null; users: Record; } @@ -40,7 +43,8 @@ export interface AppActions { clearUsers: () => void; removeUser: (id: string) => void; addUser: (user: VoiceStateUser) => void; - setCurrentChannel: (channel: string | null) => void; + // TODO: type this + setCurrentChannel: (channel: any) => void; setMe: (user: OverlayedUser | null) => void; } @@ -119,11 +123,11 @@ export const useAppStore = create()( set((state) => { const tempUsers = { ...state.users }; tempUsers[item.user.id] = createUserStateItem(item); - state.users = sortOverlayedUsers(state.me?.id, tempUsers); + state.users = sortOverlayedUsers(state.me?.id, tempUsers); }), - setCurrentChannel: (channelId: string | null) => + setCurrentChannel: (channel) => set((state) => { - state.currentChannel = channelId; + state.currentChannel = channel; }), setClickThrough: (enabled: boolean) => set((state) => { diff --git a/apps/desktop/src/styles.css b/apps/desktop/src/styles.css index 74344123..f9a29f79 100644 --- a/apps/desktop/src/styles.css +++ b/apps/desktop/src/styles.css @@ -1,10 +1,19 @@ @tailwind base; -@tailwind components; @tailwind utilities; +html { + height: calc(100vh - 2px); + border: 2px solid transparent; + border-radius: 8px 8px 0 0; +} + +html:hover { + border-color: blueviolet; +} + body { - position: fixed; - width: 100%; - height: 100%; - overflow: hidden; + position: fixed; + width: 100%; + height: 100%; + overflow: hidden; }