From 3bf95b29933a7486fc373eeeee455de4d38d2bfa Mon Sep 17 00:00:00 2001
From: Brendan Allan <brendonovich@outlook.com>
Date: Fri, 21 Oct 2022 11:26:15 +0800
Subject: [PATCH] add CreateLibraryDialog to sidebar dropdown

---
 packages/interface/src/components/layout/Sidebar.tsx | 12 ++++++++----
 packages/ui/src/Dropdown.tsx                         |  4 ++--
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/interface/src/components/layout/Sidebar.tsx b/packages/interface/src/components/layout/Sidebar.tsx
index 9320c09e7..b47217bfa 100644
--- a/packages/interface/src/components/layout/Sidebar.tsx
+++ b/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}
diff --git a/packages/ui/src/Dropdown.tsx b/packages/ui/src/Dropdown.tsx
index 0cd174197..b99f1a26b 100644
--- a/packages/ui/src/Dropdown.tsx
+++ b/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]`;