mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-21 04:26:39 +00:00
chore: small updates
This commit is contained in:
parent
c342daecc8
commit
bda20e8fe8
@ -2,7 +2,6 @@ import { useEffect, useRef } from "react";
|
|||||||
import { LumeColumn } from "@lume/types";
|
import { LumeColumn } from "@lume/types";
|
||||||
import { invoke } from "@tauri-apps/api/core";
|
import { invoke } from "@tauri-apps/api/core";
|
||||||
import { LoaderIcon } from "@lume/icons";
|
import { LoaderIcon } from "@lume/icons";
|
||||||
import { cn } from "@lume/utils";
|
|
||||||
|
|
||||||
export function Col({
|
export function Col({
|
||||||
column,
|
column,
|
||||||
@ -66,18 +65,13 @@ export function Col({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div ref={container} className="h-full w-[440px] shrink-0 p-2">
|
<div ref={container} className="h-full w-[440px] shrink-0 p-2">
|
||||||
<div
|
{column.label !== "open" ? (
|
||||||
className={cn(
|
<div className="w-full h-full flex items-center justify-center rounded-xl flex-col bg-black/5 dark:bg-white/5 backdrop-blur-lg">
|
||||||
"w-full h-full flex items-center justify-center",
|
<button type="button" className="size-5" disabled>
|
||||||
!webview?.current?.length
|
<LoaderIcon className="size-5 animate-spin" />
|
||||||
? "rounded-xl flex-col bg-black/5 dark:bg-white/5 backdrop-blur-lg"
|
</button>
|
||||||
: "",
|
</div>
|
||||||
)}
|
) : null}
|
||||||
>
|
|
||||||
<button type="button" className="size-5" disabled>
|
|
||||||
<LoaderIcon className="size-5 animate-spin" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -1,39 +1,15 @@
|
|||||||
import { ArrowLeftIcon, ArrowRightIcon } from "@lume/icons";
|
import { ReactNode } from "@tanstack/react-router";
|
||||||
import { useEffect, useState } from "react";
|
import { useLayoutEffect, useState } from "react";
|
||||||
import { createPortal } from "react-dom";
|
import { createPortal } from "react-dom";
|
||||||
|
|
||||||
export function Toolbar({
|
export function Toolbar({ children }: { children: ReactNode }) {
|
||||||
moveLeft,
|
|
||||||
moveRight,
|
|
||||||
}: {
|
|
||||||
moveLeft: () => void;
|
|
||||||
moveRight: () => void;
|
|
||||||
}) {
|
|
||||||
const [domReady, setDomReady] = useState(false);
|
const [domReady, setDomReady] = useState(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useLayoutEffect(() => {
|
||||||
setDomReady(true);
|
setDomReady(true);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return domReady
|
return domReady
|
||||||
? createPortal(
|
? createPortal(children, document.getElementById("toolbar"))
|
||||||
<div className="flex items-center gap-1">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => moveLeft()}
|
|
||||||
className="inline-flex size-8 items-center justify-center rounded-full text-neutral-800 hover:bg-neutral-200 dark:text-neutral-200 dark:hover:bg-neutral-800"
|
|
||||||
>
|
|
||||||
<ArrowLeftIcon className="size-5" />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => moveRight()}
|
|
||||||
className="inline-flex size-8 items-center justify-center rounded-full text-neutral-800 hover:bg-neutral-200 dark:text-neutral-200 dark:hover:bg-neutral-800"
|
|
||||||
>
|
|
||||||
<ArrowRightIcon className="size-5" />
|
|
||||||
</button>
|
|
||||||
</div>,
|
|
||||||
document.getElementById("toolbar"),
|
|
||||||
)
|
|
||||||
: null;
|
: null;
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import { Col } from "@/components/col";
|
import { Col } from "@/components/col";
|
||||||
import { Toolbar } from "@/components/toolbar";
|
import { Toolbar } from "@/components/toolbar";
|
||||||
import { LoaderIcon } from "@lume/icons";
|
import { ArrowLeftIcon, ArrowRightIcon, LoaderIcon } from "@lume/icons";
|
||||||
import { EventColumns, LumeColumn } from "@lume/types";
|
import { EventColumns, LumeColumn } from "@lume/types";
|
||||||
import { createFileRoute } from "@tanstack/react-router";
|
import { createFileRoute } from "@tanstack/react-router";
|
||||||
import { listen } from "@tauri-apps/api/event";
|
import { listen } from "@tauri-apps/api/event";
|
||||||
@ -77,6 +77,7 @@ function Screen() {
|
|||||||
}, 150);
|
}, 150);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
// save state
|
||||||
ark.set_columns(columns);
|
ark.set_columns(columns);
|
||||||
}, [columns]);
|
}, [columns]);
|
||||||
|
|
||||||
@ -101,25 +102,9 @@ function Screen() {
|
|||||||
<VList
|
<VList
|
||||||
ref={vlistRef}
|
ref={vlistRef}
|
||||||
horizontal
|
horizontal
|
||||||
|
tabIndex={-1}
|
||||||
itemSize={440}
|
itemSize={440}
|
||||||
tabIndex={0}
|
overscan={3}
|
||||||
onKeyDown={(e) => {
|
|
||||||
if (!vlistRef.current) return;
|
|
||||||
switch (e.code) {
|
|
||||||
case "ArrowUp":
|
|
||||||
case "ArrowLeft": {
|
|
||||||
e.preventDefault();
|
|
||||||
goLeft();
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case "ArrowDown":
|
|
||||||
case "ArrowRight": {
|
|
||||||
e.preventDefault();
|
|
||||||
goRight();
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
onScroll={() => {
|
onScroll={() => {
|
||||||
setIsScroll(true);
|
setIsScroll(true);
|
||||||
}}
|
}}
|
||||||
@ -137,7 +122,24 @@ function Screen() {
|
|||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</VList>
|
</VList>
|
||||||
<Toolbar moveLeft={goLeft} moveRight={goRight} />
|
<Toolbar>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => goLeft()}
|
||||||
|
className="inline-flex size-8 items-center justify-center rounded-full text-neutral-800 hover:bg-neutral-200 dark:text-neutral-200 dark:hover:bg-neutral-800"
|
||||||
|
>
|
||||||
|
<ArrowLeftIcon className="size-5" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => goRight()}
|
||||||
|
className="inline-flex size-8 items-center justify-center rounded-full text-neutral-800 hover:bg-neutral-200 dark:text-neutral-200 dark:hover:bg-neutral-800"
|
||||||
|
>
|
||||||
|
<ArrowRightIcon className="size-5" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</Toolbar>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -1,8 +1,8 @@
|
|||||||
import { LaurelIcon } from "@lume/icons";
|
import { LaurelIcon, LoaderIcon } from "@lume/icons";
|
||||||
import { createFileRoute, useNavigate } from "@tanstack/react-router";
|
import { createFileRoute, useNavigate } from "@tanstack/react-router";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import * as Switch from "@radix-ui/react-switch";
|
import * as Switch from "@radix-ui/react-switch";
|
||||||
import { useEffect, useState } from "react";
|
import { useState } from "react";
|
||||||
import { AppRouteSearch, Settings } from "@lume/types";
|
import { AppRouteSearch, Settings } from "@lume/types";
|
||||||
import {
|
import {
|
||||||
isPermissionGranted,
|
isPermissionGranted,
|
||||||
@ -16,7 +16,17 @@ export const Route = createFileRoute("/auth/settings")({
|
|||||||
account: search.account,
|
account: search.account,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
beforeLoad: async ({ context }) => {
|
||||||
|
const permissionGranted = await isPermissionGranted(); // get notification permission
|
||||||
|
const ark = context.ark;
|
||||||
|
const settings = await ark.get_settings();
|
||||||
|
|
||||||
|
return {
|
||||||
|
settings: { ...settings, notification: permissionGranted },
|
||||||
|
};
|
||||||
|
},
|
||||||
component: Screen,
|
component: Screen,
|
||||||
|
pendingComponent: Pending,
|
||||||
});
|
});
|
||||||
|
|
||||||
function Screen() {
|
function Screen() {
|
||||||
@ -24,39 +34,34 @@ function Screen() {
|
|||||||
|
|
||||||
const { account } = Route.useSearch();
|
const { account } = Route.useSearch();
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const { ark } = Route.useRouteContext();
|
const { ark, settings } = Route.useRouteContext();
|
||||||
|
|
||||||
const [settings, setSettings] = useState<Settings>({
|
const [newSettings, setNewSettings] = useState<Settings>(settings);
|
||||||
notification: false,
|
|
||||||
enhancedPrivacy: false,
|
|
||||||
autoUpdate: false,
|
|
||||||
zap: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
const toggleNofitication = async () => {
|
const toggleNofitication = async () => {
|
||||||
await requestPermission();
|
await requestPermission();
|
||||||
setSettings((prev) => ({
|
setNewSettings((prev) => ({
|
||||||
...prev,
|
...prev,
|
||||||
notification: !settings.notification,
|
notification: !settings.notification,
|
||||||
}));
|
}));
|
||||||
};
|
};
|
||||||
|
|
||||||
const toggleAutoUpdate = () => {
|
const toggleAutoUpdate = () => {
|
||||||
setSettings((prev) => ({
|
setNewSettings((prev) => ({
|
||||||
...prev,
|
...prev,
|
||||||
autoUpdate: !settings.autoUpdate,
|
autoUpdate: !settings.autoUpdate,
|
||||||
}));
|
}));
|
||||||
};
|
};
|
||||||
|
|
||||||
const toggleEnhancedPrivacy = () => {
|
const toggleEnhancedPrivacy = () => {
|
||||||
setSettings((prev) => ({
|
setNewSettings((prev) => ({
|
||||||
...prev,
|
...prev,
|
||||||
enhancedPrivacy: !settings.enhancedPrivacy,
|
enhancedPrivacy: !settings.enhancedPrivacy,
|
||||||
}));
|
}));
|
||||||
};
|
};
|
||||||
|
|
||||||
const toggleZap = () => {
|
const toggleZap = () => {
|
||||||
setSettings((prev) => ({
|
setNewSettings((prev) => ({
|
||||||
...prev,
|
...prev,
|
||||||
zap: !settings.zap,
|
zap: !settings.zap,
|
||||||
}));
|
}));
|
||||||
@ -73,16 +78,6 @@ function Screen() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
async function loadSettings() {
|
|
||||||
const permissionGranted = await isPermissionGranted(); // get notification permission
|
|
||||||
const settings = await ark.get_settings();
|
|
||||||
setSettings({ ...settings, notification: permissionGranted });
|
|
||||||
}
|
|
||||||
|
|
||||||
loadSettings();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="mx-auto flex h-full w-full flex-col items-center justify-center gap-6 px-5 xl:max-w-xl">
|
<div className="mx-auto flex h-full w-full flex-col items-center justify-center gap-6 px-5 xl:max-w-xl">
|
||||||
<div className="flex flex-col items-center gap-5 text-center">
|
<div className="flex flex-col items-center gap-5 text-center">
|
||||||
@ -102,7 +97,7 @@ function Screen() {
|
|||||||
<div className="flex flex-col gap-3">
|
<div className="flex flex-col gap-3">
|
||||||
<div className="flex w-full items-start justify-between gap-4 rounded-lg bg-neutral-100 px-5 py-4 dark:bg-neutral-900">
|
<div className="flex w-full items-start justify-between gap-4 rounded-lg bg-neutral-100 px-5 py-4 dark:bg-neutral-900">
|
||||||
<Switch.Root
|
<Switch.Root
|
||||||
checked={settings.notification}
|
checked={newSettings.notification}
|
||||||
onClick={() => toggleNofitication()}
|
onClick={() => toggleNofitication()}
|
||||||
className="relative mt-1 h-7 w-12 shrink-0 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
|
className="relative mt-1 h-7 w-12 shrink-0 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
|
||||||
>
|
>
|
||||||
@ -118,7 +113,7 @@ function Screen() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="flex w-full items-start justify-between gap-4 rounded-lg bg-neutral-100 px-5 py-4 dark:bg-neutral-900">
|
<div className="flex w-full items-start justify-between gap-4 rounded-lg bg-neutral-100 px-5 py-4 dark:bg-neutral-900">
|
||||||
<Switch.Root
|
<Switch.Root
|
||||||
checked={settings.enhancedPrivacy}
|
checked={newSettings.enhancedPrivacy}
|
||||||
onClick={() => toggleEnhancedPrivacy()}
|
onClick={() => toggleEnhancedPrivacy()}
|
||||||
className="relative mt-1 h-7 w-12 shrink-0 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
|
className="relative mt-1 h-7 w-12 shrink-0 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
|
||||||
>
|
>
|
||||||
@ -134,7 +129,7 @@ function Screen() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="flex w-full items-start justify-between gap-4 rounded-lg bg-neutral-100 px-5 py-4 dark:bg-neutral-900">
|
<div className="flex w-full items-start justify-between gap-4 rounded-lg bg-neutral-100 px-5 py-4 dark:bg-neutral-900">
|
||||||
<Switch.Root
|
<Switch.Root
|
||||||
checked={settings.autoUpdate}
|
checked={newSettings.autoUpdate}
|
||||||
onClick={() => toggleAutoUpdate()}
|
onClick={() => toggleAutoUpdate()}
|
||||||
className="relative mt-1 h-7 w-12 shrink-0 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
|
className="relative mt-1 h-7 w-12 shrink-0 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
|
||||||
>
|
>
|
||||||
@ -149,7 +144,7 @@ function Screen() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="flex w-full items-start justify-between gap-4 rounded-lg bg-neutral-100 px-5 py-4 dark:bg-neutral-900">
|
<div className="flex w-full items-start justify-between gap-4 rounded-lg bg-neutral-100 px-5 py-4 dark:bg-neutral-900">
|
||||||
<Switch.Root
|
<Switch.Root
|
||||||
checked={settings.zap}
|
checked={newSettings.zap}
|
||||||
onClick={() => toggleZap()}
|
onClick={() => toggleZap()}
|
||||||
className="relative mt-1 h-7 w-12 shrink-0 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
|
className="relative mt-1 h-7 w-12 shrink-0 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
|
||||||
>
|
>
|
||||||
@ -181,3 +176,13 @@ function Screen() {
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function Pending() {
|
||||||
|
return (
|
||||||
|
<div className="flex h-full w-full items-center justify-center">
|
||||||
|
<button type="button" className="size-5" disabled>
|
||||||
|
<LoaderIcon className="size-5 animate-spin" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
@ -1,9 +1,4 @@
|
|||||||
[
|
[
|
||||||
{ "label": "newsfeed", "name": "Newsfeed", "content": "/newsfeed" },
|
{ "label": "newsfeed", "name": "Newsfeed", "content": "/newsfeed" },
|
||||||
{ "label": "open", "name": "Open", "content": "/open" },
|
{ "label": "open", "name": "Open", "content": "/open" }
|
||||||
{
|
|
||||||
"label": "store",
|
|
||||||
"name": "Store",
|
|
||||||
"content": "/store/official"
|
|
||||||
}
|
|
||||||
]
|
]
|
||||||
|
@ -91,7 +91,7 @@ pub fn get_encrypted_key(npub: &str, password: &str) -> Result<String, String> {
|
|||||||
|
|
||||||
if let Ok(nsec) = keyring.get_password() {
|
if let Ok(nsec) = keyring.get_password() {
|
||||||
let secret_key = SecretKey::from_bech32(nsec).expect("Get secret key failed");
|
let secret_key = SecretKey::from_bech32(nsec).expect("Get secret key failed");
|
||||||
let new_key = EncryptedSecretKey::new(&secret_key, password, 16, KeySecurity::Medium);
|
let new_key = EncryptedSecretKey::new(&secret_key, password, 16, KeySecurity::Unknown);
|
||||||
|
|
||||||
if let Ok(key) = new_key {
|
if let Ok(key) = new_key {
|
||||||
Ok(key.to_bech32().unwrap())
|
Ok(key.to_bech32().unwrap())
|
||||||
|
Loading…
Reference in New Issue
Block a user