Fix hover on windows and add channel to title

overlayeddev · Nov 18, 2023 · bb106bf · bb106bf
1 parent be197ab
commit bb106bf
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 51 deletions.
diff --git a/apps/desktop/index.html b/apps/desktop/index.html
@@ -6,7 +6,7 @@
     <title>overlayed</title>
   </head>
 
-  <body>
+  <body style="padding: 0 4px 0 0">
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

diff --git a/apps/desktop/src/App.tsx b/apps/desktop/src/App.tsx
@@ -1,32 +1,22 @@
 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";
 
 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() {
   useSocket();
   useDisableContextMenu();
 
   const { clickthrough } = useClickthrough();
-  const { mouseInViewport } = useBorder();
-  const location = useLocation();
-
-  const border =
-    !clickthrough && mouseInViewport && location.pathname === "/channel"
-      ? "hover:border-blue-500"
-      : "border-transparent";
-
   return (
     <div
-      data-tauri-drag-region
-      className={`text-white h-screen select-none ${border} border-transparent border-2 rounded-lg bg-zinc-900}`}
+      className={`text-white h-screen select-none rounded-lg bg-zinc-900}`}
     >
       <NavBar clickthrough={clickthrough} />
       <Routes>

diff --git 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`}
     >
-      <div className="inline">
-        <div data-tauri-drag-region className="hidden md:inline">overlayed</div>
-        <div data-tauri-drag-region className="md:hidden">
+      <div data-tauri-drag-region className="flex justify-between">
+        <div className="flex items-center">
           <img
             src="/img/32x32.png"
             alt="logo"
             data-tauri-drag-region
-            className="w-8 h-8"
+            className="w-8 h-8 mr-2"
           />
+          <div data-tauri-drag-region className="hidden md:inline">
+            {currentChannel?.name}
+          </div>
+        </div>
+        <div>
+          <Button intent="secondary" size="small">
+            <Pin
+              size={20}
+              onClick={() => {
+                invoke("toggle_clickthrough");
+                overlayedConfig.set("clickthrough", !clickthrough);
+                navigate("/channel");
+              }}
+            />
+          </Button>
+          <Button intent="secondary" size="small">
+            <Link to="/settings">
+              <Settings size={20} />
+            </Link>
+          </Button>
         </div>
-      </div>
-
-      <div className="float-right hidden md:flex items-center gap-3">
-        <Button intent="secondary" size="small">
-          <Pin
-            size={20}
-            onClick={() => {
-              invoke("toggle_clickthrough");
-              overlayedConfig.set("clickthrough", !clickthrough);
-              navigate("/channel");
-            }}
-          />
-        </Button>
-        <Button intent="secondary" size="small">
-          <Link to="/settings">
-            <Settings size={20} />
-          </Link>
-        </Button>
       </div>
     </div>
   );

diff --git 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 (
-    <div data-tauri-drag-region className="flex py-1 p-2 items-center">
+    <div className="flex py-1 p-2 items-center">
       <div
         className={`pointer-events-none relative rounded-full border-2 mr-2 ${avatarClass} ${talkingClass}`}
       >
@@ -39,7 +39,6 @@ export const User = ({ item }: { item: OverlayedUser }) => {
       </div>
 
       <div
-        data-tauri-drag-region
         className={`hidden pointer-events-none md:flex items-center rounded-md bg-zinc-800 ${mutedClass} p-1 pl-2 pr-2`}
       >
         <p>{item.username}</p>

diff --git 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
@@ -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
@@ -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<string, OverlayedUser>;
 }
 
@@ -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<AppState & AppActions>()(
       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
@@ -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;
 }