Skip to content

Commit 66e0c96

Browse files
built-by-asbuilt-by-as
committed
refactor styles
1 parent 7fd4968 commit 66e0c96

File tree

4 files changed

+192
-107
lines changed

4 files changed

+192
-107
lines changed

‎index.html‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -16,32 +16,32 @@
1616
<body class="h-screen overflow-hidden bg-gray-900">
1717
<div class="flex h-full">
1818
<!-- Sidebar -->
19-
<div class="w-64 bg-gray-800 border-r border-gray-700 flex flex-col">
20-
<div class="p-4 border-b border-gray-700">
21-
<h1 class="text-white font-semibold text-lg">FleetCode</h1>
19+
<div class="sidebar">
20+
<div class="sidebar-header">
21+
<h1 class="sidebar-title">FleetCode</h1>
2222
</div>
2323

24-
<div class="flex-1 overflow-y-auto">
25-
<div class="p-2">
26-
<div class="text-xs text-gray-400 px-2 py-1 mb-1">TERMINALS</div>
27-
<div id="terminal-list"></div>
24+
<div class="sidebar-content">
25+
<div class="sidebar-section">
26+
<div class="sidebar-section-title">SESSIONS</div>
27+
<div id="session-list"></div>
2828
</div>
2929
</div>
3030

31-
<div class="p-3 border-t border-gray-700">
32-
<button id="new-terminal" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded text-sm font-medium transition">
33-
+ New Terminal
31+
<div class="sidebar-footer">
32+
<button id="new-session" class="btn-primary">
33+
+ New Session
3434
</button>
3535
</div>
3636
</div>
3737

3838
<!-- Main content -->
3939
<div class="flex-1 flex flex-col bg-black">
4040
<!-- Tabs -->
41-
<div id="tabs" class="flex bg-gray-900 border-b border-gray-700 overflow-x-auto"></div>
41+
<div id="tabs" class="tabs-container"></div>
4242

43-
<!-- Terminal container -->
44-
<div id="terminal-container" class="flex-1 relative"></div>
43+
<!-- Session container -->
44+
<div id="session-container" class="flex-1 relative"></div>
4545
</div>
4646
</div>
4747

‎main.ts‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@ import * as pty from "node-pty";
33
import * as os from "os";
44

55
let mainWindow: BrowserWindow;
6-
const terminals = new Map<string, pty.IPty>();
6+
const sessions = new Map<string, pty.IPty>();
77

