feat(visManager): db info

libs/shared/lib/vis/configuration/panel.tsx

 import React from 'react';
-import { Button } from '../../components';
-import { Delete } from '@mui/icons-material';
+import { Button, Icon } from '../../components';
+import { Delete, Person } from '@mui/icons-material';
 import Input from '../../components/inputs';
 import { VISUALIZATION_TYPES, VisualizationManager } from '../manager';
 import { SettingsHeader } from './components';
@@ -13,6 +13,8 @@ type Props = {
 export function ConfigPanel({ manager }: Props) {
   const session = useSessionCache();
 
+  console.log(session);
+
   return (
     <div className="w-full h-full flex flex-col border">
       {manager.active ? (
@@ -58,6 +60,29 @@ export function ConfigPanel({ manager }: Props) {
               <span className="text-xs">Protocol: {session.saveStates[session.currentSaveState].db.protocol}</span>
             </div>
           )}
+          <div className="flex flex-col p-4 border-b border-secondary-200">
+            <span className="text-sm font-bold">Sessions</span>
+            {Object.entries(session.saveStates).map(([id, info]) => (
+              <div key={id} className="flex justify-between items-center">
+                <span className="text-xs font-normal truncate">{id.slice(0, 10)}...</span>
+                <div className="flex -space-x-4 rtl:space-x-reverse">
+                  {info.share_state.users.slice(0, 2).map((user: string) => (
+                    <div
+                      key={user}
+                      className="relative inline-flex items-center justify-center w-5 h-5 overflow-hidden bg-secondary-500 rounded-full"
+                    >
+                      <Icon component={<Person />} size={12} />
+                    </div>
+                  ))}
+                  {info.share_state.users.length > 3 && (
+                    <div className="flex items-center justify-center w-5 h-5 text-xs font-medium text-white bg-gray-700 border-2 border-white rounded-full hover:bg-gray-600 dark:border-gray-800">
+                      +2
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
         </div>
       )}
     </div>