gabriel / musehub public
settings.ts typescript
147 lines 5.7 KB
Raw
sha256:3ff9c9863a9891bdcde71b4a43228f66d0493e38b7cc1d09fe9eb7de774046b2 feat: add repair-commit wire endpoint (API parity with repa… Opus 4.8 minor ⚠ breaking 1 day ago
1 /**
2 * settings.ts — Repository settings page.
3 *
4 * Handles topic tag input, collaborator invite, and delete confirmation guard.
5 * Config is read from the #page-data JSON element.
6 * Registered as: window.MusePages['settings']
7 */
8
9 // ── Types ─────────────────────────────────────────────────────────────────────
10
11 interface SettingsCfg {
12 repoId: string;
13 owner: string;
14 repoSlug: string;
15 base: string;
16 fullName: string;
17 }
18
19 declare global {
20 interface Window {
21 htmx?: { trigger(el: Element | string, event: string): void };
22 }
23 }
24
25 // ── Topic tag input ───────────────────────────────────────────────────────────
26
27 function addTopic(val: string, input: HTMLInputElement): void {
28 const cleaned = val.trim().toLowerCase().replace(/[^a-z0-9-]/g, '-');
29 const container = document.getElementById('topics-container');
30 if (!cleaned || !container) return;
31
32 const pill = document.createElement('span');
33 pill.className = 'tag-pill';
34 const removeBtn = document.createElement('button');
35 removeBtn.type = 'button';
36 removeBtn.className = 'tag-pill-remove';
37 removeBtn.dataset.action = 'remove-pill';
38 removeBtn.textContent = '×';
39 pill.textContent = cleaned;
40 pill.appendChild(removeBtn);
41 container.insertBefore(pill, input);
42 input.value = '';
43 }
44
45 function setupTopicInput(): void {
46 const input = document.getElementById('topic-input') as HTMLInputElement | null;
47 if (!input) return;
48
49 input.addEventListener('keydown', (e) => {
50 if (e.key === 'Enter' || e.key === ',') {
51 e.preventDefault();
52 addTopic(input.value, input);
53 } else if (e.key === 'Backspace' && input.value === '') {
54 const container = document.getElementById('topics-container');
55 const pills = container ? container.querySelectorAll('.tag-pill') : [];
56 if (pills.length > 0) pills[pills.length - 1].remove();
57 }
58 });
59 }
60
61 // ── Collaborator invite ───────────────────────────────────────────────────────
62
63 async function inviteCollaborator(repoId: string): Promise<void> {
64 const usernameEl = document.getElementById('invite-username') as HTMLInputElement | null;
65 const roleEl = document.getElementById('invite-role') as HTMLSelectElement | null;
66 const msgEl = document.getElementById('invite-msg') as HTMLElement | null;
67 if (!usernameEl || !roleEl || !msgEl) return;
68
69 const username = usernameEl.value.trim();
70 const role = roleEl.value;
71 if (!username) return;
72
73 try {
74 const resp = await fetch('/api/repos/' + repoId + '/collaborators', {
75 method: 'POST',
76 headers: { 'Content-Type': 'application/json' },
77 body: JSON.stringify({ username, role }),
78 });
79
80 if (!resp.ok) {
81 const err = await resp.json().catch(() => ({ detail: resp.statusText })) as { detail?: string };
82 msgEl.textContent = '❌ ' + (err.detail || 'Invite failed.');
83 msgEl.style.color = '#f85149';
84 } else {
85 usernameEl.value = '';
86 msgEl.textContent = '✅ Invited ' + username;
87 msgEl.style.color = '#3fb950';
88 const listEl = document.getElementById('collaborators-list');
89 if (listEl && window.htmx) window.htmx.trigger(listEl, 'load');
90 }
91 msgEl.style.display = 'block';
92 setTimeout(() => { msgEl.style.display = 'none'; }, 5000);
93 } catch(e) {
94 msgEl.textContent = '❌ ' + (e as Error).message;
95 msgEl.style.color = '#f85149';
96 msgEl.style.display = 'block';
97 }
98 }
99
100 // ── Delete confirmation guard ─────────────────────────────────────────────────
101
102 function setupDeleteGuard(fullName: string): void {
103 const form = document.getElementById('delete-repo-form');
104 if (!form) return;
105
106 form.addEventListener('htmx:before-request', (e) => {
107 const val = (document.getElementById('confirm-delete-name') as HTMLInputElement | null)?.value.trim();
108 const errorEl = document.getElementById('delete-name-error') as HTMLElement | null;
109 if (val !== fullName) {
110 if (errorEl) errorEl.style.display = 'block';
111 (e as CustomEvent).preventDefault();
112 }
113 });
114 }
115
116 // ── Event delegation ──────────────────────────────────────────────────────────
117
118 function setupEventDelegation(cfg: SettingsCfg): void {
119 document.addEventListener('click', (e) => {
120 const target = (e.target as Element).closest<HTMLElement>('[data-action]');
121 if (!target) return;
122 switch (target.dataset.action) {
123 case 'remove-pill':
124 target.parentElement?.remove();
125 break;
126 case 'invite-collaborator':
127 void inviteCollaborator(cfg.repoId);
128 break;
129 }
130 });
131 }
132
133 // ── Entry point ───────────────────────────────────────────────────────────────
134
135 export function initSettings(data: Record<string, unknown> = {}): void {
136 const cfg: SettingsCfg = {
137 repoId: String(data['repoId'] ?? ''),
138 owner: String(data['owner'] ?? ''),
139 repoSlug: String(data['repoSlug'] ?? ''),
140 base: String(data['base'] ?? ''),
141 fullName: String(data['fullName'] ?? ''),
142 };
143 if (!cfg.repoId) return;
144 setupTopicInput();
145 setupEventDelegation(cfg);
146 setupDeleteGuard(cfg.fullName);
147 }
File History 1 commit
sha256:3ff9c9863a9891bdcde71b4a43228f66d0493e38b7cc1d09fe9eb7de774046b2 feat: add repair-commit wire endpoint (API parity with repa… Opus 4.8 minor ⚠ 1 day ago