Overall Architecture | vasak-desktop

Overview of the Vasak Desktop architecture and how its components are laid out.

What is Vasak Desktop?#

Vasak Desktop is NOT a full desktop environment (like GNOME or KDE). It is a lightweight desktop interface that has no WM of its own but that provides:

• Top Panel - Taskbar with system applets
• Desktop View - Wallpaper with optional widgets
• Control Center - Quick access to settings
• Application Menu - Search and launch apps
• File Manager - Tool for browsing files
• Search Launcher - Fast search tool
• Config Manager - Tool for configuring the operating system

It runs as several independent Tauri windows that talk to each other over IPC.

The rest of the VasakOS tools that do not share the desktop backend follow a similar architecture and can be integrated the same way with the desktop settings.

High-level Architecture#

Application Windows#

Vasak Desktop is made up of 2 independent windows:

Window 1: Panel (Top Bar)#

1
2
3
4
5
6
7
8
9

{
  "label": "panel",
  "title": "Vasak Panel",
  "width": [screen width],
  "height": 40,
  "y": 0,
  "decorations": false,
  "alwaysOnTop": true
}

It shows:

• Application menu
• Widgets (clock, music)
• System applets (audio, network, bluetooth, battery)
• Control center

Window 2: Desktop (Background)#

1
2
3
4
5
6
7
8

{
  "label": "desktop",
  "title": "Vasak Desktop",
  "fullscreen": true,
  "decorations": false,
  "alwaysOnBottom": true,
  "skipTaskbar": true
}

It shows:

• Desktop wallpaper
• Optional widgets (weather, clock)

Application Layers#

1. Presentation Layer (Frontend)#

Technology: Vue.js 3.5.18, TypeScript, Tailwind CSS 4.1

Data flow:

• Components → invoke('command') → Backend
• Backend → emit('event') → Components update

2. Communication Layer (IPC)#

Technology: Tauri IPC Bridge

Security: Only explicitly registered commands can be invoked.

3. Logic Layer (Backend)#

Technology: Rust 1.70+, Tauri 2.x

Backend responsibilities:

• Run system commands via shell or native APIs
• Talk to system services over D-Bus
• Handle hardware events and notifications
• Apply system settings (gsettings, config files)
• Manage the Tauri windows

4. System Integration Layer (D-Bus)#

Technology: Zbus (Rust) + D-Bus

The standard Linux interface for:

• Audio control (PulseAudio/PipeWire)
• Bluetooth (BlueZ)
• Network (NetworkManager)
• Notifications (Freedesktop)
• Power (UPower)

See   D-Bus for more details.

5. Hardware/OS Layer#

System components:

• PulseAudio / PipeWire (Audio)
• BlueZ (Bluetooth)
• NetworkManager (Network)
• X11 / Wayland (Windows)
• Compositor (Visual effects)

Current Wayland support is EXPERIMENTAL

Typical Data Flow#

Example: Changing the Volume#

Directory Structure#

Frontend (src/)#

Backend (src-tauri/src/)#

Design Patterns#

1. MVC (Model-View-Controller)#

Frontend:

• Model: Pinia stores
• View: Vue components
• Controller: Methods in components

Backend:

• Model: Structures in structs.rs
• Controller: Functions in commands/
• Business Logic: Specialized modules

2. Pub-Sub (Publish-Subscribe)#

For system events:

1
2

// Backend: emit the event
window.emit("audio_volume_changed", {level: 50})?;

1
2
3
4
5
6

// Frontend: listen for the event
onMounted(() => {
  listen('audio_volume_changed', (event) => {
    state.volume = event.payload.level;
  });
});

3. Service Layer#

Every feature has its own service layer:

• audio.rs - Audio service
• network.rs - Network service
• bluetooth.rs - Bluetooth service

Information Flows#

Command (Frontend → Backend)#

1
2
3
4
5
6

// Frontend
import { invoke } from '@tauri-apps/api/tauri';

const result = await invoke('set_brightness', { 
  level: 75 
});

1
2
3
4
5
6

// Backend
#[tauri::command]
pub fn set_brightness(level: u32) -> Result<(), String> {
    brightness::set_level(level)?;
    Ok(())
}

Event (Backend → Frontend)#

1
2
3
4

// Backend
window.emit("brightness_changed", json!({
    "level": 75
}))?;

1
2
3
4
5
6

// Frontend
import { listen } from '@tauri-apps/api/event';

listen('brightness_changed', (event) => {
  console.log('Brightness:', event.payload.level);
});

Configuration and Manifests#

tauri.conf.json#

Defines Tauri permissions and configuration:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

{
  "build": {
    "beforeDevCommand": "bun run dev",
    "devUrl": "http://localhost:5173"
  },
  "app": {
    "windows": [
      {
        "title": "Vasak Desktop",
        "label": "main",
        "width": 1024,
        "height": 768
      }
    ]
  }
}

Cargo.toml#

Rust dependencies and configuration.

tsconfig.json#

TypeScript configuration.

vite.config.ts#

Frontend build configuration.