+
+
+
S
+
SuperDocsFolder watcher
+
+
+
+
+
Preview mode
+
No-spend, nothing writes back
+
+
+
+
+
Watched folders
+
+ {filteredFolders.length === 0 && (
+
+ {searchTerm ? 'No folders match search.' : 'No folders watched yet.'}
+
+ )}
+ {filteredFolders.map((config) => {
+ const stats = getFolderStats(config);
+ const folderName = config.dropbox_folder_path.split('/').pop() || config.dropbox_folder_path;
+ const isActive = selectedFolderId === config.id;
+
+ return (
+
setSelectedFolderId(config.id)}
+ >
+
+
+
{folderName}
+
+ {config.treatment} {stats.text}
+
+
+
{stats.count > 0 ? stats.count : '0'}
+
+ );
+ })}
+
+
+
+ {folderConfigs.length} folders watched
+
+
+ {isSidebarOpen && (
+
setIsSidebarOpen(false)}
+ />
+ )}
+
+
+
+
setIsSidebarOpen(true)}>
+
+
+
+
+
+
+
setSearchTerm(e.target.value)}
+ />
+
+
+
setIsMockDropOpen(true)}>⚙ dev: seed sample drop
+
setIsSettingsOpen(true)}>＋ Watch a folder
+
+
+
+
+ {folderConfigs.length === 0 ? (
+
+
Setup Guide
+
Welcome to SuperDocs Console
+
+ Drop a file into this shared Dropbox folder, and it will be normalized to your
+ studio template. It will be filed next to the original file and named consistently
+ without affecting unnecessary files.
+
+
+
+
+
01
+
+
Client drops a file
+
Into their shared Dropbox folder, no other client can see it.
+
+
→
+
+
02
+
+
Treatment applies
+
Normalized to template, summarised, or answered per folder.
+
+
→
+
+
03
+
+
Filed back beside it
+
Consistent naming. Logged here. Never re-triggers itself.
+
+
+
+
+ setIsSettingsOpen(true)}>＋ Watch a folder
+
+
+ ) : selectedFolderId ? (
+
+ {(() => {
+ const selectedConfig = folderConfigs.find(c => c.id === selectedFolderId);
+ const folderJobs = jobs.filter(j => j.source_path.startsWith(selectedConfig.dropbox_folder_path));
+
+ if (folderJobs.length === 0) {
+ return (
+
+
No jobs yet
+
Drop a file in {selectedConfig.dropbox_folder_path} to see it here.
+
+ );
+ }
+
+ return folderJobs.map(job => (
+
{
+ await fetch(`${API_BASE}/jobs/${id}/approve`, { method: 'POST' });
+ fetchData();
+ }}
+ onReject={async (id) => {
+ await fetch(`${API_BASE}/jobs/${id}/reject`, { method: 'POST' });
+ fetchData();
+ }}
+ />
+ ));
+ })()}
+
+ ) : (
+
+
+
Select a folder
+
Choose a folder from the sidebar to view its jobs.
+
+
+ )}
+
+
+ sync check: live
+ {jobs.filter(j => ['DISCOVERED', 'STABILIZING', 'QUEUED'].includes(j.status)).length} jobs in queue
+ {isPreviewMode ? 'Preview mode ON: safe' : 'Preview mode OFF: writes to dropbox'}
+
+
+
+
+ {isSettingsOpen &&
{ setIsSettingsOpen(false); fetchData(); }} />}
+ {isMockDropOpen && (
+ { setIsMockDropOpen(false); fetchData(); }}
+ onWatchFolder={() => { setIsMockDropOpen(false); setIsSettingsOpen(true); }}
+ />
+ )}
+
+ );
+}
+
+export default App;
diff --git a/extensions/theshloksschauhan/dropbox-folder-watcher/frontend/src/api.js b/extensions/theshloksschauhan/dropbox-folder-watcher/frontend/src/api.js
new file mode 100644
index 00000000..33041010
--- /dev/null
+++ b/extensions/theshloksschauhan/dropbox-folder-watcher/frontend/src/api.js
@@ -0,0 +1 @@
+export const API_BASE = import.meta.env.VITE_API_BASE || 'http://localhost:8001/api';
diff --git a/extensions/theshloksschauhan/dropbox-folder-watcher/frontend/src/assets/hero.png b/extensions/theshloksschauhan/dropbox-folder-watcher/frontend/src/assets/hero.png
new file mode 100644
index 00000000..02251f4b
Binary files /dev/null and b/extensions/theshloksschauhan/dropbox-folder-watcher/frontend/src/assets/hero.png differ
diff --git a/extensions/theshloksschauhan/dropbox-folder-watcher/frontend/src/assets/react.svg b/extensions/theshloksschauhan/dropbox-folder-watcher/frontend/src/assets/react.svg
new file mode 100644
index 00000000..6c87de9b
--- /dev/null
+++ b/extensions/theshloksschauhan/dropbox-folder-watcher/frontend/src/assets/react.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/extensions/theshloksschauhan/dropbox-folder-watcher/frontend/src/assets/vite.svg b/extensions/theshloksschauhan/dropbox-folder-watcher/frontend/src/assets/vite.svg
new file mode 100644
index 00000000..5101b674
--- /dev/null
+++ b/extensions/theshloksschauhan/dropbox-folder-watcher/frontend/src/assets/vite.svg
@@ -0,0 +1 @@
+
Vite
diff --git a/extensions/theshloksschauhan/dropbox-folder-watcher/frontend/src/components/JobViewer.jsx b/extensions/theshloksschauhan/dropbox-folder-watcher/frontend/src/components/JobViewer.jsx
new file mode 100644
index 00000000..dc2bc61c
--- /dev/null
+++ b/extensions/theshloksschauhan/dropbox-folder-watcher/frontend/src/components/JobViewer.jsx
@@ -0,0 +1,153 @@
+import React, { useState } from 'react';
+import { FileSearch, CheckCircle2, XCircle } from 'lucide-react';
+import { format } from 'date-fns';
+
+function parseChangeContent(change) {
+ const raw = change?.raw || {};
+ let inner = raw;
+ if (typeof change?.content === 'string') {
+ try {
+ inner = JSON.parse(change.content);
+ } catch {
+ inner = { description: change.content, original: '', modified: change.content };
+ }
+ }
+ return {
+ description: inner.description || inner.type || 'Proposed change',
+ original: inner.original || '—',
+ modified: inner.modified || inner.content || '—',
+ section: raw.section || inner.section || 'document',
+ };
+}
+
+export function JobViewer({ job, onApprove, onReject }) {
+ const [actioning, setActioning] = useState(false);
+
+ if (!job) {
+ return (
+
+
+
Select a document to review
+
Choose an item from the sidebar to view details.
+
+ );
+ }
+
+ const handleAction = async (action) => {
+ setActioning(true);
+ try {
+ if (action === 'approve') await onApprove(job.id);
+ else await onReject(job.id);
+ } finally {
+ setActioning(false);
+ }
+ };
+
+ const isReviewPending = job.status === 'REVIEW_PENDING';
+ const fileName = job.source_path.split('/').pop() || 'document.pdf';
+ const changes = (job.proposed_changes || []).map(parseChangeContent);
+
+ return (
+
+
+
Document Review: {fileName}
+
+ Status: {job.status}
+ {' • '}
+ {job.preview ? 'Preview mode (no write-back)' : 'Live mode'}
+ {' • '}
+ Last Updated: {job.updated_at ? format(new Date(job.updated_at), 'PPpp') : 'N/A'}
+
+
+
+ {changes.length === 0 ? (
+
+ {isReviewPending
+ ? 'Waiting for proposed changes from SuperDocs…'
+ : 'No proposed changes recorded for this job.'}
+
+ ) : (
+ changes.map((change, idx) => (
+
+
+
{change.section.toUpperCase()} — {change.description}
+
+
+
+
+ −
+ {change.original}
+
+
+
+
+ +
+ {change.modified}
+
+
+
+
+ ))
+ )}
+
+ {isReviewPending && (
+
+
+
Human Approval Gate
+
+ {changes.length} change{changes.length === 1 ? '' : 's'} detected in {fileName}.
+ Approve to export and write back to Dropbox, or reject to discard.
+
+
+
+ handleAction('reject')}
+ disabled={actioning}
+ >
+ {actioning ? 'Processing...' : 'Reject'}
+
+ handleAction('approve')}
+ disabled={actioning}
+ >
+ {actioning ? 'Processing...' : 'Approve & Write Back'}
+
+
+
+ )}
+
+ {!isReviewPending && job.status === 'COMPLETED' && (
+
+
+
+
+
Approved, exported, and written back beside the source file.
+
+
+ )}
+
+ {!isReviewPending && job.status === 'APPROVED' && (
+
+
+
Approved — exporting…
+
Export and Dropbox write-back are in progress.
+
+
+ )}
+
+ {!isReviewPending && job.status === 'REJECTED' && (
+
+
+
+
+
This document was rejected. No changes were written back to Dropbox.
+
+
+ )}
+
+ );
+}
diff --git a/extensions/theshloksschauhan/dropbox-folder-watcher/frontend/src/components/MockDropModal.jsx b/extensions/theshloksschauhan/dropbox-folder-watcher/frontend/src/components/MockDropModal.jsx
new file mode 100644
index 00000000..f8e3f30f
--- /dev/null
+++ b/extensions/theshloksschauhan/dropbox-folder-watcher/frontend/src/components/MockDropModal.jsx
@@ -0,0 +1,133 @@
+import React, { useState, useEffect } from 'react';
+import { X, UploadCloud } from 'lucide-react';
+
+import { API_BASE } from '../api';
+
+export function MockDropModal({ onClose, onWatchFolder }) {
+ const [configs, setConfigs] = useState([]);
+ const [selectedConfig, setSelectedConfig] = useState('');
+ const [file, setFile] = useState(null);
+ const [isSubmitting, setIsSubmitting] = useState(false);
+ const [loadError, setLoadError] = useState('');
+
+ useEffect(() => {
+ fetch(`${API_BASE}/folder-configs`)
+ .then(async (res) => {
+ if (!res.ok) throw new Error(`API ${res.status}`);
+ return res.json();
+ })
+ .then((data) => {
+ const list = Array.isArray(data) ? data : [];
+ setConfigs(list);
+ if (list.length === 1) setSelectedConfig(list[0].id);
+ })
+ .catch((e) => {
+ console.error(e);
+ setLoadError('Cannot reach the API at localhost:8001. Start the backend first.');
+ });
+ }, []);
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ if (!selectedConfig || !file) {
+ alert('Pick a watched folder and a file first.');
+ return;
+ }
+
+ setIsSubmitting(true);
+ const formData = new FormData();
+ formData.append('folder_config_id', selectedConfig);
+ formData.append('file', file);
+
+ try {
+ const res = await fetch(`${API_BASE}/mock-drop`, {
+ method: 'POST',
+ body: formData,
+ });
+ if (res.ok) {
+ onClose();
+ } else {
+ const err = await res.json().catch(() => ({}));
+ alert('Failed: ' + (err.detail || res.statusText || 'Unknown error'));
+ }
+ } catch (err) {
+ console.error(err);
+ alert('Error connecting to backend on port 8001');
+ } finally {
+ setIsSubmitting(false);
+ }
+ };
+
+ return (
+
+
+
+
Simulate File Drop
+
+
+ {loadError && (
+
+ {loadError}
+
+ )}
+
+ {configs.length === 0 && !loadError ? (
+ <>
+
+ Nothing to drop into yet. Nominate a folder first — this picker is empty until you do.
+
+
{
+ onClose();
+ onWatchFolder?.();
+ }}
+ >
+ Watch a folder first
+
+
+ ) : (
+ <>
+
+ Choose a watched folder, then a file. Both are required.
+
+
+
+ )}
+
+
+
+ );
+}
diff --git a/extensions/theshloksschauhan/dropbox-folder-watcher/frontend/src/components/SettingsModal.jsx b/extensions/theshloksschauhan/dropbox-folder-watcher/frontend/src/components/SettingsModal.jsx
new file mode 100644
index 00000000..0fb41f23
--- /dev/null
+++ b/extensions/theshloksschauhan/dropbox-folder-watcher/frontend/src/components/SettingsModal.jsx
@@ -0,0 +1,138 @@
+import React, { useState, useEffect } from 'react';
+import { X } from 'lucide-react';
+
+import { API_BASE } from '../api';
+
+export function SettingsModal({ onClose }) {
+ const [clients, setClients] = useState([]);
+ const [configs, setConfigs] = useState([]);
+
+ // Forms
+ const [clientName, setClientName] = useState('');
+ const [clientRoot, setClientRoot] = useState('');
+
+ const [selectedClient, setSelectedClient] = useState('');
+ const [folderPath, setFolderPath] = useState('');
+ const [treatment, setTreatment] = useState('');
+
+ const fetchSettings = async () => {
+ try {
+ const [resClients, resConfigs] = await Promise.all([
+ fetch(`${API_BASE}/clients`),
+ fetch(`${API_BASE}/folder-configs`)
+ ]);
+ if (resClients.ok) setClients(await resClients.json());
+ if (resConfigs.ok) setConfigs(await resConfigs.json());
+ } catch (e) {
+ console.error(e);
+ }
+ };
+
+ useEffect(() => {
+ fetchSettings();
+ }, []);
+
+ const handleCreateClient = async (e) => {
+ e.preventDefault();
+ try {
+ const res = await fetch(`${API_BASE}/clients`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ name: clientName, dropbox_folder_root: clientRoot })
+ });
+ if (res.ok) {
+ setClientName('');
+ setClientRoot('');
+ fetchSettings();
+ }
+ } catch (e) {
+ console.error(e);
+ }
+ };
+
+ const handleCreateConfig = async (e) => {
+ e.preventDefault();
+ if (!selectedClient) return alert('Select a client');
+ try {
+ const res = await fetch(`${API_BASE}/folder-configs`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ client_id: selectedClient,
+ dropbox_folder_path: folderPath,
+ treatment: treatment,
+ instruction_text: {
+ normalize: 'Normalize this document to the studio template. Keep meaning, fix structure and headings.',
+ summarize: 'Write a short companion brief of this document for the studio, citing the source sections.',
+ respond: 'Draft the studio standard response document based on this file.',
+ }[treatment],
+ output_naming_pattern: '{basename}.superdocs.{treatment}{ext}',
+ enabled: true,
+ preview_mode: false,
+ debounce_seconds: 30,
+ operation_budget_per_hour: 20
+ })
+ });
+ if (res.ok) {
+ setFolderPath('');
+ setTreatment('');
+ fetchSettings();
+ }
+ } catch (e) {
+ console.error(e);
+ }
+ };
+
+ return (
+
+
+
+
Nominate Folders & Settings
+
+
+
+
+
1. Create Client
+
+
+
+
+
2. Nominate Folder
+
+
+
+
+
Configured Folders
+ {configs.length === 0 ?
No folders configured yet.
: (
+
+ {configs.map(c => (
+
+ {c.dropbox_folder_path} - {c.treatment}
+
+ ))}
+
+ )}
+
+
+
+
+ );
+}
diff --git a/extensions/theshloksschauhan/dropbox-folder-watcher/frontend/src/index.css b/extensions/theshloksschauhan/dropbox-folder-watcher/frontend/src/index.css
new file mode 100644
index 00000000..cf4d742c
--- /dev/null
+++ b/extensions/theshloksschauhan/dropbox-folder-watcher/frontend/src/index.css
@@ -0,0 +1,301 @@
+:root{
+ --pain:#8458B3;
+ --pain-dim:#6a4590;
+ --medium:#D0BDF4;
+ --ice:#A0D2EB;
+ --freeze:#E5EAF5;
+ --heavy:#A28089;
+
+ --bg:#F3F1FA;
+ --surface:#FFFFFF;
+ --sidebar:#FAF8FF;
+ --ink:#2B2740;
+ --ink-lo:#6E6B85;
+ --ink-faint:#9C99AE;
+
+ --pain-soft:rgba(132,88,179,0.08);
+ --pain-soft-2:rgba(132,88,179,0.14);
+ --ice-soft:rgba(160,210,235,0.30);
+ --green:#4A9B7F;
+ --green-soft:rgba(74,155,127,0.12);
+ --amber:#C9922E;
+ --amber-soft:rgba(201,146,46,0.14);
+
+ --border:rgba(43,39,64,0.08);
+ --border-2:rgba(43,39,64,0.13);
+}
+*{box-sizing:border-box;}
+html,body{margin:0;padding:0;}
+body{background:var(--bg);color:var(--ink);font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;}
+.shell{display:grid;grid-template-columns:264px 1fr;height:100vh;}
+
+/* ===== Sidebar ===== */
+.sidebar{background:var(--sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;}
+.side-brand{display:flex;align-items:center;gap:10px;padding:20px 20px 18px;border-bottom:1px solid var(--border);}
+.brand-mark{width:28px;height:28px;border-radius:8px;background:linear-gradient(150deg,var(--pain),var(--pain-dim));display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-weight:700;font-size:13px;color:#fff;box-shadow:0 4px 12px rgba(132,88,179,0.3);}
+.brand-txt{font-family:'Fraunces',serif;font-size:15.5px;font-weight:600;}
+.brand-txt span{display:block;font-family:'Inter',sans-serif;font-size:10px;font-weight:500;color:var(--ink-faint);letter-spacing:0.3px;margin-top:1px;}
+
+.side-mode{
+ margin:16px 16px 4px;padding:10px 12px;border-radius:10px;
+ background:var(--pain-soft);border:1px dashed rgba(132,88,179,0.35);
+ display:flex;align-items:center;justify-content:space-between;
+}
+.mode-label{font-size:11px;font-weight:600;color:var(--pain);}
+.mode-sub{font-size:9.5px;color:var(--ink-faint);margin-top:1px;}
+.toggle{width:30px;height:17px;border-radius:20px;background:var(--pain);position:relative;cursor:pointer;flex-shrink:0;}
+
+.side-section{padding:18px 12px 6px;font-size:10px;letter-spacing:1.1px;text-transform:uppercase;color:var(--ink-faint);font-weight:700;}
+.folder-list{padding:2px 10px;flex:1;overflow:auto;}
+.folder-item{
+ display:flex;align-items:center;gap:10px;padding:10px 10px;border-radius:10px;margin-bottom:3px;cursor:pointer;
+}
+.folder-item.active{background:var(--pain-soft-2);}
+.folder-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
+.folder-dot.synced{background:var(--green);}
+.folder-dot.processing{background:var(--ice);box-shadow:0 0 0 3px rgba(160,210,235,0.35);}
+.folder-dot.needs{background:var(--amber);}
+.folder-info{flex:1;min-width:0;}
+.folder-name{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
+.folder-meta{font-size:10.5px;color:var(--ink-faint);margin-top:1px;display:flex;gap:6px;align-items:center;}
+.treat-tag{
+ font-family:'IBM Plex Mono',monospace;font-size:9px;padding:1px 6px;border-radius:8px;
+ background:var(--medium);color:#5C3E82;text-transform:uppercase;letter-spacing:0.3px;
+}
+.folder-count{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--ink-faint);}
+
+.side-foot{padding:14px 20px;border-top:1px solid var(--border);font-size:10.5px;color:var(--ink-faint);line-height:1.6;}
+.side-foot b{color:var(--ink-lo);}
+
+/* ===== Main ===== */
+.main{display:flex;flex-direction:column;overflow:hidden;}
+.topbar{
+ display:flex;align-items:center;gap:14px;padding:16px 26px;border-bottom:1px solid var(--border);
+ background:rgba(255,255,255,0.7);backdrop-filter:blur(8px);
+}
+.search{
+ flex:1;max-width:380px;display:flex;align-items:center;gap:8px;
+ background:var(--surface);border:1px solid var(--border-2);border-radius:9px;padding:9px 12px;
+}
+.search input{border:none;outline:none;background:transparent;font-size:13px;color:var(--ink);width:100%;font-family:'Inter',sans-serif;}
+.search input::placeholder{color:var(--ink-faint);}
+.spacer{flex:1;}
+.btn{
+ font-family:'Inter',sans-serif;font-size:12.5px;font-weight:600;padding:9px 16px;border-radius:9px;
+ border:1px solid var(--border-2);background:var(--surface);color:var(--ink-lo);cursor:pointer;
+ display:flex;align-items:center;gap:7px;
+}
+.btn-primary{
+ background:linear-gradient(150deg,var(--pain),var(--pain-dim));border:none;color:#fff;
+ box-shadow:0 8px 18px rgba(132,88,179,0.28);
+}
+.btn-ghost-dev{
+ font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--ink-faint);
+ border:1px dashed var(--border-2);background:transparent;padding:8px 12px;
+ cursor: pointer;
+}
+.profile{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--ink-lo);}
+.avatar{width:26px;height:26px;border-radius:50%;background:linear-gradient(150deg,var(--ice),var(--pain));}
+
+.canvas{
+ flex:1;overflow:auto;position:relative;
+ background:
+ radial-gradient(700px 380px at 12% -10%, var(--freeze), transparent 60%),
+ radial-gradient(600px 340px at 100% 0%, var(--ice-soft), transparent 55%);
+}
+
+/* Empty state: explains the product */
+.empty-wrap{max-width:720px;margin:56px auto 0;padding:0 30px;text-align:center;}
+.empty-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--pain);margin-bottom:12px;}
+.empty-title{font-family:'Fraunces',serif;font-size:26px;font-weight:600;margin:0 0 10px;}
+.empty-sub{font-size:14px;color:var(--ink-lo);line-height:1.6;max-width:480px;margin:0 auto 40px;}
+
+.flow{display:flex;align-items:stretch;justify-content:center;gap:0;margin-bottom:44px;}
+.flow-card{
+ background:var(--surface);border:1px solid var(--border);border-radius:14px;
+ padding:18px 20px;width:190px;box-shadow:0 10px 24px rgba(132,88,179,0.08);
+ text-align:left;
+}
+.flow-num{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--ink-faint);}
+.flow-icon{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;margin:8px 0 10px;}
+.flow-icon.a{background:var(--pain-soft-2);color:var(--pain);}
+.flow-icon.b{background:var(--ice-soft);color:#3C7893;}
+.flow-icon.c{background:var(--green-soft);color:var(--green);}
+.flow-title{font-size:13px;font-weight:700;margin-bottom:4px;}
+.flow-desc{font-size:11.5px;color:var(--ink-faint);line-height:1.5;}
+.flow-arrow{display:flex;align-items:center;padding:0 14px;color:var(--ink-faint);}
+
+.empty-actions{display:flex;gap:10px;justify-content:center;}
+
+.status-strip{
+ max-width:720px;margin:0 auto 40px;padding:14px 18px;border-radius:12px;
+ background:rgba(255,255,255,0.6);border:1px solid var(--border);
+ display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--ink-faint);
+}
+
+.btn:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+/* Responsive UI */
+.hamburger {
+ display: none;
+ background: transparent;
+ border: none;
+ cursor: pointer;
+ color: var(--ink-lo);
+ padding: 8px;
+}
+
+@media (max-width: 900px) {
+ .shell { grid-template-columns: 1fr; }
+ .hamburger { display: block; }
+ .sidebar {
+ position: fixed;
+ top: 0;
+ left: 0;
+ height: 100vh;
+ z-index: 100;
+ transform: translateX(-100%);
+ transition: transform 0.3s ease;
+ }
+ .sidebar.open {
+ transform: translateX(0);
+ }
+ .main {
+ width: 100vw;
+ }
+}
+
+.empty-state {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ color: var(--text-secondary);
+}
+.empty-state svg {
+ margin-bottom: 16px;
+ opacity: 0.5;
+}
+
+/* Modals */
+.modal-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ background: rgba(0, 0, 0, 0.5);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1000;
+}
+
+.modal-content {
+ background: var(--bg-secondary);
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ border-radius: 12px;
+ border: 1px solid var(--border-color);
+ width: 500px;
+ max-width: 90vw;
+ box-shadow: 0 15px 40px rgba(132, 88, 179, 0.2);
+ display: flex;
+ flex-direction: column;
+}
+
+.modal-header {
+ padding: 16px 24px;
+ border-bottom: 1px solid var(--border-color);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.modal-header h2 {
+ font-size: 18px;
+ font-weight: 600;
+}
+
+.close-btn {
+ background: none;
+ border: none;
+ cursor: pointer;
+ color: var(--text-secondary);
+}
+
+.modal-body {
+ padding: 24px;
+ max-height: 70vh;
+ overflow-y: auto;
+}
+
+.settings-section {
+ margin-bottom: 24px;
+}
+.settings-section h3 {
+ font-size: 14px;
+ color: var(--text-secondary);
+ margin-bottom: 12px;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+}
+
+.settings-form {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+}
+
+.settings-form input, .settings-form select {
+ padding: 10px 12px;
+ border: 1px solid var(--border-color);
+ border-radius: 6px;
+ font-size: 14px;
+}
+
+.btn-primary {
+ background: linear-gradient(135deg, var(--color-purple-pain), #6b4096);
+ color: white;
+ padding: 10px 16px;
+ border-radius: 6px;
+ border: none;
+ font-weight: 500;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ box-shadow: 0 4px 15px rgba(132, 88, 179, 0.3);
+}
+
+.btn-primary:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 6px 20px rgba(132, 88, 179, 0.4);
+ filter: brightness(1.1);
+}
+
+.btn-secondary {
+ background-color: var(--bg-secondary);
+ color: var(--text-primary);
+ border: 1px solid var(--border-color);
+ padding: 8px 16px;
+ border-radius: 6px;
+ font-weight: 500;
+ cursor: pointer;
+}
+
+.config-list {
+ list-style: none;
+}
+.config-list li {
+ padding: 8px 12px;
+ background: var(--bg-hover);
+ border-radius: 6px;
+ margin-bottom: 8px;
+ font-size: 14px;
+}
diff --git a/extensions/theshloksschauhan/dropbox-folder-watcher/frontend/src/main.jsx b/extensions/theshloksschauhan/dropbox-folder-watcher/frontend/src/main.jsx
new file mode 100644
index 00000000..b9a1a6de
--- /dev/null
+++ b/extensions/theshloksschauhan/dropbox-folder-watcher/frontend/src/main.jsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+
+ ,
+)
diff --git a/extensions/theshloksschauhan/dropbox-folder-watcher/frontend/vite.config.js b/extensions/theshloksschauhan/dropbox-folder-watcher/frontend/vite.config.js
new file mode 100644
index 00000000..8b0f57b9
--- /dev/null
+++ b/extensions/theshloksschauhan/dropbox-folder-watcher/frontend/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [react()],
+})
diff --git a/extensions/theshloksschauhan/dropbox-folder-watcher/task4-architecture.png b/extensions/theshloksschauhan/dropbox-folder-watcher/task4-architecture.png
new file mode 100644
index 00000000..71d91950
Binary files /dev/null and b/extensions/theshloksschauhan/dropbox-folder-watcher/task4-architecture.png differ