add CreateLibraryDialog to sidebar dropdown

packages/interface/src/components/layout/Sidebar.tsx

@@ -184,7 +184,9 @@ export function Sidebar() {
 						)}
 					>
 						{/* this shouldn't default to "My Library", it is only this way for landing demo */}
-						{isLoadingLibraries ? 'Loading...' : library ? library.config.name : ' '}
+						<span className="w-32 truncate">
+							{isLoadingLibraries ? 'Loading...' : library ? library.config.name : ' '}
+						</span>
 					</Dropdown.Button>
 				}
 				// to support the transparent sidebar on macOS we use slightly adjusted styles
@@ -206,9 +208,11 @@ export function Sidebar() {
 					<Dropdown.Item className={itemStyles} icon={CogIcon} to="settings/library">
 						Library Settings
 					</Dropdown.Item>
-					<Dropdown.Item className={itemStyles} icon={PlusIcon}>
-						Library Settings
-					</Dropdown.Item>
+					<CreateLibraryDialog>
+						<Dropdown.Item className={itemStyles} icon={PlusIcon}>
+							Add Library
+						</Dropdown.Item>
+					</CreateLibraryDialog>
 					<Dropdown.Item
 						className={itemStyles}
 						icon={LockClosedIcon}

packages/ui/src/Dropdown.tsx

@@ -1,12 +1,12 @@
 import { Menu, Transition } from '@headlessui/react';
 import { ChevronDownIcon } from '@heroicons/react/24/solid';
-import { VariantProps } from 'class-variance-authority';
+import { VariantProps, cva } from 'class-variance-authority';
 import clsx from 'clsx';
 import { Fragment, PropsWithChildren } from 'react';
 import { Link } from 'react-router-dom';
 
 import * as UI from '.';
-import { cva, tw } from '.';
+import { tw } from './utils';
 
 export const Section = tw.div`px-1 py-1 space-y-[2px]`;