Crock UI

Crock UI is an intuitive desktop application designed to enhance the user experience of croc, a peer-to-peer file and text transfer utility. Built using Electron and React, Crock UI provides a polished graphical interface that simplifies the process of sending and receiving files without relying on command-line interactions.

Key Features

• Instant Send & Receive: Easily queue files or text, select a relay, and initiate transfers with just a single click.
• Code Phrase Ergonomics: Generate, copy, paste, or scan QR codes for session codes while keeping your clipboard and form state synchronized.
• Transfer Observability: Monitor real-time progress, inspect structured logs, and access past sessions with a built-in history viewer.
• Customizable Defaults: Modify send/receive flags, destinations, and automation options through user-friendly settings tabs.
• Health Checks for Relay & Proxy: Test relays and proxies to ensure reliable transfers, complete with live status updates.
• Binary Lifecycle Management: Download, install, or pin specific croc releases directly from GitHub without leaving the application.
• Theming & Localization: Choose from light, dark, or system themes and switch between multiple languages, including English, Vietnamese, and Japanese.
• Mock API for Browser Testing: In non-Electron environments, a safe mock API ensures functionality for design previews.

Overview

Crock UI serves as a modern wrapper around the croc CLI, bundling necessary binaries and exposing common workflows through a visual interface. The application architecture consists of three layers: the renderer, a preload bridge, and the main process, ensuring smooth interaction and management of resources.

Architecture Breakdown

• Renderer (React + Vite): Responsible for the UI and state management, styled using Tailwind CSS and utilizing Zustand for state management.
• Preload Bridge: This layer exposes a secure API to the renderer, handling essential functionalities like file dialogs and clipboard management.
• Main Process: Configures the application, manages croc binaries, processes commands, and oversees persistence of history and settings.

Visual Previews

Screenshots of Crock UI's interface illustrate its key functionalities:

Send Panel	Receive Panel	History Dialog	Settings Dialog

For more screenshots, additional previews are available in the repository.

Project Structure

Crock UI's project structure is organized for clarity and efficiency, comprising directories for main-process code, static assets, and the React renderer, among others:

crock/
├─ electron/                # Main-process code and services
├─ public/                  # Static assets (logo, icons)
├─ src/                     # React renderer (components, stores, hooks)
│  ├─ components/           # UI elements grouped by feature
│  ├─ lib/                  # Utilities (i18n, window API)
│  ├─ locales/              # Translation resources
│  └─ stores/               # Zustand stores synchronized via IPC
├─ dist/                    # Renderer production build output
├─ dist-electron/           # Compiled main & preload bundles
└─ package.json             # Dependencies and scripts

Contributions to enhance Crock UI are welcomed, and detailed instructions on testing and submitting changes can be found in the repository's README.