From 454c88e5dd3badc26d04b97d81a7ea290193fe1a Mon Sep 17 00:00:00 2001
From: Flatlogic Bot <support@flatlogic.com>
Date: Tue, 27 Jan 2026 19:17:52 +0000
Subject: [PATCH] Autocue 1

---
 frontend/src/components/NavBarItem.tsx |   5 +-
 frontend/src/layouts/Authenticated.tsx |   5 +-
 frontend/src/menuAside.ts              |   7 +-
 frontend/src/pages/autoscroller.tsx    | 242 +++++++++++++++++++++++++
 frontend/src/pages/index.tsx           | 202 ++++++++-------------
 5 files changed, 326 insertions(+), 135 deletions(-)
 create mode 100644 frontend/src/pages/autoscroller.tsx

diff --git a/frontend/src/components/NavBarItem.tsx b/frontend/src/components/NavBarItem.tsx
index 72935e6..4ced3eb 100644
--- a/frontend/src/components/NavBarItem.tsx
+++ b/frontend/src/components/NavBarItem.tsx
@@ -1,6 +1,5 @@
-import React, {useEffect, useRef} from 'react'
+import React, {useEffect, useRef, useState} from 'react'
 import Link from 'next/link'
-import { useState } from 'react'
 import { mdiChevronUp, mdiChevronDown } from '@mdi/js'
 import BaseDivider from './BaseDivider'
 import BaseIcon from './BaseIcon'
@@ -129,4 +128,4 @@ export default function NavBarItem({ item }: Props) {
   }
 
   return <div className={componentClass} ref={excludedRef}>{NavBarItemComponentContents}</div>
-}
+}
\ No newline at end of file
diff --git a/frontend/src/layouts/Authenticated.tsx b/frontend/src/layouts/Authenticated.tsx
index 1b9907d..26c3572 100644
--- a/frontend/src/layouts/Authenticated.tsx
+++ b/frontend/src/layouts/Authenticated.tsx
@@ -1,5 +1,4 @@
-import React, { ReactNode, useEffect } from 'react'
-import { useState } from 'react'
+import React, { ReactNode, useEffect, useState } from 'react'
 import jwt from 'jsonwebtoken';
 import { mdiForwardburger, mdiBackburger, mdiMenu } from '@mdi/js'
 import menuAside from '../menuAside'
