appview-less bluesky client
1<script lang="ts">
2 import { defaultSettings, type Settings } from '$lib/settings';
3 import { cache } from '$lib/cache';
4
5 interface Props {
6 localSettings: Settings;
7 onReset: () => void;
8 }
9
10 let { localSettings = $bindable(), onReset }: Props = $props();
11
12 const handleClearCache = () => {
13 cache.clear();
14 alert('cache cleared!');
15 };
16</script>
17
18{#snippet _input(name: string, desc: string)}
19 <div>
20 <label for={name} class="settings-desc block">
21 {desc}
22 </label>
23 <input
24 id={name}
25 type="url"
26 bind:value={localSettings.endpoints[name]}
27 placeholder={defaultSettings.endpoints[name]}
28 class="single-line-input"
29 />
30 </div>
31{/snippet}
32
33<div class="space-y-3 p-4">
34 <div>
35 <h3 class="settings-header">api endpoints</h3>
36 <div class="settings-box space-y-4">
37 {@render _input('slingshot', 'slingshot url (for fetching records & resolving identity)')}
38 {@render _input('spacedust', 'spacedust url (for notifications)')}
39 {@render _input('constellation', 'constellation url (for backlinks)')}
40 {@render _input('jetstream', 'jetstream url (for real-time updates)')}
41 {@render _input('pocket', 'pocket url (for preferences)')}
42 {@render _input('cdn', 'cdn url (for media)')}
43 </div>
44 </div>
45
46 <div class="settings-box">
47 <label for="social-app-url" class="mb-2 block text-sm font-semibold text-(--nucleus-fg)/80">
48 social-app url (for when copying links to posts / profiles)
49 </label>
50 <input
51 id="social-app-url"
52 type="url"
53 bind:value={localSettings.socialAppUrl}
54 placeholder={defaultSettings.socialAppUrl}
55 class="single-line-input"
56 />
57 </div>
58
59 <h3 class="settings-header">cache management</h3>
60 <div class="settings-box">
61 <p class="settings-desc">clears cached data (records, DID documents, handles, etc.)</p>
62 <button onclick={handleClearCache} class="action-button"> clear cache </button>
63 </div>
64
65 <h3 class="settings-header">reset settings</h3>
66 <div class="settings-box">
67 <p class="settings-desc">resets all settings to their default values</p>
68 <button onclick={onReset} class="action-button border-red-600 text-red-600 hover:bg-red-600/20">
69 reset to defaults
70 </button>
71 </div>
72</div>