| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354 |
<!DOCTYPE html>
<html lang="en-GB" data-accent="brand">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy"
content="default-src 'none'; script-src 'self'; style-src 'self'; font-src 'self'; img-src 'self' data:;">
<title>Flat</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="shell">
<header class="topbar">
<div class="brand">
<svg class="brand-mark" viewBox="0 0 512 512" aria-hidden="true">
<rect x="10" y="10" width="492" height="492" rx="120" class="brand-ground"/>
<rect x="130" y="279" width="251" height="125" rx="28" class="brand-line"/>
<path d="M256 105V264m0 0-55-55M256 264l55-55" class="brand-line"/>
</svg>
<h1>Flat</h1>
</div>
<nav class="tabs" role="tablist" aria-label="What to do">
<button type="button" class="tab is-on" id="tab-all" role="tab" aria-selected="true">All apps</button>
<button type="button" class="tab" id="tab-mine" role="tab" aria-selected="false">My apps</button>
<button type="button" class="tab" id="tab-restore" role="tab" aria-selected="false">Restore</button>
</nav>
<div class="header-tools">
<button type="button" class="help-link" id="help-open" aria-controls="view-help">Help</button>
<div class="update-widget" id="update-widget">
<a class="update-widget-version" id="update-widget-version"
href="https://flat.lightmorphic.com" target="_blank" rel="noopener noreferrer"></a>
<button type="button" class="update-dot" id="update-dot">
<svg class="update-dot-ring" viewBox="0 0 16 16" aria-hidden="true">
<circle class="update-dot-ring-track" cx="8" cy="8" r="7"/>
<circle class="update-dot-ring-fill" id="update-dot-ring-fill" cx="8" cy="8" r="7"/>
</svg>
</button>
</div>
</div>
</header>
<main class="panel blocker" id="blocker" hidden>
<h2 class="panel-head">Flatpak is not installed here</h2>
<p class="blocker-body" id="blocker-body"></p>
<p class="hint">Install it with your distribution's package manager, then reopen Flat.</p>
</main>
<main class="panel view" id="view-all">
<div class="panel-head-row">
<details class="eye eye--head">
<summary>
<h2 class="panel-head">Everything on this machine</h2>
<span class="eye-btn" aria-label="About this screen">i</span>
</summary>
</details>
<div class="head-tools">
<input type="search" id="filter-all" class="filter" placeholder="Filter by name" aria-label="Filter the list by name">
</div>
</div>
<div class="eye-body" id="eye-all-body" hidden>
<p>Every Flatpak app installed on this machine, with the size of the settings and data each one keeps. Tick the ones you want and press <strong>Add to My apps</strong>. They arrive there as Fresh installs; on My apps you choose which of them keep their settings.</p>
<p>Apps already on My apps say so, and adding them again changes nothing.</p>
</div>
<div class="list-scroll">
<p class="empty" id="all-empty" hidden>No Flatpak apps found on this machine.</p>
<ul class="applist" id="all-list"></ul>
<p class="loading" id="all-loading">Looking at what is installed…</p>
</div>
<div class="footbar">
<div class="tally">
<span class="tally-main" id="all-tally">Nothing ticked</span>
<span class="hint" id="all-hint"></span>
</div>
<div class="foot-actions">
<button type="button" class="btn btn--quiet" id="all-select-all">All</button>
<button type="button" class="btn btn--quiet" id="all-select-none">None</button>
<button type="button" class="btn btn--primary" id="all-to-mine" disabled>Add to My apps</button>
</div>
</div>
</main>
<main class="panel view" id="view-mine" hidden>
<div class="panel-head-row">
<details class="eye eye--head">
<summary>
<h2 class="panel-head">The apps I always want</h2>
<span class="eye-btn" aria-label="About this screen">i</span>
</summary>
</details>
<div class="head-tools">
<button type="button" class="btn btn--quiet" id="mine-forget" hidden>Forget removals</button>
<button type="button" class="btn btn--quiet" id="mine-from-installed">Add everything here</button>
<button type="button" class="btn btn--quiet" id="mine-import">Open a list…</button>
<button type="button" class="btn btn--quiet" id="mine-export">Save the list…</button>
</div>
</div>
<div class="eye-body" id="eye-mine-body" hidden>
<p>Your list of apps. Switch <strong>Keep settings</strong> on for the apps whose settings you want on the next machine. Untick anything you want left out, then press <strong>Back up…</strong>: the file carries the ticked apps, and the settings of the ones switched on.</p>
<p>Apps join the list from All apps, or from the search box, which takes a name or a pasted ID.</p>
</div>
<div class="alert alert--warning" id="running-warning" hidden>
<span class="alert-mark" aria-hidden="true">!</span>
<div class="alert-body">
<p id="running-warning-text"></p>
<p class="hint">A profile copied while its app is open comes out locked or half-written.</p>
</div>
<div class="alert-actions">
<button type="button" class="btn btn--quiet" id="recheck-running">Check again</button>
<button type="button" class="btn btn--quiet" id="close-running">Close them for me</button>
</div>
</div>
<div class="finder">
<input type="search" id="mine-search" class="filter filter--wide"
placeholder="Find an app by name, or paste an ID" aria-label="Search for an app to add to the list">
</div>
<ul class="results" id="mine-results" hidden></ul>
<div class="list-scroll">
<div class="colhead" id="mine-colhead">
<label class="colhead-all">
<input type="checkbox" id="mine-all" aria-label="Tick every app on the list">
<span id="mine-all-label">All</span>
</label>
<span class="colhead-here" aria-hidden="true"></span>
<span class="colhead-name">Name</span>
<span class="colhead-id">App ID</span>
<span class="colhead-remote">Remote</span>
<span class="colhead-size">Size</span>
<span class="colhead-keep">Keep settings</span>
<button type="button" class="colhead-full" id="mine-full-help" title="What Full means">Full</button>
<span class="colhead-tail"></span>
</div>
<p class="empty" id="mine-empty" hidden>Your list is empty. Search above, or press <strong>Add everything here</strong> to start from what this machine already has.</p>
<ul class="applist applist--edit" id="mine-list"></ul>
</div>
<div class="footbar">
<div class="tally">
<span class="tally-main" id="mine-tally">Nothing on the list</span>
<span class="hint" id="mine-hint"></span>
</div>
<div class="foot-actions">
<button type="button" class="btn btn--primary" id="mine-backup">Back up…</button>
</div>
</div>
</main>
<main class="panel view" id="view-restore" hidden>
<div class="panel-head-row">
<h2 class="panel-head">Restore a backup</h2>
<div class="head-tools">
<button type="button" class="btn btn--quiet" id="restore-open">Open a backup…</button>
</div>
</div>
<div class="alert alert--warning" id="flathub-warning" hidden>
<span class="alert-mark" aria-hidden="true">!</span>
<div class="alert-body">
<p>Flathub is not set up on this machine yet.</p>
<p class="hint">Almost every app comes from it. Nothing can be searched for or installed until it is added.</p>
</div>
<button type="button" class="btn btn--quiet" id="add-flathub">Add Flathub</button>
</div>
<div class="source" id="restore-source">
<span class="source-text" id="restore-source-text">Open the backup you made on your old machine.</span>
</div>
<p class="restore-note" id="restore-note" hidden>
<span class="restore-note-mark" aria-hidden="true">!</span>
Apps install at their newest version, not the one you had. Settings almost always carry over, but now and then a newer version asks you to set something up again.
</p>
<div class="list-scroll">
<div class="colhead" id="restore-colhead" hidden>
<label class="colhead-all">
<input type="checkbox" id="restore-all" aria-label="Tick every app in the backup">
<span id="restore-all-label">All</span>
</label>
<span class="colhead-here" aria-hidden="true"></span>
<span class="colhead-name">Name</span>
<span class="colhead-id">App ID</span>
<span class="colhead-size">Size</span>
<span class="colhead-keep">Keep settings</span>
</div>
<ul class="applist applist--edit" id="restore-list"></ul>
</div>
<div class="footbar">
<div class="tally">
<span class="tally-main" id="restore-tally">No backup open</span>
<span class="hint" id="restore-hint"></span>
</div>
<div class="foot-actions">
<button type="button" class="btn btn--primary" id="restore-go" disabled>Restore</button>
</div>
</div>
</main>
<main class="panel view view-help" id="view-help" hidden>
<div class="panel-head-row">
<h2 class="panel-head">How to use Flat</h2>
<nav class="help-jump" aria-label="Help sections">
<a href="#help-start">The idea</a>
<a href="#help-all">All apps</a>
<a href="#help-mine">My apps</a>
<a href="#help-full">Full</a>
<a href="#help-restore">Restore</a>
<a href="#help-limits">Good to know</a>
<a href="#help-updates">Updates</a>
</nav>
</div>
<div class="help-scroll" id="help-scroll">
<section class="help-section" id="help-start">
<h3>The idea</h3>
<p>Flat moves your Flatpak apps to a new computer, with their settings if you want them. It never copies the apps themselves: on the new computer each one is installed fresh from Flathub, at its newest version, and then your settings are put back into it.</p>
<ol class="help-steps">
<li><b>On your old computer</b> — pick your apps on <em>All apps</em>, choose which keep their settings on <em>My apps</em>, and press <em>Back up…</em>.</li>
<li><b>Carry one file</b> — the backup ends in <code>.fmpack</code>. Put it on a USB stick, a server, anywhere.</li>
<li><b>On your new computer</b> — put Flat and the backup in the same folder, open Flat, go to <em>Restore</em> and press <em>Restore</em>.</li>
</ol>
</section>
<section class="help-section" id="help-all">
<h3>All apps</h3>
<p>Everything installed on this computer, with how much each app keeps. Tick the ones you want — <em>All</em> ticks every one — and press <em>Add to My apps</em>. A small tick beside a name means it is on My apps already.</p>
<figure class="help-shot"><img src="help/all-apps.jpg" alt="The All apps tab with every app ticked and the Add to My apps button." width="1400" height="850"></figure>
</section>
<section class="help-section" id="help-mine">
<h3>My apps</h3>
<p>Your list — the apps you want on your next computer. Each row says:</p>
<ul class="help-list">
<li><b>Size</b> — how much of its settings the backup will take. Anything over 250 MB shows in amber, as a nudge to ask whether you need it.</li>
<li><b>Keep settings</b> — on for every app that has settings here. Switch it off and the app comes back brand new. <em>No settings</em> means the app has saved nothing, so there is nothing to keep.</li>
<li><b>Full</b> — whether to take the whole folder; the next page explains.</li>
<li><b>A small tick by the name</b> — the app is installed on this computer.</li>
</ul>
<p>Everything starts ticked. Untick what you want left out, press <em>Back up…</em> and choose where to save. If an app whose settings are going is open, Flat names it and waits — a browser copied while running comes out broken. <em>Check again</em> looks once more; <em>Close them for me</em> closes it.</p>
<p>To add an app you do not have yet, search for its name or paste its ID.</p>
<figure class="help-shot"><img src="help/my-apps.jpg" alt="The My apps tab: the list of apps with Size, Keep settings and Full columns and the Back up button." width="1400" height="850"></figure>
</section>
<section class="help-section" id="help-full">
<h3>Full, or just the settings</h3>
<p>Browsers and apps built like them keep a lot that they can fetch again by themselves: copies of websites for offline use, speeded-up code, graphics caches, block lists and their own downloaded parts. On one real Brave browser that was 400 MB of its 950.</p>
<p><b>Unticked (normal):</b> Flat leaves those out. Your bookmarks, passwords, history, open tabs, extensions and their settings, and what websites have saved for you all come along. The browser rebuilds the rest the first time it runs, which can make that first start a little slower.</p>
<p><b>Ticked:</b> the app's whole folder goes, cache and all, exactly as it is. Use it if something did not come back right, or for an app that is not a browser and you want to be sure of everything.</p>
<p>The tick only appears where it makes a difference. The Size column changes as you tick it, so you can see what it costs.</p>
</section>
<section class="help-section" id="help-restore">
<h3>Restore</h3>
<p>Flat finds a backup on its own if it is beside Flat or in Downloads; otherwise press <em>Open a backup…</em>. You get the same list, with <em>Keep settings</em> already on for every app whose settings are in the file. Untick anything you do not want here and press <em>Restore</em>.</p>
<p>Each app is installed from Flathub first, then closed, then its settings are put back — in that order, because doing it the other way round is what makes an app open looking brand new. Nothing needs a password.</p>
<p>An app that is already on this computer is left exactly as it is, settings and all. Anything that goes wrong is named on its own line, and Flat carries on with the next app.</p>
<figure class="help-shot"><img src="help/restore.jpg" alt="The Restore tab after opening a backup, with the list of apps and the Restore button." width="1400" height="850"></figure>
</section>
<section class="help-section" id="help-limits">
<h3>Good to know</h3>
<ul class="help-list">
<li><b>Apps come back at their newest version.</b> Settings almost always carry over, but now and then a newer version asks you to set something up again.</li>
<li><b>Some logins need doing again.</b> Apps that keep their password in your computer's keyring (GNOME Keyring or KWallet) keep it outside the app, so it cannot travel. Firefox and Thunderbird keep theirs in their own folder and usually come back signed in.</li>
<li><b>Flatpak apps only.</b> Apps installed another way are not moved.</li>
<li><b>Keep your backup safe.</b> It holds your browser's saved passwords and history, and it is not locked with a password.</li>
</ul>
</section>
<section class="help-section" id="help-updates">
<h3>Updates</h3>
<p>The small dot beside the version number, top right, keeps Flat up to date:</p>
<ul class="dot-key">
<li><span class="dot-sample" data-state="current"></span><b>Green</b> — up to date. Click it to check again.</li>
<li><span class="dot-sample" data-state="available"></span><b>Amber</b> — a newer version is ready. Click to download it.</li>
<li><span class="dot-sample" data-state="downloading"></span><b>Ring</b> — downloading.</li>
<li><span class="dot-sample" data-state="downloaded"></span><b>Blue</b> — downloaded. Click to restart into it.</li>
<li><span class="dot-sample" data-state="error"></span><b>Red</b> — the update server could not be reached. Click to try again.</li>
</ul>
<p>More at <a href="https://flat.lightmorphic.com" target="_blank" rel="noopener noreferrer">flat.lightmorphic.com</a>.</p>
</section>
</div>
<div class="footbar">
<div class="tally"><span class="hint">Flat is free and open source.</span></div>
<div class="foot-actions">
<button type="button" class="btn btn--quiet" id="help-next">Next</button>
<button type="button" class="btn btn--primary" id="help-close">Back to Flat</button>
</div>
</div>
</main>
<main class="panel view" id="view-job" hidden>
<div class="panel-head-row">
<h2 class="panel-head" id="job-head">Working</h2>
<span class="job-count" id="job-count"></span>
</div>
<div class="progress" id="job-progress-wrap">
<div class="progress-track"><div class="progress-fill" id="job-progress-fill"></div></div>
<p class="progress-line" id="job-line">Starting…</p>
</div>
<div class="list-scroll">
<ul class="joblist" id="job-list"></ul>
</div>
<div class="footbar" id="job-footbar" hidden>
<div class="tally">
<span class="tally-main" id="job-summary"></span>
<span class="hint" id="job-summary-hint"></span>
</div>
<div class="foot-actions">
<button type="button" class="btn btn--quiet" id="job-reveal" hidden>Show me the file</button>
<button type="button" class="btn btn--primary" id="job-done">Done</button>
</div>
</div>
</main>
</div>
<div class="tip" id="tip" role="tooltip" hidden></div>
<script src="app.js"></script>
</body>
</html> |