vzcode 2.3.0 → 2.4.0

package/src/client/Icons/MicOffSVG.tsx

@@ -0,0 +1,35 @@
+export const MicOffSVG = () => (
+  <svg
+    fill="#000000"
+    height="24"
+    width="24"
+    stroke="currentColor"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 512 512"
+    enableBackground="new 0 0 512 512"
+  >
+    <g>
+      <g>
+        <path
+          fill="currentColor"
+          d="m439.5,236c0-11.3-9.1-20.4-20.4-20.4s-20.4,9.1-20.4,20.4c0,70-64,126.9-142.7,126.9-78.7,0-142.7-56.9-142.7-126.9 0-11.3-9.1-20.4-20.4-20.4s-20.4,9.1-20.4,20.4c0,86.2 71.5,157.4 163.1,166.7v57.5h-23.6c-11.3,0-20.4,9.1-20.4,20.4 0,11.3 9.1,20.4 20.4,20.4h88c11.3,0 20.4-9.1 20.4-20.4 0-11.3-9.1-20.4-20.4-20.4h-23.6v-57.5c91.6-9.3 163.1-80.5 163.1-166.7z"
+        />
+        <path
+          fill="currentColor"
+          d="m256,323.5c51,0 92.3-41.3 92.3-92.3v-127.9c0-51-41.3-92.3-92.3-92.3s-92.3,41.3-92.3,92.3v127.9c0,51 41.3,92.3 92.3,92.3zm-52.3-220.2c0-28.8 23.5-52.3 52.3-52.3s52.3,23.5 52.3,52.3v127.9c0,28.8-23.5,52.3-52.3,52.3s-52.3-23.5-52.3-52.3v-127.9z"
+        />
+        {/* Diagonal line to indicate "off" state */}
+        <line
+          x1="100"
+          y1="100"
+          x2="412"
+          y2="412"
+          stroke="currentColor"
+          strokeWidth="40"
+          strokeLinecap="round"
+        />
+      </g>
+    </g>
+  </svg>
+);

package/src/client/Icons/MicSVG.tsx

@@ -0,0 +1,25 @@
+export const MicSVG = () => (
+  <svg
+    fill="#000000"
+    height="24"
+    width="24"
+    stroke="currentColor"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 512 512"
+    enableBackground="new 0 0 512 512"
+  >
+    <g>
+      <g>
+        <path
+          fill="currentColor"
+          d="m439.5,236c0-11.3-9.1-20.4-20.4-20.4s-20.4,9.1-20.4,20.4c0,70-64,126.9-142.7,126.9-78.7,0-142.7-56.9-142.7-126.9 0-11.3-9.1-20.4-20.4-20.4s-20.4,9.1-20.4,20.4c0,86.2 71.5,157.4 163.1,166.7v57.5h-23.6c-11.3,0-20.4,9.1-20.4,20.4 0,11.3 9.1,20.4 20.4,20.4h88c11.3,0 20.4-9.1 20.4-20.4 0-11.3-9.1-20.4-20.4-20.4h-23.6v-57.5c91.6-9.3 163.1-80.5 163.1-166.7z"
+        />
+        <path
+          fill="currentColor"
+          d="m256,323.5c51,0 92.3-41.3 92.3-92.3v-127.9c0-51-41.3-92.3-92.3-92.3s-92.3,41.3-92.3,92.3v127.9c0,51 41.3,92.3 92.3,92.3zm-52.3-220.2c0-28.8 23.5-52.3 52.3-52.3s52.3,23.5 52.3,52.3v127.9c0,28.8-23.5,52.3-52.3,52.3s-52.3-23.5-52.3-52.3v-127.9z"
+        />
+      </g>
+    </g>
+  </svg>
+);

package/src/client/Icons/NewSVG.tsx

@@ -0,0 +1,19 @@
+export const NewSVG = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"
+      />
+    </svg>
+  );
+};

package/src/client/Icons/PinSVG.tsx

