added one col view (#75)

Co-authored-by: hendrik <[email protected]> Co-authored-by: Patrick Elsen <[email protected]>
xfbs · Oct 30, 2024 · e80def5 · e80def5
1 parent 2c47a9e
commit e80def5
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 21 deletions.
diff --git a/src/components/diff_view.rs b/src/components/diff_view.rs
@@ -2,6 +2,7 @@ use crate::{
     data::{ChunkInfo, FileDiff, VersionDiff},
     syntax::{highlight_changes, infer_syntax_for_file, syntect_style_to_css},
 };
+use bytes::Bytes;
 use camino::Utf8PathBuf;
 use log::*;
 use similar::ChangeTag;
@@ -47,6 +48,7 @@ fn FileIcon() -> Html {
 pub fn DiffView(props: &DiffViewProps) -> Html {
     let empty = FileDiff::default();
     let file_diff = props.diff.files.get(&props.path).unwrap_or(&empty);
+    let summary = props.diff.summary.get(&props.path).unwrap_or(&(0, 0));
     let is_identical_version = props.diff.left.version == props.diff.right.version;
 
     // Determine which syntax should be used for this file. It will be based
@@ -117,7 +119,13 @@ pub fn DiffView(props: &DiffViewProps) -> Html {
                 <span class="filename">{props.path.file_name().unwrap_or("")}</span>
             </div>
             <div class="content">
-                <UnifiedDiffView {stack} />
+                {
+                    if summary == &(0,0) {
+                        html! {<FileDisplayView {stack} />}
+                    } else {
+                        html! {<UnifiedDiffView {stack} />}
+                    }
+                }
             </div>
         </div>
     }
@@ -155,6 +163,32 @@ pub fn UnifiedDiffView(props: &AnyDiffViewProps) -> Html {
     }
 }
 
+#[function_component]
+pub fn FileDisplayView(props: &AnyDiffViewProps) -> Html {
+    let mut overall_index = 0;
+    html! {
+        <div class="overflow-x-scroll bg-white">
+            <div class="unified">
+            {
+                props.stack.iter()
+                    .map(|DiffGroupInfo {group, range, in_context: _}| {
+                        let res = html!{
+                            <FileView
+                                key={format!("{:?}", range)}
+                                group={group.iter().map(|(_, line)| line.clone()).collect::<Vec<_>>()}
+                                group_start_index={overall_index}
+                            />
+                        };
+                        overall_index += group.len();
+                        res
+                    })
+                    .collect::<Html>()
+            }
+            </div>
+        </div>
+    }
+}
+
 #[function_component]
 pub fn SplitDiffView(props: &AnyDiffViewProps) -> Html {
     let mut overall_index = 0;
@@ -198,6 +232,12 @@ pub struct DiffLineGroupProps {
     group_start_index: (usize, usize, usize),
 }
 
+#[derive(Properties, PartialEq)]
+pub struct DisplayGroupProps {
+    group: Vec<Vec<(Style, bytes::Bytes)>>,
+    group_start_index: usize,
+}
+
 #[function_component]
 pub fn DiffLineGroup(props: &DiffLineGroupProps) -> Html {
     let folded = use_state(|| !props.in_context);
@@ -258,7 +298,6 @@ pub fn DiffLineGroup(props: &DiffLineGroupProps) -> Html {
 
                     html! {
                         <div class={classes!("line", class)}>
-
                             <div class="line-number">
                                 {
                                     format!("{left}")
@@ -275,16 +314,7 @@ pub fn DiffLineGroup(props: &DiffLineGroupProps) -> Html {
                                 }
                             </div>
                             <div class="code-line">
-                                {
-                                    change.iter().map(|(style, text)| {
-                                        let style = syntect_style_to_css(style);
-                                        let contents = String::from_utf8_lossy(&text[..]);
-                                        html! {
-                                            <span style={style}>{contents}</span>
-                                        }
-                                    })
-                                    .collect::<Html>()
-                                }
+                                <CodeLine stack={change.clone()} />
                             </div>
                         </div>
                     }
@@ -294,3 +324,46 @@ pub fn DiffLineGroup(props: &DiffLineGroupProps) -> Html {
         }
     }
 }
+
+#[function_component]
+pub fn FileView(props: &DisplayGroupProps) -> Html {
+    props
+        .group
+        .iter()
+        .enumerate()
+        .map(|(index, change)| {
+            html! {
+                <div class={classes!("line", "unchanged")}>
+                    <div class={classes!("line-number", "file-view")}>
+                        {
+                            format!("{}", index+1+ props.group_start_index)
+                        }
+                    </div>
+                    <div class="code-line">
+                        <CodeLine stack={change.clone()} />
+                    </div>
+                </div>
+            }
+        })
+        .collect::<Html>()
+}
+
+#[derive(Properties, PartialEq)]
+pub struct CodeLineProps {
+    stack: Vec<(Style, Bytes)>,
+}
+
+#[function_component]
+pub fn CodeLine(props: &CodeLineProps) -> Html {
+    props
+        .stack
+        .iter()
+        .map(|(style, text)| {
+            let style = syntect_style_to_css(style);
+            let contents = String::from_utf8_lossy(&text[..]);
+            html! {
+                <span style={style}>{contents}</span>
+            }
+        })
+        .collect::<Html>()
+}
diff --git a/src/tailwind.css b/src/tailwind.css
@@ -67,8 +67,7 @@
         @apply w-4 shrink-0;
     }
 
-    .file-entry .toggle.active {
-    }
+    .file-entry .toggle.active {}
 
     .file-entry .icon {
         @apply w-4 shrink-0;
@@ -128,8 +127,7 @@
         @apply font-mono;
     }
 
-    .diff-view .content {
-    }
+    .diff-view .content {}
 
     .diff-view .content .unified {
         @apply grid grid-cols-[auto_auto_auto_1fr] font-mono;
@@ -158,6 +156,10 @@
         @apply contents;
     }
 
+    .diff-view .content .unified .line .file-view {
+        @apply col-span-3;
+    }
+
     .diff-view .content .unified .line .line-number {
         @apply text-right px-2;
         @apply text-gray-500 dark:text-gray-500;
@@ -175,15 +177,15 @@
         @apply px-2;
     }
 
-    .diff-view .content .unified .line.deletion > * {
+    .diff-view .content .unified .line.deletion>* {
         @apply bg-red-100;
     }
 
     .diff-view .content .unified .line.deletion .line-number {
         @apply bg-red-200 dark:bg-red-900;
     }
 
-    .diff-view .content .unified .line.insertion > * {
+    .diff-view .content .unified .line.insertion>* {
         @apply bg-green-100;
     }
 
@@ -192,8 +194,7 @@
     }
 
 
-    .diff-view .content .split {
-    }
+    .diff-view .content .split {}
 
     .summary {
         @apply grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4;
@@ -235,4 +236,4 @@
     .card .description {
         @apply font-normal text-gray-700 dark:text-gray-400;
     }
-}
+}