clawport-ui 0.1.0

package/components/Sidebar.tsx

@@ -0,0 +1,115 @@
+'use client';
+
+import { useCallback } from 'react';
+import { NavLinks } from '@/components/NavLinks';
+import { ThemeToggle } from '@/components/ThemeToggle';
+import { MobileSidebar } from '@/components/MobileSidebar';
+import { GlobalSearch, SearchTrigger } from '@/components/GlobalSearch';
+import { useSettings } from '@/app/settings-provider';
+
+/**
+ * Sidebar -- client wrapper that coordinates desktop sidebar, mobile sidebar,
+ * and the Cmd+K search palette. Rendered inside layout.tsx.
+ */
+export function Sidebar() {
+  const { settings } = useSettings();
+  const openSearch = useCallback(() => {
+    // We trigger the search modal by simulating Cmd+K.
+    // Instead, we expose a controlled open state via a custom event.
+    // The GlobalSearch component listens for this.
+    window.dispatchEvent(new CustomEvent('clawport:open-search'));
+  }, []);
+
+  return (
+    <>
+      {/* Desktop sidebar — hidden on mobile */}
+      <aside
+        className="hidden md:flex md:flex-col"
+        style={{
+          width: '220px',
+          flexShrink: 0,
+          background: 'var(--sidebar-bg)',
+          backdropFilter: 'blur(40px) saturate(180%)',
+          WebkitBackdropFilter: 'blur(40px) saturate(180%)',
+          borderRight: '1px solid var(--separator)',
+        }}
+      >
+        {/* App icon + title */}
+        <div className="px-4 pt-5 pb-3">
+          <div className="flex items-center gap-3">
+            {settings.portalIcon ? (
+              <img
+                src={settings.portalIcon}
+                alt=""
+                style={{
+                  width: '36px',
+                  height: '36px',
+                  borderRadius: '10px',
+                  objectFit: 'cover',
+                  boxShadow: 'var(--shadow-card)',
+                  flexShrink: 0,
+                }}
+              />
+            ) : (
+              <div
+                style={{
+                  width: '36px',
+                  height: '36px',
+                  borderRadius: '10px',
+                  background: settings.iconBgHidden
+                    ? 'transparent'
+                    : settings.accentColor
+                      ? `linear-gradient(135deg, ${settings.accentColor}, ${settings.accentColor}dd)`
+                      : 'linear-gradient(135deg, #f5c518, #e8b800)',
+                  boxShadow: settings.iconBgHidden ? 'none' : 'var(--shadow-card)',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  fontSize: settings.iconBgHidden ? '28px' : '18px',
+                  flexShrink: 0,
+                }}
+              >
+                {settings.portalEmoji ?? '\ud83e\udd9e'}
+              </div>
+            )}
+            <div>
+              <div
+                style={{
+                  fontSize: '17px',
+                  fontWeight: 600,
+                  letterSpacing: '-0.3px',
+                  color: 'var(--text-primary)',
+                }}
+              >
+                {settings.portalName ?? 'ClawPort'}
+              </div>
+              <div
+                style={{
+                  fontSize: '12px',
+                  color: 'var(--text-secondary)',
+                  letterSpacing: '0.01em',
+                }}
+              >
+                {settings.portalSubtitle ?? 'Command Centre'}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Search trigger */}
+        <div className="px-3 pb-2">
+          <SearchTrigger onClick={openSearch} />
+        </div>
+
+        <NavLinks />
+        <ThemeToggle />
+      </aside>
+
+      {/* Mobile sidebar */}
+      <MobileSidebar onOpenSearch={openSearch} />
+
+      {/* Global search modal (Cmd+K) */}
+      <GlobalSearch />
+    </>
+  );
+}

package/components/ThemeToggle.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+import { useRef, useCallback } from 'react';
+import { THEMES } from '@/lib/themes';
+import { useTheme } from '@/app/providers';
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      const buttons =
+        containerRef.current?.querySelectorAll<HTMLButtonElement>('button');
+      if (!buttons || buttons.length === 0) return;
+
+      const currentIndex = THEMES.findIndex((t) => t.id === theme);
+
+      if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+        e.preventDefault();
+        const nextIndex = (currentIndex + 1) % THEMES.length;
+        setTheme(THEMES[nextIndex].id);
+        buttons[nextIndex].focus();
+      } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+        e.preventDefault();
+        const prevIndex =
+          (currentIndex - 1 + THEMES.length) % THEMES.length;
+        setTheme(THEMES[prevIndex].id);
+        buttons[prevIndex].focus();
+      }
+    },
+    [theme, setTheme]
+  );
+
+  return (
+    <div style={{ padding: '8px 16px 12px' }}>
+      <div
+        style={{
+          fontSize: '11px',
+          fontWeight: 600,
+          letterSpacing: '0.06em',
+          color: 'var(--text-tertiary)',
+          textTransform: 'uppercase',
+          marginBottom: '6px',
+          paddingLeft: '4px',
+        }}
+      >
+        Theme
+      </div>
+      <div
+        ref={containerRef}
+        className="flex flex-wrap gap-1.5"
+        role="radiogroup"
+        aria-label="Theme selection"
+        onKeyDown={handleKeyDown}
+      >
+        {THEMES.map((t) => {
+          const isActive = theme === t.id;
+          return (
+            <button
+              key={t.id}
+              onClick={() => setTheme(t.id)}
+              title={t.label}
+              role="radio"
+              aria-checked={isActive}
+              aria-label={`${t.label} theme`}
+              tabIndex={isActive ? 0 : -1}
+              className="focus-ring"
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: '4px',
+                height: '28px',
+                padding: isActive ? '0 10px' : '0 6px',
+                borderRadius: '14px',
+                fontSize: '12px',
+                fontWeight: isActive ? 600 : 500,
+                border: 'none',
+                cursor: 'pointer',
+                transition: 'all 150ms var(--ease-spring)',
+                background: isActive
+                  ? 'var(--accent-fill)'
+                  : 'var(--fill-quaternary)',
+                color: isActive ? 'var(--accent)' : 'var(--text-tertiary)',
+                outline: 'none',
+              }}
+            >
+              <span style={{ fontSize: '13px', lineHeight: 1 }}>
+                {t.emoji}
+              </span>
+              {isActive && (
+                <span
+                  style={{
+                    fontSize: '11px',
+                    fontWeight: 600,
+                    letterSpacing: '-0.01em',
+                  }}
+                >
+                  {t.label}
+                </span>
+              )}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}