Skip to content

Add project-mode create flow and top-level navbar links #110

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
raphaeltm merged 1 commit into from
Feb 18, 2026
Merged

Add project-mode create flow and top-level navbar links #110

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions apps/web/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,14 @@ export default function App() {
</ProtectedRoute>
}
/>
<Route
path="/projects"
element={
<ProtectedRoute>
<Dashboard />
</ProtectedRoute>
}
/>
<Route
path="/settings"
element={
Expand All @@ -49,6 +57,14 @@ export default function App() {
</ProtectedRoute>
}
/>
<Route
path="/projects/new"
element={
<ProtectedRoute>
<CreateWorkspace mode="project" />
</ProtectedRoute>
}
/>
<Route
path="/workspaces/:id"
element={
Expand Down
11 changes: 8 additions & 3 deletions apps/web/src/components/RepoSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,11 +55,16 @@ export function RepoSelector({

// Filter repositories based on input
useEffect(() => {
if (!value || value.startsWith('http') || value.startsWith('git@')) {
if (value.startsWith('http') || value.startsWith('git@')) {
setFilteredRepos([]);
return;
}

if (!value) {
setFilteredRepos(repositories.slice(0, 25));
return;
}

const searchTerm = value.toLowerCase();
const filtered = repositories.filter(
(repo) => repo.fullName.toLowerCase().includes(searchTerm)
Expand Down Expand Up @@ -155,7 +160,7 @@ export function RepoSelector({
}

// Show dropdown if we have repos and user is typing a search term
if (repositories.length > 0 && newValue && !newValue.startsWith('http') && !newValue.startsWith('git@')) {
if (repositories.length > 0 && !newValue.startsWith('http') && !newValue.startsWith('git@')) {
setShowDropdown(true);
} else {
setShowDropdown(false);
Expand All @@ -176,7 +181,7 @@ export function RepoSelector({
};

const handleFocus = () => {
if (repositories.length > 0 && value && !value.startsWith('http') && !value.startsWith('git@')) {
if (repositories.length > 0 && !value.startsWith('http') && !value.startsWith('git@')) {
setShowDropdown(true);
}
};
Expand Down
263 changes: 163 additions & 100 deletions apps/web/src/components/UserMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,30 @@
import { useState, useRef, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import { useAuth } from './AuthProvider';
import { signOut } from '../lib/auth';

const PRIMARY_NAV_ITEMS = [
{ label: 'Dashboard', path: '/dashboard' },
{ label: 'Projects', path: '/projects' },
{ label: 'Nodes', path: '/nodes' },
{ label: 'Settings', path: '/settings' },
];

function isNavItemActive(path: string, pathname: string): boolean {
if (path === '/dashboard') {
return pathname === '/dashboard';
}

return pathname === path || pathname.startsWith(`${path}/`);
}

/**
* User menu with avatar and dropdown.
*/
export function UserMenu() {
const { user } = useAuth();
const navigate = useNavigate();
const location = useLocation();
const [isOpen, setIsOpen] = useState(false);
const menuRef = useRef<HTMLDivElement>(null);

Expand All @@ -34,125 +50,172 @@ export function UserMenu() {
if (!user) return null;

return (
<div style={{ position: 'relative' }} ref={menuRef}>
<style>{`.sam-user-name { display: none; } @media (min-width: 640px) { .sam-user-name { display: inline-block; } }`}</style>
<button
onClick={() => setIsOpen(!isOpen)}
style={{
display: 'flex',
alignItems: 'center',
gap: '0.5rem',
color: 'var(--sam-color-fg-muted)',
background: 'none',
border: 'none',
cursor: 'pointer',
padding: '4px',
}}
>
{user.image ? (
<img
src={user.image}
alt={user.name || user.email}
style={{ height: 32, width: 32, borderRadius: '50%' }}
/>
) : (
<div style={{
height: 32,
width: 32,
borderRadius: '50%',
backgroundColor: 'var(--sam-color-accent-primary)',
<div style={{ display: 'flex', alignItems: 'center', gap: 'var(--sam-space-2)' }}>
<style>{`
.sam-user-name { display: none; }
.sam-primary-nav {
display: flex;
align-items: center;
gap: 0.25rem;
overflow-x: auto;
max-width: min(52vw, 36rem);
padding-bottom: 2px;
}
.sam-primary-nav-link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.4rem 0.625rem;
border-radius: var(--sam-radius-md);
border: 1px solid transparent;
font-size: 0.8125rem;
font-weight: 500;
text-decoration: none;
color: var(--sam-color-fg-muted);
white-space: nowrap;
transition: all 0.12s ease;
}
.sam-primary-nav-link:hover {
color: var(--sam-color-fg-primary);
background: color-mix(in srgb, var(--sam-color-bg-surface) 72%, transparent);
border-color: var(--sam-color-border-default);
}
.sam-primary-nav-link.is-active {
color: var(--sam-color-fg-primary);
background: color-mix(in srgb, var(--sam-color-accent-primary) 16%, transparent);
border-color: color-mix(in srgb, var(--sam-color-accent-primary) 55%, var(--sam-color-border-default));
}
@media (min-width: 640px) {
.sam-user-name { display: inline-block; }
}
`}</style>

<nav className="sam-primary-nav" aria-label="Primary navigation">
{PRIMARY_NAV_ITEMS.map((item) => (
<Link
key={item.path}
className={`sam-primary-nav-link${isNavItemActive(item.path, location.pathname) ? ' is-active' : ''}`}
to={item.path}
>
{item.label}
</Link>
))}
</nav>

<div style={{ position: 'relative' }} ref={menuRef}>
<button
onClick={() => setIsOpen(!isOpen)}
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: '#fff',
fontSize: '0.875rem',
fontWeight: 500,
}}>
{(user.name || user.email).charAt(0).toUpperCase()}
</div>
)}
<span className="sam-user-name" style={{ fontSize: '0.875rem', fontWeight: 500, color: 'var(--sam-color-fg-primary)' }}>
{user.name || user.email}
</span>
<svg
style={{ height: 16, width: 16, transition: 'transform 0.15s', transform: isOpen ? 'rotate(180deg)' : 'none' }}
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
gap: '0.5rem',
color: 'var(--sam-color-fg-muted)',
background: 'none',
border: 'none',
cursor: 'pointer',
padding: '4px',
}}
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
</svg>
</button>
{user.image ? (
<img
src={user.image}
alt={user.name || user.email}
style={{ height: 32, width: 32, borderRadius: '50%' }}
/>
) : (
<div style={{
height: 32,
width: 32,
borderRadius: '50%',
backgroundColor: 'var(--sam-color-accent-primary)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: '#fff',
fontSize: '0.875rem',
fontWeight: 500,
}}>
{(user.name || user.email).charAt(0).toUpperCase()}
</div>
)}
<span className="sam-user-name" style={{ fontSize: '0.875rem', fontWeight: 500, color: 'var(--sam-color-fg-primary)' }}>
{user.name || user.email}
</span>
<svg
style={{ height: 16, width: 16, transition: 'transform 0.15s', transform: isOpen ? 'rotate(180deg)' : 'none' }}
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
</svg>
</button>

{isOpen && (
<div style={{
position: 'absolute',
right: 0,
marginTop: '0.5rem',
width: '12rem',
backgroundColor: 'var(--sam-color-bg-surface)',
borderRadius: 'var(--sam-radius-md)',
boxShadow: '0 8px 32px rgba(0, 0, 0, 0.4)',
border: '1px solid var(--sam-color-border-default)',
zIndex: 10,
overflow: 'hidden',
}}>
<div style={{ padding: '0.5rem 1rem', borderBottom: '1px solid var(--sam-color-border-default)' }}>
<p style={{ fontSize: '0.875rem', fontWeight: 500, color: 'var(--sam-color-fg-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
{user.name || 'User'}
</p>
<p style={{ fontSize: '0.75rem', color: 'var(--sam-color-fg-muted)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{user.email}</p>
</div>
{isOpen && (
<div style={{
position: 'absolute',
right: 0,
marginTop: '0.5rem',
width: '12rem',
backgroundColor: 'var(--sam-color-bg-surface)',
borderRadius: 'var(--sam-radius-md)',
boxShadow: '0 8px 32px rgba(0, 0, 0, 0.4)',
border: '1px solid var(--sam-color-border-default)',
zIndex: 10,
overflow: 'hidden',
}}>
<div style={{ padding: '0.5rem 1rem', borderBottom: '1px solid var(--sam-color-border-default)' }}>
<p style={{ fontSize: '0.875rem', fontWeight: 500, color: 'var(--sam-color-fg-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
{user.name || 'User'}
</p>
<p style={{ fontSize: '0.75rem', color: 'var(--sam-color-fg-muted)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{user.email}</p>
</div>

{PRIMARY_NAV_ITEMS.map((item) => (
<button
key={item.path}
onClick={() => { setIsOpen(false); navigate(item.path); }}
style={{
display: 'block',
width: '100%',
textAlign: 'left',
padding: '0.5rem 1rem',
fontSize: '0.875rem',
color: 'var(--sam-color-fg-primary)',
background: 'none',
border: 'none',
cursor: 'pointer',
}}
onMouseEnter={(e) => { e.currentTarget.style.backgroundColor = 'var(--sam-color-bg-surface-hover)'; }}
onMouseLeave={(e) => { e.currentTarget.style.backgroundColor = 'transparent'; }}
>
{item.label}
</button>
))}

<hr style={{ border: 'none', borderTop: '1px solid var(--sam-color-border-default)', margin: '0.25rem 0' }} />

{[
{ label: 'Dashboard', path: '/dashboard' },
{ label: 'Projects', path: '/projects' },
{ label: 'Nodes', path: '/nodes' },
{ label: 'Settings', path: '/settings' },
].map((item) => (
<button
key={item.path}
onClick={() => { setIsOpen(false); navigate(item.path); }}
onClick={handleSignOut}
style={{
display: 'block',
width: '100%',
textAlign: 'left',
padding: '0.5rem 1rem',
fontSize: '0.875rem',
color: 'var(--sam-color-fg-primary)',
color: 'var(--sam-color-danger)',
background: 'none',
border: 'none',
cursor: 'pointer',
}}
onMouseEnter={(e) => { e.currentTarget.style.backgroundColor = 'var(--sam-color-bg-surface-hover)'; }}
onMouseLeave={(e) => { e.currentTarget.style.backgroundColor = 'transparent'; }}
>
{item.label}
Sign out
</button>
))}

<hr style={{ border: 'none', borderTop: '1px solid var(--sam-color-border-default)', margin: '0.25rem 0' }} />

<button
onClick={handleSignOut}
style={{
display: 'block',
width: '100%',
textAlign: 'left',
padding: '0.5rem 1rem',
fontSize: '0.875rem',
color: 'var(--sam-color-danger)',
background: 'none',
border: 'none',
cursor: 'pointer',
}}
onMouseEnter={(e) => { e.currentTarget.style.backgroundColor = 'var(--sam-color-bg-surface-hover)'; }}
onMouseLeave={(e) => { e.currentTarget.style.backgroundColor = 'transparent'; }}
>
Sign out
</button>
</div>
)}
</div>
)}
</div>
</div>
);
}
Loading
Loading