Clean

Author: MartinBraquet

web/components/filters/search.tsx

@@ -14,9 +14,8 @@ import {BookmarkSearchButton, BookmarkStarButton} from "web/components/searches/
 import {BookmarkedSearchesType} from "web/hooks/use-bookmarked-searches";
 import {submitBookmarkedSearch} from "web/lib/supabase/searches";
 import {useUser} from "web/hooks/use-user";
-import {isEqual} from "lodash";
 import toast from "react-hot-toast";
-import {FilterFields, initialFilters} from "common/filters";
+import {FilterFields} from "common/filters";
 import {DisplayUser} from "common/api/user-types";
 
 function isOrderBy(input: string): input is FilterFields['orderBy'] {

web/components/votes/vote-buttons.tsx

@@ -3,7 +3,7 @@ import {Button} from 'web/components/buttons/button'
 import clsx from 'clsx'
 import toast from 'react-hot-toast'
 import {api} from 'web/lib/api'
-import {useState} from 'react'
+import {useState, useEffect, useRef} from 'react'
 import {useUser} from "web/hooks/use-user";
 
 export type VoteChoice = 'for' | 'abstain' | 'against'
@@ -47,8 +47,32 @@ export function VoteButtons(props: {
   const {voteId, counts, onVoted, className} = props
   const [loading, setLoading] = useState<VoteChoice | null>(null)
   const [showPriority, setShowPriority] = useState(false)
+  const containerRef = useRef<HTMLDivElement>(null)
   const disabled = loading !== null
 
+  // Close the dropdown when clicking outside or pressing Escape
+  useEffect(() => {
+    if (!showPriority) return
+
+    const handleClickOutside = (e: MouseEvent) => {
+      const target = e.target as Node | null
+      if (containerRef.current && target && !containerRef.current.contains(target)) {
+        setShowPriority(false)
+      }
+    }
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setShowPriority(false)
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+    document.addEventListener('keydown', handleKeyDown)
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [showPriority])
+
   const sendVote = async (choice: VoteChoice, priority: number) => {
     try {
       setLoading(choice)
@@ -79,7 +103,7 @@ export function VoteButtons(props: {
 
   return (
     <Row className={clsx('gap-4 mt-2', className)}>
-      <div className="relative">
+      <div className="relative" ref={containerRef}>
         <VoteButton
           color={clsx('bg-green-700 text-white hover:bg-green-500')}
           count={counts.for}
@@ -89,15 +113,15 @@ export function VoteButtons(props: {
         />
         {showPriority && (
           <div className={clsx(
-            'absolute z-10 mt-2 w-40 rounded-md border border-ink-200 bg-white shadow-lg',
+            'absolute z-10 mt-2 w-40 rounded-md border border-ink-200 bg-canvas-50 shadow-lg',
             'dark:bg-ink-900'
           )}>
             {priorities.map((p) => (
               <button
                 key={p.value}
                 className={clsx(
-                  'w-full text-left px-3 py-2 text-sm hover:bg-ink-100',
-                  'dark:hover:bg-ink-800'
+                  'w-full text-left px-3 py-2 text-sm hover:bg-ink-100 bg-canvas-50',
+                  'dark:hover:bg-canvas-100'
                 )}
                 onClick={async () => {
                   setShowPriority(false)

web/components/votes/vote-item.tsx

@@ -33,8 +33,10 @@ export function VoteItem(props: {
           <Col className='text-sm text-gray-500 italic'>
             <Content className="w-full" content={vote.description as JSONContent}/>
           </Col>
-          {vote.priority && <Col>Priority: {vote.priority / vote.votes_for}</Col>}
-          {creator?.username && <Col className={'mt-2 customlink text-right'}><Link href={`/${creator.username}`}>{creator.username}</Link></Col>}
+          <Row className={'gap-2 mt-2 items-center justify-between w-full customlink'}>
+            {!!vote.priority ? <div>Priority: {((vote.priority / vote.votes_for / 3) * 100).toFixed(0)}%</div> : <p></p>}
+            {creator?.username && <Link href={`/${creator.username}`} className="customlink">{creator.username}</Link>}
+          </Row>
           <VoteButtons
             voteId={vote.id}
             counts={{

web/pages/notifications.tsx

@@ -11,7 +11,7 @@ import {Col} from 'web/components/layout/col'
 import {UncontrolledTabs} from 'web/components/layout/tabs'
 import {LovePage} from 'web/components/love-page'
 import {NotificationItem} from 'web/components/notification-items'
-import {CompassLoadingIndicator, LoadingIndicator} from 'web/components/widgets/loading-indicator'
+import {CompassLoadingIndicator} from 'web/components/widgets/loading-indicator'
 import {Pagination} from 'web/components/widgets/pagination'
 import {Title} from 'web/components/widgets/title'
 import {useGroupedNotifications} from 'web/hooks/use-notifications'