Skip to content

Commit 2592d67

Browse files
aramb-devaramb-dev
committed
feat(ui): add Documentation and Settings modal components
Introduce new modal components for documentation help and user settings: - Add Documentation component with hotkey reference, transliterations, and translations for Islamic Arabic phrases - Add Settings component with theme selector, keyboard shortcut configuration, and global shortcuts toggle - Create settings data module with default configuration and key code mappings for shortcut customization - Add Snyk security rules for code scanning best practices - Update .gitignore to exclude auto-generated Snyk rules file
1 parent 185bfa7 commit 2592d67

File tree

7 files changed

+1086
-0
lines changed

7 files changed

+1086
-0
lines changed

‎.github/instructions/snyk_rules.instructions.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
alwaysApply: true
3+
always_on: true
4+
trigger: always_on
5+
applyTo: "**"
6+
description: Snyk Security At Inception
7+
---
8+
9+
# Project security best practices
10+
11+
- Always run snyk_code_scan tool for new first party code that is generated in a Snyk-supported language.
12+
- If any security issues are found based on newly introduced or modified code or dependencies, attempt to fix the issues using the results context from Snyk.
13+
- Rescan the code after fixing the issues to ensure that the issues were fixed and that there are no newly introduced issues.
14+
- Repeat this process until no new issues are found.

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,6 @@ out/
2121
ehthumbs.db
2222
Thumbs.db
2323
.DS_Store
24+
25+
# Snyk Security Extension - AI Rules (auto-generated)
26+
.github/instructions/snyk_rules.instructions.md

‎src/components/Documentation.css‎

