GH-633 - Updating active indicator for boards (#766)

* GH-663 - Updating active indicator for boards

* Passed active view ID to sidebar component

* Updating view selected state

Co-authored-by: Harshil Sharma <harshilsharma63@gmail.com>
Co-authored-by: Hossein <hahmadia@users.noreply.github.com>

webapp/src/components/sidebar/sidebar.tsx

@@ -21,6 +21,7 @@ type Props = {
     workspace?: IWorkspace
     workspaceTree: WorkspaceTree,
     activeBoardId?: string
+    activeViewId?: string
 }
 
 const Sidebar = React.memo((props: Props) => {
@@ -96,6 +97,7 @@ const Sidebar = React.memo((props: Props) => {
                                 views={views}
                                 board={board}
                                 activeBoardId={props.activeBoardId}
+                                activeViewId={props.activeViewId}
                                 nextBoardId={nextBoardId}
                             />
                         )

webapp/src/components/sidebar/sidebarBoardItem.scss

@@ -18,6 +18,28 @@
             font-weight: 400;
         }
 
+        &.active {
+            background: rgba(var(--sidebar-fg), 0.1);
+            position: relative;
+            color: white;
+
+            .Icon {
+                stroke: rgba(var(--sidebar-fg), 1);
+            }
+
+            &:not(.subitem) {
+                &:before {
+                    content: '';
+                    background: var(--sidebar-text-active-border);
+                    width: 2px;
+                    height: 100%;
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                }
+            }
+        }
+
         &.no-views {
             color: rgba(var(--sidebar-fg), 0.4);
 

webapp/src/components/sidebar/sidebarBoardItem.tsx

@@ -24,6 +24,7 @@ type Props = {
     views: readonly BoardView[]
     board: Board
     activeBoardId?: string
+    activeViewId?: string
     nextBoardId?: string
 }
 
@@ -95,7 +96,7 @@ const SidebarBoardItem = React.memo((props: Props) => {
     return (
         <div className='SidebarBoardItem'>
             <div
-                className={'octo-sidebar-item ' + (collapsed ? 'collapsed' : 'expanded')}
+                className={`octo-sidebar-item ' ${collapsed ? 'collapsed' : 'expanded'} ${board.id === props.activeBoardId ? 'active' : ''}`}
                 onClick={() => showBoard(board.id)}
             >
                 <IconButton
@@ -163,7 +164,7 @@ const SidebarBoardItem = React.memo((props: Props) => {
             {!collapsed && boardViews.map((view) => (
                 <div
                     key={view.id}
-                    className='octo-sidebar-item subitem'
+                    className={`octo-sidebar-item subitem ${view.id === props.activeViewId ? 'active' : ''}`}
                     onClick={() => showView(view.id, board.id)}
                 >
                     {iconForViewType(view.viewType)}

webapp/src/components/workspace.tsx

@@ -52,6 +52,7 @@ const Workspace = React.memo((props: Props) => {
                     workspace={workspace}
                     workspaceTree={workspaceTree}
                     activeBoardId={boardTree?.board.id}
+                    activeViewId={boardTree?.activeView.id}
                 />
             }
             <div className='mainFrame'>

webapp/src/theme.ts

@@ -13,6 +13,7 @@ export type Theme = {
     buttonFg: string,
     sidebarBg: string,
     sidebarFg: string,
+    sidebarTextActiveBorder: string,
     sidebarWhiteLogo: string,
 
     link: string,
@@ -41,6 +42,7 @@ export const defaultTheme = {
     buttonFg: '255, 255, 255',
     sidebarBg: '20, 93, 191',
     sidebarFg: '255, 255, 255',
+    sidebarTextActiveBorder: '#579eff',
     sidebarWhiteLogo: 'true',
 
     link: '#0000ee',
@@ -69,6 +71,7 @@ export const darkTheme = {
     buttonFg: '255, 255, 255',
     sidebarBg: '75, 73, 67',
     sidebarFg: '255, 255, 255',
+    sidebarTextActiveBorder: '#66b9a7',
     sidebarWhiteLogo: 'true',
 
     link: '#0090ff',
@@ -97,6 +100,7 @@ export const lightTheme = {
     buttonFg: '255, 255, 255',
     sidebarBg: '247, 246, 243',
     sidebarFg: '55, 53, 47',
+    sidebarTextActiveBorder: '#579eff',
     sidebarWhiteLogo: 'false',
 }
 
@@ -122,6 +126,7 @@ export function setTheme(theme: Theme | null): Theme {
     document.documentElement.style.setProperty('--button-fg', consolidatedTheme.buttonFg)
     document.documentElement.style.setProperty('--sidebar-bg', consolidatedTheme.sidebarBg)
     document.documentElement.style.setProperty('--sidebar-fg', consolidatedTheme.sidebarFg)
+    document.documentElement.style.setProperty('--sidebar-text-active-border', consolidatedTheme.sidebarTextActiveBorder)
     document.documentElement.style.setProperty('--sidebar-white-logo', consolidatedTheme.sidebarWhiteLogo)
 
     document.documentElement.style.setProperty('--link-color', consolidatedTheme.link)