Skip to content

Commit 135857b

Browse files
jaiswalismjaiswalism
committed
feat: build options page and popup dashboard UI
1 parent cf34156 commit 135857b

11 files changed

Lines changed: 504 additions & 0 deletions

‎src/options/assets/Content Permission.png‎

102 KB
Loading

‎src/options/assets/Credentials.png‎

176 KB
Loading

‎src/options/assets/Generate New Token.png‎

71.7 KB
Loading

‎src/options/assets/PAT.png‎

106 KB
Loading

‎src/options/assets/Read and Write.png‎

99.1 KB
Loading

‎src/options/assets/Select Repository Access.png‎

75.4 KB
Loading

‎src/options/assets/Settings.png‎

266 KB
Loading

‎src/options/index.css‎

Lines changed: 257 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,257 @@
1+
:root {
2+
--primary: #0070f3;
3+
--primary-hover: #0051a2;
4+
--bg-color: #111111;
5+
--card-bg: #1a1a1a;
6+
--text-main: #f0f0f0;
7+
--text-muted: #888888;
8+
--border: #333333;
9+
--error: #ff4d4f;
10+
--success: #00df89;
11+
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
12+
}
13+
14+
body {
15+
margin: 0;
16+
padding: 0;
17+
background-color: var(--bg-color);
18+
color: var(--text-main);
19+
font-family: var(--font-family);
20+
display: flex;
21+
justify-content: center;
22+
min-height: 100vh;
23+
}
24+
25+
.container {
26+
width: 100%;
27+
max-width: 600px;
28+
padding: 40px 20px;
29+
}
30+
31+
header {
32+
margin-bottom: 40px;
33+
text-align: center;
34+
}
35+
36+
header h1 {
37+
font-size: 28px;
38+
font-weight: 700;
39+
margin: 0 0 10px 0;
40+
background: linear-gradient(90deg, #fff, #888);
41+
-webkit-background-clip: text;
42+
-webkit-text-fill-color: transparent;
43+
}
44+
45+
header p {
46+
color: var(--text-muted);
47+
margin: 0;
48+
font-size: 15px;
49+
}
50+
51+
.card {
52+
background: var(--card-bg);
53+
border: 1px solid var(--border);
54+
border-radius: 12px;
55+
padding: 24px;
56+
margin-bottom: 24px;
57+
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
58+
transition: transform 0.2s ease, border-color 0.2s ease;
59+
}
60+
.card:hover {
61+
border-color: #444;
62+
}
63+
64+
h2 {
65+
font-size: 18px;
66+
margin: 0 0 20px 0;
67+
font-weight: 600;
68+
border-bottom: 1px solid var(--border);
69+
padding-bottom: 12px;
70+
}
71+
72+
.instruction-img {
73+
max-width: 100%;
74+
border: 1px solid #444;
75+
border-radius: 6px;
76+
margin-top: 8px;
77+
margin-bottom: 16px;
78+
display: block;
79+
}
80+
81+
.form-group {
82+
margin-bottom: 20px;
83+
display: flex;
84+
flex-direction: column;
85+
}
86+
87+
label {
88+
font-size: 14px;
89+
font-weight: 500;
90+
margin-bottom: 8px;
91+
color: #ccc;
92+
}
93+
94+
input, select {
95+
background: #000;
96+
border: 1px solid var(--border);
97+
color: var(--text-main);
98+
padding: 12px;
99+
border-radius: 8px;
100+
font-size: 15px;
101+
outline: none;
102+
transition: border-color 0.2s ease;
103+
}
104+
105+
input:focus, select:focus {
106+
border-color: var(--primary);
107+
}
108+
109+
small {
110+
margin-top: 8px;
111+
font-size: 12px;
112+
color: var(--text-muted);
113+
}
114+
115+
.btn {
116+
padding: 10px 20px;
117+
border-radius: 8px;
118+
font-size: 14px;
119+
font-weight: 600;
120+
cursor: pointer;
121+
border: none;
122+
transition: all 0.2s ease;
123+
}
124+
125+
.btn-primary {
126+
background-color: var(--primary);
127+
color: white;
128+
}
129+
.btn-primary:hover {
130+
background-color: var(--primary-hover);
131+
transform: translateY(-1px);
132+
}
133+
134+
.btn-secondary {
135+
background-color: #222;
136+
color: white;
137+
border: 1px solid var(--border);
138+
}
139+
.btn-secondary:hover {
140+
background-color: #333;
141+
}
142+
143+
.test-connection-wrapper {
144+
display: flex;
145+
align-items: center;
146+
gap: 15px;
147+
margin-top: 24px;
148+
}
149+
150+
.actions {
151+
display: flex;
152+
justify-content: flex-end;
153+
align-items: center;
154+
gap: 15px;
155+
margin-top: 30px;
156+
}
157+
158+
.status-text {
159+
font-size: 14px;
160+
font-weight: 500;
161+
}
162+
.status-success { color: var(--success); }
163+
.status-error { color: var(--error); }
164+
165+
.view-img {
166+
color: var(--primary);
167+
text-decoration: none;
168+
font-size: 12px;
169+
margin-left: 8px;
170+
}
171+
.view-img:hover {
172+
text-decoration: underline;
173+
}
174+
175+
.modal {
176+
display: none;
177+
position: fixed;
178+
z-index: 1000;
179+
left: 0;
180+
top: 0;
181+
width: 100%;
182+
height: 100%;
183+
overflow: auto;
184+
background-color: rgba(0,0,0,0.8);
185+
backdrop-filter: blur(5px);
186+
align-items: center;
187+
justify-content: center;
188+
}
189+
190+
.modal-content {
191+
margin: auto;
192+
display: block;
193+
max-width: 90%;
194+
max-height: 90%;
195+
border-radius: 8px;
196+
box-shadow: 0 4px 20px rgba(0,0,0,0.5);
197+
animation: zoom 0.3s;
198+
}
199+
200+
.setup-modal-content {
201+
background-color: var(--bg-card);
202+
padding: 30px;
203+
overflow-y: auto;
204+
max-width: 800px;
205+
max-height: 80vh;
206+
color: var(--text-main);
207+
}
208+
209+
.setup-modal-content h2 {
210+
margin-top: 0;
211+
}
212+
213+
.setup-modal-content ol {
214+
padding-left: 20px;
215+
line-height: 1.6;
216+
}
217+
218+
.setup-modal-content li {
219+
margin-bottom: 16px;
220+
}
221+
222+
.setup-modal-content ul {
223+
margin-top: 10px;
224+
padding-left: 20px;
225+
}
226+
227+
.security-note {
228+
margin-top: 30px;
229+
padding: 15px;
230+
background: rgba(0, 223, 137, 0.1);
231+
border-left: 4px solid var(--success);
232+
border-radius: 4px;
233+
font-size: 14px;
234+
line-height: 1.5;
235+
}
236+
237+
@keyframes zoom {
238+
from {transform: scale(0.95)}
239+
to {transform: scale(1)}
240+
}
241+
242+
.modal-close {
243+
position: absolute;
244+
top: 20px;
245+
right: 35px;
246+
color: #f1f1f1;
247+
font-size: 40px;
248+
font-weight: bold;
249+
transition: 0.3s;
250+
cursor: pointer;
251+
}
252+
.modal-close:hover,
253+
.modal-close:focus {
254+
color: #bbb;
255+
text-decoration: none;
256+
cursor: pointer;
257+
}

‎src/options/index.html‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>CommitCode Options</title>
6+
<link rel="stylesheet" href="./index.css">
7+
</head>
8+
<body>
9+
<div class="container">
10+
<header>
11+
<h1>CommitCode Settings</h1>
12+
<p>Configure your GitHub connection and synchronization preferences.</p>
13+
</header>
14+
15+
<main>
16+
<section class="card">
17+
<h2>GitHub Connection</h2>
18+
19+
<button id="open-setup-modal" class="btn btn-secondary" style="margin-bottom: 20px; width: 100%;">ℹ️ How to configure CommitCode (Setup Guide)</button>
20+
21+
<div class="form-group">
22+
<label for="pat">Personal Access Token (PAT)</label>
23+
<input type="password" id="pat" placeholder="ghp_xxxxxxxxxxxxxxxxxxxx">
24+
<small>Needs <strong>Contents: Read and write</strong> permission on a fine-grained token. Stored securely in local storage.</small>
25+
</div>
26+
27+
<div class="form-group">
28+
<label for="repo">Repository</label>
29+
<input type="text" id="repo" placeholder="username/repository">
30+
</div>
31+
32+
<div class="test-connection-wrapper">
33+
<button id="test-connection-btn" class="btn btn-secondary">Test Connection</button>
34+
<span id="test-status"></span>
35+
</div>
36+
</section>
37+
38+
<section class="card">
39+
<h2>Sync Preferences</h2>
40+
41+
<div class="form-group">
42+
<label for="folder-structure">Folder Structure</label>
43+
<select id="folder-structure">
44+
<option value="Difficulty">Difficulty (e.g. Medium/two-sum_v1.cpp)</option>
45+
<option value="Topic">Topic (e.g. Array/two-sum_v1.cpp)</option>
46+
<option value="Language">Language (e.g. python/two-sum_v1.py)</option>
47+
<option value="Number">Number (e.g. 0001/two-sum_v1.cpp)</option>
48+
<option value="Flat">Flat (e.g. two-sum_v1.cpp)</option>
49+
</select>
50+
</div>
51+
52+
<div class="form-group">
53+
<label for="version-mode">Version Mode</label>
54+
<select id="version-mode">
55+
<option value="versioned">Versioned (Keep all submissions: _v1, _v2)</option>
56+
<option value="overwrite">Overwrite (Replace the same file each time)</option>
57+
</select>
58+
<small>Versioned keeps a full history of your submissions as separate files. Overwrite updates a single file in place to reduce clutter.</small>
59+
</div>
60+
</section>
61+
62+
<div class="actions">
63+
<span id="save-status"></span>
64+
<button id="save-btn" class="btn btn-primary">Save Settings</button>
65+
</div>
66+
</main>
67+
</div>
68+
<div id="setup-modal" class="modal">
69+
<div class="modal-content setup-modal-content">
70+
<span class="modal-close" id="setup-modal-close">&times;</span>
71+
<h2>How to Configure CommitCode</h2>
72+
73+
<ol>
74+
<li>
75+
<strong>Create a NEW, empty repository</strong> specifically for CommitCode (e.g. <code>leetcode-solutions</code>).
76+
Do NOT point it at an existing personal repo. CommitCode will write files directly into the repo root or configured folders and could clutter or conflict with existing content.
77+
</li>
78+
<li>
79+
Generate a correctly-scoped fine-grained Personal Access Token (PAT):
80+
<ul>
81+
<li>Click on your GitHub profile and go to <strong>Settings</strong>.<br><img src="./assets/Settings.png" class="instruction-img"></li>
82+
<li>Under access, click <strong>Credentials</strong>.<br><img src="./assets/Credentials.png" class="instruction-img"></li>
83+
<li>Click on <strong>"Fine-grained personal access token"</strong>.<br><img src="./assets/PAT.png" class="instruction-img"></li>
84+
<li>Click on <strong>"Generate new token"</strong>.<br><img src="./assets/Generate New Token.png" class="instruction-img"></li>
85+
<li>Enter a token name, like <code>commitcode token</code>.</li>
86+
<li>Under <strong>Expiration date</strong>, you can set it to no expiration, otherwise after expiry you'll have to manually change it.</li>
87+
<li>Under <strong>Repository access</strong>, click <strong>"Only select repositories"</strong> and then select the newly created repo.<br><img src="./assets/Select Repository Access.png" class="instruction-img"></li>
88+
<li>Under <strong>Permissions</strong>, click <strong>"Add Permissions"</strong>, and add <strong>"Contents"</strong>.<br><img src="./assets/Content Permission.png" class="instruction-img"></li>
89+
<li>Change access of contents from read only to <strong>"read and write"</strong>. <strong>Every other permission should stay at "No access"</strong>.<br><img src="./assets/Read and Write.png" class="instruction-img"></li>
90+
<li>Click on <strong>Generate token</strong>, and copy the token (it can be seen only once).</li>
91+
</ul>
92+
</li>
93+
<li>
94+
Paste the token in the PAT section below, and write the repo name in the Repository field in the format: <code>username/repo-name</code>.
95+
</li>
96+
<li>
97+
Click <strong>"Test Connection"</strong> before saving, then select your sync preferences.
98+
</li>
99+
</ol>
100+
<div class="security-note">
101+
<strong>Security Note:</strong> Your token is stored locally on your device via <code>chrome.storage.local</code>. It is never transmitted anywhere except directly to GitHub's API. This relies on your OS's disk encryption rather than any custom encryption by CommitCode.
102+
</div>
103+
</div>
104+
</div>
105+
<script type="module" src="./index.ts"></script>
106+
</body>
107+
</html>

0 commit comments

Comments
 (0)