Adds line numbers to the code snippets, with a setting to turn them o…

…ff if desired
jordan-dalby · Oct 30, 2024 · fc64ff4 · fc64ff4
1 parent 51a7261
commit fc64ff4
Show file tree

Hide file tree

Showing 9 changed files with 69 additions and 10 deletions.
diff --git a/client/src/components/settings/SettingsModal.tsx b/client/src/components/settings/SettingsModal.tsx
@@ -9,6 +9,7 @@ const SettingsModal: React.FC<SettingsModalProps> = ({ isOpen, onClose, settings
   const [includeCodeInSearch, setIncludeCodeInSearch] = useState(settings.includeCodeInSearch);
   const [showCategories, setShowCategories] = useState(settings.showCategories);
   const [expandCategories, setExpandCategories] = useState(settings.expandCategories);
+  const [showLineNumbers, setShowLineNumbers] = useState(settings.showLineNumbers);
 
   const handleSave = () => {
     onSettingsChange({
@@ -17,7 +18,8 @@ const SettingsModal: React.FC<SettingsModalProps> = ({ isOpen, onClose, settings
       previewLines,
       includeCodeInSearch,
       showCategories,
-      expandCategories
+      expandCategories,
+      showLineNumbers
     });
     onClose();
   };
@@ -93,6 +95,16 @@ const SettingsModal: React.FC<SettingsModalProps> = ({ isOpen, onClose, settings
             />
           </div>
         )}
+        <div className="flex items-center justify-between">
+          <label htmlFor="showLineNumbers" className="text-gray-300">Show Line Numbers</label>
+          <input
+            type="checkbox"
+            id="showLineNumbers"
+            checked={showLineNumbers}
+            onChange={(e) => setShowLineNumbers(e.target.checked)}
+            className="form-checkbox h-5 w-5 text-blue-600 rounded focus:ring-blue-500"
+          />
+        </div>
       </div>
       <div className="mt-6 flex justify-end">
         <button

diff --git a/client/src/components/snippets/FullCodeBlock.tsx b/client/src/components/snippets/FullCodeBlock.tsx
@@ -8,7 +8,8 @@ import { FullCodeBlockProps } from '@/types/types';
 
 const FullCodeBlock: React.FC<FullCodeBlockProps> = ({ 
   code, 
-  language = 'plaintext'
+  language = 'plaintext',
+  showLineNumbers = true
 }) => {
   const [normalizedLang, setNormalizedLang] = useState<string>('plaintext');
   const isMarkdown = getLanguageLabel(language) === 'markdown';
@@ -18,6 +19,16 @@ const FullCodeBlock: React.FC<FullCodeBlockProps> = ({
     setNormalizedLang(normalized);
   }, [language]);
 
+  const lineNumberStyle = {
+    minWidth: '2.5em',
+    paddingRight: '0.5em',
+    textAlign: 'right',
+    userSelect: 'none',
+    opacity: '0.5',
+    borderRight: '1px solid #404040',
+    marginRight: '1em',
+  } as const;
+
   const components: Components = {
     code: ({ className, children }) => (
       <code className={className}>
@@ -136,6 +147,8 @@ const FullCodeBlock: React.FC<FullCodeBlockProps> = ({
             style={vscDarkPlus}
             wrapLines={true}
             className="syntax-highlighter-full"
+            lineNumberStyle={lineNumberStyle}
+            showLineNumbers={showLineNumbers}
           >
             {code}
           </SyntaxHighlighter>

diff --git a/client/src/components/snippets/PreviewCodeBlock.tsx b/client/src/components/snippets/PreviewCodeBlock.tsx
@@ -9,7 +9,8 @@ import { PreviewCodeBlockProps } from '@/types/types';
 const PreviewCodeBlock: React.FC<PreviewCodeBlockProps> = ({ 
   code, 
   language = 'plaintext',
-  previewLines = 4 
+  previewLines = 4,
+  showLineNumbers = true
 }) => {
   const [normalizedLang, setNormalizedLang] = useState<string>('plaintext');
   const LINE_HEIGHT = 24;
@@ -21,6 +22,16 @@ const PreviewCodeBlock: React.FC<PreviewCodeBlockProps> = ({
     setNormalizedLang(normalized);
   }, [language]);
 
+  const lineNumberStyle = {
+    minWidth: '2.5em',
+    paddingRight: '0.5em',
+    textAlign: 'right',
+    userSelect: 'none',
+    opacity: '0.5',
+    borderRight: '1px solid #404040',
+    marginRight: '1em',
+  } as const;
+
   const components: Components = {
     code: ({ className, children }) => (
       <code className={className}>
@@ -151,6 +162,8 @@ const PreviewCodeBlock: React.FC<PreviewCodeBlockProps> = ({
               style={vscDarkPlus}
               wrapLines={true}
               className="syntax-highlighter-preview"
+              lineNumberStyle={lineNumberStyle}
+              showLineNumbers={showLineNumbers}
             >
               {code}
             </SyntaxHighlighter>

diff --git a/client/src/components/snippets/SnippetCard.tsx b/client/src/components/snippets/SnippetCard.tsx
@@ -18,7 +18,8 @@ const SnippetCard: React.FC<SnippetCardProps> = ({
   showCodePreview,
   previewLines,
   showCategories,
-  expandCategories
+  expandCategories,
+  showLineNumbers
 }) => {
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
 
@@ -105,6 +106,7 @@ const SnippetCard: React.FC<SnippetCardProps> = ({
                 code={snippet.code} 
                 language={snippet.language}
                 previewLines={previewLines}
+                showLineNumbers={showLineNumbers}
               />
             </div>
             {snippet.code.split('\n').length > previewLines && (

diff --git a/client/src/components/snippets/SnippetList.tsx b/client/src/components/snippets/SnippetList.tsx
@@ -13,7 +13,8 @@ const SnippetList: React.FC<SnippetListProps> = ({
   showCodePreview, 
   previewLines,
   showCategories,
-  expandCategories
+  expandCategories,
+  showLineNumbers
 }) => {
   if (snippets.length === 0) {
     return (
@@ -42,6 +43,7 @@ const SnippetList: React.FC<SnippetListProps> = ({
           previewLines={previewLines}
           showCategories={showCategories}
           expandCategories={expandCategories}
+          showLineNumbers={showLineNumbers}
         />
       ))}
     </div>

diff --git a/client/src/components/snippets/SnippetModal.tsx b/client/src/components/snippets/SnippetModal.tsx
@@ -8,7 +8,8 @@ const SnippetModal: React.FC<SnippetModalProps> = ({
   snippet, 
   isOpen, 
   onClose, 
-  onCategoryClick 
+  onCategoryClick,
+  showLineNumbers
 }) => {
   if (!snippet) return null;
 
@@ -30,7 +31,7 @@ const SnippetModal: React.FC<SnippetModalProps> = ({
         showAll={true}
       />
       <div className="mb-4">
-        <FullCodeBlock code={snippet.code} language={snippet.language} />
+        <FullCodeBlock code={snippet.code} language={snippet.language} showLineNumbers={showLineNumbers}/>
       </div>
     </Modal>
   );

diff --git a/client/src/components/snippets/SnippetStorage.tsx b/client/src/components/snippets/SnippetStorage.tsx
@@ -14,7 +14,7 @@ const SnippetStorage: React.FC = () => {
   const { 
     viewMode, setViewMode, compactView, showCodePreview, 
     previewLines, includeCodeInSearch, updateSettings,
-    showCategories, expandCategories
+    showCategories, expandCategories, showLineNumbers
   } = useSettings();
 
   const [searchTerm, setSearchTerm] = useState('');
@@ -157,6 +157,7 @@ const SnippetStorage: React.FC = () => {
         previewLines={previewLines}
         showCategories={showCategories}
         expandCategories={expandCategories}
+        showLineNumbers={showLineNumbers}
       />
 
       {selectedSnippet && (
@@ -165,6 +166,7 @@ const SnippetStorage: React.FC = () => {
           isOpen={!!selectedSnippet} 
           onClose={closeSnippet}
           onCategoryClick={handleCategoryClick}
+          showLineNumbers={showLineNumbers}
         />
       )}
 
@@ -178,7 +180,7 @@ const SnippetStorage: React.FC = () => {
       <SettingsModal
         isOpen={isSettingsModalOpen}
         onClose={() => setIsSettingsModalOpen(false)}
-        settings={{ compactView, showCodePreview, previewLines, includeCodeInSearch, showCategories, expandCategories }}
+        settings={{ compactView, showCodePreview, previewLines, includeCodeInSearch, showCategories, expandCategories, showLineNumbers }}
         onSettingsChange={updateSettings}
       />
     </div>

diff --git a/client/src/hooks/useSettings.ts b/client/src/hooks/useSettings.ts
@@ -10,6 +10,7 @@ export const useSettings = () => {
   const [includeCodeInSearch, setIncludeCodeInSearch] = useState(() => localStorage.getItem('includeCodeInSearch') === 'true');
   const [showCategories, setShowCategories] = useState(() => localStorage.getItem('showCategories') !== 'false');
   const [expandCategories, setExpandCategories] = useState(() => localStorage.getItem('expandCategories') === 'true');
+  const [showLineNumbers, setShowLineNumbers] = useState(() => localStorage.getItem('showLineNumbers') === 'true')
 
   useEffect(() => {
     localStorage.setItem('viewMode', viewMode);
@@ -39,20 +40,26 @@ export const useSettings = () => {
     localStorage.setItem('expandCategories', expandCategories.toString());
   }, [expandCategories]);
 
+  useEffect(() => {
+    localStorage.setItem('showLineNumbers', showLineNumbers.toString());
+  }, [showLineNumbers]);
+
   const updateSettings = (newSettings: {
     compactView: boolean;
     showCodePreview: boolean;
     previewLines: number;
     includeCodeInSearch: boolean;
     showCategories: boolean;
     expandCategories: boolean;
+    showLineNumbers: boolean;
   }) => {
     setCompactView(newSettings.compactView);
     setShowCodePreview(newSettings.showCodePreview);
     setPreviewLines(newSettings.previewLines);
     setIncludeCodeInSearch(newSettings.includeCodeInSearch);
     setShowCategories(newSettings.showCategories);
     setExpandCategories(newSettings.expandCategories);
+    setShowLineNumbers(newSettings.showLineNumbers);
   };
 
   return {
@@ -64,6 +71,7 @@ export const useSettings = () => {
     includeCodeInSearch,
     showCategories,
     expandCategories,
-    updateSettings
+    updateSettings,
+    showLineNumbers
   };
 };
diff --git a/client/src/types/types.ts b/client/src/types/types.ts
@@ -20,13 +20,15 @@ export interface Snippet {
     previewLines: number;
     showCategories: boolean;
     expandCategories: boolean;
+    showLineNumbers: boolean;
   }
 
   export interface SnippetModalProps {
     snippet: Snippet | null;
     isOpen: boolean;
     onClose: () => void;
     onCategoryClick: (category: string) => void;
+    showLineNumbers: boolean;
   }
 
   export interface EditSnippetModalProps {
@@ -89,6 +91,7 @@ export interface Snippet {
       includeCodeInSearch: boolean;
       showCategories: boolean;
       expandCategories: boolean;
+      showLineNumbers: boolean;
     };
     onSettingsChange: (newSettings: SettingsModalProps['settings']) => void;
   }
@@ -122,6 +125,7 @@ export interface Snippet {
     previewLines: number;
     showCategories: boolean;
     expandCategories: boolean;
+    showLineNumbers: boolean;
   }
 
   export interface ModalProps {
@@ -137,12 +141,14 @@ export interface Snippet {
   export interface FullCodeBlockProps {
     code: string;
     language?: string;
+    showLineNumbers?: boolean;
   }
 
   export interface PreviewCodeBlockProps {
     code: string;
     language?: string;
     previewLines?: number;
+    showLineNumbers?: boolean;
   }
 
   export interface DeleteConfirmationModalProps {