Dev Dash

A Zero-Latency Developer New Tab Extension

Replace your Chrome new tab with a blazing-fast, keyboard-first developer dashboard

Features • Screenshots • Installation • Usage • Development • Tech Stack

📸 Screenshots

Main dashboard with clock, top sites, and omnibar

Optional widgets: Pomodoro, Notepad, Weather, and more

Customizable settings panel

✨ Features

🎯 Core Features

• ⚡ Zero Latency - Instant page load with compiled Svelte (no runtime overhead)
• ⌨️ Keyboard First - Command palette with Vim-inspired shortcuts
• 🎨 Hacker Aesthetic - GitHub Dark Dimmed theme with monospace fonts
• 🔒 Privacy Focused - 100% local storage, zero tracking, no external calls
• 🚀 Modern Stack - Built with Svelte 5 (runes), SvelteKit, TypeScript, Tailwind v4

🧩 Widgets & Components

⚡ Omnibar Commands

Type in the command bar:

Navigation: Use ↑/↓ arrow keys to browse command history

⌨️ Keyboard Shortcuts

• Ctrl/Cmd + , - Open Settings
• Escape - Close modals
• ↑ / ↓ - Navigate command history in Omnibar

🚀 Installation

Option 1: Load Unpacked (Development)

# Clone the repository
git clone https://github.com/Zayan-Mohamed/dev-dash.git
cd dev-dash

# Install dependencies (requires pnpm)
pnpm install

# Build the extension
pnpm build

# Load in Chrome:
# 1. Open chrome://extensions
# 2. Enable "Developer mode" (top-right toggle)
# 3. Click "Load unpacked"
# 4. Select the `build/` directory

Option 2: From Chrome Web Store (Coming Soon)

Download the latest .crx or .zip from Releases.

🛠️ Development

# Install dependencies
pnpm install

# Dev server (browser preview)
pnpm dev

# Build for Chrome
pnpm build

# Type checking
pnpm check

# Lint & format
pnpm lint && pnpm format

📦 Tech Stack

📁 Project Structure

src/
├── lib/
│   ├── components/       # UI components (Clock, TopSites, Omnibar)
│   ├── services/         # Chrome API wrappers
│   └── utils/            # Helper functions
├── routes/
│   ├── +layout.svelte    # Root layout
│   └── +page.svelte      # Main dashboard
└── app.css              # Global Tailwind styles

public/
├── manifest.json        # Extension manifest
└── icons/              # Extension icons

build/                  # Built extension (git-ignored)

🎨 Customization

Colors

Edit component classes or app.css. Current theme (GitHub Dark):

--bg-primary: #0d1117;
--bg-secondary: #161b22;
--border: #30363d;
--text-main: #c9d1d9;
--accent: #58a6ff;

Add Commands

In src/lib/components/Omnibar.svelte:

if (command.startsWith('npm ')) {}
  const pkg = command.slice(4);
  window.location.href = `https://npmjs.com/package/${pkg}`;
  return;
}

Clock Format

In src/routes/+page.svelte:

<Clock use24Hour={true} showGreeting={false} />

🧩 Architecture

🔧 Services Layer

• topSites.ts - Chrome topSites API wrapper with mock data fallback for development
• storage.ts - Unified storage using chrome.storage.local with localStorage fallback

🎨 Component Design (Svelte 5 Runes)

All components built with Svelte 5's new runes syntax:

• Clock.svelte - Uses $state for reactive time and $effect for interval management
• TopSites.svelte - Pure presentation component with typed $props
• Omnibar.svelte - Command parser with $state for history and input
• Settings.svelte - Modal with two-way binding to settings store
• ViewportLayout.svelte - Responsive grid system using CSS Grid

🔒 Type Safety

// Strict TypeScript configuration
- strictNullChecks: true
- noImplicitAny: true
- No any types allowed
- Interface definitions for all data structures

Example type definitions:

interface Site {
    title: string;
    url: string;
}

interface StorageData {
    settings: {
        use24Hour: boolean;
        showGreeting: boolean;
        githubUsername: string;
        customLinks: string[];
    };
}

🔍 How It Works

Build Pipeline

1. SvelteKit compiles components to vanilla JS
2. Vite bundles assets with code splitting
3. Post-build script fixes inline CSP issues
4. Manifest + icons copied to build/ directory
5. Output is a standard Manifest V3 extension

Performance Optimizations

• ⚡ No Runtime Framework - Svelte compiles to vanilla JS
• 📦 Tree-Shaking - Only imports used icons/components
• 🎯 Code Splitting - Lazy-load optional widgets
• 💾 Local-First - No network calls on initial load
• 🖼️ No Layout Shift - Fixed background color in HTML

🐛 Troubleshooting

Extension doesn't load

# Rebuild and reload
pnpm build
# Then reload extension in chrome://extensions

Top Sites not showing

• Check Chrome permissions in chrome://extensions
• Ensure topSites permission is granted

Build errors

# Clear cache and reinstall
rm -rf node_modules .svelte-kit build
pnpm install
pnpm build

🗺️ Roadmap

• Chrome Web Store release
• Firefox/Edge support
• Custom widget API
• Cloud sync (optional)
• Theme customization UI
• Import/Export settings
• Internationalization (i18n)

📖 Resources

• Svelte 5 Documentation
• SvelteKit Documentation
• Chrome Extension Docs
• Tailwind CSS v4 Beta
• TypeScript Handbook

🤝 Contributing

Contributions, issues, and feature requests are welcome!

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Please ensure:

• Code follows TypeScript strict mode
• Components use Svelte 5 runes syntax
• All Chrome API calls have environment checks

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👤 Author

Zayan Mohamed

• GitHub: @Zayan-Mohamed
• Repository: dev-dash

⭐ Show Your Support

Give a ⭐️ if this project helped you!

🙏 Acknowledgments

• Svelte Team for the amazing framework
• Lucide for beautiful icons
• GitHub for design inspiration
• All contributors and users