style: sidebar ui improvement (#1816)

* style: sidebar ui improvement

* style: sidebar menu spacing

* style: sidebar consistent spacing

* style: notification improvement

* style: remove from favorite filled icon added

* chore: settings option added in sidebar context menu

* chore: update delete project option visibility for sidebar

* style: sidebar project list display border top on scroll

apps/app/components/workspace/index.ts

@@ -9,3 +9,4 @@ export * from "./issues-stats";
 export * from "./settings-header";
 export * from "./sidebar-dropdown";
 export * from "./sidebar-menu";
+export * from "./sidebar-quick-action";

apps/app/components/workspace/sidebar-menu.tsx

@@ -51,7 +51,7 @@ export const WorkspaceSidebarMenu = () => {
   const { collapsed: sidebarCollapse } = useTheme();
 
   return (
-    <div className="w-full cursor-pointer space-y-2 px-4 mt-5 pb-5">
+    <div className="w-full cursor-pointer space-y-1 p-4">
       {workspaceLinks(workspaceSlug as string).map((link, index) => {
         const isActive =
           link.name === "Settings"

apps/app/components/workspace/sidebar-quick-action.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+
+// ui
+import { Icon } from "components/ui";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+
+export const WorkspaceSidebarQuickAction = () => {
+  const store: any = useMobxStore();
+
+  return (
+    <div
+      className={`flex items-center justify-between w-full cursor-pointer px-4 mt-4 ${
+        store?.theme?.sidebarCollapsed ? "flex-col gap-1" : "gap-2"
+      }`}
+    >
+      <button
+        className={`flex items-center gap-2 flex-grow rounded flex-shrink-0  py-2 ${
+          store?.theme?.sidebarCollapsed
+            ? "px-2 hover:bg-custom-sidebar-background-80"
+            : "px-3 shadow border-[0.5px] border-custom-border-300"
+        }`}
+        onClick={() => {
+          const e = new KeyboardEvent("keydown", { key: "c" });
+          document.dispatchEvent(e);
+        }}
+      >
+        <Icon iconName="edit_square" className="!text-xl !leading-5 text-custom-sidebar-text-300" />
+        {!store?.theme?.sidebarCollapsed && <span className="text-sm font-medium">New Issue</span>}
+      </button>
+
+      <button
+        className={`flex items-center justify-center rounded flex-shrink-0 p-2 ${
+          store?.theme?.sidebarCollapsed
+            ? "hover:bg-custom-sidebar-background-80"
+            : "shadow border-[0.5px] border-custom-border-300"
+        }`}
+        onClick={() => {
+          const e = new KeyboardEvent("keydown", { key: "k", ctrlKey: true, metaKey: true });
+          document.dispatchEvent(e);
+        }}
+      >
+        <Icon iconName="search" className="!text-xl !leading-5 text-custom-sidebar-text-300" />
+      </button>
+    </div>
+  );
+};