Merge branch 'communitycenter:main' into main

Author: AnotherPillow

README.md

@@ -8,7 +8,7 @@
     <img align=center src="https://github.com/communitycenter/stardew.app/blob/main/.github/background.png?raw=true" alt="Stardew.app Logo" width="500" /></br>
 </p>
 
-The website uses [Next.js](https://nextjs.org) for its frontend, [PlanetScale](https://planetscale.com) for its database, and a mixture of TypeScript and Python scripts to supplement data into the website. Internally, we use [Linear](https://linear.app) and [Pierre](https://pierre.co) for issue tracking and branch management.
+The website uses [Next.js](https://nextjs.org) for its frontend, self-hosted MySQL for its database, and a mixture of TypeScript and Python scripts to supplement data into the website. Internally, we use [Linear](https://linear.app) for issue tracking and branch management.
 
 ---
 
@@ -40,7 +40,7 @@ The website uses [Next.js](https://nextjs.org) for its frontend, [PlanetScale](h
     <img align=center src="https://github.com/communitycenter/stardew.app/blob/main/.github/contributing.png?raw=true" alt="Stardew.app Logo" width="500" /></br>
 </p>
 
-Thank you so much for wanting to contribute to stardew.app! This GitHub repository serves as a read-only mirror from our branch on Pierre, however contributions are still more than welcome (and can be merged in regardless!) We ask that you ensure your code is neat, adheres to the current programming style of the project, and runs without errors. Other than that, feel free to fix bugs, add features, and do whatever you desire to improve the website! stardew.app is built by the community, for the community, so we appreciate your contribution.
+Thank you so much for wanting to contribute to stardew.app! We ask that you ensure your code is neat, adheres to the current programming style of the project, and runs without errors. Other than that, feel free to fix bugs, add features, and do whatever you desire to improve the website! stardew.app is built by the community, for the community, so we appreciate your contribution.
 
 Below are some incredible people that the website wouldn't be without today.
 

bun.lockb

@@ -1,7 +1,3 @@
-const withBundleAnalyzer = require("@next/bundle-analyzer")({
-  enabled: process.env.ANALYZE === "true",
-});
-
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
@@ -39,57 +35,7 @@ const nextConfig = {
         pathname: "/mediawiki/images/**",
       },
     ],
-    remotePatterns: [
-      {
-        protocol: "https",
-        hostname: "github.com",
-        port: "",
-        pathname: "/**",
-      },
-    ],
-  }
-};
-
-module.exports = withBundleAnalyzer(nextConfig);
-
-// Injected content via Sentry wizard below
-
-const { withSentryConfig } = require("@sentry/nextjs");
-
-module.exports = withSentryConfig(
-  module.exports,
-  {
-    // For all available options, see:
-    // https://github.com/getsentry/sentry-webpack-plugin#options
-
-    // Suppresses source map uploading logs during build
-    silent: true,
-    org: "communitycenter",
-    project: "stardewapp",
   },
-  {
-    // For all available options, see:
-    // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
-
-    // Upload a larger set of source maps for prettier stack traces (increases build time)
-    widenClientFileUpload: true,
-
-    // Transpiles SDK to be compatible with IE11 (increases bundle size)
-    transpileClientSDK: true,
-
-    // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
-    tunnelRoute: "/monitoring",
-
-    // Hides source maps from generated client bundles
-    hideSourceMaps: true,
-
-    // Automatically tree-shake Sentry logger statements to reduce bundle size
-    disableLogger: true,
+};
 
-    // Enables automatic instrumentation of Vercel Cron Monitors.
-    // See the following for more information:
-    // https://docs.sentry.io/product/crons/
-    // https://vercel.com/docs/cron-jobs
-    automaticVercelMonitors: true,
-  },
-);
+module.exports = nextConfig;

next.config.js

@@ -31,9 +31,10 @@
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toast": "^1.1.4",
+    "@radix-ui/react-toggle": "^1.1.9",
+    "@radix-ui/react-toggle-group": "^1.1.10",
     "@radix-ui/react-tooltip": "^1.0.6",
     "@react-hook/media-query": "^1.1.1",