@@ -0,0 +1,14 @@
+// From https://primer.style/foundations/icons/pin-24
+export const PinSVG = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path
+      fill="currentColor"
+      d="m16.114 1.553 6.333 6.333a1.75 1.75 0 0 1-.603 2.869l-1.63.633a5.67 5.67 0 0 0-3.395 3.725l-1.131 3.959a1.75 1.75 0 0 1-2.92.757L9 16.061l-5.595 5.594a.749.749 0 1 1-1.06-1.06L7.939 15l-3.768-3.768a1.75 1.75 0 0 1 .757-2.92l3.959-1.131a5.666 5.666 0 0 0 3.725-3.395l.633-1.63a1.75 1.75 0 0 1 2.869-.603ZM5.232 10.171l8.597 8.597a.25.25 0 0 0 .417-.108l1.131-3.959A7.17 7.17 0 0 1 19.67 9.99l1.63-.634a.25.25 0 0 0 .086-.409l-6.333-6.333a.25.25 0 0 0-.409.086l-.634 1.63a7.17 7.17 0 0 1-4.711 4.293L5.34 9.754a.25.25 0 0 0-.108.417Z"
+    ></path>
+  </svg>
+);

package/src/client/Icons/PlaySVG.tsx

@@ -0,0 +1,16 @@
+export const PlaySVG = () => (
+  <svg
+    width="24"
+    height="24"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth={1.5}
+    stroke="currentColor"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z"
+    />
+  </svg>
+);

package/src/client/Icons/QuestionMarkSVG.tsx

@@ -0,0 +1,18 @@
+// From https://heroicons.com/
+export const QuestionMarkSVG = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    strokeWidth="1.5"
+    stroke="currentColor"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z"
+    />
+  </svg>
+);

package/src/client/Icons/ReactSVG.tsx

@@ -0,0 +1,16 @@
+// https://reactsvgicons.com/
+export const ReactSVG = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      viewBox="0 0 24 24"
+      strokeWidth="1.5"
+      stroke="none"
+    >
+      <path d="M14.23 12.004a2.236 2.236 0 01-2.235 2.236 2.236 2.236 0 01-2.236-2.236 2.236 2.236 0 012.235-2.236 2.236 2.236 0 012.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38a2.167 2.167 0 00-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44a23.476 23.476 0 00-3.107-.534A23.892 23.892 0 0012.769 4.7c1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442a22.73 22.73 0 00-3.113.538 15.02 15.02 0 01-.254-1.42c-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87a25.64 25.64 0 01-4.412.005 26.64 26.64 0 01-1.183-1.86c-.372-.64-.71-1.29-1.018-1.946a25.17 25.17 0 011.013-1.954c.38-.66.773-1.286 1.18-1.868A25.245 25.245 0 0112 8.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933a25.952 25.952 0 00-1.345-2.32zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493a23.966 23.966 0 00-1.1-2.98c.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98a23.142 23.142 0 00-1.086 2.964c-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39a25.819 25.819 0 001.341-2.338zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143a22.005 22.005 0 01-2.006-.386c.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295a1.185 1.185 0 01-.553-.132c-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z" />
+    </svg>
+  );
+};

package/src/client/Icons/SearchSVG.tsx

@@ -0,0 +1,20 @@
+// From Heroicons
+export const SearchSVG = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth="1.5"
+      stroke="currentColor"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
+      />
+    </svg>
+  );
+};

package/src/client/Icons/SparklesSVG.tsx

