fix: strip files list after 500 entries in source control view

Author: Vinzent03

src/ui/sourceControl/components/tooManyFilesComponent.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    export let files: unknown[];
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<main>
+    {#if files.length > 500}
+        <div class="tree-item nav-file">
+            <div
+                class="tree-item-self nav-file-title"
+                aria-label={"And " + (files.length - 500) + " more files"}
+            >
+                <div class="tree-item-inner nav-file-title-content">
+                    {"And " + (files.length - 500) + " more files"}
+                </div>
+            </div>
+        </div>
+    {/if}
+</main>

src/ui/sourceControl/components/treeComponent.svelte

@@ -10,12 +10,17 @@
     import PulledFileComponent from "./pulledFileComponent.svelte";
     import StagedFileComponent from "./stagedFileComponent.svelte";
     import { mayTriggerFileMenu } from "src/utils";
+    import TooManyFilesComponent from "./tooManyFilesComponent.svelte";
     export let hierarchy: StatusRootTreeItem;
     export let plugin: ObsidianGit;
     export let view: GitView;
     export let fileType: FileType;
     export let topLevel = false;
     const closed: Record<string, boolean> = {};
+
+    for (const entity of hierarchy.children) {
+        closed[entity.title] = (entity.children?.length ?? 0) > 100;
+    }
     /* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access */
     $: side = (view.leaf.getRoot() as any).side == "left" ? "right" : "left";
 
@@ -60,7 +65,7 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <main class:topLevel>
-    {#each hierarchy.children as entity}
+    {#each hierarchy.children.slice(0, 500) as entity}
         {#if entity.data}
             <div>
                 {#if fileType == FileType.staged}
@@ -227,6 +232,8 @@
             </div>
         {/if}
     {/each}
+
+    <TooManyFilesComponent files={hierarchy.children} />
 </main>
 
 <style lang="scss">

src/ui/sourceControl/sourceControl.svelte

@@ -17,6 +17,7 @@
     import StagedFileComponent from "./components/stagedFileComponent.svelte";
     import TreeComponent from "./components/treeComponent.svelte";
     import type GitView from "./sourceControl";
+    import TooManyFilesComponent from "./components/tooManyFilesComponent.svelte";
 
     export let plugin: ObsidianGit;
     export let view: GitView;
@@ -142,27 +143,18 @@
             };
             status.changed.sort(sort);
             status.staged.sort(sort);
-            if (status.changed.length + status.staged.length > 500) {
-                status = undefined;
-                if (!plugin.loading) {
-                    plugin.displayError("Too many changes to display");
-                }
-            } else {
-                changeHierarchy = {
-                    title: "",
-                    path: "",
-                    vaultPath: "",
-                    children: plugin.gitManager.getTreeStructure(
-                        status.changed
-                    ),
-                };
-                stagedHierarchy = {
-                    title: "",
-                    path: "",
-                    vaultPath: "",
-                    children: plugin.gitManager.getTreeStructure(status.staged),
-                };
-            }
+            changeHierarchy = {
+                title: "",
+                path: "",
+                vaultPath: "",
+                children: plugin.gitManager.getTreeStructure(status.changed),
+            };
+            stagedHierarchy = {
+                title: "",
+                path: "",
+                vaultPath: "",
+                children: plugin.gitManager.getTreeStructure(status.staged),
+            };
         } else {
             changeHierarchy = undefined;
             stagedHierarchy = undefined;
@@ -404,13 +396,14 @@
                                     topLevel={true}
                                 />
                             {:else}
-                                {#each status.staged as stagedFile}
+                                {#each status.staged.slice(0, 500) as stagedFile}
                                     <StagedFileComponent
                                         change={stagedFile}
                                         {view}
                                         manager={plugin.gitManager}
                                     />
                                 {/each}
+                                <TooManyFilesComponent files={status.staged} />
                             {/if}
                         </div>
                     {/if}
@@ -520,13 +513,14 @@
                                     topLevel={true}
                                 />
                             {:else}
-                                {#each status.changed as change}
+                                {#each status.changed.slice(0, 500) as change}
                                     <FileComponent
                                         {change}
                                         {view}
                                         manager={plugin.gitManager}
                                     />
                                 {/each}
+                                <TooManyFilesComponent files={status.changed} />
                             {/if}
                         </div>
                     {/if}
@@ -586,6 +580,9 @@
                                     {#each lastPulledFiles as change}
                                         <PulledFileComponent {change} {view} />
                                     {/each}
+                                    <TooManyFilesComponent
+                                        files={lastPulledFiles}
+                                    />
                                 {/if}
                             </div>
                         {/if}