From e3a9b7ed4fd6293447f3d11582636eac3bb7fea1 Mon Sep 17 00:00:00 2001 From: celine Date: Sat, 31 Jan 2026 01:54:58 -0500 Subject: [PATCH] moved action buttons on mobile to page title area, publist commented out for now --- .../home/Actions/AccountSettings.tsx | 4 +++- .../home/Actions/CreateNewButton.tsx | 3 ++- app/(home-pages)/home/HomeLayout.tsx | 9 +-------- .../looseleafs/LooseleafsLayout.tsx | 13 ++----------- .../[did]/[publication]/dashboard/Actions.tsx | 1 + .../[publication]/dashboard/DraftList.tsx | 1 - .../[publication]/dashboard/NewDraftButton.tsx | 5 +++-- .../dashboard/PublicationDashboard.tsx | 14 +------------- .../dashboard/settings/PublicationSettings.tsx | 1 + components/ActionBar/ActionButton.tsx | 18 ++++++++++++++---- components/PageLayouts/DashboardLayout.tsx | 18 ++++++++---------- 11 files changed, 36 insertions(+), 51 deletions(-) diff --git a/app/(home-pages)/home/Actions/AccountSettings.tsx b/app/(home-pages)/home/Actions/AccountSettings.tsx index 67df4f37..21c87b57 100644 --- a/app/(home-pages)/home/Actions/AccountSettings.tsx +++ b/app/(home-pages)/home/Actions/AccountSettings.tsx @@ -23,7 +23,9 @@ export const AccountSettings = (props: { entityID: string }) => { side={isMobile ? "top" : "right"} align={isMobile ? "center" : "start"} className={`max-w-xs w-[1000px] ${state === "theme" && "bg-white!"}`} - trigger={ label="Settings" />} + trigger={ + label="Settings" /> + } > {state === "general" ? ( setState("menu")} /> diff --git a/app/(home-pages)/home/Actions/CreateNewButton.tsx b/app/(home-pages)/home/Actions/CreateNewButton.tsx index 417c5dcd..454ae7ca 100644 --- a/app/(home-pages)/home/Actions/CreateNewButton.tsx +++ b/app/(home-pages)/home/Actions/CreateNewButton.tsx @@ -26,8 +26,9 @@ export const CreateNewLeafletButton = (props: {}) => { + icon= label="New" + smallOnMobile /> } > diff --git a/app/(home-pages)/home/HomeLayout.tsx b/app/(home-pages)/home/HomeLayout.tsx index 95d22e60..cadc40d5 100644 --- a/app/(home-pages)/home/HomeLayout.tsx +++ b/app/(home-pages)/home/HomeLayout.tsx @@ -18,7 +18,6 @@ import { DashboardLayout, DashboardState, useDashboardState, - PageTitle, } from "components/PageLayouts/DashboardLayout"; import { Actions } from "./Actions/Actions"; import { GetLeafletDataReturnType } from "app/api/rpc/[command]/get_leaflet_data"; @@ -29,7 +28,6 @@ import { HomeEmptyState, PublicationBanner, } from "./HomeEmpty/HomeEmpty"; -import { PublicationNavigation } from "components/ActionBar/Publications"; export type Leaflet = { added_at: string; @@ -105,12 +103,7 @@ export const HomeLayout = (props: { ), }, }} - pageTitle={ - } - /> - } + pageTitle="Home" /> ); }; diff --git a/app/(home-pages)/looseleafs/LooseleafsLayout.tsx b/app/(home-pages)/looseleafs/LooseleafsLayout.tsx index 6c2c982d..c389d6e4 100644 --- a/app/(home-pages)/looseleafs/LooseleafsLayout.tsx +++ b/app/(home-pages)/looseleafs/LooseleafsLayout.tsx @@ -1,8 +1,5 @@ "use client"; -import { - DashboardLayout, - PageTitle, -} from "components/PageLayouts/DashboardLayout"; +import { DashboardLayout } from "components/PageLayouts/DashboardLayout"; import { useState } from "react"; import { useDebouncedEffect } from "src/hooks/useDebouncedEffect"; import { Fact, PermissionToken } from "src/replicache"; @@ -13,7 +10,6 @@ import { useIdentityData } from "components/IdentityProvider"; import useSWR from "swr"; import { getHomeDocs } from "../home/storage"; import { Leaflet, LeafletList } from "../home/HomeLayout"; -import { PublicationNavigation } from "components/ActionBar/Publications"; export const LooseleafsLayout = (props: { entityID: string | null; @@ -51,12 +47,7 @@ export const LooseleafsLayout = (props: { ), }, }} - pageTitle={ - } - /> - } + pageTitle="Looseleafs" /> ); }; diff --git a/app/lish/[did]/[publication]/dashboard/Actions.tsx b/app/lish/[did]/[publication]/dashboard/Actions.tsx index ba945f35..92a7b9de 100644 --- a/app/lish/[did]/[publication]/dashboard/Actions.tsx +++ b/app/lish/[did]/[publication]/dashboard/Actions.tsx @@ -38,6 +38,7 @@ function PublicationShareButton() { icon= label="Share" onClick={() => {}} + smallOnMobile /> } > diff --git a/app/lish/[did]/[publication]/dashboard/DraftList.tsx b/app/lish/[did]/[publication]/dashboard/DraftList.tsx index ac78e380..49ff4514 100644 --- a/app/lish/[did]/[publication]/dashboard/DraftList.tsx +++ b/app/lish/[did]/[publication]/dashboard/DraftList.tsx @@ -1,6 +1,5 @@ "use client"; -import { NewDraftSecondaryButton } from "./NewDraftButton"; import React from "react"; import { usePublicationData, diff --git a/app/lish/[did]/[publication]/dashboard/NewDraftButton.tsx b/app/lish/[did]/[publication]/dashboard/NewDraftButton.tsx index 915fa734..a24652ba 100644 --- a/app/lish/[did]/[publication]/dashboard/NewDraftButton.tsx +++ b/app/lish/[did]/[publication]/dashboard/NewDraftButton.tsx @@ -16,8 +16,9 @@ export function NewDraftActionButton(props: { publication: string }) { let newLeaflet = await createPublicationDraft(props.publication); router.push(`/${newLeaflet}`); }} - icon= - label="New Draft" + icon= + smallOnMobile + label="Draft" /> ); } diff --git a/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx b/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx index 505092e4..0821c232 100644 --- a/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx +++ b/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx @@ -8,12 +8,10 @@ import { PublishedPostsList } from "./PublishedPostsLists"; import { PublicationSubscribers } from "./PublicationSubscribers"; import { DashboardLayout, - PageTitle, PublicationDashboardControls, } from "components/PageLayouts/DashboardLayout"; import { useDebouncedEffect } from "src/hooks/useDebouncedEffect"; import { type NormalizedPublication } from "src/utils/normalizeRecords"; -import { PublicationNavigation } from "components/ActionBar/Publications"; export default function PublicationDashboard({ publication, @@ -78,17 +76,7 @@ export default function PublicationDashboard({ actions={} currentPage="pub" publication={publication.uri} - pageTitle={ - - } - /> - } + pageTitle={record.name} /> ); } diff --git a/app/lish/[did]/[publication]/dashboard/settings/PublicationSettings.tsx b/app/lish/[did]/[publication]/dashboard/settings/PublicationSettings.tsx index 0b85e548..92f72613 100644 --- a/app/lish/[did]/[publication]/dashboard/settings/PublicationSettings.tsx +++ b/app/lish/[did]/[publication]/dashboard/settings/PublicationSettings.tsx @@ -34,6 +34,7 @@ export function PublicationSettingsButton(props: { publication: string }) { id="pub-settings-button" icon= label="Settings" + smallOnMobile /> } > diff --git a/components/ActionBar/ActionButton.tsx b/components/ActionBar/ActionButton.tsx index 5355a62c..6a4ebd46 100644 --- a/components/ActionBar/ActionButton.tsx +++ b/components/ActionBar/ActionButton.tsx @@ -18,6 +18,7 @@ export const ActionButton = ( className?: string; subtext?: string; labelOnMobile?: boolean; + smallOnMobile?: boolean; z?: boolean; }, ) => { @@ -29,6 +30,7 @@ export const ActionButton = ( secondary, nav, labelOnMobile, + smallOnMobile, subtext, className, ...buttonProps @@ -53,14 +55,15 @@ export const ActionButton = ( className={` actionButton relative font-bold rounded-md border - flex gap-2 items-start sm:justify-start justify-center + flex gap-2 items-center justify-start p-1 sm:mx-0 ${showLabelOnMobile && "sm:w-full w-max"} + ${smallOnMobile && "sm:text-base text-sm py-0 sm:py-1 sm:h-fit h-6"} ${ primary - ? "bg-accent-1 border-accent-1 text-accent-2 transparent-outline sm:hover:outline-accent-contrast focus:outline-accent-1 outline-offset-1 mx-1 first:ml-0" + ? "bg-accent-1 border-accent-1 text-accent-2 transparent-outline sm:hover:outline-accent-contrast focus:outline-accent-1 outline-offset-1 " : secondary - ? " bg-bg-page border-accent-contrast text-accent-contrast transparent-outline focus:outline-accent-contrast sm:hover:outline-accent-contrast outline-offset-1 mx-1 first:ml-0" + ? " bg-bg-page border-accent-contrast text-accent-contrast transparent-outline focus:outline-accent-contrast sm:hover:outline-accent-contrast outline-offset-1" : nav ? "border-transparent text-secondary sm:hover:border-border justify-start! max-w-full" : "border-transparent text-accent-contrast sm:hover:border-accent-contrast" @@ -71,7 +74,7 @@ export const ActionButton = ( >
{icon}
{label}
{subtext && ( @@ -83,3 +86,10 @@ export const ActionButton = ( ); }; + +// ok currently in the middle of making the actions on home, looseleaf, and pub appear at the top by the page title +// i then need to find a good place for the publication list in the footer +// but first i really need to refactor action button +// 1) make a primary variant +// 2) make a secondary variant +// \ No newline at end of file diff --git a/components/PageLayouts/DashboardLayout.tsx b/components/PageLayouts/DashboardLayout.tsx index c33256f5..f578e73b 100644 --- a/components/PageLayouts/DashboardLayout.tsx +++ b/components/PageLayouts/DashboardLayout.tsx @@ -141,8 +141,8 @@ export function DashboardLayout< currentPage: navPages; publication?: string; profileDid?: string; - actions: React.ReactNode; - pageTitle?: React.ReactNode; + actions?: React.ReactNode; + pageTitle?: string; }) { const searchParams = useSearchParams(); const tabParam = searchParams.get("tab"); @@ -189,7 +189,9 @@ export function DashboardLayout< ref={ref} id="home-content" > - {props.pageTitle} + {props.pageTitle && ( + + )} {Object.keys(props.tabs).length <= 1 && !controls ? null : ( <> @@ -250,11 +252,6 @@ export function DashboardLayout< currentPublicationUri={props.publication} currentProfileDid={props.profileDid} /> - {props.actions && ( -
- {props.actions} -
- )}
@@ -263,7 +260,7 @@ export function DashboardLayout< export const PageTitle = (props: { pageTitle: string; - controls: React.ReactNode; + actions: React.ReactNode; }) => { return (

{props.pageTitle}

-
{props.controls}
+
{props.actions}
+ {/*
{props.controls}
*/} ); }; -- 2.54.0