@opencoop/opencode-plugin 1.0.0 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,190 +1,443 @@
1
1
  <!DOCTYPE html>
2
- <html lang="en">
2
+ <html lang="en" data-theme="dark">
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>OpenCOOP - Team Collaboration</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
7
10
  <link rel="stylesheet" href="/assets/style.css">
11
+ <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🤝</text></svg>">
8
12
  </head>
9
13
  <body>
10
- <div class="app">
11
- <nav class="sidebar">
12
- <div class="logo">
13
- <h1>OpenCOOP</h1>
14
- <span>v1.0.0</span>
14
+ <div id="app" class="app">
15
+ <!-- LOADING SCREEN -->
16
+ <div id="loading-screen" class="loading-screen">
17
+ <div class="loader">
18
+ <div class="loader-ring"></div>
19
+ <div class="loader-ring"></div>
20
+ <div class="loader-ring"></div>
21
+ <div class="loader-logo">OC</div>
15
22
  </div>
16
- <ul class="nav-links">
17
- <li><a href="#" class="active" data-page="config">Config</a></li>
18
- <li><a href="#" data-page="dashboard">Dashboard</a></li>
19
- <li><a href="#" data-page="changes">Changes</a></li>
20
- <li><a href="#" data-page="team">Team</a></li>
21
- <li><a href="#" data-page="locks">Locks</a></li>
22
- </ul>
23
- <div class="nav-status">
24
- <div class="status-dot" id="statusDot"></div>
25
- <span id="statusText">Checking...</span>
23
+ <p class="loading-text">Initializing OpenCOOP...</p>
24
+ </div>
25
+
26
+ <!-- SIDEBAR -->
27
+ <nav class="sidebar" id="sidebar">
28
+ <div class="sidebar-header">
29
+ <div class="logo-wrapper">
30
+ <div class="logo-icon">
31
+ <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
32
+ <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
33
+ <circle cx="9" cy="7" r="4"/>
34
+ <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
35
+ <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
36
+ </svg>
37
+ </div>
38
+ <div class="logo-text">
39
+ <h1>OpenCOOP</h1>
40
+ <span class="version">v1.0.0</span>
41
+ </div>
42
+ </div>
43
+ </div>
44
+
45
+ <div class="sidebar-nav">
46
+ <a href="#" class="nav-item active" data-page="config" data-tooltip="Configuration">
47
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
48
+ <circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
49
+ </svg>
50
+ <span>Config</span>
51
+ </a>
52
+ <a href="#" class="nav-item" data-page="dashboard" data-tooltip="Dashboard">
53
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
54
+ <rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>
55
+ </svg>
56
+ <span>Dashboard</span>
57
+ </a>
58
+ <a href="#" class="nav-item" data-page="changes" data-tooltip="Changes">
59
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
60
+ <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/>
61
+ </svg>
62
+ <span>Changes</span>
63
+ </a>
64
+ <a href="#" class="nav-item" data-page="team" data-tooltip="Team">
65
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
66
+ <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
67
+ </svg>
68
+ <span>Team</span>
69
+ </a>
70
+ <a href="#" class="nav-item" data-page="locks" data-tooltip="Locks">
71
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
72
+ <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>
73
+ </svg>
74
+ <span>Locks</span>
75
+ </a>
76
+ </div>
77
+
78
+ <div class="sidebar-footer">
79
+ <div class="connection-status" id="connectionStatus">
80
+ <div class="status-indicator"></div>
81
+ <span class="status-text">Connecting...</span>
82
+ </div>
26
83
  </div>
27
84
  </nav>
28
85
 
29
- <main class="content">
30
- <!-- CONFIG PAGE -->
31
- <section id="page-config" class="page active">
32
- <h2>Configuration</h2>
86
+ <!-- MAIN CONTENT -->
87
+ <main class="main-content" id="mainContent">
88
+ <!-- TOP BAR -->
89
+ <header class="topbar">
90
+ <button class="menu-toggle" id="menuToggle">
91
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
92
+ <line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/>
93
+ </svg>
94
+ </button>
95
+ <div class="topbar-title" id="pageTitle">Configuration</div>
96
+ <div class="topbar-actions">
97
+ <button class="theme-toggle" id="themeToggle" title="Toggle theme">
98
+ <svg class="sun" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
99
+ <circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
100
+ </svg>
101
+ <svg class="moon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
102
+ <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
103
+ </svg>
104
+ </button>
105
+ </div>
106
+ </header>
107
+
108
+ <!-- PAGE CONTENT -->
109
+ <div class="page-container" id="pageContainer">
33
110
 
