feat: pow

src/components/AudioPlayer/index.tsx

@@ -95,7 +95,14 @@ export default function AudioPlayer({ src, className }: AudioPlayerProps) {
 
       {/* Progress Section */}
       <div className="flex-1 relative">
-        <Slider value={[currentTime]} max={duration || 100} step={1} onValueChange={handleSeek} />
+        <Slider
+          value={[currentTime]}
+          max={duration || 100}
+          step={1}
+          onValueChange={handleSeek}
+          hideThumb
+          enableHoverAnimation
+        />
       </div>
 
       <div className="text-sm font-mono text-muted-foreground">

src/components/PostEditor/PostContent.tsx

@@ -4,7 +4,8 @@ import { ScrollArea } from '@/components/ui/scroll-area'
 import {
   createCommentDraftEvent,
   createPollDraftEvent,
-  createShortTextNoteDraftEvent
+  createShortTextNoteDraftEvent,
+  deleteDraftEventCache
 } from '@/lib/draft-event'
 import { isTouchDevice } from '@/lib/utils'
 import { useNostr } from '@/providers/NostrProvider'
@@ -56,6 +57,7 @@ export default function PostContent({
     endsAt: undefined,
     relays: []
   })
+  const [minPow, setMinPow] = useState(0)
   const isFirstRender = useRef(true)
   const canPost =
     !!pubkey &&
@@ -133,10 +135,12 @@ export default function PostContent({
 
         const newEvent = await publish(draftEvent, {
           specifiedRelayUrls,
-          additionalRelayUrls: isPoll ? pollCreateData.relays : []
+          additionalRelayUrls: isPoll ? pollCreateData.relays : [],
+          minPow
         })
-        addReplies([newEvent])
         postEditorCache.clearPostCache({ defaultContent, parentEvent })
+        deleteDraftEventCache(draftEvent)
+        addReplies([newEvent])
         close()
       } catch (error) {
         if (error instanceof AggregateError) {
@@ -311,11 +315,14 @@ export default function PostContent({
         </div>
       </div>
       <PostOptions
+        posting={posting}
         show={showMoreOptions}
         addClientTag={addClientTag}
         setAddClientTag={setAddClientTag}
         isNsfw={isNsfw}
         setIsNsfw={setIsNsfw}
+        minPow={minPow}
+        setMinPow={setMinPow}
       />
       <div className="flex gap-2 items-center justify-around sm:hidden">
         <Button

src/components/PostEditor/PostOptions.tsx

@@ -1,21 +1,28 @@
 import { Label } from '@/components/ui/label'
+import { Slider } from '@/components/ui/slider'
 import { Switch } from '@/components/ui/switch'
 import { StorageKey } from '@/constants'
 import { Dispatch, SetStateAction, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 
 export default function PostOptions({
+  posting,
   show,
   addClientTag,
   setAddClientTag,
   isNsfw,
-  setIsNsfw
+  setIsNsfw,
+  minPow,
+  setMinPow
 }: {
+  posting: boolean
   show: boolean
   addClientTag: boolean
   setAddClientTag: Dispatch<SetStateAction<boolean>>
   isNsfw: boolean
   setIsNsfw: Dispatch<SetStateAction<boolean>>
+  minPow: number
+  setMinPow: Dispatch<SetStateAction<number>>
 }) {
   const { t } = useTranslation()
 
@@ -43,6 +50,7 @@ export default function PostOptions({
             id="add-client-tag"
             checked={addClientTag}
             onCheckedChange={onAddClientTagChange}
+            disabled={posting}
           />
         </div>
         <div className="text-muted-foreground text-xs">
@@ -52,7 +60,24 @@ export default function PostOptions({
 
       <div className="flex items-center space-x-2">
         <Label htmlFor="add-nsfw-tag">{t('NSFW')}</Label>
-        <Switch id="add-nsfw-tag" checked={isNsfw} onCheckedChange={onNsfwChange} />
+        <Switch
+          id="add-nsfw-tag"
+          checked={isNsfw}
+          onCheckedChange={onNsfwChange}
+          disabled={posting}
+        />
+      </div>
+
+      <div className="grid gap-4 pb-4">
+        <Label>{t('Proof of Work (difficulty {{minPow}})', { minPow })}</Label>
+        <Slider
+          defaultValue={[0]}
+          value={[minPow]}
+          onValueChange={([pow]) => setMinPow(pow)}
+          max={28}
+          step={1}
+          disabled={posting}
+        />
       </div>
     </div>
   )

src/components/ui/slider.tsx

@@ -5,8 +5,11 @@ import { cn } from '@/lib/utils'
 
 const Slider = React.forwardRef<
   React.ElementRef<typeof SliderPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> & { hideThumb?: boolean }
->(({ className, ...props }, ref) => {
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> & {
+    hideThumb?: boolean
+    enableHoverAnimation?: boolean
+  }
+>(({ className, hideThumb, enableHoverAnimation, ...props }, ref) => {
   const [isHovered, setIsHovered] = React.useState(false)
 
   return (
@@ -22,17 +25,18 @@ const Slider = React.forwardRef<
       <SliderPrimitive.Track
         className={cn(
           'relative w-full grow overflow-hidden rounded-full bg-primary/20 cursor-pointer transition-all',
-          isHovered ? 'h-3' : 'h-1.5'
+          isHovered && enableHoverAnimation ? 'h-3' : 'h-1.5'
         )}
       >
-        <SliderPrimitive.Range className="absolute h-full bg-primary rounded-full" />
+        <SliderPrimitive.Range className="absolute h-full bg-primary disabled:bg-primary/30 rounded-full" />
       </SliderPrimitive.Track>
-      {/* <SliderPrimitive.Thumb
-        className={cn(
-          'block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-all duration-300 cursor-pointer focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
-          isHovered ? 'opacity-100' : 'opacity-0'
-        )}
-      /> */}
+      {!hideThumb && (
+        <SliderPrimitive.Thumb
+          className={cn(
+            'block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-all duration-300 cursor-pointer focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50'
+          )}
+        />
+      )}
     </SliderPrimitive.Root>
   )
 })