public checkbox

src/app/feed/pages/HomePage.tsx

@@ -30,7 +30,7 @@ export default function HomePage({ postsService, mediaService }: HomePageProps)
   const { pages, setPages, loadNextPage } = useFeedViewModel(fetchPosts)
 
   const onCreatePost = useCallback(
-    async (content: string, files: { file: File; width: number; height: number }[]) => {
+    async (content: string, files: { file: File; width: number; height: number }[], isPublic: boolean) => {
       setIsSubmitting(true)
       if (user == null) throw new Error('Not logged in')
       try {
@@ -46,7 +46,7 @@ export default function HomePage({ postsService, mediaService }: HomePageProps)
             }
           }),
         )
-        const postId = await postsService.createNew(user.userId, content, media)
+        const postId = await postsService.createNew(user.userId, content, media, isPublic)
         const post = new Post(postId, content, media, Temporal.Now.instant(), user.username)
         setPages((pages) => [[post], ...pages])
       } catch (error) {

src/components/NewPostWidget.tsx

@@ -4,7 +4,11 @@ import Button from './buttons/Button.tsx'
 import { openFileDialog } from '../utils/openFileDialog.ts'
 
 interface NewPostWidgetProps {
-  onSubmit: (content: string, media: { file: File; width: number; height: number }[]) => void
+  onSubmit: (
+    content: string,
+    media: { file: File; width: number; height: number }[],
+    isPublic: boolean,
+  ) => void
   isSubmitting?: boolean
 }
 
@@ -19,6 +23,7 @@ interface Attachment {
 export default function NewPostWidget({ onSubmit, isSubmitting = false }: NewPostWidgetProps) {
   const [content, setContent] = useState('')
   const [attachments, setAttachments] = useState<Attachment[]>([])
+  const [isPublic, setIsPublic] = useState(false)
 
   const onContentInput = (value: string) => {
     setContent(value)
@@ -39,7 +44,7 @@ export default function NewPostWidget({ onSubmit, isSubmitting = false }: NewPos
       return
     }
 
-    onSubmit(content, attachments)
+    onSubmit(content, attachments, isPublic)
 
     attachments.forEach(({ objectUrl }) => URL.revokeObjectURL(objectUrl))
     setContent('')
@@ -85,9 +90,21 @@ export default function NewPostWidget({ onSubmit, isSubmitting = false }: NewPos
       )}
 
       <div className="flex justify-between items-center pt-2">
-        <Button secondary onClick={onAddMediaClicked}>
-          + add media
-        </Button>
+        <div className="flex items-center gap-2">
+          <Button secondary onClick={onAddMediaClicked}>
+            + add media
+          </Button>
+          <label className="flex items-center gap-1 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={isPublic}
+              onChange={(e) => setIsPublic(e.target.checked)}
+              disabled={isSubmitting}
+              className="form-checkbox h-4 w-4 text-blue-600"
+            />
+            <span className="text-primary-500">public</span>
+          </label>
+        </div>
         <Button
           onClick={handleSubmit}
           disabled={isSubmitting || (content.trim() === '' && attachments.length === 0)}

src/components/buttons/Button.tsx

@@ -16,13 +16,12 @@ export default function Button({
   children,
   secondary = false,
 }: PropsWithChildren<PrimaryButtonProps>) {
-  const klass = secondary ? 'secondary-button' : 'primary-button'
   return (
     <button
       type={type}
       disabled={disabled}
       onClick={onClick}
-      className={`${klass} ${extraClasses}`}
+      className={`${secondary ? 'secondary-button' : 'primary-button'} ${extraClasses}`}
     >
       {children}
     </button>

src/index.css

@@ -87,4 +87,21 @@ html {
         opacity: 50%;
         cursor: default;
     }
+
+    .checkbox {
+        padding: var(--spacing-2) var(--spacing-4);
+        background: var(--color-primary-800);
+        color: var(--color-white);
+        cursor: pointer;
+        border-radius: var(--radius-md);
+    }
+
+    .checkbox:hover {
+        background: var(--color-primary-700);
+    }
+
+    .checkbox:disabled {
+        opacity: 50%;
+        cursor: default;
+    }
 }