This commit is contained in:
Ren Amamiya 2023-10-06 07:40:50 +07:00
parent cef6b9aca9
commit 1240353e30
20 changed files with 58 additions and 66 deletions

View File

@ -4,8 +4,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lume</title>
</head>
<body class="relative cursor-default select-none overflow-hidden font-sans antialiased h-screen w-screen text-white">
<body class="relative cursor-default bg-black select-none overflow-hidden font-sans antialiased h-screen w-screen text-white">
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

View File

@ -19,6 +19,7 @@
},
"dependencies": {
"@dnd-kit/core": "^6.0.8",
"@fontsource-variable/inter": "^5.0.12",
"@getalby/sdk": "^2.4.0",
"@nostr-dev-kit/ndk": "^1.3.1",
"@nostr-dev-kit/ndk-cache-dexie": "^1.3.0",

View File

@ -8,6 +8,9 @@ dependencies:
'@dnd-kit/core':
specifier: ^6.0.8
version: 6.0.8(react-dom@18.2.0)(react@18.2.0)
'@fontsource-variable/inter':
specifier: ^5.0.12
version: 5.0.12
'@getalby/sdk':
specifier: ^2.4.0
version: 2.4.0
@ -675,6 +678,10 @@ packages:
resolution: {integrity: sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==}
dev: false
/@fontsource-variable/inter@5.0.12:
resolution: {integrity: sha512-BuYkYLsvqLnWlXeyUvo6HpcAAgiOpIeQeVXWuxTNrJWr3NpuY5mWzizCxHnHD2gWLZOSOx0GkBqhQl7Oh6zTUQ==}
dev: false
/@getalby/sdk@2.4.0:
resolution: {integrity: sha512-aIGNwLRF9coj6koxfq7P4GtFZbFjQbnIheix39x9176PwFw4dXOdGXHPXnqioJTmeq80y+vX1yd+u/f03YGoeg==}
engines: {node: '>=14'}

12
src-tauri/Cargo.lock generated
View File

@ -2626,6 +2626,7 @@ dependencies = [
"tauri-plugin-stronghold",
"tauri-plugin-upload",
"webpage",
"window-shadows",
"window-vibrancy",
]
@ -5949,6 +5950,17 @@ version = "0.4.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "712e227841d057c1ee1cd2fb22fa7e5a5461ae8e48fa2ca79ec42cfc1931183f"
[[package]]
name = "window-shadows"
version = "0.2.1"
source = "git+https://github.com/tauri-apps/window-shadows?branch=dev#a9f5f1f7725609c71404539befca1f1a98095cd2"
dependencies = [
"cocoa 0.25.0",
"objc",
"raw-window-handle",
"windows-sys 0.48.0",
]
[[package]]
name = "window-vibrancy"
version = "0.4.1"

View File

@ -49,6 +49,7 @@ tauri-plugin-stronghold = { git = "https://github.com/tauri-apps/plugins-workspa
tauri-plugin-store = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
tauri-plugin-upload = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
window-vibrancy = { git = "https://github.com/tauri-apps/window-vibrancy", branch = "dev" }
window-shadows = { git = "https://github.com/tauri-apps/window-shadows", branch = "dev" }
sqlx-cli = { version = "0.7.0", default-features = false, features = [
"sqlite",
] }

View File

@ -12,9 +12,8 @@ use tauri::{Manager, WindowEvent};
use tauri_plugin_autostart::MacosLauncher;
use tauri_plugin_sql::{Migration, MigrationKind};
use webpage::{Webpage, WebpageOptions};
#[cfg(target_os = "macos")]
use window_vibrancy::{apply_vibrancy, NSVisualEffectMaterial};
use window_vibrancy::{apply_mica, apply_vibrancy, NSVisualEffectMaterial};
use window_shadows::set_shadow;
#[cfg(target_os = "macos")]
use traffic_light::TrafficLight;
@ -107,6 +106,12 @@ fn main() {
tauri::Builder::default()
.setup(|app| {
let window = app.get_window("main").unwrap();
let splashscreen = app.get_window("splashscreen").unwrap();
#[cfg(target_os = "windows")]
set_shadow(&window, true).expect("Unsupported platform!");
#[cfg(target_os = "windows")]
set_shadow(&splashscreen, true).expect("Unsupported platform!");
#[cfg(target_os = "macos")]
apply_vibrancy(&window, NSVisualEffectMaterial::HudWindow, None, None)

View File

@ -17,6 +17,7 @@
"height": 800,
"minWidth": 1080,
"minHeight": 800,
"decorations": false,
"resizable": true,
"theme": "Dark",
"title": "Lume",

View File

@ -1,3 +1,4 @@
import '@fontsource-variable/inter/slnt.css';
import { message } from '@tauri-apps/api/dialog';
import { fetch } from '@tauri-apps/api/http';
import { RouterProvider, createBrowserRouter, defer, redirect } from 'react-router-dom';
@ -12,14 +13,13 @@ import { ExploreScreen } from '@app/explore';
import { useStorage } from '@libs/storage/provider';
import { Frame } from '@shared/frame';
import { LoaderIcon } from '@shared/icons';
import { AppLayout } from '@shared/layouts/app';
import { AuthLayout } from '@shared/layouts/auth';
import { NoteLayout } from '@shared/layouts/note';
import { SettingsLayout } from '@shared/layouts/settings';
import './index.css';
import './app.css';
export default function App() {
const { db } = useStorage();
@ -331,9 +331,9 @@ export default function App() {
<RouterProvider
router={router}
fallbackElement={
<Frame className="flex h-full w-full items-center justify-center">
<div className="flex h-full w-full items-center justify-center">
<LoaderIcon className="h-6 w-6 animate-spin text-white" />
</Frame>
</div>
}
future={{ v7_startTransition: true }}
/>

View File

@ -1,8 +1,6 @@
import { useEffect, useState } from 'react';
import { useLocation, useRouteError } from 'react-router-dom';
import { Frame } from '@shared/frame';
interface RouteError {
statusText: string;
message: string;
@ -46,7 +44,7 @@ export function ErrorScreen() {
}, []);
return (
<Frame className="flex h-full items-center justify-center">
<div className="flex h-full items-center justify-center">
<div className="flex w-full flex-col gap-4 px-4 md:max-w-lg md:px-0">
<div className="flex flex-col">
<h1 className="mb-1 text-2xl font-semibold text-white">
@ -88,6 +86,6 @@ export function ErrorScreen() {
</button>
</div>
</div>
</Frame>
</div>
);
}

View File

@ -68,12 +68,12 @@ export function ActiveAccount() {
className="h-9 w-9 shrink-0 rounded-lg object-cover"
/>
<div className="flex flex-col items-start">
<p className="max-w-[10rem] truncate text-base font-semibold leading-none text-white">
<div className="max-w-[10rem] truncate text-sm font-semibold text-white">
{user?.name || user?.display_name || user?.displayName}
</p>
<span className="max-w-[7rem] truncate text-sm leading-none text-white/50">
</div>
<div className="max-w-[7rem] truncate text-sm text-white/50">
{user?.nip05 || displayNpub(db.account.pubkey, 12)}
</span>
</div>
</div>
</Link>
<div className="inline-flex divide-x divide-white/5 rounded-lg border-t border-white/5 bg-white/10">

View File

@ -1,28 +0,0 @@
import { HTMLProps, ReactNode, useCallback } from 'react';
import { twMerge } from 'tailwind-merge';
import { useStorage } from '@libs/storage/provider';
export function Frame({
children,
className,
lighter,
}: {
children: ReactNode;
className: HTMLProps<HTMLElement>['className'];
lighter?: boolean;
}) {
const { db } = useStorage();
const platformStyles = useCallback(() => {
switch (db.platform) {
case 'darwin':
if (lighter) return 'bg-black/80';
return 'bg-black/90';
default:
return 'bg-black';
}
}, []);
return <div className={twMerge(className, platformStyles())}>{children}</div>;
}

View File

@ -1,6 +1,5 @@
import { Outlet, ScrollRestoration } from 'react-router-dom';
import { Frame } from '@shared/frame';
import { Navigation } from '@shared/navigation';
export function AppLayout() {
@ -9,14 +8,14 @@ export function AppLayout() {
<div className="shrink-0">
<Navigation />
</div>
<Frame className="h-full w-full flex-1">
<div className="h-full w-full flex-1">
<Outlet />
<ScrollRestoration
getKey={(location) => {
return location.pathname;
}}
/>
</Frame>
</div>
</div>
);
}

View File

@ -1,12 +1,10 @@
import { Outlet } from 'react-router-dom';
import { Frame } from '@shared/frame';
export function AuthLayout() {
return (
<Frame className="relative h-screen w-screen">
<div className="relative h-screen w-screen">
<div className="absolute left-0 top-0 z-50 h-16 w-full" data-tauri-drag-region />
<Outlet />
</Frame>
</div>
);
}

View File

@ -1,12 +1,10 @@
import { Outlet } from 'react-router-dom';
import { Frame } from '@shared/frame';
export function NoteLayout() {
return (
<Frame className="relative h-screen w-screen">
<div className="relative h-screen w-screen">
<div className="absolute left-0 top-0 z-50 h-16 w-full" data-tauri-drag-region />
<Outlet />
</Frame>
</div>
);
}

View File

@ -1,13 +1,12 @@
import { Link, NavLink, Outlet, ScrollRestoration } from 'react-router-dom';
import { twMerge } from 'tailwind-merge';
import { Frame } from '@shared/frame';
import { ArrowLeftIcon, SecureIcon, SettingsIcon } from '@shared/icons';
export function SettingsLayout() {
return (
<div className="flex h-screen w-screen">
<Frame className="relative flex h-full w-[232px] flex-col" lighter>
<div className="relative flex h-full w-[232px] flex-col">
<div data-tauri-drag-region className="h-11 w-full shrink-0" />
<div className="scrollbar-hide flex h-full flex-1 flex-col gap-2 overflow-y-auto pb-32">
<div className="inline-flex items-center gap-2 border-l-2 border-transparent pl-4">
@ -56,7 +55,7 @@ export function SettingsLayout() {
</NavLink>
</div>
</div>
</Frame>
</div>
<div className="h-full w-full flex-1 bg-black/90 backdrop-blur-xl">
<Outlet />
<ScrollRestoration

View File

@ -5,7 +5,6 @@ import { useStorage } from '@libs/storage/provider';
import { ActiveAccount } from '@shared/accounts/active';
import { ComposerModal } from '@shared/composer';
import { Frame } from '@shared/frame';
import {
ArrowLeftIcon,
ArrowRightIcon,
@ -21,10 +20,7 @@ export function Navigation() {
const navigate = useNavigate();
return (
<Frame
className="relative flex h-full w-[232px] flex-col border-r border-white/5"
lighter
>
<div className="relative flex h-full w-[232px] flex-col border-r border-white/5">
<div
data-tauri-drag-region
className="inline-flex h-16 w-full items-center justify-between px-3"
@ -147,6 +143,6 @@ export function Navigation() {
<div className="relative shrink-0">
<ActiveAccount />
</div>
</Frame>
</div>
);
}

View File

@ -1,10 +1,15 @@
/** @type {import('tailwindcss').Config} */
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
content: ['./src/**/*.{js,ts,jsx,tsx}', 'index.html'],
darkMode: 'class',
theme: {
extend: {
fontFamily: {
sans: ['Inter Variable', ...defaultTheme.fontFamily.sans],
},
typography: ({ theme }) => ({
white: {
css: {

View File

@ -24,6 +24,6 @@
"jsx": "preserve",
"strictNullChecks": false
},
"include": ["**/*.ts", "**/*.tsx"],
"include": ["**/*.ts", "**/*.tsx", "src/main.jsx"],
"exclude": ["node_modules", "dist", "src-tauri"]
}