Lines changed: 246 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,246 @@
1+
/* Documentation Modal Styles */
2+
3+
.documentation-overlay {
4+
position: fixed;
5+
top: 0;
6+
left: 0;
7+
right: 0;
8+
bottom: 0;
9+
background: rgba(0, 0, 0, 0.85);
10+
z-index: 1000;
11+
display: flex;
12+
align-items: center;
13+
justify-content: center;
14+
padding: var(--spacing-md);
15+
animation: fadeIn 0.2s ease;
16+
}
17+
18+
@keyframes fadeIn {
19+
from { opacity: 0; }
20+
to { opacity: 1; }
21+
}
22+
23+
.documentation-modal {
24+
background: var(--bg-primary);
25+
border: 1px solid rgba(212, 175, 55, 0.3);
26+
border-radius: 16px;
27+
max-width: 700px;
28+
width: 100%;
29+
max-height: 85vh;
30+
overflow: hidden;
31+
position: relative;
32+
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
33+
animation: slideUp 0.3s ease;
34+
}
35+
36+
@keyframes slideUp {
37+
from {
38+
opacity: 0;
39+
transform: translateY(20px);
40+
}
41+
to {
42+
opacity: 1;
43+
transform: translateY(0);
44+
}
45+
}
46+
47+
.doc-close-button {
48+
position: absolute;
49+
top: var(--spacing-md);
50+
right: var(--spacing-md);
51+
background: transparent;
52+
border: 1px solid rgba(255, 255, 255, 0.2);
53+
color: var(--text-secondary);
54+
width: 36px;
55+
height: 36px;
56+
border-radius: 50%;
57+
font-size: 1.2rem;
58+
cursor: pointer;
59+
transition: all 0.2s ease;
60+
display: flex;
61+
align-items: center;
62+
justify-content: center;
63+
z-index: 10;
64+
}
65+
66+
.doc-close-button:hover {
67+
background: rgba(255, 255, 255, 0.1);
68+
color: var(--text-primary);
69+
border-color: var(--accent-gold);
70+
}
71+
72+
.doc-content {
73+
padding: var(--spacing-xl);
74+
overflow-y: auto;
75+
max-height: 85vh;
76+
scrollbar-width: thin;
77+
scrollbar-color: var(--accent-gold) transparent;
78+
}
79+
80+
.doc-content::-webkit-scrollbar {
81+
width: 8px;
82+
}
83+
84+
.doc-content::-webkit-scrollbar-track {
85+
background: transparent;
86+
}
87+
88+
.doc-content::-webkit-scrollbar-thumb {
89+
background: rgba(212, 175, 55, 0.3);
90+
border-radius: 4px;
91+
}
92+
93+
.doc-content::-webkit-scrollbar-thumb:hover {
94+
background: rgba(212, 175, 55, 0.5);
95+
}
96+
97+
.doc-title {
98+
font-size: 2rem;
99+
color: var(--accent-gold);
100+
margin: 0 0 0.25rem 0;
101+
text-align: center;
102+
font-weight: 600;
103+
}
104+
105+
.doc-subtitle {
106+
font-size: 1.25rem;
107+
color: var(--text-secondary);
108+
margin: 0 0 var(--spacing-xl) 0;
109+
text-align: center;
110+
font-weight: 400;
111+
font-style: italic;
112+
}
113+
114+
.doc-section {
115+
margin-bottom: var(--spacing-xl);
116+
}
117+
118+
.doc-section h3 {
119+
color: var(--accent-gold);
120+
font-size: 1.25rem;
121+
margin: 0 0 var(--spacing-sm) 0;
122+
padding-bottom: var(--spacing-xs);
123+
border-bottom: 1px solid rgba(212, 175, 55, 0.2);
124+
}
125+
126+
.doc-section h4 {
127+
color: var(--text-primary);
128+
font-size: 1rem;
129+
margin: var(--spacing-md) 0 var(--spacing-sm) 0;
130+
font-weight: 500;
131+
}
132+
133+
.doc-section p {
134+
color: var(--text-secondary);
135+
line-height: 1.7;
136+
margin: 0 0 var(--spacing-sm) 0;
137+
}
138+
139+
.hotkey-list {
140+
list-style: none;
141+
padding: 0;
142+
margin: var(--spacing-md) 0;
143+
display: grid;
144+
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
145+
gap: var(--spacing-xs);
146+
}
147+
148+
.hotkey-list li {
149+
display: flex;
150+
align-items: center;
151+
gap: var(--spacing-sm);
152+
padding: var(--spacing-xs) var(--spacing-sm);
153+
background: rgba(255, 255, 255, 0.03);
154+
border-radius: 6px;
155+
color: var(--text-secondary);
156+
}
157+
158+
.hotkey-list kbd {
159+
background: rgba(212, 175, 55, 0.15);
160+
color: var(--accent-gold);
161+
padding: 0.2rem 0.5rem;
162+
border-radius: 4px;
163+
font-family: monospace;
164+
font-size: 0.85rem;
165+
border: 1px solid rgba(212, 175, 55, 0.3);
166+
min-width: 80px;
167+
text-align: center;
168+
}
169+
170+
.hotkey-list .arabic {
171+
font-family: var(--font-family-arabic);
172+
font-size: 1.1rem;
173+
color: var(--text-primary);
174+
}
175+
176+
.doc-table {
177+
width: 100%;
178+
border-collapse: collapse;
179+
margin: var(--spacing-sm) 0;
180+
}
181+
182+
.doc-table td {
183+
padding: var(--spacing-xs) var(--spacing-sm);
184+
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
185+
color: var(--text-secondary);
186+
}
187+
188+
.doc-table tr:hover {
189+
background: rgba(255, 255, 255, 0.02);
190+
}
191+
192+
.doc-table td.arabic {
193+
font-family: var(--font-family-arabic);
194+
font-size: 1.2rem;
195+
color: var(--text-primary);
196+
text-align: right;
197+
width: 40%;
198+
direction: rtl;
199+
}
200+
201+
.doc-footer {
202+
text-align: center;
203+
padding-top: var(--spacing-lg);
204+
border-top: 1px solid rgba(255, 255, 255, 0.1);
205+
}
206+
207+
.doc-footer a {
208+
color: var(--accent-gold);
209+
text-decoration: none;
210+
transition: opacity 0.2s;
211+
}
212+
213+
.doc-footer a:hover {
214+
opacity: 0.8;
215+
text-decoration: underline;
216+
}
217+
218+
.doc-copyright {
219+
margin-top: var(--spacing-md);
220+
font-size: var(--font-size-sm);
221+
color: var(--text-muted);
222+
}
223+
224+
/* Responsive */
225+
@media (max-width: 600px) {
226+
.documentation-modal {
227+
max-height: 90vh;
228+
border-radius: 12px;
229+
}
230+
231+
.doc-content {
232+
padding: var(--spacing-lg);
233+
}
234+
235+
.doc-title {
236+
font-size: 1.5rem;
237+
}
238+
239+
.hotkey-list {
240+
grid-template-columns: 1fr;
241+
}
242+
243+
.doc-table td.arabic {
244+
font-size: 1rem;
245+
}
246+
}

