appclean 2.0.2 → 2.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,11 +1,13 @@
1
- name: Publish to npm
1
+ name: Publish to npm & Create Release
2
2
 
3
3
  on:
4
4
  push:
5
5
  tags:
6
- - 'v*'
7
- release:
8
- types: [published]
6
+ - 'v*.*.*'
7
+
8
+ permissions:
9
+ contents: write
10
+ packages: write
9
11
 
10
12
  jobs:
11
13
  publish:
@@ -31,31 +33,72 @@ jobs:
31
33
  - name: Run tests (if available)
32
34
  run: npm test --if-present || true
33
35
 
36
+ - name: Extract version from tag
37
+ id: version
38
+ run: echo "VERSION=${GITHUB_REF#refs/tags/v}" >> $GITHUB_OUTPUT
39
+
34
40
  - name: Publish to npm
35
41
  run: npm publish
36
42
  env:
37
43
  NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
38
44
 
45
+ - name: Generate changelog
46
+ id: changelog
47
+ run: |
48
+ # Get the previous tag
49
+ PREV_TAG=$(git describe --tags --abbrev=0 $(git rev-list --tags --skip=1 -n1) 2>/dev/null || echo "")
50
+
51
+ if [ -z "$PREV_TAG" ]; then
52
+ CHANGELOG="Initial release"
53
+ else
54
+ CHANGELOG=$(git log $PREV_TAG..HEAD --pretty=format:"- %h: %s" | head -20)
55
+ fi
56
+
57
+ # Save to output file (handle multiline)
58
+ echo "CHANGELOG<<EOF" >> $GITHUB_OUTPUT
59
+ echo "$CHANGELOG" >> $GITHUB_OUTPUT
60
+ echo "EOF" >> $GITHUB_OUTPUT
61
+
39
62
  - name: Create GitHub Release
40
- if: startsWith(github.ref, 'refs/tags/v')
41
- uses: actions/create-release@v1
42
- env:
43
- GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
63
+ uses: softprops/action-gh-release@v1
44
64
  with:
45
65
  tag_name: ${{ github.ref }}
46
- release_name: AppClean ${{ github.ref }}
66
+ name: "AppClean v${{ steps.version.outputs.VERSION }}"
47
67
  body: |
48
- ## Release Notes
68
+ ## 📦 Release v${{ steps.version.outputs.VERSION }}
69
+
70
+ AppClean v${{ steps.version.outputs.VERSION }} has been published to npm!
71
+
72
+ ### 🚀 Quick Start
73
+ ```bash
74
+ npm install -g appclean@latest
75
+ ```
49
76
 
50
- AppClean ${{ github.ref }} has been published to npm!
77
+ Or upgrade your existing installation:
78
+ ```bash
79
+ appclean upgrade
80
+ ```
51
81
 
52
- 📦 **npm**: https://www.npmjs.com/package/appclean
53
- 🚀 **Install**: `npm install -g appclean@${{ github.ref }}`
82
+ ### 📝 Changes
83
+ ${{ steps.changelog.outputs.CHANGELOG }}
54
84
 