@@ -126,4 +125,4 @@ export default function LayoutAuthenticated({
       </div>
     </div>
   )
-}
+}
\ No newline at end of file
diff --git a/frontend/src/menuAside.ts b/frontend/src/menuAside.ts
index 0ddc339..08f8dac 100644
--- a/frontend/src/menuAside.ts
+++ b/frontend/src/menuAside.ts
@@ -2,6 +2,11 @@ import * as icon from '@mdi/js';
 import { MenuAsideItem } from './interfaces'
 
 const menuAside: MenuAsideItem[] = [
+  {
+    href: '/autoscroller',
+    icon: icon.mdiSpeedometer,
+    label: 'Autoscroller',
+  },
   {
     href: '/dashboard',
     icon: icon.mdiViewDashboardOutline,
@@ -88,4 +93,4 @@ const menuAside: MenuAsideItem[] = [
   },
 ]
 
-export default menuAside
+export default menuAside
\ No newline at end of file
diff --git a/frontend/src/pages/autoscroller.tsx b/frontend/src/pages/autoscroller.tsx
new file mode 100644
index 0000000..419ff9c
--- /dev/null
+++ b/frontend/src/pages/autoscroller.tsx
@@ -0,0 +1,242 @@
+import { mdiPlay, mdiPause, mdiFullscreen, mdiArrowLeft, mdiArrowRight, mdiFormatSize, mdiSpeedometer, mdiFolderOpen } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, useRef, useState } from 'react'
+import CardBox from '../components/CardBox'
+import LayoutAuthenticated from '../layouts/Authenticated'
+import SectionMain from '../components/SectionMain'
+import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../config'
+import { useAppDispatch, useAppSelector } from '../stores/hooks'
+import { fetch as fetchTexts } from '../stores/texts/textsSlice'
+import { fetch as fetchFolders } from '../stores/folders/foldersSlice'
+import BaseButton from '../components/BaseButton'
+import BaseButtons from '../components/BaseButtons'
+import BaseIcon from '../components/BaseIcon'
+
+const AutoscrollerPage = () => {
+  const dispatch = useAppDispatch()
+  const texts = useAppSelector((state) => state.texts.texts)
+  const folders = useAppSelector((state) => state.folders.folders)
+  const [selectedTextId, setSelectedTextId] = useState<string | null>(null)
+  const [isPlaying, setIsPlaying] = useState(false)
+  const [speed, setSpeed] = useState(2)
+  const [fontSize, setFontSize] = useState(24)
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const requestRef = useRef<number>()
+
+  const selectedText = texts.find((t: any) => t.id === selectedTextId)
+
+  useEffect(() => {
+    dispatch(fetchTexts({}))
+    dispatch(fetchFolders({}))
+  }, [dispatch])
+
+  const scroll = () => {
+    if (scrollRef.current && isPlaying) {
+      scrollRef.current.scrollTop += speed / 2
+    }
+    requestRef.current = requestAnimationFrame(scroll)
+  }
+
+  useEffect(() => {
+    requestRef.current = requestAnimationFrame(scroll)
+    return () => {
+        if (requestRef.current) {
+            cancelAnimationFrame(requestRef.current)
+        }
+    }
+  }, [isPlaying, speed])
+
+  const toggleFullscreen = () => {
+    if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen()
+    } else {
+      if (document.exitFullscreen) {
+        document.exitFullscreen()
+      }
+    }
+  }
+
+  const nextPage = () => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop += scrollRef.current.clientHeight
+    }
+  }
+
+  const prevPage = () => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop -= scrollRef.current.clientHeight
+    }
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Autoscroller')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiSpeedometer} title='Autoscroller' main>
+          <BaseButtons>
+            <BaseButton
+              icon={mdiFullscreen}
+              color='whiteDark'
+              onClick={toggleFullscreen}
+              label='Fullscreen'
+            />
+          </BaseButtons>
+        </SectionTitleLineWithButton>
+
+        <div className='grid grid-cols-1 lg:grid-cols-4 gap-6'>
+          {/* Sidebar - Title Selection */}
+          <div className='lg:col-span-1 space-y-4'>
+            <CardBox className='h-full overflow-y-auto max-h-[70vh]'>
+              <div className='space-y-4'>
+                <div className='flex items-center space-x-2 text-gray-500 font-bold mb-2'>
+                  <BaseIcon path={mdiFolderOpen} />
+                  <span>Choose Title</span>
+                </div>
+                {folders.map((folder: any) => (
+                  <div key={folder.id} className='space-y-1'>
+                    <h3 className='text-xs font-semibold uppercase text-gray-400 px-2'>
+                      {folder.name}
+                    </h3>
+                    <div className='space-y-1'>
+                      {texts
+                        .filter((t: any) => t.folderId === folder.id)
+                        .map((text: any) => (
+                          <button
+                            key={text.id}
+                            onClick={() => {
+                              setSelectedTextId(text.id)
+                              setIsPlaying(false)
+                            }}
+                            className={`w-full text-left px-3 py-2 rounded-lg text-sm transition-colors ${
+                              selectedTextId === text.id
+                                ? 'bg-blue-600 text-white'
+                                : 'hover:bg-gray-100 text-gray-700'
+                            }`}
+                          >
+                            {text.title}
+                          </button>
+                        ))}
+                    </div>
+                  </div>
+                ))}
+                {/* Texts without folders */}
+                {texts.filter((t: any) => !t.folderId).length > 0 && (
+                   <div className='space-y-1 pt-2 border-t'>
+                    <h3 className='text-xs font-semibold uppercase text-gray-400 px-2'>
+                      Other
+                    </h3>
+                    {texts
+                        .filter((t: any) => !t.folderId)
+                        .map((text: any) => (
+                          <button
+                            key={text.id}
+                            onClick={() => {
+                              setSelectedTextId(text.id)
+                              setIsPlaying(false)
+                            }}
+                            className={`w-full text-left px-3 py-2 rounded-lg text-sm transition-colors ${
+                              selectedTextId === text.id
+                                ? 'bg-blue-600 text-white'
+                                : 'hover:bg-gray-100 text-gray-700'
+                            }`}
+                          >
+                            {text.title}
+                          </button>
+                        ))}
+                  </div>
+                )}
+              </div>
+            </CardBox>
+          </div>
+
+          {/* Main Scroller Area */}
+          <div className='lg:col-span-3 flex flex-col space-y-4'>
+            {selectedText ? (
+              <>
+                <CardBox className='flex-1 flex flex-col p-0 overflow-hidden relative'>
+                  <div className='p-4 border-b flex justify-between items-center bg-gray-50'>
+                    <h2 className='font-bold text-lg'>{selectedText.title}</h2>
+                    <div className='flex items-center space-x-4'>
+                      <div className='flex items-center space-x-2'>
+                        <BaseIcon path={mdiFormatSize} size={20} />
+                        <input
+                          type='range'
+                          min='12'
+                          max='72'
+                          value={fontSize}
+                          onChange={(e) => setFontSize(parseInt(e.target.value))}
+                          className='w-24'
+                        />
+                      </div>
+                      <div className='flex items-center space-x-2'>
+                        <BaseIcon path={mdiSpeedometer} size={20} />
+                        <input
+                          type='range'
+                          min='1'
+                          max='20'
+                          value={speed}
+                          onChange={(e) => setSpeed(parseInt(e.target.value))}
+                          className='w-24'
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  
+                  <div 
+                    ref={scrollRef}
+                    className='flex-1 overflow-y-auto p-8 bg-white selection:bg-yellow-200'
+                    style={{ fontSize: `${fontSize}px`, lineHeight: '1.6' }}
+                  >
+                    <div className='max-w-4xl mx-auto whitespace-pre-wrap font-serif'>
+                      {selectedText.content}
+                    </div>
+                    {/* Padding bottom to allow scrolling to the very end */}
+                    <div className='h-[80vh]' />
+                  </div>
+
+                  <div className='p-4 border-t flex justify-center items-center space-x-4 bg-gray-50'>
+                    <BaseButton
+                      icon={mdiArrowLeft}
+                      color='whiteDark'
+                      onClick={prevPage}
+                      label='Prev'
+                    />
+                    <BaseButton
+                      icon={isPlaying ? mdiPause : mdiPlay}
+                      color={isPlaying ? 'danger' : 'success'}
+                      onClick={() => setIsPlaying(!isPlaying)}
+                      label={isPlaying ? 'Pause' : 'Play'}
+                      className='w-32'
+                    />
+                    <BaseButton
+                      icon={mdiArrowRight}
+                      color='whiteDark'
+                      onClick={nextPage}
+                      label='Next'
+                    />
+                  </div>
+                </CardBox>
+              </>
+            ) : (
+              <CardBox className='flex-1 flex items-center justify-center text-gray-400'>
+                <div className='text-center'>
+                  <BaseIcon path={mdiPlay} size={64} className='mb-4 opacity-20' />
+                  <p>Select a title from the menu to start scrolling</p>
+                </div>
+              </CardBox>
+            )}
+          </div>
+        </div>
+      </SectionMain>
+    </>
+  )
+}
+
+AutoscrollerPage.getLayout = function getLayout(page: ReactElement) {
+  return <LayoutAuthenticated>{page}</LayoutAuthenticated>
+}
+
+export default AutoscrollerPage
\ No newline at end of file
diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx
index df28ae4..a122328 100644
--- a/frontend/src/pages/index.tsx
+++ b/frontend/src/pages/index.tsx
@@ -1,166 +1,112 @@
-
 import React, { useEffect, useState } from 'react';
 import type { ReactElement } from 'react';
 import Head from 'next/head';