@@ -0,0 +1,23 @@
+export const SparklesSVG = ({
+  width = '32',
+  height = '32',
+}: {
+  width?: string | number;
+  height?: string | number;
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    stroke="currentColor"
+    strokeWidth="1.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M9.8132 15.9038L9 18.75L8.1868 15.9038C7.75968 14.4089 6.59112 13.2403 5.09619 12.8132L2.25 12L5.09619 11.1868C6.59113 10.7597 7.75968 9.59112 8.1868 8.09619L9 5.25L9.8132 8.09619C10.2403 9.59113 11.4089 10.7597 12.9038 11.1868L15.75 12L12.9038 12.8132C11.4089 13.2403 10.2403 14.4089 9.8132 15.9038Z" />
+    <path d="M18.2589 8.71454L18 9.75L17.7411 8.71454C17.4388 7.50533 16.4947 6.56117 15.2855 6.25887L14.25 6L15.2855 5.74113C16.4947 5.43883 17.4388 4.49467 17.7411 3.28546L18 2.25L18.2589 3.28546C18.5612 4.49467 19.5053 5.43883 20.7145 5.74113L21.75 6L20.7145 6.25887C19.5053 6.56117 18.5612 7.50533 18.2589 8.71454Z" />
+    <path d="M16.8942 20.5673L16.5 21.75L16.1058 20.5673C15.8818 19.8954 15.3546 19.3682 14.6827 19.1442L13.5 18.75L14.6827 18.3558C15.3546 18.1318 15.8818 17.6046 16.1058 16.9327L16.5 15.75L16.8942 16.9327C17.1182 17.6046 17.6454 18.1318 18.3173 18.3558L19.5 18.75L18.3173 19.1442C17.6454 19.3682 17.1182 19.8954 16.8942 20.5673Z" />
+  </svg>
+);

package/src/client/Icons/SplitEditorSVG.tsx

@@ -0,0 +1,34 @@
+export const SplitEditorSVG = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <rect
+        x="5"
+        y="4"
+        width="7.5"
+        height="16"
+        rx="1"
+        ry="1"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        fill="none"
+      />
+      <rect
+        x="12"
+        y="4"
+        width="7.5"
+        height="16"
+        rx="1"
+        ry="1"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        fill="none"
+      />
+    </svg>
+  );
+};

package/src/client/Icons/StopSVG.tsx

@@ -0,0 +1,15 @@
+// From Wikimedia
+// https://commons.wikimedia.org/wiki/File:Stopsign.svg
+export const StopSVG = () => (
+  <svg
+    width="15pt"
+    height="15pt"
+    version="1.1"
+    viewBox="0 0 15 15"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g transform="scale(.75)" fill="#fff" stroke="#000">
+      <path d="m17.5 0.5c1.1055 0 2 0.89453 2 2v15c0 1.1055-0.89453 2-2 2h-15c-1.1055 0-2-0.89453-2-2v-15c0-1.1055 0.89453-2 2-2z" />
+    </g>
+  </svg>
+);

package/src/client/Icons/SvelteSVG.tsx

@@ -0,0 +1,16 @@
+// https://reactsvgicons.com/
+export const SvelteSVG = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      viewBox="0 0 24 24"
+      strokeWidth="1.5"
+      stroke="none"
+    >
+      <path d="M10.354 21.125a4.44 4.44 0 01-4.765-1.767 4.109 4.109 0 01-.703-3.107 3.898 3.898 0 01.134-.522l.105-.321.287.21a7.21 7.21 0 002.186 1.092l.208.063-.02.208a1.253 1.253 0 00.226.83 1.337 1.337 0 001.435.533 1.231 1.231 0 00.343-.15l5.59-3.562a1.164 1.164 0 00.524-.778 1.242 1.242 0 00-.211-.937 1.338 1.338 0 00-1.435-.533 1.23 1.23 0 00-.343.15l-2.133 1.36a4.078 4.078 0 01-1.135.499 4.44 4.44 0 01-4.765-1.766 4.108 4.108 0 01-.702-3.108 3.855 3.855 0 011.742-2.582l5.589-3.563a4.072 4.072 0 011.135-.499 4.44 4.44 0 014.765 1.767 4.109 4.109 0 01.703 3.107 3.943 3.943 0 01-.134.522l-.105.321-.286-.21a7.204 7.204 0 00-2.187-1.093l-.208-.063.02-.207a1.255 1.255 0 00-.226-.831 1.337 1.337 0 00-1.435-.532 1.231 1.231 0 00-.343.15L8.62 9.368a1.162 1.162 0 00-.524.778 1.24 1.24 0 00.211.937 1.338 1.338 0 001.435.533 1.235 1.235 0 00.344-.151l2.132-1.36a4.067 4.067 0 011.135-.498 4.44 4.44 0 014.765 1.766 4.108 4.108 0 01.702 3.108 3.857 3.857 0 01-1.742 2.583l-5.589 3.562a4.072 4.072 0 01-1.135.499m10.358-17.95C18.484-.015 14.082-.96 10.9 1.068L5.31 4.63a6.412 6.412 0 00-2.896 4.295 6.753 6.753 0 00.666 4.336 6.43 6.43 0 00-.96 2.396 6.833 6.833 0 001.168 5.167c2.229 3.19 6.63 4.135 9.812 2.108l5.59-3.562a6.41 6.41 0 002.896-4.295 6.756 6.756 0 00-.665-4.336 6.429 6.429 0 00.958-2.396 6.831 6.831 0 00-1.167-5.168z" />
+    </svg>
+  );
+};

