nostr/lume
1
0
Fork 0
mirror of https://github.com/luminous-devs/lume.git synced 2024-09-29 16:30:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: auto resize mini webview when main webview resized

Browse Source
This commit is contained in:
reya 2024-04-15 13:30:55 +07:00
parent e3ede34108
commit 09b143cb08
14 changed files with 135 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
apps/desktop2/src/components/col.tsx
View File

@ -1,4 +1,4 @@
import { useEffect, useRef } from "react";
import { useEffect, useRef, useState } from "react";
import { LumeColumn } from "@lume/types";
import { invoke } from "@tauri-apps/api/core";
import { Spinner } from "@lume/ui";
@ -7,33 +7,50 @@ export function Col({
column,
account,
isScroll,
isResize,
}: {
column: LumeColumn;
account: string;
isScroll: boolean;
isResize: boolean;
}) {
const webview = useRef<string | undefined>(undefined);
const container = useRef<HTMLDivElement>(null);
const [webview, setWebview] = useState<string | undefined>(undefined);
const repositionWebview = async () => {
if (webview.current && webview.current.length > 1) {
if (webview && webview.length > 1) {
const newRect = container.current.getBoundingClientRect();
await invoke("reposition_column", {
label: webview.current,
label: webview,
x: newRect.x,
y: newRect.y,
});
}
};
useEffect(() => {
if (isScroll) {
repositionWebview();
const resizeWebview = async () => {
if (webview && webview.length > 1) {
const newRect = container.current.getBoundingClientRect();
await invoke("resize_column", {
label: webview,
width: newRect.width,
height: newRect.height,
});
}
};
useEffect(() => {
resizeWebview();
}, [isResize]);
useEffect(() => {
if (isScroll) repositionWebview();
}, [isScroll]);
useEffect(() => {
(async () => {
if (webview && webview.length > 1) return;
const rect = container.current.getBoundingClientRect();
const windowLabel = `column-${column.label}`;
const url =
@ -41,7 +58,7 @@ export function Col({
`?account=${account}&label=${column.label}&name=${column.name}`;
// create new webview
webview.current = await invoke("create_column", {
const label: string = await invoke("create_column", {
label: windowLabel,
x: rect.x,
y: rect.y,
@ -49,19 +66,19 @@ export function Col({
height: rect.height,
url,
});
setWebview(label);
})();
// close webview when unmounted
return () => {
if (webview.current && webview.current.length > 1) {
if (webview && webview.length > 1) {
invoke("close_column", {
label: webview.current,
}).then(() => {
webview.current = undefined;
label: webview,
});
}
};
}, []);
}, [webview]);
return (
<div ref={container} className="h-full w-[440px] shrink-0 p-2">

1
apps/desktop2/src/components/repost.tsx
View File

@ -104,6 +104,7 @@ export function RepostNote({
<div className="-ml-1 inline-flex items-center gap-4">
<Note.Reply />
<Note.Repost />
<Note.Pin />
{settings.zap ? <Note.Zap /> : null}
</div>
<Note.Menu />

1
apps/desktop2/src/components/text.tsx
View File

@ -30,6 +30,7 @@ export function TextNote({
<div className="-ml-1 inline-flex items-center gap-4">
<Note.Reply />
<Note.Repost />
<Note.Pin />
{settings.zap ? <Note.Zap /> : null}
</div>
<Note.Menu />

59
apps/desktop2/src/routes/$account.home.tsx
View File

@ -6,10 +6,11 @@ import { Spinner } from "@lume/ui";
import { createFileRoute } from "@tanstack/react-router";
import { listen } from "@tauri-apps/api/event";
import { resolveResource } from "@tauri-apps/api/path";
import { getCurrent } from "@tauri-apps/api/webviewWindow";
import { readTextFile } from "@tauri-apps/plugin-fs";
import { nanoid } from "nanoid";
import { useEffect, useRef, useState } from "react";
import { useDebouncedCallback } from "use-debounce";
import { useDebounce, useDebouncedCallback } from "use-debounce";
import { VList, VListHandle } from "virtua";
export const Route = createFileRoute("/$account/home")({
@ -30,14 +31,15 @@ export const Route = createFileRoute("/$account/home")({
});
function Screen() {
const vlistRef = useRef<VListHandle>(null);
const { account } = Route.useParams();
const { ark, storedColumns } = Route.useRouteContext();
const [selectedIndex, setSelectedIndex] = useState(-1);
const [isScroll, setIsScroll] = useState(false);
const [columns, setColumns] = useState(storedColumns);
const vlistRef = useRef<VListHandle>(null);
const [isScroll, setIsScroll] = useState(false);
const [isResize, setIsResize] = useState(false);
const goLeft = () => {
const prevIndex = Math.max(selectedIndex - 1, 0);
@ -56,13 +58,23 @@ function Screen() {
};
const add = useDebouncedCallback((column: LumeColumn) => {
// update col label
column["label"] = column.label + "-" + nanoid();
setColumns((state) => [...state, column]);
setSelectedIndex(columns.length + 1);
// create new cols
const cols = [...columns];
const openColIndex = cols.findIndex((col) => col.label === "open");
const newCols = [
...cols.slice(0, openColIndex),
column,
...cols.slice(openColIndex),
];
// scroll to the last column
vlistRef.current.scrollToIndex(columns.length + 1, {
setColumns(newCols);
setSelectedIndex(cols.length - 1);
// scroll to the newest column
vlistRef.current.scrollToIndex(cols.length - 1, {
align: "end",
});
}, 150);
@ -77,24 +89,38 @@ function Screen() {
});
}, 150);
const startResize = useDebouncedCallback(
() => setIsResize((prev) => !prev),
150,
);
useEffect(() => {
// save state
ark.set_columns(columns);
}, [columns]);
useEffect(() => {
let unlisten: Awaited<ReturnType<typeof listen>> | undefined = undefined;
let unlistenColEvent: Awaited<ReturnType<typeof listen>> | undefined =
undefined;
let unlistenWindowResize: Awaited<ReturnType<typeof listen>> | undefined =
undefined;
(async () => {
if (unlisten) return;
unlisten = await listen<EventColumns>("columns", (data) => {
if (unlistenColEvent && unlistenWindowResize) return;
unlistenColEvent = await listen<EventColumns>("columns", (data) => {
if (data.payload.type === "add") add(data.payload.column);
if (data.payload.type === "remove") remove(data.payload.label);
});
unlistenWindowResize = await getCurrent().listen("tauri://resize", () => {
startResize();
});
})();
return () => {
if (unlisten) unlisten();
if (unlistenColEvent) unlistenColEvent();
if (unlistenWindowResize) unlistenWindowResize();
};
}, []);
@ -106,12 +132,8 @@ function Screen() {
tabIndex={-1}
itemSize={440}
overscan={3}
onScroll={() => {
setIsScroll(true);
}}
onScrollEnd={() => {
setIsScroll(false);
}}
onScroll={() => setIsScroll(true)}
onScrollEnd={() => setIsScroll(false)}
className="scrollbar-none h-full w-full overflow-x-auto focus:outline-none"
>
{columns.map((column, index) => (
@ -120,6 +142,7 @@ function Screen() {
column={column}
account={account}
isScroll={isScroll}
isResize={isResize}
/>
))}
</VList>

9
apps/desktop2/src/routes/auth/settings.tsx
View File

@ -38,6 +38,7 @@ function Screen() {
const { ark, settings } = Route.useRouteContext();
const [newSettings, setNewSettings] = useState<Settings>(settings);
const [loading, setLoading] = useState(false);
const toggleNofitication = async () => {
await requestPermission();
@ -70,11 +71,18 @@ function Screen() {
const submit = async () => {
try {
// start loading
setLoading(true);
// publish settings
const eventId = await ark.set_settings(settings);
if (eventId) {
console.log("event_id: ", eventId);
navigate({ to: "/$account/home", params: { account }, replace: true });
}
} catch (e) {
setLoading(false);
toast.error(e);
}
};
@ -169,6 +177,7 @@ function Screen() {
<button
type="button"
onClick={submit}
disabled={loading}
className="inline-flex h-11 w-full shrink-0 items-center justify-center rounded-lg bg-blue-500 font-semibold text-white hover:bg-blue-600 disabled:opacity-50"
>
{t("global.continue")}

5
apps/desktop2/src/routes/newsfeed.tsx
View File

@ -93,6 +93,8 @@ export function Screen() {
}
function Empty() {
const search = Route.useSearch();
return (
<div className="flex flex-col py-10 gap-10">
<div className="text-center flex flex-col items-center justify-center">
@ -107,6 +109,7 @@ function Empty() {
<div className="flex flex-col px-3 gap-2">
<Link
to="/global"
search={search}
className="h-11 w-full flex items-center hover:bg-neutral-200 text-sm font-medium dark:hover:bg-neutral-800 gap-2 bg-neutral-100 rounded-lg dark:bg-neutral-900 px-3"
>
<ArrowRightIcon className="size-5" />
@ -114,6 +117,7 @@ function Empty() {
</Link>
<Link
to="/trending/notes"
search={search}
className="h-11 w-full flex items-center hover:bg-neutral-200 text-sm font-medium dark:hover:bg-neutral-800 gap-2 bg-neutral-100 rounded-lg dark:bg-neutral-900 px-3"
>
<ArrowRightIcon className="size-5" />
@ -121,6 +125,7 @@ function Empty() {
</Link>
<Link
to="/trending/users"
search={search}
className="h-11 w-full flex items-center hover:bg-neutral-200 text-sm font-medium dark:hover:bg-neutral-800 gap-2 bg-neutral-100 rounded-lg dark:bg-neutral-900 px-3"
>
<ArrowRightIcon className="size-5" />

60
packages/ui/src/note/buttons/downvote.tsx
View File

@ -1,60 +0,0 @@
import { ArrowDownIcon } from "@lume/icons";
import { useState } from "react";
import { useNoteContext } from "../provider";
import { cn } from "@lume/utils";
import * as Tooltip from "@radix-ui/react-tooltip";
import { useTranslation } from "react-i18next";
import { useRouteContext } from "@tanstack/react-router";
import { Spinner } from "../../spinner";
export function NoteDownvote() {
const ark = useRouteContext({ strict: false });
const event = useNoteContext();
const [t] = useTranslation();
const [reaction, setReaction] = useState<"-" | null>(null);
const [loading, setLoading] = useState(false);
const down = async () => {
// start loading
setLoading(true);
const res = await ark.downvote(event.id, event.pubkey);
if (res) setReaction("-");
// stop loading
setLoading(false);
};
return (
<Tooltip.Provider>
<Tooltip.Root delayDuration={150}>
<Tooltip.Trigger asChild>
<button
type="button"
onClick={down}
disabled={!!reaction || loading}
className={cn(
"inline-flex size-7 items-center justify-center rounded-full",
reaction === "-"
? "bg-blue-500 text-white"
: "bg-neutral-100 text-neutral-700 hover:bg-blue-500 hover:text-white dark:bg-neutral-900 dark:text-neutral-300",
)}
>
{loading ? (
<Spinner className="size-4" />
) : (
<ArrowDownIcon className="size-4" />
)}
</button>
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content className="inline-flex h-7 select-none items-center justify-center rounded-md bg-neutral-950 px-3.5 text-sm text-neutral-50 will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade dark:bg-neutral-50 dark:text-neutral-950">
{t("note.buttons.downvote")}
<Tooltip.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip.Root>
</Tooltip.Provider>
);
}

50
packages/ui/src/note/buttons/pin.tsx
View File

@ -1,31 +1,31 @@
import { PinIcon } from "@lume/icons";
import { LinkIcon } from "@lume/icons";
import * as Tooltip from "@radix-ui/react-tooltip";
import { useTranslation } from "react-i18next";
import { useRouteContext } from "@tanstack/react-router";
import { useNoteContext } from "../provider";
export function NotePin() {
const event = useNoteContext();
const { t } = useTranslation();
const event = useNoteContext();
const { ark } = useRouteContext({ strict: false });
return (
<Tooltip.Provider>
<Tooltip.Root delayDuration={150}>
<Tooltip.Trigger asChild>
<button
type="button"
className="inline-flex items-center justify-center gap-2 pl-2 pr-3 text-sm font-medium rounded-full h-7 w-max bg-neutral-100 hover:bg-neutral-200 dark:hover:bg-neutral-800 dark:bg-neutral-900"
>
<PinIcon className="size-4" />
{t("note.buttons.pin")}
</button>
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content className="inline-flex h-7 select-none text-neutral-50 dark:text-neutral-950 items-center justify-center rounded-md bg-neutral-950 dark:bg-neutral-50 px-3.5 text-sm will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade">
{t("note.buttons.pinTooltip")}
<Tooltip.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip.Root>
</Tooltip.Provider>
);
return (
<Tooltip.Provider>
<Tooltip.Root delayDuration={150}>
<Tooltip.Trigger asChild>
<button
type="button"
onClick={() => ark.open_thread(event.id)}
className="group inline-flex size-7 items-center justify-center text-neutral-800 dark:text-neutral-200"
>
<LinkIcon className="size-5 group-hover:text-blue-500" />
</button>
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content className="inline-flex h-7 select-none text-neutral-50 dark:text-neutral-950 items-center justify-center rounded-md bg-neutral-950 dark:bg-neutral-50 px-3.5 text-sm will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade">
Open as new window
<Tooltip.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip.Root>
</Tooltip.Provider>
);
}

11
packages/ui/src/note/buttons/reaction.tsx
View File

@ -1,11 +0,0 @@
import { NoteUpvote } from "./upvote";
import { NoteDownvote } from "./downvote";
export function NoteReaction() {
return (
<div className="inline-flex items-center gap-2">
<NoteUpvote />
<NoteDownvote />
</div>
);
}

5
packages/ui/src/note/buttons/reply.tsx
View File

@ -1,14 +1,11 @@
import { ReplyIcon } from "@lume/icons";
import * as Tooltip from "@radix-ui/react-tooltip";
import { useTranslation } from "react-i18next";
import { useNoteContext } from "../provider";
import { useRouteContext } from "@tanstack/react-router";
export function NoteReply() {
const event = useNoteContext();
const { ark } = useRouteContext({ strict: false });
const { t } = useTranslation();
return (
<Tooltip.Provider>
@ -24,7 +21,7 @@ export function NoteReply() {
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content className="inline-flex h-7 select-none items-center justify-center rounded-md bg-neutral-950 px-3.5 text-sm text-neutral-50 will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade dark:bg-neutral-50 dark:text-neutral-950">
{t("note.menu.viewThread")}
Reply
<Tooltip.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
</Tooltip.Content>
</Tooltip.Portal>

60
packages/ui/src/note/buttons/upvote.tsx
View File

@ -1,60 +0,0 @@
import { ArrowUpIcon } from "@lume/icons";
import { useState } from "react";
import { useNoteContext } from "../provider";
import { cn } from "@lume/utils";
import * as Tooltip from "@radix-ui/react-tooltip";
import { useTranslation } from "react-i18next";
import { useRouteContext } from "@tanstack/react-router";
import { Spinner } from "../../spinner";
export function NoteUpvote() {
const { ark } = useRouteContext({ strict: false });
const event = useNoteContext();
const [t] = useTranslation();
const [reaction, setReaction] = useState<"+" | null>(null);
const [loading, setLoading] = useState(false);
const up = async () => {
// start loading
setLoading(true);
const res = await ark.upvote(event.id, event.pubkey);
if (res) setReaction("+");
// stop loading
setLoading(false);
};
return (
<Tooltip.Provider>
<Tooltip.Root delayDuration={150}>
<Tooltip.Trigger asChild>
<button
type="button"
onClick={up}
disabled={!!reaction || loading}
className={cn(
"inline-flex size-7 items-center justify-center rounded-full",
reaction === "+"
? "bg-blue-500 text-white"
: "bg-neutral-100 text-neutral-700 hover:bg-blue-500 hover:text-white dark:bg-neutral-900 dark:text-neutral-300",
)}
>
{loading ? (
<Spinner className="size-4" />
) : (
<ArrowUpIcon className="size-4" />
)}
</button>
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content className="inline-flex h-7 select-none items-center justify-center rounded-md bg-neutral-950 px-3.5 text-sm text-neutral-50 will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade dark:bg-neutral-50 dark:text-neutral-950">
{t("note.buttons.upvote")}
<Tooltip.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip.Root>
</Tooltip.Provider>
);
}

3
packages/ui/src/note/index.ts
View File

@ -1,5 +1,4 @@
import { NotePin } from "./buttons/pin";
import { NoteReaction } from "./buttons/reaction";
import { NoteReply } from "./buttons/reply";
import { NoteRepost } from "./buttons/repost";
import { NoteZap } from "./buttons/zap";
@ -18,7 +17,7 @@ export const Note = {
Menu: NoteMenu,
Reply: NoteReply,
Repost: NoteRepost,
Reaction: NoteReaction,
Pin: NotePin,
Content: NoteContent,
Zap: NoteZap,
Pin: NotePin,

19
src-tauri/src/commands/window.rs
View File

@ -66,3 +66,22 @@ pub fn reposition_column(
None => Err("Webview not found".into()),
}
}
#[tauri::command]
pub fn resize_column(
label: &str,
width: f32,
height: f32,
app_handle: tauri::AppHandle,
) -> Result<(), String> {
match app_handle.get_webview(label) {
Some(webview) => {
if let Ok(_) = webview.set_size(LogicalSize::new(width, height)) {
Ok(())
} else {
Err("Reposition column failed".into())
}
}
None => Err("Webview not found".into()),
}
}

3
src-tauri/src/main.rs
View File

@ -133,7 +133,8 @@ fn main() {
commands::opg::fetch_opg,
commands::window::create_column,
commands::window::close_column,
commands::window::reposition_column
commands::window::reposition_column,
commands::window::resize_column
])
.run(tauri::generate_context!())
.expect("error while running tauri application")