-import Link from 'next/link';
 import BaseButton from '../components/BaseButton';
 import CardBox from '../components/CardBox';
 import SectionFullScreen from '../components/SectionFullScreen';
 import LayoutGuest from '../layouts/Guest';
-import BaseDivider from '../components/BaseDivider';
 import BaseButtons from '../components/BaseButtons';
 import { getPageTitle } from '../config';
 import { useAppSelector } from '../stores/hooks';
-import CardBoxComponentTitle from "../components/CardBoxComponentTitle";
-import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
-
+import { mdiSpeedometer, mdiPlayCircleOutline } from '@mdi/js';
+import { getPexelsImage } from '../helpers/pexels';
 
 export default function Starter() {
-    const [illustrationImage, setIllustrationImage] = useState({
-        src: undefined,
-        photographer: undefined,
-        photographer_url: undefined,
-    })
-    const [illustrationVideo, setIllustrationVideo] = useState({video_files: []})
-    const [contentType, setContentType] = useState('image');
-    const [contentPosition, setContentPosition] = useState('background');
+    const [illustrationImage, setIllustrationImage] = useState<any>(null)
     const textColor = useAppSelector((state) => state.style.linkColor);
 
-    const title = 'Autoscroller App'
+    const title = 'Autoscroller Pro'
 
-    // Fetch Pexels image/video
     useEffect(() => {
         async function fetchData() {
             const image = await getPexelsImage();
-            const video = await getPexelsVideo();
             setIllustrationImage(image);
-            setIllustrationVideo(video);
         }
         fetchData();
     }, []);
 
-    const imageBlock = (image) => (
-        <div
-            className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'
-            style={{
-                backgroundImage: `${
-                    image
-                        ? `url(${image?.src?.original})`
-                        : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
-                }`,
-                backgroundSize: 'cover',
-                backgroundPosition: 'left center',
-                backgroundRepeat: 'no-repeat',
-            }}
-        >
-            <div className='flex justify-center w-full bg-blue-300/20'>
-                <a
-                    className='text-[8px]'
-                    href={image?.photographer_url}
-                    target='_blank'
-                    rel='noreferrer'
-                >
-                    Photo by {image?.photographer} on Pexels
-                </a>
-            </div>
-        </div>
-    );
-
-    const videoBlock = (video) => {
-        if (video?.video_files?.length > 0) {
-            return (
-                <div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'>
-                    <video
-                        className='absolute top-0 left-0 w-full h-full object-cover'
-                        autoPlay
-                        loop
-                        muted
-                    >
-                        <source src={video?.video_files[0]?.link} type='video/mp4'/>
-                        Your browser does not support the video tag.
-                    </video>
-                    <div className='flex justify-center w-full bg-blue-300/20 z-10'>
-                        <a
-                            className='text-[8px]'
-                            href={video?.user?.url}
-                            target='_blank'
-                            rel='noreferrer'
-                        >
-                            Video by {video.user.name} on Pexels
-                        </a>
-                    </div>
-                </div>)
-        }
-    };
-
   return (
       <div
-          style={
-              contentPosition === 'background'
-                  ? {
-                      backgroundImage: `${
-                          illustrationImage
-                              ? `url(${illustrationImage.src?.original})`
-                              : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
-                      }`,
-                      backgroundSize: 'cover',
-                      backgroundPosition: 'left center',
-                      backgroundRepeat: 'no-repeat',
-                  }
-                  : {}
-          }
+          className="min-h-screen flex flex-col"
+          style={{
+              backgroundImage: illustrationImage ? `linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url(${illustrationImage.src?.large2x})` : 'linear-gradient(to bottom right, #1e293b, #0f172a)',
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
+          }}
       >
       <Head>
-        <title>{getPageTitle('Starter Page')}</title>
+        <title>{getPageTitle('Home')}</title>
       </Head>
 
-      <SectionFullScreen bg='violet'>
-      <div
-          className={`flex ${
-              contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'
-          } min-h-screen w-full`}
-      >
-          {contentType === 'image' && contentPosition !== 'background'
-              ? imageBlock(illustrationImage)
-              : null}
-          {contentType === 'video' && contentPosition !== 'background'
-              ? videoBlock(illustrationVideo)
-              : null}
-          <div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
-        <CardBox className='w-full md:w-3/5 lg:w-2/3'>
-            <CardBoxComponentTitle title="Welcome to your Autoscroller App app!"/>
-        
-            <div className="space-y-3">
-                <p className='text-center text-gray-500'>This is a React.js/Node.js app generated by the <a className={`${textColor}`} href="https://flatlogic.com/generator">Flatlogic Web App Generator</a></p>
-                <p className='text-center text-gray-500'>For guides and documentation please check
-                    your local README.md and the <a className={`${textColor}`} href="https://flatlogic.com/documentation">Flatlogic documentation</a></p>
-            </div>
-        
-            <BaseButtons>
-                <BaseButton
-                    href='/login'
-                    label='Login'
-                    color='info'
-                    className='w-full'
-                />
+      <SectionFullScreen>
+          <div className='flex items-center justify-center flex-col space-y-8 w-full px-6'>
+              <div className='text-center space-y-4 max-w-2xl'>
+                  <div className='inline-flex items-center justify-center p-3 bg-blue-600 rounded-2xl shadow-lg mb-4'>
+                      <svg width="40" height="40" viewBox="0 0 24 24" fill="white">
+                          <path d={mdiSpeedometer} />
+                      </svg>
+                  </div>
+                  <h1 className="text-4xl md:text-6xl font-extrabold text-white tracking-tight">
+                      Smooth <span className="text-blue-400">Autoscrolling</span> for Professionals
+                  </h1>
+                  <p className='text-lg md:text-xl text-gray-300'>
+                      The ultimate tool for speakers, musicians, and readers. Organize your texts into folders, adjust speed in real-time, and read with comfort.
+                  </p>
+              </div>
 
-            </BaseButtons>
-        </CardBox>
-        </div>
-      </div>
+              <CardBox className='w-full max-w-md bg-white/10 backdrop-blur-md border-white/20 shadow-2xl'>
+                  <div className="space-y-6 py-4 text-center">
+                      <p className='text-white/80 font-medium'>Ready to start your session?</p>
+                      
+                      <BaseButtons type="justify-center">
+                          <BaseButton
+                              href='/autoscroller'
+                              label='Open Autoscroller'
+                              color='info'
+                              icon={mdiPlayCircleOutline}
+                              className='px-8 py-3 rounded-xl text-lg font-bold'
+                          />
+                      </BaseButtons>
+
+                      <div className="flex justify-center space-x-4 pt-4 border-t border-white/10">
+                          <BaseButton
+                              href='/login'
+                              label='Sign In'
+                              color='whiteDark'
+                              className='text-sm'
+                          />
+                          <BaseButton
+                              href='/register'
+                              label='Register'
+                              color='whiteDark'
+                              className='text-sm'
+                          />
+                      </div>
+                  </div>
+              </CardBox>
+
+              {illustrationImage && (
+                  <div className='absolute bottom-10 right-10 hidden md:block'>
+                      <a
+                          className='text-[10px] text-white/40 hover:text-white/60 transition-colors'
+                          href={illustrationImage.photographer_url}
+                          target='_blank'
+                          rel='noreferrer'
+                      >
+                          Photo by {illustrationImage.photographer} on Pexels
+                      </a>
+                  </div>
+              )}
+          </div>
       </SectionFullScreen>
-      <div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
-        <p className='py-6 text-sm'>© 2026 <span>{title}</span>. All rights reserved</p>
-        <Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
-            Privacy Policy
-        </Link>
-      </div>
 
+      <footer className='mt-auto py-8 text-center text-white/40 text-sm'>
+          <p>© 2026 {title}. All rights reserved.</p>
+      </footer>
     </div>
   );
 }
 
 Starter.getLayout = function getLayout(page: ReactElement) {
   return <LayoutGuest>{page}</LayoutGuest>;
-};
-
+};
\ No newline at end of file