package/src/client/Icons/TrashSVG.tsx

@@ -0,0 +1,19 @@
+export const TrashSVG = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="none"
+        stroke="currentColor"
+        d="M14.7404 9L14.3942 18M9.60577 18L9.25962 9M19.2276 5.79057C19.5696 5.84221 19.9104 5.89747 20.25 5.95629M19.2276 5.79057L18.1598 19.6726C18.0696 20.8448 17.0921 21.75 15.9164 21.75H8.08357C6.90786 21.75 5.93037 20.8448 5.8402 19.6726L4.77235 5.79057M19.2276 5.79057C18.0812 5.61744 16.9215 5.48485 15.75 5.39432M3.75 5.95629C4.08957 5.89747 4.43037 5.84221 4.77235 5.79057M4.77235 5.79057C5.91878 5.61744 7.07849 5.48485 8.25 5.39432M15.75 5.39432V4.47819C15.75 3.29882 14.8393 2.31423 13.6606 2.27652C13.1092 2.25889 12.5556 2.25 12 2.25C11.4444 2.25 10.8908 2.25889 10.3394 2.27652C9.16065 2.31423 8.25 3.29882 8.25 4.47819V5.39432M15.75 5.39432C14.5126 5.2987 13.262 5.25 12 5.25C10.738 5.25 9.48744 5.2987 8.25 5.39432"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};

package/src/client/Icons/TypeScriptSVG.tsx

@@ -0,0 +1,16 @@
+// https://reactsvgicons.com/
+export const TypeScriptSVG = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      viewBox="0 0 24 24"
+      strokeWidth="1.5"
+      stroke="none"
+    >
+      <path d="M3 3h18v18H3V3m10.71 14.86c.5.98 1.51 1.73 3.09 1.73 1.6 0 2.8-.83 2.8-2.36 0-1.41-.81-2.04-2.25-2.66l-.42-.18c-.73-.31-1.04-.52-1.04-1.02 0-.41.31-.73.81-.73.48 0 .8.21 1.09.73l1.31-.87c-.55-.96-1.33-1.33-2.4-1.33-1.51 0-2.48.96-2.48 2.23 0 1.38.81 2.03 2.03 2.55l.42.18c.78.34 1.24.55 1.24 1.13 0 .48-.45.83-1.15.83-.83 0-1.31-.43-1.67-1.03l-1.38.8M13 11.25H8v1.5h1.5V20h1.75v-7.25H13v-1.5z" />
+    </svg>
+  );
+};

package/src/client/Icons/index.tsx

