reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

final design (#184)

Browse Source 
* feat: redesign

* feat: update other columns to new design

* chore: small fixes

* fix: better manage external webview

* feat: redesign note

* feat: update ui

* chore: update

* chore: update

* chore: polish ui

* chore: update auth ui

* feat: finalize note design

* chore: small fixes

* feat: add window management in rust

* chore: format

* feat: update ui for event screen

* feat: update event screen

* feat: final
This commit is contained in:
雨宮蓮
2024-05-03 15:15:48 +07:00
committed by GitHub
parent 61d1f095d4
commit a4aef25adb
250 changed files with 9359 additions and 9234 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/desktop2/src/routes/trending.tsx
+51 -58
View File
@@ -1,69 +1,62 @@
import { ArticleIcon, GroupFeedsIcon } from "@lume/icons";
import { ColumnRouteSearch } from "@lume/types";
import { Column } from "@lume/ui";
import type { ColumnRouteSearch } from "@lume/types";
import { cn } from "@lume/utils";
import { Link, Outlet } from "@tanstack/react-router";
import { createFileRoute } from "@tanstack/react-router";
export const Route = createFileRoute("/trending")({
validateSearch: (search: Record<string, string>): ColumnRouteSearch => {
return {
account: search.account,
label: search.label,
name: search.name,
};
},
beforeLoad: async ({ context }) => {
const ark = context.ark;
const settings = await ark.get_settings();
validateSearch: (search: Record<string, string>): ColumnRouteSearch => {
return {
account: search.account,
label: search.label,
name: search.name,
};
},
beforeLoad: async ({ context }) => {
const ark = context.ark;
const settings = await ark.get_settings();
return { settings };
},
component: Screen,
return { settings };
},
component: Screen,
});
export function Screen() {
const { label, name } = Route.useSearch();
return (
<Column.Root>
<Column.Header label={label} name={name}>
<div className="inline-flex h-full w-full items-center gap-1">
<Link to="/trending/notes">
{({ isActive }) => (
<div
className={cn(
"inline-flex h-7 w-max items-center justify-center gap-2 rounded-full px-3 text-sm font-medium",
isActive
? "bg-neutral-100 dark:bg-neutral-900"
: "opacity-50",
)}
>
<ArticleIcon className="size-4" />
Notes
</div>
)}
</Link>
<Link to="/trending/users">
{({ isActive }) => (
<div
className={cn(
"inline-flex h-7 w-max items-center justify-center gap-2 rounded-full px-3 text-sm font-medium",
isActive
? "bg-neutral-100 dark:bg-neutral-900"
: "opacity-50",
)}
>
<GroupFeedsIcon className="size-4" />
Users
</div>
)}
</Link>
</div>
</Column.Header>
<Column.Content>
<Outlet />
</Column.Content>
</Column.Root>
);
return (
<div className="flex flex-col h-full">
<div className="h-11 shrink-0 inline-flex w-full items-center gap-1 px-3">
<div className="inline-flex h-full w-full items-center gap-1">
<Link to="/trending/notes">
{({ isActive }) => (
<div
className={cn(
"inline-flex h-7 w-max items-center justify-center gap-2 rounded-full px-3 text-sm font-medium",
isActive ? "bg-neutral-50 dark:bg-white/10" : "opacity-50",
)}
>
<ArticleIcon className="size-4" />
Notes
</div>
)}
</Link>
<Link to="/trending/users">
{({ isActive }) => (
<div
className={cn(
"inline-flex h-7 w-max items-center justify-center gap-2 rounded-full px-3 text-sm font-medium",
isActive ? "bg-neutral-50 dark:bg-white/10" : "opacity-50",
)}
>
<GroupFeedsIcon className="size-4" />
Users
</div>
)}
</Link>
</div>
</div>
<div className="p-2 flex-1 overflow-y-auto w-full h-full scrollbar-none">
<Outlet />
</div>
</div>
);
}