web: cleanup

apps/web/src/components/editor/header.tsx

@@ -38,7 +38,7 @@ function Header(props: HeaderProps) {
   const activeSession = useEditorStore((store) =>
     store.getActiveSession(["default", "readonly"])
   );
-  const tags = activeSession?.tags;
+  const tags = activeSession?.tags || [];
   const noteId = activeSession?.note.id;
 
   const setTag = useCallback(async function (
@@ -61,12 +61,15 @@ function Header(props: HeaderProps) {
   },
   []);
 
-  if (!noteId) return null;
-
   return (
     <>
       <Flex
-        sx={{ lineHeight: 2.5, alignItems: "center", flexWrap: "wrap" }}
+        sx={{
+          lineHeight: 2.5,
+          alignItems: "center",
+          flexWrap: "wrap",
+          opacity: !noteId ? 0.5 : 1
+        }}
         data-test-id="tags"
       >
         {tags?.map((tag) => (
@@ -77,7 +80,9 @@ function Header(props: HeaderProps) {
             icon={TagIcon}
             onClick={() => navigate(`/tags/${tag.id}`)}
             onDismiss={
-              readonly ? undefined : () => setTag(noteId, tags, tag.title)
+              readonly || !noteId
+                ? undefined
+                : () => setTag(noteId, tags, tag.title)
             }
             styles={{ container: { mr: 1 }, text: { fontSize: "body" } }}
           />
@@ -86,8 +91,10 @@ function Header(props: HeaderProps) {
           <Autosuggest
             sessionId={id}
             filter={(query) => db.lookup.tags(query).items(10)}
+            disabled={!noteId}
             toMenuItems={(filtered, reset, query) => {
               const items: MenuItem[] = [];
+              if (!noteId) return items;
               const isExactMatch =
                 !!query && filtered.some((item) => item.title === query);
               if (query && !isExactMatch) {
@@ -115,8 +122,12 @@ function Header(props: HeaderProps) {
 
               return items;
             }}
-            onAdd={(value) => setTag(noteId, tags, value)}
+            onAdd={(value) => {
+              if (!noteId) return;
+              setTag(noteId, tags, value);
+            }}
             onRemove={() => {
+              if (!noteId) return;
               if (tags.length <= 0) return;
               setTag(noteId, tags, tags[tags.length - 1].title);
             }}
@@ -141,6 +152,7 @@ type AutosuggestProps<T> = {
   onAdd: (text: string) => void;
   toMenuItems: (filtered: T[], reset: () => void, query?: string) => MenuItem[];
   defaultItems: () => Promise<T[]>;
+  disabled?: boolean;
 };
 export function Autosuggest<T>(props: AutosuggestProps<T>) {
   const { sessionId, filter, onRemove, onAdd, defaultItems, toMenuItems } =
@@ -195,6 +207,7 @@ export function Autosuggest<T>(props: AutosuggestProps<T>) {
       ref={inputRef}
       tabIndex={-1}
       variant="clean"
+      disabled={props.disabled}
       sx={{
         width: "auto",
         border: "none",