feat: setup electron

.github/workflows/desktop-build.yml

@@ -0,0 +1,37 @@
+name: Build Desktop app
+on:
+  push:
+    branches:
+      - main
+      - feature/electron-app
+  pull_request:
+    branches:
+      - main
+jobs:
+  build:
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os: [ubuntu-latest, macos-latest, windows-latest]
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v4
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: Install pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 10
+      - name: Install dependencies
+        run: pnpm install
+      - name: Build Desktop app
+        run: pnpm dist:desktop
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - name: Upload artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: OpenChat-${{ matrix.os }}
+          path: desktop/dist/*

.gitignore

@@ -60,3 +60,9 @@ apps/*/.next
 apps/*/dist
 apps/*/.turbo
 
+# Desktop build artifacts
+desktop/renderer/
+
+# Codex local metadata
+.codex
+.codex/

apps/frontend/next.config.js

@@ -34,6 +34,7 @@ const nextConfig = {
   poweredByHeader: false,
   compress: true,
   reactStrictMode: true,
+  output: 'standalone',
 
   async headers() {
     return [
@@ -61,6 +62,7 @@ const nextConfig = {
 
   experimental: {
     optimizePackageImports: ['lucide-react', 'framer-motion'],
+    webpackBuildWorker: false,
   },
 }
 

apps/frontend/package.json

@@ -4,7 +4,7 @@
   "type": "module",
   "scripts": {
     "dev": "next dev",
-    "build": "next build",
+    "build": "next build --webpack",
     "start": "next start",
     "lint": "eslint ."
   },

apps/frontend/src/app/providers/ClientProviders.tsx

@@ -11,6 +11,7 @@ import { GoogleOAuthProvider } from "@react-oauth/google"
 import ChannelCallManager from '../zone/_components/ChannelCallManager'
 import { AppQueryProvider } from '@/lib/query/provider'
 import type { AppUser } from '@/features/user/types'
+import { KeyboardShortcutsListener } from '@/components/KeyboardShortcutsListener'
 
 export default function ClientProviders({
   children,
@@ -27,6 +28,7 @@ export default function ClientProviders({
           <UserProvider>
             <RealtimeProvider>
               <NotificationsProvider>
+                <KeyboardShortcutsListener />
                 {/*<GlobalCallSystem />*/}
                 {children}
                 <GlobalCallProvider />

apps/frontend/src/app/settings/_components/SettingsSidebar.tsx

@@ -3,7 +3,7 @@
 import Link from 'next/link'
 import { usePathname, useRouter } from 'next/navigation'
 import { api, cn } from '@openchat/lib'
-import { User, Shield, Lock, Bell, Trash2, LogOut, ArrowLeft } from 'lucide-react'
+import { User, Shield, Lock, Bell, Trash2, LogOut, ArrowLeft, Keyboard } from 'lucide-react'
 import { useUserStore } from '@/app/stores/user-store'
 import { useChatsStore } from '@/app/stores/chat-store'
 import { useFriendsStore } from '@/app/stores/friends-store'
@@ -14,6 +14,7 @@ const tabs = [
   { name: 'Security', href: '/settings/security', icon: Shield },
   { name: 'Privacy', href: '/settings/privacy', icon: Lock },
   { name: 'Notifications', href: '/settings/notifications', icon: Bell },
+  { name: 'Keyboard', href: '/settings/keyboard', icon: Keyboard },
   { name: 'Account', href: '/settings/account', icon: Trash2 },
 ]
 

apps/frontend/src/app/settings/keyboard/page.tsx

@@ -0,0 +1,213 @@
+'use client'
+
+import { useState, useEffect, useCallback, useRef } from 'react'
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from 'packages/ui'
+import { Keyboard, X } from 'lucide-react'
+import { toast } from 'sonner'
+import {
+  loadShortcuts,
+  saveShortcuts,
+  formatShortcut,
+  isValidShortcut,
+  hasConflict,
+  normalizeKey,
+  MODIFIER_KEYS,
+  type StoredShortcuts,
+} from '@/lib/keyboard-shortcuts'
+
+interface ShortcutRecorderProps {
+  action: 'mute' | 'deafen'
+  value: string
+  onChange: (value: string) => void
+  otherShortcut: string
+}
+
+function ShortcutRecorder({ action, value, onChange, otherShortcut }: ShortcutRecorderProps) {
+  const [recording, setRecording] = useState(false)
+  const [currentKeys, setCurrentKeys] = useState<string[]>([])
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const handleKeyDown = useCallback((e: KeyboardEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+
+    if (!recording) return
+
+    const key = normalizeKey(e.key)
+
+    if (key === 'escape') {
+      setRecording(false)
+      setCurrentKeys([])
+      return
+    }
+
+    const keys: string[] = []
+    if (e.ctrlKey || e.metaKey) keys.push('ctrl')
+    if (e.shiftKey) keys.push('shift')
+    if (e.altKey) keys.push('alt')
+    if (e.metaKey) keys.push('meta')
+
+    if (!MODIFIER_KEYS.has(key)) {
+      keys.push(key)
+    }
+
+    if (keys.length > 0) {
+      setCurrentKeys(keys)
+    }
+  }, [recording])
+
+  const handleKeyUp = useCallback(() => {
+    if (!recording || currentKeys.length === 0) return
+
+    if (!isValidShortcut(currentKeys)) {
+      toast.error('Shortcut must include at least one non-modifier key')
+      setCurrentKeys([])
+      return
+    }
+
+    if (hasConflict(currentKeys, { mute: action === 'mute' ? formatShortcut(currentKeys) : value, deafen: action === 'deafen' ? formatShortcut(currentKeys) : otherShortcut })) {
+      toast.error('This shortcut is already used')
+      setCurrentKeys([])
+      return
+    }
+
+    onChange(formatShortcut(currentKeys))
+    setRecording(false)
+    setCurrentKeys([])
+  }, [recording, currentKeys, onChange, value, otherShortcut, action])
+
+  useEffect(() => {
+    if (recording) {
+      document.addEventListener('keydown', handleKeyDown, true)
+      document.addEventListener('keyup', handleKeyUp, true)
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown, true)
+      document.removeEventListener('keyup', handleKeyUp, true)
+    }
+  }, [recording, handleKeyDown, handleKeyUp])
+
+  const startRecording = () => {
+    setRecording(true)
+    setCurrentKeys([])
+  }
+
+  const clearShortcut = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    onChange('')
+  }
+
+  const label = action === 'mute' ? 'Mute' : 'Deafen'
+
+  return (
+    <div className="flex items-center justify-between gap-4">
+      <span className="text-sm font-medium text-zinc-200">{label}</span>
+      <div className="flex items-center gap-2">
+        {recording ? (
+          <div className="flex items-center gap-1.5 px-3 py-1.5 bg-purple-600/20 border border-purple-500/50 rounded-md min-w-[120px]">
+            <div className="w-2 h-2 bg-purple-500 rounded-full animate-pulse" />
+            <span className="text-sm text-purple-300">
+              {currentKeys.length > 0 ? formatShortcut(currentKeys) : 'Press keys...'}
+            </span>
+          </div>
+        ) : value ? (
+          <div className="flex items-center gap-1 px-3 py-1.5 bg-white/5 border border-white/10 rounded-md min-w-[120px]">
+            <Keyboard className="w-3.5 h-3.5 text-zinc-400" />
+            <span className="text-sm text-zinc-200 font-mono">{value}</span>
+            <button
+              onClick={clearShortcut}
+              className="ml-1 p-0.5 hover:bg-white/10 rounded text-zinc-500 hover:text-zinc-300 transition-colors"
+              title="Clear shortcut"
+            >
+              <X className="w-3 h-3" />
+            </button>
+          </div>
+        ) : (
+          <button
+            onClick={startRecording}
+            className="px-3 py-1.5 text-sm text-zinc-400 hover:text-white bg-white/5 hover:bg-white/10 border border-white/10 rounded-md transition-colors min-w-[120px]"
+          >
+            Not set
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default function KeyboardShortcutsPage() {
+  const [shortcuts, setShortcuts] = useState<StoredShortcuts>({ mute: '', deafen: '' })
+  const [isLoaded, setIsLoaded] = useState(false)
+
+  useEffect(() => {
+    const loaded = loadShortcuts()
+    setShortcuts(loaded)
+    setIsLoaded(true)
+  }, [])
+
+  const handleChange = useCallback((action: 'mute' | 'deafen', value: string) => {
+    setShortcuts(prev => {
+      const updated = { ...prev, [action]: value }
+      saveShortcuts(updated)
+      return updated
+    })
+    if (value) {
+      toast.success(`${action === 'mute' ? 'Mute' : 'Deafen'} shortcut updated`)
+    }
+  }, [])
+
+  if (!isLoaded) {
+    return null
+  }
+
+  return (
+    <div className="max-w-3xl space-y-10">
+      <div className="space-y-1">
+        <h1 className="text-2xl font-semibold">Keyboard Shortcuts</h1>
+        <p className="text-muted-foreground text-sm">
+          Customize keyboard shortcuts for quick mute and deafen actions.
+        </p>
+      </div>
+
+      <Card className="bg-[#111a2b] border border-white/5">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Keyboard className="w-5 h-5" />
+            Shortcuts
+          </CardTitle>
+          <CardDescription>
+            Press the button to record a new shortcut. Use combinations like Ctrl+Shift+M or Alt+D.
+          </CardDescription>
+        </CardHeader>
+
+        <CardContent className="space-y-4">
+          <ShortcutRecorder
+            action="mute"
+            value={shortcuts.mute}
+            onChange={(value) => handleChange('mute', value)}
+            otherShortcut={shortcuts.deafen}
+          />
+          <ShortcutRecorder
+            action="deafen"
+            value={shortcuts.deafen}
+            onChange={(value) => handleChange('deafen', value)}
+            otherShortcut={shortcuts.mute}
+          />
+        </CardContent>
+      </Card>
+
+      <Card className="bg-[#111a2b] border border-white/5">
+        <CardHeader>
+          <CardTitle className="text-base">Tips</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-2 text-sm text-zinc-400">
+          <p>• Shortcuts work only when the app window is focused</p>
+          <p>• Shortcuts are disabled when typing in input fields</p>
+          <p>• Press Escape to cancel recording</p>
+          <p>• Each shortcut must include at least one non-modifier key</p>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

apps/frontend/src/app/settings/profile/page.tsx

@@ -18,7 +18,7 @@ import { useUserStore } from '@/app/stores/user-store'
 import { toast } from 'sonner'
 import { useForm } from 'react-hook-form'
 import { useState, useRef, useEffect } from 'react'
-import { api } from '@openchat/lib'
+import { api, getAvatarUrl } from '@openchat/lib'
 
 type FormValues = {
   name: string
@@ -217,7 +217,7 @@ export default function ProfilePage() {
             <Avatar className="h-28 w-28 ring-2 ring-border">
               {user.avatar ? (
                 <img
-                  src={`${process.env.NEXT_PUBLIC_API_URL}/uploads/${user.avatar}`}
+                  src={getAvatarUrl(user.avatar)}
                   className="h-full w-full object-cover rounded-full"
                 />
               ) : (

apps/frontend/src/app/zone/_components/MobileLayout.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useMemo, useRef } from 'react'
 import { useRouter, usePathname } from 'next/navigation'
-import { cn } from '@openchat/lib'
+import { cn, getAvatarUrl } from '@openchat/lib'
 import Link from 'next/link'
 import { Radiation } from 'lucide-react'
 
@@ -182,7 +182,7 @@ function TabIcon({ tabId, isActive, user }: { tabId: string; isActive: boolean;
     case 'profile':
       return user?.avatar ? (
         <img
-          src={`${process.env.NEXT_PUBLIC_API_URL}/uploads/${user.avatar}`}
+          src={getAvatarUrl(user.avatar)}
           alt="Profile"
           className={cn(
             'w-6 h-6 rounded-full object-cover',

apps/frontend/src/app/zone/_components/UserBar.tsx

@@ -3,7 +3,7 @@
 import { Avatar, AvatarFallback } from 'packages/ui'
 import { Settings, LogOut, Mic, MicOff, Headphones } from 'lucide-react'
 import { useRouter } from 'next/navigation'
-import { getAvatarUrl, cn } from '@openchat/lib'
+import { getApiBaseUrl, getAvatarUrl, cn } from '@openchat/lib'
 import { useUserStore } from '@/app/stores/user-store'
 import { useState, useRef, useEffect } from 'react'
 import { useCallStore } from '@/app/stores/call-store'
@@ -37,7 +37,8 @@ export default function UserBar({ user: serverUser }: { user: SidebarUser | null
 
   const handleLogout = async () => {
     try {
-      await fetch(`${process.env.NEXT_PUBLIC_API_URL}/auth/logout`, {
+      const apiUrl = getApiBaseUrl()
+      await fetch(`${apiUrl}/auth/logout`, {
         method: 'POST',
         credentials: 'include',
       })