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

feat: add suggest screen

Browse Source
This commit is contained in:
reya
2024-01-20 14:51:13 +07:00
parent b726ae3c7c
commit 9fcdac4edb
14 changed files with 447 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/ark/src/components/column/header.tsx
View File

@@ -9,6 +9,7 @@ import {
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
import { useQueryClient } from "@tanstack/react-query";
import { ReactNode } from "react";
import { InterestModal } from "./interestModal";
import { useColumnContext } from "./provider";
export function ColumnHeader({
@@ -71,6 +72,11 @@ export function ColumnHeader({
Refresh
</button>
</DropdownMenu.Item>
{queryKey[0] === "foryou-9998" ? (
<DropdownMenu.Item asChild>
<InterestModal queryKey={queryKey} />
</DropdownMenu.Item>
) : null}
<DropdownMenu.Item asChild>
<button
type="button"

157
packages/ark/src/components/column/interestModal.tsx Normal file
View File

@@ -0,0 +1,157 @@
import { ArrowLeftIcon, EditInterestIcon, LoaderIcon } from "@lume/icons";
import { useStorage } from "@lume/storage";
import { TOPICS, cn } from "@lume/utils";
import * as Dialog from "@radix-ui/react-dialog";
import { useQueryClient } from "@tanstack/react-query";
import { ReactNode, useState } from "react";
import { toast } from "sonner";
export function InterestModal({
queryKey,
className,
children,
}: { queryKey: string[]; className?: string; children?: ReactNode }) {
const storage = useStorage();
const queryClient = useQueryClient();
const [open, setOpen] = useState(false);
const [loading, setLoading] = useState(false);
const [hashtags, setHashtags] = useState(storage.interests?.hashtags || []);
const toggleHashtag = (item: string) => {
const arr = hashtags.includes(item)
? hashtags.filter((i) => i !== item)
: [...hashtags, item];
setHashtags(arr);
};
const toggleAll = (item: string[]) => {
const sets = new Set([...hashtags, ...item]);
setHashtags([...sets]);
};
const submit = async () => {
try {
setLoading(true);
const save = await storage.createSetting(
"interests",
JSON.stringify({ hashtags }),
);
if (save) {
storage.interests.hashtags = hashtags;
await queryClient.refetchQueries({ queryKey });
}
setLoading(false);
setOpen(false);
} catch (e) {
setLoading(false);
toast.error(String(e));
}
};
return (
<Dialog.Root open={open} onOpenChange={setOpen}>
<Dialog.Trigger
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",
className,
)}
>
{children ? (
children
) : (
<>
<EditInterestIcon className="size-5" />
Edit interest
</>
)}
</Dialog.Trigger>
<Dialog.Portal>
<Dialog.Overlay className="fixed inset-0 z-50 bg-black/10 backdrop-blur-sm dark:bg-white/10" />
<Dialog.Content className="fixed inset-0 z-50 flex items-center justify-center min-h-full">
<div
data-tauri-drag-region
className="h-20 absolute top-0 left-0 w-full"
/>
<div className="relative w-full max-w-xl xl:max-w-2xl bg-white h-[600px] xl:h-[700px] rounded-xl dark:bg-black overflow-hidden">
<div className="w-full h-full flex flex-col">
<div className="h-16 shrink-0 px-8 border-b border-neutral-100 dark:border-neutral-900 flex w-full items-center justify-between">
<div className="flex flex-col">
<h3 className="font-semibold">Edit Interest</h3>
</div>
</div>
<div className="w-full flex-1 min-h-0 flex flex-col justify-between">
<div className="flex-1 min-h-0 overflow-y-auto px-8 py-8">
<div className="flex flex-col gap-8">
{TOPICS.map((topic, index) => (
<div
key={topic.title + index}
className="flex flex-col gap-4"
>
<div className="w-full flex items-center justify-between">
<div className="inline-flex items-center gap-2.5">
<img
src={topic.icon}
alt={topic.title}
className="size-8 object-cover rounded-lg"
/>
<h3 className="text-lg font-semibold">
{topic.title}
</h3>
</div>
<button
type="button"
onClick={() => toggleAll(topic.content)}
className="text-sm font-medium text-blue-500"
>
Follow All
</button>
</div>
<div className="flex flex-wrap items-center gap-3">
{topic.content.map((hashtag) => (
<button
type="button"
onClick={() => toggleHashtag(hashtag)}
className={cn(
"inline-flex items-center rounded-full bg-neutral-100 dark:bg-neutral-900 border border-transparent px-2 py-1 text-sm font-medium",
hashtags.includes(hashtag)
? "border-blue-500 text-blue-500"
: "",
)}
>
{hashtag}
</button>
))}
</div>
</div>
))}
</div>
</div>
<div className="h-16 shrink-0 w-full flex items-center px-8 justify-center gap-2 border-t border-neutral-100 dark:border-neutral-900 bg-neutral-50 dark:bg-neutral-950">
<Dialog.Close className="inline-flex h-9 flex-1 gap-2 shrink-0 items-center justify-center rounded-lg bg-neutral-100 font-medium dark:bg-neutral-900 dark:hover:bg-neutral-800 hover:bg-blue-200">
<ArrowLeftIcon className="size-4" />
Cancel
</Dialog.Close>
<button
type="button"
onClick={submit}
className="inline-flex h-9 flex-1 shrink-0 items-center justify-center rounded-lg bg-blue-500 font-semibold text-white hover:bg-blue-600 disabled:opacity-50"
>
{loading ? (
<LoaderIcon className="size-4 animate-spin" />
) : (
"Save"
)}
</button>
</div>
</div>
</div>
</div>
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
);
}

2
packages/ark/src/components/user/about.tsx
View File

@@ -31,7 +31,7 @@ export function UserAbout({ className }: { className?: string }) {
return (
<div className={cn("select-text break-p", className)}>
{user.about || user.bio}
{user.about?.trim() || user.bio?.trim() || "No bio"}
</div>
);
}