Skip to content

Commit bd3f372

Browse files
IanSkelskeyIanSkelskey
committed
feat: update README with logo and version badge, replace vite.svg with logo.svg, enhance HelpModal with tabbed shortcuts and tips
1 parent 27e3649 commit bd3f372

6 files changed

Lines changed: 109 additions & 50 deletions

File tree

‎README.md‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
1-
# Collab Code — Collaborative Java IDE
1+
<p align="center">
2+
<img src="public/logo.svg" alt="Collab Code Logo" width="96" />
3+
</p>
24

3-
**Version 1.0.0-beta**
5+
<h1 align="center">Collab Code — Collaborative Java IDE</h1>
46

5-
[![Client](https://img.shields.io/github/deployments/IanSkelskey/collab-code/github-pages?style=for-the-badge&label=Client&logo=github&logoColor=white&color=34d399)](https://github.com/IanSkelskey/collab-code/deployments/github-pages)
6-
[![Server](https://img.shields.io/github/deployments/IanSkelskey/collab-code/master%20-%20collab-code-sync?style=for-the-badge&label=Server&logo=node.js&logoColor=white&color=34d399)](https://github.com/IanSkelskey/collab-code/deployments/master%20-%20collab-code-sync)
7+
<p align="center">
8+
<img src="https://img.shields.io/badge/version-1.0.0--beta-blue?style=flat&labelColor=555" alt="Version 1.0.0-beta" />
9+
</p>
10+
11+
<p align="center">
12+
<a href="https://github.com/IanSkelskey/collab-code/deployments/github-pages"><img src="https://img.shields.io/github/deployments/IanSkelskey/collab-code/github-pages?style=for-the-badge&label=Client&logo=github&logoColor=white&color=059669" alt="Client" /></a>
13+
<a href="https://github.com/IanSkelskey/collab-code/deployments/master%20-%20collab-code-sync"><img src="https://img.shields.io/github/deployments/IanSkelskey/collab-code/master%20-%20collab-code-sync?style=for-the-badge&label=Server&logo=node.js&logoColor=white&color=059669" alt="Server" /></a>
14+
</p>
715

816
A collaborative Java development environment for real-time pair programming. Share a link, code together with live cursors, and execute Java — all from the browser. Built for classroom/campus use with a lightweight WebSocket relay server.
917

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/collab-code/vite.svg" />
5+
<link rel="icon" type="image/svg+xml" href="/collab-code/logo.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, maximum-scale=1" />
77
<meta name="mobile-web-app-capable" content="yes" />
88
<meta name="apple-mobile-web-app-capable" content="yes" />

‎public/logo.svg‎

Lines changed: 17 additions & 0 deletions
Loading

‎public/vite.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/App.tsx‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -428,11 +428,13 @@ function AppContent() {
428428
<header className="flex items-center justify-between gap-2 px-3 py-1.5 sm:px-4 sm:py-2 bg-[#161b22] border-b border-zinc-700/50 shrink-0">
429429
<div className="flex items-center gap-2 sm:gap-3">
430430
{/* Logo / Title */}
431-
<h1 className="text-sm sm:text-base font-semibold tracking-tight">
432-
<span className="text-emerald-400">&lt;/&gt;</span>{' '}
433-
<span className="text-zinc-100 hidden xs:inline">Collab Code</span>
434-
<span className="text-[10px] text-zinc-400 font-normal ml-1.5 hidden sm:inline">1.0.0-beta</span>
435-
</h1>
431+
<div className="flex items-center gap-1.5 sm:gap-2">
432+
<img src="/collab-code/logo.svg" alt="Collab Code" className="w-6 h-6 sm:w-7 sm:h-7" />
433+
<h1 className="text-sm sm:text-base font-semibold tracking-tight">
434+
<span className="text-zinc-100 hidden xs:inline">Collab Code</span>
435+
<span className="text-xs text-zinc-400 font-normal ml-1.5 hidden sm:inline">1.0.0-beta</span>
436+
</h1>
437+
</div>
436438

437439
<div className="w-px h-5 bg-zinc-700 hidden sm:block" />
438440

@@ -692,10 +694,7 @@ function AppContent() {
692694
<Editor ref={editorRef} onRun={handleRun} onFormat={() => pushToast('Document formatted')} fontSize={fontSize} fs={fs} />
693695
) : (
694696
<div className="h-full flex flex-col items-center justify-center gap-4 text-zinc-500 select-none px-4">
695-
<svg className="w-12 h-12 text-zinc-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2">
696-
<path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" strokeLinecap="round" strokeLinejoin="round" />
697-
<polyline points="14 2 14 8 20 8" strokeLinecap="round" strokeLinejoin="round" />
698-
</svg>
697+
<img src="/collab-code/logo.svg" alt="Collab Code" className="w-24 h-24 opacity-40" />
699698
<div className="text-center space-y-1">
700699
<p className="text-sm font-medium text-zinc-400">No open editors</p>
701700
<p className="text-xs text-zinc-600">

‎src/components/HelpModal.tsx‎

Lines changed: 71 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useEffect } from 'react';
1+
import { useEffect, useState } from 'react';
22

33
interface HelpModalProps {
44
onClose: () => void;
@@ -25,7 +25,11 @@ const tips: string[] = [
2525
'Java files can be run directly with Ctrl+Enter or the Run button.',
2626
];
2727

28+
type Tab = 'shortcuts' | 'tips';
29+
2830
export default function HelpModal({ onClose }: HelpModalProps) {
31+
const [tab, setTab] = useState<Tab>('shortcuts');
32+
2933
useEffect(() => {
3034
const handler = (e: KeyboardEvent) => {
3135
if (e.key === 'Escape') onClose();
@@ -44,47 +48,66 @@ export default function HelpModal({ onClose }: HelpModalProps) {
4448
className="fixed inset-0 z-[100] flex items-center justify-center bg-black/30 backdrop-blur-[2px]"
4549
>
4650
<div className="bg-[#1e2030] border border-zinc-700 rounded-lg shadow-2xl shadow-black/60 w-[420px] max-w-[92vw] max-h-[85vh] flex flex-col overflow-hidden">
47-
{/* Header */}
48-
<div className="flex items-center justify-between px-5 pt-4 pb-3 border-b border-zinc-700/60">
49-
<h2 className="text-sm font-semibold text-zinc-100 flex items-center gap-2">
50-
<svg className="w-4 h-4 text-emerald-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
51-
<circle cx="12" cy="12" r="10" />
52-
<path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3" strokeLinecap="round" strokeLinejoin="round" />
53-
<line x1="12" y1="17" x2="12.01" y2="17" strokeLinecap="round" />
54-
</svg>
55-
Help
56-
</h2>
57-
<button
58-
onClick={onClose}
59-
className="text-zinc-500 hover:text-zinc-300 transition-colors cursor-pointer p-1 -m-1"
60-
>
61-
<svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
62-
<line x1="18" y1="6" x2="6" y2="18" strokeLinecap="round" />
63-
<line x1="6" y1="6" x2="18" y2="18" strokeLinecap="round" />
64-
</svg>
65-
</button>
51+
{/* Header with tabs */}
52+
<div className="px-4 sm:px-5 pt-3 sm:pt-4 border-b border-zinc-700/60">
53+
<div className="flex items-center justify-between mb-3">
54+
<h2 className="text-sm font-semibold text-zinc-100 flex items-center gap-2">
55+
<svg className="w-4 h-4 text-emerald-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
56+
<circle cx="12" cy="12" r="10" />
57+
<path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3" strokeLinecap="round" strokeLinejoin="round" />
58+
<line x1="12" y1="17" x2="12.01" y2="17" strokeLinecap="round" />
59+
</svg>
60+
Help
61+
</h2>
62+
<button
63+
onClick={onClose}
64+
className="text-zinc-500 hover:text-zinc-300 transition-colors cursor-pointer p-1 -m-1"
65+
>
66+
<svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
67+
<line x1="18" y1="6" x2="6" y2="18" strokeLinecap="round" />
68+
<line x1="6" y1="6" x2="18" y2="18" strokeLinecap="round" />
69+
</svg>
70+
</button>
71+
</div>
72+
<div className="flex gap-4">
73+
<button
74+
onClick={() => setTab('shortcuts')}
75+
className={`pb-2 text-xs font-medium transition-colors cursor-pointer border-b-2 ${
76+
tab === 'shortcuts'
77+
? 'text-emerald-400 border-emerald-400'
78+
: 'text-zinc-500 border-transparent hover:text-zinc-300'
79+
}`}
80+
>
81+
Shortcuts
82+
</button>
83+
<button
84+
onClick={() => setTab('tips')}
85+
className={`pb-2 text-xs font-medium transition-colors cursor-pointer border-b-2 ${
86+
tab === 'tips'
87+
? 'text-emerald-400 border-emerald-400'
88+
: 'text-zinc-500 border-transparent hover:text-zinc-300'
89+
}`}
90+
>
91+
Tips
92+
</button>
93+
</div>
6694
</div>
6795

6896
{/* Content */}
69-
<div className="flex-1 overflow-y-auto px-5 py-4 space-y-5">
70-
{/* Keyboard shortcuts */}
71-
<section>
72-
<h3 className="text-[11px] font-semibold uppercase tracking-wider text-zinc-500 mb-2">Keyboard Shortcuts</h3>
97+
<div className="flex-1 overflow-y-auto px-4 sm:px-5 py-3 sm:py-4">
98+
{tab === 'shortcuts' && (
7399
<div className="space-y-1.5">
74100
{shortcuts.map((s) => (
75-
<div key={s.keys} className="flex items-center justify-between text-xs">
76-
<span className="text-zinc-400">{s.desc}</span>
77-
<kbd className="bg-zinc-800 border border-zinc-700 text-zinc-300 px-1.5 py-0.5 rounded text-[10px] font-mono shrink-0 ml-3">
101+
<div key={s.keys} className="flex items-center justify-between text-xs gap-2">
102+
<span className="text-zinc-400 min-w-0">{s.desc}</span>
103+
<kbd className="bg-zinc-800 border border-zinc-700 text-zinc-300 px-1.5 py-0.5 rounded text-[10px] font-mono shrink-0">
78104
{s.keys}
79105
</kbd>
80106
</div>
81107
))}
82108
</div>
83-
</section>
84-
85-
{/* Tips */}
86-
<section>
87-
<h3 className="text-[11px] font-semibold uppercase tracking-wider text-zinc-500 mb-2">Tips</h3>
109+
)}
110+
{tab === 'tips' && (
88111
<ul className="space-y-1.5">
89112
{tips.map((tip, i) => (
90113
<li key={i} className="text-xs text-zinc-400 flex gap-2">
@@ -93,11 +116,24 @@ export default function HelpModal({ onClose }: HelpModalProps) {
93116
</li>
94117
))}
95118
</ul>
96-
</section>
119+
)}
97120
</div>
98121

99-
{/* Footer / Signature */}
100-
<div className="px-5 py-3 border-t border-zinc-700/60 text-center space-y-1">
122+
{/* Footer */}
123+
<div className="px-4 sm:px-5 py-2.5 sm:py-3 border-t border-zinc-700/60 flex flex-col items-center gap-1.5 sm:gap-2">
124+
<a
125+
href="https://github.com/IanSkelskey/collab-code/issues/new/choose"
126+
target="_blank"
127+
rel="noopener noreferrer"
128+
className="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium text-zinc-300 bg-zinc-700/60 hover:bg-zinc-600 transition-colors"
129+
>
130+
<svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
131+
<circle cx="12" cy="12" r="10" />
132+
<line x1="12" y1="8" x2="12" y2="12" strokeLinecap="round" />
133+
<line x1="12" y1="16" x2="12.01" y2="16" strokeLinecap="round" />
134+
</svg>
135+
Report a Bug or Request a Feature
136+
</a>
101137
<div className="text-xs text-zinc-400 font-mono">v1.0.0-beta</div>
102138
<span className="text-xs text-zinc-400">
103139
Made with <span className="text-red-400">❤️</span> by{' '}

0 commit comments

Comments
 (0)