From 86e3ce50d2acc646e7d4d8208e5450d4743e9cf3 Mon Sep 17 00:00:00 2001
From: Elliot Braem <elliot@ejlbraem.com>
Date: Thu, 16 Jan 2025 12:29:13 -0700
Subject: [PATCH 1/3] mobile layout

---
 frontend/src/components/FeedList.tsx |  4 +-
 frontend/src/components/Header.tsx   |  5 ++-
 frontend/src/components/Layout.tsx   | 55 ++++++++++++++++++++++++----
 frontend/src/routes/feed.$feedId.tsx | 12 ++++--
 4 files changed, 61 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/FeedList.tsx b/frontend/src/components/FeedList.tsx
index 430a1b9..ba243a6 100644
--- a/frontend/src/components/FeedList.tsx
+++ b/frontend/src/components/FeedList.tsx
@@ -22,13 +22,13 @@ const FeedList = () => {
   });
 
   return (
-    <nav className="space-y-2">
+    <nav className="md:space-y-2 flex md:block">
       {feeds?.map((feed) => (
         <Link
           key={feed.id}
           to="/feed/$feedId"
           params={{ feedId: feed.id }}
-          className={`block px-4 py-2 text-sm border-2 border-black shadow-sharp transition-all duration-200 mb-2 ${
+          className={`flex-shrink-0 min-w-[200px] mx-2 first:ml-0 last:mr-0 md:mx-0 md:min-w-0 block px-4 py-2 text-sm border-2 border-black shadow-sharp transition-all duration-200 md:mb-2 ${
             feedId === feed.id
               ? "bg-gray-100 text-black font-medium translate-x-0.5 translate-y-0.5 shadow-none"
               : "text-gray-600 hover:shadow-sharp-hover hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-gray-50"
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index d088e55..5b0ff14 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -1,9 +1,10 @@
 import { FaTwitter, FaBook, FaGithub, FaTelegram } from "react-icons/fa";
+import { Link } from "@tanstack/react-router";
 
 const Header = () => {
   return (
     <header className="sticky top-0 flex justify-between items-center p-4 border-b-2 border-black bg-white z-10">
-      <div className="flex items-center">
+      <Link to="/" className="flex items-center hover:opacity-80 transition-opacity">
         <img
           src="/curatedotfuntransparenticon.png"
           alt="curate.fun Logo"
@@ -12,7 +13,7 @@ const Header = () => {
         <div className="flex">
           <h1 className="text-2xl h-8">curate.fun</h1>
         </div>
-      </div>
+      </Link>
       <nav className="flex space-x-4 mx-4">
         <a
           href="https://twitter.com/curatedotfun"
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index c7afa22..c4393df 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -1,5 +1,6 @@
-import { ReactNode } from "react";
+import { ReactNode, useState } from "react";
 import Header from "./Header";
+import { FaEllipsisV } from "react-icons/fa";
 
 interface LayoutProps {
   children: ReactNode;
@@ -8,26 +9,64 @@ interface LayoutProps {
 }
 
 const Layout = ({ children, sidebar, rightPanel }: LayoutProps) => {
+  const [showRightPanel, setShowRightPanel] = useState(false);
   return (
     <div className="flex flex-col h-screen bg-white">
       <Header />
+      {/* Mobile Feeds List */}
+      <div className="md:hidden overflow-x-auto whitespace-nowrap border-b-2 border-black">
+        {sidebar}
+      </div>
+
       <div className="flex flex-1 overflow-hidden">
-        {/* Left Sidebar - Feed List */}
-        <div className="w-64 panel custom-scrollbar overflow-y-auto h-[calc(100vh-theme(spacing.24))] sm:h-[calc(100vh-theme(spacing.28))]">
+        {/* Left Sidebar - Feed List (Desktop) */}
+        <div className="hidden md:block w-64 panel custom-scrollbar overflow-y-auto">
           <div className="p-4">{sidebar}</div>
         </div>
 
         {/* Main Content Area */}
-        <div className="flex-1 flex">
+        <div className="flex-1 flex relative">
           {/* Center Panel - Feed Items */}
-          <div className="flex-1 panel custom-scrollbar overflow-y-auto h-[calc(100vh-theme(spacing.24))] sm:h-[calc(100vh-theme(spacing.28))]">
-            <div className="p-6">{children}</div>
+          <div className="flex-1 panel custom-scrollbar overflow-y-auto h-full">
+            <div className="p-6 pb-20">
+              {/* Mobile Right Panel Toggle */}
+              {rightPanel && (
+                <button
+                  onClick={() => setShowRightPanel(!showRightPanel)}
+                  className="lg:hidden absolute top-2 right-2 p-2 text-xl"
+                >
+                  <FaEllipsisV />
+                </button>
+              )}
+              {children}
+            </div>
           </div>
 
           {/* Right Panel - Feed Details */}
-          <div className="w-80 panel custom-scrollbar overflow-y-auto h-[calc(100vh-theme(spacing.24))] sm:h-[calc(100vh-theme(spacing.28))]">
-            <div className="p-4">{rightPanel}</div>
+          <div
+            className={`${
+              showRightPanel ? "translate-x-0" : "translate-x-full"
+            } lg:translate-x-0 fixed lg:relative right-0 top-0 w-80 bg-white custom-scrollbar overflow-y-auto transition-transform duration-300 ease-in-out z-20 lg:z-0 border-l-2 border-black h-full panel`}
+          >
+            <div className="p-4 pb-20">
+              {/* Mobile Close Button */}
+              <button
+                onClick={() => setShowRightPanel(false)}
+                className="lg:hidden absolute top-2 right-2 p-2"
+              >
+                ✕
+              </button>
+              {rightPanel}
+            </div>
           </div>
+
+          {/* Mobile Overlay */}
+          {showRightPanel && (
+            <div
+              className="lg:hidden fixed inset-0 bg-black bg-opacity-50 z-10"
+              onClick={() => setShowRightPanel(false)}
+            />
+          )}
         </div>
       </div>
       <footer className="fixed bottom-0 w-full py-2 sm:py-4 text-center bg-white/80 backdrop-blur text-sm sm:text-base border-t-2 border-black">
diff --git a/frontend/src/routes/feed.$feedId.tsx b/frontend/src/routes/feed.$feedId.tsx
index 18033ae..786bee7 100644
--- a/frontend/src/routes/feed.$feedId.tsx
+++ b/frontend/src/routes/feed.$feedId.tsx
@@ -134,9 +134,15 @@ function FeedPage() {
           <h2 className="text-2xl font-bold">{feed?.name || "Loading..."}</h2>
           <LiveStatus />
         </div>
-        {items?.map((item) => (
-          <FeedItem key={item.tweetId} submission={item} />
-        ))}
+        {items.length === 0 ? (
+          <div className="flex justify-center items-center p-8">
+            <p className="text-gray-500">No items yet</p>
+          </div>
+        ) : (
+          items.map((item) => (
+            <FeedItem key={item.tweetId} submission={item} />
+          ))
+        )}
       </div>
     </Layout>
   );

From bc268f84efae52bd6bd212951cf3e64c919a2299 Mon Sep 17 00:00:00 2001
From: Elliot Braem <elliot@ejlbraem.com>
Date: Thu, 16 Jan 2025 12:35:44 -0700
Subject: [PATCH 2/3] mobile responsive

---
 frontend/src/components/FeedList.tsx | 18 ++++++++++++++----
 frontend/src/routes/feed.$feedId.tsx |  4 +---
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/FeedList.tsx b/frontend/src/components/FeedList.tsx
index ba243a6..5908ed7 100644
--- a/frontend/src/components/FeedList.tsx
+++ b/frontend/src/components/FeedList.tsx
@@ -1,5 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { Link, useParams } from "@tanstack/react-router";
+import { FaChevronRight } from "react-icons/fa";
 
 interface Feed {
   id: string;
@@ -22,13 +23,21 @@ const FeedList = () => {
   });
 
   return (
-    <nav className="md:space-y-2 flex md:block">
-      {feeds?.map((feed) => (
+    <div className="flex flex-col md:block">
+      <div className="flex justify-between items-center px-4 md:px-0 mb-4">
+        <h1 className="text-xl font-bold">Feeds</h1>
+        <span className="md:hidden text-gray-400 flex items-center">
+          <span className="mr-1">scroll</span>
+          <FaChevronRight className="h-3 w-3" />
+        </span>
+      </div>
+      <nav className="flex md:block overflow-x-auto p-1">
+        {feeds?.map((feed) => (
         <Link
           key={feed.id}
           to="/feed/$feedId"
           params={{ feedId: feed.id }}
-          className={`flex-shrink-0 min-w-[200px] mx-2 first:ml-0 last:mr-0 md:mx-0 md:min-w-0 block px-4 py-2 text-sm border-2 border-black shadow-sharp transition-all duration-200 md:mb-2 ${
+          className={`flex-shrink-0 min-w-[200px]  mx-2 md:mx-0 md:min-w-0 block px-4 py-2 text-sm border-2 border-black shadow-sharp transition-all duration-200 md:mb-2 ${
             feedId === feed.id
               ? "bg-gray-100 text-black font-medium translate-x-0.5 translate-y-0.5 shadow-none"
               : "text-gray-600 hover:shadow-sharp-hover hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-gray-50"
@@ -40,7 +49,8 @@ const FeedList = () => {
           </div>
         </Link>
       ))}
-    </nav>
+      </nav>
+    </div>
   );
 };
 
diff --git a/frontend/src/routes/feed.$feedId.tsx b/frontend/src/routes/feed.$feedId.tsx
index 786bee7..f4eec44 100644
--- a/frontend/src/routes/feed.$feedId.tsx
+++ b/frontend/src/routes/feed.$feedId.tsx
@@ -16,7 +16,6 @@ function FeedPage() {
 
   const sidebarContent = (
     <div className="p-4">
-      <h1 className="text-xl font-bold mb-4">Feeds</h1>
       <FeedList />
     </div>
   );
@@ -130,9 +129,8 @@ function FeedPage() {
   return (
     <Layout sidebar={sidebarContent} rightPanel={rightPanelContent}>
       <div className="space-y-4">
-        <div className="flex items-center justify-between mb-6">
+        <div className="flex items-center justify-between mb-6 mr-4">
           <h2 className="text-2xl font-bold">{feed?.name || "Loading..."}</h2>
-          <LiveStatus />
         </div>
         {items.length === 0 ? (
           <div className="flex justify-center items-center p-8">

From bcded3656642657d42aa3ac86585f2ae9f6b2659 Mon Sep 17 00:00:00 2001
From: Elliot Braem <elliot@ejlbraem.com>
Date: Thu, 16 Jan 2025 12:44:17 -0700
Subject: [PATCH 3/3] fmt

---
 frontend/src/components/FeedList.tsx | 32 ++++++++++++++--------------
 frontend/src/components/Header.tsx   |  5 ++++-
 frontend/src/routes/feed.$feedId.tsx |  4 +---
 3 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/FeedList.tsx b/frontend/src/components/FeedList.tsx
index 5908ed7..b1808c2 100644
--- a/frontend/src/components/FeedList.tsx
+++ b/frontend/src/components/FeedList.tsx
@@ -33,22 +33,22 @@ const FeedList = () => {
       </div>
       <nav className="flex md:block overflow-x-auto p-1">
         {feeds?.map((feed) => (
-        <Link
-          key={feed.id}
-          to="/feed/$feedId"
-          params={{ feedId: feed.id }}
-          className={`flex-shrink-0 min-w-[200px]  mx-2 md:mx-0 md:min-w-0 block px-4 py-2 text-sm border-2 border-black shadow-sharp transition-all duration-200 md:mb-2 ${
-            feedId === feed.id
-              ? "bg-gray-100 text-black font-medium translate-x-0.5 translate-y-0.5 shadow-none"
-              : "text-gray-600 hover:shadow-sharp-hover hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-gray-50"
-          }`}
-        >
-          <div className="flex items-center">
-            <span className="flex-1">{feed.name}</span>
-            <span className="text-xs text-gray-400">#{feed.hashtag}</span>
-          </div>
-        </Link>
-      ))}
+          <Link
+            key={feed.id}
+            to="/feed/$feedId"
+            params={{ feedId: feed.id }}
+            className={`flex-shrink-0 min-w-[200px]  mx-2 md:mx-0 md:min-w-0 block px-4 py-2 text-sm border-2 border-black shadow-sharp transition-all duration-200 md:mb-2 ${
+              feedId === feed.id
+                ? "bg-gray-100 text-black font-medium translate-x-0.5 translate-y-0.5 shadow-none"
+                : "text-gray-600 hover:shadow-sharp-hover hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-gray-50"
+            }`}
+          >
+            <div className="flex items-center">
+              <span className="flex-1">{feed.name}</span>
+              <span className="text-xs text-gray-400">#{feed.hashtag}</span>
+            </div>
+          </Link>
+        ))}
       </nav>
     </div>
   );
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index 5b0ff14..b411083 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -4,7 +4,10 @@ import { Link } from "@tanstack/react-router";
 const Header = () => {
   return (
     <header className="sticky top-0 flex justify-between items-center p-4 border-b-2 border-black bg-white z-10">
-      <Link to="/" className="flex items-center hover:opacity-80 transition-opacity">
+      <Link
+        to="/"
+        className="flex items-center hover:opacity-80 transition-opacity"
+      >
         <img
           src="/curatedotfuntransparenticon.png"
           alt="curate.fun Logo"
diff --git a/frontend/src/routes/feed.$feedId.tsx b/frontend/src/routes/feed.$feedId.tsx
index f4eec44..125e5fe 100644
--- a/frontend/src/routes/feed.$feedId.tsx
+++ b/frontend/src/routes/feed.$feedId.tsx
@@ -137,9 +137,7 @@ function FeedPage() {
             <p className="text-gray-500">No items yet</p>
           </div>
         ) : (
-          items.map((item) => (
-            <FeedItem key={item.tweetId} submission={item} />
-          ))
+          items.map((item) => <FeedItem key={item.tweetId} submission={item} />)
         )}
       </div>
     </Layout>