From 5fd794e9ebc2588f54956bca7c39b9aca24b1523 Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Sun, 6 Apr 2025 14:05:54 +0200
Subject: [PATCH 1/4] fix: course structure edition bugs

---
 .../DraggableElements/ActivityElement.tsx     | 14 +++--
 .../DraggableElements/ChapterElement.tsx      | 39 +++++++-------
 .../EditCourseStructure.tsx                   | 54 ++++++++-----------
 3 files changed, 55 insertions(+), 52 deletions(-)

diff --git a/apps/web/components/Dashboard/Pages/Course/EditCourseStructure/DraggableElements/ActivityElement.tsx b/apps/web/components/Dashboard/Pages/Course/EditCourseStructure/DraggableElements/ActivityElement.tsx
index e7f99809..de2b844e 100644
--- a/apps/web/components/Dashboard/Pages/Course/EditCourseStructure/DraggableElements/ActivityElement.tsx
+++ b/apps/web/components/Dashboard/Pages/Course/EditCourseStructure/DraggableElements/ActivityElement.tsx
@@ -127,17 +127,25 @@ function ActivityElement(props: ActivitiyElementProps) {
     >
       {(provided, snapshot) => (
         <div
-          className="flex flex-col sm:flex-row py-2 px-3 my-2 w-full rounded-md bg-gray-50 text-gray-500 hover:bg-gray-100 hover:scale-102 space-y-2 sm:space-y-0 sm:space-x-2 items-center shadow-md border-1 border-gray-200 nice-shadow transition-all duration-200"
+          className={`grid grid-cols-[auto_1fr_auto] gap-2 py-2 px-3 my-2 w-full rounded-md text-gray-500 
+            ${snapshot.isDragging 
+              ? 'nice-shadow bg-white ring-2 ring-blue-500/20 z-50 rotate-1 scale-[1.04]' 
+              : 'nice-shadow bg-gray-50 hover:bg-gray-100 '
+            }
+            items-center border-1 border-gray-200`}
           key={props.activity.id}
           {...provided.draggableProps}
           {...provided.dragHandleProps}
           ref={provided.innerRef}
+          style={{
+            ...provided.draggableProps.style
+          }}
         >
           {/*   Activity Type Icon  */}
           <ActivityTypeIndicator activityType={props.activity.activity_type} isMobile={isMobile} />
 
           {/*   Centered Activity Name  */}
-          <div className="grow items-center space-x-2 flex mx-auto justify-center">
+          <div className="flex items-center space-x-2 justify-center">
             {selectedActivity === props.activity.id ? (
               <div className="chapter-modification-zone text-[7px] text-gray-600 shadow-inner bg-gray-200/60 py-1 px-4 rounded-lg space-x-3">
                 <input
@@ -179,7 +187,7 @@ function ActivityElement(props: ActivitiyElementProps) {
           </div>
 
           {/*   Edit, View, Publish, and Delete Buttons  */}
-          <div className="flex flex-wrap justify-center sm:justify-end gap-2 w-full sm:w-auto">
+          <div className="flex items-center gap-2 justify-end">
             <ActivityElementOptions activity={props.activity} isMobile={isMobile} />
             {/*   Publishing  */}
             <button
diff --git a/apps/web/components/Dashboard/Pages/Course/EditCourseStructure/DraggableElements/ChapterElement.tsx b/apps/web/components/Dashboard/Pages/Course/EditCourseStructure/DraggableElements/ChapterElement.tsx
index c9f06526..4cbe84e6 100644
--- a/apps/web/components/Dashboard/Pages/Course/EditCourseStructure/DraggableElements/ChapterElement.tsx
+++ b/apps/web/components/Dashboard/Pages/Course/EditCourseStructure/DraggableElements/ChapterElement.tsx
@@ -72,7 +72,9 @@ function ChapterElement(props: ChapterElementProps) {
     >
       {(provided, snapshot) => (
         <div
-          className="mx-2 sm:mx-4 md:mx-6 lg:mx-10 bg-white rounded-xl nice-shadow px-3 sm:px-4 md:px-6 pt-4 sm:pt-6"
+          className={`mx-2 sm:mx-4 md:mx-6 lg:mx-10 bg-white rounded-xl nice-shadow px-3 sm:px-4 md:px-6 pt-4 sm:pt-6 ${
+            snapshot.isDragging ? 'shadow-xl ring-2 ring-blue-500/20 rotate-1' : ''
+          }`}
           key={props.chapter.chapter_uuid}
           {...provided.draggableProps}
           {...provided.dragHandleProps}
@@ -149,23 +151,24 @@ function ChapterElement(props: ChapterElementProps) {
             droppableId={props.chapter.chapter_uuid}
             type="activity"
           >
-            {(provided) => (
-              <div {...provided.droppableProps} ref={provided.innerRef}>
-                <div className="flex flex-col min-h-[60px]">
-                  {activities.map((activity: any, index: any) => {
-                    return (
-                      <div key={activity.activity_uuid} className="flex items-center ">
-                        <ActivityElement
-                          orgslug={props.orgslug}
-                          course_uuid={props.course_uuid}
-                          activityIndex={index}
-                          activity={activity}
-                        />
-                      </div>
-                    )
-                  })}
-                  {provided.placeholder}
-                </div>
+            {(provided, snapshot) => (
+              <div 
+                {...provided.droppableProps} 
+                ref={provided.innerRef}
+                className={`min-h-[60px] rounded-lg transition-colors duration-75 ${
+                  snapshot.isDraggingOver ? 'bg-blue-50/50' : ''
+                }`}
+              >
+                {activities.map((activity: any, index: any) => (
+                  <ActivityElement
+                    key={activity.activity_uuid}
+                    orgslug={props.orgslug}
+                    course_uuid={props.course_uuid}
+                    activityIndex={index}
+                    activity={activity}
+                  />
+                ))}
+                {provided.placeholder}
               </div>
             )}
           </Droppable>
diff --git a/apps/web/components/Dashboard/Pages/Course/EditCourseStructure/EditCourseStructure.tsx b/apps/web/components/Dashboard/Pages/Course/EditCourseStructure/EditCourseStructure.tsx
index 5c5fbc35..ed222c12 100644
--- a/apps/web/components/Dashboard/Pages/Course/EditCourseStructure/EditCourseStructure.tsx
+++ b/apps/web/components/Dashboard/Pages/Course/EditCourseStructure/EditCourseStructure.tsx
@@ -75,43 +75,35 @@ const EditCourseStructure = (props: EditCourseStructureProps) => {
       destination.index === source.index
     )
       return
+
+    const newCourseStructure = { ...course_structure }
+    
     if (type === 'chapter') {
-      const newChapterOrder = Array.from(course_structure.chapters)
-      newChapterOrder.splice(source.index, 1)
-      newChapterOrder.splice(
-        destination.index,
-        0,
-        course_structure.chapters[source.index]
-      )
-      dispatchCourse({
-        type: 'setCourseStructure',
-        payload: { ...course_structure, chapters: newChapterOrder },
-      })
-      dispatchCourse({ type: 'setIsNotSaved' })
+      const newChapterOrder = Array.from(newCourseStructure.chapters)
+      const [movedChapter] = newChapterOrder.splice(source.index, 1)
+      newChapterOrder.splice(destination.index, 0, movedChapter)
+      newCourseStructure.chapters = newChapterOrder
     }
+
     if (type === 'activity') {
-      const newChapterOrder = Array.from(course_structure.chapters)
+      const newChapterOrder = Array.from(newCourseStructure.chapters)
       const sourceChapter = newChapterOrder.find(
         (chapter: any) => chapter.chapter_uuid === source.droppableId
       ) as any
       const destinationChapter = newChapterOrder.find(
         (chapter: any) => chapter.chapter_uuid === destination.droppableId
-      )
-        ? newChapterOrder.find(
-            (chapter: any) => chapter.chapter_uuid === destination.droppableId
-          )
-        : sourceChapter
-      const activity = sourceChapter.activities.find(
-        (activity: any) => activity.activity_uuid === draggableId
-      )
-      sourceChapter.activities.splice(source.index, 1)
-      destinationChapter.activities.splice(destination.index, 0, activity)
-      dispatchCourse({
-        type: 'setCourseStructure',
-        payload: { ...course_structure, chapters: newChapterOrder },
-      })
-      dispatchCourse({ type: 'setIsNotSaved' })
+      ) ?? sourceChapter
+
+      const [movedActivity] = sourceChapter.activities.splice(source.index, 1)
+      destinationChapter.activities.splice(destination.index, 0, movedActivity)
+      newCourseStructure.chapters = newChapterOrder
     }
+
+    dispatchCourse({
+      type: 'setCourseStructure',
+      payload: newCourseStructure,
+    })
+    dispatchCourse({ type: 'setIsNotSaved' })
   }
 
   useEffect(() => {
@@ -125,10 +117,10 @@ const EditCourseStructure = (props: EditCourseStructureProps) => {
       <div className="h-6"></div>
       {winReady ? (
         <DragDropContext onDragEnd={updateStructure}>
-          <Droppable type="chapter" droppableId="chapters">
-            {(provided) => (
+          <Droppable type="chapter" droppableId="chapters" direction="vertical">
+            {(provided, snapshot) => (
               <div
-                className="space-y-4"
+                className={`space-y-4 ${snapshot.isDraggingOver ? 'bg-gray-50/50' : ''}`}
                 {...provided.droppableProps}
                 ref={provided.innerRef}
               >

From 298414d57fb335cf03632ed607984952a9ea7fa9 Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Sun, 6 Apr 2025 14:35:58 +0200
Subject: [PATCH 2/4] feat: better video file uploader

---
 .../Extensions/Video/VideoBlockComponent.tsx  | 529 ++++++++++++++++--
 1 file changed, 469 insertions(+), 60 deletions(-)

diff --git a/apps/web/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx b/apps/web/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx
index 7e1d9a91..ef07af8f 100644
--- a/apps/web/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx
+++ b/apps/web/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx
@@ -1,85 +1,494 @@
 import { NodeViewWrapper } from '@tiptap/react'
-import { Video } from 'lucide-react'
-import React, { useEffect } from 'react'
-import styled from 'styled-components'
+import { 
+  Loader2, Video, Upload, X, HelpCircle, 
+  Maximize2, Minimize2, ArrowLeftRight, 
+  CheckCircle2, AlertCircle
+} from 'lucide-react'
+import React from 'react'
 import { uploadNewVideoFile } from '../../../../../services/blocks/Video/video'
 import { getActivityBlockMediaDirectory } from '@services/media/media'
 import { useOrg } from '@components/Contexts/OrgContext'
 import { useCourse } from '@components/Contexts/CourseContext'
 import { useEditorProvider } from '@components/Contexts/Editor/EditorContext'
 import { useLHSession } from '@components/Contexts/LHSessionContext'
-import { FileUploadBlock, FileUploadBlockButton, FileUploadBlockInput } from '../../FileUploadBlock'
-import { constructAcceptValue } from '@/lib/constants';
+import { constructAcceptValue } from '@/lib/constants'
+import { cn } from '@/lib/utils'
+import { motion, AnimatePresence } from 'framer-motion'
+import styled from 'styled-components'
 
 const SUPPORTED_FILES = constructAcceptValue(['webm', 'mp4'])
 
-function VideoBlockComponents(props: any) {
-  const org = useOrg() as any
-  const course = useCourse() as any
-  const editorState = useEditorProvider() as any
-  const isEditable = editorState.isEditable
-  const [video, setVideo] = React.useState(null)
-  const session = useLHSession() as any
-  const access_token = session?.data?.tokens?.access_token;
+const VIDEO_SIZES = {
+  small: { width: 480, label: 'Small' },
+  medium: { width: 720, label: 'Medium' },
+  large: { width: 960, label: 'Large' },
+  full: { width: '100%', label: 'Full Width' }
+} as const
+
+type VideoSize = keyof typeof VIDEO_SIZES
+
+// Helper function to determine video size from width
+const getVideoSizeFromWidth = (width: number | string | undefined): VideoSize => {
+  if (!width) return 'medium'
+  if (width === '100%') return 'full'
+  
+  const numWidth = typeof width === 'string' ? parseInt(width) : width
+  
+  if (numWidth <= VIDEO_SIZES.small.width) return 'small'
+  if (numWidth <= VIDEO_SIZES.medium.width) return 'medium'
+  if (numWidth <= VIDEO_SIZES.large.width) return 'large'
+  return 'full'
+}
+
+const VideoWrapper = styled.div`
+  transition: all 0.2s ease;
+  background-color: #f9f9f9;
+  border: 1px solid #eaeaea;
+`
+
+const VideoContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+`
+
+const UploadZone = styled(motion.div)<{ isDragging: boolean }>`
+  border: 2px dashed ${props => props.isDragging ? '#3b82f6' : '#e5e7eb'};
+  background: ${props => props.isDragging ? 'rgba(59, 130, 246, 0.05)' : '#ffffff'};
+  transition: all 0.2s ease;
+  border-radius: 0.75rem;
+  padding: 2rem;
+  text-align: center;
+  cursor: pointer;
+
+  &:hover {
+    border-color: #3b82f6;
+    background: rgba(59, 130, 246, 0.05);
+  }
+`
+
+const SizeButton = styled(motion.button)<{ isActive: boolean }>`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  color: ${props => props.isActive ? '#ffffff' : '#4b5563'};
+  background: ${props => props.isActive ? '#3b82f6' : 'transparent'};
+  border: 1px solid ${props => props.isActive ? '#3b82f6' : '#e5e7eb'};
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: ${props => props.isActive ? '#2563eb' : '#f9fafb'};
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`
+
+interface Organization {
+  org_uuid: string
+}
+
+interface Course {
+  courseStructure: {
+    course_uuid: string
+  }
+}
+
+interface EditorState {
+  isEditable: boolean
+}
+
+interface Session {
+  data?: {
+    tokens?: {
+      access_token?: string
+    }
+  }
+}
+
+// Legacy interface for backward compatibility
+interface LegacyVideoBlockObject {
+  block_uuid: string
+  content: {
+    file_id: string
+    file_format: string
+  }
+  size?: {
+    width?: number | string
+  }
+}
+
+interface VideoBlockObject {
+  block_uuid: string
+  content: {
+    file_id: string
+    file_format: string
+  }
+  size: VideoSize
+}
+
+interface VideoBlockProps {
+  node: {
+    attrs: {
+      blockObject: VideoBlockObject | LegacyVideoBlockObject | null
+    }
+  }
+  extension: {
+    options: {
+      activity: {
+        activity_uuid: string
+      }
+    }
+  }
+  updateAttributes: (attrs: { blockObject: VideoBlockObject | null }) => void
+}
+
+function VideoBlockComponent({ node, extension, updateAttributes }: VideoBlockProps) {
+  const org = useOrg() as Organization | null
+  const course = useCourse() as Course | null
+  const editorState = useEditorProvider() as EditorState
+  const session = useLHSession() as Session
+  const fileInputRef = React.useRef<HTMLInputElement>(null)
+  const uploadZoneRef = React.useRef<HTMLDivElement>(null)
+  
+  // Convert legacy block object to new format
+  const convertLegacyBlock = React.useCallback((block: LegacyVideoBlockObject): VideoBlockObject => {
+    const videoSize = getVideoSizeFromWidth(block.size?.width)
+    return {
+      ...block,
+      size: videoSize
+    }
+  }, [])
+
+  const initialBlockObject = React.useMemo(() => {
+    if (!node.attrs.blockObject) return null
+    if ('size' in node.attrs.blockObject && typeof node.attrs.blockObject.size === 'string') {
+      return node.attrs.blockObject as VideoBlockObject
+    }
+    return convertLegacyBlock(node.attrs.blockObject as LegacyVideoBlockObject)
+  }, [node.attrs.blockObject, convertLegacyBlock])
+
+  const [video, setVideo] = React.useState<File | null>(null)
   const [isLoading, setIsLoading] = React.useState(false)
-  const [blockObject, setblockObject] = React.useState(
-    props.node.attrs.blockObject
-  )
-  const fileId = blockObject
-    ? `${blockObject.content.file_id}.${blockObject.content.file_format}`
-    : null
+  const [error, setError] = React.useState<string | null>(null)
+  const [isDragging, setIsDragging] = React.useState(false)
+  const [uploadProgress, setUploadProgress] = React.useState(0)
+  const [blockObject, setBlockObject] = React.useState<VideoBlockObject | null>(initialBlockObject)
+  const [selectedSize, setSelectedSize] = React.useState<VideoSize>(initialBlockObject?.size || 'medium')
 
-  const handleVideoChange = (event: React.ChangeEvent<any>) => {
-    setVideo(event.target.files[0])
+  // Update block object when size changes
+  React.useEffect(() => {
+    if (blockObject && blockObject.size !== selectedSize) {
+      const newBlockObject = {
+        ...blockObject,
+        size: selectedSize
+      }
+      setBlockObject(newBlockObject)
+      updateAttributes({ blockObject: newBlockObject })
+    }
+  }, [selectedSize])
+
+  const isEditable = editorState?.isEditable
+  const access_token = session?.data?.tokens?.access_token
+  const fileId = blockObject ? `${blockObject.content.file_id}.${blockObject.content.file_format}` : null
+
+  const handleVideoChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0]
+    if (file) {
+      setVideo(file)
+      setError(null)
+      handleUpload(file)
+    }
   }
 
-  const handleSubmit = async (e: any) => {
+  const handleDragEnter = (e: React.DragEvent) => {
     e.preventDefault()
-    setIsLoading(true)
-    let object = await uploadNewVideoFile(
-      video,
-      props.extension.options.activity.activity_uuid, access_token
-    )
-    setIsLoading(false)
-    setblockObject(object)
-    props.updateAttributes({
-      blockObject: object,
-    })
+    e.stopPropagation()
+    setIsDragging(true)
   }
 
-  useEffect(() => { }, [course, org])
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    if (e.currentTarget === uploadZoneRef.current) {
+      setIsDragging(false)
+    }
+  }
 
-  console.log(blockObject)
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setIsDragging(false)
 
+    const file = e.dataTransfer.files[0]
+    if (file && SUPPORTED_FILES.split(',').some(format => file.name.toLowerCase().endsWith(format.trim()))) {
+      setVideo(file)
+      setError(null)
+      handleUpload(file)
+    } else {
+      setError('Please upload a supported video format (MP4 or WebM)')
+    }
+  }
+
+  const handleUpload = async (file: File) => {
+    if (!access_token) return
+
+    try {
+      setIsLoading(true)
+      setError(null)
+      setUploadProgress(0)
+
+      // Simulate upload progress
+      const progressInterval = setInterval(() => {
+        setUploadProgress(prev => Math.min(prev + 10, 90))
+      }, 200)
+
+      const object = await uploadNewVideoFile(
+        file,
+        extension.options.activity.activity_uuid,
+        access_token
+      )
+
+      clearInterval(progressInterval)
+      setUploadProgress(100)
+
+      const newBlockObject = {
+        ...object,
+        size: selectedSize
+      }
+      setBlockObject(newBlockObject)
+      updateAttributes({ blockObject: newBlockObject })
+      setVideo(null)
+
+      // Reset progress after a delay
+      setTimeout(() => {
+        setUploadProgress(0)
+      }, 1000)
+    } catch (err) {
+      setError('Failed to upload video. Please try again.')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleRemove = () => {
+    setBlockObject(null)
+    updateAttributes({ blockObject: null })
+    setVideo(null)
+    setError(null)
+    setUploadProgress(0)
+  }
+
+  const handleSizeChange = (size: VideoSize) => {
+    setSelectedSize(size)
+  }
+
+  const videoUrl = blockObject && org?.org_uuid && course?.courseStructure.course_uuid ? getActivityBlockMediaDirectory(
+    org.org_uuid,
+    course.courseStructure.course_uuid,
+    extension.options.activity.activity_uuid,
+    blockObject.block_uuid,
+    fileId || '',
+    'videoBlock'
+  ) : null
+
+  // If we're in preview mode and have a video, show only the video player
+  if (!isEditable && blockObject && videoUrl) {
+    const width = VIDEO_SIZES[blockObject.size].width
+    return (
+      <NodeViewWrapper className="block-video w-full">
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.3 }}
+          className="w-full flex justify-center"
+        >
+          <div
+            style={{ 
+              maxWidth: typeof width === 'number' ? width : '100%',
+              width: '100%'
+            }}
+          >
+            <video
+              controls
+              className="w-full aspect-video object-contain rounded-lg shadow-sm"
+              src={videoUrl}
+            />
+          </div>
+        </motion.div>
+      </NodeViewWrapper>
+    )
+  }
+
+  // If we're in preview mode but don't have a video, show nothing
+  if (!isEditable && (!blockObject || !videoUrl)) {
+    return null
+  }
+
+  // Show the full editor UI when in edit mode
   return (
-    <NodeViewWrapper className="block-video">    
-      <FileUploadBlock isEditable={isEditable} isLoading={isLoading} isEmpty={!blockObject} Icon={Video}>
-        <FileUploadBlockInput onChange={handleVideoChange} accept={SUPPORTED_FILES} />
-        <FileUploadBlockButton onClick={handleSubmit} disabled={!video}/>
-      </FileUploadBlock>
+    <NodeViewWrapper className="block-video w-full">
+      <motion.div
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.3 }}
+      >
+        <VideoWrapper className="flex flex-col space-y-4 rounded-lg py-6 px-5">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-2 text-sm text-zinc-500">
+              <Video size={16} />
+              <span className="font-medium">Video Block</span>
+            </div>
+            {blockObject && (
+              <motion.button
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+                onClick={handleRemove}
+                className="text-zinc-400 hover:text-red-500 transition-colors"
+              >
+                <X size={16} />
+              </motion.button>
+            )}
+          </div>
 
-      {blockObject && (
-        <BlockVideo>
-          <video
-            controls
-            className="rounded-lg shadow-sm h-96 w-full object-scale-down bg-black"
-            src={`${getActivityBlockMediaDirectory(
-              org?.org_uuid,
-              course?.courseStructure.course_uuid,
-              props.extension.options.activity.activity_uuid,
-              blockObject.block_uuid,
-              blockObject ? fileId : ' ',
-              'videoBlock'
-            )}`}
-          ></video>
-        </BlockVideo>
-      )}
+          {(!blockObject || !videoUrl) && (
+            <motion.div
+              initial={{ opacity: 0, height: 0 }}
+              animate={{ opacity: 1, height: 'auto' }}
+              transition={{ duration: 0.2 }}
+              className="space-y-4"
+            >
+              <input
+                ref={fileInputRef}
+                type="file"
+                onChange={handleVideoChange}
+                accept={SUPPORTED_FILES}
+                className="hidden"
+              />
+
+              <UploadZone
+                ref={uploadZoneRef}
+                isDragging={isDragging}
+                onDragEnter={handleDragEnter}
+                onDragOver={handleDragEnter}
+                onDragLeave={handleDragLeave}
+                onDrop={handleDrop}
+                onClick={() => fileInputRef.current?.click()}
+                className="relative"
+              >
+                <AnimatePresence>
+                  {isLoading ? (
+                    <motion.div
+                      initial={{ opacity: 0 }}
+                      animate={{ opacity: 1 }}
+                      exit={{ opacity: 0 }}
+                      className="space-y-3"
+                    >
+                      <Loader2 className="w-8 h-8 animate-spin mx-auto text-blue-500" />
+                      <div className="text-sm text-zinc-600">Uploading video... {uploadProgress}%</div>
+                      <div className="w-48 h-1 bg-gray-200 rounded-full mx-auto overflow-hidden">
+                        <motion.div
+                          className="h-full bg-blue-500 rounded-full"
+                          initial={{ width: 0 }}
+                          animate={{ width: `${uploadProgress}%` }}
+                          transition={{ duration: 0.2 }}
+                        />
+                      </div>
+                    </motion.div>
+                  ) : (
+                    <motion.div
+                      initial={{ opacity: 0 }}
+                      animate={{ opacity: 1 }}
+                      exit={{ opacity: 0 }}
+                      className="space-y-3"
+                    >
+                      <Upload className="w-8 h-8 mx-auto text-blue-500" />
+                      <div>
+                        <div className="text-sm font-medium text-zinc-700">
+                          Drop your video here or click to browse
+                        </div>
+                        <div className="text-xs text-zinc-500 mt-1">
+                          Supports MP4 and WebM formats
+                        </div>
+                      </div>
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+              </UploadZone>
+
+              {error && (
+                <div className="flex items-center gap-2 text-sm text-red-500 font-medium bg-red-50 rounded-lg p-3">
+                  <AlertCircle size={16} />
+                  {error}
+                </div>
+              )}
+            </motion.div>
+          )}
+
+          {blockObject && videoUrl && (
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ duration: 0.3 }}
+              className="space-y-4"
+            >
+              <div className="flex items-center gap-2 flex-wrap">
+                <div className="text-sm text-zinc-500 font-medium flex items-center gap-1">
+                  <ArrowLeftRight size={14} />
+                  Video Size:
+                </div>
+                {(Object.keys(VIDEO_SIZES) as VideoSize[]).map((size) => (
+                  <SizeButton
+                    key={size}
+                    isActive={selectedSize === size}
+                    onClick={() => handleSizeChange(size)}
+                    whileHover={{ scale: 1.02 }}
+                    whileTap={{ scale: 0.98 }}
+                  >
+                    {size === selectedSize && <CheckCircle2 size={14} />}
+                    {VIDEO_SIZES[size].label}
+                  </SizeButton>
+                ))}
+              </div>
+
+              <VideoContainer>
+                <div
+                  style={{ 
+                    maxWidth: typeof VIDEO_SIZES[selectedSize].width === 'number' 
+                      ? VIDEO_SIZES[selectedSize].width 
+                      : '100%',
+                    width: '100%'
+                  }}
+                >
+                  <div className="relative rounded-lg overflow-hidden bg-black/5">
+                    {isLoading && (
+                      <div className="absolute inset-0 flex items-center justify-center bg-black/10 backdrop-blur-sm">
+                        <Loader2 className="w-8 h-8 animate-spin text-white" />
+                      </div>
+                    )}
+                    <video
+                      controls
+                      className={cn(
+                        "w-full aspect-video object-contain bg-black/95 shadow-sm transition-all duration-200",
+                        isLoading && "opacity-50 blur-sm"
+                      )}
+                      src={videoUrl}
+                    />
+                  </div>
+                </div>
+              </VideoContainer>
+            </motion.div>
+          )}
+        </VideoWrapper>
+      </motion.div>
     </NodeViewWrapper>
   )
 }
 
-const BlockVideo = styled.div`
-  display: flex;
-  flex-direction: column;
-`
-export default VideoBlockComponents
+export default VideoBlockComponent

From 3bc6703f33b1dfdeab75fe36eada074d1b0cd0c1 Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Sun, 6 Apr 2025 14:58:09 +0200
Subject: [PATCH 3/4] feat: enhance ToolbarButtons with improved heading
 selection and styling

---
 .../Extensions/Video/VideoBlockComponent.tsx  | 24 ++++++----
 .../Objects/Editor/Toolbar/ToolbarButtons.tsx | 44 +++++++++++++++----
 2 files changed, 52 insertions(+), 16 deletions(-)

diff --git a/apps/web/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx b/apps/web/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx
index ef07af8f..ad3603c3 100644
--- a/apps/web/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx
+++ b/apps/web/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx
@@ -1,4 +1,5 @@
-import { NodeViewWrapper } from '@tiptap/react'
+import { NodeViewProps, NodeViewWrapper } from '@tiptap/react'
+import { Node } from '@tiptap/core'
 import { 
   Loader2, Video, Upload, X, HelpCircle, 
   Maximize2, Minimize2, ArrowLeftRight, 
@@ -133,23 +134,30 @@ interface VideoBlockObject {
   size: VideoSize
 }
 
-interface VideoBlockProps {
-  node: {
-    attrs: {
-      blockObject: VideoBlockObject | LegacyVideoBlockObject | null
+interface VideoBlockAttrs {
+  blockObject: VideoBlockObject | LegacyVideoBlockObject | null
+}
+
+interface VideoBlockExtension {
+  options: {
+    activity: {
+      activity_uuid: string
     }
   }
-  extension: {
+}
+
+interface ExtendedNodeViewProps extends Omit<NodeViewProps, 'extension'> {
+  extension: Node & {
     options: {
       activity: {
         activity_uuid: string
       }
     }
   }
-  updateAttributes: (attrs: { blockObject: VideoBlockObject | null }) => void
 }
 
-function VideoBlockComponent({ node, extension, updateAttributes }: VideoBlockProps) {
+function VideoBlockComponent(props: ExtendedNodeViewProps) {
+  const { node, extension, updateAttributes } = props
   const org = useOrg() as Organization | null
   const course = useCourse() as Course | null
   const editorState = useEditorProvider() as EditorState
diff --git a/apps/web/components/Objects/Editor/Toolbar/ToolbarButtons.tsx b/apps/web/components/Objects/Editor/Toolbar/ToolbarButtons.tsx
index d79a547b..320d36b7 100644
--- a/apps/web/components/Objects/Editor/Toolbar/ToolbarButtons.tsx
+++ b/apps/web/components/Objects/Editor/Toolbar/ToolbarButtons.tsx
@@ -116,14 +116,24 @@ export const ToolbarButtons = ({ editor, props }: any) => {
         <ListBulletIcon />
       </ToolBtn>
       <ToolSelect
-        onChange={(e) =>
-          editor
-            .chain()
-            .focus()
-            .toggleHeading({ level: parseInt(e.target.value) })
-            .run()
+        value={
+          editor.isActive('heading', { level: 1 }) ? "1" :
+          editor.isActive('heading', { level: 2 }) ? "2" :
+          editor.isActive('heading', { level: 3 }) ? "3" :
+          editor.isActive('heading', { level: 4 }) ? "4" :
+          editor.isActive('heading', { level: 5 }) ? "5" :
+          editor.isActive('heading', { level: 6 }) ? "6" : "0"
         }
+        onChange={(e) => {
+          const value = e.target.value;
+          if (value === "0") {
+            editor.chain().focus().setParagraph().run();
+          } else {
+            editor.chain().focus().toggleHeading({ level: parseInt(value) }).run();
+          }
+        }}
       >
+        <option value="0">Paragraph</option>
         <option value="1">Heading 1</option>
         <option value="2">Heading 2</option>
         <option value="3">Heading 3</option>
@@ -351,13 +361,31 @@ const ToolSelect = styled.select`
   display: flex;
   background: rgba(217, 217, 217, 0.185);
   border-radius: 6px;
-  width: 100px;
+  width: 120px;
   border: none;
   height: 25px;
-  padding: 5px;
+  padding: 2px 5px;
   font-size: 11px;
   font-family: 'DM Sans';
   margin-right: 5px;
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right 5px center;
+  background-size: 12px;
+  padding-right: 20px;
+
+  &:hover {
+    background-color: rgba(217, 217, 217, 0.3);
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(217, 217, 217, 0.5);
+  }
 `
 
 const TableMenuWrapper = styled.div`

From 12e1d79504efad9103ce408e8f3e054684a8dbb5 Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Sun, 6 Apr 2025 22:13:26 +0200
Subject: [PATCH 4/4] feat: introduce search page + improvements to the search
 experience

---
 apps/api/src/services/search/search.py        |   5 +
 .../orgs/[orgslug]/(withmenu)/search/page.tsx | 434 ++++++++++++++++++
 .../components/Objects/Search/SearchBar.tsx   |  72 +--
 apps/web/styles/globals.css                   |   4 +
 4 files changed, 479 insertions(+), 36 deletions(-)
 create mode 100644 apps/web/app/orgs/[orgslug]/(withmenu)/search/page.tsx

diff --git a/apps/api/src/services/search/search.py b/apps/api/src/services/search/search.py
index e9077549..e3fda087 100644
--- a/apps/api/src/services/search/search.py
+++ b/apps/api/src/services/search/search.py
@@ -8,6 +8,7 @@ from src.db.courses.courses import Course, CourseRead
 from src.db.collections import Collection, CollectionRead
 from src.db.collections_courses import CollectionCourse
 from src.db.organizations import Organization
+from src.db.user_organizations import UserOrganization
 from src.services.courses.courses import search_courses
 
 T = TypeVar('T')
@@ -60,6 +61,10 @@ async def search_across_org(
     # Search users
     users_query = (
         select(User)
+        .join(UserOrganization, and_(
+            UserOrganization.user_id == User.id,
+            UserOrganization.org_id == org.id
+        ))
         .where(
             or_(
                 text('LOWER("user".username) LIKE LOWER(:pattern) OR ' +
diff --git a/apps/web/app/orgs/[orgslug]/(withmenu)/search/page.tsx b/apps/web/app/orgs/[orgslug]/(withmenu)/search/page.tsx
new file mode 100644
index 00000000..29dc8ba0
--- /dev/null
+++ b/apps/web/app/orgs/[orgslug]/(withmenu)/search/page.tsx
@@ -0,0 +1,434 @@
+'use client'; 
+
+import React, { useState, useEffect } from 'react';
+import { useSearchParams, useRouter } from 'next/navigation';
+import { searchOrgContent } from '@services/search/search';
+import { useLHSession } from '@components/Contexts/LHSessionContext';
+import { useOrg } from '@components/Contexts/OrgContext';
+import { Book, GraduationCap, Users, Search, Filter, X } from 'lucide-react';
+import Link from 'next/link';
+import { getCourseThumbnailMediaDirectory, getUserAvatarMediaDirectory } from '@services/media/media';
+import { getUriWithOrg } from '@services/config/config';
+import { removeCoursePrefix } from '@components/Objects/Thumbnails/CourseThumbnail';
+import UserAvatar from '@components/Objects/UserAvatar';
+
+// Types from SearchBar component
+interface User {
+  username: string;
+  first_name: string;
+  last_name: string;
+  email: string;
+  avatar_image: string;
+  bio: string;
+  details: Record<string, any>;
+  profile: Record<string, any>;
+  id: number;
+  user_uuid: string;
+}
+
+interface Author {
+  user: User;
+  authorship: string;
+  authorship_status: string;
+  creation_date: string;
+  update_date: string;
+}
+
+interface Course {
+  name: string;
+  description: string;
+  about: string;
+  learnings: string;
+  tags: string;
+  thumbnail_image: string;
+  public: boolean;
+  open_to_contributors: boolean;
+  id: number;
+  org_id: number;
+  authors: Author[];
+  course_uuid: string;
+  creation_date: string;
+  update_date: string;
+}
+
+interface Collection {
+  name: string;
+  public: boolean;
+  description: string;
+  id: number;
+  courses: string[];
+  collection_uuid: string;
+  creation_date: string;
+  update_date: string;
+}
+
+interface SearchResults {
+  courses: Course[];
+  collections: Collection[];
+  users: User[];
+  total_courses: number;
+  total_collections: number;
+  total_users: number;
+}
+
+type ContentType = 'all' | 'courses' | 'collections' | 'users';
+
+function SearchPage() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const session = useLHSession() as any;
+  const org = useOrg() as any;
+  
+  // Search state
+  const [searchResults, setSearchResults] = useState<SearchResults>({
+    courses: [],
+    collections: [],
+    users: [],
+    total_courses: 0,
+    total_collections: 0,
+    total_users: 0
+  });
+  const [isLoading, setIsLoading] = useState(false);
+  const [searchQuery, setSearchQuery] = useState(searchParams.get('q') || '');
+  
+  // URL parameters
+  const query = searchParams.get('q') || '';
+  const page = parseInt(searchParams.get('page') || '1');
+  const type = (searchParams.get('type') as ContentType) || 'all';
+  const perPage = 9;
+
+  // Filter state
+  const [selectedType, setSelectedType] = useState<ContentType>(type);
+
+  const updateSearchParams = (updates: Record<string, string>) => {
+    const current = new URLSearchParams(Array.from(searchParams.entries()));
+    Object.entries(updates).forEach(([key, value]) => {
+      if (value) {
+        current.set(key, value);
+      } else {
+        current.delete(key);
+      }
+    });
+    router.push(`?${current.toString()}`);
+  };
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (searchQuery.trim()) {
+      updateSearchParams({ q: searchQuery, page: '1' });
+    }
+  };
+
+  useEffect(() => {
+    setSearchQuery(query);
+  }, [query]);
+
+  useEffect(() => {
+    const fetchResults = async () => {
+      if (!query.trim()) {
+        setSearchResults({
+          courses: [],
+          collections: [],
+          users: [],
+          total_courses: 0,
+          total_collections: 0,
+          total_users: 0
+        });
+        return;
+      }
+
+      setIsLoading(true);
+      try {
+        const response = await searchOrgContent(
+          org?.slug,
+          query,
+          page,
+          perPage,
+          selectedType === 'all' ? null : selectedType,
+          session?.data?.tokens?.access_token
+        );
+
+        // Log the response to see what we're getting
+        console.log('Search API Response:', response);
+
+        // The response data is directly what we need
+        const results = response.data;
+        
+        setSearchResults({
+          courses: results.courses || [],
+          collections: results.collections || [],
+          users: results.users || [],
+          total_courses: results.courses?.length || 0,
+          total_collections: results.collections?.length || 0,
+          total_users: results.users?.length || 0
+        });
+      } catch (error) {
+        console.error('Error searching content:', error);
+        setSearchResults({
+          courses: [],
+          collections: [],
+          users: [],
+          total_courses: 0,
+          total_collections: 0,
+          total_users: 0
+        });
+      }
+      setIsLoading(false);
+    };
+
+    fetchResults();
+  }, [query, page, selectedType, org?.slug, session?.data?.tokens?.access_token]);
+
+  const totalResults = searchResults.total_courses + searchResults.total_collections + searchResults.total_users;
+  const totalPages = Math.ceil(totalResults / perPage);
+
+  const FilterButton = ({ type, count, icon: Icon }: { type: ContentType; count: number; icon: any }) => (
+    <button
+      onClick={() => {
+        setSelectedType(type);
+        updateSearchParams({ type: type === 'all' ? '' : type, page: '1' });
+      }}
+      className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm transition-colors ${
+        selectedType === type
+          ? 'bg-black/10 text-black/80 font-medium'
+          : 'hover:bg-black/5 text-black/60'
+      }`}
+    >
+      <Icon size={16} />
+      <span>{type.charAt(0).toUpperCase() + type.slice(1)}</span>
+      <span className="text-black/40">({count})</span>
+    </button>
+  );
+
+  const Pagination = () => {
+    if (totalPages <= 1) return null;
+
+    return (
+      <div className="flex justify-center gap-2 mt-8">
+        {Array.from({ length: totalPages }, (_, i) => i + 1).map((pageNum) => (
+          <button
+            key={pageNum}
+            onClick={() => updateSearchParams({ page: pageNum.toString() })}
+            className={`w-8 h-8 rounded-lg text-sm transition-colors ${
+              page === pageNum
+                ? 'bg-black/10 text-black/80 font-medium'
+                : 'hover:bg-black/5 text-black/60'
+            }`}
+          >
+            {pageNum}
+          </button>
+        ))}
+      </div>
+    );
+  };
+
+  const LoadingState = () => (
+    <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+      {[1, 2, 3, 4, 5, 6].map((i) => (
+        <div key={i} className="bg-white rounded-xl nice-shadow p-4 animate-pulse">
+          <div className="w-full h-32 bg-black/5 rounded-lg mb-4" />
+          <div className="space-y-2">
+            <div className="w-3/4 h-4 bg-black/5 rounded" />
+            <div className="w-1/2 h-3 bg-black/5 rounded" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+
+  const EmptyState = () => (
+    <div className="flex flex-col items-center justify-center py-16 text-center">
+      <div className="mb-4 p-4 bg-black/5 rounded-full">
+        <Search className="w-8 h-8 text-black/40" />
+      </div>
+      <h3 className="text-lg font-medium text-black/80 mb-2">No results found</h3>
+      <p className="text-sm text-black/50 max-w-md">
+        We couldn't find any matches for "{query}". Try adjusting your search terms or browse our featured content.
+      </p>
+    </div>
+  );
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {/* Search Header */}
+      <div className="bg-white border-b border-black/5">
+        <div className="container mx-auto px-4 py-6">
+          <div className="max-w-2xl mx-auto">
+            <h1 className="text-2xl font-semibold  text-black/80 mb-6">Search</h1>
+            
+            {/* Search Input */}
+            <form onSubmit={handleSearch} className="relative group mb-6">
+              <input
+                type="text"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder="Search courses, users, collections..."
+                className="w-full h-12 pl-12 pr-4 rounded-xl nice-shadow bg-white 
+                         focus:outline-none focus:ring-1 focus:ring-black/5 focus:border-black/20 
+                         text-sm placeholder:text-black/40 transition-all"
+              />
+              <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
+                <Search className="text-black/40 group-focus-within:text-black/60 transition-colors" size={20} />
+              </div>
+              <button
+                type="submit"
+                className="absolute inset-y-0 right-0 px-4 flex items-center text-sm text-black/60 hover:text-black/80"
+              >
+                Search
+              </button>
+            </form>
+            
+            {/* Filters */}
+            <div className="flex items-center gap-2 overflow-x-auto pb-2">
+              <FilterButton type="all" count={totalResults} icon={Search} />
+              <FilterButton type="courses" count={searchResults.total_courses} icon={GraduationCap} />
+              <FilterButton type="collections" count={searchResults.total_collections} icon={Book} />
+              <FilterButton type="users" count={searchResults.total_users} icon={Users} />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Search Results */}
+      <div className="container mx-auto px-4 py-8">
+        <div className="max-w-7xl mx-auto">
+          {query && (
+            <div className="text-sm text-black/60 mb-6">
+              Found {totalResults} results for "{query}"
+            </div>
+          )}
+
+          {isLoading ? (
+            <LoadingState />
+          ) : totalResults === 0 && query ? (
+            <EmptyState />
+          ) : (
+            <div className="space-y-12">
+              {/* Courses Grid */}
+              {(selectedType === 'all' || selectedType === 'courses') && searchResults.courses.length > 0 && (
+                <div>
+                  <h2 className="text-lg font-medium text-black/80 mb-4 flex items-center gap-2">
+                    <GraduationCap size={20} className="text-black/60" />
+                    Courses ({searchResults.courses.length})
+                  </h2>
+                  <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+                    {searchResults.courses.map((course) => (
+                      <Link
+                        key={course.course_uuid}
+                        href={getUriWithOrg(org?.slug, `/course/${removeCoursePrefix(course.course_uuid)}`)}
+                        className="bg-white rounded-xl nice-shadow hover:shadow-md transition-all overflow-hidden group"
+                      >
+                        <div className="relative h-48">
+                          {course.thumbnail_image ? (
+                            <img
+                              src={getCourseThumbnailMediaDirectory(org?.org_uuid, course.course_uuid, course.thumbnail_image)}
+                              alt={course.name}
+                              className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+                            />
+                          ) : (
+                            <div className="w-full h-full bg-black/5 flex items-center justify-center">
+                              <GraduationCap size={32} className="text-black/40" />
+                            </div>
+                          )}
+                        </div>
+                        <div className="p-4">
+                          <h3 className="text-sm font-medium text-black/80 mb-1">{course.name}</h3>
+                          <p className="text-xs text-black/50 line-clamp-2">{course.description}</p>
+                          {course.authors && course.authors.length > 0 && (
+                            <div className="flex items-center gap-2 mt-3">
+                              <UserAvatar
+                                width={20}
+                                avatar_url={course.authors[0].user.avatar_image ? getUserAvatarMediaDirectory(course.authors[0].user.user_uuid, course.authors[0].user.avatar_image) : ''}
+                                predefined_avatar={course.authors[0].user.avatar_image ? undefined : 'empty'}
+                                userId={course.authors[0].user.id.toString()}
+                                showProfilePopup={false}
+                                rounded="rounded-full"
+                                backgroundColor="bg-gray-100"
+                              />
+                              <span className="text-xs text-black/40">
+                                {course.authors[0].user.first_name} {course.authors[0].user.last_name}
+                              </span>
+                            </div>
+                          )}
+                        </div>
+                      </Link>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Collections Grid */}
+              {(selectedType === 'all' || selectedType === 'collections') && searchResults.collections.length > 0 && (
+                <div>
+                  <h2 className="text-lg font-medium text-black/80 mb-4 flex items-center gap-2">
+                    <Book size={20} className="text-black/60" />
+                    Collections ({searchResults.collections.length})
+                  </h2>
+                  <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+                    {searchResults.collections.map((collection) => (
+                      <Link
+                        key={collection.collection_uuid}
+                        href={getUriWithOrg(org?.slug, `/collection/${collection.collection_uuid.replace('collection_', '')}`)}
+                        className="flex items-start gap-4 p-4 bg-white rounded-xl nice-shadow hover:shadow-md transition-all"
+                      >
+                        <div className="w-12 h-12 bg-black/5 rounded-lg flex items-center justify-center flex-shrink-0">
+                          <Book size={24} className="text-black/40" />
+                        </div>
+                        <div>
+                          <h3 className="text-sm font-medium text-black/80 mb-1">{collection.name}</h3>
+                          <p className="text-xs text-black/50 line-clamp-2">{collection.description}</p>
+                        </div>
+                      </Link>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Users Grid */}
+              {(selectedType === 'all' || selectedType === 'users') && searchResults.users.length > 0 && (
+                <div>
+                  <h2 className="text-lg font-medium text-black/80 mb-4 flex items-center gap-2">
+                    <Users size={20} className="text-black/60" />
+                    Users ({searchResults.users.length})
+                  </h2>
+                  <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+                    {searchResults.users.map((user) => (
+                      <Link
+                        key={user.user_uuid}
+                        href={getUriWithOrg(org?.slug, `/user/${user.username}`)}
+                        className="flex items-center gap-4 p-4 bg-white rounded-xl nice-shadow hover:shadow-md transition-all"
+                      >
+                        <UserAvatar
+                          width={48}
+                          avatar_url={user.avatar_image ? getUserAvatarMediaDirectory(user.user_uuid, user.avatar_image) : ''}
+                          predefined_avatar={user.avatar_image ? undefined : 'empty'}
+                          userId={user.id.toString()}
+                          showProfilePopup
+                          rounded="rounded-full"
+                          backgroundColor="bg-gray-100"
+                        />
+                        <div>
+                          <h3 className="text-sm font-medium text-black/80">
+                            {user.first_name} {user.last_name}
+                          </h3>
+                          <p className="text-xs text-black/50">@{user.username}</p>
+                          {user.details?.title?.text && (
+                            <p className="text-xs text-black/40 mt-1">{user.details.title.text}</p>
+                          )}
+                        </div>
+                      </Link>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+
+          <Pagination />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default SearchPage;
\ No newline at end of file
diff --git a/apps/web/components/Objects/Search/SearchBar.tsx b/apps/web/components/Objects/Search/SearchBar.tsx
index e84c8cad..e0a3171b 100644
--- a/apps/web/components/Objects/Search/SearchBar.tsx
+++ b/apps/web/components/Objects/Search/SearchBar.tsx
@@ -238,42 +238,6 @@ export const SearchBar: React.FC<SearchBarProps> = ({
           <span className="font-medium">Quick Results</span>
         </div>
 
-        {/* Users Section */}
-        {searchResults.users.length > 0 && (
-          <div className="mb-2">
-            <div className="flex items-center gap-2 px-2 py-1 text-xs text-black/40">
-              <Users size={12} />
-              <span>Users</span>
-            </div>
-            {searchResults.users.map((user) => (
-              <Link
-                key={user.user_uuid}
-                href={getUriWithOrg(orgslug, `/user/${user.username}`)}
-                className="flex items-center gap-3 p-2 hover:bg-black/[0.02] rounded-lg transition-colors"
-              >
-                <UserAvatar
-                  width={40}
-                  avatar_url={user.avatar_image ? getUserAvatarMediaDirectory(user.user_uuid, user.avatar_image) : ''}
-                  predefined_avatar={user.avatar_image ? undefined : 'empty'}
-                  userId={user.id.toString()}
-                  showProfilePopup
-                  rounded="rounded-full"
-                  backgroundColor="bg-gray-100"
-                />
-                <div className="flex-1 min-w-0">
-                  <div className="flex items-center gap-2">
-                    <h3 className="text-sm font-medium text-black/80 truncate">
-                      {user.first_name} {user.last_name}
-                    </h3>
-                    <span className="text-[10px] font-medium text-black/40 uppercase tracking-wide whitespace-nowrap">User</span>
-                  </div>
-                  <p className="text-xs text-black/50 truncate">@{user.username}</p>
-                </div>
-              </Link>
-            ))}
-          </div>
-        )}
-
         {/* Courses Section */}
         {searchResults.courses.length > 0 && (
           <div className="mb-2">
@@ -342,6 +306,42 @@ export const SearchBar: React.FC<SearchBarProps> = ({
             ))}
           </div>
         )}
+
+        {/* Users Section */}
+        {searchResults.users.length > 0 && (
+          <div className="mb-2">
+            <div className="flex items-center gap-2 px-2 py-1 text-xs text-black/40">
+              <Users size={12} />
+              <span>Users</span>
+            </div>
+            {searchResults.users.map((user) => (
+              <Link
+                key={user.user_uuid}
+                href={getUriWithOrg(orgslug, `/user/${user.username}`)}
+                className="flex items-center gap-3 p-2 hover:bg-black/[0.02] rounded-lg transition-colors"
+              >
+                <UserAvatar
+                  width={40}
+                  avatar_url={user.avatar_image ? getUserAvatarMediaDirectory(user.user_uuid, user.avatar_image) : ''}
+                  predefined_avatar={user.avatar_image ? undefined : 'empty'}
+                  userId={user.id.toString()}
+                  showProfilePopup
+                  rounded="rounded-full"
+                  backgroundColor="bg-gray-100"
+                />
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2">
+                    <h3 className="text-sm font-medium text-black/80 truncate">
+                      {user.first_name} {user.last_name}
+                    </h3>
+                    <span className="text-[10px] font-medium text-black/40 uppercase tracking-wide whitespace-nowrap">User</span>
+                  </div>
+                  <p className="text-xs text-black/50 truncate">@{user.username}</p>
+                </div>
+              </Link>
+            ))}
+          </div>
+        )}
       </div>
     );
   }, [searchResults, orgslug, org?.org_uuid]);
diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css
index e48ae9b2..966db14b 100644
--- a/apps/web/styles/globals.css
+++ b/apps/web/styles/globals.css
@@ -113,6 +113,10 @@ layer(base);
     text-decoration: none;
   }
 
+  button {
+    @apply cursor-pointer;
+  }
+
   * {
     box-sizing: border-box;
   }