a tool for shared writing and social publishing
moved action buttons on mobile to page title area, publist commented out for now
+36
-51
+3
-1
app/(home-pages)/home/Actions/AccountSettings.tsx
+3
-1
app/(home-pages)/home/Actions/AccountSettings.tsx
···
23
23
side={isMobile ? "top" : "right"}
24
24
align={isMobile ? "center" : "start"}
25
25
className={`max-w-xs w-[1000px] ${state === "theme" && "bg-white!"}`}
26
-
trigger={<ActionButton icon=<AccountSmall /> label="Settings" />}
26
+
trigger={
27
+
<ActionButton smallOnMobile icon=<AccountSmall /> label="Settings" />
28
+
}
27
29
>
28
30
{state === "general" ? (
29
31
<GeneralSettings backToMenu={() => setState("menu")} />
+2
-1
app/(home-pages)/home/Actions/CreateNewButton.tsx
+2
-1
app/(home-pages)/home/Actions/CreateNewButton.tsx
+1
-8
app/(home-pages)/home/HomeLayout.tsx
+1
-8
app/(home-pages)/home/HomeLayout.tsx
···
18
18
DashboardLayout,
19
19
DashboardState,
20
20
useDashboardState,
21
-
PageTitle,
22
21
} from "components/PageLayouts/DashboardLayout";
23
22
import { Actions } from "./Actions/Actions";
24
23
import { GetLeafletDataReturnType } from "app/api/rpc/[command]/get_leaflet_data";
···
29
28
HomeEmptyState,
30
29
PublicationBanner,
31
30
} from "./HomeEmpty/HomeEmpty";
32
-
import { PublicationNavigation } from "components/ActionBar/Publications";
33
31
34
32
export type Leaflet = {
35
33
added_at: string;
···
105
103
),
106
104
},
107
105
}}
108
-
pageTitle={
109
-
<PageTitle
110
-
pageTitle={"Home"}
111
-
controls={<PublicationNavigation currentPage="home" />}
112
-
/>
113
-
}
106
+
pageTitle="Home"
114
107
/>
115
108
);
116
109
};
+2
-11
app/(home-pages)/looseleafs/LooseleafsLayout.tsx
+2
-11
app/(home-pages)/looseleafs/LooseleafsLayout.tsx
···
1
1
"use client";
2
-
import {
3
-
DashboardLayout,
4
-
PageTitle,
5
-
} from "components/PageLayouts/DashboardLayout";
2
+
import { DashboardLayout } from "components/PageLayouts/DashboardLayout";
6
3
import { useState } from "react";
7
4
import { useDebouncedEffect } from "src/hooks/useDebouncedEffect";
8
5
import { Fact, PermissionToken } from "src/replicache";
···
13
10
import useSWR from "swr";
14
11
import { getHomeDocs } from "../home/storage";
15
12
import { Leaflet, LeafletList } from "../home/HomeLayout";
16
-
import { PublicationNavigation } from "components/ActionBar/Publications";
17
13
18
14
export const LooseleafsLayout = (props: {
19
15
entityID: string | null;
···
51
47
),
52
48
},
53
49
}}
54
-
pageTitle={
55
-
<PageTitle
56
-
pageTitle={"Looseleafs"}
57
-
controls={<PublicationNavigation currentPage="looseleafs" />}
58
-
/>
59
-
}
50
+
pageTitle="Looseleafs"
60
51
/>
61
52
);
62
53
};
+1
app/lish/[did]/[publication]/dashboard/Actions.tsx
+1
app/lish/[did]/[publication]/dashboard/Actions.tsx
-1
app/lish/[did]/[publication]/dashboard/DraftList.tsx
-1
app/lish/[did]/[publication]/dashboard/DraftList.tsx
+3
-2
app/lish/[did]/[publication]/dashboard/NewDraftButton.tsx
+3
-2
app/lish/[did]/[publication]/dashboard/NewDraftButton.tsx
···
16
16
let newLeaflet = await createPublicationDraft(props.publication);
17
17
router.push(`/${newLeaflet}`);
18
18
}}
19
-
icon=<AddTiny className="m-1 shrink-0" />
20
-
label="New Draft"
19
+
icon=<AddTiny className="sm:m-1 shrink-0 sm:scale-100 scale-75" />
20
+
smallOnMobile
21
+
label="Draft"
21
22
/>
22
23
);
23
24
}
+1
-13
app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx
+1
-13
app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx
···
8
8
import { PublicationSubscribers } from "./PublicationSubscribers";
9
9
import {
10
10
DashboardLayout,
11
-
PageTitle,
12
11
PublicationDashboardControls,
13
12
} from "components/PageLayouts/DashboardLayout";
14
13
import { useDebouncedEffect } from "src/hooks/useDebouncedEffect";
15
14
import { type NormalizedPublication } from "src/utils/normalizeRecords";
16
-
import { PublicationNavigation } from "components/ActionBar/Publications";
17
15
18
16
export default function PublicationDashboard({
19
17
publication,
···
78
76
actions={<Actions publication={publication.uri} />}
79
77
currentPage="pub"
80
78
publication={publication.uri}
81
-
pageTitle={
82
-
<PageTitle
83
-
pageTitle={record.name}
84
-
controls={
85
-
<PublicationNavigation
86
-
currentPage="pub"
87
-
currentPubUri={publication.uri}
88
-
/>
89
-
}
90
-
/>
91
-
}
79
+
pageTitle={record.name}
92
80
/>
93
81
);
94
82
}
+1
app/lish/[did]/[publication]/dashboard/settings/PublicationSettings.tsx
+1
app/lish/[did]/[publication]/dashboard/settings/PublicationSettings.tsx
+14
-4
components/ActionBar/ActionButton.tsx
+14
-4
components/ActionBar/ActionButton.tsx
···
18
18
className?: string;
19
19
subtext?: string;
20
20
labelOnMobile?: boolean;
21
+
smallOnMobile?: boolean;
21
22
z?: boolean;
22
23
},
23
24
) => {
···
29
30
secondary,
30
31
nav,
31
32
labelOnMobile,
33
+
smallOnMobile,
32
34
subtext,
33
35
className,
34
36
...buttonProps
···
53
55
className={`
54
56
actionButton relative font-bold
55
57
rounded-md border
56
-
flex gap-2 items-start sm:justify-start justify-center
58
+
flex gap-2 items-center justify-start
57
59
p-1 sm:mx-0
58
60
${showLabelOnMobile && "sm:w-full w-max"}
61
+
${smallOnMobile && "sm:text-base text-sm py-0 sm:py-1 sm:h-fit h-6"}
59
62
${
60
63
primary
61
-
? "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"
64
+
? "bg-accent-1 border-accent-1 text-accent-2 transparent-outline sm:hover:outline-accent-contrast focus:outline-accent-1 outline-offset-1 "
62
65
: secondary
63
-
? " 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"
66
+
? " bg-bg-page border-accent-contrast text-accent-contrast transparent-outline focus:outline-accent-contrast sm:hover:outline-accent-contrast outline-offset-1"
64
67
: nav
65
68
? "border-transparent text-secondary sm:hover:border-border justify-start! max-w-full"
66
69
: "border-transparent text-accent-contrast sm:hover:border-accent-contrast"
···
71
74
>
72
75
<div className="shrink-0 flex flex-row gap-0.5">{icon}</div>
73
76
<div
74
-
className={`flex flex-col ${subtext && "leading-snug"} max-w-full min-w-0 ${sidebar.open ? "block" : showLabelOnMobile ? "sm:hidden block" : "hidden"}`}
77
+
className={`flex flex-col ${subtext && "leading-snug"} max-w-full min-w-0 mr-1 ${sidebar.open ? "block" : showLabelOnMobile ? "sm:hidden block" : "hidden"}`}
75
78
>
76
79
<div className="truncate text-left">{label}</div>
77
80
{subtext && (
···
83
86
</button>
84
87
);
85
88
};
89
+
90
+
// ok currently in the middle of making the actions on home, looseleaf, and pub appear at the top by the page title
91
+
// i then need to find a good place for the publication list in the footer
92
+
// but first i really need to refactor action button
93
+
// 1) make a primary variant
94
+
// 2) make a secondary variant
95
+
//
+8
-10
components/PageLayouts/DashboardLayout.tsx
+8
-10
components/PageLayouts/DashboardLayout.tsx
···
141
141
currentPage: navPages;
142
142
publication?: string;
143
143
profileDid?: string;
144
-
actions: React.ReactNode;
145
-
pageTitle?: React.ReactNode;
144
+
actions?: React.ReactNode;
145
+
pageTitle?: string;
146
146
}) {
147
147
const searchParams = useSearchParams();
148
148
const tabParam = searchParams.get("tab");
···
189
189
ref={ref}
190
190
id="home-content"
191
191
>
192
-
{props.pageTitle}
192
+
{props.pageTitle && (
193
+
<PageTitle pageTitle={props.pageTitle} actions={props.actions} />
194
+
)}
193
195
194
196
{Object.keys(props.tabs).length <= 1 && !controls ? null : (
195
197
<>
···
250
252
currentPublicationUri={props.publication}
251
253
currentProfileDid={props.profileDid}
252
254
/>
253
-
{props.actions && (
254
-
<div className="place-self-end flex flex-row-reverse gap-2 ">
255
-
{props.actions}
256
-
</div>
257
-
)}
258
255
</Footer>
259
256
</div>
260
257
</DashboardIdContext.Provider>
···
263
260
264
261
export const PageTitle = (props: {
265
262
pageTitle: string;
266
-
controls: React.ReactNode;
263
+
actions: React.ReactNode;
267
264
}) => {
268
265
return (
269
266
<MediaContents
···
271
268
className="flex justify-between items-center px-1 mt-1 -mb-1 w-full "
272
269
>
273
270
<h4 className="grow truncate">{props.pageTitle}</h4>
274
-
<div className="shrink-0 h-6">{props.controls}</div>
271
+
<div className="flex flex-row-reverse! gap-1">{props.actions}</div>
272
+
{/* <div className="shrink-0 h-6">{props.controls}</div> */}
275
273
</MediaContents>
276
274
);
277
275
};