feat(gui-v2): use useSidebar with storageKey

packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue

@@ -1,14 +1,10 @@
 <script setup lang="ts">
-import { inject, ref } from '#imports'
-import { RightSidebarInj } from '~/context'
-
 const emits = defineEmits(['addRow'])
-
+const { isOpen } = useSidebar({ storageKey: 'nc-right-sidebar' })
-const sidebarOpen = inject(RightSidebarInj, ref(true))
 </script>
 
 <template>
-  <a-tooltip :placement="sidebarOpen ? 'bottomRight' : 'left'">
+  <a-tooltip :placement="isOpen ? 'bottomRight' : 'left'">
     <template #title> {{ $t('activity.addRow') }} </template>
 
     <div class="nc-sidebar-right-item hover:after:bg-primary/75 group">

packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteTable.vue

@@ -1,16 +1,15 @@
 <script setup lang="ts">
-import { inject, ref, useTable } from '#imports'
+import { MetaInj, inject, useTable } from '#imports'
-import { MetaInj, RightSidebarInj } from '~/context'
 
 const meta = inject(MetaInj)!
 
 const { deleteTable } = useTable()
 
-const sidebarOpen = inject(RightSidebarInj, ref(true))
+const { isOpen } = useSidebar({ storageKey: 'nc-right-sidebar' })
 </script>
 
 <template>
-  <a-tooltip :placement="sidebarOpen ? 'bottomRight' : 'left'">
+  <a-tooltip :placement="isOpen ? 'bottomRight' : 'left'">
     <template #title> {{ $t('activity.deleteTable') }} </template>
 
     <div class="nc-sidebar-right-item hover:after:bg-red-500 group">

packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/Reload.vue

@@ -1,16 +1,15 @@
 <script setup lang="ts">
-import { ReloadViewDataHookInj, RightSidebarInj } from '~/context'
+import { ReloadViewDataHookInj, inject } from '#imports'
-import { inject, ref } from '#imports'
 
 const reloadHook = inject(ReloadViewDataHookInj)!
 
-const sidebarOpen = inject(RightSidebarInj, ref(true))
+const { isOpen } = useSidebar({ storageKey: 'nc-right-sidebar' })
 
 const onClick = () => reloadHook.trigger()
 </script>
 
 <template>
-  <a-tooltip :placement="sidebarOpen ? 'bottomRight' : 'left'">
+  <a-tooltip :placement="isOpen ? 'bottomRight' : 'left'">
     <template #title> {{ $t('general.reload') }} </template>
 
     <div class="nc-sidebar-right-item hover:after:bg-green-500 group">