implemented ratings, fixes

app/client/components/RatingPanel.tsx

@@ -0,0 +1,48 @@
+import { Button } from '@app/client/components/ui/button';
+import { Icon, Stack } from '@chakra-ui/react';
+import { RatingType } from '@generated/types';
+
+export function RatingPanel({
+  personalRating,
+  onRatingSet
+}: {
+  readonly personalRating: RatingType;
+  readonly onRatingSet: (rating: RatingType) => Promise<void>;
+}) {
+  return (
+    <Stack direction="row">
+      <Button
+        size="sm"
+        backgroundColor={personalRating === RatingType.Up ? 'green.500/80' : 'green.500'}
+        borderColor="green.500"
+        onClick={async () => {
+          if (personalRating !== RatingType.Up) {
+            await onRatingSet(RatingType.Up);
+            return;
+          }
+          await onRatingSet(RatingType.None);
+        }}
+      >
+        <Icon>
+          <i className="nf nf-oct-thumbsup" />
+        </Icon>
+      </Button>
+      <Button
+        size="sm"
+        backgroundColor={personalRating === RatingType.Down ? 'red.500/80' : 'red.500'}
+        borderColor="red.500"
+        onClick={async () => {
+          if (personalRating !== RatingType.Down) {
+            await onRatingSet(RatingType.Down);
+            return;
+          }
+          await onRatingSet(RatingType.None);
+        }}
+      >
+        <Icon>
+          <i className="nf nf-oct-thumbsdown" />
+        </Icon>
+      </Button>
+    </Stack>
+  );
+}