🍀🐦 ↝ [SSC-64 SSG-97 SSG-98]: Skin for annotation & fixing some issues…

… with preferred location button
Signal-K · Jan 11, 2025 · da36e7c · da36e7c
1 parent bde1ae8
commit da36e7c
Show file tree

Hide file tree

Showing 10 changed files with 200 additions and 90 deletions.
diff --git a/app/posts/[id]/page.tsx b/app/posts/[id]/page.tsx
@@ -92,6 +92,7 @@ export default function SinglePostPage({ params }: { params: { id: string } }) {
         {classification.author && (
           <div className="w-1/2">
         <SimplePostSingle
+            id={classification.id.toString()}
             title={`Classification #${classification.id}`}
             author={classification.author || "Unknown"}
             content={classification.content || "No content available"}

diff --git a/app/tests/page.tsx b/app/tests/page.tsx
@@ -1,34 +1,6 @@
 "use client";
 
 import PlanetFour from "@/components/Structures/Missions/Astronomers/SatellitePhotos/P4/PlanetFour";
-import React, { useEffect, useState } from "react";
-
-interface Props {
-  author: string;
-}
-
-export const AvatarGenerator: React.FC<Props> = ({ author }) => {
-  const [avatarUrl, setAvatarUrl] = useState("");
-
-  useEffect(() => {
-    const generateAvatar = () => {
-      const apiUrl = `https://api.dicebear.com/6.x/bottts/svg?seed=${encodeURIComponent(author)}`;
-      setAvatarUrl(apiUrl);
-    };
-
-    generateAvatar();
-  }, [author]);
-
-  return (
-    <div>
-      {avatarUrl && (
-        <div className="mt-6">
-          <img src={avatarUrl} alt="Generated Avatar" className="w-16 h-16 rounded-md shadow-md" />
-        </div>
-      )}
-    </div>
-  );
-};
 
 export default function TestPage() {
     return (

diff --git a/components/Account/Avatar.tsx b/components/Account/Avatar.tsx
@@ -0,0 +1,28 @@
+import React, { useEffect, useState } from "react";
+
+interface Props {
+    author: string;
+};
+
+export const AvatarGenerator: React.FC<Props> = ({ author }) => {
+    const [avatarUrl, setAvatarUrl] = useState("");
+
+    useEffect(() => {
+      const generateAvatar = () => {
+        const apiUrl = `https://api.dicebear.com/6.x/bottts/svg?seed=${encodeURIComponent(author)}`;
+        setAvatarUrl(apiUrl);
+      };
+
+      generateAvatar();
+    }, [author]);
+
+    return (
+      <div>
+        {avatarUrl && (
+          <div className="mt-6">
+            <img src={avatarUrl} alt="Generated Avatar" className="w-16 h-16 rounded-md shadow-md" />
+          </div>
+        )}
+      </div>
+    );
+};
diff --git a/components/Data/Generator/Meteorologists/JVH/cloud-classifier.tsx b/components/Data/Generator/Meteorologists/JVH/cloud-classifier.tsx
@@ -67,14 +67,13 @@ export default function CloudClassifier({ classificationConfig, classificationId
   const handleImport = (config: CloudConfiguration) => {
     setSelectedPatterns(config.patterns)
     setAltitude(config.altitude)
-  }
+  };
 
-  // Initialize the component state with classificationConfig if available
   useEffect(() => {
     if (classificationConfig) {
       setSelectedPatterns(classificationConfig.patterns || [])
       setAltitude(classificationConfig.altitude || 500)
-    }
+    };
   }, [classificationConfig])
 
   return (

diff --git a/components/Projects/(classifications)/Annotating/Annotator.tsx b/components/Projects/(classifications)/Annotating/Annotator.tsx
@@ -16,6 +16,7 @@ import {
   type Tool,
   type CategoryConfig,
 } from '@/types/Annotation';
+import { SciFiPanel } from '@/components/ui/styles/sci-fi/panel';
 
 interface ImageAnnotatorProps {
   initialImageUrl: string;
@@ -96,45 +97,55 @@ export default function ImageAnnotator({
   return (
     <div className="space-y-4">
       <div className="flex justify-between items-center">
-        <AnnotationTools
-          currentTool={currentTool}
-          setCurrentTool={setCurrentTool}
-          lineWidth={lineWidth}
-          setLineWidth={setLineWidth}
-        />
-      </div>
-      {selectedImage && (
-        <div className="space-y-4">
-          <AnnotationCanvas
-            canvasRef={canvasRef}
-            imageRef={imageRef}
-            isDrawing={isDrawing}
-            setIsDrawing={setIsDrawing}
+        <SciFiPanel className="p-4">
+          <AnnotationTools
             currentTool={currentTool}
-            currentColor={CATEGORY_CONFIG[currentCategory as keyof typeof CATEGORY_CONFIG].color}
+            setCurrentTool={setCurrentTool}
             lineWidth={lineWidth}
-            drawings={drawings}
-            setDrawings={setDrawings}
-            currentDrawing={currentDrawing}
-            setCurrentDrawing={setCurrentDrawing}
-            currentCategory={currentCategory}
-          />
-          <Legend
-            currentCategory={currentCategory}
-            setCurrentCategory={setCurrentCategory}
-            categoryCount={categoryCount}
-            categories={CATEGORY_CONFIG as Record<AI4MCategory | P4Category, CategoryConfig>}
-          />
-          <Button onClick={addMedia} disabled={isUploading}>
-            {isUploading ? 'Uploading...' : 'Save & proceed'}
-          </Button>
-          <ClassificationForm
-            anomalyId={anomalyId}
-            anomalyType={anomalyType}
-            missionNumber={missionNumber}
-            assetMentioned={[...uploads, ...(Array.isArray(assetMentioned) ? assetMentioned : [assetMentioned])]}
-            structureItemId={structureItemId}
+            setLineWidth={setLineWidth}
           />
+        </SciFiPanel>
+      </div>
+      {selectedImage && (
+        <div className="space-y-4">
+          <SciFiPanel className="p-4">
+            <AnnotationCanvas
+              canvasRef={canvasRef}
+              imageRef={imageRef}
+              isDrawing={isDrawing}
+              setIsDrawing={setIsDrawing}
+              currentTool={currentTool}
+              currentColor={CATEGORY_CONFIG[currentCategory as keyof typeof CATEGORY_CONFIG].color}
+              lineWidth={lineWidth}
+              drawings={drawings}
+              setDrawings={setDrawings}
+              currentDrawing={currentDrawing}
+              setCurrentDrawing={setCurrentDrawing}
+              currentCategory={currentCategory}
+            />
+          </SciFiPanel>
+          <SciFiPanel className="p-4">
+            <Legend
+              currentCategory={currentCategory}
+              setCurrentCategory={setCurrentCategory}
+              categoryCount={categoryCount}
+              categories={CATEGORY_CONFIG as Record<AI4MCategory | P4Category, CategoryConfig>}
+            />
+          </SciFiPanel>
+          <SciFiPanel className="p-4">
+            <Button onClick={addMedia} disabled={isUploading}>
+              {isUploading ? 'Uploading...' : 'Save & proceed'}
+            </Button>
+          </SciFiPanel>
+          <SciFiPanel className="p-4">
+            <ClassificationForm
+              anomalyId={anomalyId}
+              anomalyType={anomalyType}
+              missionNumber={missionNumber}
+              assetMentioned={[...uploads, ...(Array.isArray(assetMentioned) ? assetMentioned : [assetMentioned])]}
+              structureItemId={structureItemId}
+            />
+          </SciFiPanel>
         </div>
       )}
     </div>

diff --git a/components/Projects/(classifications)/PostForm.tsx b/components/Projects/(classifications)/PostForm.tsx
@@ -24,6 +24,7 @@ import { Button } from "antd";
 import Link from "next/link";
 // import UserAvatar, { UserAvatarNullUpload } from "@/components/Profile/Avatar";
 import { ClassificationFormProps } from "./FormConfigurations";
+import { SciFiButton } from "@/components/ui/styles/sci-fi/button";
 
 const ClassificationForm: React.FC<ClassificationFormProps> = ({
   anomalyType,
@@ -247,8 +248,8 @@ const ClassificationForm: React.FC<ClassificationFormProps> = ({
         currentConfig = inventoryData?.configuration || {};
         if (currentConfig.Uses) {
           currentConfig.Uses = Math.max(0, currentConfig.Uses - 1);
-        }
-      }
+        };
+      };
 
       if (inventoryItemId) {
         const { error: updateError } = await supabase
@@ -258,8 +259,8 @@ const ClassificationForm: React.FC<ClassificationFormProps> = ({
 
         if (updateError) {
           throw updateError;
-        }
-      }
+        };
+      };
 
       const { data: classificationData, error: classificationError } =
         await supabase
@@ -287,7 +288,7 @@ const ClassificationForm: React.FC<ClassificationFormProps> = ({
         setSelectedOptions({});
         setUploads([]);
         setPostSubmitted(true);
-      }
+      };
 
       await handleMissionComplete();
 
@@ -474,12 +475,12 @@ const ClassificationForm: React.FC<ClassificationFormProps> = ({
                     <span>Upload Media</span>
                   </label>
                   {isUploading && <span className="text-[#88C0D0]">Uploading...</span>}
-                  <button
+                  <SciFiButton
                     onClick={createPost}
                     className="py-2 px-4 bg-[#5FCBC3] text-[#2E3440] rounded-md hover:bg-[#85DDA2]"
                   >
                     Submit
-                  </button>
+                  </SciFiButton>
                 </div>
               </div>
             </>
@@ -511,12 +512,12 @@ const ClassificationForm: React.FC<ClassificationFormProps> = ({
                   <span>Upload Media</span>
                 </label>
                 {isUploading && <span className="text-[#88C0D0]">Uploading...</span>}
-                <button
+                <SciFiButton
                   onClick={createPost}
-                  className="py-2 px-4 bg-[#5FCBC3] text-[#2E3440] rounded-md hover:bg-[#85DDA2]"
+                  className="flex items-center justify-center gap-2"
                 >
                   Submit
-                </button>
+                </SciFiButton>
               </div>
             </div>
           )}

diff --git a/components/Projects/Auto/AI4Mars.tsx b/components/Projects/Auto/AI4Mars.tsx
@@ -306,7 +306,9 @@ export function AI4MWrapper() {
 
     return (
         <div className="space-y-8">
-            <PreferredTerrestrialClassifications onSelectAnomaly={setSelectedAnomaly} />
+            {!selectedAnomaly && (
+                <PreferredTerrestrialClassifications onSelectAnomaly={setSelectedAnomaly} />
+            )}
             {selectedAnomaly && 
                 <AiForMarsProject anomalyid={selectedAnomaly}
             />}

diff --git a/components/ui/styles/sci-fi/panel.tsx b/components/ui/styles/sci-fi/panel.tsx
@@ -2,7 +2,7 @@ interface SciFiPanelProps {
   children: React.ReactNode
   variant?: "primary" | "secondary"
   className?: string
-}
+};
 
 export function SciFiPanel({ children, variant = "primary", className = "" }: SciFiPanelProps) {
   return (
@@ -27,6 +27,5 @@ export function SciFiPanel({ children, variant = "primary", className = "" }: Sc
       {/* Glowing Effect */}
       <div className="absolute inset-0 bg-gradient-to-b from-cyan-500/5 to-transparent pointer-events-none" />
     </div>
-  )
-}
-
+  );
+};
diff --git a/content/Posts/PostSingle.tsx b/content/Posts/PostSingle.tsx
@@ -9,7 +9,7 @@ import { ThumbsUp, MessageSquare, Share2 } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
 import { CommentCard } from "../Comments/CommentSingle";
-import { AvatarGenerator } from "@/app/tests/page";
+import { AvatarGenerator } from '@/components/Account/Avatar';
 
 interface CommentProps {
   id: number;
@@ -135,7 +135,7 @@ export function PostCardSingle({
       fetchComments();
     } catch (error) {
       console.error("Error inserting comment:", error);
-    }
+    };
   };
 
   const handleSelectPreferredComment = async (commentId: number) => {
@@ -164,7 +164,7 @@ export function PostCardSingle({
       console.log("Preferred planet type updated:", planetType);
     } catch (error) {
       console.error("Error updating preferred comment:", error);
-    }
+    };
   };
 
   const [currentIndex, setCurrentIndex] = React.useState(0);
@@ -179,6 +179,25 @@ export function PostCardSingle({
     );
   };
 
+  // For sharing
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+
+  const toggleDropdown = () => {
+    setDropdownOpen((prev) => !prev);
+  };
+
+  const handleCopyLink = () => {
+    const link = `https://starsailors.space/posts/${classificationId}`;
+    navigator.clipboard.writeText(link).then(() => {
+      alert("Link copied to clipboard!");
+    });
+  };
+
+  const openPostInNewTab = () => {
+    window.open(`/posts/${classificationId}`, "_blank");
+  };
+
   return (
     <>
       <Card className="w-full max-w-2xl mx-auto my-8 bg-card text-card-foreground border-primary">
@@ -255,6 +274,38 @@ export function PostCardSingle({
               <MessageSquare className="mr-2" /> {comments.length}
             </Button>
           </div>
+          <div className="relative" ref={dropdownRef}>
+            <Button
+              onClick={toggleDropdown}
+              size="lg"
+              className="flex items-center gap-2 w-40 justify-center"
+            >
+              <Share2 className="mr-2" /> Share
+            </Button>
+            {dropdownOpen && (
+              <div className="absolute right-0 mt-2 w-72 bg-card border rounded shadow-md z-50 p-4">
+                <p className="text-sm mb-2">
+                  Share this post:{" "}
+                  <a
+                    href={`https://starsailors.space/posts/${classificationId}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-blue-600 underline"
+                  >
+                    starsailors.space/posts/{classificationId}
+                  </a>
+                </p>
+                <div className="flex gap-2">
+                  <Button onClick={handleCopyLink} className="flex-1">
+                    Copy Link
+                  </Button>
+                  <Button onClick={openPostInNewTab} className="flex-1">
+                    Open
+                  </Button>
+                </div>
+              </div>
+            )}
+          </div>
           {/* <Button 
             onClick={handleShare} 
             size="sm"