feat: show split button and hash on main layout

Author: mateof

TelegramDownloader/Pages/Partials/UploadsTable.razor

@@ -60,7 +60,13 @@
 
     <GridColumn TItem="UploadModel" HeaderText="Actions">
         <div class="action-buttons">
-            @if (context.state == StateTask.Working && !isPending)
+            @if (IsSplitting(context) && context.state == StateTask.Working && !isPending)
+            {
+                <button class="action-btn splitting" disabled title="Splitting file...">
+                    <i class="bi bi-scissors spin"></i>
+                </button>
+            }
+            else if (context.state == StateTask.Working && !isPending)
             {
                 <button class="action-btn cancel" @onclick="() => cancel(context)" title="Cancel">
                     <i class="bi bi-x-lg"></i>
@@ -121,16 +127,29 @@
         };
     }
 
+    private bool IsSplitting(UploadModel um)
+    {
+        return um is SplitModel || um.action == "Splitting";
+    }
+
+    private bool IsMd5Calculating(UploadModel um)
+    {
+        return um is Md5Model || um.action == "MD5 Calc" || um is XxHashModel || um.action == "XxHash Calc";
+    }
+
     private string GetProgressClass(UploadModel um)
     {
         if (um.state == StateTask.Completed || um.progress >= 100) return "complete";
         if (um.state == StateTask.Error || um.state == StateTask.Canceled) return "error";
+        if (IsSplitting(um)) return "splitting";
         return "";
     }
 
     private string GetStatusClass(UploadModel um, bool isPending)
     {
         if (isPending) return "pending";
+        if (IsSplitting(um) && um.state == StateTask.Working) return "splitting";
+        if (IsMd5Calculating(um) && um.state == StateTask.Working) return "calculating";
         return um.state switch
         {
             StateTask.Working => "working",
@@ -144,6 +163,8 @@
     private string GetStatusIcon(UploadModel um, bool isPending)
     {
         if (isPending) return "bi-clock";
+        if (IsSplitting(um) && um.state == StateTask.Working) return "bi-scissors";
+        if (IsMd5Calculating(um) && um.state == StateTask.Working) return "bi-calculator";
         return um.state switch
         {
             StateTask.Working => "bi-arrow-up-circle",
@@ -157,6 +178,8 @@
     private string GetStatusText(UploadModel um, bool isPending)
     {
         if (isPending) return "In Queue";
+        if (IsSplitting(um) && um.state == StateTask.Working) return "Splitting";
+        if (IsMd5Calculating(um) && um.state == StateTask.Working) return um.action;
         return um.state switch
         {
             StateTask.Working => "Uploading",

TelegramDownloader/Pages/Partials/UploadsTable.razor.css

@@ -257,10 +257,33 @@
     color: #ffc107;
 }
 
+::deep .status-badge.splitting {
+    background: rgba(168, 85, 247, 0.2);
+    color: #a855f7;
+}
+
+::deep .status-badge.splitting i {
+    animation: spin 1s linear infinite;
+}
+
+::deep .status-badge.calculating {
+    background: rgba(59, 130, 246, 0.2);
+    color: #3b82f6;
+}
+
+::deep .status-badge.calculating i {
+    animation: pulse 1s ease-in-out infinite;
+}
+
 ::deep .status-badge i {
     font-size: 0.6rem;
 }
 
+/* Progress bar for splitting */
+::deep .progress-bar.splitting {
+    background: linear-gradient(90deg, #a855f7 0%, #c084fc 100%);
+}
+
 /* Action buttons */
 ::deep .action-buttons {
     display: flex;
@@ -310,10 +333,35 @@
     color: #5bc0de;
 }
 
+::deep .action-btn.splitting {
+    background: rgba(168, 85, 247, 0.2);
+    border-color: rgba(168, 85, 247, 0.3);
+    color: #a855f7;
+    cursor: not-allowed;
+}
+
+::deep .action-btn.splitting:hover {
+    transform: none;
+}
+
 ::deep .action-btn i {
     font-size: 0.875rem;
 }
 
+::deep .action-btn i.spin {
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+}
+
 /* Empty state */
 ::deep .empty-state {
     text-align: center;

TelegramDownloader/Services/TransactionInfoService.cs

@@ -75,6 +75,21 @@ public bool isUploading()
             return uploadModels.Any(x => x.state == StateTask.Working);
         }
 
+        public bool isSplitting()
+        {
+            return uploadModels.Any(x => x.state == StateTask.Working && (x is SplitModel || x.action == "Splitting"));
+        }
+
+        public bool isCalculatingHash()
+        {
+            return uploadModels.Any(x => x.state == StateTask.Working && (x is Md5Model || x is XxHashModel || x.action == "MD5 Calc" || x.action == "XxHash Calc"));
+        }
+
+        public bool isRealUploading()
+        {
+            return uploadModels.Any(x => x.state == StateTask.Working && x.action == "Upload");
+        }
+
         public bool isDownloading()
         {
             return downloadModels.Any(x => x.state == StateTask.Working);

TelegramDownloader/Shared/MainLayout.razor

@@ -82,7 +82,23 @@
 
             <div class="top-row-actions">
                 @if(active) {
-                    @if (tis.isUploading())
+                    @if (tis.isSplitting())
+                    {
+                        <button class="btn status-btn splitting"
+                                @onclick='() => Navigateto("/downloads?tab=uploads")' title="Splitting file...">
+                            <i class="bi bi-scissors spin"></i>
+                            <span>Splitting</span>
+                        </button>
+                    }
+                    else if (tis.isCalculatingHash())
+                    {
+                        <button class="btn status-btn calculating"
+                                @onclick='() => Navigateto("/downloads?tab=uploads")' title="Calculating hash...">
+                            <i class="bi bi-calculator"></i>
+                            <span>Hashing</span>
+                        </button>
+                    }
+                    else if (tis.isUploading())
                     {
                         <button class="btn water-fill-button upload @(GetUploadProgress() > 50 ? "filled-high" : "")"
                                 @onclick='() => Navigateto("/downloads?tab=uploads")' title="Upload in progress">

TelegramDownloader/Shared/MainLayout.razor.css

@@ -122,6 +122,54 @@ main {
     color: #e94560;
 }
 
+/* Status buttons (splitting, calculating) */
+.top-row ::deep .status-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.375rem 0.875rem;
+    border-radius: 2rem;
+    font-size: 0.8rem;
+    font-weight: 500;
+    border: 1px solid;
+    transition: all 0.2s ease;
+}
+
+.top-row ::deep .status-btn.splitting {
+    background: rgba(168, 85, 247, 0.15);
+    border-color: rgba(168, 85, 247, 0.3);
+    color: #c084fc;
+}
+
+.top-row ::deep .status-btn.splitting:hover {
+    background: rgba(168, 85, 247, 0.25);
+    border-color: rgba(168, 85, 247, 0.5);
+}
+
+.top-row ::deep .status-btn.calculating {
+    background: rgba(59, 130, 246, 0.15);
+    border-color: rgba(59, 130, 246, 0.3);
+    color: #60a5fa;
+}
+
+.top-row ::deep .status-btn.calculating:hover {
+    background: rgba(59, 130, 246, 0.25);
+    border-color: rgba(59, 130, 246, 0.5);
+}
+
+.top-row ::deep .status-btn i {
+    font-size: 1rem;
+}
+
+.top-row ::deep .status-btn i.spin {
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
 @media (max-width: 2048px) {
     .page {
         flex-direction: column;