Add views for link summaries + edit ability (#81)

* Add article summary accessible from LinkCard * Add summary dialog to link viewer too
brendanv · Nov 5, 2024 · e70cd27 · e70cd27
1 parent 7c371a1
commit e70cd27
Show file tree

Hide file tree

Showing 9 changed files with 182 additions and 78 deletions.
diff --git a/frontend/src/components/DrawerDialog.tsx b/frontend/src/components/DrawerDialog.tsx
@@ -1,5 +1,5 @@
 import { useMediaQuery } from "@mantine/hooks";
-import { Drawer, Modal } from "@mantine/core";
+import { Drawer, Text, Modal } from "@mantine/core";
 
 interface Props {
   children: React.ReactNode;
@@ -14,7 +14,11 @@ const DrawerDialog = ({ children, title, open, onClose }: Props) => {
   if (!isLargeScreen) {
     return (
       <Drawer
-        title={title}
+        title={
+          <Text size="lg" fw={700}>
+            {title}
+          </Text>
+        }
         overlayProps={{ backgroundOpacity: 0.5, blur: 4 }}
         position="bottom"
         opened={open}
@@ -26,7 +30,11 @@ const DrawerDialog = ({ children, title, open, onClose }: Props) => {
   } else {
     return (
       <Modal
-        title={title}
+        title={
+          <Text size="lg" fw={700}>
+            {title}
+          </Text>
+        }
         overlayProps={{ backgroundOpacity: 0.5, blur: 4 }}
         opened={open}
         onClose={onClose}

diff --git a/frontend/src/components/LinkCard/LinkCard.module.css b/frontend/src/components/LinkCard/LinkCard.module.css
@@ -58,3 +58,7 @@
   height: 8rem;
   width: 100%;
 }
+
+.summaryPre {
+  white-space: pre-wrap;
+}
diff --git a/frontend/src/components/LinkCard/index.tsx b/frontend/src/components/LinkCard/index.tsx
@@ -9,6 +9,7 @@ import {
   rem,
   Skeleton,
   Text,
+  Tooltip,
 } from "@mantine/core";
 import type FeedLink from "@/types/FeedLink";
 import classes from "./LinkCard.module.css";
@@ -21,6 +22,7 @@ import {
   IconCircleCheck,
   IconDotsVertical,
   IconFileDownload,
+  IconFileTextAi,
   IconPencil,
   IconTrash,
   IconTags,
@@ -74,6 +76,8 @@ const LinkCard = ({ link, linkMutator }: Props) => {
   const invalidateLinksFeed = useInvalidateLinksFeed();
   const [isTagsEditOpen, { open: openTagsEdit, close: closeTagsEdit }] =
     useDisclosure(false);
+  const [isSummaryOpen, { open: openSummary, close: closeSummary }] =
+    useDisclosure(false);
 
   const isUnread = link.last_viewed_at === null;
   const handleToggleUnread = async () => {
@@ -134,97 +138,131 @@ const LinkCard = ({ link, linkMutator }: Props) => {
           <Card.Section mb="sm">
             <BackgroundImage linkId={link.id} imgSrc={link.header_image_url}>
               <Group justify="flex-end" p="xs">
-                <Menu zIndex={50}>
-                  <Menu.Target>
-                    <ActionIcon variant="subtle">
-                      <IconDotsVertical />
-                    </ActionIcon>
-                  </Menu.Target>
-                  <Menu.Dropdown>
-                    <Menu.Label>Link</Menu.Label>
-                    <Menu.Item
-                      leftSection={
-                        <IconPencil className={dropdownClasses.dropdownIcon} />
-                      }
-                      component="a"
-                      href={URLS.EDIT_LINK(link.id)}
-                    >
-                      Edit Link
-                    </Menu.Item>
-                    <Menu.Item
-                      leftSection={
-                        <IconTags className={dropdownClasses.dropdownIcon} />
-                      }
+                <ActionIcon.Group>
+                  {link.summary ? (
+                    <Tooltip label="View Summary">
+                      <ActionIcon
+                        variant="light"
+                        onClick={openSummary}
+                        title="View Summary"
+                      >
+                        <IconFileTextAi />
+                      </ActionIcon>
+                    </Tooltip>
+                  ) : null}
+                  <Tooltip label="Edit Tags">
+                    <ActionIcon
+                      variant="light"
                       onClick={openTagsEdit}
+                      title="Edit Tags"
                     >
-                      Tags
-                    </Menu.Item>
-                    <Menu.Item
-                      leftSection={
-                        <IconBlockquote
-                          className={dropdownClasses.dropdownIcon}
-                        />
-                      }
-                      component={Link}
-                      to={URLS.HIGHLIGHTS_WITH_LINK_SEARCH(link.id)}
-                    >
-                      View Highlights
-                    </Menu.Item>
-                    <Menu.Item
+                      <IconTags />
+                    </ActionIcon>
+                  </Tooltip>
+                  <Tooltip label={isUnread ? "Mark as Read" : "Mark as Unread"}>
+                    <ActionIcon
+                      variant="light"
                       onClick={handleToggleUnread}
-                      leftSection={
-                        isUnread ? (
-                          <IconCircleCheck
-                            className={dropdownClasses.dropdownIcon}
-                          />
-                        ) : (
-                          <IconCircle
-                            className={dropdownClasses.dropdownIcon}
-                          />
-                        )
-                      }
+                      title={isUnread ? "Mark as Read" : "Mark as Unread"}
                     >
-                      {isUnread ? "Mark as Read" : "Mark as Unread"}
-                    </Menu.Item>
-                    {link.archive ? (
+                      {isUnread ? <IconCircle /> : <IconCircleCheck />}
+                    </ActionIcon>
+                  </Tooltip>
+                  <Menu zIndex={50}>
+                    <Menu.Target>
+                      <ActionIcon variant="light">
+                        <IconDotsVertical />
+                      </ActionIcon>
+                    </Menu.Target>
+                    <Menu.Dropdown>
+                      <Menu.Label>Link</Menu.Label>
                       <Menu.Item
                         leftSection={
-                          <IconArchive
+                          <IconPencil
                             className={dropdownClasses.dropdownIcon}
                           />
                         }
                         component="a"
-                        href={URLS.LINK_ARCHIVE(link.id)}
+                        href={URLS.EDIT_LINK(link.id)}
+                      >
+                        Edit Link
+                      </Menu.Item>
+                      <Menu.Item
+                        leftSection={
+                          <IconTags className={dropdownClasses.dropdownIcon} />
+                        }
+                        onClick={openTagsEdit}
                       >
-                        View Archive
+                        Tags
                       </Menu.Item>
-                    ) : (
                       <Menu.Item
-                        onClick={handleCreateArchive}
                         leftSection={
-                          <IconFileDownload
+                          <IconBlockquote
                             className={dropdownClasses.dropdownIcon}
                           />
                         }
+                        component={Link}
+                        to={URLS.HIGHLIGHTS_WITH_LINK_SEARCH(link.id)}
                       >
-                        Create Archive
+                        View Highlights
                       </Menu.Item>
-                    )}
-                    <Menu.Label>Danger Zone</Menu.Label>
-                    <Menu.Item
-                      onClick={() => deleteMutator.mutate()}
-                      leftSection={
-                        <IconTrash className={dropdownClasses.dropdownIcon} />
-                      }
-                      color="red"
-                    >
-                      Delete
-                    </Menu.Item>
-                  </Menu.Dropdown>
-                </Menu>
+                      <Menu.Item
+                        onClick={handleToggleUnread}
+                        leftSection={
+                          isUnread ? (
+                            <IconCircleCheck
+                              className={dropdownClasses.dropdownIcon}
+                            />
+                          ) : (
+                            <IconCircle
+                              className={dropdownClasses.dropdownIcon}
+                            />
+                          )
+                        }
+                      >
+                        {isUnread ? "Mark as Read" : "Mark as Unread"}
+                      </Menu.Item>
+                      {link.archive ? (
+                        <Menu.Item
+                          leftSection={
+                            <IconArchive
+                              className={dropdownClasses.dropdownIcon}
+                            />
+                          }
+                          component="a"
+                          href={URLS.LINK_ARCHIVE(link.id)}
+                        >
+                          View Archive
+                        </Menu.Item>
+                      ) : (
+                        <Menu.Item
+                          onClick={handleCreateArchive}
+                          leftSection={
+                            <IconFileDownload
+                              className={dropdownClasses.dropdownIcon}
+                            />
+                          }
+                        >
+                          Create Archive
+                        </Menu.Item>
+                      )}
+                      <Menu.Label>Danger Zone</Menu.Label>
+                      <Menu.Item
+                        onClick={() => deleteMutator.mutate()}
+                        leftSection={
+                          <IconTrash className={dropdownClasses.dropdownIcon} />
+                        }
+                        color="red"
+                      >
+                        Delete
+                      </Menu.Item>
+                    </Menu.Dropdown>
+                  </Menu>
+                </ActionIcon.Group>
               </Group>
             </BackgroundImage>
           </Card.Section>
+
           {link.tags.length > 0 ? (
             <div className={classes.tags}>
               <LinkTagsDisplay link={link} size="xs" />
@@ -262,6 +300,13 @@ const LinkCard = ({ link, linkMutator }: Props) => {
           afterSave={closeTagsEdit}
         />
       </DrawerDialog>
+      <DrawerDialog
+        title={`Summary for ${link.title}`}
+        open={isSummaryOpen}
+        onClose={closeSummary}
+      >
+        <pre className={classes.summaryPre}>{link.summary}</pre>
+      </DrawerDialog>
     </>
   );
 };

diff --git a/frontend/src/hooks/useLinkViewerQuery.tsx b/frontend/src/hooks/useLinkViewerQuery.tsx
@@ -14,6 +14,7 @@ export type LinkView = {
   hostname: string | null;
   last_viewed_at: Date | null;
   read_time_display: string | null;
+  summary: string | null;
   tags: Tag[];
   highlights: {
     id: string;
@@ -38,6 +39,7 @@ type RawLinkQueryResult = {
   hostname: string | null;
   last_viewed_at: string | null;
   read_time_display: string | null;
+  summary: string | null;
   tags: string[];
   cleaned_url: string | null;
   article_html: string | null;
@@ -78,6 +80,7 @@ const getFields = () =>
     "hostname",
     "last_viewed_at",
     "read_time_display",
+    "summary",
     "title",
     "tags",
     "cleaned_url",
@@ -166,6 +169,7 @@ const runQuery = async (
         ? { "X-Lynx-Update-Last-Viewed": "true" }
         : {},
     });
+  console.log(queryResult);
   return queryResultToLinkView(queryResult);
 };
 

diff --git a/frontend/src/hooks/useLinksFeedQuery.tsx b/frontend/src/hooks/useLinksFeedQuery.tsx
@@ -38,6 +38,7 @@ export type FeedQueryItem = {
   hostname: string | null;
   last_viewed_at: string | null;
   read_time_display: string | null;
+  summary: string | null;
   tags: string[];
   title: string | null;
   user: string;
@@ -56,6 +57,7 @@ const getFields = () =>
     "hostname",
     "last_viewed_at",
     "read_time_display",
+    "summary",
     "title",
     "tags",
     "archive",
@@ -76,6 +78,7 @@ export const convertFeedQueryItemToFeedLink = (
     hostname: item.hostname,
     last_viewed_at: item.last_viewed_at ? new Date(item.last_viewed_at) : null,
     read_time_display: item.read_time_display,
+    summary: item.summary,
     title: item.title,
     tags:
       item.expand && item.expand.tags

diff --git a/frontend/src/pages/EditLink.tsx b/frontend/src/pages/EditLink.tsx
@@ -31,6 +31,7 @@ const EditLink = () => {
     initialValues: {
       title: "",
       excerpt: "",
+      summary: "",
       article_date: "",
     },
     validate: {
@@ -43,6 +44,7 @@ const EditLink = () => {
       form.setValues({
         title: link.title || "",
         excerpt: link.excerpt || "",
+        summary: link.summary || "",
         article_date: link.article_date
           ? link.article_date.toISOString().split("T")[0]
           : "",
@@ -58,6 +60,7 @@ const EditLink = () => {
       updates: {
         title: values.title,
         excerpt: values.excerpt,
+        summary: values.summary,
         article_date: values.article_date || null,
       },
       options: {
@@ -104,11 +107,6 @@ const EditLink = () => {
               {...form.getInputProps("title")}
               size="md"
             />
-            <Textarea
-              label="Excerpt"
-              {...form.getInputProps("excerpt")}
-              size="md"
-            />
             <TextInput
               label="Article Date"
               type="date"
@@ -120,6 +118,24 @@ const EditLink = () => {
               linkMutator={linkMutation}
               size="md"
             />
+            <Textarea
+              label="Excerpt"
+              {...form.getInputProps("excerpt")}
+              size="md"
+              minRows={3}
+              maxRows={6}
+              resize="vertical"
+              autosize
+            />
+            <Textarea
+              label="Summary"
+              {...form.getInputProps("summary")}
+              size="md"
+              minRows={3}
+              maxRows={6}
+              resize="vertical"
+              autosize
+            />
             <Button
               type="submit"
               fullWidth