@ozdao/martyrs 0.2.458 → 0.2.460

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozdao/martyrs",
-  "version": "0.2.458",
+  "version": "0.2.460",
   "description": "Fullstack framework focused on user experience and ease of development.",
   "author": "OZ DAO <hello@ozdao.dev>",
   "license": "GPL-3.0-or-later",

package/src/components/Feed/Feed.vue

@@ -92,7 +92,7 @@
       :horizontal="skeleton.horizontal"
       :loading="isLoading"
       :key="'skeleton-' + i"
-      class="mn-b-small radius-medium o-hidden d-block"
+      class="radius-medium o-hidden d-block"
     />
     <Loader v-if="isLoading && skeleton?.hide"/>
   </TransitionGroup>

package/src/modules/chats/components/sections/ChatWindow.vue

@@ -54,6 +54,7 @@ const sendMessage = async () => {
   if (newMessage.value) {
     const message = {
       text: newMessage.value,
+      module: 'chat',
       username: chatStore.state.username,
       chatId: chatStore.state.currentChatId
     };

package/src/modules/chats/routes/chats.routes.js

@@ -8,27 +8,17 @@ module.exports = function(app, db, wss) {
 
   const { verifySignUp, verifyUser } = middlewareFactory(db);
 
-   wss.on('connection', (ws) => {
-    ws.type = 'chat'; // Помечаем соединение как чат
-    console.log('ws connecting to chat...');
-    
-    ws.on('message', async (message) => {
-      const msg = JSON.parse(message);
-      if (msg.type === 'joinChat') {
-        ws.chatId = msg.chatId;
-        console.log(`Client joined chat: ${msg.chatId}`);
-      } else {
+  wss.registerModule('chat', async (ws, msg) => {
+    if (msg.type === 'joinChat') {
+      ws.chatId = msg.chatId;
+    } else {
+      const savedMessage = await controller.saveMessage(msg);
 
-        console.log(msg)
-        const savedMessage = await controller.saveMessage(msg);
-        
-        wss.clients.forEach((client) => {
-          if (client.type === 'chat' && client.chatId && client.chatId.toString() === msg.chatId) {
-            client.send(JSON.stringify(savedMessage));
-          }
-        });
-      }
-    });
+      wss.broadcastToModuleWithFilter('chat', (client) =>
+        client.chatId === msg.chatId,
+        savedMessage
+      );
+    }
   });
 
 

package/src/modules/chats/store/chat.store.js

@@ -45,7 +45,7 @@ const methods = {
     state.messages = []; // Clear current messages when changing chat
 
     // Send join chat message through the WebSocket
-    globalWebSocket.send({ type: 'joinChat', chatId });
+    globalWebSocket.send({ type: 'joinChat', module: 'chat', chatId });
 
     // Fetch chat history
     const response = await fetch(`/messages/${chatId}`);

package/src/modules/community/components/layouts/Community.vue

@@ -1,9 +1,9 @@
 <template>
 	<div class="bg-white">
-		<section class="w-100 h-100 o-hidden flex-nowrap flex gap-thin pd-thin pos-relative">
+		<section class="w-100 h-100 o-hidden flex-nowrap flex gap-thin mobile:pd-zero pd-thin pos-relative">
 
 			<div style="flex: 1 1 auto" class="w-100 o-y-scroll h-100 pos-relative">
-				<header v-if="!route.params.url && route.name !== 'Create BlogPost'" class="bg-light pd-medium radius-medium mobile:radius-zero t-black pos-relative  mn-b-thin flex-v-center t-left flex-nowrap flex">
+				<header v-if="!route.params.url && route.name !== 'Create BlogPost'" class="bg-light pd-medium radius-medium mobile:radius-zero o-x-scroll scroll-hide o-y-visible t-black pos-relative  mn-b-thin flex-v-center t-left flex-nowrap flex">
 		    	<h2 class="pos-relative t-nowrap flex-v-center flex-nowrap flex">
 		    		<span class="mn-r-thin">Posts for </span>
 
@@ -116,9 +116,6 @@
 							+
 						</router-link>
 					</div>
-			
-			
-
 
 					<transition name="slide-fade">
 						<Feed

package/src/modules/community/components/sections/Comment.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <CardHeader 
-      class="mn-b-thin"
+      class="mn-b-thin w-100"
       :entity="comment"
       :entityType="'comment'"
       :user="owner"

package/src/modules/globals/controllers/classes/globals.websocket.js

@@ -0,0 +1,116 @@
+const { WebSocketServer } = require('ws');
+const jwt = require('jsonwebtoken');
+
+class WebSocketManager {
+  constructor(server) {
+    this.wss = new WebSocketServer({
+      server,
+      verifyClient: this.verifyClient.bind(this)
+    });
+
+    this.modules = new Map(); // moduleName => handler
+    this.userConnections = new Map(); // userId => Set(ws)
+
+    this.wss.on('connection', (ws, req) => {
+      ws.moduleName = null;
+      ws.userId = req.userId || null;
+
+      if (ws.userId) {
+        this._trackUserConnection(ws.userId, ws);
+      }
+
+      ws.on('message', async (rawMessage) => {
+        try {
+          const msg = JSON.parse(rawMessage);
+          console.log(msg)
+          const moduleName = ws.moduleName || msg.module;
+
+           console.log('module name is,', moduleName)
+             console.log('modules is,', this.modules)
+
+          if (moduleName && this.modules.has(moduleName)) {
+            ws.moduleName = moduleName;
+            const handler = this.modules.get(moduleName);
+            await handler(ws, msg);
+          }
+        } catch (err) {
+          console.error('Invalid message or handler error:', err);
+        }
+      });
+
+      ws.on('close', () => {
+        if (ws.userId && this.userConnections.has(ws.userId)) {
+          this.userConnections.get(ws.userId).delete(ws);
+          if (this.userConnections.get(ws.userId).size === 0) {
+            this.userConnections.delete(ws.userId);
+          }
+        }
+      });
+    });
+  }
+
+  verifyClient(info, done) {
+    try {
+      const userCookie = info.req.headers.cookie
+        ?.split('; ')
+        .find((cookie) => cookie.startsWith('user='));
+
+      if (!userCookie) return done(true);
+
+      const token = JSON.parse(decodeURIComponent(userCookie.replace('user=', '')));
+      const decoded = jwt.verify(token.accessToken, process.env.SECRET_KEY);
+
+      info.req.userId = decoded._id;
+    } catch (err) {
+      console.error('Invalid token:', err);
+    }
+
+    done(true); // Разрешаем в любом случае
+  }
+
+  _trackUserConnection(userId, ws) {
+    if (!this.userConnections.has(userId)) {
+      this.userConnections.set(userId, new Set());
+    }
+    this.userConnections.get(userId).add(ws);
+  }
+
+  registerModule(moduleName, handler) {
+    this.modules.set(moduleName, handler);
+  }
+
+  sendToUserInModule(moduleName, userId, data) {
+    const sockets = this.userConnections.get(userId);
+    if (!sockets) return;
+
+    for (const ws of sockets) {
+      if (ws.readyState === 1 && ws.moduleName === moduleName) {
+        ws.send(JSON.stringify(data));
+      }
+    }
+  }
+
+  broadcastToModule(moduleName, data) {
+    for (const ws of this.wss.clients) {
+      if (ws.readyState === 1 && ws.moduleName === moduleName) {
+        ws.send(JSON.stringify(data));
+      }
+    }
+  }
+
+  broadcastToModuleWithFilter(moduleName, filterFn, data) {
+    for (const ws of this.wss.clients) {
+      if (ws.readyState !== 1) continue;
+      if (ws.moduleName !== moduleName) continue;
+      if (!filterFn(ws)) continue;
+
+      ws.send(JSON.stringify(data));
+    }
+  }
+
+  getServer() {
+    return this.wss;
+  }
+}
+
+module.exports = WebSocketManager;

package/src/modules/globals/globals.server.js

@@ -2,6 +2,8 @@
 const { getInstance } = require('@martyrs/src/modules/globals/controllers/classes/globals.abac.js')
 const initGlobalsPolicies = require('./controllers/policies/globals.policies.js');
 
+const Websocket = require('@martyrs/src/modules/globals/controllers/classes/globals.websocket.js');
+
 function initializeGlobals(app, db, origins, publicPath) {
   // Определяем модель Log только здесь
   db.log = db.mongoose.models.Log || db.mongoose.model('Log', new db.mongoose.Schema({
@@ -16,4 +18,5 @@ function initializeGlobals(app, db, origins, publicPath) {
 
 module.exports = {
   initialize: initializeGlobals,
+  Websocket
 };

package/src/modules/globals/views/components/blocks/CardHeader.vue

@@ -8,7 +8,7 @@
 		>
 
 			<div
-				class="w-100 p-medium flex-nowrap flex-v-center flex"
+				class="w-100 p-medium t-nowrap flex-nowrap flex-v-center flex"
 			>
 				<img loading="lazy" 
 					v-if="owner.target?.profile?.photo?.length > 0 && type !== 'short'" 

package/src/modules/globals/views/components/partials/Navigation.vue

@@ -2,6 +2,8 @@
 import { ref, watch, computed } from 'vue'
 import { useRouter } from 'vue-router'
 
+import IconChevronBottom from '@martyrs/src/modules/icons/navigation/IconChevronBottom.vue'
+
 import * as globals from '@martyrs/src/modules/globals/views/store/globals'
 import * as auth from '@martyrs/src/modules/auth/views/store/auth'
 
@@ -75,7 +77,7 @@ const processRoute = (route) => {
 
 <template>
   <nav
-    class="o-x-hidden h-100"
+    class="transition-quint-out o-x-hidden h-100"
     :class="[
       stateSidebar ? 'pd-small' : 'pd-micro',
       horizontal ? 'w-100 desktop-only flex flex-center flex-nowrap o-y-hidden' : 'o-y-scroll rows-1',
@@ -85,6 +87,7 @@ const processRoute = (route) => {
       v-for="section in props.navigationItems" 
       v-show="!section.visible || (typeof section.visible === 'function' ? section.visible(auth.state) : true)"
       :key="section.category" 
+      class="transition-quint-out"
       :class="[
         horizontal ? 'w-max flex-child-default flex flex-nowrap' : '',
         stateSidebar && !horizontal ? 'mn-t-medium' : '',
@@ -110,87 +113,85 @@ const processRoute = (route) => {
         <li 
           v-for="item in section.items" 
           v-show="!item.visible || (typeof item.visible === 'function' ? item.visible(auth.state) : true)"
-          class="flex-center"
-          :class="[
-            horizontal ? 'w-100 flex flex-nowrap' : '',
-            stateSidebar && !horizontal ? '' : 'aspect-1x1'
-          ]"
+          class="w-100 pos-relative"
           :key="item.title"
+           
         >
-          <button
-            @click="item.route ? (isPhone ? (stateSidebar = false) : null, $route.path !== processRoute(item.route) ? router.push(processRoute(item.route)) : stateSidebar = false) : null"
-            class="flex-child-default flex-center gap-thin flex sidebar-item-btn"
-            :class="[
-              stateSidebar || horizontal ? 'expanded-item pd-thin' : 'w-100 h-100 justify-center',
-              horizontal ? 'w-max flex flex-nowrap' : '',
+        <button
+          class="transition-quint-out w-100 flex radius-small flex-nowrap cursor-pointer flex-v-center"
+          @click="item.route ? (isPhone ? (stateSidebar = false) : null, $route.path !== processRoute(item.route) ? router.push(processRoute(item.route)) : stateSidebar = false) : null"
+          :class="[
+              horizontal ? 'pd-thin' : '',
               item.route && $route.path === processRoute(item.route) ? theme === 'light' ? 'bg-light' : 'bg-dark' : '',
               theme === 'light' ? 'hover-bg-light' : 'hover-bg-dark'
             ]"
-          >
+        >
+          <div v-if="!horizontal" class="w-100 flex-child-default w-max-big flex flex-center aspect-1x1">
             <component 
-              v-if="item.iconComponent && !horizontal" 
+              v-if="item.iconComponent" 
               :is="item.iconComponent" 
               class="i-medium flex-child-default" 
               :fill="globals.state.theme.darkmode || theme === 'dark' ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.25)'"
             />
             <span 
-              v-if="!item.iconComponent && !horizontal" 
+              v-if="!item.iconComponent " 
               class="i-medium sidebar-item-icon t-lh-1 flex-child-default"
             >
               {{ item.icon }}
             </span>
-            
-            <span
-              class="w-100 t-left sidebar-item-title"
-              :class="{ 'hidden': !stateSidebar && !horizontal, 'visible': stateSidebar || horizontal }"
-            >
-              {{ item.title }}
-            </span>
-            
-            <span
-              v-if="item.subItems && stateSidebar && !horizontal"
-              class="mn-l-auto sidebar-dropdown-icon"
-              :class="{ 'rotate-180': isSectionExpanded(item.title) }"
-              @click.stop="toggleSection(item.title)" 
-            >
-              ▾
-            </span>
-          </button>
-
-          <transition
-            enter-active-class="dropdown-enter"
-            leave-active-class="dropdown-leave"
-            enter-from-class="dropdown-enter-from"
-            enter-to-class="dropdown-enter-to"
-            leave-from-class="dropdown-leave-from"
-            leave-to-class="dropdown-leave-to"
+          </div>
+          
+          <span
+            class="transition-quint-out w-100 t-left t-medium"
+            :class="{ 'hidden': !stateSidebar && !horizontal, 'visible': stateSidebar || horizontal }"
           >
-            <ul
-              v-if="item.subItems && isSectionExpanded(item.title) && stateSidebar && !horizontal"
-              class="sidebar-submenu"
-            >
-              <li v-for="subItem in item.subItems" :key="subItem.title">
-                <a 
-                 @click="subItem.route && (this.$route.path !== subItem.route ? router.push(subItem.route) : (isPhone ? stateSidebar = false : null))"
-                  href="#" 
-                  class="sidebar-subitem-link flex flex-nowrap gap-thin pd-thin radius-small"
-                  :class="[
-                    subItem.route && $route.path === processRoute(subItem.route) ? theme === 'light' ? 'bg-light' : 'bg-dark' : '',
-                      theme === 'light' ? 'hover-bg-light' : 'hover-bg-dark'
-                      ]"
-                >
-                  <component 
-                    v-if="subItem.iconComponent" 
-                    :is="subItem.iconComponent" 
-                    class="sidebar-subitem-icon i-medium" 
-                   :fill="globals.state.theme.darkmode || theme === 'dark' ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.25)'"
-                  />
-                  <span v-else class="sidebar-subitem-icon">{{ subItem.icon }}</span>
-                  <span class="sidebar-subitem-title">{{ subItem.title }}</span>
-                </a>
-              </li>
-            </ul>
-          </transition>
+            {{ item.title }}
+          </span>
+          
+          <span
+            v-if="item.subItems && stateSidebar && !horizontal"
+            class="mn-l-auto mn-r-small sidebar-dropdown-icon"
+            :class="{ 'rotate-180': isSectionExpanded(item.title) }"
+            @click.stop="toggleSection(item.title)" 
+          >
+             <IconChevronBottom :class="{ 'rotate-180 mn-t-micro-negative': isOpen }" :fill=" theme === 'dark' ? 'rgb(var(--white))': 'rgb(var(--black))'" class="i-small"/>
+          </span>
+        </button>
+        <transition
+          enter-active-class="dropdown-enter"
+          leave-active-class="dropdown-leave"
+          enter-from-class="dropdown-enter-from"
+          enter-to-class="dropdown-enter-to"
+          leave-from-class="dropdown-leave-from"
+          leave-to-class="dropdown-leave-to"
+        >
+          <ul
+            v-if="item.subItems && isSectionExpanded(item.title) && stateSidebar && !horizontal"
+            class="mn-l-small mn-t-thin"
+          >
+            <li v-for="subItem in item.subItems" :key="subItem.title">
+              
+              <a 
+               @click="subItem.route && (this.$route.path !== subItem.route ? router.push(subItem.route) : (isPhone ? stateSidebar = false : null))"
+                href="#" 
+                class="transition-quint-out flex flex-v-center flex-nowrap gap-thin pd-thin radius-small"
+                :class="[
+                  subItem.route && $route.path === processRoute(subItem.route) ? theme === 'light' ? 'bg-light' : 'bg-dark' : '',
+                    theme === 'light' ? 'hover-bg-light' : 'hover-bg-dark'
+                    ]"
+              >
+                <component 
+                  v-if="subItem.iconComponent" 
+                  :is="subItem.iconComponent" 
+                  class="i-medium" 
+                 :fill="globals.state.theme.darkmode || theme === 'dark' ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.25)'"
+                />
+                <span v-else class="">{{ subItem.icon }}</span>
+                <span class="w-100">{{ subItem.title }}</span>
+              </a>
+            </li>
+          </ul>
+        </transition> 
         </li>
       </ul>
     </div>
@@ -198,94 +199,11 @@ const processRoute = (route) => {
 </template>
 
 <style scoped>
-.sidebar-item-btn:hover .sidebar-item-icon,
-.sidebar-subitem-link:hover .sidebar-subitem-icon {
-  transform: scale(1.1);
-}
-
-.sidebar-item-btn:hover .sidebar-item-icon {
-  transform: scale(1.1);
-}
-
-
-.sidebar-subitem-link:hover .sidebar-subitem-icon {
-  transform: scale(1.1);
-}
-
-
-
-.expanded-item {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  border-radius: var(--small);
-}
-
-.sidebar-item-btn {
-  align-items: center;
-  border-radius: var(--small);
-  transition: all 0.2s;
-  position: relative;
-  border: none;
-  cursor: pointer;
-}
-
-
-.sidebar-item-title {
-  font-weight: 500;
-  transition: opacity 0.2s, width 0.2s;
-  white-space: nowrap;
-}
-
-.sidebar-item-icon {
-  font-size: 1.25rem;
-  transition: transform 0.2s;
-}
-
-
-
-
-.sidebar-highlight-indicator {
-  position: absolute;
-  left: 0;
-  width: 4px;
-  height: 100%;
-  border-radius: 0 var(--micro) var(--micro) 0;
-  background: linear-gradient(to bottom, var(--second-regular), var(--second-small));
-  transition: opacity 0.2s;
-}
-
-
-
-.sidebar-dropdown-icon {
-  color: var(--grey-medium);
-  transition: transform 0.2s;
-}
 
 .rotate-180 {
   transform: rotate(180deg);
 }
 
-.sidebar-submenu {
-  margin-top: var(--micro);
-  margin-left: var(--semi);
-  display: flex;
-  flex-direction: column;
-  gap: var(--micro);
-}
-
-.sidebar-subitem-link {
-  display: flex;
-  align-items: center;
-  text-decoration: none;
-  transition: all 0.2s;
-}
-
-
-.sidebar-subitem-title {
-  font-size: 0.875rem;
-}
-
 .hidden {
 /*  opacity: 0;*/
   width: 0;

package/src/modules/globals/views/components/partials/Sidebar.vue

@@ -46,7 +46,7 @@ router.beforeEach((to, from) => {
 
 <template>
   <aside
-    class="transition-linear w-min-0 o-hidden flex-child-default z-index-2  br-r br-solid  flex flex-column h-100"
+    class="transition-quint-out w-min-0 o-hidden flex-child-default z-index-2  br-r br-solid  flex flex-column h-100"
     :class="[
       stateSidebar
       ? `${width} w-min-10 tablet:w-min-100 tablet:w-100 mobile:w-min-100 mobile:w-100`
@@ -62,7 +62,7 @@ router.beforeEach((to, from) => {
     <slot></slot>
 
     <div 
-      class="br-solid br-t"
+      class="br-solid w-100 br-t"
       :class="{ 
         'pd-micro': !stateSidebar, 
         'pd-small': stateSidebar,
@@ -72,18 +72,19 @@ router.beforeEach((to, from) => {
     >
       <button
         @click="() => globals.actions.toggleTheme()"
-        class="flex flex-center  flex-nowrap dark-mode-toggle"
+        class="transition-quint-out flex w-100 flex-center radius-small cursor-pointer flex-nowrap"
         :class="[
-          stateSidebar ? 'pd-thin justify-between' : 'h-100 aspect-1x1 justify-center'
+          stateSidebar ? 'pd-thin justify-between' : 'w-100 justify-center',
+          theme === 'light' ? 'hover-bg-light' : 'hover-bg-dark'
         ]"
       >
         <span 
-          class="dark-mode-label w-100 t-left mn-r-thin"
+          class="w-100 t-nowrap transition-quint-out  t-left t-medium mn-r-thin"
           :class="{ 'hidden': !stateSidebar, 'visible': stateSidebar }"
         >
           Dark Mode
         </span>
-        <span class="dark-mode-icon">
+        <span class="aspect-1x1 flex-child-default w-max-big w-100 flex flex-center ">
           {{ globals.state.theme.darkmode ? '🌙' : '☀️' }}
         </span>
       </button>
@@ -92,37 +93,6 @@ router.beforeEach((to, from) => {
 </template>
 
 <style scoped>
-.dark-mode-toggle {
-  align-items: center;
-  width: 100%;
-  border-radius: var(--small);
-  transition: all 0.2s;
-  position: relative;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-}
-
-.dark-mode-toggle:hover {
-  background: var(--light-regular);
-}
-
-.dark-mode-label {
-  font-weight: 500;
-  transition: opacity 0.2s, width 0.2s;
-  white-space: nowrap;
-}
-
-.dark-mode-icon {
-  font-size: 1.25rem;
-  transition: transform 0.2s;
-}
-
-.dark-mode-toggle:hover .dark-mode-icon {
-  transform: scale(1.1);
-}
-
-
 .hidden {
   opacity: 0;
   width: 0;

package/src/modules/globals/views/plugins/AlertDialog.vue

@@ -3,7 +3,7 @@
     :title="alertState.title" 
     :isPopupOpen="alertState.visible"
     @close-popup="closeAlert" 
-    class="bg-white w-min-30r w-max-30r radius-medium pd-medium"
+    class="bg-white w-min-20r w-max-30r w-max-100 radius-medium pd-medium"
   >
     <p class="mn-b-medium">{{ alertState.message }}</p>
 

package/src/modules/icons/entities/IconTime.vue

@@ -1,5 +1,5 @@
 <template>
 	<svg width="50" height="49" viewBox="0 0 50 49" fill="none" xmlns="http://www.w3.org/2000/svg">
-	<path d="M24.7274 45.2266C13.2178 45.2266 3.85356 35.8624 3.85356 24.3528C3.85356 12.8432 13.2178 3.47897 24.7274 3.47897C36.237 3.47897 45.6012 12.8432 45.6012 24.3528C45.6012 35.8624 36.237 45.2266 24.7274 45.2266ZM24.7274 0C11.2777 0 0.374592 10.9031 0.374592 24.3528C0.374592 37.8025 11.2777 48.7056 24.7274 48.7056C38.1771 48.7056 49.0802 37.8025 49.0802 24.3528C49.0802 10.9031 38.1771 0 24.7274 0ZM34.0047 23.773H26.4669V11.5966C26.4669 11.1352 26.2836 10.6928 25.9574 10.3666C25.6312 10.0404 25.1887 9.85709 24.7274 9.85709C24.2661 9.85709 23.8236 10.0404 23.4974 10.3666C23.1712 10.6928 22.9879 11.1352 22.9879 11.5966V25.5125C22.9879 25.9738 23.1712 26.4162 23.4974 26.7425C23.8236 27.0687 24.2661 27.2519 24.7274 27.2519H34.0047C34.2331 27.2519 34.4593 27.207 34.6703 27.1195C34.8814 27.0321 35.0731 26.904 35.2347 26.7425C35.3962 26.5809 35.5243 26.3892 35.6117 26.1781C35.6991 25.9671 35.7441 25.7409 35.7441 25.5125C35.7441 25.284 35.6991 25.0578 35.6117 24.8468C35.5243 24.6357 35.3962 24.444 35.2347 24.2825C35.0731 24.1209 34.8814 23.9928 34.6703 23.9054C34.4593 23.818 34.2331 23.773 34.0047 23.773Z" fill="rgb(var(--black))"/>
+	<path d="M24.7274 45.2266C13.2178 45.2266 3.85356 35.8624 3.85356 24.3528C3.85356 12.8432 13.2178 3.47897 24.7274 3.47897C36.237 3.47897 45.6012 12.8432 45.6012 24.3528C45.6012 35.8624 36.237 45.2266 24.7274 45.2266ZM24.7274 0C11.2777 0 0.374592 10.9031 0.374592 24.3528C0.374592 37.8025 11.2777 48.7056 24.7274 48.7056C38.1771 48.7056 49.0802 37.8025 49.0802 24.3528C49.0802 10.9031 38.1771 0 24.7274 0ZM34.0047 23.773H26.4669V11.5966C26.4669 11.1352 26.2836 10.6928 25.9574 10.3666C25.6312 10.0404 25.1887 9.85709 24.7274 9.85709C24.2661 9.85709 23.8236 10.0404 23.4974 10.3666C23.1712 10.6928 22.9879 11.1352 22.9879 11.5966V25.5125C22.9879 25.9738 23.1712 26.4162 23.4974 26.7425C23.8236 27.0687 24.2661 27.2519 24.7274 27.2519H34.0047C34.2331 27.2519 34.4593 27.207 34.6703 27.1195C34.8814 27.0321 35.0731 26.904 35.2347 26.7425C35.3962 26.5809 35.5243 26.3892 35.6117 26.1781C35.6991 25.9671 35.7441 25.7409 35.7441 25.5125C35.7441 25.284 35.6991 25.0578 35.6117 24.8468C35.5243 24.6357 35.3962 24.444 35.2347 24.2825C35.0731 24.1209 34.8814 23.9928 34.6703 23.9054C34.4593 23.818 34.2331 23.773 34.0047 23.773Z"  :class="$attrs.class" fill="rgb(var(--black))"/>
 	</svg>
 </template>