Dev

.github/workflows/ci.yml

@@ -0,0 +1,27 @@
+name: CI
+
+on:
+  push:
+    branches: [main, dev, master]
+  pull_request:
+    branches: [main, dev, master]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+          cache: npm
+
+      - name: Install
+        run: npm ci
+
+      - name: Typecheck
+        run: npm run typecheck
+
+      - name: Build
+        run: npm run build

CHANGELOG.md

@@ -0,0 +1,33 @@
+# Changelog
+
+All notable changes to **God Panel Nuxt** are documented in this file. Versions follow the package version in `package.json`.
+
+## [2.1.0] - 2026-04-20
+
+### Added
+
+- **Icons:** [Solar](https://icon-sets.iconify.design/solar/) via [`@nuxt/icon`](https://github.com/nuxt/icon), with [`@iconify-json/solar`](https://www.npmjs.com/package/@iconify-json/solar) and [`@iconify-json/simple-icons`](https://www.npmjs.com/package/@iconify-json/simple-icons) for brand marks. Legacy MDI-style names are mapped in `app/utils/app-icon-resolve.ts`.
+- **Settings — icon style:** `iconStyle` in app settings (`linear` | `solid`), persisted with other preferences. **Linear** uses Solar `*-linear` glyphs; **solid** uses `*-bold`. Default is **linear**. Controlled from the settings drawer, **Theme settings** on `/dashboard/settings`, and validated in `app/types/validation.ts`.
+- **God Kit documentation:** Sidebar nav item and footer help links to [God Kit docs](https://godkit.godplans.org/). `package.json` field `godKitDocumentation` and `runtimeConfig.public.godKitDocumentation` (override with `NUXT_PUBLIC_GOD_KIT_DOCS`). Settings info panel lists Solar icon option and a resources link to God Kit.
+- **Changelog:** This file.
+
+### Changed
+
+- **`AppIcon`:** Renders Iconify SVGs through Nuxt Icon instead of the Material Design Icons webfont.
+- **Navigation:** External doc links use `<a target="_blank" rel="noopener noreferrer">` where appropriate (`DashboardNavItemLink`).
+
+### Removed
+
+- **`@mdi/font`** and **`@mdi/js`** (replaced by the Iconify workflow above).
+
+### Tooling and documentation
+
+- **TypeScript:** `npm run typecheck` with `@types/node`, `typescript.tsConfig.compilerOptions.types`, **`vue-router` ^5** (Nuxt 4.4), **`nuxt` ^4.4.2**, **`typescript`** devDependency.
+- **Dependencies:** `god-kit` pinned to **`^0.8.1`** (replaces `latest`).
+- **Nuxt Icon:** `icon.serverBundle.externalizeIconsJson` **`false`** for SSR hosts without JSON imports.
+- **Docs:** README dev URL **3333**; [docs/DEMO_AND_API.md](./docs/DEMO_AND_API.md); [DESIGN_IMPROVEMENTS.md](./DESIGN_IMPROVEMENTS.md) aligned with Solar / Iconify.
+- **CI:** [.github/workflows/ci.yml](.github/workflows/ci.yml) — `npm ci`, `typecheck`, `build` on push/PR to `main`, `dev`, `master`.
+
+## [2.0.0] - earlier
+
+Initial tracked major version. For older history, see the Git log on the repository’s default branch.

DESIGN_IMPROVEMENTS.md

@@ -1,175 +1,45 @@
-# Settings Panel Design Improvements
-
-## ✅ Completed Improvements
-
-### 🎨 **Icons Fixed & Implemented**
-- ✅ Replaced MDI icons with SVG icons from `/assets/icons/setting/`
-- ✅ All icons now display correctly (moon, contrast, align-right, autofit-width, sidebar icons, font icon)
-- ✅ Icons match the Next.js design exactly
-
-### 📐 **Layout & Design Improvements**
-
-#### **BaseOption Component**
-- ✅ Redesigned with cleaner layout matching Next.js
-- ✅ Icon and switch in top section
-- ✅ Label and tooltip in bottom section
-- ✅ Improved padding and spacing (16px padding, 24px gap)
-- ✅ Border radius increased to 16px
-- ✅ Subtle hover effects
-- ✅ Selected state with proper background
-
-#### **PresetsOptions Component**
-- ✅ Black pill-style title badge (dark background with light text)
-- ✅ 3-column grid layout
-- ✅ Cleaner preset buttons with sidebar icon
-- ✅ Selected state with color-tinted background
-- ✅ Hover effect with transform
-- ✅ Proper color values for all presets
-
-#### **FontOptions Component**
-- ✅ Black pill-style title badge matching presets
-- ✅ 2-column grid layout
-- ✅ Font icon with gradient background when selected
-- ✅ Box shadow on selected state
-- ✅ Font family applied to buttons
-- ✅ Cleaner typography
-
-#### **NavOptions Component**
-- ✅ Black pill-style title badge with tooltip icon
-- ✅ Separated Layout and Color sections with labels
-- ✅ CSS variables for consistent styling
-- ✅ Improved spacing and organization
-- ✅ Better visual hierarchy
-
-#### **LayoutOption Component**
-- ✅ Complete redesign matching Next.js visual preview
-- ✅ Visual representation of navigation layouts
-- ✅ Circle, primary, and secondary items with gradient when selected
-- ✅ Proper dimensions for vertical, horizontal, and mini layouts
-- ✅ Border and shadow effects
-
-#### **ColorOption Component**
-- ✅ Sidebar icon with proper outline/filled variants
-- ✅ Gradient mask effect on selected icons
-- ✅ Box shadow on selection
-- ✅ Capitalized labels
-- ✅ Improved hover states
-
-#### **SettingsDrawer Component**
-- ✅ Backdrop blur effect (0.9 opacity with 20px blur)
-- ✅ Improved header layout
-- ✅ Custom scrollbar styling (6px width, themed colors)
-- ✅ 2-column grid for base options
-- ✅ Consistent 48px spacing between sections
-- ✅ Better content padding (20px)
-- ✅ Cleaner visual hierarchy
-
-### 🎯 **Design Elements**
-
-**Title Badges (god-kit tokens):**
-```css
-- Background: var(--gk-color-on-surface) or var(--gk-color-text) (pill on light surfaces)
-- Text Color: var(--gk-color-surface) or var(--gk-color-bg)
-- Border Radius: 22px
-- Padding: 0 10px
-- Line Height: 22px
-- Font Size: 13px
-- Font Weight: 600
-```
-
-**Box Shadows:**
-```css
--8px 8px 20px -4px color-mix(in srgb, var(--gk-color-text) 12%, transparent)
-```
-
-**Border Radius:**
-```css
-- Main containers: 16px
-- Badges: 22px
-- Items: 12px (var(--gk-radius-md) / var(--gk-radius-lg))
-- Small elements: 8px
-```
-
-**Colors:**
-```css
-- Borders: color-mix(in srgb, var(--gk-color-on-surface) 12%, transparent)
-- Backgrounds: color-mix(in srgb, var(--gk-color-on-surface) 8%, transparent)
-- Item BG: color-mix(in srgb, var(--gk-color-on-surface) 20%, transparent)
-- Hover: color-mix(in srgb, var(--gk-color-on-surface) 4%, transparent)
-```
-
-**Gradients:**
-```css
-linear-gradient(135deg, var(--gk-color-primary) 0%, var(--gk-color-primary-hover) 100%)
-```
-
-### 📊 **Component Comparison**
-
-| Component | Before | After | Status |
-|-----------|--------|-------|--------|
-| BaseOption | MDI icons, vertical layout | SVG icons, top/bottom sections | ✅ Complete |
-| PresetsOptions | Simple grid | Black badge, icon-based | ✅ Complete |
-| FontOptions | Basic buttons | Gradient icons, shadows | ✅ Complete |
-| NavOptions | Simple layout | Black badge, visual previews | ✅ Complete |
-| LayoutOption | Text-based | Visual navigation preview | ✅ Complete |
-| ColorOption | Simple icons | Gradient masks, better UX | ✅ Complete |
-| SettingsDrawer | Basic drawer | Blur effect, custom scrollbar | ✅ Complete |
-
-### 🎨 **Visual Features**
-
-**All Components Now Have:**
-- ✅ Proper SVG icons from `/assets/icons/setting/`
-- ✅ Black pill-style title badges (where applicable)
-- ✅ Consistent border radius (16px for containers)
-- ✅ Box shadows on selected states
-- ✅ Subtle hover effects
-- ✅ Smooth transitions (0.2s ease)
-- ✅ Theme-aware colors
-- ✅ Proper spacing and padding
-- ✅ Visual hierarchy
-- ✅ Professional polish
-
-### 🚀 **User Experience Improvements**
-
-1. **Better Visual Feedback:**
-   - Hover states on all interactive elements
-   - Selected states clearly indicated
-   - Smooth transitions between states
-
-2. **Improved Readability:**
-   - Better contrast with black badges
-   - Clearer text hierarchy
-   - Proper font weights and sizes
-
-3. **Professional Appearance:**
-   - Matches Next.js reference design
-   - Consistent design language
-   - Modern, clean aesthetic
-
-4. **Better Organization:**
-   - Logical grouping of settings
-   - Clear section separation
-   - Visual previews for layouts
-
-### 📝 **Files Updated**
-
-1. `app/components/settings/drawer/BaseOption.vue` - Complete redesign
-2. `app/components/settings/drawer/PresetsOptions.vue` - Black badge, icon-based
-3. `app/components/settings/drawer/FontOptions.vue` - Gradient icons
-4. `app/components/settings/drawer/NavOptions.vue` - Black badge, sections
-5. `app/components/settings/drawer/LayoutOption.vue` - Visual preview
-6. `app/components/settings/drawer/ColorOption.vue` - Gradient masks
-7. `app/components/settings/drawer/SettingsDrawer.vue` - Blur, scrollbar, grid
-
-### 🎉 **Result**
-
-The settings panel now perfectly matches the Next.js reference design with:
-- ✅ All icons displaying correctly
-- ✅ Professional, modern appearance
-- ✅ Consistent design language
-- ✅ Smooth interactions
-- ✅ Better UX and visual feedback
-- ✅ Theme-aware styling
-- ✅ Responsive layout
-
-**The panel is now production-ready with a polished, professional look!** 🚀
+# Settings panel design notes
+
+Historical notes for the **settings drawer** and related UI. For **icons**, the app uses **[Solar](https://icon-sets.iconify.design/solar/)** (and **Simple Icons** for brands) through **`@nuxt/icon`**, with legacy name mapping in [`app/utils/app-icon-resolve.ts`](app/utils/app-icon-resolve.ts). See [`CHANGELOG.md`](CHANGELOG.md) for release-level changes.
+
+## Layout and components
+
+### BaseOption
+
+- Icon and switch in the top section; label and tooltip below
+- Padding and spacing (e.g. 16px padding, gap between sections)
+- Border radius and selected / hover states aligned with god-kit tokens
+
+### PresetsOptions, FontOptions, NavOptions
+
+- Pill-style section titles
+- Grid layouts for presets and fonts
+- **NavOptions:** layout choices with visual previews (`LayoutOption`)
+
+### LayoutOption
+
+- Visual preview for vertical, horizontal, and mini navigation layouts
+
+### SettingsDrawer
+
+- Header with reset / close actions
+- Scrollable body; themed scrollbar where styled
+- Grid of quick toggles (theme, contrast, RTL, compact, icon style, etc.)
+
+## Design tokens (reference)
+
+Title badges and surfaces often use:
+
+- **Borders:** `color-mix(in srgb, var(--gk-color-on-surface) 12%, transparent)`
+- **Surfaces:** `color-mix(in srgb, var(--gk-color-on-surface) 8%, transparent)`
+- **Radius:** `var(--gk-radius-md)` / `var(--gk-radius-lg)` where applicable
+
+## Component file map
+
+| Area        | Main files under `app/components/settings/drawer/` |
+|------------|-----------------------------------------------------|
+| Drawer     | `SettingsDrawer.vue`                                |
+| Options    | `BaseOption.vue`, `PresetsOptions.vue`, `FontOptions.vue`, `NavOptions.vue`, `LayoutOption.vue` |
+| Chrome     | `FullscreenButton.vue`                              |
+
+For **global theme** behavior (god-kit sync, SSR presets), see [`README.md`](README.md) and `app/plugins/god-kit.client.ts`.

README.md

@@ -32,7 +32,7 @@ A modern, feature-rich admin dashboard built with **Nuxt.js 4**, **[god-kit](htt
 - **State Management:** Pinia
 - **Validation:** Zod
 - **HTTP Client:** Axios
-- **Icons:** Material Design Icons
+- **Icons:** [Solar](https://icon-sets.iconify.design/solar/) (via [`@nuxt/icon`](https://github.com/nuxt/icon) + `@iconify-json/solar`), with [Simple Icons](https://simpleicons.org/) for brand marks — see `app/utils/app-icon-resolve.ts` for legacy name mapping
 - **Persistence:** Cookies + LocalStorage
 
 ## 📦 Installation
@@ -73,7 +73,7 @@ A modern, feature-rich admin dashboard built with **Nuxt.js 4**, **[god-kit](htt
    pnpm dev
    ```
 
-   Visit `http://localhost:3000` to see the application.
+   Visit `http://localhost:3333` (or the port set in [`nuxt.config.ts`](nuxt.config.ts) under `devServer.port`) to see the application.
 
 ## 🚀 Build & Production
 
@@ -195,7 +195,10 @@ The application supports multiple theme configurations:
 **Optional observability:** Set `NUXT_PUBLIC_SENTRY_DSN` when wiring `@sentry/nuxt`; see `app/plugins/error-handler.client.ts`.
 
 ### Release QA (manual)
-Before shipping, verify: **LTR + RTL** (e.g. Persian), **mini rail** and **compact** layout, **mobile drawer**, **settings save** (including primary preset and **dark mode**), and **dynamic fonts** (`useDynamicFonts`).
+Before shipping, verify: **LTR + RTL** (e.g. Persian), **mini rail** and **compact** layout, **mobile drawer**, **settings save** (including primary preset and **dark mode**), and **dynamic fonts** (`useDynamicFonts`). Run **`npm run typecheck`** in CI or locally before releases.
+
+### Demo vs production API
+Dashboard and analytics pages may use **placeholder metrics and charts** until a real backend is connected. See **[docs/DEMO_AND_API.md](./docs/DEMO_AND_API.md)** for `NUXT_PUBLIC_API_URL`, optional **`ENABLE_MOCK_DATA`**, and how auth/settings services relate to a live API.
 
 ### Layouts
 Choose from different dashboard layouts:

app/components/settings/drawer/SettingsDrawer.vue

@@ -84,6 +84,24 @@
             :selected="settingsStore.settings.compactLayout"
             @click="toggleCompactLayout"
           />
+
+          <BaseOption
+            v-if="!hideIconStyle"
+            icon="menu"
+            :label="t('settingsDrawer.iconStyleLinear')"
+            :tooltip="t('settingsDrawer.iconStyleLinearHint')"
+            :selected="settingsStore.settings.iconStyle === 'linear'"
+            @click="settingsStore.updateField('iconStyle', 'linear')"
+          />
+
+          <BaseOption
+            v-if="!hideIconStyle"
+            icon="view-dashboard"
+            :label="t('settingsDrawer.iconStyleSolid')"
+            :tooltip="t('settingsDrawer.iconStyleSolidHint')"
+            :selected="settingsStore.settings.iconStyle === 'solid'"
+            @click="settingsStore.updateField('iconStyle', 'solid')"
+          />
         </div>
 
         <NavOptions
@@ -146,6 +164,7 @@ interface Props {
   hideNavLayout?: boolean
   hideDirection?: boolean
   hideColorScheme?: boolean
+  hideIconStyle?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -156,7 +175,8 @@ const props = withDefaults(defineProps<Props>(), {
   hideContrast: false,
   hideNavLayout: false,
   hideDirection: false,
-  hideColorScheme: false
+  hideColorScheme: false,
+  hideIconStyle: false,
 })
 
 const settingsStore = useSettingsStore()

app/components/theme/ThemeSettings.vue

@@ -83,6 +83,31 @@
         />
       </GkField>
 
+      <div class="setting-group">
+        <label class="setting-label">{{ t('settingsDrawer.icons') }}</label>
+        <div class="flex flex-wrap gap-2">
+          <GkButton
+            :variant="localSettings.iconStyle === 'linear' ? 'primary' : 'secondary'"
+            size="sm"
+            @click="localSettings.iconStyle = 'linear'"
+          >
+            <AppIcon name="menu" :size="16" class="me-1" />
+            {{ t('settingsDrawer.iconStyleLinearShort') }}
+          </GkButton>
+          <GkButton
+            :variant="localSettings.iconStyle === 'solid' ? 'primary' : 'secondary'"
+            size="sm"
+            @click="localSettings.iconStyle = 'solid'"
+          >
+            <AppIcon name="view-dashboard" :size="16" class="me-1" />
+            {{ t('settingsDrawer.iconStyleSolidShort') }}
+          </GkButton>
+        </div>
+        <p class="mt-1 text-caption text-[var(--gk-color-on-surface-muted)]">
+          {{ t('settingsDrawer.iconStyleHelp') }}
+        </p>
+      </div>
+
       <div class="setting-group">
         <label class="flex items-center gap-2 cursor-pointer">
           <GkCheckbox v-model="isHighContrast" :aria-label="t('settingsDrawer.highContrast')" />