-    "@sentry/nextjs": "^7.104.0",
     "@tabler/icons-react": "^2.30.0",
     "@types/node": "20.4.0",
     "@types/react": "18.2.14",
@@ -48,12 +49,12 @@
     "eslint": "8.44.0",
     "eslint-config-next": "13.4.12",
     "fast-xml-parser": "^4.2.6",
+    "lucide-react": "^0.522.0",
     "mysql2": "^3.10.1",
     "next": "^14.2.3",
     "next-themes": "^0.2.1",
     "pako": "^2.1.0",
     "postcss": "8.4.24",
-    "posthog-js": "^1.110.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-dropzone": "^14.2.3",

package.json

@@ -5,6 +5,7 @@ import type { ItemData, MuseumItem } from "@/types/items";
 import { Dispatch, SetStateAction } from "react";
 
 import { usePlayers } from "@/contexts/players-context";
+import { useMultiSelect } from "@/contexts/multi-select-context";
 
 import { NewItemBadge } from "@/components/new-item-badge";
 import {
@@ -66,6 +67,7 @@ export const BooleanCard = ({
   handleStatusChange,
 }: BooleanCardProps) => {
   const { activePlayer, patchPlayer } = usePlayers();
+  const { isMultiSelectMode, selectedItems, toggleItem } = useMultiSelect();
   // let itemType = "O"; //Todo add item types to object data files, and use them here to hotswap data source
   // let dataSource = objects;
   let iconURL: string;
@@ -137,6 +139,8 @@ export const BooleanCard = ({
     await patchPlayer(patch);
   }
 
+  const isSelected = selectedItems.has(item.itemID.toString());
+
   return (
     <ContextMenu>
       <ContextMenuTrigger asChild>
@@ -146,8 +150,13 @@ export const BooleanCard = ({
             completed
               ? "border-green-900 bg-green-500/20 hover:bg-green-500/30 dark:bg-green-500/10 hover:dark:bg-green-500/20"
               : "border-neutral-200 bg-white hover:bg-neutral-100 dark:border-neutral-800 dark:bg-neutral-950 dark:hover:bg-neutral-800",
+            isMultiSelectMode && isSelected && "ring-primary ring-2",
           )}
           onClick={() => {
+            if (isMultiSelectMode) {
+              toggleItem(item.itemID.toString());
+              return;
+            }
             if (minVersion === "1.6.0" && !show && !completed) {
               setPromptOpen?.(true);
               return;

sentry.client.config.ts

@@ -28,6 +28,7 @@ import {
 
 import { Stardrop } from "@/lib/parsers/general";
 import { ChevronRightIcon } from "@radix-ui/react-icons";
+import { useMultiSelect } from "@/contexts/multi-select-context";
 
 interface Props {
   title: string;
@@ -65,13 +66,18 @@ export const DialogCard = ({
 }: Props) => {
   const { activePlayer, patchPlayer } = usePlayers();
   const [open, setOpen] = useState(false);
+  const { isMultiSelectMode, selectedItems, toggleItem } = useMultiSelect();
 
   const minVersion = _type === "power" ? powersData[_id].minVersion : "1.5.0";
 
   let checkedClass = completed
     ? "border-green-900 bg-green-500/20 hover:bg-green-500/30 dark:bg-green-500/10 hover:dark:bg-green-500/20"
     : "border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-950 hover:bg-neutral-100 dark:hover:bg-neutral-800";
 
+  if (isMultiSelectMode && selectedItems.has(_id)) {
+    checkedClass += " ring-2 ring-primary";
+  }
+
   async function handleStatusChange(status: boolean) {
     if (!activePlayer) return;
 
@@ -156,6 +162,10 @@ export const DialogCard = ({
           checkedClass,
         )}
         onClick={(e) => {
+          if (isMultiSelectMode) {
+            toggleItem(_id);
+            return;
+          }
           if (minVersion === "1.6.0" && !show && !completed) {
             e.preventDefault();
             setPromptOpen?.(true);

sentry.edge.config.ts

@@ -6,9 +6,10 @@ import objects from "@/data/objects.json";
 import type { CraftingRecipe, Recipe } from "@/types/recipe";
 
 import { cn } from "@/lib/utils";
-import { Dispatch, SetStateAction } from "react";
+import { Dispatch, SetStateAction, useRef } from "react";
 
 import { usePlayers } from "@/contexts/players-context";
+import { useMultiSelect } from "@/contexts/multi-select-context";
 
 import { NewItemBadge } from "@/components/new-item-badge";
 import {
@@ -41,6 +42,9 @@ interface Props<T extends Recipe> {
    * @memberof Props
    */
   setPromptOpen?: Dispatch<SetStateAction<boolean>>;
+
+  index: number;
+  allRecipes: T[];
 }
 
 export const RecipeCard = <T extends Recipe>({
@@ -50,8 +54,14 @@ export const RecipeCard = <T extends Recipe>({
   setObject,
   setPromptOpen,
   show,
+  index,
+  allRecipes,
 }: Props<T>) => {
   const { activePlayer, patchPlayer } = usePlayers();
+  const { isMultiSelectMode, selectedItems, toggleItem, addItems } =
+    useMultiSelect();
+  const lastSelectedIndex = useRef<number | null>(null);
+
   let colorClass = "";
   switch (status) {
     case 1:
@@ -110,24 +120,48 @@ export const RecipeCard = <T extends Recipe>({
     await patchPlayer(patch);
   }
 
+  const isSelected = selectedItems.has(recipe.itemID.toString());
+
+  const handleClick = (e: React.MouseEvent) => {
+    if (isMultiSelectMode) {
+      if (e.shiftKey && lastSelectedIndex.current !== null) {
+        // Select range of items
+        const start = Math.min(lastSelectedIndex.current, index);
+        const end = Math.max(lastSelectedIndex.current, index);
+        const itemsToSelect = allRecipes
+          .slice(start, end + 1)
+          .map((r) => r.itemID.toString());
+        addItems(itemsToSelect);
+      } else {
+        // Single item selection
+        toggleItem(recipe.itemID.toString());
+        lastSelectedIndex.current = index;
+      }
+      return;
+    }
+
+    if (recipe.minVersion === "1.6.0" && !show && status < 1) {
+      setPromptOpen?.(true);
+      return;
+    }
+    setObject(recipe);
+    setIsOpen(true);
+  };
+
   return (
     <ContextMenu>
       <ContextMenuTrigger asChild>
         <button
           className={cn(
             "relative flex select-none items-center justify-between rounded-lg border px-5 py-4 text-neutral-950 shadow-sm transition-colors hover:cursor-pointer dark:text-neutral-50",
             colorClass,
+            isMultiSelectMode && isSelected && "ring-2 ring-blue-500",
           )}
-          onClick={() => {
-            if (recipe.minVersion === "1.6.0" && !show && status < 1) {
-              setPromptOpen?.(true);
-              return;
-            }
-            setObject(recipe);
-            setIsOpen(true);
-          }}
+          onClick={handleClick}
         >
-          {recipe.minVersion === "1.6.0" && <NewItemBadge version={recipe.minVersion}/>}
+          {recipe.minVersion === "1.6.0" && (
+            <NewItemBadge version={recipe.minVersion} />
+          )}
           <div
             className={cn(
               "flex items-center space-x-3 truncate text-left",
@@ -150,7 +184,9 @@ export const RecipeCard = <T extends Recipe>({
               </p>
             </div>
           </div>
-          <IconChevronRight className="h-5 w-5 flex-shrink-0 text-neutral-500 dark:text-neutral-400" />
+          {!isMultiSelectMode && (
+            <IconChevronRight className="h-5 w-5 flex-shrink-0 text-neutral-500 dark:text-neutral-400" />
+          )}
         </button>
       </ContextMenuTrigger>
       <ContextMenuContent className="w-48">