[create-theme]: Zen Tabs Organiser

[alexiscrocilla]

Name

Zen Tabs Organiser

Description

Sort tabs into groups using AI or domain. Auto-colors, icons, clear tabs.

Homepage

https://github.com/alexiscrocilla/Zen-Tabs-Organiser

Image

https://raw.githubusercontent.com/alexiscrocilla/Zen-Tabs-Organiser/main/Screenshot.png

Type

• JSON Color Theme

Theme Styles

/* ==== Zen Tabs Organiser + Advanced Tab Groups — Zen 1.19+ ==== */
/* NOTE: tab-group must stay display:contents (native) for drag-and-drop to work.
   Background is applied to children instead. */

/* --- Group label header: match native tab dimensions --- */
tab-group .tab-group-label-container {
  min-height: var(--tab-min-height, 36px) !important;
  margin-block: var(--tab-block-margin, 2px) 0 !important;
  padding: 0 var(--tab-inline-padding, 8px) 0 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background: color-mix(in srgb, var(--tab-group-color, gray) 10%, transparent) !important;
  border-radius: var(--border-radius-medium, 6px) var(--border-radius-medium, 6px) 0 0 !important;
  border-left: 3px solid color-mix(in srgb, var(--tab-group-color, gray) 40%, transparent) !important;
  transition: background 0.2s ease, border-radius 0.3s ease !important;
}

tab-group[collapsed] .tab-group-label-container {
  border-left-color: transparent !important;
}

tab-group .tab-group-label-container:hover {
  background: color-mix(in srgb, var(--tab-group-color, gray) 15%, transparent) !important;
}

/* Close button: hidden, shown on hover */
tab-group .tab-group-label-container .tab-close-button {
  display: none !important;
}
tab-group .tab-group-label-container:hover .tab-close-button {
  display: flex !important;
  visibility: visible !important;
}

/* --- Tab container: colored background bottom part --- */
tab-group .tab-group-container {
  margin-inline-start: 0 !important;
  padding-inline-start: 0 !important;
  background: color-mix(in srgb, var(--tab-group-color, gray) 10%, transparent) !important;
  border-radius: 0 0 var(--border-radius-medium, 6px) var(--border-radius-medium, 6px) !important;
  padding-bottom: var(--tab-block-margin, 2px) !important;
  margin-bottom: var(--tab-block-margin, 2px) !important;
  border-left: 3px solid color-mix(in srgb, var(--tab-group-color, gray) 40%, transparent) !important;
  transition: background 0.3s ease, padding-bottom 0.3s ease !important;
}

