ui-syncup 0.3.13 → 0.4.0-beta.2

package/src/features/user-settings/components/user-preferences.tsx

@@ -0,0 +1,146 @@
+'use client'
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import { Switch } from '@/components/ui/switch'
+import { Label } from '@/components/ui/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { useUserPreferences } from '../hooks/use-user-preferences'
+import type { UserPreferences } from '../types'
+
+interface UserPreferencesComponentProps {
+  initialPreferences: UserPreferences
+}
+
+export function UserPreferencesComponent({
+  initialPreferences,
+}: UserPreferencesComponentProps) {
+  const { preferences, isPending, updatePreference } = useUserPreferences({
+    initialPreferences,
+  })
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>Appearance</CardTitle>
+          <CardDescription>
+            Customize how the application looks and feels
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div className="space-y-2">
+            <Label htmlFor="theme">Theme</Label>
+            <Select
+              value={preferences.theme}
+              onValueChange={(value: UserPreferences['theme']) =>
+                updatePreference('theme', value)
+              }
+              disabled={isPending}
+            >
+              <SelectTrigger id="theme" className="w-full sm:w-64">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="light">Light</SelectItem>
+                <SelectItem value="dark">Dark</SelectItem>
+                <SelectItem value="system">System</SelectItem>
+              </SelectContent>
+            </Select>
+            <p className="text-sm text-muted-foreground">
+              Choose your preferred color scheme
+            </p>
+          </div>
+
+          <div className="flex items-center justify-between">
+            <div className="space-y-0.5">
+              <Label htmlFor="compact-mode">Compact mode</Label>
+              <p className="text-sm text-muted-foreground">
+                Reduce spacing and size of UI elements
+              </p>
+            </div>
+            <Switch
+              id="compact-mode"
+              checked={preferences.compactMode}
+              onCheckedChange={(checked) =>
+                updatePreference('compactMode', checked)
+              }
+              disabled={isPending}
+            />
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Email digest</CardTitle>
+          <CardDescription>
+            Control how often you receive email summaries
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="email-digest">Frequency</Label>
+            <Select
+              value={preferences.emailDigest}
+              onValueChange={(value: UserPreferences['emailDigest']) =>
+                updatePreference('emailDigest', value)
+              }
+              disabled={isPending}
+            >
+              <SelectTrigger id="email-digest" className="w-full sm:w-64">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="daily">Daily</SelectItem>
+                <SelectItem value="weekly">Weekly</SelectItem>
+                <SelectItem value="never">Never</SelectItem>
+              </SelectContent>
+            </Select>
+            <p className="text-sm text-muted-foreground">
+              Get a summary of your activity and updates
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Sound</CardTitle>
+          <CardDescription>
+            Manage audio notifications and sounds
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center justify-between">
+            <div className="space-y-0.5">
+              <Label htmlFor="sound-enabled">Enable sounds</Label>
+              <p className="text-sm text-muted-foreground">
+                Play sounds for notifications and actions
+              </p>
+            </div>
+            <Switch
+              id="sound-enabled"
+              checked={preferences.soundEnabled}
+              onCheckedChange={(checked) =>
+                updatePreference('soundEnabled', checked)
+              }
+              disabled={isPending}
+            />
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/src/features/user-settings/hooks/index.ts

@@ -0,0 +1,8 @@
+/**
+ * User Settings Hooks - Barrel Export
+ *
+ * Following AGENTS.md §7: Barrels at feature root expose public surface
+ */
+
+export { useNotificationPreferences } from './use-notification-preferences'
+export { useUserPreferences } from './use-user-preferences'

package/src/features/user-settings/hooks/use-notification-preferences.ts

@@ -0,0 +1,65 @@
+'use client'
+
+import { useState, useTransition } from 'react'
+import { toast } from 'sonner'
+import type { NotificationPreference } from '../types'
+
+interface UseNotificationPreferencesProps {
+  initialPreferences: NotificationPreference[]
+}
+
+/**
+ * Mock hook for managing notification preferences
+ * Simulates API delay and optimistic updates for UI prototyping
+ */
+export function useNotificationPreferences({
+  initialPreferences,
+}: UseNotificationPreferencesProps) {
+  const [isPending, startTransition] = useTransition()
+  const [preferences, setPreferences] = useState<NotificationPreference[]>(
+    initialPreferences
+  )
+
+  const handleToggle = (
+    prefId: string,
+    field: 'inApp' | 'email',
+    value: boolean
+  ) => {
+    // Optimistic update
+    setPreferences((prev) =>
+      prev.map((pref) =>
+        pref.id === prefId ? { ...pref, [field]: value } : pref
+      )
+    )
+
+    // Simulate API call
+    startTransition(async () => {
+      try {
+        // Simulate network delay
+        await new Promise((resolve) => setTimeout(resolve, 300))
+        toast.success('Notification preferences updated')
+      } catch (err) {
+        console.error('Failed to update notification preferences', err)
+        toast.error('Failed to update preferences')
+        // Revert optimistic update on error
+        setPreferences(initialPreferences)
+      }
+    })
+  }
+
+  const handleRefresh = () => {
+    startTransition(async () => {
+      // Simulate API refresh
+      await new Promise((resolve) => setTimeout(resolve, 500))
+      setPreferences(initialPreferences)
+      toast.success('Preferences refreshed')
+    })
+  }
+
+  return {
+    preferences,
+    isPending,
+    handleToggle,
+    handleRefresh,
+  }
+}

package/src/features/user-settings/hooks/use-user-preferences.ts

@@ -0,0 +1,52 @@
+'use client'
+
+import { useState, useTransition } from 'react'
+import { toast } from 'sonner'
+import type { UserPreferences } from '../types'
+
+interface UseUserPreferencesProps {
+  initialPreferences: UserPreferences
+}
+
+/**
+ * Mock hook for managing user preferences
+ * Simulates API delay and optimistic updates for UI prototyping
+ */
+export function useUserPreferences({
+  initialPreferences,
+}: UseUserPreferencesProps) {
+  const [isPending, startTransition] = useTransition()
+  const [preferences, setPreferences] =
+    useState<UserPreferences>(initialPreferences)
+
+  const updatePreference = <K extends keyof UserPreferences>(
+    key: K,
+    value: UserPreferences[K]
+  ) => {
+    // Optimistic update
+    setPreferences((prev) => ({
+      ...prev,
+      [key]: value,
+    }))
+
+    // Simulate API call
+    startTransition(async () => {
+      try {
+        // Simulate network delay
+        await new Promise((resolve) => setTimeout(resolve, 300))
+        toast.success('Preferences updated')
+      } catch (err) {
+        console.error('Failed to update preferences', err)
+        toast.error('Failed to update preferences')
+        // Revert on error
+        setPreferences(initialPreferences)
+      }
+    })
+  }
+
+  return {
+    preferences,
+    isPending,
+    updatePreference,
+  }
+}

package/src/features/user-settings/index.ts

@@ -0,0 +1,22 @@
+/**
+ * User Settings Feature - Public API
+ *
+ * This barrel export exposes the public surface of the user settings feature.
+ * Follow the layer contracts defined in AGENTS.md:
+ * - Screens for feature UI composition
+ * - Hooks for state management
+ * - Components for presentational UI
+ * - Types for domain models
+ */
+
+// Export all screens
+export * from './screens'
+
+// Export all hooks
+export * from './hooks'
+
+// Export all components
+export * from './components'
+
+// Export all types
+export * from './types'

package/src/features/user-settings/screens/index.ts

@@ -0,0 +1,11 @@
+/**
+ * User Settings Screens - Barrel Export
+ *
+ * Following AGENTS.md §7: Barrels at feature root expose public surface
+ */
+
+export { default as UserSettingsScreen } from './user-settings-screen'
+export { default as PreferencesScreen } from './setting-preferences-screen'
+export { default as NotificationsScreen } from './notifications-screen'
+export { default as IntegrationsScreen } from './integrations-screen'
+export { default as OtherSettingsScreen } from './other-settings-screen'

package/src/features/user-settings/screens/integrations-screen.tsx

@@ -0,0 +1,24 @@
+'use client'
+
+import { IntegrationsList } from '../components/integrations-list'
+import type { Integration } from '../types'
+
+interface IntegrationsScreenProps {
+  integrations: Integration[]
+}
+
+export default function IntegrationsScreen({
+  integrations,
+}: IntegrationsScreenProps) {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-semibold">Integrations</h2>
+        <p className="text-muted-foreground mt-1">
+          Connect third-party services
+        </p>
+      </div>
+      <IntegrationsList integrations={integrations} />
+    </div>
+  )
+}