34
- <div class="mode-selection">
35
- <div class="mode-card" data-mode="host" onclick="selectMode('host')">
36
- <div class="mode-icon">HOST</div>
37
- <h3>HOST Mode</h3>
38
- <p>Share your project folder with team members</p>
111
+ <!-- CONFIG PAGE -->
112
+ <section id="page-config" class="page active">
113
+ <div class="page-header">
114
+ <h2>Configuration</h2>
115
+ <p>Set up your collaboration mode and workspace settings</p>
39
116
  </div>
40
- <div class="mode-card" data-mode="remote" onclick="selectMode('remote')">
41
- <div class="mode-icon">REMOTE</div>
42
- <h3>REMOTE Mode</h3>
43
- <p>Connect to a host's shared project</p>
117
+
118
+ <div class="mode-cards">
119
+ <div class="mode-card" data-mode="host" onclick="selectMode('host')">
120
+ <div class="mode-card-glow"></div>
121
+ <div class="mode-card-content">
122
+ <div class="mode-icon host">
123
+ <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
124
+ <rect x="2" y="2" width="20" height="8" rx="2" ry="2"/><rect x="2" y="14" width="20" height="8" rx="2" ry="2"/><line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/>
125
+ </svg>
126
+ </div>
127
+ <h3>HOST Mode</h3>
128
+ <p>Share your project folder with team members. They can view and edit files in real-time.</p>
129
+ <div class="mode-badge">Recommended</div>
130
+ </div>
131
+ </div>
132
+ <div class="mode-card" data-mode="remote" onclick="selectMode('remote')">
133
+ <div class="mode-card-glow"></div>
134
+ <div class="mode-card-content">
135
+ <div class="mode-icon remote">
136
+ <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
137
+ <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
138
+ <polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/>
139
+ </svg>
140
+ </div>
141
+ <h3>REMOTE Mode</h3>
142
+ <p>Connect to a host's shared project. Access their workspace and collaborate.</p>
143
+ <div class="mode-badge secondary">Client</div>
144
+ </div>
145
+ </div>
44
146
  </div>
45
- </div>
46
147
 
47
- <div id="host-config" class="config-section hidden">
48
- <h3>HOST Settings</h3>
49
- <div class="form-group">
50
- <label>Project Folder Path:</label>
51
- <div class="input-row">
52
- <input type="text" id="workspace-path" placeholder="/path/to/your/project">
53
- <button onclick="selectFolder()" class="btn-secondary">Browse</button>
148
+ <div id="host-config" class="config-panel hidden">
149
+ <div class="panel-header">
150
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
151
+ <rect x="2" y="2" width="20" height="8" rx="2" ry="2"/><rect x="2" y="14" width="20" height="8" rx="2" ry="2"/><line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/>
152
+ </svg>
153
+ <h3>HOST Settings</h3>
154
+ </div>
155
+ <div class="form-group">
156
+ <label>Project Folder Path</label>
157
+ <div class="input-group">
158
+ <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
159
+ <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
160
+ </svg>
161
+ <input type="text" id="workspace-path" placeholder="/path/to/your/project">
162
+ </div>
54
163
  </div>
164
+ <div class="form-group">
165
+ <label>Invite Link</label>
166
+ <div class="input-group">
167
+ <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
168
+ <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
169
+ </svg>
170
+ <input type="text" id="invite-link" readonly placeholder="Click Generate to create link">
171
+ </div>
172
+ </div>
173
+ <button class="btn btn-primary" onclick="generateInvite()">
174
+ <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
175
+ <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
176
+ </svg>
177
+ Generate Invite Link
178
+ </button>
55
179
  </div>
56
- <div class="form-group">
57
- <label>Invite Link:</label>
58
- <div class="input-row">
59
- <input type="text" id="invite-link" readonly placeholder="Click Generate to create link">
60
- <button onclick="copyInviteLink()" class="btn-secondary">Copy</button>
180
+
181
+ <div id="remote-config" class="config-panel hidden">
182
+ <div class="panel-header">
183
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
184
+ <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
185
+ </svg>
186
+ <h3>REMOTE Settings</h3>
61
187
  </div>
