How pjsaunders/rclone-webui-react works
Rclone Web UI is a browser-based control panel for an rclone RC server. Users connect to the server, manage remote configurations, browse remote files, perform file operations, and monitor backend activity or mounts. The map includes the application shell, domain screens, Redux state, and the API boundary. README capabilities are retained, but links from individual screens to actions and API calls are limited because those implementations were not sampled.
Main entry points: routes.js Route definitions · App.js React application · FilesView.js File listing · DefaultLayout.js Default layout
Components 21
Application shell
- React application
src/App.js - Route definitions
src/routes.js - Default layout
src/containers/DefaultLayout/DefaultLayout.js - Login
src/views/Pages/Login/Login.js
Remote management
- Create remote
src/views/RemoteManagement/NewDrive/NewDrive.js - Remote configs
src/views/RemoteManagement/ShowConfig/ShowConfig.js
Remote files
- Remote explorer
src/views/Explorer/RemoteExplorerLayout/RemoteExplorerLayout.js - Remote view
src/views/Explorer/RemoteExplorer/RemoteExplorer.js - File listing
src/views/Explorer/FilesView/FilesView.js - File actions
src/views/Explorer/FilesView/FileActions.js - Upload interface
src/views/Base/FileOperations/FileUploadModal.js
Operations and status
- Home dashboard
src/views/Home/Home.js - Mount dashboard
src/views/MountDashboard/MountDashboard.js - Backend dashboard
src/views/RCloneDashboard/RCloneDashboard.js - Status widgets
src/views/Base/BackendStatusCard/BackendStatusCard.js
State and API
- Redux actions
src/actions/index.js - Root reducer
src/reducers/index.js - Redux store
src/store.js - RC API client
src/utils/API/API.js
Other components
- Browser user
- Rclone RC server
Connections 19
- Browser user → React application: opens
- React application → Default layout: renders
- React application → Login: routes to
- Default layout → Route definitions: uses routes
- Route definitions → Home dashboard: routes to
- Route definitions → Create remote: routes to
- Route definitions → Remote configs: routes to
- Route definitions → Remote explorer: routes to
- Route definitions → Mount dashboard: routes to
- Route definitions → Backend dashboard: routes to
- Remote explorer → Remote view: renders
- Remote view → File listing: shows files
- File listing → File actions: offers actions
- File listing → Upload interface: offers upload
- Backend dashboard → Status widgets: shows status
- Redux store → Root reducer: reduces actions
- Redux actions → Redux store: dispatches
- RC API client → Rclone RC server: sends RC requests
- Rclone RC server → RC API client: returns responses