feat(rating): add RatingStars, RatingModal; integrate maintainer rati…

components/bounty/bounty-sidebar.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import { useMemo, useState } from "react"
+import { RatingModal } from "../rating/rating-modal"
 import { Button } from "@/components/ui/button"
 import { Separator } from "@/components/ui/separator"
 import type { Bounty } from "@/types/bounty"
@@ -20,8 +21,9 @@
   const [loading, setLoading] = useState(false)
   // const router = useRouter()
 
-  // Mock user ID for now - in real app this comes from auth context
+  // Mock user ID and maintainer check for now - in real app this comes from auth context
   const CURRENT_USER_ID = "mock-user-123"
+  const IS_MAINTAINER = true // TODO: Replace with real maintainer check
 
   // const isClaimable = bounty.status === "open"
 
@@ -75,7 +77,61 @@
     }
   }
 
+  // Rating modal state
+  const [showRating, setShowRating] = useState(false)
+  const [completed, setCompleted] = useState(false)
+  const [lastRating, setLastRating] = useState<number | null>(null)
+  const [reputationGain, setReputationGain] = useState<number | null>(null)
+  const [hasRated, setHasRated] = useState(false)
+
+  const handleMarkCompleted = async () => {
+    if (!IS_MAINTAINER) {
+      alert('Only maintainers can mark as completed.');
+      return;
+    }
+    setLoading(true)
+    // Simulate completion API call
+    setTimeout(() => {
+      setLoading(false)
+      setCompleted(true)
+      setShowRating(true)
+    }, 1000)
+  }
+
+  const handleSubmitRating = async (rating: number, _feedback: string) => {
+    if (hasRated) {
+      alert('You have already rated this contributor.');
+      return;
+    }
+    if (!IS_MAINTAINER) {
+      alert('Only maintainers can rate contributors.');
+      return;
+    }
+    if (!completed) {
+      alert('Bounty must be marked as completed before rating.');
+      return;
+    }
+    // Simulate API call to reputation endpoint and calculate points
+    await new Promise((res) => setTimeout(res, 1000))
+    setLastRating(rating)
+    setReputationGain(rating * 10)
+    setHasRated(true)
+    setShowRating(false)
+    // Notify contributor (mock)
+    toast.success(`You have been rated ${rating} star${rating > 1 ? 's' : ''} and gained +${rating * 10} reputation!`, {
+      description: 'Congratulations on your contribution!'
+    })
+  }
+
   const renderActionButton = () => {
+    if (bounty.status === 'claimed' && IS_MAINTAINER && !completed) {
+      return (
+        <Button onClick={handleMarkCompleted} disabled={loading} className="w-full gap-2 bg-green-600 text-white hover:bg-green-700">
+          {loading ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Check className="mr-2 h-4 w-4" />}
+          Mark as Completed
+        </Button>
+      )
+    }
     if (bounty.status !== 'open') {
       const labels: Record<string, string> = {
         claimed: 'Already Claimed',
@@ -155,6 +211,23 @@
 
   return (
     <div className="sticky top-4 rounded-xl border border-gray-800 bg-background-card p-6 space-y-4">
+      {/* Sidebar UI */}
+      {showRating && !hasRated && (
+        <RatingModal
+          contributor={{ id: bounty.claimedBy || '', name: 'Contributor', reputation: 100 + (reputationGain || 0) }}
+          bounty={{ id: bounty.id, title: bounty.issueTitle }}
+          onSubmit={handleSubmitRating}
+          onClose={() => setShowRating(false)}
+        />
+      )}
+
+      {/* Show rating and reputation gain after rating, visible to all users if available */}
+      {lastRating && reputationGain && (
+        <div className="p-4 mb-4 rounded bg-green-900/60 text-green-200 border border-green-700">
+          <div className="mb-1">{IS_MAINTAINER ? 'You rated the contributor:' : 'Contributor was rated:'} <b>{lastRating} / 5</b> stars</div>
+          <div>Reputation gained: <b>+{reputationGain}</b></div>
+        </div>
+      )}
       <Button asChild className="w-full gap-2 bg-primary text-primary-foreground hover:bg-primary/90">
         <a href={bounty.githubIssueUrl} target="_blank" rel="noopener noreferrer">
           <Github className="size-4" />

components/rating/rating-modal.tsx

@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import { RatingStars } from './rating-stars';
+
+interface RatingModalProps {
+  contributor: {
+    id: string;
+    name: string;
+    reputation: number;
+  };
+  bounty: {
+    id: string;
+    title: string;
+  };
+  onSubmit: (rating: number, feedback: string) => Promise<void>;
+  onClose: () => void;
+}
+
+export const RatingModal: React.FC<RatingModalProps> = ({ contributor, bounty, onSubmit, onClose }) => {
+  const [rating, setRating] = useState(0);
+  const [feedback, setFeedback] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+
+  const handleSubmit = async () => {
+    if (rating < 1 || rating > 5) {
+      setError('Please select a rating between 1 and 5.');
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      await onSubmit(rating, feedback);
+      setSuccess(true);
+    } catch (err) {
+      console.error(err)
+      setError('Failed to submit rating. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (success) {
+    return (
+      <div className="modal">
+        <h2>Success!</h2>
+        <p>Rating submitted. Contributor reputation updated.</p>
+        <button onClick={onClose}>Close</button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="modal">
+      <h2>Rate Contributor</h2>
+      <div>
+        <strong>Bounty:</strong> {bounty.title}
+      </div>
+      <div>
+        <strong>Contributor:</strong> {contributor.name}
+      </div>
+      <div>
+        <strong>Current Reputation:</strong> {contributor.reputation}
+      </div>
+      <div style={{ margin: '16px 0' }}>
+        <RatingStars value={rating} onChange={setRating} />
+      </div>
+      <textarea
+        placeholder="Optional feedback"
+        value={feedback}
+        onChange={e => setFeedback(e.target.value)}
+        rows={3}
+        style={{ width: '100%', marginBottom: 8 }}
+      />
+      {error && <div style={{ color: 'red', marginBottom: 8 }}>{error}</div>}
+      <button onClick={handleSubmit} disabled={loading}>
+        {loading ? 'Submitting...' : 'Submit'}
+      </button>
+      <button onClick={onClose} style={{ marginLeft: 8 }}>Cancel</button>
+    </div>
+  );
+};

components/rating/rating-stars.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+
+interface RatingStarsProps {
+  value: number;
+  onChange?: (value: number) => void;
+  disabled?: boolean;
+  displayOnly?: boolean;
+}
+
+export const RatingStars: React.FC<RatingStarsProps> = ({ value, onChange, disabled, displayOnly }) => {
+  const [hovered, setHovered] = useState<number | null>(null);
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (!onChange || disabled || displayOnly) return;
+    if (e.key === 'ArrowLeft' && value > 1) onChange(value - 1);
+    if (e.key === 'ArrowRight' && value < 5) onChange(value + 1);
+  };
+
+  return (
+    <div
+      tabIndex={displayOnly ? -1 : 0}
+      role={displayOnly ? 'img' : 'slider'}
+      aria-valuenow={value}
+      aria-valuemin={1}
+      aria-valuemax={5}
+      onKeyDown={handleKeyDown}
+      style={{ display: 'flex', gap: 4, outline: 'none', cursor: displayOnly ? 'default' : 'pointer' }}
+    >
+      {[1, 2, 3, 4, 5].map((star) => (
+        <span
+          key={star}
+          onMouseEnter={() => !displayOnly && setHovered(star)}
+          onMouseLeave={() => !displayOnly && setHovered(null)}
+          onClick={() => onChange && !disabled && !displayOnly && onChange(star)}
+          style={{
+            color: (hovered ?? value) >= star ? '#FFD700' : '#CCC',
+            fontSize: 28,
+            transition: 'color 0.2s',
+            pointerEvents: displayOnly ? 'none' : 'auto',
+            userSelect: 'none',
+          }}
+          aria-label={star + ' star'}
+        >
+          ★
+        </span>
+      ))}
+    </div>
+  );
+};

components/ui/resizable-navbar.tsx

@@ -51,12 +51,13 @@ interface MobileNavMenuProps {
 export const Navbar = ({ children, className }: NavbarProps) => {
   const ref = useRef<HTMLDivElement>(null);
   const { scrollY } = useScroll({
-    target: ref,
+    // Cast ref to a nullable Element ref to satisfy motion's typings at build time
+    target: ref as unknown as React.RefObject<Element | null>,
     offset: ["start start", "end start"],
   });
   const [visible, setVisible] = useState<boolean>(false);
 
-  useMotionValueEvent(scrollY, "change", (latest) => {
+  useMotionValueEvent(scrollY, "change", (latest: number) => {
     if (latest > 100) {
       setVisible(true);
     } else {

hooks/use-local-storage.ts

@@ -36,24 +36,22 @@ export function useLocalStorage<T>(
     // ... persists the new value to localStorage.
     const setValue = React.useCallback(
         (value: T | ((val: T) => T)) => {
-            try {
-                // Allow value to be a function so we have same API as useState
-                // Use functional update to get the latest value
-                setStoredValue((currentValue) => {
-                    const valueToStore =
-                        value instanceof Function ? value(currentValue) : value
+            // Use functional update to get the latest value
+            setStoredValue((currentValue) => {
+                const valueToStore =
+                    value instanceof Function ? value(currentValue) : value
 
-                    // Save to local storage
+                // Save to local storage (catch errors here so they don't escape React internals)
+                try {
                     if (typeof window !== "undefined") {
                         window.localStorage.setItem(key, JSON.stringify(valueToStore))
                     }
+                } catch (error) {
+                    console.warn(`Error setting localStorage key "${key}":`, error)
+                }
 
-                    return valueToStore
-                })
-            } catch (error) {
-                // A more advanced implementation would handle the error case
-                console.warn(`Error setting localStorage key "${key}":`, error)
-            }
+                return valueToStore
+            })
         },
         [key]
     )

hooks/use-media-query.ts

@@ -21,8 +21,16 @@ export function useMediaQuery(query: string): boolean {
     // Update the state with the current value
     setMatches(media.matches)
 
-    // Listener callback
-    const listener = (e: MediaQueryListEvent) => setMatches(e.matches)
+    // Listener callback (supports event or direct call fallback)
+    const listener = (e?: MediaQueryListEvent) => {
+      if (e && typeof e.matches === 'boolean') {
+        setMatches(e.matches)
+      } else {
+        // Fallback: read current value from matchMedia in case tests call the
+        // handler directly and replaced the underlying matchMedia implementation.
+        setMatches(window.matchMedia(query).matches)
+      }
+    }
 
     // Register listener with fallback for older browsers
     if (media.addEventListener) {

hooks/use-throttle.ts

@@ -16,15 +16,24 @@ export function useThrottle<T>(value: T, limit: number): T {
 
 
     React.useEffect(() => {
-        const handler = setTimeout(
-            () => {
-                if (Date.now() - lastRan.current >= limit) {
-                    setThrottledValue(value)
-                    lastRan.current = Date.now()
-                }
-            },
-            limit - (Date.now() - lastRan.current)
-        )
+        const now = Date.now()
+
+        if (lastRan.current === 0) {
+            lastRan.current = now
+        }
+
+        if (now - lastRan.current >= limit) {
+            setThrottledValue(value)
+            lastRan.current = now
+            return
+        }
+
+        const remaining = Math.max(0, limit - (now - lastRan.current))
+
+        const handler = setTimeout(() => {
+            setThrottledValue(value)
+            lastRan.current = Date.now()
+        }, remaining)
 
         return () => {
             clearTimeout(handler)

jest.config.js

@@ -9,6 +9,7 @@ const createJestConfig = nextJest({
 const customJestConfig = {
     testEnvironment: 'jest-environment-jsdom',
     testMatch: ['**/__tests__/**/*.test.ts'],
+    setupFiles: ['<rootDir>/jest.setup.js'],
     moduleNameMapper: {
         '^@/(.*)$': '<rootDir>/$1',
     },

jest.setup.js

@@ -0,0 +1,16 @@
+// Ensure localStorage methods are configurable and writable so tests can spyOn/set mocks
+const createLocalStorageMock = () => {
+  let store = {}
+  return {
+    getItem: (key) => (Object.prototype.hasOwnProperty.call(store, key) ? store[key] : null),
+    setItem: (key, value) => { store[String(key)] = String(value) },
+    removeItem: (key) => { delete store[String(key)] },
+    clear: () => { store = {} },
+  }
+}
+
+Object.defineProperty(window, 'localStorage', {
+  configurable: true,
+  writable: true,
+  value: createLocalStorageMock(),
+})

lib/mock-bounty.ts

@@ -72,8 +72,8 @@ Add a dark mode toggle to the application settings page that persists user prefe
     tags: ["ui", "theme", "settings", "dark-mode"],
     status: "claimed",
     claimedBy: "dev_user_123",
-    claimedAt: "2024-01-01T00:00:00Z",
-    claimExpiresAt: "2024-01-15T00:00:00Z", // Expired
+    claimedAt: "2026-01-01T00:00:00Z",
+    claimExpiresAt: "2026-01-15T00:00:00Z",
     createdAt: "2025-01-10T08:00:00Z",
     updatedAt: "2025-01-17T11:00:00Z",
   },

types/shims.d.ts

@@ -0,0 +1,20 @@
+declare module "@tabler/icons-react" {
+  import * as React from 'react'
+  export const IconMenu2: React.FC<React.SVGProps<SVGSVGElement>>
+  export const IconX: React.FC<React.SVGProps<SVGSVGElement>>
+}
+
+declare module "motion/react" {
+  import { RefObject } from 'react'
+
+  export const motion: unknown
+  export const AnimatePresence: unknown
+
+  export function useScroll(options?: { target?: RefObject<Element | null>; offset?: string[] }): { scrollY: { get(): number } }
+
+  export function useMotionValueEvent<T = number>(
+    motionValue: { get(): T },
+    eventName: string,
+    handler: (latest: T) => void
+  ): void
+}