188
+ <div class="form-group">
189
+ <label>Host Invite Link</label>
190
+ <div class="input-group">
191
+ <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
192
+ <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
193
+ </svg>
194
+ <input type="text" id="host-url" placeholder="http://host:31313/invite/TOKEN">
195
+ </div>
196
+ </div>
197
+ <button class="btn btn-primary" onclick="connectToHost()">
198
+ <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
199
+ <polyline points="16 16 12 12 8 16"/><line x1="12" y1="12" x2="12" y2="21"/><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"/>
200
+ </svg>
201
+ Connect to Host
202
+ </button>
62
203
  </div>
63
- <button onclick="generateInvite()" class="btn-primary">Generate Invite Link</button>
64
- </div>
65
204
 
66
- <div id="remote-config" class="config-section hidden">
67
- <h3>REMOTE Settings</h3>
68
- <div class="form-group">
69
- <label>Host Invite Link:</label>
70
- <input type="text" id="host-url" placeholder="http://host:31313/invite/TOKEN">
205
+ <div class="save-bar" id="saveBar">
206
+ <button class="btn btn-success" onclick="saveConfig()">
207
+ <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
208
+ <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/>
209
+ </svg>
210
+ Save Configuration
211
+ </button>
71
212
  </div>
72
- <button onclick="connectToHost()" class="btn-primary">Connect to Host</button>
73
- </div>
213
+ </section>
74
214
 
75
- <button onclick="saveConfig()" class="btn-primary">Save Configuration</button>
76
- </section>
215
+ <!-- DASHBOARD PAGE -->
216
+ <section id="page-dashboard" class="page">
217
+ <div class="page-header">
218
+ <h2>Dashboard</h2>
219
+ <p>Real-time overview of your collaboration workspace</p>
220
+ </div>
77
221
 
78
- <!-- DASHBOARD PAGE -->
79
- <section id="page-dashboard" class="page">
80
- <h2>Dashboard</h2>
81
- <div class="stats-grid">
82
- <div class="stat-card">
83
- <div class="stat-value" id="stat-total-changes">0</div>
84
- <div class="stat-label">Total Changes</div>
222
+ <div class="stats-grid">
223
+ <div class="stat-card" data-stat="changes">
224
+ <div class="stat-icon">
225
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
226
+ <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/>
227
+ </svg>
228
+ </div>
229
+ <div class="stat-info">
230
+ <div class="stat-value" id="stat-total-changes">0</div>
231
+ <div class="stat-label">Total Changes</div>
232
+ </div>
233
+ </div>
234
+ <div class="stat-card" data-stat="online">
235
+ <div class="stat-icon green">
236
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
237
+ <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
238
+ </svg>
239
+ </div>
240
+ <div class="stat-info">
241
+ <div class="stat-value" id="stat-online-users">0</div>
242
+ <div class="stat-label">Online Users</div>
243
+ </div>
244
+ </div>
245
+ <div class="stat-card" data-stat="locks">
246
+ <div class="stat-icon orange">
247
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
248
+ <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>
249
+ </svg>
250
+ </div>
251
+ <div class="stat-info">
252
+ <div class="stat-value" id="stat-active-locks">0</div>
253
+ <div class="stat-label">Active Locks</div>
254
+ </div>
255
+ </div>
256
+ <div class="stat-card" data-stat="team">
257
+ <div class="stat-icon purple">
258
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
259
+ <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
260
+ </svg>
261
+ </div>
262
+ <div class="stat-info">
263
+ <div class="stat-value" id="stat-team-members">0</div>
264
+ <div class="stat-label">Team Members</div>
265
+ </div>
266
+ </div>
85
267
  </div>
86
- <div class="stat-card">
87
- <div class="stat-value" id="stat-online-users">0</div>
88
- <div class="stat-label">Online Users</div>
268
+
269
+ <div class="dashboard-grid">
270
+ <div class="card card-lg">
271
+ <div class="card-header">
272
+ <h3>Recent Activity</h3>
273
+ <button class="btn btn-ghost btn-sm" onclick="loadDashboard()">
274
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
275
+ <polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
276
+ </svg>
277
+ </button>
278
+ </div>
279
+ <div id="recent-activity" class="activity-list">
280
+ <div class="empty-state">
281
+ <p>No activity yet</p>
282
+ </div>
283
+ </div>
284
+ </div>
285
+ <div class="card">
286
+ <div class="card-header">
287
+ <h3>Online Users</h3>
288
+ </div>
289
+ <div id="online-users" class="user-list">
290
+ <div class="empty-state">
291
+ <p>No users online</p>
292
+ </div>
293
+ </div>
294
+ </div>
295
+ <div class="card">
296
+ <div class="card-header">
297
+ <h3>Active Locks</h3>
298
+ </div>
299
+ <div id="active-locks" class="lock-list">
300
+ <div class="empty-state">
301
+ <p>No active locks</p>
302
+ </div>
303
+ </div>
304
+ </div>
89
305
  </div>
