Switch to radix

apps/desktop/package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@icons-pack/react-simple-icons": "^9.1.0",
+    "@radix-ui/themes": "^2.0.1",
     "@tanstack/react-router": "0.0.1-beta.204",
     "@tauri-apps/api": "^1.5.0",
     "@uidotdev/usehooks": "^2.4.1",
@@ -30,13 +31,13 @@
     "zustand": "^4.4.5"
   },
   "devDependencies": {
-    "eslint-config-custom": "*",
     "@tauri-apps/cli": "^1.5.0",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@types/uuid": "^9.0.6",
     "@vitejs/plugin-react": "^4.0.3",
     "autoprefixer": "^10.4.16",
+    "eslint-config-custom": "*",
     "postcss": "^8.4.31",
     "tailwindcss": "^3.3.5",
     "typescript": "^5.0.2",

apps/desktop/src/App.tsx

@@ -1,10 +1,10 @@
 import { useSocket } from "./rpc/manager";
 import { Routes, Route } from "react-router-dom";
-import { Main } from "./views/main";
-import { Channel } from "./views/channel";
+import { MainView } from "./views/main";
+import { ChannelView } from "./views/channel";
 
-import { Settings } from "./views/settings";
-import { Error } from "./views/error";
+import { SettingsView } from "./views/settings";
+import { ErrorView } from "./views/error";
 import { NavBar } from "./components/nav-bar";
 import { useClickthrough } from "./use-clickthrough";
 import { useDisableContextMenu } from "./use-disable-context-menu";
@@ -18,13 +18,13 @@ function App() {
   const { clickthrough } = useClickthrough();
 
   return (
-    <div className={`text-white h-screen select-none rounded-lg bg-zinc-900}`}>
+    <div className="text-white h-screen select-none rounded-lg">
       <NavBar clickthrough={clickthrough} />
       <Routes>
-        <Route path="/" Component={Main} />
-        <Route path="/channel" Component={Channel} />
-        <Route path="/settings" Component={Settings} />
-        <Route path="/error" Component={Error} />
+        <Route path="/" Component={MainView} />
+        <Route path="/channel" Component={ChannelView} />
+        <Route path="/settings" Component={SettingsView} />
+        <Route path="/error" Component={ErrorView} />
       </Routes>
     </div>
   );

apps/desktop/src/components/nav-bar.tsx

@@ -3,7 +3,7 @@ import { Settings, Pin } from "lucide-react";
 
 import { invoke } from "@tauri-apps/api";
 import overlayedConfig from "../config";
-import { Button } from "./ui/button";
+import { Button } from "@radix-ui/themes";
 import { useAppStore } from "../store";
 
 export const NavBar = ({ clickthrough }: { clickthrough: boolean }) => {
@@ -29,7 +29,7 @@ export const NavBar = ({ clickthrough }: { clickthrough: boolean }) => {
           )}
         </div>
         <div className="hidden md:flex">
-          <Button intent="secondary" size="small">
+          <button>
             <Pin
               size={20}
               onClick={() => {
@@ -38,12 +38,12 @@ export const NavBar = ({ clickthrough }: { clickthrough: boolean }) => {
                 navigate("/channel");
               }}
             />
-          </Button>
-          <Button intent="secondary" size="small">
+          </button>
+          <button>
             <Link to="/settings">
               <Settings size={20} />
             </Link>
-          </Button>
+          </button>
         </div>
       </div>
     </div>

apps/desktop/src/main.tsx

@@ -2,11 +2,15 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
 import { HashRouter } from "react-router-dom";
+import { Theme } from "@radix-ui/themes";
+import "@radix-ui/themes/styles.css";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <HashRouter>
-      <App />
+      <Theme panelBackground="translucent" hasBackground={false}>
+        <App />
+      </Theme>
     </HashRouter>
   </React.StrictMode>
 );

apps/desktop/src/styles.css

@@ -1,3 +1,4 @@
 @tailwind base;
 @tailwind utilities;
+@tailwind components;
 

apps/desktop/src/views/channel.tsx

@@ -1,7 +1,7 @@
 import { User } from "../components/user";
 import { useAppStore } from "../store";
 
-export const Channel = () => {
+export const ChannelView = () => {
   const { users } = useAppStore();
 
   return (

apps/desktop/src/views/error.tsx

@@ -1,9 +1,9 @@
 import { Link } from "react-router-dom";
-import { Button } from "../components/ui/button";
+import { Button } from "@radix-ui/themes";
 import { useSetWindowSize } from "../use-set-size";
 import { useAppStore } from "../store";
 
-export const Error = () => {
+export const ErrorView = () => {
   useSetWindowSize({ width: 400, height: 600 });
   const { discordErrors } = useAppStore();
 

apps/desktop/src/views/main.tsx

@@ -2,10 +2,10 @@ import { useSocket } from "../rpc/manager";
 import { useAppStore } from "../store";
 import { useEffect } from "react";
 import { useSetWindowSize } from "../use-set-size";
-import { Button } from "../components/ui/button";
+import { Button } from "@radix-ui/themes";
 import { Link } from "react-router-dom";
 
-export const Main = () => {
+export const MainView = () => {
   useSocket();
   useSetWindowSize({ width: 400, height: 600 });
   const { resetErrors } = useAppStore();

apps/desktop/src/views/settings.tsx

@@ -1,14 +1,13 @@
 import { useNavigate } from "react-router-dom";
-import { Button } from "../components/ui/button";
-import { Slider } from "../components/ui/slider";
+import { Button } from "@radix-ui/themes";
 import { useAppStore } from "../store";
 import { LogicalSize, LogicalPosition, currentMonitor, appWindow } from "@tauri-apps/api/window";
 import { useEffect, useRef, useState } from "react";
 
 const SETTINGS_WIDTH = 400;
 const SETTINGS_HEIGHT = 700;
 
-export const Settings = () => {
+export const SettingsView = () => {
   const navigate = useNavigate();
   const { me } = useAppStore();
   const lastSizeRef = useRef<LogicalSize | null>(null);