@@ -0,0 +1,26 @@
+export { SparklesSVG } from './SparklesSVG';
+export { StopSVG } from './StopSVG';
+export { EditSVG } from './EditSVG';
+export { NewSVG } from './NewSVG';
+export { GearSVG } from './GearSVG';
+export { CloseSVG } from './CloseSVG';
+export { TrashSVG } from './TrashSVG';
+export { BugSVG } from './BugSVG';
+export { FileSVG } from './FileSVG';
+export { DirectoryArrowSVG } from './DirectoryArrowSVG';
+export { PlaySVG } from './PlaySVG';
+export { QuestionMarkSVG } from './QuestionMarkSVG';
+export { PinSVG } from './PinSVG';
+export { FolderSVG } from './FolderSVG';
+export { SearchSVG } from './SearchSVG';
+export { JavaScriptSVG } from './JavaScriptSVG';
+export { TypeScriptSVG } from './TypeScriptSVG';
+export { ReactSVG } from './ReactSVG';
+export { SvelteSVG } from './SvelteSVG';
+export { HtmlSVG } from './HtmlSVG';
+export { CssSVG } from './CssSVG';
+export { JsonSVG } from './JsonSVG';
+export { MarkdownSVG } from './MarkdownSVG';
+export { MicSVG } from './MicSVG';
+export { MicOffSVG } from './MicOffSVG';
+export { AdjustmentSVG } from './AdjustmentSVG';

package/src/client/ImageViewer/index.tsx

@@ -0,0 +1,91 @@
+import { useContext } from 'react';
+import { VZCodeContext } from '../VZCodeContext';
+import './style.scss';
+
+export const ImageViewer = () => {
+  const { activePane, content } = useContext(VZCodeContext);
+
+  // Get the active file
+  const activeFileId = activePane?.activeFileId;
+  const activeFile =
+    activeFileId && content?.files?.[activeFileId];
+
+  if (!activeFile) {
+    return (
+      <div className="image-viewer-error">
+        No file selected
+      </div>
+    );
+  }
+
+  // Check if it's an image file based on extension
+  const isImageFile = activeFile.name.match(
+    /\.(png|jpg|jpeg|gif|bmp|svg|webp)$/i,
+  );
+
+  if (!isImageFile) {
+    return (
+      <div className="image-viewer-error">
+        Not an image file
+      </div>
+    );
+  }
+
+  // Get the MIME type from the file extension
+  const getImageMimeType = (fileName: string): string => {
+    const extension = fileName
+      .split('.')
+      .pop()
+      ?.toLowerCase();
+    switch (extension) {
+      case 'jpg':
+      case 'jpeg':
+        return 'image/jpeg';
+      case 'png':
+        return 'image/png';
+      case 'gif':
+        return 'image/gif';
+      case 'bmp':
+        return 'image/bmp';
+      case 'svg':
+        return 'image/svg+xml';
+      case 'webp':
+        return 'image/webp';
+      default:
+        return 'image/png'; // fallback
+    }
+  };
+
+  const mimeType = getImageMimeType(activeFile.name);
+  const extension = activeFile.name
+    .split('.')
+    .pop()
+    ?.toLowerCase();
+
+  // For SVG files, the content might already be the SVG text, not base64
+  const imageSrc =
+    extension === 'svg' &&
+    !activeFile.text.startsWith('PHN2Zw') // Check if it's not base64-encoded SVG
+      ? `data:${mimeType};utf8,${encodeURIComponent(activeFile.text)}`
+      : `data:${mimeType};base64,${activeFile.text}`;
+
+  return (
+    <div className="image-viewer">
+      <div className="image-viewer-content">
+        <img
+          src={imageSrc}
+          alt={activeFile.name}
+          className="image-viewer-img"
+          onError={(e) => {
+            console.error(
+              'Failed to load image:',
+              activeFile.name,
+            );
+            (e.target as HTMLImageElement).style.display =
+              'none';
+          }}
+        />
+      </div>
+    </div>
+  );
+};

package/src/client/ImageViewer/style.scss

@@ -0,0 +1,41 @@
+.image-viewer {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--bs-body-bg);
+  color: var(--bs-body-color);
+}
+
+.image-viewer-header {
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--bs-border-color);
+  background-color: var(--bs-tertiary-bg);
+}
+
+.image-viewer-content {
+  flex: 1;
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: auto;
+}
+
+.image-viewer-img {
+  max-width: 100%;
+  max-height: 100%;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  object-fit: contain;
+}
+
+.image-viewer-error {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--bs-text-muted);
+  font-family: var(--bs-font-monospace);
+  font-size: 14px;
+}

