vrr/supermemory
2
0
Fork 0
mirror of https://github.com/supermemoryai/supermemory.git synced 2026-05-22 03:01:07 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

better phone controls

Browse source
This commit is contained in:
Yash 2024-04-06 16:55:37 +00:00
parent 162cc43ed3
commit ad79064317
3 changed files with 53 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

3
apps/web/src/components/MemoryDrawer.tsx
View file

@ -25,8 +25,9 @@ export function MemoryDrawer({ className, hide = false, ...props }: Props) {
>
<DrawerContent
overlay={false}
data-expanded={activeSnapPoint === 0.9}
className={cn(
"border-rgray-6 DrawerContent h-full w-screen border focus-visible:outline-none",
"border-rgray-6 DrawerContent data-[expanded=true]:bg-rgray-3 h-full w-screen border transition-[background] focus-visible:outline-none",
hide ? "hidden" : "",
)}
handle={false}

30
apps/web/src/components/Sidebar/MemoriesBar.tsx
View file

@ -37,6 +37,7 @@ import {
} from "../ui/dialog";
import { Label } from "../ui/label";
import useViewport from "@/hooks/useViewport";
import useTouchHold from "@/hooks/useTouchHold";
export function MemoriesBar() {
const [parent, enableAnimations] = useAutoAnimate();
@ -125,15 +126,26 @@ export function SpaceItem({
const [itemRef, animateItem] = useAnimate();
const { width } = useViewport();
const [moreDropdownOpen, setMoreDropdownOpen] = useState(false);
const touchEventProps = useTouchHold({
onHold() {
setMoreDropdownOpen(true);
},
});
return (
<motion.div
ref={itemRef}
className="hover:bg-rgray-2 has-[[data-space-text]:focus-visible]:bg-rgray-2 has-[[data-space-text]:focus-visible]:ring-rgray-7 [&:has-[[data-space-text]:focus-visible]>[data-more-button]]:opacity-100 relative flex flex-col-reverse items-center justify-center rounded-md p-2 pb-4 text-center font-normal ring-transparent transition has-[[data-space-text]:focus-visible]:outline-none has-[[data-space-text]:focus-visible]:ring-2 [&:hover>[data-more-button]]:opacity-100"
{...touchEventProps}
className="hover:bg-rgray-2 has-[[data-state='true']]:bg-rgray-2 has-[[data-space-text]:focus-visible]:bg-rgray-2 has-[[data-space-text]:focus-visible]:ring-rgray-7 [&:has-[[data-space-text]:focus-visible]>[data-more-button]]:opacity-100 relative flex select-none flex-col-reverse items-center justify-center rounded-md p-2 pb-4 text-center font-normal ring-transparent transition has-[[data-space-text]:focus-visible]:outline-none has-[[data-space-text]:focus-visible]:ring-2 md:has-[[data-state='true']]:bg-transparent [&:hover>[data-more-button]]:opacity-100"
>
<button data-space-text className="focus-visible:outline-none">
{title}
</button>
<SpaceMoreButton
isOpen={moreDropdownOpen}
setIsOpen={setMoreDropdownOpen}
onDelete={() => {
if (!itemRef.current || width < 768) {
onDelete();
@ -237,21 +249,27 @@ export function SpaceItem({
);
}
export function SpaceMoreButton({ onDelete }: { onDelete?: () => void }) {
const [isOpen, setIsOpen] = useState(false);
export function SpaceMoreButton({
onDelete,
isOpen,
setIsOpen,
}: {
onDelete?: () => void;
isOpen?: boolean;
setIsOpen?: (open: boolean) => void;
}) {
return (
<>
<DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
<DropdownMenuTrigger asChild>
<button
data-more-button
className="hover:bg-rgray-3 focus-visible:bg-rgray-3 focus-visible:ring-rgray-7 absolute right-2 top-2 rounded-md p-1 opacity-0 ring-transparent transition focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2"
className="hover:bg-rgray-3 focus-visible:bg-rgray-3 focus-visible:ring-rgray-7 absolute right-2 top-2 scale-0 rounded-md p-1 opacity-0 ring-transparent transition focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 md:block md:scale-100 md:bg-transparent"
>
<MoreHorizontal className="text-rgray-11 h-5 w-5" />
</button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuContent align="start">
<DropdownMenuItem>
<ArrowUpRight
className="mr-2 h-4 w-4 scale-125"

27
apps/web/src/hooks/useTouchHold.ts Normal file
View file

@ -0,0 +1,27 @@
import { useState } from "react";
// holdDuration (in ms)
const useTouchHold = ({
onHold,
holdDuration = 500,
}: {
holdDuration?: number;
onHold: () => Promise<void> | void;
}) => {
const [touchTimeout, setTouchTimeout] = useState<ReturnType<
typeof setTimeout
> | null>(null);
return {
onTouchStart: () => {
setTouchTimeout(setTimeout(onHold, holdDuration));
},
onTouchEnd: () => {
if (touchTimeout) {
clearTimeout(touchTimeout);
}
},
};
};
export default useTouchHold;