Folder System | vasak-desktop
Detailed guide to the project’s folder structure.
Root Structure#
Vue.js frontend"] Root --> SrcTauri["π src-tauri/
Rust backend"] Root --> IndexHTML["π index.html"] Root --> PackageJSON["π package.json"] Root --> TSConfig["π tsconfig.json"] Root --> ViteConfig["π vite.config.ts"] Root --> License["π LICENSE"] Root --> Readme["π README.md"] Root --> GitIgnore["π .gitignore"] style Root fill:#667eea,stroke:#764ba2,color:#fff style Src fill:#f093fb,stroke:#f5576c,color:#fff style SrcTauri fill:#4facfe,stroke:#00f2fe,color:#fff style IndexHTML fill:#fa709a,stroke:#fee140,color:#fff style PackageJSON fill:#30cfd0,stroke:#330867,color:#fff style TSConfig fill:#a8edea,stroke:#fed6e3,color:#333 style ViteConfig fill:#ffecd2,stroke:#fcb69f,color:#333 style License fill:#ff9a9e,stroke:#fecfef,color:#333 style Readme fill:#fbc2eb,stroke:#a6c1ee,color:#333 style GitIgnore fill:#fdcbf1,stroke:#e6dee9,color:#333
Frontend (src/)#
Frontend Root#
Root component"] SrcRoot --> MainTs["π main.ts
Entry point"] SrcRoot --> StyleCss["π style.css
Global styles"] SrcRoot --> ViteEnv["π vite-env.d.ts
Vite types"] SrcRoot --> AssetsDir["π assets/
Static assets"] SrcRoot --> ComponentsDir["π components/
Reusable components"] SrcRoot --> InterfacesDir["π interfaces/
TS interfaces"] SrcRoot --> LayoutsDir["π layouts/
Layouts/templates"] SrcRoot --> RoutesDir["π routes/
Routing"] SrcRoot --> ToolsDir["π tools/
Controllers"] SrcRoot --> TypesDir["π types/
TS types"] SrcRoot --> ViewsDir["π views/
Views/pages"] style SrcRoot fill:#667eea,stroke:#764ba2,color:#fff style AppVue fill:#f093fb,stroke:#f5576c,color:#fff style MainTs fill:#f093fb,stroke:#f5576c,color:#fff style StyleCss fill:#f093fb,stroke:#f5576c,color:#fff style ViteEnv fill:#f093fb,stroke:#f5576c,color:#fff style AssetsDir fill:#4facfe,stroke:#00f2fe,color:#fff style ComponentsDir fill:#4facfe,stroke:#00f2fe,color:#fff style InterfacesDir fill:#4facfe,stroke:#00f2fe,color:#fff style LayoutsDir fill:#4facfe,stroke:#00f2fe,color:#fff style RoutesDir fill:#4facfe,stroke:#00f2fe,color:#fff style ToolsDir fill:#4facfe,stroke:#00f2fe,color:#fff style TypesDir fill:#4facfe,stroke:#00f2fe,color:#fff style ViewsDir fill:#4facfe,stroke:#00f2fe,color:#fff
src/assets/#
Static assets (images, vectors):
Raster images"] Assets --> Vectors["π vectors/
Vector graphics"] Img --> Logo["πΌοΈ logo.png"] Img --> BgJpg["πΌοΈ background.jpg"] Img --> ImgMore["π ..."] Vectors --> Icons["π icons/"] Vectors --> Illustrations["π illustrations/"] Vectors --> VecMore["π ..."] style Assets fill:#667eea,stroke:#764ba2,color:#fff style Img fill:#4facfe,stroke:#00f2fe,color:#fff style Vectors fill:#4facfe,stroke:#00f2fe,color:#fff style Logo fill:#43e97b,stroke:#38f9d7,color:#fff style BgJpg fill:#43e97b,stroke:#38f9d7,color:#fff style ImgMore fill:#43e97b,stroke:#38f9d7,color:#fff style Icons fill:#43e97b,stroke:#38f9d7,color:#fff style Illustrations fill:#43e97b,stroke:#38f9d7,color:#fff style VecMore fill:#43e97b,stroke:#38f9d7,color:#fff
Usage:
| |
src/components/#
Reusable Vue components:
Menu search"] Components --> Areas["π areas/
Large areas"] Components --> Buttons["π buttons/
Buttons"] Components --> Cards["π cards/
Cards"] Components --> Controls["π controls/
Interactive controls"] Components --> Icon["π icon/
Icons"] Components --> Widgets["π widgets/
Reusable widgets"] Areas --> Audio["π audio/"] Areas --> Bluetooth["π± bluetooth/"] Areas --> Network["π network/"] Areas --> Panel["π panel/"] Areas --> ControlCenter["βοΈ control-center/"] Areas --> Menu["π― menu/"] Areas --> Configuration["βοΈ configuration/"] Buttons --> BtnMenu["π AppMenuButton.vue"] Buttons --> BtnCategory["π CategoryMenuPill.vue"] Buttons --> BtnSidebar["π ConfigSidebarButton.vue"] Buttons --> BtnSession["π SessionButton.vue"] Buttons --> BtnBattery["π TrayIconBattery.vue"] Cards --> CardMenu["π΄ AppMenuCard.vue"] Cards --> CardBT["π΄ BluetoothDeviceCard.vue"] Cards --> CardWeather["π΄ CurrentWeatherCard.vue"] Cards --> CardWiFi["π΄ NetworkWiFiCard.vue"] Controls --> CtrlAudio["ποΈ AudioDeviceSelector.vue"] Controls --> CtrlBT["ποΈ BluetoothControl.vue"] Controls --> CtrlBrightness["ποΈ BrightnessControl.vue"] Controls --> CtrlNetwork["ποΈ NetworkControl.vue"] Widgets --> ClockWidget["β° DesktopClockWidget.vue"] Widgets --> MusicWidget["π΅ MusicWidget.vue"] Widgets --> WeatherWidget["π€οΈ WeatherWidget.vue"] style Components fill:#667eea,stroke:#764ba2,color:#fff style SearchMenu fill:#f093fb,stroke:#f5576c,color:#fff style Areas fill:#4facfe,stroke:#00f2fe,color:#fff style Buttons fill:#4facfe,stroke:#00f2fe,color:#fff style Cards fill:#4facfe,stroke:#00f2fe,color:#fff style Controls fill:#4facfe,stroke:#00f2fe,color:#fff style Icon fill:#4facfe,stroke:#00f2fe,color:#fff style Widgets fill:#4facfe,stroke:#00f2fe,color:#fff
Structure of a component:
| |
src/interfaces/#
TypeScript interface definitions:
Battery interface"] Interfaces --> Notifications["π notifications.ts
Notification interface"] Interfaces --> Tray["π tray.ts
Tray interface"] style Interfaces fill:#667eea,stroke:#764ba2,color:#fff style Battery fill:#43e97b,stroke:#38f9d7,color:#fff style Notifications fill:#43e97b,stroke:#38f9d7,color:#fff style Tray fill:#43e97b,stroke:#38f9d7,color:#fff
Example:
| |
src/layouts/#
Page layouts/templates:
Layout for the configuration"] style Layouts fill:#667eea,stroke:#764ba2,color:#fff style ConfigLayout fill:#f093fb,stroke:#f5576c,color:#fff
Usage: wraps views to keep the structure consistent
src/routes/#
Vue Router routing configuration:
Route configuration"] style Routes fill:#667eea,stroke:#764ba2,color:#fff style IndexTs fill:#4facfe,stroke:#00f2fe,color:#fff
Example:
| |
src/tools/#
Controllers and services (business logic):
Battery logic"] Tools --> BluetoothCtrl["π bluetooth.controller.ts
Bluetooth logic"] Tools --> NetworkCtrl["π network.controller.ts
Network logic"] Tools --> TrayCtrl["π tray.controller.ts
Tray logic"] style Tools fill:#667eea,stroke:#764ba2,color:#fff style BatteryCtrl fill:#feca57,stroke:#ff9a56,color:#fff style BluetoothCtrl fill:#feca57,stroke:#ff9a56,color:#fff style NetworkCtrl fill:#feca57,stroke:#ff9a56,color:#fff style TrayCtrl fill:#feca57,stroke:#ff9a56,color:#fff
Responsibility:
- Call backend commands
- Process data
- Handle complex logic
src/types/#
TypeScript type definitions:
Types from external libraries"] style Types fill:#667eea,stroke:#764ba2,color:#fff style LibVasakTypes fill:#fa709a,stroke:#f5576c,color:#fff
Usage: extends library types or defines global types
src/views/#
Main views/pages:
Control center"] Views --> Desktop["π DesktopView.vue
Desktop"] Views --> Menu["π MenuView.vue
App menu"] Views --> Panel["π PanelView.vue
Panel"] Views --> Applets["π applets/
Mini-applications"] Views --> Apps["π apps/
Applications"] Applets --> AudioApplet["π AudioAppletView.vue
Audio applet"] Applets --> BluetoothApplet["π BluetoothAppletView.vue
Bluetooth applet"] Applets --> NetworkApplet["π NetworkAppletView.vue
Network applet"] Apps --> Settings["π SettingsApp.vue
Settings application"] Apps --> FileManager["π FileManagerView.vue
File manager"] style Views fill:#667eea,stroke:#764ba2,color:#fff style ControlCenter fill:#f093fb,stroke:#f5576c,color:#fff style Desktop fill:#f093fb,stroke:#f5576c,color:#fff style Menu fill:#f093fb,stroke:#f5576c,color:#fff style Panel fill:#f093fb,stroke:#f5576c,color:#fff style Applets fill:#4facfe,stroke:#00f2fe,color:#fff style Apps fill:#4facfe,stroke:#00f2fe,color:#fff style AudioApplet fill:#43e97b,stroke:#38f9d7,color:#fff style BluetoothApplet fill:#43e97b,stroke:#38f9d7,color:#fff style NetworkApplet fill:#43e97b,stroke:#38f9d7,color:#fff style Settings fill:#43e97b,stroke:#38f9d7,color:#fff style FileManager fill:#43e97b,stroke:#38f9d7,color:#fff
Backend (src-tauri/)#
Tauri Structure#
Rust source code"] TauriRoot --> Target["π target/
Build"] TauriRoot --> Tests["π tests/"] Src --> LibRs["π lib.rs
Main modules"] Src --> MainRs["π main.rs
Entry point"] Src --> ErrorRs["π error.rs"] Src --> StructsRs["π structs.rs"] Src --> Commands["π commands/
IPC handlers"] Src --> WindowMgr["π window_manager/"] Src --> Audio["π audio.rs"] Src --> DBus["π dbus_service.rs"] Src --> Tray["π tray/"] Src --> Utils["π utils/"] Icons --> Icon128["πΌοΈ 128x128.png"] Icons --> Icon256["πΌοΈ 256x256.png"] Commands --> ModRs["π mod.rs"] Commands --> AudioCmd["π audio_commands.rs"] Commands --> BTCmd["π bluetooth_commands.rs"] WindowMgr --> WinCtrl["π window_controller.rs"] WindowMgr --> MonitorH["π monitor_handler.rs"] Tray --> TrayMod["π mod.rs"] Tray --> TrayIcon["π tray_icon.rs"] style TauriRoot fill:#667eea,stroke:#764ba2,color:#fff style CargoToml fill:#f093fb,stroke:#f5576c,color:#fff style CargoLock fill:#f093fb,stroke:#f5576c,color:#fff style BuildRs fill:#f093fb,stroke:#f5576c,color:#fff style TauriConf fill:#f093fb,stroke:#f5576c,color:#fff style Src fill:#4facfe,stroke:#00f2fe,color:#fff style Commands fill:#4facfe,stroke:#00f2fe,color:#fff style WindowMgr fill:#4facfe,stroke:#00f2fe,color:#fff style Tray fill:#4facfe,stroke:#00f2fe,color:#fff style Utils fill:#4facfe,stroke:#00f2fe,color:#fff
src-tauri/src/lib.rs#
Defines the main modules:
| |
src-tauri/src/main.rs#
Simple entry point:
| |
src-tauri/src/commands/#
IPC command handlers:
| |
src-tauri/src/window_manager/#
Window and monitor management:
| |
System Integration Modules#
| |
src-tauri/tauri.conf.json#
Tauri configuration:
| |
Configuration (/.)#
package.json#
Defines the frontend scripts and dependencies:
| |
Available scripts:
bun run dev- Developmentbun run build- Buildbun run preview- Preview the buildbun run tauri- Tauri CLI
tsconfig.json#
TypeScript configuration:
| |
vite.config.ts#
Vite configuration:
| |
.env File#
Environment variables (if it exists):
| |
Generated Directories (Do Not Commit)#
node_modules/#
Frontend dependencies (generated by bun install):
| |
Ignored in: .gitignore
src-tauri/target/#
Rust build artifacts:
| |
Ignored in: .gitignore
dist/#
Frontend build output:
| |
Generated by: npm run build
Naming Patterns#
Vue Components#
- PascalCase:
UserCard.vue,AudioControl.vue - The file must match the component name
Rust Files#
- snake_case:
audio_commands.rs,window_controller.rs - Modules match the file names
Import Paths#
| |
Structure Best Practices#
β Do:#
- Keep components small and focused
- Group related things in folders
- Use clear naming conventions
- Document complex modules
β Don’t:#
- Mix responsibilities in one file
- Create purposeless “misc folders”
- Ignore the established structure
- Create excessive folder depth