package/src/features/user-settings/screens/notifications-screen.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import { NotificationPreferences } from '../components/notification-preferences'
+import type { NotificationPreference } from '../types'
+
+interface NotificationsScreenProps {
+  initialPreferences: NotificationPreference[]
+  emailEnabled?: boolean
+}
+
+export default function NotificationsScreen({
+  initialPreferences,
+  emailEnabled = true,
+}: NotificationsScreenProps) {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-semibold">Notifications</h2>
+        <p className="text-muted-foreground mt-1">
+          Manage your notification preferences
+        </p>
+      </div>
+      <NotificationPreferences
+        initialPreferences={initialPreferences}
+        emailEnabled={emailEnabled}
+      />
+    </div>
+  )
+}

package/src/features/user-settings/screens/other-settings-screen.tsx

@@ -0,0 +1,24 @@
+'use client'
+
+import { OtherSettings } from '../components/other-settings'
+import type { UserProfile } from '../types'
+
+interface OtherSettingsScreenProps {
+  userProfile: UserProfile
+}
+
+export default function OtherSettingsScreen({
+  userProfile,
+}: OtherSettingsScreenProps) {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-semibold">Other Settings</h2>
+        <p className="text-muted-foreground mt-1">
+          Advanced settings and account management
+        </p>
+      </div>
+      <OtherSettings userProfile={userProfile} />
+    </div>
+  )
+}

