Merge pull request #279 from Southclaws/organise-iconography

Organise icons and misc tidy up
Southclaws · Nov 6, 2024 · 60932b7 · 60932b7
2 parents 58e645c + 8bf757f
commit 60932b7
Show file tree

Hide file tree

Showing 146 changed files with 677 additions and 1,206 deletions.
diff --git a/web/src/components/asset/AssetUploadAction.tsx b/web/src/components/asset/AssetUploadAction.tsx
@@ -2,7 +2,6 @@ import {
   FileUploadFileAcceptDetails,
   FileUploadFileRejectDetails,
 } from "@ark-ui/react";
-import { ImageIcon, ImagePlusIcon } from "lucide-react";
 import mime from "mime-db";
 import { PropsWithChildren } from "react";
 import { toast } from "sonner";
@@ -12,6 +11,7 @@ import { assetUpload } from "@/api/openapi-client/assets";
 import { Asset, AssetID } from "@/api/openapi-schema";
 import { Button } from "@/components/ui/button";
 import * as FileUpload from "@/components/ui/file-upload";
+import { MediaAddIcon, MediaIcon } from "@/components/ui/icons/Media";
 import { ButtonVariantProps, button } from "@/styled-system/recipes";
 
 type AssetUploadActionProps = {
@@ -116,12 +116,12 @@ export function AssetUploadAction({
           >
             {props.operation === "add" ? (
               <>
-                <ImagePlusIcon />
+                <MediaAddIcon />
                 {props.hideLabel ? "" : "add cover"}
               </>
             ) : (
               <>
-                <ImageIcon /> {props.hideLabel ? "" : "replace cover"}
+                <MediaIcon /> {props.hideLabel ? "" : "replace cover"}
               </>
             )}
           </Button>

diff --git a/web/src/components/category/CategoryCardList/CategoryCardList.tsx b/web/src/components/category/CategoryCardList/CategoryCardList.tsx
@@ -2,6 +2,7 @@ import Link from "next/link";
 
 import { Category } from "@/api/openapi-schema";
 import { Heading } from "@/components/ui/heading";
+import { DiscussionIcon } from "@/components/ui/icons/Discussion";
 import { CardGrid } from "@/components/ui/rich-card";
 import { categoryColourCSS } from "@/lib/category/colours";
 import { CardBox, HStack, LStack, WStack, styled } from "@/styled-system/jsx";
@@ -45,19 +46,20 @@ export function CategoryCard(props: Category) {
       display="flex"
       justifyContent="space-between"
     >
-      <LStack>
-        <WStack alignItems="start">
-          <Link className={linkOverlay()} href={`/d/${props.slug}`}>
-            <Heading>{props.name}</Heading>
-          </Link>
+      <WStack alignItems="start">
+        <Link className={linkOverlay()} href={`/d/${props.slug}`}>
+          <Heading>{props.name}</Heading>
+        </Link>
 
-          <CategoryMenu category={props} />
-        </WStack>
+        <CategoryMenu category={props} />
+      </WStack>
 
-        <styled.p color="fg.muted">{props.description}</styled.p>
-      </LStack>
+      <styled.p color="fg.muted">{props.description}</styled.p>
 
-      <styled.p color="fg.subtle">{props.postCount} threads</styled.p>
+      <HStack gap="1" color="fg.subtle">
+        <DiscussionIcon w="4" />
+        <styled.p>{props.postCount} threads</styled.p>
+      </HStack>
     </CardBox>
   );
 }
diff --git a/web/src/components/category/CategoryCreate/CategoryCreateTrigger.tsx b/web/src/components/category/CategoryCreate/CategoryCreateTrigger.tsx
@@ -1,9 +1,8 @@
-import { PlusIcon } from "@heroicons/react/24/outline";
-
 import { useDisclosure } from "src/utils/useDisclosure";
 
 import { ButtonProps } from "@/components/ui/button";
 import { IconButton } from "@/components/ui/icon-button";
+import { CreateIcon } from "@/components/ui/icons/Create";
 import { Item } from "@/components/ui/menu";
 
 import { CategoryCreateModal } from "./CategoryCreateModal";
@@ -15,7 +14,7 @@ type Props = ButtonProps & {
 
 export const CreateCategoryID = "create-category";
 export const CreateCategoryLabel = "Create";
-export const CreateCategoryIcon = <PlusIcon />;
+export const CreateCategoryIcon = <CreateIcon />;
 
 export function CategoryCreateTrigger({
   parentSlug,

diff --git a/web/src/components/collection/CollectionCard.tsx b/web/src/components/collection/CollectionCard.tsx
@@ -1,11 +1,11 @@
-import { BoxesIcon } from "lucide-react";
-
 import { Collection } from "@/api/openapi-schema";
 import { MemberBadge } from "@/components/member/MemberBadge/MemberBadge";
 import { Badge } from "@/components/ui/badge";
 import { Card } from "@/components/ui/rich-card";
 import { HStack, WStack } from "@/styled-system/jsx";
 
+import { CollectionIcon } from "../ui/icons/Collection";
+
 import { CollectionMenu } from "./CollectionMenu/CollectionMenu";
 
 type Props = {
@@ -47,7 +47,7 @@ function CollectionItems(props: Props) {
   const itemsLabel = props.collection.item_count === 1 ? "item" : "items";
   return (
     <Badge size="sm">
-      <BoxesIcon width="1.4rem" />{" "}
+      <CollectionIcon />{" "}
       <span>
         {props.collection.item_count} {itemsLabel}
       </span>

diff --git a/web/src/components/collection/CollectionMenu/CollectionMenu.tsx b/web/src/components/collection/CollectionMenu/CollectionMenu.tsx
@@ -1,17 +1,15 @@
 "use client";
 
 import { Portal } from "@ark-ui/react";
-import { LinkIcon, PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
-import { ShareIcon } from "@heroicons/react/24/solid";
 import { format } from "date-fns/format";
 
 import { MoreAction } from "src/components/site/Action/More";
 
-import { CancelAction } from "@/components/site/Action/Cancel";
 import { DeleteWithConfirmationMenuItem } from "@/components/site/DeleteConfirmationMenuItem";
+import { LinkIcon } from "@/components/ui/icons/Link";
+import { ShareIcon } from "@/components/ui/icons/Share";
 import * as Menu from "@/components/ui/menu";
 import { HStack, styled } from "@/styled-system/jsx";
-import { menuItemColorPalette } from "@/styled-system/patterns";
 
 import { Props, useCollectionMenu } from "./useCollectionMenu";
 
@@ -47,14 +45,14 @@ export function CollectionMenu(props: Props) {
 
               <Menu.Item value="copy-link" onClick={handlers.handleCopyLink}>
                 <HStack gap="1">
-                  <LinkIcon width="1.4em" /> Copy link
+                  <LinkIcon /> Copy link
                 </HStack>
               </Menu.Item>
 
               {isSharingEnabled && (
                 <Menu.Item value="share" onClick={handlers.handleShare}>
                   <HStack gap="1">
-                    <ShareIcon width="1.4em" /> Share
+                    <ShareIcon /> Share
                   </HStack>
                 </Menu.Item>
               )}

diff --git a/web/src/components/content/CollectionCreate/CollectionCreateTrigger.tsx b/web/src/components/content/CollectionCreate/CollectionCreateTrigger.tsx
@@ -1,9 +1,9 @@
-import { FolderPlusIcon } from "@heroicons/react/24/outline";
 import { PropsWithChildren } from "react";
 
 import { useDisclosure } from "src/utils/useDisclosure";
 
 import { Button } from "@/components/ui/button";
+import { CreateFolderIcon } from "@/components/ui/icons/CreateFolder";
 import { ButtonVariantProps } from "@/styled-system/recipes";
 
 import { CollectionCreateModal } from "./CollectionCreateModal";
@@ -30,7 +30,7 @@ export function CollectionCreateTrigger(
           {...props}
           onClick={onOpen}
         >
-          <FolderPlusIcon width="1.4rem" /> {props.label ?? "Collection"}
+          <CreateFolderIcon /> {props.label ?? "Collection"}
         </Button>
       )}
       <CollectionCreateModal isOpen={isOpen} onClose={onClose} {...props} />

diff --git a/web/src/components/content/CollectionMenu/CollectionMenu.tsx b/web/src/components/content/CollectionMenu/CollectionMenu.tsx
@@ -1,11 +1,12 @@
 import { Portal } from "@ark-ui/react";
-import { MinusIcon, PlusIcon } from "@heroicons/react/24/solid";
 import { KeyboardEvent, useState } from "react";
 
 import { BookmarkAction } from "src/components/site/Action/Bookmark";
 
 import { Unready } from "@/components/site/Unready";
 import { Checkbox } from "@/components/ui/checkbox";
+import { AddIcon } from "@/components/ui/icons/Add";
+import { RemoveIcon } from "@/components/ui/icons/Remove";
 import * as Menu from "@/components/ui/menu";
 import { Box, Center, HStack } from "@/styled-system/jsx";
 import { useDisclosure } from "@/utils/useDisclosure";
@@ -94,7 +95,7 @@ function LazyLoadedMenuContent(props: LazyLoadedMenuContentProps) {
                 <Checkbox checked={c.has_queried_item} />
               ) : (
                 <Center w="5">
-                  {c.has_queried_item ? <MinusIcon /> : <PlusIcon />}
+                  {c.has_queried_item ? <RemoveIcon /> : <AddIcon />}
                 </Center>
               )}
               {c.name}

diff --git a/web/src/components/content/ContentComposer/ContentComposer.tsx b/web/src/components/content/ContentComposer/ContentComposer.tsx
@@ -1,5 +1,8 @@
 import { Portal } from "@ark-ui/react";
 import { EditorContent } from "@tiptap/react";
+import { match } from "ts-pattern";
+
+import { Button } from "@/components/ui/button";
 import {
   BoldIcon,
   CodeIcon,
@@ -17,10 +20,7 @@ import {
   StrikethroughIcon,
   TextIcon,
   TextQuoteIcon,
-} from "lucide-react";
-import { match } from "ts-pattern";
-
-import { Button } from "@/components/ui/button";
+} from "@/components/ui/icons/Typography";
 import * as Menu from "@/components/ui/menu";
 import { css } from "@/styled-system/css";
 import { LStack, styled } from "@/styled-system/jsx";

diff --git a/web/src/components/feed/FeedConfig/FeedConfig.tsx b/web/src/components/feed/FeedConfig/FeedConfig.tsx
@@ -6,7 +6,6 @@ import {
   createListCollection,
 } from "@ark-ui/react";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { CheckIcon, ChevronsUpDownIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useQueryState } from "nuqs";
 import { Controller, ControllerProps, useForm } from "react-hook-form";
@@ -22,6 +21,10 @@ import {
   EditingSchema,
 } from "@/components/site/SiteContextPane/useSiteContextPane";
 import { Unready } from "@/components/site/Unready";
+import { CheckIcon } from "@/components/ui/icons/Check";
+import { DiscussionIcon } from "@/components/ui/icons/Discussion";
+import { LibraryIcon } from "@/components/ui/icons/Library";
+import { SelectIcon } from "@/components/ui/icons/Select";
 import * as Select from "@/components/ui/select";
 import {
   FeedLayoutConfigSchema,
@@ -30,7 +33,7 @@ import {
 import { useSettingsMutation } from "@/lib/settings/mutation";
 import { Settings } from "@/lib/settings/settings";
 import { useSettings } from "@/lib/settings/settings-client";
-import { HStack } from "@/styled-system/jsx";
+import { HStack, styled } from "@/styled-system/jsx";
 import { hasPermission } from "@/utils/permissions";
 
 import { refreshFeed } from "../../../lib/feed/refresh";
@@ -124,10 +127,12 @@ const sources = [
   {
     label: "Threads",
     value: "threads" as const,
+    icon: <DiscussionIcon width="4" />,
   },
   {
     label: "Library",
     value: "library" as const,
+    icon: <LibraryIcon width="4" />,
   },
 ];
 
@@ -167,15 +172,6 @@ export function FeedConfig(props: Props) {
   );
 }
 
-function getFeedSourceName(metadata: Settings["metadata"]) {
-  switch (metadata.feed.source.type) {
-    case "threads":
-      return "Feed";
-    case "library":
-      return "Library";
-  }
-}
-
 function SelectField<T = any>({
   collection,
   defaultValue,
@@ -201,20 +197,25 @@ function SelectField<T = any>({
             size="xs"
             defaultValue={[defaultValue]}
             collection={collection}
-            positioning={{ sameWidth: true }}
+            positioning={{ sameWidth: false }}
             onValueChange={handleChange}
           >
             <Select.Control>
               <Select.Trigger>
                 <Select.ValueText placeholder="Select a Source" />
-                <ChevronsUpDownIcon />
+                <SelectIcon />
               </Select.Trigger>
             </Select.Control>
             <Select.Positioner>
               <Select.Content>
                 {sources.map((item) => (
                   <Select.Item key={item.value} item={item}>
-                    <Select.ItemText>{item.label}</Select.ItemText>
+                    <Select.ItemText mr="2">
+                      <HStack gap="1">
+                        <styled.span w="4">{item.icon}</styled.span>
+                        <styled.span>{item.label}</styled.span>
+                      </HStack>
+                    </Select.ItemText>
                     <Select.ItemIndicator>
                       <CheckIcon />
                     </Select.ItemIndicator>

diff --git a/web/src/components/feed/FeedItemMenu/FeedItemMenu.tsx b/web/src/components/feed/FeedItemMenu/FeedItemMenu.tsx
@@ -1,9 +1,11 @@
 import { Portal } from "@ark-ui/react";
 import { format } from "date-fns/format";
-import { LinkIcon, ShareIcon, TrashIcon } from "lucide-react";
 
 import { CancelAction } from "@/components/site/Action/Cancel";
 import { MoreAction } from "@/components/site/Action/More";
+import { DeleteIcon } from "@/components/ui/icons/Delete";
+import { LinkIcon } from "@/components/ui/icons/Link";
+import { ShareIcon } from "@/components/ui/icons/Share";
 import * as Menu from "@/components/ui/menu";
 import { HStack, styled } from "@/styled-system/jsx";
 import { menuItemColorPalette } from "@/styled-system/patterns";
@@ -39,14 +41,14 @@ export function FeedItemMenu(props: Props) {
 
               <Menu.Item value="copy-link">
                 <HStack gap="1">
-                  <LinkIcon width="1.4em" /> Copy link
+                  <LinkIcon /> Copy link
                 </HStack>
               </Menu.Item>
 
               {isSharingEnabled && (
                 <Menu.Item value="share">
                   <HStack gap="1">
-                    <ShareIcon width="1.4em" /> Share
+                    <ShareIcon /> Share
                   </HStack>
                 </Menu.Item>
               )}
@@ -81,7 +83,7 @@ export function FeedItemMenu(props: Props) {
                     closeOnSelect={false}
                   >
                     <HStack gap="1">
-                      <TrashIcon width="1.4em" /> Delete
+                      <DeleteIcon /> Delete
                     </HStack>
                   </Menu.Item>
                 ))}

diff --git a/web/src/components/feed/ThreadItem.tsx b/web/src/components/feed/ThreadItem.tsx
@@ -1,5 +1,3 @@
-import { ChatBubbleLeftIcon as ChatBubbleLeftIconOutline } from "@heroicons/react/24/outline";
-import { ChatBubbleLeftIcon as ChatBubbleLeftIconSolid } from "@heroicons/react/24/solid";
 import Link from "next/link";
 
 import { ThreadReference } from "src/api/openapi-schema";
@@ -11,6 +9,11 @@ import { Card } from "@/components/ui/rich-card";
 import { HStack, styled } from "@/styled-system/jsx";
 import { getAssetURL } from "@/utils/asset";
 
+import {
+  DiscussionIcon,
+  DiscussionParticipatingIcon,
+} from "../ui/icons/Discussion";
+
 import { FeedItemMenu } from "./FeedItemMenu/FeedItemMenu";
 
 type Props = {
@@ -61,9 +64,9 @@ export function ThreadItem({ thread }: Props) {
             <Link href={permalink} title={replyStatusLabel}>
               <styled.span color="fg.subtle" display="flex" gap="1">
                 {hasReplied ? (
-                  <ChatBubbleLeftIconSolid width="1rem" />
+                  <DiscussionParticipatingIcon width="4" />
                 ) : (
-                  <ChatBubbleLeftIconOutline width="1rem" />
+                  <DiscussionIcon width="4" />
                 )}
                 {replyCount}
               </styled.span>

diff --git a/web/src/components/form/ColourInput/ColourInput.tsx b/web/src/components/form/ColourInput/ColourInput.tsx
@@ -1,9 +1,8 @@
 import { CSSProperties, Ref, forwardRef } from "react";
 import { Control, Controller } from "react-hook-form";
 
-import { DragHandleIcon } from "src/components/graphics/DragHandleIcon";
-
 import { FormControl } from "@/components/ui/form/FormControl";
+import { DragHandleIcon } from "@/components/ui/icons/DragHandle";
 import { styled } from "@/styled-system/jsx";
 
 import { C, L, Props, useColourInput } from "./useColourInput";
@@ -87,7 +86,7 @@ export function ColourInput(props: Props) {
               width: "var(--thumb-size)",
             }}
           >
-            <DragHandleIcon />
+            <DragHandleIcon color="fg.muted" />
           </styled.div>
         </styled.output>
       </styled.div>