From 5cee5e225dfab3b57f7fb3007563ed16c2689eaa Mon Sep 17 00:00:00 2001 From: celine Date: Thu, 5 Sep 2024 14:57:05 -0400 Subject: [PATCH] Renaming things (#59) * renamed Doc => Leaflet mostly touched things in home, but couldnt rename things in /storage without needing a migration so lef that alone * renamed Page => Leaflet mostly touched things in theming * renamed card => page but not the attributes, cause those need a speical migration * rename theme variable * remove unnessecary path revalidation --------- Co-authored-by: Jared Pereira --- actions/{addLinkCard.ts => addPageLink.ts} | 2 +- .../{createNewDoc.ts => createNewLeaflet.ts} | 2 +- actions/{deleteDoc.ts => deleteLeaflet.ts} | 4 +- .../subscriptions/sendPostToSubscribers.ts | 12 +- .../subscribeToMailboxWithEmail.ts | 2 +- .../Doc.tsx => [leaflet_id]/Leaflet.tsx} | 30 ++--- app/{[doc_id] => [leaflet_id]}/icon.tsx | 8 +- .../opengraph-image.tsx | 4 +- app/{[doc_id] => [leaflet_id]}/page.tsx | 24 ++-- app/globals.css | 23 ++-- app/home/DocsList.tsx | 34 ----- app/home/HomeHelp.tsx | 6 +- app/home/LeafletList.tsx | 37 ++++++ .../{DocOptions.tsx => LeafletOptions.tsx} | 12 +- .../{DocPreview.tsx => LeafletPreview.tsx} | 50 +++---- app/home/icon.tsx | 4 +- app/home/page.tsx | 11 +- app/layout.tsx | 4 +- app/route.ts | 4 +- components/Blocks/Block.tsx | 4 +- components/Blocks/BlockOptions.tsx | 22 ++-- components/Blocks/DeleteBlock.tsx | 14 +- components/Blocks/ExternalLinkBlock.tsx | 2 +- components/Blocks/MailboxBlock.tsx | 37 +++--- .../{CardBlock.tsx => PageLinkBlock.tsx} | 69 +++++----- components/Blocks/TextBlock/index.tsx | 8 +- components/Blocks/TextBlock/keymap.ts | 62 +++++---- components/Blocks/index.tsx | 4 +- components/Blocks/useBlockKeyboardHandlers.ts | 4 +- components/DesktopFooter.tsx | 10 +- components/Icons.tsx | 2 +- components/Layout.tsx | 4 +- components/MobileFooter.tsx | 4 +- components/{Cards.tsx => Pages.tsx} | 122 +++++++++--------- components/Popover.tsx | 4 +- components/SelectionManager.tsx | 6 +- components/ShareOptions/index.tsx | 2 +- components/ThemeManager/ThemeProvider.tsx | 50 +++---- components/ThemeManager/ThemeSetter.tsx | 60 ++++----- components/Toolbar/HighlightToolbar.tsx | 10 +- components/Toolbar/index.tsx | 10 +- ...oHomepage.tsx => AddLeafletToHomepage.tsx} | 2 +- ...tePageTitle.tsx => UpdateLeafletTitle.tsx} | 2 +- .../{useDocMetadata.ts => usePageMetadata.ts} | 2 +- src/replicache/attributes.ts | 5 +- src/replicache/mutations.ts | 12 +- src/useUIState.ts | 20 +-- src/utils/addLinkBlock.ts | 4 +- src/utils/elementId.ts | 2 +- tailwind.config.js | 8 +- 50 files changed, 429 insertions(+), 411 deletions(-) rename actions/{addLinkCard.ts => addPageLink.ts} (97%) rename actions/{createNewDoc.ts => createNewLeaflet.ts} (98%) rename actions/{deleteDoc.ts => deleteLeaflet.ts} (91%) rename app/{[doc_id]/Doc.tsx => [leaflet_id]/Leaflet.tsx} (59%) rename app/{[doc_id] => [leaflet_id]}/icon.tsx (96%) rename app/{[doc_id] => [leaflet_id]}/opengraph-image.tsx (86%) rename app/{[doc_id] => [leaflet_id]}/page.tsx (87%) delete mode 100644 app/home/DocsList.tsx create mode 100644 app/home/LeafletList.tsx rename app/home/{DocOptions.tsx => LeafletOptions.tsx} (79%) rename app/home/{DocPreview.tsx => LeafletPreview.tsx} (63%) rename components/Blocks/{CardBlock.tsx => PageLinkBlock.tsx} (57%) rename components/{Cards.tsx => Pages.tsx} (70%) rename components/utils/{AddDocToHomepage.tsx => AddLeafletToHomepage.tsx} (90%) rename components/utils/{UpdatePageTitle.tsx => UpdateLeafletTitle.tsx} (96%) rename src/hooks/queries/{useDocMetadata.ts => usePageMetadata.ts} (80%) diff --git a/actions/addLinkCard.ts b/actions/addPageLink.ts similarity index 97% rename from actions/addLinkCard.ts rename to actions/addPageLink.ts index 24e130d5..6d5e83c8 100644 --- a/actions/addLinkCard.ts +++ b/actions/addPageLink.ts @@ -7,7 +7,7 @@ let supabase = createClient( process.env.SUPABASE_SERVICE_ROLE_KEY as string, ); -export async function addLinkCard(args: { link: string }) { +export async function addPageLink(args: { link: string }) { let result = await get_url_preview_data(args.link); return result; } diff --git a/actions/createNewDoc.ts b/actions/createNewLeaflet.ts similarity index 98% rename from actions/createNewDoc.ts rename to actions/createNewLeaflet.ts index 2fbb6395..fa072ec6 100644 --- a/actions/createNewDoc.ts +++ b/actions/createNewLeaflet.ts @@ -13,7 +13,7 @@ import postgres from "postgres"; import { v7 } from "uuid"; import { sql } from "drizzle-orm"; -export async function createNewDoc() { +export async function createNewLeaflet() { const client = postgres(process.env.DB_URL as string, { idle_timeout: 5 }); const db = drizzle(client); let { permissionToken } = await db.transaction(async (tx) => { diff --git a/actions/deleteDoc.ts b/actions/deleteLeaflet.ts similarity index 91% rename from actions/deleteDoc.ts rename to actions/deleteLeaflet.ts index 28929496..4b8a42dd 100644 --- a/actions/deleteDoc.ts +++ b/actions/deleteLeaflet.ts @@ -14,7 +14,7 @@ import { cookies } from "next/headers"; import { PermissionToken } from "src/replicache"; import { revalidatePath } from "next/cache"; -export async function deleteDoc(permission_token: PermissionToken) { +export async function deleteLeaflet(permission_token: PermissionToken) { const client = postgres(process.env.DB_URL as string, { idle_timeout: 5 }); const db = drizzle(client); await db.transaction(async (tx) => { @@ -36,5 +36,5 @@ export async function deleteDoc(permission_token: PermissionToken) { .where(eq(permission_tokens.id, permission_token.id)); }); client.end(); - return revalidatePath("/docs"); + return ; } diff --git a/actions/subscriptions/sendPostToSubscribers.ts b/actions/subscriptions/sendPostToSubscribers.ts index f835a902..d51e5d75 100644 --- a/actions/subscriptions/sendPostToSubscribers.ts +++ b/actions/subscriptions/sendPostToSubscribers.ts @@ -12,7 +12,7 @@ import { Database } from "supabase/database.types"; let supabase = createServerClient( process.env.NEXT_PUBLIC_SUPABASE_API_URL as string, process.env.SUPABASE_SERVICE_ROLE_KEY as string, - { cookies: {} } + { cookies: {} }, ); export async function sendPostToSubscribers({ title, @@ -36,7 +36,7 @@ export async function sendPostToSubscribers({ .eq("id", permission_token.id) .single(); let rootEntity = token_rights.data?.root_entity; - if (!rootEntity || !token_rights.data) return { title: "Doc not found" }; + if (!rootEntity || !token_rights.data) return { title: "Leaflet not found" }; let { data } = await supabase.rpc("get_facts", { root: rootEntity, }); @@ -51,7 +51,7 @@ export async function sendPostToSubscribers({ let entity_set = subscribers[0]?.entities.set; if ( !token_rights.data.permission_token_rights.find( - (r) => r.entity_set === entity_set + (r) => r.entity_set === entity_set, ) ) { return; @@ -80,19 +80,19 @@ export async function sendPostToSubscribers({ Subject: `New Mail in: ${title}`, To: sub.email_subscriptions_to_entity.email, HtmlBody: ` - You've got new mail from + You've got new mail from ${title}!
${contents.html}
Manage your subscription at - + ${title} `, TextBody: contents.markdown, - })) + })), ), }); client.end(); diff --git a/actions/subscriptions/subscribeToMailboxWithEmail.ts b/actions/subscriptions/subscribeToMailboxWithEmail.ts index 2122a454..22f8033f 100644 --- a/actions/subscriptions/subscribeToMailboxWithEmail.ts +++ b/actions/subscriptions/subscribeToMailboxWithEmail.ts @@ -98,7 +98,7 @@ async function getPageTitle(root_entity: string) { let text = initialFacts.find( (f) => f.entity === title.value && f.attribute === "block/text", ) as Fact<"block/text"> | undefined; - if (!text) return "Untitled Doc"; + if (!text) return "Untitled Leaflet"; let doc = new Y.Doc(); const update = base64.toByteArray(text.data.value); Y.applyUpdate(doc, update); diff --git a/app/[doc_id]/Doc.tsx b/app/[leaflet_id]/Leaflet.tsx similarity index 59% rename from app/[doc_id]/Doc.tsx rename to app/[leaflet_id]/Leaflet.tsx index 91b082dc..43fdf4c4 100644 --- a/app/[doc_id]/Doc.tsx +++ b/app/[leaflet_id]/Leaflet.tsx @@ -3,7 +3,7 @@ import { Database } from "../../supabase/database.types"; import { Attributes } from "src/replicache/attributes"; import { createServerClient } from "@supabase/ssr"; import { SelectionManager } from "components/SelectionManager"; -import { Cards } from "components/Cards"; +import { Pages } from "components/Pages"; import { ThemeBackgroundProvider, ThemeProvider, @@ -15,36 +15,36 @@ import { EntitySetContext, EntitySetProvider, } from "components/EntitySetProvider"; -import { UpdatePageTitle } from "components/utils/UpdatePageTitle"; -import { AddDocToHomepage } from "components/utils/AddDocToHomepage"; -export function Doc(props: { +import { AddLeafletToHomepage } from "components/utils/AddLeafletToHomepage"; +import { UpdateLeafletTitle } from "components/utils/UpdateLeafletTitle"; +export function Leaflet(props: { token: PermissionToken; initialFacts: Fact[]; - doc_id: string; + leaflet_id: string; }) { return ( - - - - + + + + - + diff --git a/app/[doc_id]/icon.tsx b/app/[leaflet_id]/icon.tsx similarity index 96% rename from app/[doc_id]/icon.tsx rename to app/[leaflet_id]/icon.tsx index a73e8ccf..ea793bb6 100644 --- a/app/[doc_id]/icon.tsx +++ b/app/[leaflet_id]/icon.tsx @@ -24,11 +24,11 @@ let supabase = createServerClient( process.env.SUPABASE_SERVICE_ROLE_KEY as string, { cookies: {} }, ); -export default async function Icon(props: { params: { doc_id: string } }) { +export default async function Icon(props: { params: { leaflet_id: string } }) { let res = await supabase .from("permission_tokens") .select("*, permission_token_rights(*)") - .eq("id", props.params.doc_id) + .eq("id", props.params.leaflet_id) .single(); let rootEntity = res.data?.root_entity; let outlineColor, fillColor; @@ -38,7 +38,7 @@ export default async function Icon(props: { params: { doc_id: string } }) { }); let initialFacts = (data as unknown as Fact[]) || []; - let themeCardBG = initialFacts.find( + let themePageBG = initialFacts.find( (f) => f.attribute === "theme/card-background", ) as Fact<"theme/card-background"> | undefined; @@ -46,7 +46,7 @@ export default async function Icon(props: { params: { doc_id: string } }) { (f) => f.attribute === "theme/primary", ) as Fact<"theme/primary"> | undefined; - outlineColor = parseHSBToRGB(`hsba(${themeCardBG?.data.value})`); + outlineColor = parseHSBToRGB(`hsba(${themePageBG?.data.value})`); fillColor = parseHSBToRGB(`hsba(${themePrimary?.data.value})`); } diff --git a/app/[doc_id]/opengraph-image.tsx b/app/[leaflet_id]/opengraph-image.tsx similarity index 86% rename from app/[doc_id]/opengraph-image.tsx rename to app/[leaflet_id]/opengraph-image.tsx index b3d0e4bf..177389ba 100644 --- a/app/[doc_id]/opengraph-image.tsx +++ b/app/[leaflet_id]/opengraph-image.tsx @@ -2,13 +2,13 @@ import { headers } from "next/headers"; import { ImageResponse } from "next/og"; export const runtime = "edge"; export default async function OpenGraphImage(props: { - params: { doc_id: string }; + params: { leaflet_id: string }; }) { if (process.env.NODE_ENV === "development") return; const headersList = headers(); const hostname = headersList.get("x-forwarded-host"); let protocol = headersList.get("x-forwarded-proto"); - let path = `${protocol}://${hostname}/${props.params.doc_id}`; + let path = `${protocol}://${hostname}/${props.params.leaflet_id}`; let response = await fetch( `https://pro.microlink.io/?url=${path}&screenshot=true&&viewport.width=1200&viewport.height=630&meta=false&embed=screenshot.url`, { diff --git a/app/[doc_id]/page.tsx b/app/[leaflet_id]/page.tsx similarity index 87% rename from app/[doc_id]/page.tsx rename to app/[leaflet_id]/page.tsx index ff01d147..8fd8df0a 100644 --- a/app/[doc_id]/page.tsx +++ b/app/[leaflet_id]/page.tsx @@ -7,7 +7,7 @@ import { Database } from "../../supabase/database.types"; import { Attributes } from "src/replicache/attributes"; import { createServerClient } from "@supabase/ssr"; import { YJSFragmentToString } from "components/Blocks/TextBlock/RenderYJSFragment"; -import { Doc } from "./Doc"; +import { Leaflet } from "./Leaflet"; export const preferredRegion = ["sfo1"]; export const dynamic = "force-dynamic"; @@ -19,20 +19,20 @@ let supabase = createServerClient( { cookies: {} }, ); type Props = { - // this is now a token id not doc! Should probs rename - params: { doc_id: string }; + // this is now a token id not leaflet! Should probs rename + params: { leaflet_id: string }; }; -export default async function DocumentPage(props: Props) { +export default async function LeafletPage(props: Props) { let res = await supabase .from("permission_tokens") .select("*, permission_token_rights(*) ") - .eq("id", props.params.doc_id) + .eq("id", props.params.leaflet_id) .single(); let rootEntity = res.data?.root_entity; if (!rootEntity || !res.data) return ( -
-
+
+
Hmmm... Couldn't find that leaflet.
@@ -52,7 +52,11 @@ export default async function DocumentPage(props: Props) { }); let initialFacts = (data as unknown as Fact[]) || []; return ( - + ); } @@ -60,10 +64,10 @@ export async function generateMetadata(props: Props): Promise { let res = await supabase .from("permission_tokens") .select("*, permission_token_rights(*)") - .eq("id", props.params.doc_id) + .eq("id", props.params.leaflet_id) .single(); let rootEntity = res.data?.root_entity; - if (!rootEntity || !res.data) return { title: "Doc not found" }; + if (!rootEntity || !res.data) return { title: "Leaflet not found" }; let { data } = await supabase.rpc("get_facts", { root: rootEntity, }); diff --git a/app/globals.css b/app/globals.css index 6fc5c9fc..35415df8 100644 --- a/app/globals.css +++ b/app/globals.css @@ -4,9 +4,9 @@ @layer base { :root { - --bg-page: 240, 247, 250; - --bg-card: 255, 255, 255; - --bg-card-alpha: 1; + --bg-leaflet: 240, 247, 250; + --bg-page: 255, 255, 255; + --bg-page-alpha: 1; --primary: 39, 39, 39; @@ -19,8 +19,8 @@ --highlight-3: 224, 244, 255; --list-marker-width: 36px; - --card-width-unitless: min(624, calc(var(--page-width-unitless) - 12)); - --card-width-units: min(624px, calc(100vw - 12px)); + --page-width-unitless: min(624, calc(var(--leaflet-width-unitless) - 12)); + --page-width-units: min(624px, calc(100vw - 12px)); } @media (max-width: 640px) { :root { @@ -30,18 +30,21 @@ @media (min-width: 640px) { :root { - --card-width-unitless: min(624, calc(var(--page-width-unitless) - 128)); - --card-width-units: min(624px, calc(100vw - 128px)); + --page-width-unitless: min( + 624, + calc(var(--leaflet-width-unitless) - 128) + ); + --page-width-units: min(624px, calc(100vw - 128px)); } } @media (min-width: 1280px) { :root { - --card-width-unitless: min( + --page-width-unitless: min( 624, - calc((var(--page-width-unitless) / 2) - 32) + calc((var(--leaflet-width-unitless) / 2) - 32) ); - --card-width-units: min(624px, calc((100vw / 2) - 32px)); + --page-width-units: min(624px, calc((100vw / 2) - 32px)); } } diff --git a/app/home/DocsList.tsx b/app/home/DocsList.tsx deleted file mode 100644 index b2f34379..00000000 --- a/app/home/DocsList.tsx +++ /dev/null @@ -1,34 +0,0 @@ -"use client"; - -import { useEffect, useState } from "react"; -import { getHomeDocs, HomeDoc } from "./storage"; -import useSWR from "swr"; -import { ReplicacheProvider } from "src/replicache"; -import { DocPreview } from "./DocPreview"; - -export function DocsList() { - let { data: docs } = useSWR("docs", () => getHomeDocs(), { - fallbackData: [], - }); - - return ( -
-
- {docs - .sort((a, b) => (a.added_at > b.added_at ? -1 : 1)) - .filter((d) => !d.hidden) - .map(({ token: doc }) => ( - - - - ))} -
-
- ); -} diff --git a/app/home/HomeHelp.tsx b/app/home/HomeHelp.tsx index 87da62f1..b86f6567 100644 --- a/app/home/HomeHelp.tsx +++ b/app/home/HomeHelp.tsx @@ -23,8 +23,8 @@ export const HomeHelp = () => { >

- Docs are saved to home per-device / browser using - cookies. + Leaflets are saved to home per-device / browser{" "} + using cookies.

@@ -33,7 +33,7 @@ export const HomeHelp = () => {

Please contact us{" "} - for help recovering docs! + for help recovering Leaflets!

diff --git a/app/home/LeafletList.tsx b/app/home/LeafletList.tsx new file mode 100644 index 00000000..970a744b --- /dev/null +++ b/app/home/LeafletList.tsx @@ -0,0 +1,37 @@ +"use client"; + +import { useEffect, useState } from "react"; +import { getHomeDocs, HomeDoc } from "./storage"; +import useSWR from "swr"; +import { ReplicacheProvider } from "src/replicache"; +import { LeafletPreview } from "./LeafletPreview"; + +export function LeafletList() { + let { data: leaflets } = useSWR("leaflets", () => getHomeDocs(), { + fallbackData: [], + }); + + return ( +
+
+ {leaflets + .sort((a, b) => (a.added_at > b.added_at ? -1 : 1)) + .filter((d) => !d.hidden) + .map(({ token: leaflet }) => ( + + + + ))} +
+
+ ); +} diff --git a/app/home/DocOptions.tsx b/app/home/LeafletOptions.tsx similarity index 79% rename from app/home/DocOptions.tsx rename to app/home/LeafletOptions.tsx index 4d5bd76e..cdba48c9 100644 --- a/app/home/DocOptions.tsx +++ b/app/home/LeafletOptions.tsx @@ -3,10 +3,10 @@ import { DeleteSmall, MoreOptionsTiny } from "components/Icons"; import { Menu, MenuItem } from "components/Layout"; import { PermissionToken } from "src/replicache"; import { mutate } from "swr"; -import { hideDoc, removeDocFromHome } from "./storage"; +import { hideDoc } from "./storage"; -export const DocOptions = (props: { - doc: PermissionToken; +export const LeafletOptions = (props: { + leaflet: PermissionToken; setState: (s: "normal" | "deleting") => void; }) => { return ( @@ -20,8 +20,8 @@ export const DocOptions = (props: { > { - hideDoc(props.doc); - mutate("docs"); + hideDoc(props.leaflet); + mutate("leaflets"); }} > Hide from home{" "} @@ -32,7 +32,7 @@ export const DocOptions = (props: { }} > - Delete Doc + Delete Leaflet diff --git a/app/home/DocPreview.tsx b/app/home/LeafletPreview.tsx similarity index 63% rename from app/home/DocPreview.tsx rename to app/home/LeafletPreview.tsx index 2d2d9638..3b889074 100644 --- a/app/home/DocPreview.tsx +++ b/app/home/LeafletPreview.tsx @@ -1,5 +1,5 @@ "use client"; -import { BlockPreview, CardPreview } from "components/Blocks/CardBlock"; +import { BlockPreview, PagePreview } from "components/Blocks/PageLinkBlock"; import { ThemeBackgroundProvider, ThemeProvider, @@ -8,54 +8,54 @@ import { useRef, useState } from "react"; import { Link } from "react-aria-components"; import { useBlocks } from "src/hooks/queries/useBlocks"; import { PermissionToken } from "src/replicache"; -import { DocOptions } from "./DocOptions"; -import { deleteDoc } from "actions/deleteDoc"; +import { deleteLeaflet } from "actions/deleteLeaflet"; import { removeDocFromHome } from "./storage"; import { mutate } from "swr"; import useMeasure from "react-use-measure"; import { ButtonPrimary } from "components/Buttons"; +import { LeafletOptions } from "./LeafletOptions"; -export const DocPreview = (props: { +export const LeafletPreview = (props: { token: PermissionToken; - doc_id: string; + leaflet_id: string; }) => { let [state, setState] = useState<"normal" | "deleting">("normal"); return (
- -
+ +
{state === "normal" ? ( - -
+ +
- +
) : ( - + )}
- +
); }; -const DocContent = (props: { entityID: string }) => { +const LeafletContent = (props: { entityID: string }) => { let blocks = useBlocks(props.entityID); let previewRef = useRef(null); let [ref, dimensions] = useMeasure(); @@ -63,14 +63,14 @@ const DocContent = (props: { entityID: string }) => { return (
{blocks.slice(0, 10).map((b, index, arr) => { @@ -91,27 +91,29 @@ const DocContent = (props: { entityID: string }) => { ); }; -const DocAreYouSure = (props: { +const LeafletAreYouSure = (props: { token: PermissionToken; setState: (s: "normal" | "deleting") => void; }) => { return (
-
Permanently delete this doc?
+
+ Permanently delete this Leaflet? +
{ e.stopPropagation(); e.preventDefault(); - deleteDoc(props.token); + deleteLeaflet(props.token); removeDocFromHome(props.token); - mutate("docs"); + mutate("leaflets"); }} > Delete diff --git a/app/home/icon.tsx b/app/home/icon.tsx index e1b89452..d184e55d 100644 --- a/app/home/icon.tsx +++ b/app/home/icon.tsx @@ -51,7 +51,7 @@ export default async function Icon() { }); let initialFacts = (data as unknown as Fact[]) || []; - let themeCardBG = initialFacts.find( + let themePageBG = initialFacts.find( (f) => f.attribute === "theme/card-background", ) as Fact<"theme/card-background"> | undefined; @@ -59,7 +59,7 @@ export default async function Icon() { (f) => f.attribute === "theme/primary", ) as Fact<"theme/primary"> | undefined; - outlineColor = parseHSBToRGB(`hsba(${themeCardBG?.data.value})`); + outlineColor = parseHSBToRGB(`hsba(${themePageBG?.data.value})`); fillColor = parseHSBToRGB(`hsba(${themePrimary?.data.value})`); } diff --git a/app/home/page.tsx b/app/home/page.tsx index 91ae8ab0..d3de71fe 100644 --- a/app/home/page.tsx +++ b/app/home/page.tsx @@ -3,7 +3,6 @@ import { cookies } from "next/headers"; import { Fact, ReplicacheProvider } from "src/replicache"; import { createServerClient } from "@supabase/ssr"; import { Database } from "supabase/database.types"; -import { DocPreview } from "./DocPreview"; import { Attributes } from "src/replicache/attributes"; import { ThemeBackgroundProvider, @@ -11,14 +10,14 @@ import { } from "components/ThemeManager/ThemeProvider"; import { EntitySetProvider } from "components/EntitySetProvider"; import { ThemePopover } from "components/ThemeManager/ThemeSetter"; -import { createNewDoc } from "actions/createNewDoc"; +import { createNewLeaflet } from "actions/createNewLeaflet"; import { createIdentity } from "actions/createIdentity"; import postgres from "postgres"; import { drizzle } from "drizzle-orm/postgres-js"; import { IdentitySetter } from "./IdentitySetter"; import { HoverButton } from "components/Buttons"; import { HomeHelp } from "./HomeHelp"; -import { DocsList } from "./DocsList"; +import { LeafletList } from "./LeafletList"; let supabase = createServerClient( process.env.NEXT_PUBLIC_SUPABASE_API_URL as string, @@ -72,11 +71,11 @@ export default async function Home() { set={res.data.permission_tokens.permission_token_rights[0].entity_set} > -
+
-
+
- +
diff --git a/app/layout.tsx b/app/layout.tsx index 0aca79a2..b2cc4f35 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -41,8 +41,8 @@ export default function RootLayout({ __html: ` let listener = () => { let el = document.querySelector(":root"); - el.style.setProperty("--page-height-unitless", window.innerHeight) - el.style.setProperty("--page-width-unitless", window.innerWidth) + el.style.setProperty("--leaflet-height-unitless", window.innerHeight) + el.style.setProperty("--leaflet-width-unitless", window.innerWidth) } listener() window.addEventListener("resize", listener) diff --git a/app/route.ts b/app/route.ts index 1fa9fa68..386ebcc4 100644 --- a/app/route.ts +++ b/app/route.ts @@ -1,9 +1,9 @@ -import { createNewDoc } from "actions/createNewDoc"; +import { createNewLeaflet } from "actions/createNewLeaflet"; export const preferredRegion = ["sfo1"]; export const dynamic = "force-dynamic"; export const fetchCache = "force-no-store"; export async function GET() { - await createNewDoc(); + await createNewLeaflet(); } diff --git a/components/Blocks/Block.tsx b/components/Blocks/Block.tsx index b13555a1..b6c25119 100644 --- a/components/Blocks/Block.tsx +++ b/components/Blocks/Block.tsx @@ -10,7 +10,7 @@ import { focusBlock } from "src/utils/focusBlock"; import { TextBlock } from "components/Blocks/TextBlock"; import { ImageBlock } from "./ImageBlock"; -import { CardBlock } from "./CardBlock"; +import { PageLinkBlock } from "./PageLinkBlock"; import { ExternalLinkBlock } from "./ExternalLinkBlock"; import { MailboxBlock } from "./MailboxBlock"; import { HeadingBlock } from "./HeadingBlock"; @@ -123,7 +123,7 @@ export const BaseBlock = ( ) : ( <> {props.type === "card" ? ( - + ) : props.type === "text" ? ( ) : props.type === "heading" ? ( diff --git a/components/Blocks/BlockOptions.tsx b/components/Blocks/BlockOptions.tsx index d8ef577b..a39e5bf7 100644 --- a/components/Blocks/BlockOptions.tsx +++ b/components/Blocks/BlockOptions.tsx @@ -1,7 +1,7 @@ import { useEntity, useReplicache } from "src/replicache"; import { useUIState } from "src/useUIState"; import { - BlockCardSmall, + BlockPageLinkSmall, BlockImageSmall, BlockLinkSmall, CheckTiny, @@ -16,7 +16,7 @@ import { } from "components/Icons"; import { generateKeyBetween } from "fractional-indexing"; import { addImage } from "src/utils/addImage"; -import { focusCard } from "components/Cards"; +import { focusPage } from "components/Pages"; import { useState } from "react"; import { Separator } from "components/Layout"; import { addLinkBlock } from "src/utils/addLinkBlock"; @@ -49,8 +49,8 @@ export function BlockOptions(props: Props) { >("default"); let focusedElement = useUIState((s) => s.focusedEntity); - let focusedCardID = - focusedElement?.entityType === "card" + let focusedPageID = + focusedElement?.entityType === "page" ? focusedElement.entityID : focusedElement?.parent; @@ -111,7 +111,7 @@ export function BlockOptions(props: Props) { { let entity; @@ -137,19 +137,19 @@ export function BlockOptions(props: Props) { data: { type: "block-type-union", value: "card" }, }); } - let newCard = v7(); - await rep?.mutate.addCardBlock({ + let newPage = v7(); + await rep?.mutate.addPageLinkBlock({ blockEntity: entity, firstBlockFactID: v7(), firstBlockEntity: v7(), - cardEntity: newCard, + pageEntity: newPage, permission_set: entity_set.set, }); - useUIState.getState().openCard(props.parent, newCard); - if (rep) focusCard(newCard, rep, "focusFirstBlock"); + useUIState.getState().openPage(props.parent, newPage); + if (rep) focusPage(newPage, rep, "focusFirstBlock"); }} > - + scanIndex(tx).eav(focusedBlock.entityID, "block/type"), ); - // get what cards we need to close as a result of deleting this block - let cardsToClose = [] as string[]; + // get what pagess we need to close as a result of deleting this block + let pagesToClose = [] as string[]; if (type.data.value === "card") { - let [childCards] = await rep?.query( + let [childPages] = await rep?.query( (tx) => scanIndex(tx).eav(focusedBlock.entityID, "block/card") || [], ); - cardsToClose = [childCards?.data.value]; + pagesToClose = [childPages?.data.value]; } if (type.data.value === "mailbox") { let [archive] = await rep?.query( @@ -109,7 +109,7 @@ export async function deleteBlock( let [draft] = await rep?.query( (tx) => scanIndex(tx).eav(focusedBlock.entityID, "mailbox/draft") || [], ); - cardsToClose = [archive?.data.value, draft?.data.value]; + pagesToClose = [archive?.data.value, draft?.data.value]; } // the next and previous blocks in the block list @@ -164,7 +164,7 @@ export async function deleteBlock( ); } - cardsToClose.forEach((card) => card && useUIState.getState().closeCard(card)); + pagesToClose.forEach((page) => page && useUIState.getState().closePage(page)); await Promise.all( entities.map((entity) => rep?.mutate.removeBlock({ diff --git a/components/Blocks/ExternalLinkBlock.tsx b/components/Blocks/ExternalLinkBlock.tsx index c0b0620f..a82fb99e 100644 --- a/components/Blocks/ExternalLinkBlock.tsx +++ b/components/Blocks/ExternalLinkBlock.tsx @@ -17,7 +17,7 @@ export const ExternalLinkBlock = (props: { entityID: string }) => { target="_blank" className={` externalLinkBlock flex relative group/linkBlock - h-[104px] w-full bg-bg-card overflow-hidden text-primary hover:no-underline no-underline + h-[104px] w-full bg-bg-page overflow-hidden text-primary hover:no-underline no-underline border hover:border-accent-contrast outline outline-1 -outline-offset-0 rounded-lg shadow-sm ${isSelected ? "outline-accent-contrast border-accent-contrast" : "outline-transparent border-border-light"} `} diff --git a/components/Blocks/MailboxBlock.tsx b/components/Blocks/MailboxBlock.tsx index 31cce72b..c41d8632 100644 --- a/components/Blocks/MailboxBlock.tsx +++ b/components/Blocks/MailboxBlock.tsx @@ -11,7 +11,7 @@ import { focusBlock } from "src/utils/focusBlock"; import { useEntitySetContext } from "components/EntitySetProvider"; import { subscribeToMailboxWithEmail } from "actions/subscriptions/subscribeToMailboxWithEmail"; import { confirmEmailSubscription } from "actions/subscriptions/confirmEmailSubscription"; -import { focusCard } from "components/Cards"; +import { focusPage } from "components/Pages"; import { v7 } from "uuid"; import { sendPostToSubscribers } from "actions/subscriptions/sendPostToSubscribers"; import { getBlocksWithType } from "src/hooks/queries/useBlocks"; @@ -23,8 +23,7 @@ import { unsubscribe, useSubscriptionStatus, } from "src/hooks/useSubscriptionStatus"; -import { scanIndex } from "src/replicache/utils"; -import { usePageTitle } from "components/utils/UpdatePageTitle"; +import { usePageTitle } from "components/utils/UpdateLeafletTitle"; export const MailboxBlock = (props: BlockProps) => { let isSubscribed = useSubscriptionStatus(props.entityID); @@ -33,8 +32,8 @@ export const MailboxBlock = (props: BlockProps) => { s.selectedBlocks.find((b) => b.value === props.entityID), ); - let card = useEntity(props.entityID, "block/card"); - let cardEntity = card ? card.data.value : props.entityID; + let page = useEntity(props.entityID, "block/card"); + let pageEntity = page ? page.data.value : props.entityID; let permission = useEntitySetContext().permissions.write; let { rep } = useReplicache(); @@ -75,8 +74,8 @@ export const MailboxBlock = (props: BlockProps) => { props.previousBlock && focusBlock(props.previousBlock, { type: "end" }); - draft && useUIState.getState().closeCard(draft.data.value); - archive && useUIState.getState().closeCard(archive.data.value); + draft && useUIState.getState().closePage(draft.data.value); + archive && useUIState.getState().closePage(archive.data.value); } } }; @@ -86,7 +85,7 @@ export const MailboxBlock = (props: BlockProps) => { draft, archive, areYouSure, - cardEntity, + pageEntity, isSelected, permission, props.entityID, @@ -110,7 +109,7 @@ export const MailboxBlock = (props: BlockProps) => { }`} style={{ backgroundColor: - "color-mix(in oklab, rgb(var(--accent-contrast)), rgb(var(--bg-card)) 85%)", + "color-mix(in oklab, rgb(var(--accent-contrast)), rgb(var(--bg-page)) 85%)", }} >
@@ -129,8 +128,8 @@ export const MailboxBlock = (props: BlockProps) => { firstBlockFactID: v7(), }); } - useUIState.getState().openCard(props.parent, entity); - if (rep) focusCard(entity, rep, "focusFirstBlock"); + useUIState.getState().openPage(props.parent, entity); + if (rep) focusPage(entity, rep, "focusFirstBlock"); return; }} > @@ -202,7 +201,7 @@ const MailboxReaderView = (props: { entityID: string; parent: string }) => { }`} style={{ backgroundColor: - "color-mix(in oklab, rgb(var(--accent-contrast)), rgb(var(--bg-card)) 85%)", + "color-mix(in oklab, rgb(var(--accent-contrast)), rgb(var(--bg-page)) 85%)", }} >
@@ -227,8 +226,8 @@ const MailboxReaderView = (props: { entityID: string; parent: string }) => { if (rep) { useUIState .getState() - .openCard(props.parent, archive.data.value); - focusCard(archive.data.value, rep); + .openPage(props.parent, archive.data.value); + focusPage(archive.data.value, rep); } }} > @@ -378,7 +377,7 @@ const SubscribeForm = (props: { setCode(e.currentTarget.value)} /> @@ -415,7 +414,7 @@ const SubscribeForm = (props: { }} className={`mailboxSubscribeForm flex sm:flex-row flex-col ${props.compact && "sm:flex-col sm:gap-2"} gap-2 sm:gap-3 items-center place-self-center mx-auto`} > -
+
{ ); if (!draft) return null; - // once the send button is clicked, close the card and show a toast. + // once the send button is clicked, close the page and show a toast. return (
@@ -543,8 +542,8 @@ const GoToArchive = (props: { onMouseDown={(e) => { e.preventDefault(); if (rep) { - useUIState.getState().openCard(props.parent, archive.data.value); - focusCard(archive.data.value, rep); + useUIState.getState().openPage(props.parent, archive.data.value); + focusPage(archive.data.value, rep); } }} > diff --git a/components/Blocks/CardBlock.tsx b/components/Blocks/PageLinkBlock.tsx similarity index 57% rename from components/Blocks/CardBlock.tsx rename to components/Blocks/PageLinkBlock.tsx index bafdbd49..6ae73d55 100644 --- a/components/Blocks/CardBlock.tsx +++ b/components/Blocks/PageLinkBlock.tsx @@ -2,33 +2,33 @@ import { BlockProps, BaseBlock, ListMarker, Block } from "./Block"; import { focusBlock } from "src/utils/focusBlock"; -import { focusCard } from "components/Cards"; +import { focusPage } from "components/Pages"; import { useEntity, useReplicache } from "src/replicache"; import { useUIState } from "src/useUIState"; import { RenderedTextBlock } from "components/Blocks/TextBlock"; -import { useDocMetadata } from "src/hooks/queries/useDocMetadata"; +import { usePageMetadata } from "src/hooks/queries/usePageMetadata"; import { CSSProperties, useEffect, useRef, useState } from "react"; import { useBlocks } from "src/hooks/queries/useBlocks"; -export function CardBlock(props: BlockProps & { preview?: boolean }) { +export function PageLinkBlock(props: BlockProps & { preview?: boolean }) { let { rep } = useReplicache(); - let card = useEntity(props.entityID, "block/card"); - let cardEntity = card ? card.data.value : props.entityID; - let docMetadata = useDocMetadata(cardEntity); + let page = useEntity(props.entityID, "block/card"); + let pageEntity = page ? page.data.value : props.entityID; + let leafletMetadata = usePageMetadata(pageEntity); let isSelected = useUIState((s) => s.selectedBlocks.find((b) => b.value === props.entityID), ); - let isOpen = useUIState((s) => s.openCards).includes(cardEntity); + let isOpen = useUIState((s) => s.openPages).includes(pageEntity); return (
<>
{ if (e.isDefaultPrevented()) return; if (e.shiftKey) return; e.preventDefault(); e.stopPropagation(); - useUIState.getState().openCard(props.parent, cardEntity); - if (rep) focusCard(cardEntity, rep); + useUIState.getState().openPage(props.parent, pageEntity); + if (rep) focusPage(pageEntity, rep); }} >
- {docMetadata[0] && ( + {leafletMetadata[0] && (
- {docMetadata[0].listData && ( + {leafletMetadata[0].listData && ( )} - +
)} - {docMetadata[1] && ( + {leafletMetadata[1] && (
- {docMetadata[1].listData && ( - + {leafletMetadata[1].listData && ( + )} - +
)} - {docMetadata[2] && ( + {leafletMetadata[2] && (
- {docMetadata[2].listData && ( - + {leafletMetadata[2].listData && ( + )} - +
)}
- {props.preview && } + {props.preview && }
); } -export function CardPreview(props: { entityID: string }) { +export function PagePreview(props: { entityID: string }) { let blocks = useBlocks(props.entityID); let previewRef = useRef(null); - let cardWidth = `var(--card-width-unitless)`; + let pageWidth = `var(--page-width-unitless)`; return (
{blocks.slice(0, 20).map((b, index, arr) => { @@ -138,7 +138,6 @@ export function BlockPreview( size?: "small" | "large"; }, ) { - let headingLevel = useEntity(b.value, "block/heading-level")?.data.value; let ref = useRef(null); let [isVisible, setIsVisible] = useState(true); useEffect(() => { diff --git a/components/Blocks/TextBlock/index.tsx b/components/Blocks/TextBlock/index.tsx index fd852ddd..74754808 100644 --- a/components/Blocks/TextBlock/index.tsx +++ b/components/Blocks/TextBlock/index.tsx @@ -96,7 +96,7 @@ export function IOSBS(props: BlockProps) { let vis = await isVisible(target as Element); if (!vis) { let parentEl = document.getElementById( - elementId.card(props.parent).container, + elementId.page(props.parent).container, ); if (!parentEl) return; parentEl?.scrollBy({ @@ -121,7 +121,7 @@ export function RenderedTextBlock(props: { // show a blank line if the block is empty. blocks with content are styled elsewhere! update both! return ( 
-        {/* Render a placeholder if there are no other blocks in the card, else just show the blank line*/}
+        {/* Render a placeholder if there are no other blocks in the page, else just show the blank line*/}
         {props.first ? "Title" : 
}
); @@ -341,9 +341,9 @@ let SyncView = (props: { entityID: string; parentID: string }) => { const coords = view.coordsAtPos(view.state.selection.anchor); useEditorStates.setState({ lastXPosition: coords.left }); - // scroll card if cursor is at the very top or very bottom of the card + // scroll page if cursor is at the very top or very bottom of the page let parentID = document.getElementById( - elementId.card(props.parentID).container, + elementId.page(props.parentID).container, ); let parentHeight = parentID?.clientHeight; let cursorPosY = coords.top; diff --git a/components/Blocks/TextBlock/keymap.ts b/components/Blocks/TextBlock/keymap.ts index a446cc35..07656b88 100644 --- a/components/Blocks/TextBlock/keymap.ts +++ b/components/Blocks/TextBlock/keymap.ts @@ -12,7 +12,7 @@ import { elementId } from "src/utils/elementId"; import { schema } from "./schema"; import { useUIState } from "src/useUIState"; import { setEditorState, useEditorStates } from "src/state/useEditorState"; -import { focusCard } from "components/Cards"; +import { focusPage } from "components/Pages"; import { v7 } from "uuid"; import { scanIndex } from "src/replicache/utils"; import { indent, outdent } from "src/utils/list-operations"; @@ -47,7 +47,7 @@ export const TextBlockKeymap = ( view?.dom.blur(); useUIState.setState(() => ({ focusedEntity: { - entityType: "card", + entityType: "page", entityID: propsRef.current.parent, }, selectedBlocks: [], @@ -444,30 +444,40 @@ const CtrlEnter = return true; }; - - const metaA = ( +const metaA = + ( propsRef: MutableRefObject, repRef: MutableRefObject | null>, - )=> (state: EditorState, dispatch: ((tr: Transaction) => void) | undefined, view: EditorView | undefined) => { - const { from, to } = state.selection; - // Check if the entire content of the blockk is selected - const isFullySelected = from === 0 && to === state.doc.content.size; - - if (!isFullySelected) { - // If the entire block is selected, we don't need to do anything - return false - } else { - // Remove the selection - view?.dispatch(state.tr.setSelection(TextSelection.create(state.doc, from))); - view?.dom.blur() - repRef.current?.query(async tx=>{ - let allBlocks = await getBlocksWithType(tx, propsRef.current.parent) ||[] - console.log("allBlocks", allBlocks) - useUIState.setState({ - selectedBlocks: allBlocks.map(b=>({value: b.value, parent: propsRef.current.parent})) - }) - }) - return true - } + ) => + ( + state: EditorState, + dispatch: ((tr: Transaction) => void) | undefined, + view: EditorView | undefined, + ) => { + const { from, to } = state.selection; + // Check if the entire content of the blockk is selected + const isFullySelected = from === 0 && to === state.doc.content.size; - } \ No newline at end of file + if (!isFullySelected) { + // If the entire block is selected, we don't need to do anything + return false; + } else { + // Remove the selection + view?.dispatch( + state.tr.setSelection(TextSelection.create(state.doc, from)), + ); + view?.dom.blur(); + repRef.current?.query(async (tx) => { + let allBlocks = + (await getBlocksWithType(tx, propsRef.current.parent)) || []; + console.log("allBlocks", allBlocks); + useUIState.setState({ + selectedBlocks: allBlocks.map((b) => ({ + value: b.value, + parent: propsRef.current.parent, + })), + }); + }); + return true; + } + }; diff --git a/components/Blocks/index.tsx b/components/Blocks/index.tsx index 51b360e0..dc191f2a 100644 --- a/components/Blocks/index.tsx +++ b/components/Blocks/index.tsx @@ -153,8 +153,8 @@ function NewBlockButton(props: { lastBlock: Block | null; entityID: string }) { }, 10); }} > - {/* this is here as a fail safe, in case a new card is created and there are no blocks in it yet, - we render a newcardbutton with a textblock-like placeholder instead of a proper first block. */} + {/* this is here as a fail safe, in case a new page is created and there are no blocks in it yet, + we render a newblockbutton with a textblock-like placeholder instead of a proper first block. */} {!props.lastBlock ? (
write something...
) : ( diff --git a/components/Blocks/useBlockKeyboardHandlers.ts b/components/Blocks/useBlockKeyboardHandlers.ts index 92d2a947..76164950 100644 --- a/components/Blocks/useBlockKeyboardHandlers.ts +++ b/components/Blocks/useBlockKeyboardHandlers.ts @@ -105,7 +105,7 @@ async function Backspace({ e, props, rep, areYouSure, setAreYouSure }: Args) { } // ... and areYouSure state is true, // and the user is not in an input or textarea, - // if there is a card to close, close it and remove the block + // if there is a page to close, close it and remove the block if (areYouSure) { let el = e.target as HTMLElement; @@ -122,7 +122,7 @@ async function Backspace({ e, props, rep, areYouSure, setAreYouSure }: Args) { e.preventDefault(); rep.mutate.removeBlock({ blockEntity: props.entityID }); - useUIState.getState().closeCard(props.entityID); + useUIState.getState().closePage(props.entityID); let prevBlock = props.previousBlock; if (prevBlock) focusBlock(prevBlock, { type: "end" }); } diff --git a/components/DesktopFooter.tsx b/components/DesktopFooter.tsx index d03c6073..8df90a6f 100644 --- a/components/DesktopFooter.tsx +++ b/components/DesktopFooter.tsx @@ -4,10 +4,10 @@ import { Media } from "./Media"; import { Toolbar } from "./Toolbar"; import { useEntitySetContext } from "./EntitySetProvider"; -export function DesktopCardFooter(props: { cardID: string }) { +export function DesktopPageFooter(props: { pageID: string }) { let focusedBlock = useUIState((s) => s.focusedEntity); let focusedBlockParentID = - focusedBlock?.entityType === "card" + focusedBlock?.entityType === "page" ? focusedBlock.entityID : focusedBlock?.parent; let entity_set = useEntitySetContext(); @@ -19,15 +19,15 @@ export function DesktopCardFooter(props: { cardID: string }) { {focusedBlock && focusedBlock.entityType === "block" && entity_set.permissions.write && - focusedBlockParentID === props.cardID && ( + focusedBlockParentID === props.pageID && (
{ if (e.currentTarget === e.target) e.preventDefault(); }} >
diff --git a/components/Icons.tsx b/components/Icons.tsx index a969d23a..6f2b7613 100644 --- a/components/Icons.tsx +++ b/components/Icons.tsx @@ -84,7 +84,7 @@ export const BlockLinkSmall = (props: Props) => { ); }; -export const BlockCardSmall = (props: Props) => { +export const BlockPageLinkSmall = (props: Props) => { return ( {props.children} diff --git a/components/MobileFooter.tsx b/components/MobileFooter.tsx index 8aede061..25293799 100644 --- a/components/MobileFooter.tsx +++ b/components/MobileFooter.tsx @@ -17,13 +17,13 @@ export function MobileFooter(props: { entityID: string }) { focusedBlock.entityType == "block" && entity_set.permissions.write ? (
{ if (e.currentTarget === e.target) e.preventDefault(); }} >
diff --git a/components/Cards.tsx b/components/Pages.tsx similarity index 70% rename from components/Cards.tsx rename to components/Pages.tsx index 52760390..02b8cc05 100644 --- a/components/Cards.tsx +++ b/components/Pages.tsx @@ -6,7 +6,7 @@ import useMeasure from "react-use-measure"; import { elementId } from "src/utils/elementId"; import { ThemePopover } from "./ThemeManager/ThemeSetter"; import { Media } from "./Media"; -import { DesktopCardFooter } from "./DesktopFooter"; +import { DesktopPageFooter } from "./DesktopFooter"; import { Replicache } from "replicache"; import { Fact, @@ -26,37 +26,37 @@ import { useEffect } from "react"; import { DraftPostOptions } from "./Blocks/MailboxBlock"; import { useIsMobile } from "src/hooks/isMobile"; -export function Cards(props: { rootCard: string }) { - let openCards = useUIState((s) => s.openCards); +export function Pages(props: { rootPage: string }) { + let openPages = useUIState((s) => s.openPages); let params = useSearchParams(); - let openCard = params.get("openCard"); + let openPage = params.get("openPage"); useEffect(() => { - if (openCard) { + if (openPage) { } - }, [openCard, props.rootCard]); - let cards = [...openCards]; - if (openCard && !cards.includes(openCard)) cards.push(openCard); + }, [openPage, props.rootPage]); + let pages = [...openPages]; + if (openPage && !pages.includes(openPage)) pages.push(openPage); return (
{ - e.currentTarget === e.target && blurCard(); + e.currentTarget === e.target && blurPage(); }} >
{ - e.currentTarget === e.target && blurCard(); + e.currentTarget === e.target && blurPage(); }} >
- - + +
@@ -64,25 +64,25 @@ export function Cards(props: { rootCard: string }) {
- +
- {cards.map((card) => ( -
- + {pages.map((page) => ( +
+
))}
{ - e.currentTarget === e.target && blurCard(); + e.currentTarget === e.target && blurPage(); }} />
); } -export const PageOptions = (props: { entityID: string }) => { +export const LeafletOptions = (props: { entityID: string }) => { return ( <> @@ -90,16 +90,16 @@ export const PageOptions = (props: { entityID: string }) => { ); }; -function Card(props: { entityID: string; first?: boolean }) { +function Page(props: { entityID: string; first?: boolean }) { let { rep } = useReplicache(); let isDraft = useReferenceToEntity("mailbox/draft", props.entityID); let focusedElement = useUIState((s) => s.focusedEntity); - let focusedCardID = - focusedElement?.entityType === "card" + let focusedPageID = + focusedElement?.entityType === "page" ? focusedElement.entityID : focusedElement?.parent; - let isFocused = focusedCardID === props.entityID; + let isFocused = focusedPageID === props.entityID; let isMobile = useIsMobile(); return ( @@ -108,26 +108,26 @@ function Card(props: { entityID: string; first?: boolean }) {
{ - e.currentTarget === e.target && blurCard(); + e.currentTarget === e.target && blurPage(); }} /> )} -
+
{ if (e.defaultPrevented) return; if (!isMobile) return; if (rep) { - focusCard(props.entityID, rep); + focusPage(props.entityID, rep); } }} - id={elementId.card(props.entityID).container} + id={elementId.page(props.entityID).container} style={{ - backgroundColor: "rgba(var(--bg-card), var(--bg-card-alpha))", - width: "var(--card-width-units)", + backgroundColor: "rgba(var(--bg-page), var(--bg-page-alpha))", + width: "var(--page-width-units)", }} className={` - card + page grow flex flex-col overscroll-y-none overflow-y-scroll no-scrollbar @@ -136,15 +136,15 @@ function Card(props: { entityID: string; first?: boolean }) { `} > - {!props.first && } + {!props.first && } - + {isDraft.length > 0 && (
@@ -154,7 +154,7 @@ function Card(props: { entityID: string; first?: boolean }) {
{isFocused && !props.first && ( - + )}
@@ -162,14 +162,14 @@ function Card(props: { entityID: string; first?: boolean }) { ); } -const CardOptions = (props: { entityID: string }) => { +const PageOptionsMenu = (props: { entityID: string }) => { let permission = useEntitySetContext().permissions.write; return (
- Share a read only version of this doc + Share a read only version of this leaflet
diff --git a/components/ThemeManager/ThemeProvider.tsx b/components/ThemeManager/ThemeProvider.tsx index 6e3b9fd2..2e258af6 100644 --- a/components/ThemeManager/ThemeProvider.tsx +++ b/components/ThemeManager/ThemeProvider.tsx @@ -8,8 +8,8 @@ import { parse, contrastLstar, ColorSpace, sRGB } from "colorjs.io/fn"; import { useEntity } from "src/replicache"; type CSSVariables = { + "--bg-leaflet": string; "--bg-page": string; - "--bg-card": string; "--primary": string; "--accent-1": string; "--accent-2": string; @@ -37,7 +37,7 @@ export const ThemeDefaults = { function setCSSVariableToColor( el: HTMLElement, name: string, - value: AriaColor, + value: AriaColor ) { el?.style.setProperty(name, colorToString(value, "rgb")); } @@ -46,8 +46,8 @@ export function ThemeProvider(props: { local?: boolean; children: React.ReactNode; }) { - let bgPage = useColorAttribute(props.entityID, "theme/page-background"); - let bgCard = useColorAttribute(props.entityID, "theme/card-background"); + let bgLeaflet = useColorAttribute(props.entityID, "theme/page-background"); + let bgPage = useColorAttribute(props.entityID, "theme/card-background"); let primary = useColorAttribute(props.entityID, "theme/primary"); let highlight1 = useEntity(props.entityID, "theme/highlight-1"); @@ -56,11 +56,11 @@ export function ThemeProvider(props: { let accent1 = useColorAttribute(props.entityID, "theme/accent-background"); let accent2 = useColorAttribute(props.entityID, "theme/accent-text"); - // set accent contrast to the accent color that has the highest contrast with the card background + // set accent contrast to the accent color that has the highest contrast with the page background let accentContrast = [accent1, accent2].sort((a, b) => { return ( - getColorContrast(colorToString(b, "rgb"), colorToString(bgCard, "rgb")) - - getColorContrast(colorToString(a, "rgb"), colorToString(bgCard, "rgb")) + getColorContrast(colorToString(b, "rgb"), colorToString(bgPage, "rgb")) - + getColorContrast(colorToString(a, "rgb"), colorToString(bgPage, "rgb")) ); })[0]; @@ -68,11 +68,11 @@ export function ThemeProvider(props: { if (props.local) return; let el = document.querySelector(":root") as HTMLElement; if (!el) return; + setCSSVariableToColor(el, "--bg-leaflet", bgLeaflet); setCSSVariableToColor(el, "--bg-page", bgPage); - setCSSVariableToColor(el, "--bg-card", bgCard); el?.style.setProperty( - "--bg-card-alpha", - bgCard.getChannelValue("alpha").toString(), + "--bg-page-alpha", + bgPage.getChannelValue("alpha").toString() ); setCSSVariableToColor(el, "--primary", primary); @@ -84,24 +84,24 @@ export function ThemeProvider(props: { let color = parseColor(`hsba(${highlight1.data.value})`); el?.style.setProperty( "--highlight-1", - `rgb(${colorToString(color, "rgb")})`, + `rgb(${colorToString(color, "rgb")})` ); } else { el?.style.setProperty( "--highlight-1", - "color-mix(in oklab, rgb(var(--primary)), rgb(var(--bg-card)) 75%)", + "color-mix(in oklab, rgb(var(--primary)), rgb(var(--bg-page)) 75%)" ); } setCSSVariableToColor(el, "--accent-1", accent1); setCSSVariableToColor(el, "--accent-2", accent2); el?.style.setProperty( "--accent-contrast", - colorToString(accentContrast, "rgb"), + colorToString(accentContrast, "rgb") ); }, [ props.local, + bgLeaflet, bgPage, - bgCard, primary, highlight1, highlight2, @@ -110,11 +110,11 @@ export function ThemeProvider(props: { accent2, accentContrast, ]); - let [canonicalCardWidth, setCanonicalCardWidth] = useState(0); + let [canonicalPageWidth, setCanonicalPageWidth] = useState(0); useEffect(() => { let listener = () => { - let el = document.getElementById("canonical-card-width"); - setCanonicalCardWidth(el?.clientWidth || 0); + let el = document.getElementById("canonical-page-width"); + setCanonicalPageWidth(el?.clientWidth || 0); }; listener(); window.addEventListener("resize", listener); @@ -122,20 +122,20 @@ export function ThemeProvider(props: { }, []); return (
{props.children}
@@ -157,11 +157,11 @@ export const ThemeBackgroundProvider = (props: { let backgroundImage = useEntity(props.entityID, "theme/background-image"); let backgroundImageRepeat = useEntity( props.entityID, - "theme/background-image-repeat", + "theme/background-image-repeat" ); return (
| null, - entity: string, + entity: string ) { return (attribute: keyof FilterAttributes<{ type: "color" }>) => (color: Color) => @@ -63,23 +63,23 @@ export function setColorAttribute( export const ThemePopover = (props: { entityID: string; home?: boolean }) => { let { rep } = useReplicache(); // I need to get these variables from replicache and then write them to the DB. I also need to parse them into a state that can be used here. - let pageValue = useColorAttribute(props.entityID, "theme/page-background"); - let cardValue = useColorAttribute(props.entityID, "theme/card-background"); + let leafletValue = useColorAttribute(props.entityID, "theme/page-background"); + let pageValue = useColorAttribute(props.entityID, "theme/card-background"); let primaryValue = useColorAttribute(props.entityID, "theme/primary"); let accent1Value = useColorAttribute( props.entityID, - "theme/accent-background", + "theme/accent-background" ); let accent2Value = useColorAttribute(props.entityID, "theme/accent-text"); let permission = useEntitySetContext().permissions.write; let backgroundImage = useEntity(props.entityID, "theme/background-image"); let backgroundRepeat = useEntity( props.entityID, - "theme/background-image-repeat", + "theme/background-image-repeat" ); let [openPicker, setOpenPicker] = useState( - props.home === true ? "page" : "null", + props.home === true ? "leaflet" : "null" ); let set = useMemo(() => { return setColorAttribute(rep, props.entityID); @@ -89,7 +89,7 @@ export const ThemePopover = (props: { entityID: string; home?: boolean }) => { let values = [] as string[]; for (let i = 0; i < 3; i++) { values.push( - `${Math.floor(Math.random() * 100)}% ${Math.floor(Math.random() * 100)}%`, + `${Math.floor(Math.random() * 100)}% ${Math.floor(Math.random() * 100)}%` ); } return values; @@ -97,7 +97,7 @@ export const ThemePopover = (props: { entityID: string; home?: boolean }) => { let gradient = [ `radial-gradient(at ${randomPositions[0]}, ${accent1Value.toString("hex")}80 2px, transparent 70%)`, - `radial-gradient(at ${randomPositions[1]}, ${cardValue.toString("hex")}66 2px, transparent 60%)`, + `radial-gradient(at ${randomPositions[1]}, ${pageValue.toString("hex")}66 2px, transparent 60%)`, `radial-gradient(at ${randomPositions[2]}, ${primaryValue.toString("hex")}B3 2px, transparent 100%)`, ].join(", "); let viewheight = useViewportSize().height; @@ -110,10 +110,10 @@ export const ThemePopover = (props: { entityID: string; home?: boolean }) => { label="Theme" - background="bg-bg-card" - text="text-bg-card" + background="bg-bg-page" + text="text-bg-page" backgroundImage={{ - backgroundColor: pageValue.toString("hex"), + backgroundColor: leafletValue.toString("hex"), backgroundImage: gradient, }} /> @@ -127,10 +127,10 @@ export const ThemePopover = (props: { entityID: string; home?: boolean }) => { collisionPadding={16} >
-
+
setOpenPicker("null")} @@ -146,11 +146,11 @@ export const ThemePopover = (props: { entityID: string; home?: boolean }) => { ? "cover" : `calc(${backgroundRepeat.data.value}px / 2 )`, }} - className={`bg-bg-page mx-2 p-3 mb-3 flex flex-col rounded-md border border-border ${props.home ? "" : "pb-0"}`} + className={`bg-bg-leaflet mx-2 p-3 mb-3 flex flex-col rounded-md border border-border ${props.home ? "" : "pb-0"}`} >
{ {/*
*/}
-
+
setOpenPicker("null")} />
-
+
{
@@ -227,7 +227,7 @@ export const ThemePopover = (props: { entityID: string; home?: boolean }) => { className="rounded-t-lg p-2 border border-border border-b-transparent shadow-md text-primary" style={{ backgroundColor: - "rgba(var(--bg-card), var(--bg-card-alpha))", + "rgba(var(--bg-page), var(--bg-page-page))", }} >

Hello!

@@ -304,7 +304,7 @@ export const ColorPicker = (props: { onFocus={(e) => { e.currentTarget.setSelectionRange( 1, - e.currentTarget.value.length, + e.currentTarget.value.length ); }} onKeyDown={(e) => { @@ -328,7 +328,7 @@ export const ColorPicker = (props: { onFocus={(e) => { e.currentTarget.setSelectionRange( 0, - e.currentTarget.value.length - 1, + e.currentTarget.value.length - 1 ); }} onKeyDown={(e) => { @@ -436,7 +436,7 @@ const BGPicker = (props: { onFocus={(e) => { e.currentTarget.setSelectionRange( 1, - e.currentTarget.value.length, + e.currentTarget.value.length ); }} onKeyDown={(e) => { @@ -483,7 +483,7 @@ const BGPicker = (props: { value={bgColor} onChange={setColorAttribute( rep, - props.entityID, + props.entityID )("theme/page-background")} > {