desktop header, feed selector & page name in header

packages/app/src/Element/Feed/RootTabs.css

@@ -2,22 +2,16 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-grow: 1;
 }
 
 .root-type > button {
-  background: white;
+  background: none;
-  color: var(--bg-color);
+  color: var(--font-color);
   font-size: 16px;
   padding: 10px 16px;
-  border-radius: 1000px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
-  border: 1px solid var(--gray-superdark);
-}
-
-.light .root-type > button {
-  color: var(--font-color);
-  border: 1px solid var(--border-color);
 }

packages/app/src/Element/Feed/TimelineRenderer.tsx

@@ -57,7 +57,7 @@ export function TimelineRenderer(props: TimelineRendererProps) {
 
       return (
         <div
-          className="aspect-square bg-center bg-cover cursor-pointer"
+          className="aspect-square bg-center bg-cover cursor-pointer hover:opacity-80"
           key={e.id}
           style={{ backgroundImage: `url(${proxy(images[0].content, 256)})` }}
           onClick={() => noteOnClick(e)}></div>

packages/app/src/Pages/Layout/index.tsx

@@ -18,6 +18,8 @@ import { LogoHeader } from "./LogoHeader";
 import useLoginFeed from "@/Feed/LoginFeed";
 import ErrorBoundary from "@/Element/ErrorBoundary";
 import Footer from "@/Pages/Layout/Footer";
+import { RootTabs } from "@/Element/Feed/RootTabs";
+import classNames from "classnames";
 
 export default function Index() {
   const location = useLocation();
@@ -45,10 +47,10 @@ export default function Index() {
   return (
     <div className="flex justify-center">
       <div className="w-full max-w-screen-xl">
-        {!shouldHideHeader && <Header />}
+        <div className="flex flex-row">
-        <div className="flex flex-row w-full">
           <NavSidebar />
-          <div className="flex flex-1 flex-col overflow-x-hidden pb-footer-height md:pb-0">
+          <div className="flex flex-1 flex-col pb-footer-height md:pb-0 w-full md:w-1/3">
+            {!shouldHideHeader && <Header />}
             <ErrorBoundary>
               <Outlet />
             </ErrorBoundary>
@@ -65,10 +67,32 @@ export default function Index() {
 }
 
 function Header() {
+  const location = useLocation();
+  const showRootTabs = location.pathname === "/";
+  const pageName = location.pathname.split("/")[1];
+  const scrollUp = useCallback(() => {
+    window.scrollTo({ top: 0, behavior: "instant" });
+  }, []);
   return (
-    <header className="flex justify-between items-center self-stretch px-4 gap-6 sticky top-0 md:hidden z-10 bg-bg-color py-1">
+    <header
-      <LogoHeader showText={true} />
+      className={classNames(
-      <NotificationsHeader />
+        { "md:hidden": pageName === "messages" },
+        "flex justify-between items-center self-stretch px-4 gap-6 sticky top-0 z-10 bg-bg-color py-1 md:bg-header md:bg-opacity-50 md:shadow-lg md:backdrop-blur-lg",
+      )}>
+      <div className="md:hidden">
+        <LogoHeader showText={false} />
+      </div>
+      {showRootTabs && <RootTabs base="" />}
+      {!showRootTabs && (
+        <div
+          onClick={scrollUp}
+          className="capitalize cursor-pointer flex-1 text-center p-2 overflow-hidden whitespace-nowrap truncate">
+          {pageName}
+        </div>
+      )}
+      <div className="md:hidden">
+        <NotificationsHeader />
+      </div>
     </header>
   );
 }

packages/app/src/Pages/Notifications/Notifications.tsx

@@ -97,12 +97,6 @@ export default function NotificationsPage({ onClick }: { onClick?: (link: NostrL
 
   return (
     <>
-      <div className="main-content p flex g12 items-center">
-        <Icon name="bell" />
-        <h3 className="my-0">
-          <FormattedMessage defaultMessage="Notifications" id="NAidKb" />
-        </h3>
-      </div>
       <div className="main-content">
         <Suspense fallback={<PageSpinner />}>
           <NotificationGraph evs={myNotifications} />

packages/app/src/Pages/Root.tsx

@@ -16,7 +16,6 @@ import HashTagsPage from "@/Pages/HashTagsPage";
 import SuggestedProfiles from "@/Element/SuggestedProfiles";
 import { TaskList } from "@/Tasks/TaskList";
 import TimelineFollows from "@/Element/Feed/TimelineFollows";
-import { RootTabs } from "@/Element/Feed/RootTabs";
 import { DeckContext } from "@/Pages/DeckLayout";
 import { TopicsPage } from "./TopicsPage";
 import TrendingHashtags from "@/Element/Trending/TrendingHashtags";
@@ -33,9 +32,6 @@ export default function RootPage() {
   const code = getCurrentRefCode();
   return (
     <>
-      <div className="main-content sm:px-4 sm:py-3">
-        <RootTabs base="" />
-      </div>
       <div className="main-content">
         <Outlet />
       </div>

packages/app/src/Pages/SearchPage.tsx

@@ -95,9 +95,6 @@ const SearchPage = () => {
   return (
     <div className="main-content">
       <div className="p flex flex-col g8">
-        <h2>
-          <FormattedMessage defaultMessage="Search" id="xmcVZ0" />
-        </h2>
         <input
           type="text"
           className="w-max"

packages/app/src/Pages/SettingsPage.tsx

@@ -1,5 +1,4 @@
-import { FormattedMessage } from "react-intl";
+import { Outlet, RouteObject } from "react-router-dom";
-import { Outlet, RouteObject, useNavigate } from "react-router-dom";
 import SettingsIndex from "@/Pages/settings/Root";
 import Profile from "@/Pages/settings/Profile";
 import Relay from "@/Pages/settings/Relays";
@@ -12,19 +11,11 @@ import ExportKeys from "@/Pages/settings/Keys";
 import ModerationSettings from "@/Pages/settings/Moderation";
 import { CacheSettings } from "./settings/Cache";
 
-import messages from "./messages";
 import { ReferralsPage } from "./settings/Referrals";
 
 export default function SettingsPage() {
-  const navigate = useNavigate();
-
   return (
     <>
-      <div className="main-content p">
-        <h2 onClick={() => navigate("/settings")} className="pointer">
-          <FormattedMessage {...messages.Settings} />
-        </h2>
-      </div>
       <Outlet />
     </>
   );

packages/app/src/index.css

@@ -4,6 +4,7 @@
 
 :root {
   --bg-color: #000;
+  --header-bg-color: rgba(0, 0, 0, 0.3);
   --nearly-bg-color: #090909;
   --font-color: #fff;
   --font-secondary-color: #a7a7a7;
@@ -80,6 +81,7 @@ html {
 
 html.light {
   --bg-color: #fff;
+  --header-bg-color: rgba(255, 255, 255, 0.3);
   --nearly-bg-color: #f9f9f9;
   --font-color: #0f0f0f;
   --font-secondary-color: #5c6c92;

packages/app/src/lang.json

@@ -1406,9 +1406,6 @@
   "rT14Ow": {
     "defaultMessage": "Add Relays"
   },
-  "rbrahO": {
-    "defaultMessage": "Close"
-  },
   "rfuMjE": {
     "defaultMessage": "(Default)"
   },
@@ -1466,9 +1463,6 @@
   "uc0din": {
     "defaultMessage": "Send sats splits to"
   },
-  "ugyJnE": {
-    "defaultMessage": "Sending notes and other stuff"
-  },
   "un1nGw": {
     "defaultMessage": "{n} notes"
   },

packages/app/src/translations/en.json

@@ -463,7 +463,6 @@
   "r5srDR": "Enter wallet password",
   "rMgF34": "Back up now",
   "rT14Ow": "Add Relays",
-  "rbrahO": "Close",
   "rfuMjE": "(Default)",
   "rmdsT4": "{n} days",
   "rx1i0i": "Short link",
@@ -483,7 +482,6 @@
   "uKqSN+": "Follows Feed",
   "uSV4Ti": "Reposts need to be manually confirmed",
   "uc0din": "Send sats splits to",
-  "ugyJnE": "Sending notes and other stuff",
   "un1nGw": "{n} notes",
   "usAvMr": "Edit Profile",
   "v8lolG": "Start chat",

packages/app/tailwind.config.js

@@ -25,6 +25,9 @@ module.exports = {
       padding: {
         "footer-height": "calc(56px + env(safe-area-inset-bottom))",
       },
+      backgroundColor: {
+        header: "var(--header-bg-color)",
+      },
     },
   },
   plugins: [],