55
- This version includes all bug fixes and improvements from recent commits.
85
+ ### 📎 Links
86
+ - 📦 [npm Package](https://www.npmjs.com/package/appclean)
87
+ - 💻 [GitHub Repository](https://github.com/praveenkay/AppClean)
88
+ - 🐛 [Report Issues](https://github.com/praveenkay/AppClean/issues)
89
+
90
+ ---
91
+ Thank you for using AppClean! 🎉
56
92
  draft: false
57
93
  prerelease: false
58
94
 
95
+ - name: Notify success
96
+ if: success()
97
+ run: |
98
+ echo "✅ Successfully published AppClean v${{ steps.version.outputs.VERSION }}"
99
+ echo "📦 npm: https://www.npmjs.com/package/appclean/v/${{ steps.version.outputs.VERSION }}"
100
+ echo "🔖 Release: https://github.com/praveenkay/AppClean/releases/tag/v${{ steps.version.outputs.VERSION }}"
101
+
59
102
  - name: Notify on failure
60
103
  if: failure()
61
- run: echo "❌ Failed to publish AppClean to npm"
104
+ run: echo "❌ Failed to publish AppClean v${{ steps.version.outputs.VERSION }}"
package/RELEASE_GUIDE.md CHANGED
@@ -1,6 +1,27 @@
1
1
  # AppClean Release Guide
2
2
 
3
- This guide explains how to release new versions of AppClean to npm and GitHub.
3
+ This guide explains how to release new versions of AppClean to npm and GitHub with **full automation**.
4
+
5
+ ## ⚡ CRITICAL: Setup Required (One-time)
6
+
7
+ Before you can use automatic releases, you MUST set up **NPM_TOKEN** in GitHub Secrets:
8
+
9
+ ### 1. Get NPM Token
10
+ ```bash
11
+ npm token create --read-only
12
+ ```
13
+ Visit: https://www.npmjs.com/settings/YOUR_USERNAME/tokens
14
+
15
+ ### 2. Add to GitHub Secrets
16
+ 1. Go to: https://github.com/praveenkay/AppClean/settings/secrets/actions
17
+ 2. Click **"New repository secret"**
18
+ 3. Name: `NPM_TOKEN`
19
+ 4. Value: Paste your npm token
20
+ 5. Click **"Add secret"**
21
+
22
+ ⚠️ **Without this, automatic publishing will fail!**
23
+
24
+ ---
4
25
 
5
26
  ## Quick Start
6
27
 
@@ -0,0 +1,176 @@
1
+ # AppClean Release - Quick Start
2
+
3
+ ## 🚀 Release in 5 Minutes
4
+
5
+ This is the fastest way to release a new version to both npm and GitHub.
6
+
7
+ ### Step 1: Update Version (30 seconds)
8
+ ```bash
9
+ # Update package.json
10
+ sed -i '' 's/"version": "2.0.2"/"version": "2.0.3"/' package.json
11
+
12
+ # Update src/index.ts
13
+ sed -i '' "s/const VERSION = '2.0.2'/const VERSION = '2.0.3'/" src/index.ts
14
+
15
+ # Verify
16
+ grep "version" package.json
17
+ grep "VERSION = " src/index.ts
18
+ ```
19
+
20
+ ### Step 2: Build & Test (1 minute)
21
+ ```bash
22
+ npm run build
23
+ npm test --if-present || true
24
+ ```
25
+
26
+ ### Step 3: Commit (30 seconds)
27
+ ```bash
28
+ git add package.json src/index.ts
29
+ git commit -m "chore: Bump version to 2.0.3"
30
+ ```
31
+
32
+ ### Step 4: Release (1 minute)
33
+ ```bash
34
+ git tag -a v2.0.3 -m "Release v2.0.3: Brief description here"
35
+ git push origin main
36
+ git push origin v2.0.3
37
+ ```
38
+
39
+ ---
40
+
41
+ ## ✨ What Happens Automatically
42
+
43
+ When you push the tag, GitHub Actions **automatically**:
44
+
45
+ 1. ✅ Checks out your code
46
+ 2. ✅ Sets up Node.js 20
47
+ 3. ✅ Installs dependencies
48
+ 4. ✅ Builds the project
49
+ 5. ✅ Runs tests
50
+ 6. ✅ **Publishes to npm** (using NPM_TOKEN)
51
+ 7. ✅ **Creates GitHub release** with changelog
52
+ 8. ✅ Posts success notification
53
+
54
+ **Total time**: ~3-5 minutes for the workflow to complete
55
+
56
+ ---
57
+
58
+ ## 🔍 Monitor Release
59
+
60
+ ### Watch GitHub Actions (Real-time)
61
+ ```bash
62
+ gh run list --workflow=npm-publish.yml -L 1
63
+ gh run view <run-number> --log
64
+ ```
65
+
66
+ Or visit: https://github.com/praveenkay/AppClean/actions
67
+
68
+ ### Verify npm Publication
69
+ ```bash
70
+ npm view appclean version
71
+ npm view appclean@2.0.3
72
+ ```
73
+
74
+ Or visit: https://www.npmjs.com/package/appclean
75
+
76
+ ### Verify GitHub Release
77
+ Visit: https://github.com/praveenkay/AppClean/releases
78
+
79
+ ---
80
+
81
+ ## 📋 Checklist Before Release
82
+
83
+ - [ ] Code changes tested locally
84
+ - [ ] `npm run build` succeeds
85
+ - [ ] `npm test` passes (or skipped)
86
+ - [ ] Version updated in `package.json`
87
+ - [ ] Version updated in `src/index.ts`
88
+ - [ ] Changes committed to main branch
89
+ - [ ] Ready to push tag to trigger workflow
90
+
91
+ ---
92
+
93
+ ## 🎯 Common Release Examples
94
+
95
+ ### Bug Fix Release (2.0.2 → 2.0.3)
96
+ ```bash
97
+ sed -i '' 's/"version": "2.0.2"/"version": "2.0.3"/' package.json
98
+ sed -i '' "s/const VERSION = '2.0.2'/const VERSION = '2.0.3'/" src/index.ts
99
+ npm run build
100
+ git add package.json src/index.ts
101
+ git commit -m "chore: Bump version to 2.0.3"
102
+ git tag -a v2.0.3 -m "Release v2.0.3: Bug fixes and improvements"
103
+ git push origin main && git push origin v2.0.3
104
+ ```
105
+
106
+ ### Feature Release (2.0.3 → 2.1.0)
107
+ ```bash
108
+ sed -i '' 's/"version": "2.0.3"/"version": "2.1.0"/' package.json
109
+ sed -i '' "s/const VERSION = '2.0.3'/const VERSION = '2.1.0'/" src/index.ts
110
+ npm run build
111
+ git add package.json src/index.ts
112
+ git commit -m "chore: Bump version to 2.1.0"
113
+ git tag -a v2.1.0 -m "Release v2.1.0: New features - browser auto-launch, improved detection"
114
+ git push origin main && git push origin v2.1.0
115
+ ```
116
+
117
+ ### Major Release (2.1.0 → 3.0.0)
118
+ ```bash
119
+ sed -i '' 's/"version": "2.1.0"/"version": "3.0.0"/' package.json
120
+ sed -i '' "s/const VERSION = '2.1.0'/const VERSION = '3.0.0'/" src/index.ts
121
+ npm run build
122
+ git add package.json src/index.ts
123
+ git commit -m "chore: Bump version to 3.0.0"
124
+ git tag -a v3.0.0 -m "Release v3.0.0: Major redesign - breaking changes included"
125
+ git push origin main && git push origin v3.0.0
126
+ ```
127
+
128
+ ---
129
+
130
+ ## ⚡ Status Dashboard
131
+
132
+ | Component | Status | Last Check |
133
+ |-----------|--------|-----------|
134
+ | npm Registry | ✅ Connected | 2026-03-20 |
135
+ | GitHub Secrets | ✅ NPM_TOKEN set | 2026-03-20 |
136
+ | Workflow (npm-publish.yml) | ✅ Active | 2026-03-20 |
137
+ | Test Workflow | ✅ Active | 2026-03-20 |
138
+ | Latest Release | ✅ v2.0.2 | 2026-03-20 |
139
+
140
+ ---
141
+
142
+ ## 🆘 Troubleshooting
143
+
144
+ ### Workflow Failed
145
+ 1. Check logs: `gh run view <number> --log`
146
+ 2. Common issues:
147
+ - NPM_TOKEN expired or revoked
148
+ - Tag format incorrect (must be v*.*.*)
149
+ - Build fails (`npm run build`)
150
+ - Tests fail (`npm test`)
151
+
152
+ ### Can't Push Tag
153
+ ```bash
154
+ git fetch origin --tags
155
+ git push origin v2.0.3 --force
156
+ ```
157
+
158
+ ### Version Mismatch
159
+ Make sure both files are updated:
160
+ ```bash
161
+ grep "version" package.json
162
+ grep "VERSION = " src/index.ts
163
+ ```
164
+
165
+ ---
166
+
167
+ ## 🔗 Useful Links
168
+
169
+ - 📦 npm Package: https://www.npmjs.com/package/appclean
170
+ - 🔖 GitHub Releases: https://github.com/praveenkay/AppClean/releases
171
+ - ⚙️ GitHub Actions: https://github.com/praveenkay/AppClean/actions
172
+ - 📖 Full Guide: https://github.com/praveenkay/AppClean/blob/main/RELEASE_GUIDE.md
173
+
174
+ ---
175
+
176
+ **Happy releasing! 🚀**
package/assets/logo.svg CHANGED
@@ -1,34 +1,50 @@
1
- <svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg">
2
- <!-- Background Circle -->
3
- <circle cx="120" cy="120" r="115" fill="#0f172a" stroke="#3b82f6" stroke-width="2"/>
4
-
5
- <!-- Briefcase Body -->
6
- <rect x="55" y="70" width="130" height="90" rx="8" fill="#3b82f6"/>
7
-
8
- <!-- Briefcase Handle -->
9
- <path d="M 75 70 Q 75 40 120 40 Q 165 40 165 70" stroke="#3b82f6" stroke-width="6" fill="none" stroke-linecap="round"/>
10
-
11
- <!-- Briefcase Shine/Highlight -->
12
- <rect x="60" y="75" width="50" height="20" rx="4" fill="#60a5fa" opacity="0.6"/>
13
-
14
- <!-- Checkmark -->
15
- <g transform="translate(120, 120)">
16
- <!-- Checkmark Circle Background -->
17
- <circle cx="0" cy="0" r="35" fill="#10b981" opacity="0.95"/>
18
-
19
- <!-- Checkmark -->
20
- <path d="M -15 0 L -5 10 L 18 -15" stroke="#ffffff" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
1
+ <svg width="256" height="256" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
2
+ <defs>
3
+ <linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="100%">
4
+ <stop offset="0%" style="stop-color:#3b82f6;stop-opacity:1" />
5
+ <stop offset="100%" style="stop-color:#1e40af;stop-opacity:1" />
6
+ </linearGradient>
7
+ <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
8
+ <feDropShadow dx="0" dy="4" stdDeviation="6" flood-opacity="0.15"/>
9
+ </filter>
10
+ </defs>
11
+
12
+ <!-- Background -->
13
+ <rect width="256" height="256" fill="#ffffff" rx="64"/>
14
+
15
+ <!-- Main Icon Container -->
16
+ <g filter="url(#shadow)">
17
+ <!-- Broom Handle -->
18
+ <rect x="112" y="48" width="32" height="140" rx="16" fill="url(#logoGradient)"/>
19
+
20
+ <!-- Bristles Group 1 (Left) -->
21
+ <g opacity="0.9">
22
+ <path d="M 104 170 Q 85 185 75 195" stroke="url(#logoGradient)" stroke-width="6" fill="none" stroke-linecap="round"/>
23
+ <path d="M 104 175 Q 82 195 68 210" stroke="url(#logoGradient)" stroke-width="6" fill="none" stroke-linecap="round"/>
24
+ <path d="M 104 180 Q 80 205 62 225" stroke="url(#logoGradient)" stroke-width="6" fill="none" stroke-linecap="round"/>
25
+ </g>
26
+
27
+ <!-- Bristles Group 2 (Right) -->
28
+ <g opacity="0.9">
29
+ <path d="M 152 170 Q 171 185 181 195" stroke="url(#logoGradient)" stroke-width="6" fill="none" stroke-linecap="round"/>
30
+ <path d="M 152 175 Q 174 195 188 210" stroke="url(#logoGradient)" stroke-width="6" fill="none" stroke-linecap="round"/>
31
+ <path d="M 152 180 Q 176 205 194 225" stroke="url(#logoGradient)" stroke-width="6" fill="none" stroke-linecap="round"/>
32
+ </g>
33
+
34
+ <!-- Bristles Group 3 (Center) -->
35
+ <g opacity="0.95">
36
+ <path d="M 128 170 Q 128 190 128 210" stroke="url(#logoGradient)" stroke-width="6" fill="none" stroke-linecap="round"/>
37
+ <path d="M 120 175 Q 115 195 113 215" stroke="url(#logoGradient)" stroke-width="6" fill="none" stroke-linecap="round"/>
38
+ <path d="M 136 175 Q 141 195 143 215" stroke="url(#logoGradient)" stroke-width="6" fill="none" stroke-linecap="round"/>
39
+ </g>
40
+
41
+ <!-- Checkmark (Success indicator) -->
42
+ <g transform="translate(128, 65)" fill="none" stroke="#10b981" stroke-width="8" stroke-linecap="round" stroke-linejoin="round">
43
+ <circle cx="0" cy="0" r="22" fill="#10b981" opacity="0.1" stroke="none"/>
44
+ <path d="M -8 0 L -2 7 L 10 -5"/>
45
+ </g>
46
+
47
+ <!-- Decorative Accent Line -->
48
+ <rect x="80" y="32" width="96" height="2" rx="1" fill="url(#logoGradient)" opacity="0.3"/>
21
49
  </g>
22
-
23
- <!-- Decorative Circles (Success indicators) -->
24
- <circle cx="60" cy="160" r="4" fill="#10b981" opacity="0.7"/>
25
- <circle cx="180" cy="160" r="4" fill="#10b981" opacity="0.7"/>
26
-
27
- <!-- Text: AppClean -->
28
- <text x="120" y="200" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#ffffff" text-anchor="middle" letter-spacing="1">
29
- AppClean
30
- </text>
31
-
32
- <!-- Glow Effect -->
33
- <circle cx="120" cy="120" r="115" fill="none" stroke="#3b82f6" stroke-width="1" opacity="0.2" stroke-dasharray="5,5"/>
34
50
  </svg>
package/dist/index.js CHANGED
@@ -9,7 +9,7 @@ import { showMainMenu, showAppMenu, showHeader, showHelp, } from './ui/menu.js';
9
9
  import { promptSearchQuery, promptSelectApp, promptConfirmRemoval, promptRemovalOptions, promptInstallMethodFilter, promptSortBy, displayAppDetails, promptFinalConfirmation, } from './ui/prompts.js';
10
10
  import { Logger, formatBytes } from './utils/logger.js';
11
11
  import { UpgradeManager } from './utils/upgrade.js';
12
- const VERSION = '2.0.2';
12
+ const VERSION = '2.0.3';
13
13
  async function interactiveMode() {
14
14
  showHeader();
15
15
  const detector = new Detector();
@@ -2,9 +2,11 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
6
6
  <meta name="description" content="AppClean - Intelligently remove applications and all their hidden files">
7
7
  <meta name="theme-color" content="#3b82f6">
8
+ <meta name="apple-mobile-web-app-capable" content="yes">
9
+ <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
8
10
  <title>AppClean - Application Remover</title>
9
11
 
10
12
  <!-- Styles -->
@@ -13,78 +15,130 @@
13
15
  <link rel="stylesheet" href="/static/styles/layout.css">
14
16
  <link rel="stylesheet" href="/static/styles/components.css">
15
17
  <link rel="stylesheet" href="/static/styles/animations.css">
18
+ <link rel="stylesheet" href="/static/styles/responsive.css">
16
19
  </head>
17
20
  <body>
18
21
  <!-- Root container for SPA -->
19
22
  <div id="app" class="app-root">
20
- <!-- Navbar -->
21
- <nav class="navbar" id="navbar">
22
- <div class="container-xl">
23
- <div class="flex-between">
24
- <div class="flex items-center gap-4">
25
- <h1 class="navbar-brand" id="navbar-brand">🧹 AppClean</h1>
26
- <button class="btn btn-ghost navbar-menu-toggle" id="navbar-menu-toggle" aria-label="Toggle navigation">
27
- <span class="hamburger">☰</span>
28
- </button>
29
- </div>
30
- <div class="flex items-center gap-2">
31
- <button class="btn btn-ghost btn-sm" id="theme-toggle" aria-label="Toggle dark mode">
32
- <span class="theme-icon">🌙</span>
33
- </button>
34
- </div>
23
+ <!-- Modern Navigation Header -->
24
+ <header class="app-header" id="app-header">
25
+ <div class="header-container">
26
+ <!-- Logo and Brand -->
27
+ <div class="header-brand">
28
+ <button class="sidebar-toggle" id="sidebar-toggle" aria-label="Toggle sidebar" aria-expanded="false">
29
+ <svg class="menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
30
+ <line x1="3" y1="6" x2="21" y2="6"></line>
31
+ <line x1="3" y1="12" x2="21" y2="12"></line>
32
+ <line x1="3" y1="18" x2="21" y2="18"></line>
33
+ </svg>
34
+ </button>
35
+ <a href="#/" class="logo-link" aria-label="AppClean Home">
36
+ <img src="/static/assets/logo.svg" alt="AppClean Logo" class="logo-image">
37
+ <span class="logo-text">AppClean</span>
38
+ </a>
39
+ </div>
40
+
41
+ <!-- Header Actions -->
42
+ <div class="header-actions">
43
+ <button class="btn-icon theme-toggle" id="theme-toggle" aria-label="Toggle dark mode">
44
+ <svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
45
+ <circle cx="12" cy="12" r="5"></circle>
46
+ <line x1="12" y1="1" x2="12" y2="3"></line>
47
+ <line x1="12" y1="21" x2="12" y2="23"></line>
48
+ <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
49
+ <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
50
+ <line x1="1" y1="12" x2="3" y2="12"></line>
51
+ <line x1="21" y1="12" x2="23" y2="12"></line>
52
+ <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
53
+ <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
54
+ </svg>
55
+ <svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
56
+ <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
57
+ </svg>
58
+ </button>
59
+ <div class="version-badge" id="version-badge">v2.0.2</div>
35
60
  </div>
36
61
  </div>
37
- </nav>
62
+ </header>
38
63
 
39
- <!-- Main layout -->
40
- <div class="app-layout flex">
41
- <!-- Sidebar -->
42
- <aside class="sidebar" id="sidebar">
43
- <div class="sidebar-nav">
44
- <nav class="nav-links">
45
- <a href="#/" class="nav-link active" data-view="dashboard">
46
- <span class="nav-icon">📊</span>
64
+ <!-- Main Layout Container -->
65
+ <div class="app-layout">
66
+ <!-- Sidebar Navigation -->
67
+ <aside class="sidebar" id="sidebar" aria-label="Navigation">
68
+ <nav class="sidebar-nav">
69
+ <div class="nav-items">
70
+ <a href="#/" class="nav-item active" data-view="dashboard" aria-current="page">
71
+ <span class="nav-icon">
72
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
73
+ <line x1="12" y1="2" x2="12" y2="22"></line>
74
+ <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
75
+ </svg>
76
+ </span>
47
77
  <span class="nav-label">Dashboard</span>
48
78
  </a>
49
- <a href="#/apps" class="nav-link" data-view="apps">
50
- <span class="nav-icon">📦</span>
79
+ <a href="#/apps" class="nav-item" data-view="apps">
80
+ <span class="nav-icon">
81
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
82
+ <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
83
+ <line x1="9" y1="9" x2="9" y2="9.01"></line>
84
+ <line x1="15" y1="9" x2="15" y2="9.01"></line>
85
+ <line x1="9" y1="15" x2="9" y2="15.01"></line>
86
+ <line x1="15" y1="15" x2="15" y2="15.01"></line>
87
+ </svg>
88
+ </span>
51
89
  <span class="nav-label">Apps</span>
52
90
  </a>
53
- <a href="#/settings" class="nav-link" data-view="settings">
54
- <span class="nav-icon">⚙️</span>
91
+ <a href="#/settings" class="nav-item" data-view="settings">
92
+ <span class="nav-icon">
93
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
94
+ <circle cx="12" cy="12" r="3"></circle>
95
+ <path d="M12 1v6m0 6v6M4.22 4.22l4.24 4.24m3.08 3.08l4.24 4.24M1 12h6m6 0h6M4.22 19.78l4.24-4.24m3.08-3.08l4.24-4.24M19.78 19.78l-4.24-4.24m-3.08-3.08l-4.24-4.24"></path>
96
+ </svg>
97
+ </span>
55
98
  <span class="nav-label">Settings</span>
56
99
  </a>
57
- </nav>
58
- </div>
100
+ </div>
101
+ </nav>
102
+
103
+ <!-- Sidebar Footer -->
59
104
  <div class="sidebar-footer">
60
- <a href="https://github.com/praveenkay/AppClean" target="_blank" rel="noopener" class="sidebar-link">
61
- <span class="nav-icon">💬</span>
105
+ <a href="https://github.com/praveenkay/AppClean" target="_blank" rel="noopener noreferrer" class="nav-item sidebar-link" title="View on GitHub">
106
+ <span class="nav-icon">
107
+ <svg viewBox="0 0 24 24" fill="currentColor">
108
+ <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v 3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
109
+ </svg>
110
+ </span>
62
111
  <span class="nav-label">GitHub</span>
63
112
  </a>
64
113
  </div>
65
114
  </aside>
66
115
 
67
- <!-- Main content -->
68
- <main class="main-content" id="main-content">
69
- <div class="container-xl">
70
- <!-- Pages will be rendered here -->
116
+ <!-- Main Content Area -->
117
+ <main class="main-content" id="main-content" role="main">
118
+ <div class="content-wrapper">
119
+ <!-- Page Container -->
71
120
  <div id="page-container" class="page-container">
72
- <!-- Loading skeleton -->
121
+ <!-- Loading State -->
73
122
  <div class="loading-state" id="loading-state">
74
- <div class="spinner-lg spinner"></div>
75
- <p class="text-center text-muted mt-4">Loading AppClean...</p>
123
+ <div class="spinner"></div>
124
+ <p class="loading-text">Loading AppClean...</p>
76
125
  </div>
77
126
  </div>
78
127
  </div>
79
128
  </main>
80
129
  </div>
81
130
 
82
- <!-- Modals -->
83
- <div class="modal-backdrop" id="modal-backdrop">
84
- <div class="modal" id="modal" role="dialog" aria-labelledby="modal-title">
131
+ <!-- Modal Dialog -->
132
+ <div class="modal-overlay" id="modal-overlay" role="presentation">
133
+ <div class="modal-dialog" id="modal" role="dialog" aria-modal="true" aria-labelledby="modal-title">
85
134
  <div class="modal-header">
86
135
  <h2 class="modal-title" id="modal-title">Dialog</h2>
87
- <button class="modal-close" id="modal-close" aria-label="Close dialog">&times;</button>
136
+ <button class="modal-close" id="modal-close" aria-label="Close dialog">
137
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
138
+ <line x1="18" y1="6" x2="6" y2="18"></line>
139
+ <line x1="6" y1="6" x2="18" y2="18"></line>
140
+ </svg>
141
+ </button>
88
142
  </div>
89
143
  <div class="modal-body" id="modal-body">
90
144
  <!-- Content will be rendered here -->
@@ -95,10 +149,13 @@
95
149
  </div>
96
150
  </div>
97
151
 
98
- <!-- Notifications -->
99
- <div class="notifications-container" id="notifications-container" role="region" aria-label="Notifications" aria-live="polite">
152
+ <!-- Toast Notifications -->
153
+ <div class="notifications-container" id="notifications-container" role="region" aria-label="Notifications" aria-live="polite" aria-atomic="true">
100
154
  <!-- Notifications will be rendered here -->
101
155
  </div>
156
+
157
+ <!-- Sidebar Overlay (Mobile) -->
158
+ <div class="sidebar-overlay" id="sidebar-overlay" aria-hidden="true"></div>
102
159
  </div>
103
160
 
104
161
  <!-- Scripts -->