feat: improve open store column

apps/desktop2/package.json

@@ -29,6 +29,7 @@
     "react": "^18.2.0",
     "react-currency-input-field": "^3.8.0",
     "react-dom": "^18.2.0",
+    "react-hotkeys-hook": "^4.5.0",
     "react-i18next": "^14.1.0",
     "slate": "^0.102.0",
     "slate-react": "^0.102.0",

apps/desktop2/src/routes/$account.home.tsx

@@ -7,6 +7,7 @@ import { UnlistenFn } from "@tauri-apps/api/event";
 import { getCurrent } from "@tauri-apps/api/window";
 import { useEffect, useRef, useState } from "react";
 import { VList, VListHandle } from "virtua";
+import { useHotkeys } from "react-hotkeys-hook";
 
 export const Route = createFileRoute("/$account/home")({
   component: Screen,
@@ -15,7 +16,6 @@ export const Route = createFileRoute("/$account/home")({
 
 const DEFAULT_COLUMNS: LumeColumn[] = [
   { id: 10001, name: "Newsfeed", content: "/newsfeed" },
-  { id: 10002, name: "For You", content: "/foryou" },
   { id: 10000, name: "Open Lume Store", content: "/open" },
 ];
 
@@ -27,11 +27,14 @@ function Screen() {
   const [selectedIndex, setSelectedIndex] = useState(-1);
   const [isScroll, setIsScroll] = useState(false);
 
+  useHotkeys("left", () => goLeft());
+  useHotkeys("right", () => goRight());
+
   const goLeft = () => {
     const prevIndex = Math.max(selectedIndex - 1, 0);
     setSelectedIndex(prevIndex);
     vlistRef.current.scrollToIndex(prevIndex, {
-      align: "start",
+      align: "center",
     });
   };
 
@@ -39,7 +42,7 @@ function Screen() {
     const nextIndex = Math.min(selectedIndex + 1, columns.length - 1);
     setSelectedIndex(nextIndex);
     vlistRef.current.scrollToIndex(nextIndex, {
-      align: "end",
+      align: "center",
     });
   };
 

apps/desktop2/src/routes/open.lazy.tsx

@@ -16,7 +16,22 @@ function Screen() {
 
   return (
     <Column.Root shadow={false} background={false}>
-      <Column.Content className="flex h-full w-full items-center justify-center">
+      <Column.Content className="relative flex h-full w-full items-center justify-center">
+        <div className="group absolute left-0 top-0 z-10 h-full w-12">
+          <button
+            type="button"
+            onClick={() =>
+              install({
+                id: 9999,
+                name: "Lume Store",
+                content: "/store/official",
+              })
+            }
+            className="flex h-full w-full items-center justify-center rounded-xl bg-transparent transition-colors duration-100 ease-in-out group-hover:bg-black/5 dark:group-hover:bg-white/5"
+          >
+            <PlusIcon className="size-6 scale-0 transform transition-transform duration-150 ease-in-out will-change-transform group-hover:scale-100" />
+          </button>
+        </div>
         <button
           type="button"
           onClick={() =>

pnpm-lock.yaml

@@ -120,6 +120,9 @@ importers:
       react-dom:
         specifier: ^18.2.0
         version: 18.2.0(react@18.2.0)
+      react-hotkeys-hook:
+        specifier: ^4.5.0
+        version: 4.5.0(react-dom@18.2.0)(react@18.2.0)
       react-i18next:
         specifier: ^14.1.0
         version: 14.1.0(i18next@23.10.1)(react-dom@18.2.0)(react@18.2.0)