package/src/features/user-settings/screens/setting-preferences-screen.tsx

@@ -0,0 +1,24 @@
+'use client'
+
+import { UserPreferencesComponent } from '../components/user-preferences'
+import type { UserPreferences } from '../types'
+
+interface PreferencesScreenProps {
+  initialPreferences: UserPreferences
+}
+
+export default function PreferencesScreen({
+  initialPreferences,
+}: PreferencesScreenProps) {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-semibold">Preferences</h2>
+        <p className="text-muted-foreground mt-1">
+          Customize your experience
+        </p>
+      </div>
+      <UserPreferencesComponent initialPreferences={initialPreferences} />
+    </div>
+  )
+}

package/src/features/user-settings/screens/user-settings-screen.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { UserSettingsAside } from "@/components/shared/settings-sidebar";
+import { USER_SETTINGS_NAV } from "@/config/user-settings-nav";
+
+interface UserSettingsScreenProps {
+  children: React.ReactNode;
+}
+
+export default function UserSettingsScreen({
+  children,
+}: UserSettingsScreenProps) {
+  return (
+    <div className="container mx-auto max-w-6xl px-6 py-8">
+      <div className="flex flex-col gap-8 lg:flex-row">
+        <UserSettingsAside items={USER_SETTINGS_NAV} />
+        <main className="flex-1 max-w-2xl">
+          {children}
+        </main>
+      </div>
+    </div>
+  );
+}

package/src/features/user-settings/types/index.ts

@@ -0,0 +1,42 @@
+export interface UserProfile {
+  id: string
+  name: string
+  email: string
+  avatar: string | null
+  bio: string | null
+  timezone: string
+  language: string
+}
+
+export interface NotificationPreference {
+  id: string
+  type: 'issues' | 'mentions' | 'updates' | 'security'
+  label: string
+  description: string
+  inApp: boolean
+  email: boolean
+}
+
+export interface UserPreferences {
+  theme: 'light' | 'dark' | 'system'
+  emailDigest: 'daily' | 'weekly' | 'never'
+  soundEnabled: boolean
+  compactMode: boolean
+}
+
+export interface Integration {
+  id: string
+  name: string
+  description: string
+  icon: string
+  connected: boolean
+  lastSync?: string
+}
+
+export type SettingSection = 'notifications' | 'preferences' | 'integrations' | 'other'
+
+export interface AccountDeletionConfirmation {
+  email: string
+  confirmText: string
+  understood: boolean
+}

package/src/features/user-settings/utils/index.ts

@@ -0,0 +1,8 @@
+/**
+ * User Settings Utils
+ *
+ * Pure helper functions for user settings feature.
+ * Following AGENTS.md §4: Feature Module Anatomy
+ */
+
+export {}; // Placeholder to make this a valid module

package/src/hooks/use-long-press.ts

