Skip to content

Commit 19462f3

Browse files
shanrizvi2shanrizvi2
committed
ui fixes
1 parent 2883f1f commit 19462f3

File tree

8 files changed

+175
-43
lines changed

8 files changed

+175
-43
lines changed

‎package-lock.json‎

Lines changed: 20 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,5 +33,8 @@
3333
"last 1 firefox version",
3434
"last 1 safari version"
3535
]
36+
},
37+
"devDependencies": {
38+
"eslint-plugin-react-hooks": "^5.2.0"
3639
}
3740
}

‎src/App.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ const App = ({ carouselData, suggestionsData }) => {
1010
{/* App Section */}
1111
<div
1212
style={{
13-
margin: '10px',
14-
padding: '10px',
13+
margin: '0px',
14+
padding: '0px',
1515
paddingTop: '0',
1616
marginTop: '0'
1717
}}

‎src/AppContent.jsx‎

Lines changed: 69 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,37 @@
1-
import React, { useState } from 'react';
1+
import React, { useState, useEffect } from 'react';
22
import { Routes, Route } from 'react-router-dom';
33
import Navbar from './components/Navbar';
44
import SuggestionsPage from './components/SuggestionsPage';
55
import ChatPage from './components/ChatPage';
66

7+
const MOBILE_BREAKPOINT = 768; // px
8+
79
const AppContent = ({ suggestionsData }) => {
810
const [activeChats, setActiveChats] = useState([]);
11+
const [isSidebarOpen, setIsSidebarOpen] = useState(
12+
typeof window !== 'undefined' ? window.innerWidth >= MOBILE_BREAKPOINT : true
13+
);
14+
const [isMobile, setIsMobile] = useState(
15+
typeof window !== 'undefined' ? window.innerWidth < MOBILE_BREAKPOINT : false
16+
);
17+
18+
useEffect(() => {
19+
const handleResize = () => {
20+
const mobileNow = window.innerWidth < MOBILE_BREAKPOINT;
21+
setIsMobile(mobileNow);
22+
23+
setIsSidebarOpen((prev) => {
24+
if (mobileNow && prev) return false; // collapse
25+
if (!mobileNow && !prev) return true; // expand
26+
return prev;
27+
});
28+
};
29+
30+
window.addEventListener('resize', handleResize);
31+
return () => window.removeEventListener('resize', handleResize);
32+
}, []);
33+
34+
const toggleSidebar = () => setIsSidebarOpen((prev) => !prev);
935

1036
const handleOpenChat = (suggestion) => {
1137
setActiveChats((prev) => {
@@ -15,12 +41,49 @@ const AppContent = ({ suggestionsData }) => {
1541
};
1642

1743
return (
18-
<div className="app-container">
19-
<Navbar activeChats={activeChats} />
20-
<div className="main-content">
44+
<div
45+
className="app-container"
46+
style={{ display: 'flex', position: 'relative', height: '100%' }}
47+
>
48+
{isSidebarOpen && (
49+
<Navbar
50+
activeChats={activeChats}
51+
isMobile={isMobile}
52+
onClose={toggleSidebar}
53+
/>
54+
)}
55+
56+
{/* Hamburger – absolute inside this container, not the whole page */}
57+
{!isSidebarOpen && isMobile && (
58+
<button
59+
aria-label="Open sidebar"
60+
onClick={toggleSidebar}
61+
style={{
62+
position: 'absolute',
63+
top: 10,
64+
left: 10,
65+
zIndex: 20,
66+
background: 'none',
67+
border: 'none',
68+
fontSize: '1.8rem',
69+
color: '#d6ceba',
70+
cursor: 'pointer',
71+
}}
72+
>
73+
&#9776;
74+
</button>
75+
)}
76+
77+
<div className="main-content" style={{ flex: 1 }}>
2178
<Routes>
22-
<Route path="/" element={<SuggestionsPage suggestionsData={suggestionsData} />} />
23-
<Route path="/chat/:id" element={<ChatPage onOpenChat={handleOpenChat} />} />
79+
<Route
80+
path="/"
81+
element={<SuggestionsPage suggestionsData={suggestionsData} />}
82+
/>
83+
<Route
84+
path="/chat/:id"
85+
element={<ChatPage onOpenChat={handleOpenChat} />}
86+
/>
2487
</Routes>
2588
</div>
2689
</div>

‎src/components/Carousel.jsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,20 +23,20 @@ const AnimatedRow = ({ row, rowIndex }) => {
2323
style={{
2424
display: 'flex',
2525
alignItems: 'center',
26-
backgroundColor: '#FFFFF0',
26+
backgroundColor: 'var(--color-main-text)',
2727
borderRadius: '8px',
2828
padding: '10px',
2929
paddingTop: '3px',
3030
paddingBottom: '3px',
3131
marginRight: '10px',
3232
paddingRight: '0px',
33-
flex: '0 0 175px',
34-
marginLeft: isFirstCardInSecondRow ? '95px' : '0'
33+
flex: '0 0 275px',
34+
marginLeft: isFirstCardInSecondRow ? '132px' : '0'
3535
}}
3636
>
3737
<div
3838
style={{
39-
width: '135px',
39+
width: '220px',
4040
color: '#333',
4141
fontFamily: 'sans-serif',
4242
fontSize: '16px',
@@ -74,19 +74,19 @@ const AnimatedRow = ({ row, rowIndex }) => {
7474
style={{
7575
display: 'flex',
7676
alignItems: 'center',
77-
backgroundColor: '#FFFFF0',
77+
backgroundColor: 'var(--color-main-text)',
7878
borderRadius: '8px',
7979
padding: '10px',
8080
paddingTop: '3px',
8181
paddingBottom: '3px',
8282
marginRight: '10px',
8383
paddingRight: '0px',
84-
flex: '0 0 175px'
84+
flex: '0 0 275px'
8585
}}
8686
>
8787
<div
8888
style={{
89-
width: '135px',
89+
width: '220px',
9090
color: '#333',
9191
fontFamily: 'sans-serif',
9292
fontSize: '16px',
@@ -164,7 +164,7 @@ const Carousel = ({ carouselData }) => {
164164
marginBottom: '20px',
165165
}}
166166
>
167-
General User Model
167+
The General User Model (GUM)
168168
</h2>
169169
{carouselData.map((row, index) => (
170170
<AnimatedRow key={index} row={row} rowIndex={index} />

‎src/components/DemoPage.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,10 +58,10 @@ print(f"User's coding preferences: {preferences}")`;
5858

5959
return (
6060

61-
<div style={{margin: '0 auto', paddingLeft: '5%', paddingRight: '5%', paddingTop: '40px', paddingBottom: '20px' }}>
62-
<h1 style={{ marginBottom: '10px', textAlign: 'center' }}>Learning General User Models from Computer Use</h1>
61+
<div style={{margin: '0 auto', paddingLeft: '5%', paddingRight: '5%', paddingTop: '40px', paddingBottom: '30px' }}>
62+
<h1 style={{ marginBottom: '20px', textAlign: 'center' }}>Learning General User Models from Computer Use</h1>
6363

64-
<div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', marginBottom: '20px' }}>
64+
<div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', marginBottom: '10px' }}>
6565
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', margin: '0 15px', marginBottom: '15px' }}>
6666
<div style={{ fontSize: '1.1rem', fontWeight: '500' }}>Omar Shaikh</div>
6767
<div style={{ fontWeight: '300' }}>Stanford</div>

‎src/components/LeftPane.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@ const LeftPane = ({ selectedHour, onTimeChange, activity }) => {
152152
>
153153
<span style={{ fontSize: '14px', color: '#999' }}>GIF Screen</span>
154154
</div>
155-
<p style={{ margin: '5px 0 10px 0', fontSize: '16px' }}>
155+
<p style={{ margin: '15px 0 10px 0', fontSize: '16px' }}>
156156
The user is <b>{activity.charAt(0).toLowerCase() + activity.slice(1)}</b>
157157
</p>
158158
</div>

‎src/components/Navbar.jsx‎

Lines changed: 69 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,67 @@
11
import React, { useState } from 'react';
22
import { Link, useLocation } from 'react-router-dom';
33

4-
const Navbar = ({ activeChats }) => {
4+
const Navbar = ({ activeChats, isMobile, onClose }) => {
55
const location = useLocation();
6-
const [sidebarWidth, setSidebarWidth] = useState(250); // Default width
6+
const [sidebarWidth, setSidebarWidth] = useState(250);
77

8-
// Handle drag to resize
8+
/* ---------- desktop‑only drag‑resize ---------- */
99
const handleMouseMove = (e) => {
10-
// const newWidth = e.clientX < 180 ? 180 : e.clientX; // min 180px
11-
// setSidebarWidth(newWidth);
10+
const newWidth = Math.max(e.clientX, 180); // min 180 px
11+
setSidebarWidth(newWidth);
1212
};
13-
14-
const handleMouseUp = () => {
13+
const stopResize = () => {
1514
document.removeEventListener('mousemove', handleMouseMove);
16-
document.removeEventListener('mouseup', handleMouseUp);
15+
document.removeEventListener('mouseup', stopResize);
1716
};
18-
19-
const handleMouseDown = (e) => {
17+
const startResize = (e) => {
18+
if (isMobile) return;
2019
e.preventDefault();
2120
document.addEventListener('mousemove', handleMouseMove);
22-
document.addEventListener('mouseup', handleMouseUp);
21+
document.addEventListener('mouseup', stopResize);
2322
};
2423

24+
/* ---------- positioning ---------- */
25+
const navStyle = isMobile
26+
? {
27+
width: sidebarWidth,
28+
position: 'absolute',
29+
top: 0,
30+
left: 0,
31+
height: '100%',
32+
/* NOTHING ELSE OVERRIDDEN → inherits the same background,
33+
padding, fonts, etc., as the desktop bar */
34+
zIndex: 15,
35+
}
36+
: {
37+
width: sidebarWidth,
38+
position: 'relative',
39+
};
40+
2541
return (
26-
<div className="navbar" style={{ width: sidebarWidth }}>
27-
{/* Suggestions link */}
28-
<div style={{ marginBottom: '20px' }}>
42+
<div className="navbar" style={navStyle}>
43+
{/* mobile close (×) */}
44+
{isMobile && (
45+
<button
46+
aria-label="Close sidebar"
47+
onClick={onClose}
48+
style={{
49+
position: 'absolute',
50+
top: 10,
51+
right: 10,
52+
background: 'none',
53+
border: 'none',
54+
fontSize: '1.8rem',
55+
color: '#d6ceba',
56+
cursor: 'pointer',
57+
}}
58+
>
59+
&times;
60+
</button>
61+
)}
62+
63+
{/* suggestions link */}
64+
<div style={{ marginBottom: 20, marginTop: isMobile ? 50 : 0 }}>
2965
<Link
3066
to="/"
3167
className={`nav-link ${
@@ -36,13 +72,13 @@ const Navbar = ({ activeChats }) => {
3672
</Link>
3773
</div>
3874

39-
{/* Active Chats */}
40-
<div style={{ fontSize: '.8rem', marginBottom: '10px' }}>Active Chats</div>
75+
{/* active chats */}
76+
<div style={{ fontSize: '.8rem', marginBottom: 10 }}>Active Chats</div>
4177
<ul style={{ listStyle: 'none', paddingLeft: 0, margin: 0 }}>
4278
{activeChats.map((chat) => {
4379
const isActive = location.pathname === `/chat/${chat.id}`;
4480
return (
45-
<li key={chat.id} style={{ marginBottom: '8px' }}>
81+
<li key={chat.id} style={{ marginBottom: 8 }}>
4682
<Link
4783
to={`/chat/${chat.id}`}
4884
className={`nav-link ${isActive ? 'nav-link-active' : ''}`}
@@ -54,8 +90,22 @@ const Navbar = ({ activeChats }) => {
5490
})}
5591
</ul>
5692

57-
{/* Draggable resizer handle */}
58-
<div className="resizer" onMouseDown={handleMouseDown}></div>
93+
{/* desktop resizer handle */}
94+
{!isMobile && (
95+
<div
96+
className="resizer"
97+
onMouseDown={startResize}
98+
style={{
99+
width: 2,
100+
cursor: 'col-resize',
101+
position: 'absolute',
102+
top: 0,
103+
right: 0,
104+
bottom: 0,
105+
background: '#444',
106+
}}
107+
/>
108+
)}
59109
</div>
60110
);
61111
};

0 commit comments

Comments
 (0)