split activity buttons

client/src/components/ActivityBar/ActivityBar.vue

@@ -39,6 +39,8 @@ activityStore.sync();
 // activities from store
 const { activities } = storeToRefs(activityStore);
 
+const localNofificationActivity = { id: "notifications", to: "/user/notifications" };
+
 // context menu references
 const contextMenuVisible = ref(false);
 const contextMenuX = ref(0);
@@ -68,7 +70,7 @@ function isActiveSideBar(menuKey: string) {
 /**
  * Checks if an activity that has a panel should have the `is-active` prop
  */
-function panelActivityIsActive(activity: Activity) {
+function panelActivityIsActive(activity: Activity | { to: string, id: string }) {
     return isActiveSideBar(activity.id) || (activity.to !== null && isActiveRoute(activity.to));
 }
 
@@ -119,12 +121,7 @@ function onDragOver(evt: MouseEvent) {
 /**
  * Tracks the state of activities which expand or collapse the sidepanel
  */
-function onToggleSidebar(toggle: string, to: string | null = null) {
-    // if an activity's dedicated panel/sideBar is already active
-    // but the route is different, don't collapse
-    if (toggle && to && !(route.path === to) && isActiveSideBar(toggle)) {
-        return;
-    }
+function onToggleSidebar(toggle: string) {
     userStore.toggleSideBar(toggle);
 }
 
@@ -177,20 +174,24 @@ function toggleContextMenu(evt: MouseEvent) {
                                 :key="activity.id"
                                 :icon="activity.icon"
                                 :is-active="isActiveRoute(activity.to)"
+                                :side-bar-active="isActiveSideBar(activity.id)"
                                 :title="activity.title"
                                 :tooltip="activity.tooltip"
                                 :to="activity.to"
+                                type="split"
                                 @click="onToggleSidebar()" />
                             <ActivityItem
                                 v-else-if="['tools', 'workflows', 'multiview', 'histories'].includes(activity.id)"
                                 :id="`activity-${activity.id}`"
                                 :key="activity.id"
                                 :icon="activity.icon"
                                 :is-active="panelActivityIsActive(activity)"
+                                :side-bar-active="isActiveSideBar(activity.id)"
                                 :title="activity.title"
                                 :tooltip="activity.tooltip"
                                 :to="activity.to"
-                                @click="onToggleSidebar(activity.id, activity.to)" />
+                                :type="activity.id === 'tools' ? 'panel' : 'split'"
+                                @click="onToggleSidebar(activity.id)" />
                             <ActivityItem
                                 v-else-if="activity.to"
                                 :id="`activity-${activity.id}`"
@@ -210,7 +211,8 @@ function toggleContextMenu(evt: MouseEvent) {
                     v-if="!isAnonymous && isConfigLoaded && config.enable_notification_system"
                     id="activity-notifications"
                     icon="bell"
-                    :is-active="isActiveSideBar('notifications')"
+                    :is-active="panelActivityIsActive(localNofificationActivity)"
+                    :side-bar-active="isActiveSideBar('notifications')"
                     title="Notifications"
                     @click="onToggleSidebar('notifications')" />
                 <ActivityItem

client/src/components/ActivityBar/ActivityItem.vue

@@ -1,10 +1,15 @@
 <script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faChevronCircleLeft, faChevronCircleRight } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { computed } from "vue";
 import { useRouter } from "vue-router/composables";
 
 import TextShort from "@/components/Common/TextShort.vue";
 import Popper from "@/components/Popper/Popper.vue";
 
+library.add(faChevronCircleLeft, faChevronCircleRight);
+
 const router = useRouter();
 
 interface Option {
@@ -18,12 +23,14 @@ export interface Props {
     icon?: string | object;
     indicator?: number;
     isActive?: boolean;
+    sideBarActive?: boolean;
     tooltip?: string;
     tooltipPlacement?: string;
     progressPercentage?: number;
     progressStatus?: string;
     options?: Option[];
     to?: string;
+    type?: 'default' | 'panel' | 'split';
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -37,16 +44,35 @@ const props = withDefaults(defineProps<Props>(), {
     to: undefined,
     tooltip: undefined,
     tooltipPlacement: "right",
+    type: "default",
 });
 
 const emit = defineEmits<{
     (e: "click"): void;
 }>();
 
+const hasRightButton = computed(() => props.type === 'panel' || props.type === 'split');
+
 function onClick(evt: MouseEvent): void {
-    emit("click");
-    if (props.to) {
-        router.push(props.to);
+    if (props.type === 'default' || props.type === 'panel') {
+        emit("click");
+        if (props.to) {
+            router.push(props.to);
+        }
+    }
+}
+
+function onClickLeft(evt: MouseEvent): void {
+    if (props.type === 'split') {
+        if (props.to) {
+            router.push(props.to);
+        }
+    }
+}
+
+function onClickRight(evt: MouseEvent): void {
+    if (props.type === 'split') {
+        emit("click");
     }
 }
 </script>
@@ -57,7 +83,7 @@ function onClick(evt: MouseEvent): void {
             <div :id="id" class="activity-item" @click="onClick">
                 <b-nav-item
                     class="position-relative my-1 p-2"
-                    :class="{ 'nav-item-active': isActive }"
+                    :class="{ 'nav-item-active': isActive, 'split-button': props.type === 'split' }"
                     :aria-label="title | l">
                     <span v-if="progressStatus" class="progress">
                         <div
@@ -70,15 +96,22 @@ function onClick(evt: MouseEvent): void {
                                 width: `${Math.round(progressPercentage)}%`,
                             }" />
                     </span>
-                    <span class="position-relative">
-                        <div class="nav-icon">
-                            <span v-if="indicator > 0" class="nav-indicator" data-description="activity indicator">
-                                {{ Math.min(indicator, 99) }}
-                            </span>
-                            <FontAwesomeIcon :icon="icon" />
+                    <div class="d-flex align-items-center">
+                        <div class="position-relative router-opener" @click="onClickLeft">
+                            <div class="nav-icon">
+                                <span v-if="indicator > 0" class="nav-indicator" data-description="activity indicator">
+                                    {{ Math.min(indicator, 99) }}
+                                </span>
+                                <FontAwesomeIcon :icon="icon" />
+                            </div>
+                            <TextShort v-if="title" :text="title" class="nav-title" />
+
                         </div>
-                        <TextShort v-if="title" :text="title" class="nav-title" />
-                    </span>
+                        <div v-if="hasRightButton" class="panel-opener h-100" @click="onClickRight">
+                            <FontAwesomeIcon v-if="!props.sideBarActive" :icon="faChevronCircleRight" />
+                            <FontAwesomeIcon v-else :icon="faChevronCircleLeft" />
+                        </div>
+                    </div>
                 </b-nav-item>
             </div>
         </template>
@@ -124,6 +157,38 @@ function onClick(evt: MouseEvent): void {
     align-items: center;
     align-content: center;
     justify-content: center;
+
+    &.split-button {
+        .router-opener {
+            border-top-left-radius: $border-radius-extralarge;
+            border-bottom-left-radius: $border-radius-extralarge;
+        }
+        .panel-opener {
+            &:hover {
+                background: $brand-primary;
+            }
+        }        
+    }
+    &:not(.split-button) {
+        .router-opener {
+            border-radius: $border-radius-extralarge;
+        }
+    }
+
+    // .router-opener {
+    //     &:hover {
+    //         background: $gray-300;
+    //     }
+    // }
+
+    .panel-opener {
+        position: absolute;
+        right: 0;
+        display: grid;
+        place-items: center;
+        border-top-right-radius: $border-radius-extralarge;
+        border-bottom-right-radius: $border-radius-extralarge;
+    }
 }
 
 .nav-item-active {

client/src/components/ActivityBar/Items/NotificationItem.vue

@@ -13,6 +13,7 @@ export interface Props {
     title: string;
     icon: string;
     isActive: boolean;
+    sideBarActive: boolean;
 }
 
 defineProps<Props>();
@@ -34,6 +35,9 @@ const tooltip = computed(() =>
         :icon="icon"
         :indicator="totalUnreadCount"
         :is-active="isActive"
+        :side-bar-active="sideBarActive"
+        to="/user/notifications"
+        type="split"
         :title="title"
         :tooltip="tooltip"
         @click="emit('click')" />

client/src/components/Panels/ActivityPanel.vue

@@ -25,14 +25,14 @@ const emit = defineEmits(["goToAll"]);
             <slot />
         </div>
 
-        <BButton
+        <!-- <BButton
             v-if="props.goToAllTitle"
             class="activity-panel-footer"
             variant="primary"
             :data-description="`props.mainButtonText button`"
             @click="emit('goToAll')">
             {{ props.goToAllTitle }}
-        </BButton>
+        </BButton> -->
     </div>
 </template>
 

client/src/stores/activitySetup.ts

@@ -79,7 +79,7 @@ export const Activities = [
         optional: true,
         title: "Histories",
         tooltip: "Show all histories",
-        to: null,
+        to: "/histories/list",
         visible: true,
     },
     {