package/src/client/PresenceNotifications/PresenceNotifications.test.ts

@@ -0,0 +1,134 @@
+import { describe, expect, it } from 'vitest';
+import {
+  extractTimestampFromId,
+  shouldShowNotification,
+  handleJoin,
+  handleLeave,
+} from '.';
+
+describe('extractTimestampFromId', () => {
+  it('Extracts a timestamp from a given ID', () => {
+    const id = 'abcd-xyz';
+    const timestamp = extractTimestampFromId(id);
+    expect(timestamp).toBe(parseInt('abcd', 36));
+  });
+});
+
+describe('shouldShowNotification', () => {
+  it('Returns true if remote presence timestamp is greater than local', () => {
+    const remoteId = 'abcd-xyz';
+    const localId = 'aaa-xyz';
+    const result = shouldShowNotification(
+      remoteId,
+      localId,
+    );
+    expect(result).toBe(true);
+  });
+
+  it('Returns false if remote presence timestamp is not greater than local', () => {
+    const remoteId = 'aaa-xyz';
+    const localId = 'abcd-xyz';
+    const result = shouldShowNotification(
+      remoteId,
+      localId,
+    );
+    expect(result).toBe(false);
+  });
+});
+
+describe('handleJoin', () => {
+  it('Adds a new user if not already present', () => {
+    const presenceId = 'abcd-xyz';
+    const username = 'John';
+    const alreadyJoined = { current: new Map() };
+    let notifications = [];
+    const setNotifications = (updater) => {
+      notifications = updater(notifications);
+    };
+
+    handleJoin(
+      presenceId,
+      username,
+      alreadyJoined,
+      setNotifications,
+    );
+
+    expect(notifications.length).toBe(1);
+    expect(notifications[0].user).toBe(username);
+    expect(notifications[0].join).toBe(true);
+    expect(alreadyJoined.current.has(presenceId)).toBe(
+      true,
+    );
+  });
+
+  it('Updates username if user already present', () => {
+    const presenceId = 'abcd-xyz';
+    const username = 'John';
+    const alreadyJoined = {
+      current: new Map([[presenceId, 'Doe']]),
+    };
+    let notifications = [];
+    const setNotifications = (updater) => {
+      notifications = updater(notifications);
+    };
+
+    handleJoin(
+      presenceId,
+      username,
+      alreadyJoined,
+      setNotifications,
+    );
+
+    expect(notifications.length).toBe(0);
+    expect(alreadyJoined.current.get(presenceId)).toBe(
+      username,
+    );
+  });
+});
+
+describe('handleLeave', () => {
+  it('Removes an existing user', () => {
+    const presenceId = 'abcd-xyz';
+    const username = 'John';
+    const alreadyJoined = {
+      current: new Map([[presenceId, username]]),
+    };
+    let notifications = [];
+    const setNotifications = (updater) => {
+      notifications = updater(notifications);
+    };
+
+    handleLeave(
+      presenceId,
+      alreadyJoined,
+      setNotifications,
+    );
+
+    expect(notifications.length).toBe(1);
+    expect(notifications[0].user).toBe(username);
+    expect(notifications[0].join).toBe(false);
+    expect(alreadyJoined.current.has(presenceId)).toBe(
+      false,
+    );
+  });
+
+  it('Does nothing if user not present', () => {
+    const presenceId = 'abcd-xyz';
+    const alreadyJoined = { current: new Map() };
+    let notifications = [];
+    const setNotifications = (updater) => {
+      notifications = updater(notifications);
+    };
+
+    handleLeave(
+      presenceId,
+      alreadyJoined,
+      setNotifications,
+    );
+
+    expect(notifications.length).toBe(0);
+    expect(alreadyJoined.current.has(presenceId)).toBe(
+      false,
+    );
+  });
+});