TC
/
arozos-mirror
зеркало из https://github.com/tobychui/arozos


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121
							<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="../../script/semantic/semantic.min.css">
        <script src="../../script/jquery.min.js"></script>
        <script type='text/javascript' src="../../semantic/semantic.min.js"></script>
        <script src="../../script/ao_module.js"></script>
        <script src="../../script/applocale.js"></script>
        <title locale="diskmg/window-title">Disk Management</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <style>
            *, *::before, *::after { box-sizing: border-box; }

            body {
                font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
                font-size: 13px;
                color: #1d1d1f;
                background: #f2f2f7;
                margin: 0;
                padding: 0;
                height: 100vh;
                overflow: hidden;
            }

            .main-layout {
                display: flex;
                flex-direction: row;
                height: 100vh;
                overflow: hidden;
            }

            /* ── Sidebar ── */
            .sidebar {
                width: 210px;
                flex-shrink: 0;
                background: rgba(235,235,240,0.95);
                border-right: 1px solid rgba(0,0,0,0.13);
                display: flex;
                flex-direction: column;
                overflow: hidden;
            }

            .sidebar-header {
                padding: 16px 14px 6px;
                font-size: 11px;
                font-weight: 700;
                color: #6e6e73;
                letter-spacing: 0.07em;
                text-transform: uppercase;
                flex-shrink: 0;
            }

            .sidebar-list {
                flex: 1;
                overflow-y: auto;
                padding: 2px 6px 10px;
            }

            .sidebar-item {
                display: flex;
                align-items: center;
                gap: 9px;
                padding: 6px 8px;
                border-radius: 7px;
                cursor: pointer;
                transition: background 0.1s;
                margin-bottom: 1px;
            }
            .sidebar-item:hover { background: rgba(0,0,0,0.07); }
            .sidebar-item.active {
                background: #007AFF;
                color: #fff;
            }
            .sidebar-item.active .sidebar-item-sub { color: rgba(255,255,255,0.72); }

            .sidebar-item-icon {
                width: 30px;
                height: 30px;
                flex-shrink: 0;
                object-fit: contain;
            }
            .sidebar-item.active .sidebar-item-icon {
                filter: brightness(1.8);
            }

            .sidebar-item-text { min-width: 0; }
            .sidebar-item-name {
                font-size: 12px;
                font-weight: 500;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .sidebar-item-sub {
                font-size: 11px;
                color: #6e6e73;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                margin-top: 1px;
            }

            /* ── Detail panel ── */
            .detail-panel {
                flex: 1;
                overflow-y: auto;
                padding: 18px 18px 22px;
                min-width: 0;
            }

            /* ── Disk header card ── */
            .disk-header-card {
                background: #fff;
                border-radius: 12px;
                padding: 18px 22px;
                display: flex;
                align-items: flex-start;
                gap: 18px;
                box-shadow: 0 1px 3px rgba(0,0,0,0.07), 0 1px 8px rgba(0,0,0,0.04);
                margin-bottom: 12px;
            }

            .disk-header-icon {
                width: 60px;
                height: 60px;
                flex-shrink: 0;
                object-fit: contain;
            }

            .disk-header-info { flex: 1; min-width: 0; }

            .disk-header-name {
                font-size: 17px;
                font-weight: 600;
                color: #1d1d1f;
                margin-bottom: 2px;
            }
            .disk-header-meta {
                font-size: 12px;
                color: #6e6e73;
                margin-bottom: 14px;
            }

            /* macOS-style multicolor storage bar */
            .storage-bar {
                height: 10px;
                border-radius: 5px;
                background: #e5e5ea;
                display: flex;
                overflow: hidden;
                margin-bottom: 10px;
            }
            .storage-bar-seg {
                height: 100%;
                transition: width 0.35s ease;
                min-width: 0;
            }

            .storage-bar-legend {
                display: flex;
                flex-wrap: wrap;
                gap: 6px 16px;
            }
            .legend-item {
                display: flex;
                align-items: center;
                gap: 5px;
                font-size: 11px;
                color: #6e6e73;
            }
            .legend-dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                flex-shrink: 0;
            }

            .disk-header-stats {
                display: flex;
                gap: 28px;
                margin-top: 14px;
                padding-top: 13px;
                border-top: 1px solid rgba(0,0,0,0.07);
            }
            .stat-label { font-size: 11px; color: #6e6e73; margin-bottom: 2px; }
            .stat-value { font-size: 14px; font-weight: 600; color: #1d1d1f; }

            /* ── Partition table card ── */
            .partition-card {
                background: #fff;
                border-radius: 12px;
                overflow: hidden;
                box-shadow: 0 1px 3px rgba(0,0,0,0.07), 0 1px 8px rgba(0,0,0,0.04);
            }

            .partition-card-header {
                padding: 11px 18px 9px;
                font-size: 11px;
                font-weight: 700;
                color: #6e6e73;
                text-transform: uppercase;
                letter-spacing: 0.07em;
                border-bottom: 1px solid rgba(0,0,0,0.07);
                background: #fafafa;
            }

            .partition-table {
                width: 100%;
                border-collapse: collapse;
            }
            .partition-table th {
                padding: 8px 16px;
                text-align: left;
                font-size: 11px;
                font-weight: 600;
                color: #6e6e73;
                background: #fafafa;
                border-bottom: 1px solid rgba(0,0,0,0.07);
                white-space: nowrap;
            }
            .partition-table td {
                padding: 11px 16px;
                border-bottom: 1px solid rgba(0,0,0,0.05);
                font-size: 12px;
                vertical-align: middle;
            }
            .partition-table tbody tr:last-child td { border-bottom: none; }
            .partition-table tbody tr:hover { background: rgba(0,122,255,0.05); cursor: default; }
            .partition-table tbody tr.focusedPart { background: rgba(0,122,255,0.10); }

            .part-color-dot {
                display: inline-block;
                width: 9px;
                height: 9px;
                border-radius: 50%;
                flex-shrink: 0;
                vertical-align: middle;
                margin-right: 6px;
            }

            .status-badge {
                display: inline-flex;
                align-items: center;
                gap: 4px;
                font-size: 11px;
                font-weight: 500;
            }
            .status-dot {
                width: 6px;
                height: 6px;
                border-radius: 50%;
                flex-shrink: 0;
            }
            .dot-mounted   { background: #34c759; }
            .dot-unmounted { background: #ff3b30; }
            .dot-unalloc   { background: #aeaeb2; }

            .mini-bar {
                height: 3px;
                background: rgba(0,0,0,0.08);
                border-radius: 2px;
                overflow: hidden;
                margin-top: 5px;
                width: 64px;
            }
            .mini-bar-fill { height: 100%; border-radius: 2px; }

            /* ── Empty state ── */
            .empty-state {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                height: 100%;
                gap: 14px;
                color: #aeaeb2;
                text-align: center;
            }
            .empty-state img { width: 72px; opacity: 0.3; }
            .empty-state-text { font-size: 14px; font-weight: 500; }

            /* ── Context menu (macOS vibrancy style) ── */
            #rightClickMenu {
                position: fixed;
                z-index: 200;
                background: rgba(248,248,250,0.96);
                backdrop-filter: blur(20px);
                -webkit-backdrop-filter: blur(20px);
                border: 1px solid rgba(0,0,0,0.12);
                border-radius: 10px;
                padding: 4px;
                box-shadow: 0 6px 28px rgba(0,0,0,0.16), 0 1px 4px rgba(0,0,0,0.10);
                min-width: 162px;
            }
            #rightClickMenu .ctx-item {
                padding: 6px 12px;
                border-radius: 6px;
                cursor: pointer;
                display: flex;
                align-items: center;
                gap: 8px;
                font-size: 13px;
                color: #1d1d1f;
            }
            #rightClickMenu .ctx-item:hover { background: rgba(0,0,0,0.07); }
            #rightClickMenu .ctx-item.disabled { color: #aeaeb2; cursor: not-allowed; }
            #rightClickMenu .ctx-item.disabled:hover { background: transparent; }
            #rightClickMenu .ctx-sep { height: 1px; background: rgba(0,0,0,0.11); margin: 3px 8px; }

            /* ── Modal backdrop ── */
            .functMenuDimmer {
                z-index: 90;
                position: fixed;
                inset: 0;
                background: rgba(0,0,0,0.28);
                display: none;
                backdrop-filter: blur(3px);
            }

            /* ── Modal (macOS sheet style) ── */
            .funcmenu {
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 390px;
                max-width: 92vw;
                max-height: 82vh;
                overflow-y: auto;
                z-index: 100;
                background: #f5f5f7;
                border-radius: 14px;
                padding: 0;
                display: none;
                box-shadow: 0 20px 60px rgba(0,0,0,0.28);
            }
            .funcmenu-title {
                padding: 18px 22px 14px;
                font-size: 15px;
                font-weight: 600;
                text-align: center;
                color: #1d1d1f;
                border-bottom: 1px solid rgba(0,0,0,0.1);
            }
            .funcmenu-body { padding: 18px 22px; }
            .funcmenuBottom {
                display: flex;
                border-top: 1px solid rgba(0,0,0,0.1);
            }
            .mac-btn {
                flex: 1;
                padding: 12px;
                text-align: center;
                cursor: pointer;
                font-size: 14px;
                border: none;
                background: transparent;
                font-family: inherit;
                color: #007AFF;
                border-right: 1px solid rgba(0,0,0,0.1);
                transition: background 0.1s;
            }
            .mac-btn:last-child { border-right: none; }
            .mac-btn.danger  { color: #ff3b30; font-weight: 600; }
            .mac-btn.primary { font-weight: 600; }
            .mac-btn:hover   { background: rgba(0,0,0,0.05); }

            /* ── Warning banner ── */
            .warning-banner {
                background: #fff3cd;
                border-radius: 8px;
                padding: 10px 13px;
                font-size: 12px;
                margin-bottom: 14px;
                color: #664d03;
                line-height: 1.5;
            }

            /* ── Form ── */
            .form-field { margin-bottom: 14px; }
            .form-label { display: block; font-weight: 600; font-size: 12px; margin-bottom: 7px; color: #1d1d1f; }
            .radio-group { display: flex; flex-direction: column; gap: 7px; }
            .radio-item { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
            .radio-item input { accent-color: #007AFF; cursor: pointer; }

            .info-row {
                background: rgba(0,0,0,0.05);
                border-radius: 8px;
                padding: 11px 14px;
                margin-bottom: 14px;
                font-size: 13px;
                font-weight: 500;
                color: #1d1d1f;
            }

            /* ── Mount list ── */
            #mtptlist {
                border: 1px solid rgba(0,0,0,0.12);
                border-radius: 10px;
                max-height: 220px;
                overflow-y: auto;
                background: #fff;
            }
            .mountpt {
                padding: 9px 14px;
                cursor: pointer;
                border-bottom: 1px solid rgba(0,0,0,0.06);
                font-size: 13px;
                transition: background 0.1s;
            }
            .mountpt:last-child { border-bottom: none; }
            .mountpt:hover { background: rgba(0,122,255,0.06); }
            .mountpt.selected { background: rgba(0,122,255,0.12); color: #007AFF; }

            .fluid-input {
                width: 100%;
                padding: 6px 10px;
                border: 1px solid rgba(0,0,0,0.18);
                border-radius: 6px;
                font-size: 13px;
                font-family: inherit;
                margin-top: 6px;
                background: #fff;
            }
            .fluid-input:focus {
                outline: none;
                border-color: #007AFF;
                box-shadow: 0 0 0 2.5px rgba(0,122,255,0.28);
            }

            /* ── Loader ── */
            #loaderUI {
                position: fixed;
                inset: 0;
                background: rgba(255,255,255,0.55);
                backdrop-filter: blur(8px);
                display: none;
                z-index: 300;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                gap: 12px;
            }
            #loaderUI.active { display: flex; }
            .loader-spinner {
                width: 24px;
                height: 24px;
                border: 2.5px solid rgba(0,0,0,0.1);
                border-top-color: #007AFF;
                border-radius: 50%;
                animation: spin 0.72s linear infinite;
            }
            @keyframes spin { to { transform: rotate(360deg); } }
            .loader-text { font-size: 13px; color: #6e6e73; }

            /* ── Dark theme ── */
            body.dark {
                background: #000;
                color: #f2f2f7;
            }
            body.dark .sidebar {
                background: rgba(28,28,30,0.97);
                border-right-color: rgba(255,255,255,0.1);
            }
            body.dark .sidebar-header { color: #98989d; }
            body.dark .sidebar-item:hover { background: rgba(255,255,255,0.07); }
            body.dark .sidebar-item.active { background: #0a84ff; }
            body.dark .sidebar-item-sub { color: #98989d; }

            body.dark .disk-header-card,
            body.dark .partition-card {
                background: #1c1c1e;
                box-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 1px 8px rgba(0,0,0,0.3);
            }
            body.dark .disk-header-name,
            body.dark .stat-value { color: #f2f2f7; }
            body.dark .disk-header-meta,
            body.dark .stat-label,
            body.dark .legend-item { color: #98989d; }
            body.dark .storage-bar { background: #3a3a3c; }
            body.dark .disk-header-stats { border-top-color: rgba(255,255,255,0.08); }

            body.dark .partition-card-header {
                background: #2c2c2e;
                color: #98989d;
                border-bottom-color: rgba(255,255,255,0.07);
            }
            body.dark .partition-table th {
                background: #2c2c2e;
                color: #98989d;
                border-bottom-color: rgba(255,255,255,0.07);
            }
            body.dark .partition-table td { border-bottom-color: rgba(255,255,255,0.05); }
            body.dark .partition-table tbody tr:hover  { background: rgba(10,132,255,0.12); }
            body.dark .partition-table tbody tr.focusedPart { background: rgba(10,132,255,0.2); }
            body.dark .mini-bar { background: rgba(255,255,255,0.12); }

            body.dark .empty-state img { opacity: 0.2; }
            body.dark .empty-state { color: #636366; }

            body.dark #rightClickMenu {
                background: rgba(40,40,42,0.97);
                border-color: rgba(255,255,255,0.12);
            }
            body.dark #rightClickMenu .ctx-item { color: #f2f2f7; }
            body.dark #rightClickMenu .ctx-item:hover { background: rgba(255,255,255,0.1); }
            body.dark #rightClickMenu .ctx-sep { background: rgba(255,255,255,0.1); }

            body.dark .funcmenu { background: #2c2c2e; }
            body.dark .funcmenu-title {
                color: #f2f2f7;
                border-bottom-color: rgba(255,255,255,0.1);
            }
            body.dark .funcmenuBottom { border-top-color: rgba(255,255,255,0.1); }
            body.dark .mac-btn { border-right-color: rgba(255,255,255,0.1); color: #0a84ff; }
            body.dark .mac-btn.danger { color: #ff453a; }
            body.dark .mac-btn.primary { color: #0a84ff; }
            body.dark .mac-btn:hover { background: rgba(255,255,255,0.06); }

            body.dark .warning-banner { background: #3a2900; color: #ffd60a; }
            body.dark .info-row { background: rgba(255,255,255,0.08); color: #f2f2f7; }
            body.dark .form-label { color: #f2f2f7; }

            body.dark #mtptlist {
                background: #1c1c1e;
                border-color: rgba(255,255,255,0.12);
            }
            body.dark .mountpt { border-bottom-color: rgba(255,255,255,0.06); color: #f2f2f7; }
            body.dark .mountpt:hover    { background: rgba(10,132,255,0.1); }
            body.dark .mountpt.selected { background: rgba(10,132,255,0.22); color: #0a84ff; }

            body.dark .fluid-input {
                background: #3a3a3c;
                border-color: rgba(255,255,255,0.18);
                color: #f2f2f7;
            }
            body.dark .fluid-input:focus {
                border-color: #0a84ff;
                box-shadow: 0 0 0 2.5px rgba(10,132,255,0.35);
            }
            body.dark #loaderUI { background: rgba(0,0,0,0.6); }
            body.dark .loader-text { color: #98989d; }
            body.dark .loader-spinner { border-color: rgba(255,255,255,0.1); border-top-color: #0a84ff; }
        </style>
    </head>
    <body>

        <!-- ── Main layout ── -->
        <div class="main-layout">

        <!-- ── Sidebar ── -->
        <div class="sidebar">
            <div class="sidebar-header" locale="diskmg/sidebar-header">Disks</div>
            <div class="sidebar-list" id="sidebarList">
                <div class="sidebar-item active">
                    <img class="sidebar-item-icon" src="../../img/system/drive.svg" alt="">
                    <div class="sidebar-item-text">
                        <div class="sidebar-item-name" locale="diskmg/loading">Loading…</div>
                        <div class="sidebar-item-sub">&nbsp;</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- ── Detail panel ── -->
        <div class="detail-panel" id="detailPanel">
            <div class="empty-state">
                <img src="../../img/system/drive.svg" alt="">
                <div class="empty-state-text" locale="diskmg/select-disk">Select a disk to view details</div>
            </div>
        </div>

        </div><!-- /.main-layout -->

        <!-- ── Context menu ── -->
        <div id="rightClickMenu" style="display:none;">
            <div id="formatDisk" class="ctx-item" onclick="toggleFormatInterface(this);">
                <i class="erase icon"></i> <span locale="diskmg/erase">Erase…</span>
            </div>
            <div class="ctx-sep"></div>
            <div id="mtbtn" class="ctx-item" onclick="toggleMount(this);">
                <i class="plug icon"></i> Mount
            </div>
        </div>

        <!-- ── Format dialog ── -->
        <div id="formatOptions" class="funcmenu">
            <div class="funcmenu-title" locale="diskmg/erase-title">Erase Partition</div>
            <div class="funcmenu-body">
                <div class="warning-banner" locale="diskmg/erase-warning">
                    ⚠&nbsp; This will permanently erase all data on the selected partition.
                    Back up important files before continuing.
                </div>
                <div class="info-row" id="selectedDiskDisplay">/dev/sda1</div>
                <div class="form-field">
                    <label class="form-label" locale="diskmg/format-label">Format</label>
                    <div class="radio-group">
                        <label class="radio-item"><input id="ext4" type="radio" name="format" checked> EXT4</label>
                        <label class="radio-item"><input id="ntfs" type="radio" name="format"> NTFS</label>
                        <label class="radio-item"><input id="vfat" type="radio" name="format"> VFAT</label>
                    </div>
                </div>
            </div>
            <div class="funcmenuBottom">
                <button class="mac-btn" onclick="hideAllFuncMenu();" locale="diskmg/cancel">Cancel</button>
                <button class="mac-btn danger" onclick="formatThisDev();" locale="diskmg/erase-btn">Erase</button>
            </div>
        </div>

        <!-- ── Mount dialog ── -->
        <div id="mountOptions" class="funcmenu">
            <div class="funcmenu-title" locale="diskmg/mount-title">Mount Drive</div>
            <div class="funcmenu-body">
                <p style="color:#6e6e73;font-size:12px;margin:0 0 12px;" locale="diskmg/mount-desc">Select a mount point for this device.</p>
                <div id="mtptlist">
                    <div class="mountpt userdefine" onclick="selectThis(this);">
                        <div style="font-weight:600;font-size:12px;" locale="diskmg/custom-mpt">Custom Mount Point</div>
                        <input id="userDefinedMountPoint" class="fluid-input" type="text" placeholder="diskmg/mpt-placeholder">
                    </div>
                </div>
            </div>
            <div class="funcmenuBottom">
                <button class="mac-btn" onclick="hideAllFuncMenu();" locale="diskmg/cancel">Cancel</button>
                <button class="mac-btn primary" onclick="mountThisDev();" locale="diskmg/mount">Mount</button>
            </div>
        </div>

        <!-- ── Loader ── -->
        <div id="loaderUI">
            <div class="loader-spinner"></div>
            <div class="loader-text" locale="diskmg/waiting">Waiting for system response…</div>
        </div>

        <!-- ── Backdrop ── -->
        <div class="functMenuDimmer" onclick="hideAllFuncMenu();"></div>

        <script>
            var mode = "linux";
            var viewMode = "human";
            var diskInformation;
            var volumeData = null;
            var formatPendingDevInfo;
            var selectedDiskKey = null;
            var appLocale = NewAppLocale();

            /* Partition segment colors — macOS palette */
            var SEG_COLORS = ["#007AFF","#34c759","#ff9500","#af52de","#ff2d55","#5ac8fa","#ffcc00","#ff6b35"];

            appLocale.init("../locale/diskmg.json", function(){
                appLocale.translate();
                $.get(ao_root + "system/disk/diskmg/platform", function(data){
                    mode = (data === "windows") ? "windows" : "linux";
                    initData();
                    initMountPointList();
                });
            });

            // ── Helpers ──────────────────────────────────────────────────────

            function hideAllFuncMenu(){
                $(".funcmenu").fadeOut("fast");
                $(".functMenuDimmer").fadeOut("fast");
            }

            function hideRightclickMenu(){ $("#rightClickMenu").hide(); }

            function selectThis(el){
                $(".mountpt.selected").removeClass("selected");
                $(el).addClass("selected");
            }

            function bytesToSize(bytes){
                if (viewMode === "human"){
                    var sizes = ["Bytes","KB","MB","GB","TB"];
                    if (bytes == 0) return "0 Byte";
                    var i = Math.floor(Math.log(bytes) / Math.log(1024));
                    return Math.round(bytes / Math.pow(1024, i) * 100) / 100 + " " + sizes[i];
                }
                return bytes + " B";
            }

            // ── Mount point list ─────────────────────────────────────────────

            function initMountPointList(){
                $.get(ao_root + "system/disk/diskmg/mpt", function(data){
                    if (data == null) return;
                    data.forEach(function(mpt){
                        $("#mtptlist").prepend(
                            "<div class='mountpt' onclick='selectThis(this);' ondblclick='mountThisDev(this)'>" + mpt + "</div>"
                        );
                    });
                });
            }

            // ── Format ───────────────────────────────────────────────────────

            function toggleFormatInterface(btnObject){
                if ($(btnObject).hasClass("disabled")) return;
                var diskInfo = $(".focusedPart").attr("metadata");
                diskInfo = ao_module_utils.attrToObject(diskInfo);
                formatPendingDevInfo = diskInfo;
                $("#selectedDiskDisplay").text(diskInfo[0] + " (" + bytesToSize(parseInt(diskInfo[5])) + ")");
                $(".functMenuDimmer").fadeIn("fast");
                $("#formatOptions").fadeIn("fast");
                hideRightclickMenu();
            }

            function formatThisDev(){
                var targetFormat = $("input[name='format']:checked").attr("id");
                var targetDisk   = formatPendingDevInfo;
                if (!targetFormat) return;
                if (!confirm(appLocale.getString("diskmg/confirm-wipe", "THIS OPERATION WILL WIPE ALL DATA ON /dev/") + targetDisk[0] + appLocale.getString("diskmg/confirm-suffix", ". ARE YOU SURE?"))) return;
                $("#formatOptions").fadeOut("fast");
                $(".functMenuDimmer").fadeOut("fast");
                $("#loaderUI").addClass("active");
                $.ajax({
                    url: ao_root + "system/disk/diskmg/format",
                    data: { dev: targetDisk[0], format: targetFormat },
                    method: "POST",
                    success: function(data){
                        if (data.error !== undefined) alert(data.error);
                        initData();
                        $("#loaderUI").removeClass("active");
                    }
                });
            }

            // ── Mount / Unmount ──────────────────────────────────────────────

            function toggleMount(btnObject){
                if ($(btnObject).hasClass("disabled")) return;
                var diskInfo = $(".focusedPart").attr("metadata");
                diskInfo = ao_module_utils.attrToObject(diskInfo);
                hideRightclickMenu();
                if (diskInfo[3] === false || diskInfo[3] === "false"){
                    $(".functMenuDimmer").fadeIn("fast");
                    $("#mountOptions").fadeIn("fast");
                } else {
                    $("#loaderUI").addClass("active");
                    $.get(ao_root + "system/disk/diskmg/mount?dev=" + diskInfo[0] +
                          "&format=" + diskInfo[2] + "&mnt=" + diskInfo[1] + "&umount=true",
                        function(data){
                            initData();
                            $("#loaderUI").removeClass("active");
                        }
                    );
                }
            }

            function mountThisDev(object){
                if (object != null){
                    $(".mountpt.selected").removeClass("selected");
                    $(object).addClass("selected");
                }
                var selectedMpt = $(".mountpt.selected");
                var mountPoint  = selectedMpt.text().trim();
                if (selectedMpt.hasClass("userdefine")){
                    mountPoint = $("#userDefinedMountPoint").val();
                }
                $("#loaderUI").addClass("active");
                $("#mountOptions").fadeOut("fast");
                $(".functMenuDimmer").fadeOut("fast");
                var diskInfo = $(".focusedPart").attr("metadata");
                diskInfo = ao_module_utils.attrToObject(diskInfo);
                $.get(ao_root + "system/disk/diskmg/mount?dev=" + diskInfo[0] +
                      "&format=" + diskInfo[2] + "&mnt=" + mountPoint, function(data){
                    if (data.error != null){
                        $("#loaderUI").removeClass("active");
                        alert(data.error);
                        return;
                    }
                    initData();
                    $("#loaderUI").removeClass("active");
                });
            }

            // ── Data fetch ───────────────────────────────────────────────────

            function initData(){
                $.when(
                    $.get(ao_root + "system/disk/diskmg/view"),
                    $.get(ao_root + "system/disk/diskmg/view?partition=true")
                ).done(function(viewResp, partResp){
                    if (mode === "windows"){
                        processWindowsData(viewResp[0], partResp[0]);
                    } else {
                        processLinuxData(viewResp[0], partResp[0]);
                    }
                });
            }

            function processWindowsData(viewData, partData){
                var volMap = {};
                if (!viewData.error){
                    for (var i = 0; i < viewData.length; i++){
                        var d = viewData[i];
                        /* view API returns "C:\" but partition API returns "C:" — normalise */
                        var volKey = String(d[0]).replace(/\\+$/, '');
                        volMap[volKey] = { free: d[5], total: d[6] };
                    }
                }
                var disks = {};
                for (var i = 0; i < partData.length; i++){
                    var p      = partData[i];
                    var diskID = p[0].replace(/\\+.+\\/, "");
                    if (disks[diskID] === undefined){
                        disks[diskID] = {
                            partitionsTotalSize: p[14],
                            partitionNames:  [p[16]],
                            partitionID:     [p[9]],
                            partitionVolume: [p[14]],
                            Type:    [p[5]],
                            Mounted: [p[4] === "True"],
                            Format:  [p[12]]
                        };
                    } else {
                        disks[diskID].partitionsTotalSize = parseInt(disks[diskID].partitionsTotalSize) + parseInt(p[14]);
                        disks[diskID].partitionVolume.push(p[14]);
                        disks[diskID].partitionNames.push(p[16]);
                        disks[diskID].partitionID.push(p[9]);
                        disks[diskID].Type.push(p[5]);
                        disks[diskID].Format.push(p[12]);
                        disks[diskID].Mounted.push(p[4] === "True");
                    }
                }
                diskInformation = disks;
                volumeData      = volMap;
                buildSidebar();
            }

            function processLinuxData(viewData, partData){
                var usageMap = {};
                if (!viewData.error && viewData[2]){
                    for (var i = 0; i < viewData[2].length; i++){
                        var row = viewData[2][i];
                        usageMap[row[5]] = { usedPct: parseInt((row[4] || "0%").replace("%","")) };
                    }
                }
                var disks    = {};
                var diskInfo = partData[0]["blockdevices"];
                for (var i = 0; i < diskInfo.length; i++){
                    var thisDisk = diskInfo[i];
                    var diskID   = thisDisk["name"];
                    if (thisDisk["children"] === undefined || thisDisk["children"] === null){
                        var sz = thisDisk["size"] || 0;
                        disks[diskID] = {
                            partitionsTotalSize: sz,
                            partitionNames:  [""],
                            partitionID:     [thisDisk["name"] || "✖"],
                            partitionVolume: [sz],
                            Type:    [thisDisk["type"]],
                            Mounted: [thisDisk["mountpoint"] !== null],
                            Format:  ["raw"]
                        };
                        continue;
                    }
                    for (var j = 0; j < thisDisk["children"].length; j++){
                        var part = thisDisk["children"][j];
                        var fmts = partData[1]["blockdevices"][i]["children"][j];
                        if (disks[diskID] === undefined){
                            disks[diskID] = {
                                partitionsTotalSize: part["size"],
                                partitionNames:  [part["mountpoint"]],
                                partitionID:     [part["name"]],
                                partitionVolume: [part["size"]],
                                Type:    [part["type"]],
                                Mounted: [part["mountpoint"] != ""],
                                Format:  [fmts["fstype"]]
                            };
                        } else {
                            disks[diskID].partitionsTotalSize = parseInt(disks[diskID].partitionsTotalSize) + parseInt(part["size"]);
                            disks[diskID].partitionVolume.push(part["size"]);
                            disks[diskID].partitionNames.push(part["mountpoint"]);
                            disks[diskID].partitionID.push(part["name"]);
                            disks[diskID].Type.push(part["type"]);
                            disks[diskID].Format.push(fmts["fstype"]);
                            disks[diskID].Mounted.push(part["mountpoint"] !== "");
                        }
                    }
                }
                diskInformation = disks;
                volumeData      = usageMap;
                buildSidebar();
            }

            // ── Sidebar ──────────────────────────────────────────────────────

            function buildSidebar(){
                var disks = diskInformation;
                var keys  = Object.keys(disks).sort();
                $("#sidebarList").html("");

                for (var i = 0; i < keys.length; i++){
                    var key  = keys[i];
                    var di   = disks[key];
                    var total = bytesToSize(parseInt(di.partitionsTotalSize));
                    var typeShort = (di.Type[0] || "disk").split(" ")[0];

                    var allOn  = di.Mounted.every(function(m){ return m === true;  });
                    var allOff = di.Mounted.every(function(m){ return m === false; });
                    var statusLabel = allOn ? appLocale.getString("diskmg/mounted", "Mounted") : allOff ? appLocale.getString("diskmg/not-mounted-s", "Not mounted") : appLocale.getString("diskmg/partial", "Partial");

                    (function(k){
                        var itemHtml =
                            "<div class='sidebar-item' data-diskkey='" + k + "' onclick='selectDisk(\"" + k + "\")'>" +
                                "<img class='sidebar-item-icon' src='../../img/system/drive.svg' alt=''>" +
                                "<div class='sidebar-item-text'>" +
                                    "<div class='sidebar-item-name'>" + k + "</div>" +
                                    "<div class='sidebar-item-sub'>" + total + " &middot; " + statusLabel + "</div>" +
                                "</div>" +
                            "</div>";
                        $("#sidebarList").append(itemHtml);
                    })(key);
                }

                /* restore or auto-select first disk */
                if (selectedDiskKey && disks[selectedDiskKey]){
                    selectDisk(selectedDiskKey);
                } else if (keys.length > 0){
                    selectDisk(keys[0]);
                }
            }

            function selectDisk(key){
                selectedDiskKey = key;
                $(".sidebar-item").removeClass("active");
                $(".sidebar-item[data-diskkey='" + key + "']").addClass("active");
                renderDiskDetail(key);
            }

            // ── Detail view ──────────────────────────────────────────────────

            function renderDiskDetail(key){
                var di    = diskInformation[key];
                var total = parseInt(di.partitionsTotalSize);

                var allOn  = di.Mounted.every(function(m){ return m === true;  });
                var allOff = di.Mounted.every(function(m){ return m === false; });
                var mountLabel = allOn ? appLocale.getString("diskmg/mounted", "Mounted") : allOff ? appLocale.getString("diskmg/not-mounted", "Not Mounted") : appLocale.getString("diskmg/partially", "Partially Mounted");
                var typeShort  = (di.Type[0] || "Disk").split(" ")[0];

                /* ── Colored storage bar ── */
                var barSegs    = "";
                var legendHtml = "";

                for (var k = 0; k < di.partitionID.length; k++){
                    var pvol    = parseInt(di.partitionVolume[k]);
                    var pct     = (total > 0) ? (pvol / total * 100).toFixed(3) : 0;
                    var color   = (pvol === 0) ? "#e5e5ea" : SEG_COLORS[k % SEG_COLORS.length];
                    var partLabel = di.partitionID[k] || appLocale.getString("diskmg/unallocated", "Unallocated");

                    barSegs   += "<div class='storage-bar-seg' style='width:" + pct + "%;background:" + color + ";'></div>";
                    legendHtml += "<div class='legend-item'>" +
                                      "<div class='legend-dot' style='background:" + color + ";'></div>" +
                                      partLabel + " (" + bytesToSize(pvol) + ")" +
                                  "</div>";
                }

                /* ── Partition table rows ── */
                var tableRows = "";
                for (var k = 0; k < di.partitionID.length; k++){
                    var pvol   = parseInt(di.partitionVolume[k]);
                    var pname  = di.partitionNames[k];
                    var pid    = di.partitionID[k];
                    var pfmt   = di.Format[k] || "N/A";
                    var pmnt   = di.Mounted[k];
                    var color  = (pvol === 0) ? "#aeaeb2" : SEG_COLORS[k % SEG_COLORS.length];

                    var dotCls      = "dot-mounted";
                    var statusLabel = appLocale.getString("diskmg/mounted", "Mounted");
                    var isUnalloc   = false;

                    if (pvol === 0){
                        dotCls      = "dot-unalloc";
                        statusLabel = appLocale.getString("diskmg/unallocated", "Unallocated");
                        pname       = "—";
                        pfmt        = "—";
                        isUnalloc   = true;
                    } else if (!pmnt){
                        dotCls      = "dot-unmounted";
                        statusLabel = appLocale.getString("diskmg/not-mounted", "Not Mounted");
                        if (!pname || pname === ""){
                            pname = (mode === "linux" && di.Format[k] === "raw") ? appLocale.getString("diskmg/unallocated", "Unallocated") : "—";
                        }
                    } else {
                        if (!pname || pname === ""){
                            pname = (mode === "windows") ? appLocale.getString("diskmg/local-disk", "Local Disk") : "—";
                        }
                    }

                    /* usage bar */
                    var usedPct = 0;
                    if (!isUnalloc && pmnt){
                        if (mode === "linux" && volumeData && volumeData[di.partitionNames[k]]){
                            usedPct = volumeData[di.partitionNames[k]].usedPct || 0;
                        } else if (mode === "windows" && volumeData && volumeData[pid]){
                            var vd = volumeData[pid];
                            if (vd && vd.total > 0) usedPct = Math.round((1 - vd.free / vd.total) * 100);
                        }
                    }
                    var usedDisp = (!isUnalloc && pmnt) ? usedPct + "%" : "—";
                    var barColor = (usedPct >= 90) ? "#ff3b30" : color;
                    var miniBar  = (!isUnalloc && pmnt)
                        ? "<div class='mini-bar'><div class='mini-bar-fill' style='width:" + usedPct + "%;background:" + barColor + ";'></div></div>"
                        : "";

                    var meta = ao_module_utils.objectToAttr([pid, pname, pfmt, pmnt, di.Type[k], pvol]);

                    tableRows +=
                        "<tr class='part-row' metadata='" + meta + "'>" +
                            "<td><span class='part-color-dot' style='background:" + color + ";'></span>" + pid + "</td>" +
                            "<td>" + (pname !== "—" ? pname : "<span style='color:#aeaeb2'>—</span>") + "</td>" +
                            "<td>" + pfmt + "</td>" +
                            "<td>" + bytesToSize(pvol) + "</td>" +
                            "<td><span class='status-badge'><span class='status-dot " + dotCls + "'></span>" + statusLabel + "</span></td>" +
                            "<td>" + usedDisp + miniBar + "</td>" +
                        "</tr>";
                }

                var mountColLabel = (mode === "windows") ? appLocale.getString("diskmg/col-name", "Name") : appLocale.getString("diskmg/col-mountpt", "Mount Point");

                var html =
                    "<div class='disk-header-card'>" +
                        "<img class='disk-header-icon' src='../../img/system/drive.svg' alt='disk'>" +
                        "<div class='disk-header-info'>" +
                            "<div class='disk-header-name'>" + key + "</div>" +
                            "<div class='disk-header-meta'>" + typeShort + " &middot; " + mountLabel + "</div>" +
                            "<div class='storage-bar'>" + barSegs + "</div>" +
                            "<div class='storage-bar-legend'>" + legendHtml + "</div>" +
                            "<div class='disk-header-stats'>" +
                                "<div><div class='stat-label'>" + appLocale.getString("diskmg/capacity", "Capacity") + "</div><div class='stat-value'>" + bytesToSize(total) + "</div></div>" +
                                "<div><div class='stat-label'>" + appLocale.getString("diskmg/partitions", "Partitions") + "</div><div class='stat-value'>" + di.partitionID.length + "</div></div>" +
                            "</div>" +
                        "</div>" +
                    "</div>" +
                    "<div class='partition-card'>" +
                        "<div class='partition-card-header'>" + appLocale.getString("diskmg/parts-volumes", "Partitions &amp; Volumes") + "</div>" +
                        "<table class='partition-table'>" +
                            "<thead><tr>" +
                                "<th>" + appLocale.getString("diskmg/col-device", "Device") + "</th>" +
                                "<th>" + mountColLabel + "</th>" +
                                "<th>" + appLocale.getString("diskmg/format-label-col", "Format") + "</th>" +
                                "<th>" + appLocale.getString("diskmg/col-size", "Size") + "</th>" +
                                "<th>" + appLocale.getString("diskmg/col-status", "Status") + "</th>" +
                                "<th>" + appLocale.getString("diskmg/col-usage", "Usage") + "</th>" +
                            "</tr></thead>" +
                            "<tbody>" + tableRows + "</tbody>" +
                        "</table>" +
                    "</div>";

                $("#detailPanel").html(html);
                attachPartitionEvents();
            }

            // ── Partition row events ─────────────────────────────────────────

            function attachPartitionEvents(){
                $(".part-row").on("click", function(){
                    $(".focusedPart").removeClass("focusedPart");
                    $(this).addClass("focusedPart");
                });

                $(".part-row").contextmenu(function(e){
                    if (mode === "windows") return true;

                    $(".focusedPart").removeClass("focusedPart");
                    $(this).addClass("focusedPart");

                    var px    = e.clientX;
                    var py    = e.clientY;
                    var menuH = $("#rightClickMenu").outerHeight() || 80;
                    var top   = py + 4;
                    if (top + menuH > window.innerHeight) top = py - menuH - 4;
                    if (typeof ao_module_virtualDesktop !== "undefined" && ao_module_virtualDesktop) top -= 50;

                    $("#rightClickMenu").css({ left: px + "px", top: top + "px" }).show();

                    var info      = ao_module_utils.attrToObject($(this).attr("metadata"));
                    var isMounted = (info[3] === true || info[3] === "true");

                    if (isMounted){
                        var isSystem = (info[1] === "/" || info[1] === "/boot");
                        if (isSystem){
                            $("#mtbtn").addClass("disabled");
                            $("#formatDisk").addClass("disabled");
                        } else {
                            $("#mtbtn").removeClass("disabled");
                            $("#formatDisk").removeClass("disabled");
                        }
                        $("#mtbtn").html('<i class="eject icon"></i> ' + appLocale.getString("diskmg/unmount", "Unmount"));
                    } else {
                        $("#mtbtn").html('<i class="plug icon"></i> ' + appLocale.getString("diskmg/mount", "Mount")).removeClass("disabled");
                        $("#formatDisk").removeClass("disabled");
                    }
                    return false;
                });
            }

            $(document).on("click", function(e){
                if (!$(e.target).closest("#rightClickMenu").length) hideRightclickMenu();
            });

            // ── Theme ────────────────────────────────────────────────────────

            function applyTheme(theme){
                document.body.classList.toggle("dark", theme === "dark");
            }

            if (typeof ao_module_getSystemThemeColor === "function"){
                ao_module_getSystemThemeColor(function(c){
                    applyTheme(c === "whiteTheme" ? "light" : "dark");
                });
            }

            window.desktopThemeChanged = function(theme){
                applyTheme(theme);
            };
        </script>
    </body>
</html>