selectable platform

package-lock.json

@@ -20,6 +20,8 @@
                 "@radix-ui/react-slot": "^1.1.2",
                 "@radix-ui/react-tabs": "^1.1.3",
                 "@radix-ui/react-toast": "^1.2.6",
+                "@radix-ui/react-toggle": "^1.1.2",
+                "@radix-ui/react-toggle-group": "^1.1.2",
                 "@radix-ui/react-tooltip": "^1.1.8",
                 "@schedule-x/drag-and-drop": "^2.19.0",
                 "@schedule-x/events-service": "^2.19.0",
@@ -1496,6 +1498,60 @@
                 }
             }
         },
+        "node_modules/@radix-ui/react-toggle": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.1.2.tgz",
+            "integrity": "sha512-lntKchNWx3aCHuWKiDY+8WudiegQvBpDRAYL8dKLRvKEH8VOpl0XX6SSU/bUBqIRJbcTy4+MW06Wv8vgp10rzQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/primitive": "1.1.1",
+                "@radix-ui/react-primitive": "2.0.2",
+                "@radix-ui/react-use-controllable-state": "1.1.0"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-toggle-group": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle-group/-/react-toggle-group-1.1.2.tgz",
+            "integrity": "sha512-JBm6s6aVG/nwuY5eadhU2zDi/IwYS0sDM5ZWb4nymv/hn3hZdkw+gENn0LP4iY1yCd7+bgJaCwueMYJIU3vk4A==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/primitive": "1.1.1",
+                "@radix-ui/react-context": "1.1.1",
+                "@radix-ui/react-direction": "1.1.0",
+                "@radix-ui/react-primitive": "2.0.2",
+                "@radix-ui/react-roving-focus": "1.1.2",
+                "@radix-ui/react-toggle": "1.1.2",
+                "@radix-ui/react-use-controllable-state": "1.1.0"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@radix-ui/react-tooltip": {
             "version": "1.1.8",
             "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.1.8.tgz",

package.json

@@ -23,6 +23,8 @@
         "@radix-ui/react-slot": "^1.1.2",
         "@radix-ui/react-tabs": "^1.1.3",
         "@radix-ui/react-toast": "^1.2.6",
+        "@radix-ui/react-toggle": "^1.1.2",
+        "@radix-ui/react-toggle-group": "^1.1.2",
         "@radix-ui/react-tooltip": "^1.1.8",
         "@schedule-x/drag-and-drop": "^2.19.0",
         "@schedule-x/events-service": "^2.19.0",

src/app/calendar/postDialog.tsx

@@ -23,10 +23,17 @@ import TimeSelect from './timeSelect';
 import { CalendarEventExternal } from '@schedule-x/calendar';
 import { Textarea } from '@/components/ui/textarea';
 import { Label } from '@/components/ui/label';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import axios from 'axios';
-import { DATE_FORMAT, PostRequest, ScheduleRequest } from '@/lib/types';
+import {
+    DATE_FORMAT,
+    PlatformKind,
+    PostRequest,
+    ScheduleRequest,
+    UserPlatforms,
+} from '@/lib/types';
 import { CalendarSchedule, Event } from './calendar';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 
 type PostDialogProps = {
     newPostDialogOpen: boolean;
@@ -47,6 +54,21 @@ export default function PostDialog({
     addEvents: addEvent,
 }: PostDialogProps) {
     const [content, setContent] = useState('');
+    const [platforms, setPlatforms] = useState<UserPlatforms>({});
+
+    const [selectedPlatforms, setSelectedPlatforms] = useState<Set<string>>(
+        new Set()
+    );
+
+    useEffect(() => {
+        axios
+            .get('/api/platforms', {
+                withCredentials: true,
+            })
+            .then((res) => {
+                setPlatforms(res.data.platforms);
+            });
+    }, []);
 
     return (
         <Dialog open={newPostDialogOpen} onOpenChange={setNewPostDialogOpen}>
@@ -103,6 +125,38 @@ export default function PostDialog({
                     />
                 </div>
 
+                <div className="grid w-full gap-1.5">
+                    <Label htmlFor="message">Platforms</Label>
+                    <ToggleGroup
+                        type="multiple"
+                        className="flex flex-wrap gap-2"
+                    >
+                        {Object.entries(platforms).map(([name, platform]) => (
+                            <ToggleGroupItem
+                                key={platform.platform + platform.icon}
+                                value={platform.icon + platform.platform}
+                                className="w-14 h-12"
+                                onClick={() => {
+                                    setSelectedPlatforms((prev) => {
+                                        const newSet = new Set(prev);
+                                        if (newSet.has(name)) {
+                                            newSet.delete(name); // Toggle off
+                                        } else {
+                                            newSet.add(name); // Toggle on
+                                        }
+                                        return newSet;
+                                    });
+                                }}
+                            >
+                                <img
+                                    src={platform.icon}
+                                    className="w-10 h-10 rounded-full"
+                                />
+                            </ToggleGroupItem>
+                        ))}
+                    </ToggleGroup>
+                </div>
+
                 <div className="grid w-full gap-1.5">
                     <Label htmlFor="message">Content</Label>
                     <Textarea
@@ -125,7 +179,7 @@ export default function PostDialog({
                             axios.post(
                                 '/api/posts',
                                 {
-                                    platforms: ['andjksds'],
+                                    platforms: Array.from(selectedPlatforms),
                                     content,
                                 } satisfies PostRequest,
                                 {
@@ -144,7 +198,7 @@ export default function PostDialog({
                                 '/api/posts',
                                 {
                                     scheduled: format(date, DATE_FORMAT),
-                                    platforms: ['andjksds'],
+                                    platforms: Array.from(selectedPlatforms),
                                     content,
                                 } satisfies ScheduleRequest,
                                 {

src/lib/types.ts

@@ -27,7 +27,9 @@ export interface Platform {
     secret: string;
 }
 
-export type Platforms = { [key: string]: Platform };
+export interface Platforms {
+    [key: string]: Platform;
+}
 
 export interface User {
     name: string;
@@ -48,4 +50,8 @@ export interface Schedule extends Post {
 
 export type Session = { user: string };
 
+export interface UserPlatforms {
+    [key: string]: Platform & { icon: string };
+}
+
 export const DATE_FORMAT = 'y-MM-dd hh:mm';