‎src/components/Documentation.js‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import './Documentation.css';
4+
5+
function Documentation({ onClose }) {
6+
return (
7+
<div className="documentation-overlay">
8+
<div className="documentation-modal">
9+
<button className="doc-close-button" onClick={onClose} aria-label="Close documentation">
10+
✕
11+
</button>
12+
13+
<div className="doc-content">
14+
<h1 className="doc-title">Islāmic Text Copier</h1>
15+
<h2 className="doc-subtitle">Documentation</h2>
16+
17+
<section className="doc-section">
18+
<h3>What is it?</h3>
19+
<p>
20+
The Islāmic Text Copier is a simple but very useful software that allows you to easily copy Arabic texts to your clipboard. This software was designed specifically for writing islāmic articles, and wanting to include Arabic blessings given in certain cases.
21+
</p>
22+
</section>
23+
24+
<section className="doc-section">
25+
<h3>How to Use</h3>
26+
<h4>Copying texts</h4>
27+
<p>
28+
It's simple; click on an Arabic text on the screen, and it's copied right to your clipboard. To make things easier, you can also use hotkeys to copy them using <strong>Option</strong> (or <strong>Alt</strong> on Windows):
29+
</p>
30+
31+
<ul className="hotkey-list">
32+
<li><kbd>Option + 1</kbd> → Copies <span className="arabic">ﷺ</span></li>
33+
<li><kbd>Option + 2</kbd> → Copies <span className="arabic">ﷻ</span></li>
34+
<li><kbd>Option + 3</kbd> → Copies <span className="arabic">سُبْحَانَهُ وَ تَعَالَى</span></li>
35+
<li><kbd>Option + 4</kbd> → Copies <span className="arabic">عَزَّ وَ جَلَّ</span></li>
36+
<li><kbd>Option + 5</kbd> → Copies <span className="arabic">رَضِيَ اللهُ عَنْهُ</span></li>
37+
<li><kbd>Option + 6</kbd> → Copies <span className="arabic">رَضِيَ اللهُ عَنْهَا</span></li>
38+
<li><kbd>Option + 7</kbd> → Copies <span className="arabic">رَحِمَهُ الله</span></li>
39+
<li><kbd>Option + 8</kbd> → Copies <span className="arabic">حَفِظَهُ الله</span></li>
40+
<li><kbd>Option + 9</kbd> → Copies <span className="arabic">عَلَيْهِ السَّلَام</span></li>
41+
<li><kbd>Option + 0</kbd> → Copies <span className="arabic">الحَمْدُ لله</span></li>
42+
<li><kbd>Option + -</kbd> → Copies <span className="arabic">جَزَاكَ اللهُ خَيْرًا</span></li>
43+
<li><kbd>Option + =</kbd> → Copies <span className="arabic">بَارَكَ اللهُ فِيكَ</span></li>
44+
<li><kbd>Option + [</kbd> → Copies <span className="arabic">السَّلَامُ عَلَيْكُم</span></li>
45+
<li><kbd>Option + ]</kbd> → Copies <span className="arabic">إِن شَاءَ الله</span></li>
46+
</ul>
47+
</section>
48+
49+
<section className="doc-section">
50+
<h3>English Transliterations</h3>
51+
<table className="doc-table">
52+
<tbody>
53+
<tr><td className="arabic">ﷺ</td><td>Sallá Allāhu ʿAlayhī wa as-Salam</td></tr>
54+
<tr><td className="arabic">ﷻ</td><td>Jalla Jalāluhu</td></tr>
55+
<tr><td className="arabic">سُبْحَانَهُ وَ تَعَالَى</td><td>Subḥānahu wa Taʾālá</td></tr>
56+
<tr><td className="arabic">عَزَّ وَ جَلَّ</td><td>ʿAzza wa Jal</td></tr>
57+
<tr><td className="arabic">رَضِيَ اللهُ عَنْهُ</td><td>Raḍī Allāhu ʿAnhu</td></tr>
58+
<tr><td className="arabic">رَضِيَ اللهُ عَنْهَا</td><td>Raḍī Allāhu ʿAnhā</td></tr>
59+
<tr><td className="arabic">رَحِمَهُ الله</td><td>Raḥimahullāh</td></tr>
60+
<tr><td className="arabic">حَفِظَهُ الله</td><td>Ḥafiẓahullāh</td></tr>
61+
<tr><td className="arabic">عَلَيْهِ السَّلَام</td><td>ʿAlayhī as-Salām</td></tr>
62+
<tr><td className="arabic">الحَمْدُ لله</td><td>Alḥamdulillāh</td></tr>
63+
<tr><td className="arabic">جَزَاكَ اللهُ خَيْرًا</td><td>Jazāk Allāhu Khairan</td></tr>
64+
<tr><td className="arabic">بَارَكَ اللهُ فِيكَ</td><td>Bārik Allāhu Fīk</td></tr>
65+
<tr><td className="arabic">السَّلَامُ عَلَيْكُم</td><td>As-Salāmu ʿAlaykum</td></tr>
66+
<tr><td className="arabic">إِن شَاءَ الله</td><td>ʾIn shāʾ Allāh</td></tr>
67+
<tr><td className="arabic">رَضِيَ اللهُ عَنْهُمَا</td><td>Raḍī Allāhu ʿAnhumā</td></tr>
68+
<tr><td className="arabic">بِسْمِ اللهِ الرَّحْمٰنِ الرَّحِيمِ</td><td>Bismillāh ir-Raḥmān ir-Raḥīm</td></tr>
69+
</tbody>
70+
</table>
71+
</section>
72+
73+
<section className="doc-section">
74+
<h3>English Translations</h3>
75+
<table className="doc-table">
76+
<tbody>
77+
<tr><td className="arabic">ﷺ</td><td>May Allāh's praise & salutations be upon him</td></tr>
78+
<tr><td className="arabic">ﷻ</td><td>Exalted is His Majesty</td></tr>
79+
<tr><td className="arabic">سُبْحَانَهُ وَ تَعَالَى</td><td>Glorious and Exalted is He</td></tr>
80+
<tr><td className="arabic">عَزَّ وَ جَلَّ</td><td>The Mighty and Majestic</td></tr>
81+
<tr><td className="arabic">رَضِيَ اللهُ عَنْهُ</td><td>May Allāh be pleased with him</td></tr>
82+
<tr><td className="arabic">رَضِيَ اللهُ عَنْهَا</td><td>May Allāh be pleased with her</td></tr>
83+
<tr><td className="arabic">رَحِمَهُ الله</td><td>May Allāh have mercy on him</td></tr>
84+
<tr><td className="arabic">حَفِظَهُ الله</td><td>May Allāh preserve him</td></tr>
85+
<tr><td className="arabic">عَلَيْهِ السَّلَام</td><td>Peace be upon him</td></tr>
86+
<tr><td className="arabic">الحَمْدُ لله</td><td>All praises and thanks are due to Allāh</td></tr>
87+
<tr><td className="arabic">جَزَاكَ اللهُ خَيْرًا</td><td>May Allāh give you good</td></tr>
88+
<tr><td className="arabic">بَارَكَ اللهُ فِيكَ</td><td>May Allāh bless you</td></tr>
89+
<tr><td className="arabic">السَّلَامُ عَلَيْكُم</td><td>Peace be upon you</td></tr>
90+
<tr><td className="arabic">إِن شَاءَ الله</td><td>If Allāh wills</td></tr>
91+
<tr><td className="arabic">رَضِيَ اللهُ عَنْهُمَا</td><td>May Allāh be pleased with them both</td></tr>
92+
<tr><td className="arabic">بِسْمِ اللهِ الرَّحْمٰنِ الرَّحِيمِ</td><td>In the name of Allāh, the Most Gracious, the Most Merciful</td></tr>
93+
</tbody>
94+
</table>
95+
</section>
96+
97+
<section className="doc-section doc-footer">
98+
<p>
99+
This should sum up everything you need to know about Islāmic Text Copier. If you write islāmic articles, this software is a high recommendation.
100+
</p>
101+
<p>
102+
Download it at: <a href="https://itc.nasiratif.net" target="_blank" rel="noopener noreferrer">itc.nasiratif.net</a>
103+
</p>
104+
<p className="doc-copyright">© Nāṣir ʿAṭif</p>
105+
</section>
106+
</div>
107+
</div>
108+
</div>
109+
);
110+
}
111+
112+
Documentation.propTypes = {
113+
onClose: PropTypes.func.isRequired,
114+
};
115+
116+
export default Documentation;

0 commit comments

Comments
 (0)