mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-30 00:41:00 +00:00
feat: polish
This commit is contained in:
parent
e0250d7f5c
commit
446721729b
@ -7,17 +7,24 @@ import { Thread } from "@columns/thread";
|
|||||||
import { Timeline } from "@columns/timeline";
|
import { Timeline } from "@columns/timeline";
|
||||||
import { User } from "@columns/user";
|
import { User } from "@columns/user";
|
||||||
import { useColumnContext } from "@lume/ark";
|
import { useColumnContext } from "@lume/ark";
|
||||||
import { ArrowLeftIcon, ArrowRightIcon, PlusSquareIcon } from "@lume/icons";
|
import {
|
||||||
|
ArrowLeftIcon,
|
||||||
|
ArrowRightIcon,
|
||||||
|
NewColumnIcon,
|
||||||
|
PlusIcon,
|
||||||
|
PlusSquareIcon,
|
||||||
|
} from "@lume/icons";
|
||||||
import { IColumn } from "@lume/types";
|
import { IColumn } from "@lume/types";
|
||||||
import { TutorialModal } from "@lume/ui/src/tutorial/modal";
|
import { TutorialModal } from "@lume/ui/src/tutorial/modal";
|
||||||
import { COL_TYPES } from "@lume/utils";
|
import { COL_TYPES } from "@lume/utils";
|
||||||
|
import * as Tooltip from "@radix-ui/react-tooltip";
|
||||||
import { useRef, useState } from "react";
|
import { useRef, useState } from "react";
|
||||||
import { VList, VListHandle } from "virtua";
|
import { VList, VListHandle } from "virtua";
|
||||||
|
|
||||||
export function HomeScreen() {
|
export function HomeScreen() {
|
||||||
const ref = useRef<VListHandle>(null);
|
const ref = useRef<VListHandle>(null);
|
||||||
const { addColumn, columns } = useColumnContext();
|
|
||||||
const [selectedIndex, setSelectedIndex] = useState(-1);
|
const [selectedIndex, setSelectedIndex] = useState(-1);
|
||||||
|
const { columns, addColumn } = useColumnContext();
|
||||||
|
|
||||||
const renderItem = (column: IColumn) => {
|
const renderItem = (column: IColumn) => {
|
||||||
switch (column.kind) {
|
switch (column.kind) {
|
||||||
@ -45,7 +52,6 @@ export function HomeScreen() {
|
|||||||
return (
|
return (
|
||||||
<div className="relative w-full h-full">
|
<div className="relative w-full h-full">
|
||||||
<VList
|
<VList
|
||||||
id="timeline"
|
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className="h-full w-full flex-nowrap overflow-x-auto !overflow-y-hidden scrollbar-none focus:outline-none"
|
className="h-full w-full flex-nowrap overflow-x-auto !overflow-y-hidden scrollbar-none focus:outline-none"
|
||||||
itemSize={420}
|
itemSize={420}
|
||||||
@ -82,38 +88,7 @@ export function HomeScreen() {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{columns.map((column) => renderItem(column))}
|
{columns.map((column) => renderItem(column))}
|
||||||
<div className="w-[420px]" />
|
<div className="w-[420px] h-full flex items-center justify-center">
|
||||||
</VList>
|
|
||||||
<div className="absolute bottom-3 right-3">
|
|
||||||
<div className="flex items-center gap-1 p-1 bg-black/30 dark:bg-white/30 backdrop-blur-xl rounded-xl">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => {
|
|
||||||
const prevIndex = Math.max(selectedIndex - 1, 0);
|
|
||||||
setSelectedIndex(prevIndex);
|
|
||||||
ref.current.scrollToIndex(prevIndex, {
|
|
||||||
align: "center",
|
|
||||||
smooth: true,
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
className="inline-flex items-center justify-center rounded-lg text-white/70 hover:text-white hover:bg-black/30 size-10"
|
|
||||||
>
|
|
||||||
<ArrowLeftIcon className="size-5" />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => {
|
|
||||||
const nextIndex = Math.min(selectedIndex + 1, columns.length - 1);
|
|
||||||
setSelectedIndex(nextIndex);
|
|
||||||
ref.current.scrollToIndex(nextIndex, {
|
|
||||||
align: "center",
|
|
||||||
smooth: true,
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
className="inline-flex items-center justify-center rounded-lg text-white/70 hover:text-white hover:bg-black/30 size-10"
|
|
||||||
>
|
|
||||||
<ArrowRightIcon className="size-5" />
|
|
||||||
</button>
|
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={async () =>
|
onClick={async () =>
|
||||||
@ -123,14 +98,94 @@ export function HomeScreen() {
|
|||||||
content: "",
|
content: "",
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
className="inline-flex items-center justify-center rounded-lg text-white/70 hover:text-white hover:bg-black/30 size-10"
|
className="size-16 inline-flex items-center justify-center rounded-full bg-blue-500 hover:bg-blue-600 text-white"
|
||||||
>
|
>
|
||||||
<PlusSquareIcon className="size-5" />
|
<NewColumnIcon className="size-7" />
|
||||||
</button>
|
</button>
|
||||||
<div className="w-px h-6 bg-white/10" />
|
|
||||||
<TutorialModal />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</VList>
|
||||||
|
<Tooltip.Provider>
|
||||||
|
<div className="absolute bottom-3 right-3">
|
||||||
|
<div className="flex items-center gap-1 p-1 bg-black/30 dark:bg-white/30 backdrop-blur-xl rounded-xl">
|
||||||
|
<Tooltip.Root delayDuration={150}>
|
||||||
|
<Tooltip.Trigger asChild>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => {
|
||||||
|
const prevIndex = Math.max(selectedIndex - 1, 0);
|
||||||
|
setSelectedIndex(prevIndex);
|
||||||
|
ref.current.scrollToIndex(prevIndex, {
|
||||||
|
align: "center",
|
||||||
|
smooth: true,
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
className="inline-flex items-center justify-center rounded-lg text-white/70 hover:text-white hover:bg-black/30 size-10"
|
||||||
|
>
|
||||||
|
<ArrowLeftIcon className="size-5" />
|
||||||
|
</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">
|
||||||
|
Move Left
|
||||||
|
<Tooltip.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
|
||||||
|
</Tooltip.Content>
|
||||||
|
</Tooltip.Portal>
|
||||||
|
</Tooltip.Root>
|
||||||
|
<Tooltip.Root delayDuration={150}>
|
||||||
|
<Tooltip.Trigger asChild>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => {
|
||||||
|
const nextIndex = Math.min(
|
||||||
|
selectedIndex + 1,
|
||||||
|
columns.length - 1,
|
||||||
|
);
|
||||||
|
setSelectedIndex(nextIndex);
|
||||||
|
ref.current.scrollToIndex(nextIndex, {
|
||||||
|
align: "center",
|
||||||
|
smooth: true,
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
className="inline-flex items-center justify-center rounded-lg text-white/70 hover:text-white hover:bg-black/30 size-10"
|
||||||
|
>
|
||||||
|
<ArrowRightIcon className="size-5" />
|
||||||
|
</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">
|
||||||
|
Move Right
|
||||||
|
<Tooltip.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
|
||||||
|
</Tooltip.Content>
|
||||||
|
</Tooltip.Portal>
|
||||||
|
</Tooltip.Root>
|
||||||
|
<Tooltip.Root delayDuration={150}>
|
||||||
|
<Tooltip.Trigger asChild>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={async () =>
|
||||||
|
await addColumn({
|
||||||
|
kind: COL_TYPES.default,
|
||||||
|
title: "",
|
||||||
|
content: "",
|
||||||
|
})
|
||||||
|
}
|
||||||
|
className="inline-flex items-center justify-center rounded-lg text-white/70 hover:text-white hover:bg-black/30 size-10"
|
||||||
|
>
|
||||||
|
<PlusSquareIcon className="size-5" />
|
||||||
|
</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">
|
||||||
|
New Column
|
||||||
|
<Tooltip.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
|
||||||
|
</Tooltip.Content>
|
||||||
|
</Tooltip.Portal>
|
||||||
|
</Tooltip.Root>
|
||||||
|
<div className="w-px h-6 bg-white/10" />
|
||||||
|
<TutorialModal />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Tooltip.Provider>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -74,7 +74,10 @@ export function ColumnHeader({
|
|||||||
</DropdownMenu.Item>
|
</DropdownMenu.Item>
|
||||||
{queryKey?.[0] === "foryou-9998" ? (
|
{queryKey?.[0] === "foryou-9998" ? (
|
||||||
<DropdownMenu.Item asChild>
|
<DropdownMenu.Item asChild>
|
||||||
<InterestModal queryKey={queryKey} />
|
<InterestModal
|
||||||
|
queryKey={queryKey}
|
||||||
|
className="text-sm font-medium text-white/50 hover:bg-black/10 hover:text-white dark:text-white/50 dark:hover:bg-white/10 dark:hover:text-white"
|
||||||
|
/>
|
||||||
</DropdownMenu.Item>
|
</DropdownMenu.Item>
|
||||||
) : null}
|
) : null}
|
||||||
<DropdownMenu.Item asChild>
|
<DropdownMenu.Item asChild>
|
||||||
|
@ -56,7 +56,7 @@ export function InterestModal({
|
|||||||
<Dialog.Root open={open} onOpenChange={setOpen}>
|
<Dialog.Root open={open} onOpenChange={setOpen}>
|
||||||
<Dialog.Trigger
|
<Dialog.Trigger
|
||||||
className={cn(
|
className={cn(
|
||||||
"inline-flex items-center gap-2 px-3 text-sm font-medium rounded-lg h-9 text-white/50 hover:bg-black/10 hover:text-white focus:outline-none dark:text-white/50 dark:hover:bg-white/10 dark:hover:text-white",
|
"inline-flex items-center gap-2 px-3 rounded-lg h-9 focus:outline-none",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
|
@ -109,3 +109,4 @@ export * from "./src/settingsFilled";
|
|||||||
export * from "./src/bellFilled";
|
export * from "./src/bellFilled";
|
||||||
export * from "./src/foryou";
|
export * from "./src/foryou";
|
||||||
export * from "./src/editInterest";
|
export * from "./src/editInterest";
|
||||||
|
export * from "./src/newColumn";
|
||||||
|
21
packages/icons/src/newColumn.tsx
Normal file
21
packages/icons/src/newColumn.tsx
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import { SVGProps } from "react";
|
||||||
|
|
||||||
|
export function NewColumnIcon(
|
||||||
|
props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
|
||||||
|
) {
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill="currentColor"
|
||||||
|
d="M12 19v1a1 1 0 001-1h-1zm8-9a1 1 0 102 0h-2zm0 4a1 1 0 10-2 0h2zm-2 6a1 1 0 102 0h-2zm-2-4a1 1 0 100 2v-2zm6 2a1 1 0 100-2v2zM4 17V7H2v10h2zm8 1H5v2h7v-2zm8-11v3h2V7h-2zM5 6h7V4H5v2zm7 0h7V4h-7v2zm1 13V5h-2v14h2zm5-5v3h2v-3h-2zm0 3v3h2v-3h-2zm-2 1h3v-2h-3v2zm3 0h3v-2h-3v2zm3-11a3 3 0 00-3-3v2a1 1 0 011 1h2zM4 7a1 1 0 011-1V4a3 3 0 00-3 3h2zM2 17a3 3 0 003 3v-2a1 1 0 01-1-1H2z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
@ -93,7 +93,7 @@ export function HomeRoute({ colKey }: { colKey: string }) {
|
|||||||
<EmptyFeed subtext="You can more interests to build up your timeline" />
|
<EmptyFeed subtext="You can more interests to build up your timeline" />
|
||||||
<InterestModal
|
<InterestModal
|
||||||
queryKey={[colKey]}
|
queryKey={[colKey]}
|
||||||
className="mt-3 w-full inline-flex items-center justify-center rounded-lg h-9 bg-blue-500 hover:bg-blue-600 text-white"
|
className="mt-3 w-full text-sm font-medium inline-flex items-center justify-center rounded-lg h-9 bg-blue-500 hover:bg-blue-600 text-white"
|
||||||
>
|
>
|
||||||
<ForyouIcon className="size-5" />
|
<ForyouIcon className="size-5" />
|
||||||
Add interest
|
Add interest
|
||||||
|
@ -99,7 +99,7 @@ export function HomeRoute({ colKey }: { colKey: string }) {
|
|||||||
<EmptyFeed />
|
<EmptyFeed />
|
||||||
<Link
|
<Link
|
||||||
to="/suggest"
|
to="/suggest"
|
||||||
className="mt-3 w-full inline-flex items-center justify-center rounded-lg h-9 bg-blue-500 hover:bg-blue-600 text-white"
|
className="mt-3 w-full gap-2 inline-flex items-center justify-center text-sm font-medium rounded-lg h-9 bg-blue-500 hover:bg-blue-600 text-white"
|
||||||
>
|
>
|
||||||
<SearchIcon className="size-5" />
|
<SearchIcon className="size-5" />
|
||||||
Find accounts to follow
|
Find accounts to follow
|
||||||
|
Loading…
Reference in New Issue
Block a user