From 18306221ed893f54dd854882cb26705fe37e69e7 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Fri, 29 Aug 2025 12:27:53 +0000
Subject: [PATCH] Improve mobile rule page with responsive textarea and
 floating action bar

Co-authored-by: raavtube <raavtube@icloud.com>
---
 app/rule/[slug]/page.tsx | 112 ++++++++++++++++++++++++++++-----------
 1 file changed, 82 insertions(+), 30 deletions(-)

diff --git a/app/rule/[slug]/page.tsx b/app/rule/[slug]/page.tsx
index 1ae2839..6881fee 100644
--- a/app/rule/[slug]/page.tsx
+++ b/app/rule/[slug]/page.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { useEffect, useState } from "react"
+import { useEffect, useState, useRef } from "react"
 import { useParams } from "next/navigation"
 import { Header } from "@/components/header"
 import { Card } from "@/components/ui/card"
@@ -82,6 +82,7 @@ export default function PublicRulePage() {
   const [tokenCount, setTokenCount] = useState(0)
   const [copied, setCopied] = useState(false)
   const [cliCopied, setCliCopied] = useState(false)
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
 
   useEffect(() => {
     const fetchRule = async () => {
@@ -120,6 +121,40 @@ export default function PublicRulePage() {
     }
   }, [params.slug])
 
+  // Auto-resize textarea on mobile
+  useEffect(() => {
+    const textarea = textareaRef.current
+    if (textarea && rule?.content) {
+      const isMobile = window.innerWidth < 640 // sm breakpoint
+      if (isMobile) {
+        // Reset height to auto to get the correct scrollHeight
+        textarea.style.height = 'auto'
+        // Set height to scrollHeight to fit content
+        textarea.style.height = `${textarea.scrollHeight}px`
+      }
+    }
+  }, [rule?.content])
+
+  // Handle window resize to re-check mobile state
+  useEffect(() => {
+    const handleResize = () => {
+      const textarea = textareaRef.current
+      if (textarea && rule?.content) {
+        const isMobile = window.innerWidth < 640
+        if (isMobile) {
+          textarea.style.height = 'auto'
+          textarea.style.height = `${textarea.scrollHeight}px`
+        } else {
+          // Reset to default height on desktop
+          textarea.style.height = ''
+        }
+      }
+    }
+
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [rule?.content])
+
   const handleCopy = async () => {
     if (!rule) return
     
@@ -207,17 +242,18 @@ export default function PublicRulePage() {
               }}
             >
               <Textarea
+                ref={textareaRef}
                 value={rule.content}
                 readOnly
-                className="min-h-[500px] resize-none border-0 bg-[#1B1D21] text-white leading-relaxed"
+                className="sm:min-h-[500px] resize-none border-0 bg-[#1B1D21] text-white leading-relaxed"
                 style={{ fontSize: "14px" }}
               />
             </Card>
           </div>
 
-          {/* Installation Instructions */}
+          {/* Installation Instructions - Hidden on mobile */}
           <Card
-            className="border-0 bg-[#1B1D21] p-4"
+            className="border-0 bg-[#1B1D21] p-4 hidden sm:block"
             style={{
               border: "1px solid rgba(255, 255, 255, 0.04)",
               boxShadow: "rgba(0, 0, 0, 0.06) 0px 18px 25.8px 0px",
@@ -258,34 +294,9 @@ export default function PublicRulePage() {
             </div>
           </Card>
 
-          {/* Action Buttons */}
+          {/* Stats */}
           <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 sm:gap-0 pt-[0]">
             <div className="flex items-center gap-3 flex-wrap">
-              <Button
-                onClick={handleDownload}
-                variant="secondary"
-                size="sm"
-              >
-                <Download className="h-3 w-3" />
-                Download
-              </Button>
-              
-              <Button
-                onClick={handleCopy}
-                variant="secondary"
-                size="sm"
-              >
-                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
-                  <title>duplicate</title>
-                  <g fill="none" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" stroke="#70A7D7">
-                    <path opacity="0.3" d="M13.75 5.25H7.25C6.145 5.25 5.25 6.145 5.25 7.25V13.75C5.25 14.855 6.145 15.75 7.25 15.75H13.75C14.855 15.75 15.75 14.855 15.75 13.75V7.25C15.75 6.145 14.855 5.25 13.75 5.25Z" fill="#70A7D7" data-stroke="none" stroke="none"></path>
-                    <path d="M13.75 5.25H7.25C6.145 5.25 5.25 6.145 5.25 7.25V13.75C5.25 14.855 6.145 15.75 7.25 15.75H13.75C14.855 15.75 15.75 14.855 15.75 13.75V7.25C15.75 6.145 14.855 5.25 13.75 5.25Z"></path>
-                    <path d="M12.4012 2.74998C12.0022 2.06148 11.2151 1.64837 10.38 1.77287L3.45602 2.80199C2.36402 2.96389 1.61003 3.98099 1.77203 5.07399L2.75002 11.6548"></path>
-                  </g>
-                </svg>
-                {copied ? "Copied!" : "Copy Rule"}
-              </Button>
-
               {/* Add to List button - only show if user is authenticated */}
               {session?.user && (
                 <AddToListButton
@@ -303,8 +314,49 @@ export default function PublicRulePage() {
               {rule.content.length} chars • {tokenCount.toLocaleString()} tokens
             </div>
           </div>
+
+          {/* Spacer for floating action bar */}
+          <div className="h-20"></div>
         </div>
       </main>
+
+      {/* Glassmorphic Floating Action Bar */}
+      <div className="fixed bottom-4 left-1/2 transform -translate-x-1/2 z-40 max-w-[calc(100vw-2rem)]">
+        <div className="bg-neutral-300/20 dark:bg-neutral-400/20 text-neutral-600 dark:text-neutral-300 backdrop-blur-[1px] border border-neutral-400/20 rounded-xl p-2 sm:p-3 shadow-2xl overflow-x-auto">
+          <div className="flex items-center gap-2 sm:gap-3 min-w-max">
+            {/* Primary Actions */}
+            <Button
+              onClick={handleDownload}
+              variant="primary"
+              size="sm"
+              className="hover:bg-[#70A7D7] px-2 py-2 sm:px-3 sm:py-1 aspect-square sm:aspect-auto"
+            >
+              <Download className="h-3 w-3" />
+              <span className="hidden md:inline ml-1">Download</span>
+            </Button>
+            
+            <Button
+              onClick={handleCopy}
+              variant="primary"
+              size="sm"
+              className="hover:bg-[#90BAE0] px-2 py-2 sm:px-3 sm:py-1 aspect-square sm:aspect-auto"
+            >
+              <Copy className="h-3 w-3" />
+              <span className="hidden md:inline ml-1">{copied ? "Copied!" : "Copy"}</span>
+            </Button>
+
+            <Button
+              onClick={handleInstallCopy}
+              variant="primary"
+              size="sm"
+              className="hover:bg-[#90BAE0] px-2 py-2 sm:px-3 sm:py-1 aspect-square sm:aspect-auto"
+            >
+              <Terminal className="h-3 w-3" />
+              <span className="hidden md:inline ml-1">{cliCopied ? "Copied!" : "CLI"}</span>
+            </Button>
+          </div>
+        </div>
+      </div>
     </div>
   )
 }