Search Feature

package.json

@@ -91,6 +91,10 @@
     {
       "name": "Philip Park",
       "url": "https://github.com/philippark"
+    },
+    {
+      "name": "Jeffrey Cordero",
+      "url": "https://github.com/jeffrey-asm"
     }
   ],
   "license": "MIT",

src/client/Icons/CssSVG.tsx

@@ -0,0 +1,16 @@
+// https://reactsvgicons.com/
+export const CssSVG = () => {
+   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="M4.192 3.143h15.615l-1.42 16.034-6.404 1.812-6.369-1.813L4.192 3.143zM16.9 6.424l-9.8-.002.158 1.949 7.529.002-.189 2.02H9.66l.179 1.913h4.597l-.272 2.62-2.164.598-2.197-.603-.141-1.569h-1.94l.216 2.867L12 17.484l3.995-1.137.905-9.923z" />
+      </svg>
+   );
+};

src/client/Icons/FolderSVG.tsx

@@ -0,0 +1,19 @@
+// From Heroicons
+export const FolderSVG = () => {
+   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="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z" />
+     </svg>
+   );
+ };
+

src/client/Icons/HtmlSVG.tsx

@@ -0,0 +1,16 @@
+// https://reactsvgicons.com/
+export const HtmlSVG = () => {
+   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="M4.136 3.012h15.729l-1.431 16.15-6.451 1.826-6.414-1.826-1.433-16.15zm5.266 7.302l-.173-2.035 7.533.002.173-1.963-9.87-.002.522 5.998h6.835l-.243 2.566-2.179.602-2.214-.605-.141-1.58H7.691l.247 3.123L12 17.506l4.028-1.08.558-6.111H9.402v-.001z" />
+      </svg>
+   );
+};

src/client/Icons/JavaScriptSVG.tsx

@@ -0,0 +1,16 @@
+// https://reactsvgicons.com/
+export const JavaScriptSVG = () => {
+   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 3h18v18H3V3zm16.525 13.707c-.131-.821-.666-1.511-2.252-2.155-.552-.259-1.165-.438-1.349-.854-.068-.248-.078-.382-.034-.529.113-.484.687-.629 1.137-.495.293.09.563.315.732.676.775-.507.775-.507 1.316-.844-.203-.314-.304-.451-.439-.586-.473-.528-1.103-.798-2.126-.775l-.528.067c-.507.124-.991.395-1.283.754-.855.968-.608 2.655.427 3.354 1.023.765 2.521.933 2.712 1.653.18.878-.652 1.159-1.475 1.058-.607-.136-.945-.439-1.316-1.002l-1.372.788c.157.359.337.517.607.832 1.305 1.316 4.568 1.249 5.153-.754.021-.067.18-.528.056-1.237l.034.049zm-6.737-5.434h-1.686c0 1.453-.007 2.898-.007 4.354 0 .924.047 1.772-.104 2.033-.247.517-.886.451-1.175.359-.297-.146-.448-.349-.623-.641-.047-.078-.082-.146-.095-.146l-1.368.844c.229.473.563.879.994 1.137.641.383 1.502.507 2.404.305.588-.17 1.095-.519 1.358-1.059.384-.697.302-1.553.299-2.509.008-1.541 0-3.083 0-4.635l.003-.042z" />
+      </svg>
+   );
+};

src/client/Icons/JsonSVG.tsx

@@ -0,0 +1,16 @@
+// https://reactsvgicons.com/
+export const JsonSVG = () => {
+   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="M5 3h2v2H5v5a2 2 0 01-2 2 2 2 0 012 2v5h2v2H5c-1.07-.27-2-.9-2-2v-4a2 2 0 00-2-2H0v-2h1a2 2 0 002-2V5a2 2 0 012-2m14 0a2 2 0 012 2v4a2 2 0 002 2h1v2h-1a2 2 0 00-2 2v4a2 2 0 01-2 2h-2v-2h2v-5a2 2 0 012-2 2 2 0 01-2-2V5h-2V3h2m-7 12a1 1 0 011 1 1 1 0 01-1 1 1 1 0 01-1-1 1 1 0 011-1m-4 0a1 1 0 011 1 1 1 0 01-1 1 1 1 0 01-1-1 1 1 0 011-1m8 0a1 1 0 011 1 1 1 0 01-1 1 1 1 0 01-1-1 1 1 0 011-1z" />
+      </svg>
+   );
+};

