feat: make app fully mobile-responsive
Update layout, headers, tables, kanban, comms, forms, and modals for mobile. Co-authored-by: Moheeb Zara <[email protected]>
This commit is contained in:
v0
Moheeb Zara
@@ -2,7 +2,7 @@
|
||||
|
||||
import { useState, useEffect, useRef } from 'react'
|
||||
import { createClient } from '@/lib/supabase/client'
|
||||
import { Hash, Users2, Send } from 'lucide-react'
|
||||
import { Hash, Users2, Send, ChevronLeft } from 'lucide-react'
|
||||
|
||||
interface Props {
|
||||
member: any
|
||||
@@ -15,6 +15,7 @@ export default function CommsClient({ member, space, channels }: Props) {
|
||||
const [messages, setMessages] = useState<any[]>([])
|
||||
const [newMessage, setNewMessage] = useState('')
|
||||
const [sending, setSending] = useState(false)
|
||||
const [showChannelList, setShowChannelList] = useState(true)
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
@@ -140,26 +141,32 @@ export default function CommsClient({ member, space, channels }: Props) {
|
||||
const projectChannels = channels.filter(c => c.channel_type === 'project')
|
||||
|
||||
return (
|
||||
<div className="h-screen bg-background flex flex-col">
|
||||
<div className="bg-sidebar px-6 py-3 flex items-center justify-between border-b border-sidebar-border">
|
||||
<div className="h-[calc(100vh-52px)] md:h-screen bg-background flex flex-col">
|
||||
<div className="bg-sidebar px-4 md:px-6 py-3 flex items-center justify-between border-b border-sidebar-border">
|
||||
<div className="flex items-center gap-3">
|
||||
<h1 className="text-white font-sans text-lg font-semibold">Comms</h1>
|
||||
{/* Mobile back to channels */}
|
||||
{!showChannelList && selectedChannel && (
|
||||
<button
|
||||
onClick={() => setShowChannelList(true)}
|
||||
className="md:hidden text-sidebar-foreground/70 hover:text-sidebar-foreground mr-1"
|
||||
>
|
||||
<ChevronLeft className="w-5 h-5" />
|
||||
</button>
|
||||
)}
|
||||
<h1 className="text-white font-sans text-lg font-semibold">
|
||||
{!showChannelList && selectedChannel ? `#${selectedChannel.name}` : 'Comms'}
|
||||
</h1>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button className="text-sidebar-foreground/70 hover:text-sidebar-foreground text-sm">
|
||||
<Users2 className="w-4 h-4" />
|
||||
</button>
|
||||
<button className="text-sidebar-foreground/70 hover:text-sidebar-foreground text-sm">
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 flex overflow-hidden">
|
||||
{/* Channels sidebar */}
|
||||
<aside className="w-[220px] bg-card border-r border-border overflow-y-auto">
|
||||
{/* Channels sidebar — hidden on mobile when a channel is selected */}
|
||||
<aside className={`${showChannelList ? 'flex' : 'hidden'} md:flex w-full md:w-[220px] flex-col bg-card border-r border-border overflow-y-auto`}>
|
||||
<div className="p-3">
|
||||
{generalChannels.length > 0 && (
|
||||
<div className="mb-4">
|
||||
@@ -167,7 +174,7 @@ export default function CommsClient({ member, space, channels }: Props) {
|
||||
{generalChannels.map(channel => (
|
||||
<button
|
||||
key={channel.id}
|
||||
onClick={() => setSelectedChannel(channel)}
|
||||
onClick={() => { setSelectedChannel(channel); setShowChannelList(false) }}
|
||||
className={`w-full flex items-center gap-2 px-2 py-1.5 rounded text-sm font-sans transition ${
|
||||
selectedChannel?.id === channel.id
|
||||
? 'bg-primary/10 text-primary'
|
||||
@@ -192,7 +199,7 @@ export default function CommsClient({ member, space, channels }: Props) {
|
||||
{areaChannels.map(channel => (
|
||||
<button
|
||||
key={channel.id}
|
||||
onClick={() => setSelectedChannel(channel)}
|
||||
onClick={() => { setSelectedChannel(channel); setShowChannelList(false) }}
|
||||
className={`w-full flex items-center gap-2 px-2 py-1.5 rounded text-sm font-sans transition ${
|
||||
selectedChannel?.id === channel.id
|
||||
? 'bg-primary/10 text-primary'
|
||||
@@ -212,7 +219,7 @@ export default function CommsClient({ member, space, channels }: Props) {
|
||||
{projectChannels.map(channel => (
|
||||
<button
|
||||
key={channel.id}
|
||||
onClick={() => setSelectedChannel(channel)}
|
||||
onClick={() => { setSelectedChannel(channel); setShowChannelList(false) }}
|
||||
className={`w-full flex items-center gap-2 px-2 py-1.5 rounded text-sm font-sans transition ${
|
||||
selectedChannel?.id === channel.id
|
||||
? 'bg-primary/10 text-primary'
|
||||
@@ -232,7 +239,7 @@ export default function CommsClient({ member, space, channels }: Props) {
|
||||
|
||||
{/* Main chat area */}
|
||||
{selectedChannel ? (
|
||||
<div className="flex-1 flex flex-col overflow-hidden">
|
||||
<div className={`${showChannelList ? 'hidden md:flex' : 'flex'} flex-1 flex-col overflow-hidden`}>
|
||||
{/* Channel header */}
|
||||
<div className="bg-card border-b border-border px-4 py-3 flex items-center gap-2">
|
||||
<Hash className="w-4 h-4 text-muted-foreground" />
|
||||
|
||||
@@ -114,7 +114,7 @@ export function ContactsClient({ contacts: initialContacts }: { contacts: Contac
|
||||
|
||||
const ContactForm = ({ onSubmit, submitLabel }: { onSubmit: (e: React.FormEvent) => void, submitLabel: string }) => (
|
||||
<form onSubmit={onSubmit} className="p-6 space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">Name *</label>
|
||||
<input type="text" required value={form.name} onChange={e => setForm(f => ({ ...f, name: e.target.value }))}
|
||||
@@ -128,7 +128,7 @@ export function ContactsClient({ contacts: initialContacts }: { contacts: Contac
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">Email</label>
|
||||
<input type="email" value={form.email} onChange={e => setForm(f => ({ ...f, email: e.target.value }))}
|
||||
@@ -145,7 +145,7 @@ export function ContactsClient({ contacts: initialContacts }: { contacts: Contac
|
||||
<textarea value={form.details} onChange={e => setForm(f => ({ ...f, details: e.target.value }))}
|
||||
rows={2} className="w-full bg-background border border-border rounded px-3 py-2 font-sans text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary transition resize-none" />
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">Group Label</label>
|
||||
<input type="text" value={form.group_label} onChange={e => setForm(f => ({ ...f, group_label: e.target.value }))}
|
||||
@@ -173,7 +173,7 @@ export function ContactsClient({ contacts: initialContacts }: { contacts: Contac
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<div className="bg-sidebar px-6 py-3 flex items-center justify-between">
|
||||
<div className="bg-sidebar px-4 md:px-6 py-3 flex items-center justify-between">
|
||||
<h1 className="text-white font-sans text-lg font-semibold">Contacts</h1>
|
||||
<button
|
||||
onClick={() => { resetForm(); setShowCreate(true) }}
|
||||
@@ -183,7 +183,7 @@ export function ContactsClient({ contacts: initialContacts }: { contacts: Contac
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="p-6 space-y-4">
|
||||
<div className="p-4 md:p-6 space-y-4">
|
||||
<div className="relative">
|
||||
<svg className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
|
||||
@@ -61,18 +61,19 @@ export default async function DashboardPage() {
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<div className="bg-sidebar px-6 py-3 flex items-center justify-between">
|
||||
<div className="bg-sidebar px-4 md:px-6 py-3 flex items-center justify-between">
|
||||
<h1 className="text-white font-sans text-lg font-semibold">Dashboard</h1>
|
||||
<Link href="/tasks" className="flex items-center gap-1.5 bg-primary text-white text-xs font-sans px-3 py-1.5 rounded hover:bg-primary/90 transition">
|
||||
<IcoPlus className="w-3.5 h-3.5" />
|
||||
Quick Task
|
||||
<span className="hidden sm:inline">Quick Task</span>
|
||||
<span className="sm:hidden">Task</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="p-6 space-y-6">
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div className="p-4 md:p-6 space-y-6">
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-3 md:gap-4">
|
||||
{stats.map(({ label, value, Ico, sub, warn }) => (
|
||||
<div key={label} className="bg-card rounded border border-border p-5">
|
||||
<div key={label} className="bg-card rounded border border-border p-4 md:p-5">
|
||||
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-2 flex items-center gap-1.5">
|
||||
<Ico className="w-3 h-3" /> {label}
|
||||
</p>
|
||||
@@ -82,7 +83,7 @@ export default async function DashboardPage() {
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="grid lg:grid-cols-[1fr_300px] gap-6">
|
||||
<div className="grid lg:grid-cols-[1fr_280px] gap-6">
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
|
||||
@@ -45,7 +45,7 @@ export default async function AppLayout({ children }: { children: React.ReactNod
|
||||
taskBadge={taskCount ?? 0}
|
||||
paymentBadge={paymentCount ?? 0}
|
||||
/>
|
||||
<main className="flex-1 overflow-y-auto">
|
||||
<main className="flex-1 overflow-y-auto pt-[52px] md:pt-0">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
|
||||
@@ -129,7 +129,7 @@ export function MembersClient({ members: initialMembers, currentRole }: Props) {
|
||||
|
||||
const MemberFormFields = () => (
|
||||
<>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">Full Name *</label>
|
||||
<input type="text" required value={form.display_name} onChange={e => setForm(f => ({ ...f, display_name: e.target.value }))}
|
||||
@@ -141,7 +141,7 @@ export function MembersClient({ members: initialMembers, currentRole }: Props) {
|
||||
className="w-full bg-background border border-border rounded px-3 py-2 font-sans text-sm text-foreground focus:outline-none focus:border-primary transition" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">Phone</label>
|
||||
<input type="tel" value={form.phone} onChange={e => setForm(f => ({ ...f, phone: e.target.value }))}
|
||||
@@ -153,7 +153,7 @@ export function MembersClient({ members: initialMembers, currentRole }: Props) {
|
||||
className="w-full bg-background border border-border rounded px-3 py-2 font-mono text-sm text-foreground focus:outline-none focus:border-primary transition" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">Tier</label>
|
||||
<select value={form.tier} onChange={e => setForm(f => ({ ...f, tier: e.target.value }))}
|
||||
@@ -175,7 +175,7 @@ export function MembersClient({ members: initialMembers, currentRole }: Props) {
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">Joined At</label>
|
||||
<input type="date" value={form.joined_at?.slice(0, 10)} onChange={e => setForm(f => ({ ...f, joined_at: e.target.value }))}
|
||||
@@ -194,7 +194,7 @@ export function MembersClient({ members: initialMembers, currentRole }: Props) {
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<div className="bg-sidebar px-6 py-3 flex items-center justify-between">
|
||||
<div className="bg-sidebar px-4 md:px-6 py-3 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<h1 className="text-white font-sans text-lg font-semibold">Members</h1>
|
||||
<span className="font-mono text-xs text-white/50">{total} total</span>
|
||||
@@ -209,7 +209,7 @@ export function MembersClient({ members: initialMembers, currentRole }: Props) {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="bg-card border-b border-border px-6 flex gap-6">
|
||||
<div className="bg-card border-b border-border px-4 md:px-6 flex gap-4 md:gap-6 overflow-x-auto">
|
||||
{[
|
||||
{ key: 'all', label: `All ${total}` },
|
||||
{ key: 'payment_issues', label: `Payment Issues ${paymentIssues}` },
|
||||
@@ -228,7 +228,7 @@ export function MembersClient({ members: initialMembers, currentRole }: Props) {
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="p-6">
|
||||
<div className="p-4 md:p-6">
|
||||
<div className="flex gap-3 mb-4">
|
||||
<div className="flex-1 relative">
|
||||
<svg className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
@@ -236,7 +236,7 @@ export function MembersClient({ members: initialMembers, currentRole }: Props) {
|
||||
</svg>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search by name, email, handle..."
|
||||
placeholder="Search..."
|
||||
value={search}
|
||||
onChange={e => setSearch(e.target.value)}
|
||||
className="w-full bg-card border border-border rounded pl-9 pr-4 py-2 font-sans text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary transition"
|
||||
@@ -245,7 +245,7 @@ export function MembersClient({ members: initialMembers, currentRole }: Props) {
|
||||
<select
|
||||
value={tierFilter}
|
||||
onChange={e => setTierFilter(e.target.value)}
|
||||
className="bg-card border border-border text-foreground text-sm font-sans rounded px-3 py-2 focus:outline-none focus:border-primary"
|
||||
className="bg-card border border-border text-foreground text-sm font-sans rounded px-2 md:px-3 py-2 focus:outline-none focus:border-primary"
|
||||
>
|
||||
<option value="">All Tiers</option>
|
||||
<option value="plus">Plus</option>
|
||||
@@ -255,7 +255,8 @@ export function MembersClient({ members: initialMembers, currentRole }: Props) {
|
||||
</div>
|
||||
|
||||
<div className="bg-card rounded border border-border overflow-hidden">
|
||||
<table className="w-full">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full min-w-[600px]">
|
||||
<thead>
|
||||
<tr className="border-b border-border">
|
||||
<th className="px-4 py-3 text-left font-mono text-[10px] tracking-widest text-muted-foreground">MEMBER</th>
|
||||
@@ -354,6 +355,7 @@ export function MembersClient({ members: initialMembers, currentRole }: Props) {
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -137,7 +137,7 @@ function KbModal({
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="font-sans text-xs font-medium text-muted-foreground block mb-1.5">Area</label>
|
||||
<input
|
||||
@@ -531,7 +531,7 @@ export function OpsClient({ member, spaceId, kbEntries: initial, areaLeads: init
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
{/* Header */}
|
||||
<div className="bg-sidebar px-6 py-3 flex items-center justify-between">
|
||||
<div className="bg-sidebar px-4 md:px-6 py-3 flex items-center justify-between">
|
||||
<h1 className="text-white font-sans text-lg font-semibold">Ops & Facilities</h1>
|
||||
<div className="flex items-center gap-2">
|
||||
{(activeTab === 'kb' || activeTab === 'processes') && (
|
||||
@@ -562,7 +562,7 @@ export function OpsClient({ member, spaceId, kbEntries: initial, areaLeads: init
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="bg-card border-b border-border px-6 flex gap-6">
|
||||
<div className="bg-card border-b border-border px-4 md:px-6 flex gap-4 md:gap-6 overflow-x-auto">
|
||||
{TABS.map(tab => (
|
||||
<button
|
||||
key={tab.id}
|
||||
@@ -577,7 +577,7 @@ export function OpsClient({ member, spaceId, kbEntries: initial, areaLeads: init
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="p-6 max-w-5xl">
|
||||
<div className="p-4 md:p-6 max-w-5xl">
|
||||
{/* Search */}
|
||||
{(activeTab === 'kb' || activeTab === 'processes' || activeTab === 'secrets') && (
|
||||
<div className="relative mb-6">
|
||||
|
||||
@@ -121,9 +121,9 @@ export function PaymentsClient({ payments: initialPayments, members, integration
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<div className="bg-sidebar px-6 py-3 flex items-center justify-between">
|
||||
<div className="bg-sidebar px-4 md:px-6 py-3 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<h1 className="text-white font-sans text-lg font-semibold">Payment Reconciliation</h1>
|
||||
<h1 className="text-white font-sans text-lg font-semibold">Payments</h1>
|
||||
{unlinkedCount > 0 && (
|
||||
<span className="font-mono text-xs text-orange-400">{unlinkedCount} unlinked</span>
|
||||
)}
|
||||
@@ -140,9 +140,9 @@ export function PaymentsClient({ payments: initialPayments, members, integration
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="p-6 space-y-6">
|
||||
<div className="p-4 md:p-6 space-y-6">
|
||||
{/* Platform summary cards */}
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-3 md:gap-4">
|
||||
{platforms.map(platform => {
|
||||
const txs = byPlatform[platform] ?? []
|
||||
const total = txs.reduce((sum, t) => sum + (t.amount ?? 0), 0)
|
||||
@@ -203,7 +203,8 @@ export function PaymentsClient({ payments: initialPayments, members, integration
|
||||
</div>
|
||||
|
||||
<div className="bg-card rounded border border-border overflow-hidden">
|
||||
<table className="w-full">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full min-w-[600px]">
|
||||
<thead>
|
||||
<tr className="border-b border-border">
|
||||
{['PLATFORM', 'AMOUNT', 'FROM / NOTE', 'DATE', 'MEMBER'].map(h => (
|
||||
@@ -253,6 +254,7 @@ export function PaymentsClient({ payments: initialPayments, members, integration
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -266,7 +268,7 @@ export function PaymentsClient({ payments: initialPayments, members, integration
|
||||
<button onClick={() => setShowLogCash(false)} className="text-muted-foreground hover:text-foreground"><X className="w-4 h-4" /></button>
|
||||
</div>
|
||||
<form onSubmit={handleLogCash} className="p-6 space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">Amount *</label>
|
||||
<input type="number" step="0.01" min="0" required value={cashForm.amount}
|
||||
|
||||
@@ -68,7 +68,7 @@ export function ProjectsClient({ projects: initialProjects, spaceId }: { project
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<div className="bg-sidebar px-6 py-3 flex items-center justify-between">
|
||||
<div className="bg-sidebar px-4 md:px-6 py-3 flex items-center justify-between">
|
||||
<h1 className="text-white font-sans text-lg font-semibold">Projects</h1>
|
||||
<button
|
||||
onClick={() => setShowCreate(true)}
|
||||
@@ -78,8 +78,9 @@ export function ProjectsClient({ projects: initialProjects, spaceId }: { project
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="p-6">
|
||||
<div className="grid grid-cols-4 gap-4">
|
||||
<div className="p-4 md:p-6">
|
||||
<div className="overflow-x-auto -mx-4 md:mx-0 px-4 md:px-0">
|
||||
<div className="grid grid-cols-4 gap-4 min-w-[640px]">
|
||||
{STATUS_COLS.map(col => {
|
||||
const items = columns[col.key] ?? []
|
||||
return (
|
||||
@@ -141,6 +142,7 @@ export function ProjectsClient({ projects: initialProjects, spaceId }: { project
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showCreate && (
|
||||
@@ -162,7 +164,7 @@ export function ProjectsClient({ projects: initialProjects, spaceId }: { project
|
||||
<textarea value={form.description} onChange={e => setForm(f => ({ ...f, description: e.target.value }))}
|
||||
rows={2} className="w-full bg-background border border-border rounded px-3 py-2 font-sans text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary transition resize-none" />
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">Area</label>
|
||||
<select value={form.area} onChange={e => setForm(f => ({ ...f, area: e.target.value }))}
|
||||
|
||||
@@ -193,15 +193,15 @@ export default function SettingsClient({ space, isAdmin, integrations, currentRo
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
{/* Header */}
|
||||
<div className="bg-sidebar px-6 py-3 flex items-center">
|
||||
<div className="bg-sidebar px-4 md:px-6 py-3 flex items-center">
|
||||
<h1 className="text-white font-sans text-lg font-semibold">Settings & Admin</h1>
|
||||
</div>
|
||||
|
||||
<div className="flex">
|
||||
{/* Main content */}
|
||||
<div className="flex-1 p-6">
|
||||
<div className="flex-1 p-4 md:p-6">
|
||||
{/* Tabs */}
|
||||
<div className="bg-card border-b border-border flex gap-6 px-2 mb-6 rounded-t">
|
||||
<div className="bg-card border-b border-border flex gap-4 md:gap-6 px-2 mb-6 rounded-t overflow-x-auto">
|
||||
{(['space', 'roles', 'integrations', 'webhooks'] as const).map(tab => (
|
||||
<button
|
||||
key={tab}
|
||||
@@ -229,7 +229,7 @@ export default function SettingsClient({ space, isAdmin, integrations, currentRo
|
||||
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-6">Space Settings</p>
|
||||
|
||||
<form onSubmit={handleSaveSpace} className="space-y-6">
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label className="font-sans text-sm text-foreground block mb-1.5">Space Name</label>
|
||||
<input
|
||||
|
||||
@@ -122,7 +122,7 @@ export function TasksClient({ tasks: initialTasks, members, currentUserId, space
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<div className="bg-sidebar px-6 py-3 flex items-center justify-between">
|
||||
<div className="bg-sidebar px-4 md:px-6 py-3 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<h1 className="text-white font-sans text-lg font-semibold">Tasks & Chores</h1>
|
||||
<span className="font-mono text-xs text-white/50">{tasks.filter(t => !isDone(t)).length} open</span>
|
||||
@@ -131,7 +131,7 @@ export function TasksClient({ tasks: initialTasks, members, currentUserId, space
|
||||
<select
|
||||
value={filterArea}
|
||||
onChange={e => setFilterArea(e.target.value)}
|
||||
className="bg-sidebar-accent border border-sidebar-border text-sidebar-foreground text-xs font-sans rounded px-2 py-1.5"
|
||||
className="hidden sm:block bg-sidebar-accent border border-sidebar-border text-sidebar-foreground text-xs font-sans rounded px-2 py-1.5"
|
||||
>
|
||||
<option value="">All Areas</option>
|
||||
{AREAS.map(a => <option key={a}>{a}</option>)}
|
||||
@@ -140,12 +140,12 @@ export function TasksClient({ tasks: initialTasks, members, currentUserId, space
|
||||
onClick={() => setShowCreate(true)}
|
||||
className="flex items-center gap-1.5 bg-primary text-white text-xs font-sans px-3 py-1.5 rounded hover:bg-primary/90 transition"
|
||||
>
|
||||
<Plus className="w-3.5 h-3.5" /> New Task
|
||||
<Plus className="w-3.5 h-3.5" /> <span className="hidden sm:inline">New Task</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-card border-b border-border px-6 flex gap-6">
|
||||
<div className="bg-card border-b border-border px-4 md:px-6 flex gap-4 md:gap-6 overflow-x-auto">
|
||||
{(['chores', 'ongoing', 'mine', 'done'] as const).map((tab) => (
|
||||
<button
|
||||
key={tab}
|
||||
@@ -166,7 +166,7 @@ export function TasksClient({ tasks: initialTasks, members, currentUserId, space
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="p-6">
|
||||
<div className="p-4 md:p-6">
|
||||
<div className="bg-card rounded border border-border divide-y divide-border">
|
||||
{currentList.length > 0 ? currentList.map(task => (
|
||||
<div key={task.id} className={`flex items-center gap-3 px-4 py-3 ${
|
||||
@@ -283,7 +283,7 @@ export function TasksClient({ tasks: initialTasks, members, currentUserId, space
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">Type</label>
|
||||
<select
|
||||
@@ -308,7 +308,7 @@ export function TasksClient({ tasks: initialTasks, members, currentUserId, space
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">Recurrence</label>
|
||||
<select
|
||||
|
||||
+105
-148
@@ -6,72 +6,53 @@ import { useState } from 'react'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { signOut } from '@/lib/auth-actions'
|
||||
import type { SpaceMember, Space } from '@/lib/types'
|
||||
import {
|
||||
Menu, X, LayoutDashboard, ListChecks, FolderKanban, Settings2,
|
||||
MessageSquare, Users, CreditCard, BookUser, Download, LogOut,
|
||||
} from 'lucide-react'
|
||||
|
||||
interface NavItem {
|
||||
label: string
|
||||
function NavLink({
|
||||
href, label, icon: Icon, badge, active, onClick,
|
||||
}: {
|
||||
href: string
|
||||
icon: React.ReactNode
|
||||
label: string
|
||||
icon: React.ElementType
|
||||
badge?: number
|
||||
section: 'workspace' | 'people' | 'admin'
|
||||
active: boolean
|
||||
onClick?: () => void
|
||||
}) {
|
||||
return (
|
||||
<Link
|
||||
href={href}
|
||||
onClick={onClick}
|
||||
className={cn(
|
||||
'flex items-center justify-between mx-2 px-3 py-2 rounded-md text-sm transition-colors',
|
||||
active
|
||||
? 'bg-[var(--sidebar-primary)]/15 text-[var(--sidebar-primary)]'
|
||||
: 'text-[var(--sidebar-foreground)]/70 hover:bg-[var(--sidebar-accent)] hover:text-[var(--sidebar-foreground)]',
|
||||
)}
|
||||
>
|
||||
<span className="flex items-center gap-2.5">
|
||||
<Icon className={cn('w-4 h-4', active ? 'text-[var(--sidebar-primary)]' : 'text-[var(--sidebar-foreground)]/50')} />
|
||||
{label}
|
||||
</span>
|
||||
{badge && badge > 0 ? (
|
||||
<span className="text-[10px] bg-red-500 text-white rounded-full w-4 h-4 flex items-center justify-center font-medium">
|
||||
{badge}
|
||||
</span>
|
||||
) : null}
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
function navIcon(path: string) {
|
||||
const icons: Record<string, React.ReactNode> = {
|
||||
dashboard: (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
|
||||
</svg>
|
||||
),
|
||||
tasks: (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
||||
</svg>
|
||||
),
|
||||
projects: (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM14 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1V5zM4 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1v-4zM14 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z" />
|
||||
</svg>
|
||||
),
|
||||
ops: (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
),
|
||||
comms: (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
|
||||
</svg>
|
||||
),
|
||||
members: (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
),
|
||||
payments: (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
|
||||
</svg>
|
||||
),
|
||||
contacts: (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
||||
</svg>
|
||||
),
|
||||
import: (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
||||
</svg>
|
||||
),
|
||||
settings: (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
),
|
||||
}
|
||||
return icons[path] ?? null
|
||||
}
|
||||
// Bottom nav items for mobile
|
||||
const MOBILE_NAV = [
|
||||
{ label: 'Home', href: '/dashboard', icon: LayoutDashboard },
|
||||
{ label: 'Tasks', href: '/tasks', icon: ListChecks },
|
||||
{ label: 'Comms', href: '/comms', icon: MessageSquare },
|
||||
{ label: 'Members', href: '/members', icon: Users },
|
||||
{ label: 'More', href: null, icon: Menu },
|
||||
]
|
||||
|
||||
interface AppSidebarProps {
|
||||
member: SpaceMember & { spaces: Space }
|
||||
@@ -85,8 +66,8 @@ export function AppSidebar({ member, taskBadge = 0, commsBadge = 0, paymentBadge
|
||||
const router = useRouter()
|
||||
const space = member.spaces
|
||||
const initials = member.display_name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)
|
||||
|
||||
const isAdmin = member.role === 'admin' || member.role === 'board'
|
||||
const [drawerOpen, setDrawerOpen] = useState(false)
|
||||
|
||||
function isActive(href: string) {
|
||||
return pathname === href || pathname.startsWith(href + '/')
|
||||
@@ -96,13 +77,13 @@ export function AppSidebar({ member, taskBadge = 0, commsBadge = 0, paymentBadge
|
||||
await signOut()
|
||||
}
|
||||
|
||||
return (
|
||||
<aside className="w-[230px] shrink-0 bg-[var(--sidebar)] flex flex-col h-screen sticky top-0 border-r border-[var(--sidebar-border)]">
|
||||
const SidebarContent = ({ onNav }: { onNav?: () => void }) => (
|
||||
<>
|
||||
{/* Logo */}
|
||||
<div className="px-5 py-5 border-b border-[var(--sidebar-border)]">
|
||||
<Link href="/dashboard" className="flex items-center gap-2.5">
|
||||
<Link href="/dashboard" onClick={onNav} className="flex items-center gap-2.5">
|
||||
<div className="w-8 h-8 rounded bg-[var(--sidebar-primary)] flex items-center justify-center">
|
||||
<span className="text-white font-mono text-xs font-bold">{'{'}<span className="text-white">hs</span>{'}'}</span>
|
||||
<span className="text-white font-mono text-xs font-bold">{'{'}<span>hs</span>{'}'}</span>
|
||||
</div>
|
||||
</Link>
|
||||
<p className="text-[var(--sidebar-foreground)]/60 text-xs mt-1.5 font-mono truncate">{space?.name || 'My Space'}</p>
|
||||
@@ -110,100 +91,29 @@ export function AppSidebar({ member, taskBadge = 0, commsBadge = 0, paymentBadge
|
||||
|
||||
{/* Nav */}
|
||||
<nav className="flex-1 py-4 overflow-y-auto">
|
||||
{/* WORKSPACE */}
|
||||
<div className="px-3 mb-1">
|
||||
<p className="text-[10px] uppercase tracking-widest text-[var(--sidebar-foreground)]/30 px-2 py-1 font-mono">Workspace</p>
|
||||
</div>
|
||||
{[
|
||||
{ label: 'Dashboard', href: '/dashboard', key: 'dashboard', badge: 0 },
|
||||
{ label: 'Tasks & Chores', href: '/tasks', key: 'tasks', badge: taskBadge },
|
||||
{ label: 'Projects', href: '/projects', key: 'projects', badge: 0 },
|
||||
{ label: 'Ops & Facilities', href: '/ops', key: 'ops', badge: 0 },
|
||||
{ label: 'Comms', href: '/comms', key: 'comms', badge: commsBadge },
|
||||
].map(item => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={cn(
|
||||
'flex items-center justify-between mx-2 px-3 py-2 rounded-md text-sm transition-colors group',
|
||||
isActive(item.href)
|
||||
? 'bg-[var(--sidebar-primary)]/15 text-[var(--sidebar-primary)]'
|
||||
: 'text-[var(--sidebar-foreground)]/70 hover:bg-[var(--sidebar-accent)] hover:text-[var(--sidebar-foreground)]'
|
||||
)}
|
||||
>
|
||||
<span className="flex items-center gap-2.5">
|
||||
<span className={cn(isActive(item.href) ? 'text-[var(--sidebar-primary)]' : 'text-[var(--sidebar-foreground)]/50')}>
|
||||
{navIcon(item.key)}
|
||||
</span>
|
||||
{item.label}
|
||||
</span>
|
||||
{item.badge > 0 && (
|
||||
<span className="text-[10px] bg-red-500 text-white rounded-full w-4 h-4 flex items-center justify-center font-medium">
|
||||
{item.badge}
|
||||
</span>
|
||||
)}
|
||||
</Link>
|
||||
))}
|
||||
<NavLink href="/dashboard" label="Dashboard" icon={LayoutDashboard} active={isActive('/dashboard')} onClick={onNav} />
|
||||
<NavLink href="/tasks" label="Tasks & Chores" icon={ListChecks} active={isActive('/tasks')} badge={taskBadge} onClick={onNav} />
|
||||
<NavLink href="/projects" label="Projects" icon={FolderKanban} active={isActive('/projects')} onClick={onNav} />
|
||||
<NavLink href="/ops" label="Ops & Facilities" icon={Settings2} active={isActive('/ops')} onClick={onNav} />
|
||||
<NavLink href="/comms" label="Comms" icon={MessageSquare} active={isActive('/comms')} badge={commsBadge} onClick={onNav} />
|
||||
|
||||
{/* PEOPLE */}
|
||||
<div className="px-3 mt-4 mb-1">
|
||||
<p className="text-[10px] uppercase tracking-widest text-[var(--sidebar-foreground)]/30 px-2 py-1 font-mono">People</p>
|
||||
</div>
|
||||
{[
|
||||
{ label: 'Members', href: '/members', key: 'members', badge: 0 },
|
||||
{ label: 'Payments', href: '/payments', key: 'payments', badge: paymentBadge },
|
||||
{ label: 'Contacts', href: '/contacts', key: 'contacts', badge: 0 },
|
||||
].map(item => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={cn(
|
||||
'flex items-center justify-between mx-2 px-3 py-2 rounded-md text-sm transition-colors',
|
||||
isActive(item.href)
|
||||
? 'bg-[var(--sidebar-primary)]/15 text-[var(--sidebar-primary)]'
|
||||
: 'text-[var(--sidebar-foreground)]/70 hover:bg-[var(--sidebar-accent)] hover:text-[var(--sidebar-foreground)]'
|
||||
)}
|
||||
>
|
||||
<span className="flex items-center gap-2.5">
|
||||
<span className={cn(isActive(item.href) ? 'text-[var(--sidebar-primary)]' : 'text-[var(--sidebar-foreground)]/50')}>
|
||||
{navIcon(item.key)}
|
||||
</span>
|
||||
{item.label}
|
||||
</span>
|
||||
{item.badge > 0 && (
|
||||
<span className="text-[10px] bg-red-500 text-white rounded-full w-4 h-4 flex items-center justify-center font-medium">
|
||||
{item.badge}
|
||||
</span>
|
||||
)}
|
||||
</Link>
|
||||
))}
|
||||
<NavLink href="/members" label="Members" icon={Users} active={isActive('/members')} onClick={onNav} />
|
||||
<NavLink href="/payments" label="Payments" icon={CreditCard} active={isActive('/payments')} badge={paymentBadge} onClick={onNav} />
|
||||
<NavLink href="/contacts" label="Contacts" icon={BookUser} active={isActive('/contacts')} onClick={onNav} />
|
||||
|
||||
{/* ADMIN */}
|
||||
{isAdmin && (
|
||||
<>
|
||||
<div className="px-3 mt-4 mb-1">
|
||||
<p className="text-[10px] uppercase tracking-widest text-[var(--sidebar-foreground)]/30 px-2 py-1 font-mono">Admin</p>
|
||||
</div>
|
||||
{[
|
||||
{ label: 'Import / Sync', href: '/import', key: 'import' },
|
||||
{ label: 'Settings', href: '/settings', key: 'settings' },
|
||||
].map(item => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={cn(
|
||||
'flex items-center gap-2.5 mx-2 px-3 py-2 rounded-md text-sm transition-colors',
|
||||
isActive(item.href)
|
||||
? 'bg-[var(--sidebar-primary)]/15 text-[var(--sidebar-primary)]'
|
||||
: 'text-[var(--sidebar-foreground)]/70 hover:bg-[var(--sidebar-accent)] hover:text-[var(--sidebar-foreground)]'
|
||||
)}
|
||||
>
|
||||
<span className={cn(isActive(item.href) ? 'text-[var(--sidebar-primary)]' : 'text-[var(--sidebar-foreground)]/50')}>
|
||||
{navIcon(item.key)}
|
||||
</span>
|
||||
{item.label}
|
||||
</Link>
|
||||
))}
|
||||
<NavLink href="/import" label="Import / Sync" icon={Download} active={isActive('/import')} onClick={onNav} />
|
||||
<NavLink href="/settings" label="Settings" icon={Settings2} active={isActive('/settings')} onClick={onNav} />
|
||||
</>
|
||||
)}
|
||||
</nav>
|
||||
@@ -221,8 +131,55 @@ export function AppSidebar({ member, taskBadge = 0, commsBadge = 0, paymentBadge
|
||||
<p className="text-[var(--sidebar-foreground)] text-xs font-medium truncate">{member.display_name}</p>
|
||||
<p className="text-[var(--sidebar-foreground)]/40 text-[10px] font-mono">{member.role} · {member.tier}</p>
|
||||
</div>
|
||||
<LogOut className="w-3.5 h-3.5 text-[var(--sidebar-foreground)]/30" />
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
</>
|
||||
)
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* ── Desktop sidebar ─────────────────────────────────── */}
|
||||
<aside className="hidden md:flex w-[230px] shrink-0 bg-[var(--sidebar)] flex-col h-screen sticky top-0 border-r border-[var(--sidebar-border)]">
|
||||
<SidebarContent />
|
||||
</aside>
|
||||
|
||||
{/* ── Mobile: top bar ──────────────────────────────────── */}
|
||||
<div className="md:hidden fixed top-0 left-0 right-0 z-40 bg-[var(--sidebar)] border-b border-[var(--sidebar-border)] flex items-center justify-between px-4 py-3">
|
||||
<Link href="/dashboard" className="flex items-center gap-2">
|
||||
<div className="w-7 h-7 rounded bg-[var(--sidebar-primary)] flex items-center justify-center">
|
||||
<span className="text-white font-mono text-[10px] font-bold">hs</span>
|
||||
</div>
|
||||
<span className="text-[var(--sidebar-foreground)]/60 text-xs font-mono truncate max-w-[150px]">{space?.name}</span>
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => setDrawerOpen(true)}
|
||||
className="text-[var(--sidebar-foreground)]/70 hover:text-[var(--sidebar-foreground)] p-1"
|
||||
aria-label="Open menu"
|
||||
>
|
||||
<Menu className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* ── Mobile: full drawer ──────────────────────────────── */}
|
||||
{drawerOpen && (
|
||||
<div className="md:hidden fixed inset-0 z-50 flex">
|
||||
{/* Backdrop */}
|
||||
<div className="absolute inset-0 bg-black/50" onClick={() => setDrawerOpen(false)} />
|
||||
{/* Drawer */}
|
||||
<div className="relative w-[280px] bg-[var(--sidebar)] flex flex-col h-full shadow-xl">
|
||||
<div className="flex items-center justify-between px-4 py-3 border-b border-[var(--sidebar-border)]">
|
||||
<span className="text-[var(--sidebar-foreground)] text-sm font-mono font-bold">Menu</span>
|
||||
<button onClick={() => setDrawerOpen(false)} className="text-[var(--sidebar-foreground)]/50 hover:text-[var(--sidebar-foreground)]">
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<SidebarContent onNav={() => setDrawerOpen(false)} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user