WIP PWA for Grain
docs: add legal pages implementation plan
+680
+680
docs/plans/2025-12-27-legal-pages.md
+680
docs/plans/2025-12-27-legal-pages.md
···
1
+
# Legal Pages Implementation Plan
2
+
3
+
> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
4
+
5
+
**Goal:** Add Terms, Privacy, and Copyright pages accessible from Settings.
6
+
7
+
**Architecture:** Three new Lit components following existing page patterns, linked from settings page, registered in the router under `/settings/*` paths.
8
+
9
+
**Tech Stack:** Lit, custom router
10
+
11
+
---
12
+
13
+
### Task 1: Create grain-terms.js
14
+
15
+
**Files:**
16
+
- Create: `src/components/pages/grain-terms.js`
17
+
18
+
**Step 1: Create the component file**
19
+
20
+
```javascript
21
+
import { LitElement, html, css } from 'lit';
22
+
import '../atoms/grain-icon.js';
23
+
24
+
export class GrainTerms extends LitElement {
25
+
static styles = css`
26
+
:host {
27
+
display: block;
28
+
max-width: var(--feed-max-width);
29
+
margin: 0 auto;
30
+
min-height: 100vh;
31
+
min-height: 100dvh;
32
+
padding-bottom: 80px;
33
+
background: var(--color-bg-primary);
34
+
}
35
+
.header {
36
+
display: flex;
37
+
align-items: center;
38
+
gap: var(--space-sm);
39
+
padding: var(--space-md) var(--space-sm);
40
+
}
41
+
@media (min-width: 600px) {
42
+
.header {
43
+
padding-left: 0;
44
+
padding-right: 0;
45
+
}
46
+
}
47
+
.back-button {
48
+
background: none;
49
+
border: none;
50
+
padding: 8px;
51
+
cursor: pointer;
52
+
color: var(--color-text-primary);
53
+
margin-left: -8px;
54
+
}
55
+
h1 {
56
+
font-size: var(--font-size-md);
57
+
font-weight: var(--font-weight-semibold);
58
+
color: var(--color-text-primary);
59
+
margin: 0;
60
+
}
61
+
.content {
62
+
padding: 0 var(--space-sm);
63
+
}
64
+
@media (min-width: 600px) {
65
+
.content {
66
+
padding: 0;
67
+
}
68
+
}
69
+
.last-updated {
70
+
font-size: var(--font-size-xs);
71
+
color: var(--color-text-secondary);
72
+
margin-bottom: var(--space-lg);
73
+
}
74
+
section {
75
+
margin-bottom: var(--space-lg);
76
+
}
77
+
h2 {
78
+
font-size: var(--font-size-sm);
79
+
font-weight: var(--font-weight-semibold);
80
+
color: var(--color-text-primary);
81
+
margin: 0 0 var(--space-xs) 0;
82
+
}
83
+
p {
84
+
font-size: var(--font-size-xs);
85
+
color: var(--color-text-secondary);
86
+
line-height: 1.5;
87
+
margin: 0 0 var(--space-sm) 0;
88
+
}
89
+
a {
90
+
color: var(--color-accent);
91
+
}
92
+
code {
93
+
background: var(--color-bg-elevated);
94
+
padding: 2px 4px;
95
+
border-radius: 4px;
96
+
font-size: var(--font-size-xs);
97
+
}
98
+
`;
99
+
100
+
#goBack() {
101
+
history.back();
102
+
}
103
+
104
+
render() {
105
+
return html`
106
+
<div class="header">
107
+
<button class="back-button" @click=${this.#goBack}>
108
+
<grain-icon name="back" size="20"></grain-icon>
109
+
</button>
110
+
<h1>Terms and Conditions</h1>
111
+
</div>
112
+
<div class="content">
113
+
<p class="last-updated">Last Updated: June 3, 2025</p>
114
+
115
+
<section>
116
+
<h2>Overview</h2>
117
+
<p>
118
+
Grain is a photo sharing app built on the
119
+
<a href="https://atproto.com/" target="_blank" rel="noopener noreferrer">AT Protocol</a>.
120
+
All data, including photos, galleries, favorites, and metadata, is public and stored on the AT Protocol network.
121
+
Users can upload photos, create and favorite galleries, and view non-location EXIF metadata.
122
+
</p>
123
+
<p>
124
+
Grain is an open source project. These Terms apply to your use of the hosted version at
125
+
<code>grain.social</code>, not to self-hosted instances or forks of the source code.
126
+
</p>
127
+
</section>
128
+
129
+
<section>
130
+
<h2>Account and Data Ownership</h2>
131
+
<p>
132
+
Grain uses the AT Protocol, so users retain full control over their data.
133
+
We are an independent project and not affiliated with Bluesky or the AT Protocol.
134
+
</p>
135
+
<p>
136
+
If you use a <code>grain.social</code> handle, your data may be stored on our own self-hosted
137
+
<a href="https://atproto.com/guides/glossary#pds-personal-data-server" target="_blank" rel="noopener noreferrer">PDS (Personal Data Server)</a>
138
+
in accordance with protocol standards.
139
+
</p>
140
+
</section>
141
+
142
+
<section>
143
+
<h2>Content</h2>
144
+
<p>
145
+
You are responsible for any content you share. Do not upload content you do not have rights to.
146
+
All uploads are publicly visible and cannot currently be set as private.
147
+
</p>
148
+
</section>
149
+
150
+
<section>
151
+
<h2>Analytics</h2>
152
+
<p>
153
+
We use <a href="https://www.goatcounter.com/" target="_blank" rel="noopener noreferrer">Goatcounter</a>
154
+
for basic analytics. No personal data is collected, tracked, or sold.
155
+
</p>
156
+
</section>
157
+
158
+
<section>
159
+
<h2>Prohibited Conduct</h2>
160
+
<p>
161
+
Do not upload illegal content, harass users, impersonate others, or attempt to disrupt the network.
162
+
</p>
163
+
</section>
164
+
165
+
<section>
166
+
<h2>Disclaimers</h2>
167
+
<p>
168
+
Grain is provided "as is." We do not guarantee uptime, data retention, or uninterrupted access.
169
+
</p>
170
+
</section>
171
+
172
+
<section>
173
+
<h2>Termination</h2>
174
+
<p>
175
+
We reserve the right to suspend or terminate your access to Grain at any time, without prior notice,
176
+
for conduct that we believe violates these Terms, our community standards, or is harmful to other users
177
+
or the AT Protocol network. Terminated accounts may lose access to uploaded content unless retained
178
+
through the protocol's data persistence mechanisms.
179
+
</p>
180
+
</section>
181
+
182
+
<section>
183
+
<h2>Changes</h2>
184
+
<p>
185
+
We may update these terms periodically. Continued use means acceptance of any changes.
186
+
</p>
187
+
</section>
188
+
189
+
<section>
190
+
<h2>Contact</h2>
191
+
<p>
192
+
For any questions about these Terms, your account, or issues with the app, you can contact us at
193
+
<a href="mailto:support@grain.social">support@grain.social</a>.
194
+
</p>
195
+
</section>
196
+
</div>
197
+
`;
198
+
}
199
+
}
200
+
201
+
customElements.define('grain-terms', GrainTerms);
202
+
```
203
+
204
+
**Step 2: Verify file exists**
205
+
206
+
Run: `ls -la src/components/pages/grain-terms.js`
207
+
Expected: File exists
208
+
209
+
**Step 3: Commit**
210
+
211
+
```bash
212
+
git add src/components/pages/grain-terms.js
213
+
git commit -m "feat: add terms page component"
214
+
```
215
+
216
+
---
217
+
218
+
### Task 2: Create grain-privacy.js
219
+
220
+
**Files:**
221
+
- Create: `src/components/pages/grain-privacy.js`
222
+
223
+
**Step 1: Create the component file**
224
+
225
+
```javascript
226
+
import { LitElement, html, css } from 'lit';
227
+
import '../atoms/grain-icon.js';
228
+
229
+
export class GrainPrivacy extends LitElement {
230
+
static styles = css`
231
+
:host {
232
+
display: block;
233
+
max-width: var(--feed-max-width);
234
+
margin: 0 auto;
235
+
min-height: 100vh;
236
+
min-height: 100dvh;
237
+
padding-bottom: 80px;
238
+
background: var(--color-bg-primary);
239
+
}
240
+
.header {
241
+
display: flex;
242
+
align-items: center;
243
+
gap: var(--space-sm);
244
+
padding: var(--space-md) var(--space-sm);
245
+
}
246
+
@media (min-width: 600px) {
247
+
.header {
248
+
padding-left: 0;
249
+
padding-right: 0;
250
+
}
251
+
}
252
+
.back-button {
253
+
background: none;
254
+
border: none;
255
+
padding: 8px;
256
+
cursor: pointer;
257
+
color: var(--color-text-primary);
258
+
margin-left: -8px;
259
+
}
260
+
h1 {
261
+
font-size: var(--font-size-md);
262
+
font-weight: var(--font-weight-semibold);
263
+
color: var(--color-text-primary);
264
+
margin: 0;
265
+
}
266
+
.content {
267
+
padding: 0 var(--space-sm);
268
+
}
269
+
@media (min-width: 600px) {
270
+
.content {
271
+
padding: 0;
272
+
}
273
+
}
274
+
.last-updated {
275
+
font-size: var(--font-size-xs);
276
+
color: var(--color-text-secondary);
277
+
margin-bottom: var(--space-lg);
278
+
}
279
+
section {
280
+
margin-bottom: var(--space-lg);
281
+
}
282
+
h2 {
283
+
font-size: var(--font-size-sm);
284
+
font-weight: var(--font-weight-semibold);
285
+
color: var(--color-text-primary);
286
+
margin: 0 0 var(--space-xs) 0;
287
+
}
288
+
p {
289
+
font-size: var(--font-size-xs);
290
+
color: var(--color-text-secondary);
291
+
line-height: 1.5;
292
+
margin: 0 0 var(--space-sm) 0;
293
+
}
294
+
a {
295
+
color: var(--color-accent);
296
+
}
297
+
code {
298
+
background: var(--color-bg-elevated);
299
+
padding: 2px 4px;
300
+
border-radius: 4px;
301
+
font-size: var(--font-size-xs);
302
+
}
303
+
`;
304
+
305
+
#goBack() {
306
+
history.back();
307
+
}
308
+
309
+
render() {
310
+
return html`
311
+
<div class="header">
312
+
<button class="back-button" @click=${this.#goBack}>
313
+
<grain-icon name="back" size="20"></grain-icon>
314
+
</button>
315
+
<h1>Privacy Policy</h1>
316
+
</div>
317
+
<div class="content">
318
+
<p class="last-updated">Last Updated: June 3, 2025</p>
319
+
320
+
<section>
321
+
<h2>Data Storage and Access</h2>
322
+
<p>
323
+
Your data is stored on the AT Protocol. If you use a <code>grain.social</code> handle,
324
+
it may be stored on our PDS. We do not store or access data beyond the protocol's standard behavior.
325
+
</p>
326
+
</section>
327
+
328
+
<section>
329
+
<h2>Public Data</h2>
330
+
<p>
331
+
All content on Grain is public. Private uploads are not currently supported.
332
+
</p>
333
+
</section>
334
+
335
+
<section>
336
+
<h2>EXIF Metadata</h2>
337
+
<p>
338
+
We optionally collect and display EXIF metadata from your photos. At upload time, you can choose
339
+
whether to allow this metadata to be collected. The metadata is stored according to standard
340
+
AT Protocol storage mechanisms and is not retained outside the protocol or used for other purposes.
341
+
We do not collect GPS or location data from your photos.
342
+
</p>
343
+
<p>
344
+
You can learn more about the types of metadata commonly embedded in photos at
345
+
<a href="https://exiv2.org/tags.html" target="_blank" rel="noopener noreferrer">exiv2.org</a>.
346
+
</p>
347
+
</section>
348
+
349
+
<section>
350
+
<h2>Analytics</h2>
351
+
<p>
352
+
We use <a href="https://www.goatcounter.com/" target="_blank" rel="noopener noreferrer">Goatcounter</a>
353
+
for analytics. It is privacy-focused: no IP addresses, cookies, or personal data is collected.
354
+
</p>
355
+
</section>
356
+
357
+
<section>
358
+
<h2>No Ads or Tracking</h2>
359
+
<p>
360
+
We do not serve ads, use third-party tracking, or sell user data.
361
+
</p>
362
+
</section>
363
+
364
+
<section>
365
+
<h2>Children's Privacy</h2>
366
+
<p>
367
+
Grain is not intended for users under 13 years of age.
368
+
</p>
369
+
</section>
370
+
371
+
<section>
372
+
<h2>Changes to Policy</h2>
373
+
<p>
374
+
This policy may be updated. Material changes will be communicated via the app or site.
375
+
</p>
376
+
</section>
377
+
378
+
<section>
379
+
<h2>Contact</h2>
380
+
<p>
381
+
For privacy questions, contact us at
382
+
<a href="mailto:support@grain.social">support@grain.social</a>.
383
+
</p>
384
+
</section>
385
+
</div>
386
+
`;
387
+
}
388
+
}
389
+
390
+
customElements.define('grain-privacy', GrainPrivacy);
391
+
```
392
+
393
+
**Step 2: Verify file exists**
394
+
395
+
Run: `ls -la src/components/pages/grain-privacy.js`
396
+
Expected: File exists
397
+
398
+
**Step 3: Commit**
399
+
400
+
```bash
401
+
git add src/components/pages/grain-privacy.js
402
+
git commit -m "feat: add privacy policy page component"
403
+
```
404
+
405
+
---
406
+
407
+
### Task 3: Create grain-copyright.js
408
+
409
+
**Files:**
410
+
- Create: `src/components/pages/grain-copyright.js`
411
+
412
+
**Step 1: Create the component file**
413
+
414
+
```javascript
415
+
import { LitElement, html, css } from 'lit';
416
+
import '../atoms/grain-icon.js';
417
+
418
+
export class GrainCopyright extends LitElement {
419
+
static styles = css`
420
+
:host {
421
+
display: block;
422
+
max-width: var(--feed-max-width);
423
+
margin: 0 auto;
424
+
min-height: 100vh;
425
+
min-height: 100dvh;
426
+
padding-bottom: 80px;
427
+
background: var(--color-bg-primary);
428
+
}
429
+
.header {
430
+
display: flex;
431
+
align-items: center;
432
+
gap: var(--space-sm);
433
+
padding: var(--space-md) var(--space-sm);
434
+
}
435
+
@media (min-width: 600px) {
436
+
.header {
437
+
padding-left: 0;
438
+
padding-right: 0;
439
+
}
440
+
}
441
+
.back-button {
442
+
background: none;
443
+
border: none;
444
+
padding: 8px;
445
+
cursor: pointer;
446
+
color: var(--color-text-primary);
447
+
margin-left: -8px;
448
+
}
449
+
h1 {
450
+
font-size: var(--font-size-md);
451
+
font-weight: var(--font-weight-semibold);
452
+
color: var(--color-text-primary);
453
+
margin: 0;
454
+
}
455
+
.content {
456
+
padding: 0 var(--space-sm);
457
+
}
458
+
@media (min-width: 600px) {
459
+
.content {
460
+
padding: 0;
461
+
}
462
+
}
463
+
.last-updated {
464
+
font-size: var(--font-size-xs);
465
+
color: var(--color-text-secondary);
466
+
margin-bottom: var(--space-lg);
467
+
}
468
+
section {
469
+
margin-bottom: var(--space-lg);
470
+
}
471
+
h2 {
472
+
font-size: var(--font-size-sm);
473
+
font-weight: var(--font-weight-semibold);
474
+
color: var(--color-text-primary);
475
+
margin: 0 0 var(--space-xs) 0;
476
+
}
477
+
p {
478
+
font-size: var(--font-size-xs);
479
+
color: var(--color-text-secondary);
480
+
line-height: 1.5;
481
+
margin: 0 0 var(--space-sm) 0;
482
+
}
483
+
a {
484
+
color: var(--color-accent);
485
+
}
486
+
`;
487
+
488
+
#goBack() {
489
+
history.back();
490
+
}
491
+
492
+
render() {
493
+
return html`
494
+
<div class="header">
495
+
<button class="back-button" @click=${this.#goBack}>
496
+
<grain-icon name="back" size="20"></grain-icon>
497
+
</button>
498
+
<h1>Copyright Policy</h1>
499
+
</div>
500
+
<div class="content">
501
+
<p class="last-updated">Last Updated: June 3, 2025</p>
502
+
503
+
<section>
504
+
<h2>Copyright Infringement</h2>
505
+
<p>
506
+
Grain respects the intellectual property rights of others and expects users to do the same.
507
+
If you believe your copyrighted work has been used in a way that constitutes infringement,
508
+
please notify us promptly.
509
+
</p>
510
+
</section>
511
+
512
+
<section>
513
+
<h2>Notice Requirements</h2>
514
+
<p>
515
+
Your infringement notice must include: (1) a description of the copyrighted work,
516
+
(2) the location of the infringing material, (3) your contact information,
517
+
(4) a statement that you believe in good faith the use is not authorized, and
518
+
(5) a statement, under penalty of perjury, that the information is accurate.
519
+
</p>
520
+
</section>
521
+
522
+
<section>
523
+
<h2>DMCA Compliance</h2>
524
+
<p>
525
+
Grain complies with the Digital Millennium Copyright Act (DMCA). If you are a copyright holder
526
+
and believe your rights have been violated, you may file a DMCA notice with the required
527
+
information to our designated agent. We will promptly respond to all valid DMCA notices and
528
+
take appropriate action, including removal of the infringing content and disabling access.
529
+
</p>
530
+
</section>
531
+
532
+
<section>
533
+
<h2>Repeat Infringers</h2>
534
+
<p>
535
+
Accounts that repeatedly infringe copyright may be suspended or removed in accordance with
536
+
AT Protocol and Grain Social's moderation guidelines.
537
+
</p>
538
+
</section>
539
+
540
+
<section>
541
+
<h2>Contact</h2>
542
+
<p>
543
+
To report infringement or submit a DMCA notice, contact us at
544
+
<a href="mailto:support@grain.social">support@grain.social</a>.
545
+
</p>
546
+
</section>
547
+
</div>
548
+
`;
549
+
}
550
+
}
551
+
552
+
customElements.define('grain-copyright', GrainCopyright);
553
+
```
554
+
555
+
**Step 2: Verify file exists**
556
+
557
+
Run: `ls -la src/components/pages/grain-copyright.js`
558
+
Expected: File exists
559
+
560
+
**Step 3: Commit**
561
+
562
+
```bash
563
+
git add src/components/pages/grain-copyright.js
564
+
git commit -m "feat: add copyright policy page component"
565
+
```
566
+
567
+
---
568
+
569
+
### Task 4: Register routes in grain-app.js
570
+
571
+
**Files:**
572
+
- Modify: `src/components/pages/grain-app.js`
573
+
574
+
**Step 1: Add imports for legal pages**
575
+
576
+
After line 14 (`import './grain-notifications.js';`), add:
577
+
578
+
```javascript
579
+
import './grain-terms.js';
580
+
import './grain-privacy.js';
581
+
import './grain-copyright.js';
582
+
```
583
+
584
+
**Step 2: Register routes**
585
+
586
+
After `.register('/settings/profile', 'grain-edit-profile')` (line 43), add:
587
+
588
+
```javascript
589
+
.register('/settings/terms', 'grain-terms')
590
+
.register('/settings/privacy', 'grain-privacy')
591
+
.register('/settings/copyright', 'grain-copyright')
592
+
```
593
+
594
+
**Step 3: Verify build succeeds**
595
+
596
+
Run: `npm run build`
597
+
Expected: Build completes without errors
598
+
599
+
**Step 4: Commit**
600
+
601
+
```bash
602
+
git add src/components/pages/grain-app.js
603
+
git commit -m "feat: register legal page routes"
604
+
```
605
+
606
+
---
607
+
608
+
### Task 5: Add links in grain-settings.js
609
+
610
+
**Files:**
611
+
- Modify: `src/components/pages/grain-settings.js`
612
+
613
+
**Step 1: Add navigation methods**
614
+
615
+
After `#signOut()` method (around line 121), add:
616
+
617
+
```javascript
618
+
#goToTerms() {
619
+
router.push('/settings/terms');
620
+
}
621
+
622
+
#goToPrivacy() {
623
+
router.push('/settings/privacy');
624
+
}
625
+
626
+
#goToCopyright() {
627
+
router.push('/settings/copyright');
628
+
}
629
+
```
630
+
631
+
**Step 2: Add link buttons in render**
632
+
633
+
After the Sign Out button (before the closing `</div>` of settings-list), add:
634
+
635
+
```javascript
636
+
<button class="settings-row" @click=${this.#goToTerms}>
637
+
Terms
638
+
</button>
639
+
<button class="settings-row" @click=${this.#goToPrivacy}>
640
+
Privacy
641
+
</button>
642
+
<button class="settings-row" @click=${this.#goToCopyright}>
643
+
Copyright
644
+
</button>
645
+
```
646
+
647
+
**Step 3: Verify build succeeds**
648
+
649
+
Run: `npm run build`
650
+
Expected: Build completes without errors
651
+
652
+
**Step 4: Commit**
653
+
654
+
```bash
655
+
git add src/components/pages/grain-settings.js
656
+
git commit -m "feat: add legal page links to settings"
657
+
```
658
+
659
+
---
660
+
661
+
### Task 6: Manual verification
662
+
663
+
**Step 1: Start dev server**
664
+
665
+
Run: `npm run dev`
666
+
667
+
**Step 2: Verify in browser**
668
+
669
+
1. Navigate to Settings
670
+
2. Scroll to bottom - should see Terms, Privacy, Copyright links
671
+
3. Tap each link - should navigate to respective page
672
+
4. Tap back button - should return to Settings
673
+
5. Verify text content matches source
674
+
675
+
**Step 3: Final commit if any fixes needed**
676
+
677
+
```bash
678
+
git add -A
679
+
git commit -m "fix: polish legal pages"
680
+
```