src/client/Icons/MarkdownSVG.tsx

@@ -0,0 +1,16 @@
+// https://reactsvgicons.com/
+export const MarkdownSVG = () => {
+   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="M20.56 18H3.44C2.65 18 2 17.37 2 16.59V7.41C2 6.63 2.65 6 3.44 6h17.12c.79 0 1.44.63 1.44 1.41v9.18c0 .78-.65 1.41-1.44 1.41M6.81 15.19v-3.66l1.92 2.35 1.92-2.35v3.66h1.93V8.81h-1.93l-1.92 2.35-1.92-2.35H4.89v6.38h1.92M19.69 12h-1.92V8.81h-1.92V12h-1.93l2.89 3.28L19.69 12z" />
+      </svg>
+   );
+};

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>
+   )
+}

src/client/Icons/SearchFileSVG.tsx

@@ -0,0 +1,20 @@
+export const SearchFileSVG = () => {
+   return (
+     <svg
+       xmlns="http://www.w3.org/2000/svg"
+       width="24"
+       height="24"
+       fill="none"
+       viewBox="0 0 24 24"
+     >
+       <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.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.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>
+   );
+ };
+

src/client/Icons/SearchSVG.tsx

@@ -0,0 +1,21 @@
+// 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>
+   );
+ };
+

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>
+   );
+};

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>
+   );
+};

src/client/Icons/index.tsx

@@ -10,3 +10,14 @@ export { FileSVG } from './FileSVG';
 export { DirectoryArrowSVG } from './DirectoryArrowSVG';
 export { PlaySVG } from './PlaySVG';
 export { QuestionMarkSVG } from './QuestionMarkSVG';
+export { FolderSVG } from "./FolderSVG"
+export { SearchSVG } from "./SearchSVG"
+export { SearchFileSVG } from "./SearchFileSVG"
+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';

src/client/VZCodeContext.tsx

@@ -6,13 +6,14 @@ import {
   useRef,
 } from 'react';
 import {
-  FileId,
   Files,
   ItemId,
   ShareDBDoc,
   SubmitOperation,
   Username,
   VZCodeContent,
+  SearchResults,
+  SearchFileVisibility,
 } from '../types';
 import { usePrettier } from './usePrettier';
 import { useTypeScript } from './useTypeScript';
@@ -112,6 +113,13 @@ export type VZCodeContextValue = {
 
   typeScriptWorker: Worker | null;
 
+  search: SearchResults;
+  isSearchOpen: boolean;
+  setIsSearchOpen: (isSearchOpen: boolean) => void;
+  setSearch: (pattern: string) => void;
+  setSearchResults: (files: ShareDBDoc<VZCodeContent>) => void;
+  setSearchFileVisibility: (files: ShareDBDoc<VZCodeContent>, id: string, visibility: SearchFileVisibility) => void;
+
   isCreateFileModalOpen: boolean;
   handleOpenCreateFileModal: () => void;
   handleCloseCreateFileModal: () => void;
@@ -216,6 +224,8 @@ export const VZCodeProvider = ({
     tabList,
     activeFileId,
     theme,
+    search,
+    isSearchOpen,
     isSettingsOpen,
     isDocOpen,
     editorWantsFocus,
@@ -230,6 +240,10 @@ export const VZCodeProvider = ({
     openTab,
     closeTabs,
     setTheme,
+    setIsSearchOpen,
+    setSearch, 
+    setSearchResults,
+    setSearchFileVisibility,
     setIsSettingsOpen,
     setIsDocOpen,
     closeSettings,
@@ -359,6 +373,13 @@ export const VZCodeProvider = ({
     openTab,
     closeTabs,
 
+    search,
+    isSearchOpen,
+    setIsSearchOpen,
+    setSearch,
+    setSearchResults,
+    setSearchFileVisibility,
+
     isSettingsOpen,
     setIsSettingsOpen,
     closeSettings,