Added Render Server URL

code/client/src/config.ts

@@ -1,9 +1,5 @@
-const SERVER_IP = import.meta.env.VITE_SERVER_IP || 'localhost';
-const SERVER_PORT = import.meta.env.VITE_SERVER_PORT || '8080';
-const SOCKET_SERVER_URL = `ws://${SERVER_IP}:${SERVER_PORT}`;
-const HTTP_SERVER_URL = `http://${SERVER_IP}:${SERVER_PORT}`;
+const SERVER_URL = 'https://notespace-0es7.onrender.com';
 
 export default {
-  SOCKET_SERVER_URL,
-  HTTP_SERVER_URL,
+  SERVER_URL,
 };

code/client/src/services/communication/http/httpCommunication.ts

@@ -1,6 +1,6 @@
 import config from '@/config';
 
-export const BASE_URL = config.HTTP_SERVER_URL;
+export const BASE_URL = config.SERVER_URL;
 
 export interface HttpCommunication {
   post: (url: string, data?: any) => Promise<any>;

code/client/src/services/communication/socket/socketCommunication.ts

@@ -15,7 +15,7 @@ export interface SocketCommunication {
   disconnect: ConnectionType;
 }
 
-const socket = io(config.SOCKET_SERVER_URL);
+const socket = io(config.SERVER_URL);
 const OPERATION_DELAY = 100;
 const operationEmitter = new OperationEmitter(socket, OPERATION_DELAY);
 

code/client/src/ui/components/sidebar/Sidebar.scss

@@ -1,19 +1,18 @@
 .sidebar {
-  position: fixed;
+  position: sticky;
   top: 0;
   left: 0;
-  height: 100vh !important;
-  width: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+  height: 100vh;
   overflow-x: hidden;
   overflow-y: scroll;
-  transition: 0.5s;
-  padding-top: 60px;
+  padding: 2vh;
+  transition: 0.3s;
   color: black;
-  box-shadow: black 0 7vh 1px;
+  z-index: 10;
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+  justify-content: left;
 
   .sidebar-header {
     display: flex;
@@ -83,4 +82,15 @@
     align-items: center;
     gap: 10px;
   }
+
+  .dragger {
+    position: absolute;
+    width: 2px;
+    cursor: ew-resize;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background-color: lightgray;
+    user-select: none;
+  }
 }

code/client/src/ui/components/sidebar/Sidebar.tsx

@@ -3,27 +3,24 @@ import { Link } from 'react-router-dom';
 import { RiMenuFold2Line, RiMenuFoldLine, RiTeamFill } from 'react-icons/ri';
 import useWorkspace from '@ui/contexts/workspace/useWorkspace';
 import useSidebarState from '@ui/components/sidebar/hooks/useSidebarState';
-import './Sidebar.scss';
 import WorkspaceTree from '@ui/components/sidebar/components/workspace-tree/WorkspaceTree';
 import { IoMdSettings } from 'react-icons/io';
 import { TiHome } from 'react-icons/ti';
 import { GoPlus } from 'react-icons/go';
 import { ResourceType } from '@notespace/shared/src/workspace/types/resource';
 import CreateResourceMenu from '@ui/components/sidebar/components/CreateResourceMenu';
+import './Sidebar.scss';
 
 function Sidebar() {
-  const { isOpen, isLocked, isLoaded, handleClick, handleMouseEnter, handleMouseLeave } = useSidebarState();
+  const { width, isOpen, isLocked, isLoaded, handlers } = useSidebarState();
   const { workspace, resources, operations } = useWorkspace();
 
   if (!isLoaded) return null;
   return (
-    <div
-      className="sidebar"
-      style={{ width: isOpen ? '20%' : '0', transition: '0.3s' }}
-      onMouseLeave={handleMouseLeave}
-    >
+    <div className="sidebar" style={{ width }} onMouseLeave={handlers.handleMouseLeave}>
+      <div onMouseDown={handlers.handleMouseDown} className="dragger" />
       <div className="sidebar-header">
-        <button onMouseEnter={handleMouseEnter} onClick={handleClick}>
+        <button onMouseEnter={handlers.handleMouseEnter} onClick={handlers.handleClick}>
           {isLocked ? (
             <RiMenuFoldLine className="icon" />
           ) : isOpen ? (
@@ -34,7 +31,6 @@ function Sidebar() {
         </button>
         <Link to="/">NoteSpace</Link>
       </div>
-
       <ul>
         <li>
           <TiHome />
@@ -67,7 +63,6 @@ function Sidebar() {
                 <GoPlus />
               </button>
             </div>
-
             <WorkspaceTree workspace={workspace} resources={resources} operations={operations} />
           </>
         )}

code/client/src/ui/components/sidebar/hooks/useSidebarState.ts

@@ -1,12 +1,21 @@
 import { useEffect, useState } from 'react';
 import localStorage from '@/utils/localStorage';
 
+const DEFAULT_WIDTH = 20;
+const MIN_WIDTH = 0;
+const MAX_WIDTH = 40;
+
 function useSidebarState() {
+  const [width, setWidth] = useState(DEFAULT_WIDTH);
   const [isOpen, setIsOpen] = useState(false);
   const [isLocked, setIsLocked] = useState(false);
   const [justClosed, setJustClosed] = useState(false);
   const [isLoaded, setIsLoaded] = useState(false);
 
+  useEffect(() => {
+    setWidth(isOpen ? DEFAULT_WIDTH : 0);
+  }, [isOpen]);
+
   useEffect(() => {
     const sidebarState = localStorage.getItem('sidebarState');
     if (sidebarState !== null) {
@@ -39,13 +48,40 @@ function useSidebarState() {
     setJustClosed(false);
   };
 
+  const handleMouseMove = (e: MouseEvent) => {
+    const sidebar = document.querySelector('.sidebar');
+    if (sidebar) {
+      const rect = sidebar.getBoundingClientRect();
+      const newWidth = ((e.clientX - rect.left) / window.innerWidth) * 100;
+      if (newWidth > MIN_WIDTH && newWidth < MAX_WIDTH) {
+        setWidth(newWidth);
+      }
+    }
+  };
+
+  const handleMouseDown = () => {
+    document.addEventListener('mouseup', handleMouseUp, true);
+    document.addEventListener('mousemove', handleMouseMove, true);
+    document.body.style.pointerEvents = 'none';
+  };
+
+  const handleMouseUp = () => {
+    document.removeEventListener('mouseup', handleMouseUp, true);
+    document.removeEventListener('mousemove', handleMouseMove, true);
+    document.body.style.pointerEvents = 'auto';
+  };
+
   return {
+    width: `${width}%`,
     isOpen,
     isLocked,
     isLoaded,
-    handleMouseEnter,
-    handleClick,
-    handleMouseLeave,
+    handlers: {
+      handleMouseEnter,
+      handleClick,
+      handleMouseLeave,
+      handleMouseDown,
+    },
   };
 }
 

code/server/sql/create_tables.sql

@@ -5,22 +5,22 @@ begin;
     create type resource_type as enum ('D', 'F');
 
     create table if not exists workspace (
-        id char(12) primary key default encode(gen_random_bytes(8), 'base64'),
+        id char(16) primary key default encode(gen_random_bytes(8), 'hex'),
         name text not null,
         private boolean not null default false,
         created_at timestamp not null default now(),
-        members char(12)[] not null default '{}'::char(12)[] -- array of user ids
+        members char(16)[] not null default '{}'::char(16)[] -- array of user ids
     );
 
     create table if not exists resource (
-        id char(12) primary key default encode(gen_random_bytes(8), 'base64'),
-        workspace char(12) not null references workspace(id) on delete cascade,
+        id char(16) primary key default encode(gen_random_bytes(8), 'hex'),
+        workspace char(16) not null references workspace(id) on delete cascade,
         name text not null,
         type resource_type not null,
         created_at timestamp not null default now(),
         updated_at timestamp not null default now(),
-        parent char(12) default null references resource(id) on delete cascade,
-        children char(12)[] not null default '{}'::char(12)[] -- array of resource ids
+        parent char(16) default null references resource(id) on delete cascade,
+        children char(16)[] not null default '{}'::char(16)[] -- array of resource ids
     );
 
 commit;