90
- <div class="stat-card">
91
- <div class="stat-value" id="stat-active-locks">0</div>
92
- <div class="stat-label">Active Locks</div>
306
+ </section>
307
+
308
+ <!-- CHANGES PAGE -->
309
+ <section id="page-changes" class="page">
310
+ <div class="page-header">
311
+ <h2>Change History</h2>
312
+ <p>Track all modifications across your workspace</p>
93
313
  </div>
94
- <div class="stat-card">
95
- <div class="stat-value" id="stat-team-members">0</div>
96
- <div class="stat-label">Team Members</div>
314
+
315
+ <div class="filters-bar">
316
+ <div class="filter-group">
317
+ <input type="text" id="filter-file" placeholder="Filter by file..." class="filter-input">
318
+ <input type="text" id="filter-user" placeholder="Filter by user..." class="filter-input">
319
+ <select id="filter-action" class="filter-select">
320
+ <option value="">All Actions</option>
321
+ <option value="read">Read</option>
322
+ <option value="create">Create</option>
323
+ <option value="update">Update</option>
324
+ <option value="delete">Delete</option>
325
+ <option value="move">Move</option>
326
+ </select>
327
+ </div>
328
+ <button onclick="loadChanges()" class="btn btn-primary btn-sm">
329
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
330
+ <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
331
+ </svg>
332
+ Search
333
+ </button>
97
334
  </div>
98
- </div>
99
335
 
100
- <div class="dashboard-grid">
101
- <div class="card">
102
- <h3>Recent Activity</h3>
103
- <div id="recent-activity" class="activity-list"></div>
336
+ <div id="changes-list" class="changes-list">
337
+ <div class="empty-state">
338
+ <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="opacity: 0.3">
339
+ <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/>
340
+ </svg>
341
+ <p>No changes recorded yet</p>
342
+ </div>
104
343
  </div>
105
- <div class="card">
106
- <h3>Online Users</h3>
107
- <div id="online-users" class="user-list"></div>
344
+ </section>
345
+
346
+ <!-- TEAM PAGE -->
347
+ <section id="page-team" class="page">
348
+ <div class="page-header">
349
+ <h2>Team Management</h2>
350
+ <p>Manage your team members and invitations</p>
108
351
  </div>
352
+
109
353
  <div class="card">
110
- <h3>Changes by User</h3>
111
- <div id="changes-by-user" class="chart-container"></div>
354
+ <div class="card-header">
355
+ <h3>Invite New Member</h3>
356
+ </div>
357
+ <div class="invite-form">
358
+ <div class="form-row">
359
+ <input type="email" id="invite-email" placeholder="Email address" class="form-input">
360
+ <select id="invite-permissions" class="form-select">
361
+ <option value="read,write">Read + Write</option>
362
+ <option value="read">Read Only</option>
363
+ <option value="read,write,admin">Admin</option>
364
+ </select>
365
+ <input type="number" id="invite-days" placeholder="Days" value="7" min="1" max="365" class="form-input days-input">
366
+ <button onclick="createInvite()" class="btn btn-primary">
367
+ <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
368
+ <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
369
+ </svg>
370
+ Generate
371
+ </button>
372
+ </div>
373
+ <div id="invite-result" class="invite-result hidden">
374
+ <label>Invite Link:</label>
375
+ <div class="input-group">
376
+ <input type="text" id="generated-invite" readonly>
377
+ <button onclick="copyGeneratedInvite()" class="btn btn-secondary">Copy</button>
378
+ </div>
379
+ </div>
380
+ </div>
112
381
  </div>
382
+
113
383
  <div class="card">