/* --- Icon container --- */
.tab-group-icon-container {
  margin: 0 6px 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Icon square */
tab-group .tab-group-icon {
  list-style-image: none !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  position: relative;
  background: rgba(255, 255, 255, 0.12) !important;
}

tab-group .tab-group-icon .group-icon,
tab-group .tab-group-icon image {
  display: block;
  width: 10px;
  height: 10px;
  -moz-context-properties: fill, stroke, color !important;
  fill: white !important;
  color: white !important;
}

tab-group .tab-group-icon label {
  transform: translate(0, -1px);
}

/* --- Group label text --- */
tab-group .tab-group-label {
  direction: ltr;
  mask-image: linear-gradient(to left, transparent, black 1em);
  margin-right: auto !important;
  width: 100%;
  height: 100% !important;
  padding: 0 4px !important;
  background: transparent !important;
  color: var(--tab-selected-textcolor) !important;
  font-weight: 500 !important;
  text-align: start !important;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}

/* Hide native Zen tab-group-line and grain */
tab-group .tab-group-line,
tab-group .tab-group-container .grain {
  display: none !important;
}

/* --- Expand/Collapse animation --- */
tab-group .tab-group-container {
  overflow: hidden !important;
}

tab-group .tab-group-label-container {
  transition: background 0.2s ease, border-radius 0.3s ease !important;
}

/* Tabs wave animation */
tab-group .tab-group-container tab {
  transition: max-height 0.25s ease, opacity 0.2s ease, transform 0.25s ease !important;
  max-height: 100px !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

tab-group .tab-group-container tab:nth-child(1) { transition-delay: 0s !important; }
tab-group .tab-group-container tab:nth-child(2) { transition-delay: 0.03s !important; }
tab-group .tab-group-container tab:nth-child(3) { transition-delay: 0.06s !important; }
tab-group .tab-group-container tab:nth-child(4) { transition-delay: 0.09s !important; }
tab-group .tab-group-container tab:nth-child(5) { transition-delay: 0.12s !important; }
tab-group .tab-group-container tab:nth-child(6) { transition-delay: 0.15s !important; }
tab-group .tab-group-container tab:nth-child(7) { transition-delay: 0.18s !important; }
tab-group .tab-group-container tab:nth-child(8) { transition-delay: 0.21s !important; }
tab-group .tab-group-container tab:nth-child(9) { transition-delay: 0.24s !important; }
tab-group .tab-group-container tab:nth-child(10) { transition-delay: 0.27s !important; }
tab-group .tab-group-container tab:nth-child(n+11) { transition-delay: 0.3s !important; }

/* Collapsed: tabs slide up and fade out */
tab-group[collapsed] .tab-group-container tab {
  max-height: 0 !important;
  opacity: 0 !important;
  transform: translateY(-6px) !important;
  padding: 0 !important;
  margin: 0 !important;
}

tab-group[collapsed] .tab-group-container {
  margin: 0 !important;
  padding-bottom: 0 !important;
  background: transparent !important;
  border-left-color: transparent !important;
}

tab-group[collapsed] {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}
tab-group[collapsed] > .tab-group-label-container .tab-group-label {
  outline: none !important;
  outline-offset: 0 !important;
}

/* When collapsed, make header fully rounded */
tab-group[collapsed] .tab-group-label-container {
  border-radius: var(--border-radius-medium, 6px) !important;
}

/* --- Group creation animation --- */
@keyframes zenGroupAppear {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

tab-group .tab-group-label-container {
  animation: zenGroupAppear 0.35s ease-out !important;
}

tab-group .tab-group-container {
  animation: zenGroupAppear 0.35s ease-out 0.1s both !important;
}

/* --- Hide group start divider --- */
.zen-tab-group-start {
  display: none !important;
}

/* --- Hide Zen native Clear button --- */
.zen-workspace-close-unpinned-tabs-button {
  display: none !important;
}

Readme

# Zen Tabs Organiser

Sort your browser tabs into groups using **AI** or **domain-based** grouping in one click. Inspired by [Arc’s Tidy Tabs](https://arc.net/max).

## Features

- **Sort** — Groups all open tabs via AI (OpenAI, Gemini, Ollama, Mistral) or by domain
- **Clear** — Closes ungrouped, unpinned tabs with animation
- **Auto-colors** — 12-color palette with automatic assignment
- **Auto-icons** — Contextual icons (code, shopping, finance, smart home, etc.) when supported
- **Workspace-aware** — Only affects tabs in the active workspace
- **Animation** — Visual feedback when expanding or collapsing groups
- **Settings** — Full configuration in Zen Mods preferences (AI provider, API key, model)

## Requirements

- [Zen Browser](https://zen-browser.app/) (a recent build with mod support)
- **Optional but recommended for group icons:** the [Advanced Tab Groups](https://github.com/Vertex-Mods/Advanced-Tab-Groups) mod. Without it, sorting and colors still work; automatic icon assignment is skipped if that API is not available.

## Installation

This is the flow Zen documents for mods listed in the catalog:

1. Open **Zen Browser**
2. Go to the [**Mods Registry**](https://www.zen-browser.app/mods)
3. Open **Zen Tabs Organiser** and click **Install**

You can also manage installed mods from **`about:preferences#zenMarketplace`** (Zen Mods preferences).

### Loading the mod outside the catalog

Zen can **import** an exported mod as JSON from the Marketplace / Zen Mods UI (an **Import**-style control). Use this to test a build or share a file outside the public registry. The files below (`mod.json`, scripts, CSS, preferences) are what the browser bundles—no manual copying into the profile or external userChrome-style tooling.

## AI configuration

By default, grouping is domain-based. To use AI:

1. Open **`about:preferences#zenMarketplace`** → **Zen Tabs Organiser**
2. Pick an **AI provider** (Gemini, Ollama, Mistral, or OpenAI)
3. Enter your **API key** (not needed for local Ollama)
4. Optionally set a custom **model** name (defaults: `gpt-4o-mini`, `gemini-2.0-flash`, etc.)

Option labels match the `preferences.json` schema ([Zen mod preferences documentation](https://docs.zen-browser.app/themes-store/themes-marketplace-preferences)).

## Usage

1. Click **Sort** — tabs are analyzed and grouped
2. With AI: titles and URLs are sent to the provider for semantic categories
3. Without AI: grouping uses keywords / hostnames
4. Groups get colors and icons according to your settings
5. **Clear** closes ungrouped, unpinned tabs

## Repository files

| File | Purpose |
|------|---------|
| `mod.json` | Mod metadata (name, version, `style` / `js` entries) |
| `chrome.js` | Main logic (loaded by Zen’s mod system when `js` is enabled) |
| `style.css` | Styles for groups and controls |
| `preferences.json` | Preference schema shown in the Zen Mods UI |

## Publishing or updating on the Mods Registry

The catalog is curated. For official listing or updates, follow Zen’s [**Submission Guidelines**](https://docs.zen-browser.app/themes-store/themes-marketplace-submission-guidelines) (open-source mod, valid README, JSON preferences, screenshots as specified, etc.).

## License

[MIT](LICENSE)

Preferences

[
  {
    "property": "zen-tabs-organiser.enable_sort",
    "label": "Sort button",
    "type": "checkbox",
    "defaultValue": true
  },
  {
    "property": "zen-tabs-organiser.enable_clear",
    "label": "Clear button",
    "type": "checkbox",
    "defaultValue": true
  },
  {
    "property": "zen-tabs-organiser.auto_colors",
    "label": "Auto-assign colors to groups",
    "type": "checkbox",
    "defaultValue": true
  },
  {
    "property": "zen-tabs-organiser.auto_icons",
    "label": "Auto-assign icons to groups",
    "type": "checkbox",
    "defaultValue": true
  },
  {
    "property": "zen-tabs-organiser.ai_model",
    "label": "AI Provider",
    "type": "dropdown",
    "defaultValue": "0",
    "options": [
      { "value": "0", "label": "None" },
      { "value": "1", "label": "Gemini" },
      { "value": "2", "label": "Ollama" },
      { "value": "3", "label": "Mistral" },
      { "value": "4", "label": "OpenAI" }
    ]
  },
  {
    "property": "zen-tabs-organiser.ai_api_key",
    "label": "API Key",
    "type": "string",
    "placeholder": "Required for Gemini, Mistral, OpenAI"
  },
  {
    "property": "zen-tabs-organiser.ai_model_name",
    "label": "Model",
    "type": "string",
    "placeholder": "gpt-4o-mini, gemini-2.0-flash, llama3.2"
  },
  {
    "property": "zen-tabs-organiser.ai_endpoint",
    "label": "Endpoint",
    "type": "string",
    "placeholder": "Only for Ollama or OpenAI-compatible"
  }
]

[github-actions]

Error creating theme

Sorry about that! There was an error creating the theme. Please try again or contact the maintainers for help.