ui: update ui

.github/workflows/test.yml

@@ -0,0 +1,26 @@
+name: 🔍 Test
+on: [push]
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  bench:
+    runs-on: ubuntu-latest
+    steps:
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v4
+
+      - name: ⎔ Setup node
+        uses: actions/setup-node@v4
+        with:
+          cache: npm
+          cache-dependency-path: ./package.json
+          node-version: 20
+
+      - name: 📥 Install deps
+        run: npm install
+
+      - name: 🔍 Test
+        run: npm run test

.gitignore

@@ -9,4 +9,4 @@ node_modules
 /prisma/data.db
 /prisma/data.db-journal
 
-/usercontent
+/static/usercontent

README.md

@@ -46,34 +46,15 @@ npm run dev
 
 ## Deployment
 
-[PM2](https://pm2.keymetrics.io/) is included as a dev-dependency in the project.
-To spin up your app in production mode, simply:
+We use [PM2](https://pm2.keymetrics.io/) for deployment.
 
 ```sh
 npm run build
-npm run start # This will spawn a PM2 daemon named "polygen"
+npm run start # Spawns a PM2 daemon named "polygen"
 ```
 
 The HTTP server listens on port 1606 by default, which can be configured through .env file.
 
-## Benchmarking
-
-Benchmarks are available for performance-sensitive functions.
-
-- Run all benchmarks:
-
-```sh
-npm run bench
-```
-
-- Run a single benchmark:
-
-```sh
-npm run bench:hash
-```
-
-Refer to [package.json](https://github.com/jwcub/polygen/blob/main/package.json) for more information.
-
 ## Contributing
 
 Before pushing your commits, be sure to run through all the checks:
@@ -82,6 +63,8 @@ Before pushing your commits, be sure to run through all the checks:
 npm run build
 npm run lint
 npm run typecheck
+npm run test
+npm run bench
 npm run format
 ```
 

app/access.ts

@@ -23,7 +23,7 @@ export default class Access {
  * Something that has access. Maybe a user.
  */
 interface HasAccess {
-  access: number;
+  readonly access: number;
 }
 
 /**

app/components/community/addAnnouncement.tsx

@@ -1,11 +1,11 @@
+import { SmallAddIcon } from "@chakra-ui/icons";
 import {
   Box,
   Button,
   Divider,
   Editable,
   EditableInput,
   EditablePreview,
-  IconButton,
   Modal,
   ModalBody,
   ModalCloseButton,
@@ -18,7 +18,6 @@ import {
 import { useFetcher } from "@remix-run/react";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { FaFileCirclePlus } from "react-icons/fa6";
 
 import Editor from "./editor";
 
@@ -52,12 +51,14 @@ export default function AddAnnouncement() {
 
   return (
     <>
-      <IconButton
-        aria-label="Create announcement"
-        icon={<FaFileCirclePlus />}
+      <Button
+        w="100%"
+        leftIcon={<SmallAddIcon />}
         onClick={onOpen}
-        variant="ghost"
-      />
+        variant="link"
+      >
+        {t("community.add-announcement")}
+      </Button>
 
       <Modal
         isCentered

app/components/community/announcement.tsx

@@ -131,7 +131,7 @@ export default function Announcement({
 
   return (
     <>
-      <Button fontWeight="normal" onClick={onOpen} variant="ghost">
+      <Button w="100%" fontWeight="normal" onClick={onOpen} variant="link">
         {title}
       </Button>
 

app/components/community/announcements.tsx

@@ -1,4 +1,4 @@
-import { Center, Heading, VStack } from "@chakra-ui/react";
+import { VStack } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
 
 import Access, { access } from "~/access";
@@ -13,26 +13,20 @@ export default function Announcements({
 }: {
   announcements: AnnouncementProps[];
 }) {
-  const { t, i18n } = useTranslation();
+  const { i18n } = useTranslation();
   const user = useOptionalUser();
 
   const editable = access(user, Access.ManageAnnouncement);
 
   return (
-    <Center flexDir="column">
-      <Heading mb={1} size="sm">
-        {t("community.announcements")}
-      </Heading>
+    <VStack w="100%" spacing={2}>
+      {announcements.map(data =>
+        i18n.language === data.lang ? (
+          <Announcement key={data.id} editable={editable} {...data} />
+        ) : null
+      )}
 
-      <VStack spacing={0}>
-        {announcements.map(data =>
-          i18n.language === data.lang ? (
-            <Announcement key={data.id} editable={editable} {...data} />
-          ) : null
-        )}
-
-        {editable ? <AddAnnouncement /> : null}
-      </VStack>
-    </Center>
+      {editable ? <AddAnnouncement /> : null}
+    </VStack>
   );
 }

app/components/community/comment.tsx

@@ -22,10 +22,11 @@ import { formatDate, useRelativeDateFormatter } from "~/hooks/datetime";
 import { useOptionalUser } from "~/hooks/loader";
 import type { Comment as CommentType } from "~/models/comment.server";
 
+import UserAvatar from "../user/userAvatar";
+import UserLink from "../user/userLink";
+
 import PrivateIndicator from "./privateIndicator";
 import TextRenderer from "./textRenderer";
-import UserAvatar from "./userAvatar";
-import UserLink from "./userLink";
 
 export type CommentProps = Pick<
   CommentType,

app/components/community/comments.tsx

@@ -1,7 +1,9 @@
 import { VStack } from "@chakra-ui/react";
+import { AnimatePresence, motion } from "framer-motion";
 import { useState } from "react";
 
 import { load } from "~/hooks/loader";
+import { COMMENTS_PER_PAGE } from "~/models/common";
 import type { action } from "~/routes/api.post.comment";
 
 import type { CommentProps } from "./comment";
@@ -23,15 +25,30 @@ export default function Comments({
       parentCuid
     });
     setExtraComments(extraComments => extraComments.concat(data));
-    return data.length === 10;
+    return data.length === COMMENTS_PER_PAGE;
   };
 
   return (
     <VStack w="100%" spacing={3}>
-      {comments.concat(extraComments).map(data => (
-        <Comment key={data.id} {...data} />
-      ))}
-      {comments.length === 10 ? <LoadMore loader={loader} /> : null}
+      <AnimatePresence initial={false} mode="popLayout">
+        {comments.concat(extraComments).map(data => (
+          <motion.div
+            transition={{ type: "spring" }}
+            animate={{ scale: 1, opacity: 1 }}
+            exit={{ scale: 0.8, opacity: 0 }}
+            initial={{ scale: 0.8, opacity: 0 }}
+            key={data.id}
+            style={{ width: "100%" }}
+            layout
+          >
+            <Comment {...data} />
+          </motion.div>
+        ))}
+      </AnimatePresence>
+
+      {comments.length === COMMENTS_PER_PAGE ? (
+        <LoadMore loader={loader} />
+      ) : null}
     </VStack>
   );
 }

app/components/community/countdowns.tsx

@@ -1,4 +1,4 @@
-import { Center, Heading, Text, Tooltip, VStack } from "@chakra-ui/react";
+import { Text, Tooltip, VStack } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
 
 import { useServerTime } from "~/hooks/loader";
@@ -35,18 +35,11 @@ function Countdown({ date, name }: { date: string; name: string }) {
 }
 
 export default function Countdowns() {
-  const { t } = useTranslation();
-
   return (
-    <Center flexDir="column">
-      <Heading mb={2} size="sm">
-        {t("community.countdowns")}
-      </Heading>
-      <VStack textAlign="center">
-        {countDowns.map(({ date, name }) => (
-          <Countdown key={name} date={date} name={name} />
-        ))}
-      </VStack>
-    </Center>
+    <VStack textAlign="center">
+      {countDowns.map(({ date, name }) => (
+        <Countdown key={name} date={date} name={name} />
+      ))}
+    </VStack>
   );
 }

app/components/community/post.tsx

@@ -24,13 +24,13 @@ import { formatDate, useRelativeDateFormatter } from "~/hooks/datetime";
 import { useOptionalUser } from "~/hooks/loader";
 import type { Post as PostType } from "~/models/post.server";
 
+import UserAvatar from "../user/userAvatar";
+import UserLink from "../user/userLink";
+
 import CopyLink from "./copyLink";
 import Editor from "./editor";
 import PrivateIndicator from "./privateIndicator";
 import TextRenderer from "./textRenderer";
-import UserAvatar from "./userAvatar";
-import UserLink from "./userLink";
-import { formatLargeNumber } from "./utils";
 
 export type PostProps = Pick<
   PostType,
@@ -107,8 +107,7 @@ export default function Post({
               {comments ? (
                 <span>
                   {" · "}
-                  {formatLargeNumber(comments)}{" "}
-                  {t("community.comment", { count: comments })}
+                  {comments} {t("community.comment", { count: comments })}
                 </span>
               ) : null}
             </Box>

app/components/community/posts.tsx

@@ -1,7 +1,9 @@
 import { VStack } from "@chakra-ui/react";
+import { AnimatePresence, motion } from "framer-motion";
 import { useState } from "react";
 
 import { load } from "~/hooks/loader";
+import { POSTS_PER_PAGE } from "~/models/common";
 import type { action } from "~/routes/api.post.page";
 
 import LoadMore from "./loadMore";
@@ -17,15 +19,28 @@ export default function Posts({ posts }: { posts: PostProps[] }) {
     });
 
     setExtraPosts(extraPosts => extraPosts.concat(data));
-    return data.length === 10;
+    return data.length === POSTS_PER_PAGE;
   };
 
   return (
-    <VStack w="100%" spacing={5}>
-      {posts.concat(extraPosts).map(data => (
-        <Post key={data.cuid} linked {...data} />
-      ))}
-      {posts.length === 10 ? <LoadMore loader={loader} /> : null}
+    <VStack w="100%" spacing={6}>
+      <AnimatePresence initial={false} mode="popLayout">
+        {posts.concat(extraPosts).map(data => (
+          <motion.div
+            transition={{ type: "spring" }}
+            animate={{ scale: 1, opacity: 1 }}
+            exit={{ scale: 0.8, opacity: 0 }}
+            initial={{ scale: 0.8, opacity: 0 }}
+            key={data.cuid}
+            style={{ width: "100%" }}
+            layout
+          >
+            <Post linked {...data} />
+          </motion.div>
+        ))}
+      </AnimatePresence>
+
+      {posts.length === POSTS_PER_PAGE ? <LoadMore loader={loader} /> : null}
     </VStack>
   );
 }