Update supernotes extension (#11598)

* Update supernotes extension

- Fix colors and update API definitions
- Initial commit

* Update supernotes extension

- Fix colors and update API definitions
- Fix colors and update API definitions

* Update images to have consistent background

extensions/supernotes/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Supernotes Changelog
 
+## [Color Update] - 2024-04-02
+- Add rendered markdown preview of cards
+- Fix support for card colors
+- Update card response model
+
 ## [API Updates & Deeplinks] - 2022-12-03
 - API calls have been updated for the Supernotes v2.2 response format
 - Cards now have an action to open them directly in Supernotes

extensions/supernotes/README.md

@@ -1,6 +1,9 @@
 # Supernotes ˣ Raycast
 
-Interact with the Supernotes platform via Raycast
+Interact with [Supernotes](https://supernotes.app/), the knowledge management and note-taking app. Search your card library, preview your cards in Raycast and open a selected card directly in the Supernotes desktop app. You can also quickly create simple cards within Raycast.
 
-## Required Configuration
-In order to use this extension you need a Supernotes API Key. You can follow [this guide](https://docs.supernotes.app/en/articles/5257176-api-access) in order to get an API key for your Supernotes account.
+![](./metadata/supernotes-0.png)
+
+## Setup
+
+Please generate a Supernotes API Key from within your 'API & Integrations' Settings in Supernotes. If you require additional help, you can follow [this in-depth guide](https://docs.supernotes.app/en/articles/5257176-api-access).

extensions/supernotes/package.json

@@ -14,8 +14,9 @@
     "Productivity"
   ],
   "contributors": [
+    "tobias",
     "peduarte"
-],
+  ],
   "commands": [
     {
       "name": "create",
@@ -65,4 +66,4 @@
     "fix-lint": "ray lint --fix",
     "lint": "ray lint"
   }
-}
+}

extensions/supernotes/src/components/CardListItem.tsx

@@ -1,6 +1,6 @@
-import { Action, ActionPanel, Color, Icon, List } from "@raycast/api";
+import { Action, ActionPanel, Icon, List } from "@raycast/api";
 
-import { ColorMap } from "utils/mapping";
+import { determineCardColor } from "utils/mapping";
 import { ICard } from "utils/types";
 
 import CardDetail from "components/CardDetail";
@@ -15,10 +15,12 @@ const CardListItem = ({ card, removeFromList }: CardListItemProps) => {
   return (
     <List.Item
       title={card.data.name}
+      subtitle={card.data.name === "" ? "Untitled" : undefined}
       icon={{
-        source: Icon.BlankDocument,
-        tintColor: card.membership.color ? ColorMap[card.membership.color] : Color.SecondaryText,
+        source: Icon.Circle,
+        tintColor: determineCardColor(card),
       }}
+      detail={<List.Item.Detail markdown={card.data.markup} />}
       actions={
         <ActionPanel>
           <Action.Push title="View Card" icon={Icon.BlankDocument} target={<CardDetail card={card} />} />

extensions/supernotes/src/search.tsx

@@ -29,6 +29,7 @@ const CardSearch = () => {
       isLoading={searchLoading || recentsLoading}
       onSearchTextChange={search}
       searchBarPlaceholder="Search for cards..."
+      isShowingDetail
     >
       {resultCards
         ? Object.values(resultCards).map((card) => (

extensions/supernotes/src/utils/mapping.ts

@@ -1,21 +1,33 @@
 import { Color } from "@raycast/api";
 
+import { ICard } from "./types";
+
 export const ColorMap: Record<string, string> = {
-  lightBlue: Color.Blue,
-  lightPink: Color.Magenta,
-  lightPurple: Color.Purple,
-  lightGreen: Color.Green,
-  lightYellow: Color.Yellow,
-  lightOrange: Color.Orange,
-  lightRed: Color.Red,
+  blue: Color.Blue,
+  pink: Color.Magenta,
+  purple: Color.Purple,
+  green: Color.Green,
+  yellow: Color.Yellow,
+  orange: Color.Orange,
+  red: Color.Red,
+};
+
+export const determineCardColor = (card: ICard) => {
+  if (card.membership.personal_color) {
+    return ColorMap[card.membership.personal_color];
+  } else if (card.data.color) {
+    return ColorMap[card.data.color];
+  } else {
+    return Color.SecondaryText;
+  }
 };
 
 export const PermMap: Record<string, string> = {
   "-1": "Inherit",
-  "2369": "Ghost",
-  "207695": "Reader",
-  "207823": "Contributor",
-  "211951": "Editor",
-  "524287": "Moderator",
-  "2097151": "Author",
+  "0": "None",
+  "1318": "Reader",
+  "1382": "Contributor",
+  "1398": "Editor",
+  "4094": "Moderator",
+  "8190": "Author",
 };

extensions/supernotes/src/utils/types.ts

@@ -34,32 +34,37 @@ export interface ICard {
   links: Record<string, IParentLink>;
 }
 
-export interface ICardMembership {
+export type ICardMembership = {
   id: string;
-  perms: number;
+  liked: boolean | null;
   personal_tags: Array<string>;
-  color: null | string;
+  personal_color: string | null;
+  perms: number;
+  via_type: number;
+  via_id: string | null;
   created_when: string;
-  interacted_when: string;
-  modified_when: null | string;
-  has_commented: boolean;
-  enrolled: null | boolean;
-  is_context: null | boolean;
-  status: Status;
+  modified_when: string;
+  enrolled_when: string | null;
+  opened_when: string | null;
+  auto_publish_children: boolean | null;
+  view: {
+    display_type: number;
+    sort_type: number;
+    sort_ascending: boolean;
+  } | null;
   visibility: Visibility;
-  held_total_child_count: number;
-  held_published_child_count: number;
-  liked: null | boolean;
-  via_type: number;
-  via_id: null | string;
-}
+  status: Status;
+  total_child_count: number;
+  share_link_count: number;
+};
 
 export interface ICardData {
   id: string;
   owner_id: string;
   name: string;
   markup: string;
   html: string;
+  ydoc: string;
   icon: string | null;
   frozen: boolean | null;
   backlinks: Record<string, IBacklink>;
@@ -71,12 +76,12 @@ export interface ICardData {
   targeted_when: string | null;
   status: Status;
   member_count: number;
+  color: string | null;
   comment_count: number;
   published_child_count: number;
   likes: number;
   import_id?: string;
 }
-
 export interface IBacklink {
   back_id: string;
   fore_id: string;