Screenshot Shot List — Rufoof guide refresh
This lists every new or replaced screenshot the refreshed guide references, what to capture, and where. Filenames follow the existing section-number-description.png convention and go in this folder (docs/assets/screenshots/). English and Arabic pages share the same image file for each shot (the existing convention), so you only capture one file per shot.
Language of the UI in each shot: The project audience is primarily Arabic and the apps default to Arabic, so capturing the Arabic UI is recommended. A single shared file is used by both locales. If you ever want language-specific images, add an
-ar/-ensuffix and split the reference in the two pages — but that's optional.Simulated previews are available. Capture aids live in
screenshot-production/at the repo root:studios/screenshot-studio-desktop.htmlandstudios/screenshot-studio-miniapp.htmlrender a clean, code-faithful mock-up of every screen below (seescreenshot-production/README.md). Pre-rendered PNGs are inscreenshot-production/rendered/. These are simulations, not real captures. To ship the guide with them as placeholders, copy the matching file fromscreenshot-production/rendered/into this folder; replace with a real capture whenever you can. The real, on-device shots (especially the Mini App and any Telegram screens) should ultimately come from a real device.
A. Desktop app (auto-capturable from a real build)
Capture these from the current desktop build. A burner bot token + storage channel with a few folders/files makes for a realistic shot.
| Filename | Capture | At which step |
|---|---|---|
5-4-language-toggle.png |
The setup screen with the EN/AR language toggle visible (replaces the old three-mode window shot). | First Launch |
6-1-setup-screen.png |
The setup screen with a token entered and the bot + channel card resolved (bot name + storage channel showing); progress/log panel visible. | The Setup Screen |
8-1-content-viewer.png |
The content viewer overview: breadcrumb, a grid of folder/file tiles, the side action panel, and the status bar. | Managing Your Content |
8-2-drag-drop.png |
Files being dragged from Explorer/Finder onto the grid (or the Upload files… / Upload folder… panel buttons visible). | Managing Your Content → Adding |
8-3-delete-menu.png |
A right-click context menu on a selected tile with Delete (and Cut/Rename/Copy link) shown. | Managing Your Content → Deleting |
8-4-notes.png |
The notes area for a folder with a couple of example notes. | Managing Your Content → Notes |
8-5-save.png |
The 💾 Save button showing an unsaved-changes count, ideally with a few pending (green-outlined) tiles. | Managing Your Content → Saving |
9-1-sync-button.png |
The content viewer at Home with the toolbar 🔄 Sync button visible. | Uploading & Syncing |
10-1-settings.png |
The desktop ⚙ Settings dialog (Privacy area). | Customizing Your Bot |
10-2-custom-messages.png |
The Custom Messages area of Settings. | Customizing Your Bot |
10a-oversized-dialog.png |
The large-file prompt shown after Save, with all four options: Upload automatically / Upload manually / Skip / Cancel. | Large Files |
B. Two-ways overview
| Filename | Capture | Notes |
|---|---|---|
12-1-two-ways.png |
A composite: the Mini App on a phone beside the desktop content viewer, both on the same bot, to show they mirror each other. | ✅ Supplied (owner composite). |
C. Mini App (capture on a real device inside Telegram)
These must come from Telegram on a real device. Use a burner bot so nothing sensitive shows. Portrait phone crops (~420 px wide references) look best.
| Filename | Capture | Page |
|---|---|---|
~~13-1-rufoofbot-search.png~~ |
Retired — the page now links straight to @RufoofBot (a tappable hyperlink), so no search screenshot is needed. | Opening the Mini App |
13-2-language-chooser.png |
@RufoofBot's English / العربية language chooser after /start. ✅ Supplied (real-device capture). |
Opening the Mini App |
13-3-dashboard.png |
The Mini App dashboard listing your bots. | Opening the Mini App |
14-1-create-step1.png |
The Create a bot → Step 1 screen ("Create bot in Telegram"). | Create & Register a Bot |
14-2-create-step2-channel.png |
The Step 2 — Add a storage channel screen. | Create & Register a Bot |
14-3-submit.png |
The Submit for approval button / confirmation. | Create & Register a Bot |
15-1-organize-overview.png |
The organize view: breadcrumb, tile grid, bottom Save bar. | Organizing Your Content |
15-2-tile-menu.png |
A tile's ⋯ menu (Rename / Move / Delete / Auto-send / Move up-down). | Organizing Your Content |
15-3-multiselect.png |
Selection mode with several tiles checked and the bottom action bar. | Organizing Your Content |
15-4-notes.png |
The notes area under a folder. | Organizing Your Content |
16-1-inbox.png |
The Inbox with staged files and a Add / File it action. | Channel Inbox & Capture |
16-2-capture.png |
A folder with capture on and its reminder banner. | Channel Inbox & Capture |
16-3-listen-toggle.png |
The Receive new files toggle. | Channel Inbox & Capture |
17-1-collab-invite.png |
The collaboration screen with an invite link. | Working Together |
D. Screenshots still valid (no reshoot needed)
These pre-existing shots still match the current flow and are unchanged:
- Windows SmartScreen:
5-3a,5-3b /helpreply:11-2
E. Retired screenshots (no longer referenced)
Left in the folder for now; safe to delete once the new shots land. The old desktop flow: 6-1-rufoof-interface.png, the 7-* register-mode series, 8-1-update-mode.png, 8-3-token-channel-fetch.png, 8-5-start-upload.png, 9-3-get-bot-data.png, 9-5…9-15, 10-1-customize-button.png, 10-3-button-order-tab.png, 10-5-visibility-tab.png, 10-8-custom-messages.png, 7-10a, 7-10b, 7-11…7-13.
Also retired — the BotFather bot-creation and manual channel-creation pages were removed (registration now happens entirely in the Mini App), so these are no longer used: the 3-* BotFather series (3-1, 3-2, 3-3, 3-6) and the 4-* channel-creation series (4-1, 4-2, 4-3, 4-4).