114
- <h3>Active Locks</h3>
115
- <div id="active-locks" class="lock-list"></div>
116
- </div>
117
- </div>
118
- </section>
119
-
120
- <!-- CHANGES PAGE -->
121
- <section id="page-changes" class="page">
122
- <h2>Change History</h2>
123
- <div class="filters">
124
- <input type="text" id="filter-file" placeholder="Filter by file...">
125
- <input type="text" id="filter-user" placeholder="Filter by user...">
126
- <select id="filter-action">
127
- <option value="">All Actions</option>
128
- <option value="read">Read</option>
129
- <option value="create">Create</option>
130
- <option value="update">Update</option>
131
- <option value="delete">Delete</option>
132
- <option value="move">Move</option>
133
- </select>
134
- <button onclick="loadChanges()" class="btn-secondary">Apply</button>
135
- </div>
136
- <div id="changes-list" class="changes-list"></div>
137
- </section>
138
-
139
- <!-- TEAM PAGE -->
140
- <section id="page-team" class="page">
141
- <h2>Team Management</h2>
142
- <div class="card">
143
- <h3>Invite New Member</h3>
144
- <div class="form-row">
145
- <input type="email" id="invite-email" placeholder="Email address">
146
- <select id="invite-permissions">
147
- <option value="read,write">Read + Write</option>
148
- <option value="read">Read Only</option>
149
- <option value="read,write,admin">Admin</option>
150
- </select>
151
- <input type="number" id="invite-days" placeholder="Days" value="7" min="1" max="365">
152
- <button onclick="createInvite()" class="btn-primary">Generate Invite</button>
153
- </div>
154
- <div id="invite-result" class="invite-result hidden">
155
- <label>Invite Link:</label>
156
- <div class="input-row">
157
- <input type="text" id="generated-invite" readonly>
158
- <button onclick="copyGeneratedInvite()" class="btn-secondary">Copy</button>
384
+ <div class="card-header">
385
+ <h3>Team Members</h3>
386
+ </div>
387
+ <div id="team-members" class="member-list">
388
+ <div class="empty-state">
389
+ <p>No team members yet</p>
390
+ </div>
159
391
  </div>
160
392
  </div>
161
- </div>
162
393
 
163
- <div class="card">
164
- <h3>Team Members</h3>
165
- <div id="team-members" class="member-list"></div>
166
- </div>
394
+ <div class="card">
395
+ <div class="card-header">
396
+ <h3>Online Now</h3>
397
+ </div>
398
+ <div id="team-online" class="user-list">
399
+ <div class="empty-state">
400
+ <p>No users online</p>
401
+ </div>
402
+ </div>
403
+ </div>
404
+ </section>
167
405
 
168
- <div class="card">
169
- <h3>Online Users</h3>
170
- <div id="team-online" class="user-list"></div>
171
- </div>
172
- </section>
406
+ <!-- LOCKS PAGE -->
407
+ <section id="page-locks" class="page">
408
+ <div class="page-header">
409
+ <h2>File Locks</h2>
410
+ <p>Manage exclusive file locks to prevent conflicts</p>
411
+ </div>
173
412
 
174
- <!-- LOCKS PAGE -->
175
- <section id="page-locks" class="page">
176
- <h2>File Locks</h2>
177
- <div class="card">
178
- <div class="card-header">
179
- <h3>Active Locks</h3>
180
- <button onclick="loadLocks()" class="btn-secondary">Refresh</button>
413
+ <div class="card">
414
+ <div class="card-header">
415
+ <h3>Active Locks</h3>
416
+ <button class="btn btn-ghost btn-sm" onclick="loadLocks()">
417
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
418
+ <polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
419
+ </svg>
420
+ Refresh
421
+ </button>
422
+ </div>
423
+ <div id="locks-list" class="locks-table">
424
+ <div class="empty-state">
425
+ <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="opacity: 0.3">
426
+ <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>
427
+ </svg>
428
+ <p>No active locks</p>
429
+ </div>
430
+ </div>
181
431
  </div>
182
- <div id="locks-list" class="locks-table"></div>
183
- </div>
184
- </section>
432
+ </section>
433
+
434
+ </div>
185
435
  </main>
186
436
  </div>
187
437
 
438
+ <!-- TOAST NOTIFICATIONS -->
439
+ <div id="toast-container" class="toast-container"></div>
440
+
188
441
  <script src="/assets/app.js"></script>
189
442
  </body>
190
443
  </html>