@@ -0,0 +1,196 @@
+import { useCallback, useRef, useState } from 'react';
+
+export interface UseLongPressOptions {
+  /**
+   * Callback fired when long press is detected
+   */
+  onLongPress: (event: PointerEvent) => void;
+
+  /**
+   * Optional callback fired on normal press (short press)
+   */
+  onPress?: (event: PointerEvent) => void;
+
+  /**
+   * Duration in milliseconds to trigger long press
+   * @default 500
+   */
+  threshold?: number;
+
+  /**
+   * Movement tolerance in pixels before canceling long press
+   * Prevents false triggers during scrolling
+   * @default 10
+   */
+  moveThreshold?: number;
+
+  /**
+   * Whether the hook is enabled
+   * @default true
+   */
+  enabled?: boolean;
+}
+
+export interface UseLongPressReturn {
+  /**
+   * Handler for pointer down event
+   */
+  onPointerDown: (event: React.PointerEvent) => void;
+
+  /**
+   * Handler for pointer up event
+   */
+  onPointerUp: (event: React.PointerEvent) => void;
+
+  /**
+   * Handler for pointer move event
+   */
+  onPointerMove: (event: React.PointerEvent) => void;
+
+  /**
+   * Handler for pointer cancel event
+   */
+  onPointerCancel: (event: React.PointerEvent) => void;
+
+  /**
+   * Whether a long press is currently in progress
+   * Useful for visual feedback (e.g., show hint after 300ms)
+   */
+  isLongPressing: boolean;
+}
+
+/**
+ * Hook for detecting long press gestures on touch and pointer devices.
+ *
+ * Uses the Pointer Events API for universal compatibility with both
+ * touch and mouse interactions. Includes movement threshold to prevent
+ * false triggers during scrolling.
+ *
+ * @example
+ * ```tsx
+ * const longPress = useLongPress({
+ *   onLongPress: () => showContextMenu(),
+ *   threshold: 500,
+ *   moveThreshold: 10,
+ * });
+ *
+ * return <div {...longPress}>Long press me</div>;
+ * ```
+ */
+export function useLongPress(options: UseLongPressOptions): UseLongPressReturn {
+  const {
+    onLongPress,
+    onPress,
+    threshold = 500,
+    moveThreshold = 10,
+    enabled = true,
+  } = options;
+
+  const [isLongPressing, setIsLongPressing] = useState(false);
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+  const startPositionRef = useRef<{ x: number; y: number } | null>(null);
+  const isLongPressTriggeredRef = useRef(false);
+
+  const clearTimer = useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+
+  const reset = useCallback(() => {
+    clearTimer();
+    setIsLongPressing(false);
+    startPositionRef.current = null;
+    isLongPressTriggeredRef.current = false;
+  }, [clearTimer]);
+
+  const handlePointerDown = useCallback(
+    (event: React.PointerEvent) => {
+      if (!enabled) return;
+
+      // Store native event for callback
+      const nativeEvent = event.nativeEvent;
+
+      // Record start position for movement threshold
+      startPositionRef.current = {
+        x: event.clientX,
+        y: event.clientY,
+      };
+
+      isLongPressTriggeredRef.current = false;
+
+      // Start long press timer
+      timerRef.current = setTimeout(() => {
+        setIsLongPressing(true);
+        isLongPressTriggeredRef.current = true;
+        onLongPress(nativeEvent);
+      }, threshold);
+    },
+    [enabled, threshold, onLongPress]
+  );
+
+  const handlePointerMove = useCallback(
+    (event: React.PointerEvent) => {
+      if (!enabled || !startPositionRef.current) return;
+
+      // Calculate distance moved
+      const deltaX = Math.abs(event.clientX - startPositionRef.current.x);
+      const deltaY = Math.abs(event.clientY - startPositionRef.current.y);
+      const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+
+      // Cancel long press if moved beyond threshold
+      if (distance > moveThreshold) {
+        reset();
+      }
+    },
+    [enabled, moveThreshold, reset]
+  );
+
+  const handlePointerUp = useCallback(
+    (event: React.PointerEvent) => {
+      if (!enabled) return;
+
+      const nativeEvent = event.nativeEvent;
+
+      // If long press was triggered, don't fire onPress
+      if (isLongPressTriggeredRef.current) {
+        reset();
+        return;
+      }
+
+      // Clear timer and fire normal press if provided
+      clearTimer();
+
+      if (onPress && startPositionRef.current) {
+        // Only fire onPress if we didn't move beyond threshold
+        const deltaX = Math.abs(event.clientX - startPositionRef.current.x);
+        const deltaY = Math.abs(event.clientY - startPositionRef.current.y);
+        const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+
+        if (distance <= moveThreshold) {
+          onPress(nativeEvent);
+        }
+      }
+
+      reset();
+    },
+    [enabled, onPress, moveThreshold, clearTimer, reset]
+  );
+
+  const handlePointerCancel = useCallback(
+    (event: React.PointerEvent) => {
+      if (!enabled) return;
+      reset();
+    },
+    [enabled, reset]
+  );
+
+  return {
+    onPointerDown: handlePointerDown,
+    onPointerUp: handlePointerUp,
+    onPointerMove: handlePointerMove,
+    onPointerCancel: handlePointerCancel,
+    isLongPressing,
+  };
+}