8-
// Create new terminal
9-
ipcMain.on("create-terminal", (event) => {
10-
const terminalId = `terminal-${Date.now()}`;
8+
// Create new session
9+
ipcMain.on("create-session", (event) => {
10+
const sessionId = `session-${Date.now()}`;
1111
const shell = os.platform() === "darwin" ? "zsh" : "bash";
1212

1313
const ptyProcess = pty.spawn(shell, [], {
@@ -18,37 +18,37 @@ ipcMain.on("create-terminal", (event) => {
1818
env: process.env,
1919
});
2020

21-
terminals.set(terminalId, ptyProcess);
21+
sessions.set(sessionId, ptyProcess);
2222

2323
ptyProcess.onData((data) => {
24-
mainWindow.webContents.send("terminal-output", terminalId, data);
24+
mainWindow.webContents.send("session-output", sessionId, data);
2525
});
2626

27-
event.reply("terminal-created", terminalId);
27+
event.reply("session-created", sessionId);
2828
});
2929

30-
// Handle terminal input
31-
ipcMain.on("terminal-input", (_event, terminalId: string, data: string) => {
32-
const terminal = terminals.get(terminalId);
33-
if (terminal) {
34-
terminal.write(data);
30+
// Handle session input
31+
ipcMain.on("session-input", (_event, sessionId: string, data: string) => {
32+
const session = sessions.get(sessionId);
33+
if (session) {
34+
session.write(data);
3535
}
3636
});
3737

38-
// Handle terminal resize
39-
ipcMain.on("terminal-resize", (_event, terminalId: string, cols: number, rows: number) => {
40-
const terminal = terminals.get(terminalId);
41-
if (terminal) {
42-
terminal.resize(cols, rows);
38+
// Handle session resize
39+
ipcMain.on("session-resize", (_event, sessionId: string, cols: number, rows: number) => {
40+
const session = sessions.get(sessionId);
41+
if (session) {
42+
session.resize(cols, rows);
4343
}
4444
});
4545

46-
// Handle terminal close
47-
ipcMain.on("close-terminal", (_event, terminalId: string) => {
48-
const terminal = terminals.get(terminalId);
49-
if (terminal) {
50-
terminal.kill();
51-
terminals.delete(terminalId);
46+
// Handle session close
47+
ipcMain.on("close-session", (_event, sessionId: string) => {
48+
const session = sessions.get(sessionId);
49+
if (session) {
50+
session.kill();
51+
sessions.delete(sessionId);
5252
}
5353
});
5454

‎renderer.ts‎

Lines changed: 71 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,18 @@ import { ipcRenderer } from "electron";
22
import { Terminal } from "xterm";
33
import { FitAddon } from "xterm-addon-fit";
44

5-
interface TerminalSession {
5+
interface Session {
66
id: string;
77
terminal: Terminal;
88
fitAddon: FitAddon;
99
element: HTMLDivElement;
1010
name: string;
1111
}
1212

13-
const sessions = new Map<string, TerminalSession>();
14-
let activeTerminalId: string | null = null;
13+
const sessions = new Map<string, Session>();
14+
let activeSessionId: string | null = null;
1515

16-
function createTerminalSession(terminalId: string, name: string) {
16+
function createSession(sessionId: string, name: string) {
1717
const term = new Terminal({
1818
cursorBlink: true,
1919
fontSize: 14,
@@ -27,174 +27,174 @@ function createTerminalSession(terminalId: string, name: string) {
2727
const fitAddon = new FitAddon();
2828
term.loadAddon(fitAddon);
2929

30-
const terminalElement = document.createElement("div");
31-
terminalElement.className = "absolute inset-0 hidden";
32-
terminalElement.id = `term-${terminalId}`;
30+
const sessionElement = document.createElement("div");
31+
sessionElement.className = "session-wrapper";
32+
sessionElement.id = `session-${sessionId}`;
3333

34-
const container = document.getElementById("terminal-container");
34+
const container = document.getElementById("session-container");
3535
if (container) {
36-
container.appendChild(terminalElement);
36+
container.appendChild(sessionElement);
3737
}
3838

39-
term.open(terminalElement);
39+
term.open(sessionElement);
4040
fitAddon.fit();
4141

4242
term.onData((data) => {
43-
ipcRenderer.send("terminal-input", terminalId, data);
43+
ipcRenderer.send("session-input", sessionId, data);
4444
});
4545

46-
const session: TerminalSession = {
47-
id: terminalId,
46+
const session: Session = {
47+
id: sessionId,
4848
terminal: term,
4949
fitAddon,
50-
element: terminalElement,
50+
element: sessionElement,
5151
name,
5252
};
5353

54-
sessions.set(terminalId, session);
54+
sessions.set(sessionId, session);
5555

5656
// Add to sidebar
57-
addToSidebar(terminalId, name);
57+
addToSidebar(sessionId, name);
5858

5959
// Add tab
60-
addTab(terminalId, name);
60+
addTab(sessionId, name);
6161

62-
// Switch to this terminal
63-
switchToTerminal(terminalId);
62+
// Switch to this session
63+
switchToSession(sessionId);
6464

6565
// Handle resize
6666
const resizeHandler = () => {
67-
if (activeTerminalId === terminalId) {
67+
if (activeSessionId === sessionId) {
6868
fitAddon.fit();
69-
ipcRenderer.send("terminal-resize", terminalId, term.cols, term.rows);
69+
ipcRenderer.send("session-resize", sessionId, term.cols, term.rows);
7070
}
7171
};
7272
window.addEventListener("resize", resizeHandler);
7373

7474
return session;
7575
}
7676

77-
function addToSidebar(terminalId: string, name: string) {
78-
const list = document.getElementById("terminal-list");
77+
function addToSidebar(sessionId: string, name: string) {
78+
const list = document.getElementById("session-list");
7979
if (!list) return;
8080

8181
const item = document.createElement("div");
82-
item.id = `sidebar-${terminalId}`;
83-
item.className = "px-3 py-2 rounded cursor-pointer hover:bg-gray-700 text-gray-300 text-sm flex items-center justify-between group";
82+
item.id = `sidebar-${sessionId}`;
83+
item.className = "session-list-item";
8484
item.innerHTML = `
8585
<span class="truncate">${name}</span>
86-
<button class="close-btn opacity-0 group-hover:opacity-100 text-gray-500 hover:text-red-500 ml-2" data-id="${terminalId}">×</button>
86+
<button class="session-close-btn" data-id="${sessionId}">×</button>
8787
`;
8888

8989
item.addEventListener("click", (e) => {
90-
if (!(e.target as HTMLElement).classList.contains("close-btn")) {
91-
switchToTerminal(terminalId);
90+
if (!(e.target as HTMLElement).classList.contains("session-close-btn")) {
91+
switchToSession(sessionId);
9292
}
9393
});
9494

95-
const closeBtn = item.querySelector(".close-btn");
95+
const closeBtn = item.querySelector(".session-close-btn");
9696
closeBtn?.addEventListener("click", (e) => {
9797
e.stopPropagation();
98-
closeTerminal(terminalId);
98+
closeSession(sessionId);
9999
});
100100

101101
list.appendChild(item);
102102
}
103103

104-
function addTab(terminalId: string, name: string) {
104+
function addTab(sessionId: string, name: string) {
105105
const tabsContainer = document.getElementById("tabs");
106106
if (!tabsContainer) return;
107107

108108
const tab = document.createElement("div");
109-
tab.id = `tab-${terminalId}`;
110-
tab.className = "px-4 py-2 border-r border-gray-700 cursor-pointer hover:bg-gray-800 flex items-center space-x-2 min-w-max";
109+
tab.id = `tab-${sessionId}`;
110+
tab.className = "tab";
111111
tab.innerHTML = `
112-
<span class="text-sm text-gray-300">${name}</span>
113-
<button class="close-tab-btn text-gray-500 hover:text-red-500" data-id="${terminalId}">×</button>
112+
<span class="tab-name">${name}</span>
113+
<button class="tab-close-btn" data-id="${sessionId}">×</button>
114114
`;
115115

116116
tab.addEventListener("click", (e) => {
117-
if (!(e.target as HTMLElement).classList.contains("close-tab-btn")) {
118-
switchToTerminal(terminalId);
117+
if (!(e.target as HTMLElement).classList.contains("tab-close-btn")) {
118+
switchToSession(sessionId);
119119
}
120120
});
121121

122-
const closeBtn = tab.querySelector(".close-tab-btn");
122+
const closeBtn = tab.querySelector(".tab-close-btn");
123123
closeBtn?.addEventListener("click", (e) => {
124124
e.stopPropagation();
125-
closeTerminal(terminalId);
125+
closeSession(sessionId);
126126
});
127127

128128
tabsContainer.appendChild(tab);
129129
}
130130

131-
function switchToTerminal(terminalId: string) {
132-
// Hide all terminals
131+
function switchToSession(sessionId: string) {
132+
// Hide all sessions
133133
sessions.forEach((session, id) => {
134-
session.element.classList.add("hidden");
135-
document.getElementById(`tab-${id}`)?.classList.remove("bg-gray-800", "border-b-2", "border-blue-500");
136-
document.getElementById(`sidebar-${id}`)?.classList.remove("bg-gray-700");
134+
session.element.classList.remove("active");
135+
document.getElementById(`tab-${id}`)?.classList.remove("active");
136+
document.getElementById(`sidebar-${id}`)?.classList.remove("active");
137137
});
138138

139-
// Show active terminal
140-
const session = sessions.get(terminalId);
139+
// Show active session
140+
const session = sessions.get(sessionId);
141141
if (session) {
142-
session.element.classList.remove("hidden");
143-
document.getElementById(`tab-${terminalId}`)?.classList.add("bg-gray-800", "border-b-2", "border-blue-500");
144-
document.getElementById(`sidebar-${terminalId}`)?.classList.add("bg-gray-700");
145-
activeTerminalId = terminalId;
142+
session.element.classList.add("active");
143+
document.getElementById(`tab-${sessionId}`)?.classList.add("active");
144+
document.getElementById(`sidebar-${sessionId}`)?.classList.add("active");
145+
activeSessionId = sessionId;
146146

147147
// Focus and resize
148148
session.terminal.focus();
149149
setTimeout(() => {
150150
session.fitAddon.fit();
151-
ipcRenderer.send("terminal-resize", terminalId, session.terminal.cols, session.terminal.rows);
151+
ipcRenderer.send("session-resize", sessionId, session.terminal.cols, session.terminal.rows);
152152
}, 0);
153153
}
154154
}
155155

156-
function closeTerminal(terminalId: string) {
157-
const session = sessions.get(terminalId);
156+
function closeSession(sessionId: string) {
157+
const session = sessions.get(sessionId);
158158
if (!session) return;
159159

160160
// Remove from UI
161161
session.element.remove();
162-
document.getElementById(`tab-${terminalId}`)?.remove();
163-
document.getElementById(`sidebar-${terminalId}`)?.remove();
162+
document.getElementById(`tab-${sessionId}`)?.remove();
163+
document.getElementById(`sidebar-${sessionId}`)?.remove();
164164

165165
// Dispose terminal
166166
session.terminal.dispose();
167-
sessions.delete(terminalId);
167+
sessions.delete(sessionId);
168168

169169
// Close in main process
170-
ipcRenderer.send("close-terminal", terminalId);
170+
ipcRenderer.send("close-session", sessionId);
171171

172-
// Switch to another terminal
173-
if (activeTerminalId === terminalId) {
172+
// Switch to another session
173+
if (activeSessionId === sessionId) {
174174
const remainingSessions = Array.from(sessions.keys());
175175
if (remainingSessions.length > 0) {
176-
switchToTerminal(remainingSessions[0]);
176+
switchToSession(remainingSessions[0]);
177177
} else {
178-
activeTerminalId = null;
178+
activeSessionId = null;
179179
}
180180
}
181181
}
182182

183-
// Handle terminal output
184-
ipcRenderer.on("terminal-output", (_event, terminalId: string, data: string) => {
185-
const session = sessions.get(terminalId);
183+
// Handle session output
184+
ipcRenderer.on("session-output", (_event, sessionId: string, data: string) => {
185+
const session = sessions.get(sessionId);
186186
if (session) {
187187
session.terminal.write(data);
188188
}
189189
});
190190

191-
// Handle terminal created
192-
ipcRenderer.on("terminal-created", (_event, terminalId: string) => {
193-
const name = `Terminal ${sessions.size + 1}`;
194-
createTerminalSession(terminalId, name);
191+
// Handle session created
192+
ipcRenderer.on("session-created", (_event, sessionId: string) => {
193+
const name = `Session ${sessions.size + 1}`;
194+
createSession(sessionId, name);
195195
});
196196

197-
// New terminal button
198-
document.getElementById("new-terminal")?.addEventListener("click", () => {
199-
ipcRenderer.send("create-terminal");
197+
// New session button
198+
document.getElementById("new-session")?.addEventListener("click", () => {
199+
ipcRenderer.send("create-session");
200200
});

0 commit comments

Comments
 (0)