The Terminal Yard - Arch Linux

The Terminal Yard - Arch Linux Writing about terminals and linux Zola 2026-02-17T00:00:00+00:00 https://blog.lazyfreax.dev/tags/arch-linux/atom.xml Custom Desktop Web Apps with Hyprland 2026-02-17T00:00:00+00:00 2026-02-17T00:00:00+00:00 coko https://blog.lazyfreax.dev/blog/custom-desktop-web-apps-with-hyprland/ <p>The reason I use Linux is because I like to configure my system to be exactly how I want it.</p> <p>This is why I went with <a rel="external" href="https://archlinux.org/">Arch Linux</a> <em>(btw)</em>. Arch may not be for everyone but when you are picky like me when it comes to what software goes on your machine, it's simply the perfect choice.</p> <p>On top of that, I use <a rel="external" href="https://hypr.land/">Hyprland</a> as my <a rel="external" href="https://en.wikipedia.org/wiki/Tiling_window_manager">tiling window manager</a> <em>(it's an hybrid window manager to be more accurate, but you get the idea)</em>.</p> <p>While I recognize the mouse to be <a rel="external" href="https://www.youtube.com/watch?v=yJDv-zdhzMY">a truly magnificent invention</a>, the less I have to use it, the better I feel. I am a keyboard maximalist, I don't want my hands to ever leave the keyboard so a tiling window manager fits my workflow the best.</p> <h1 id="predefined-workspaces">Predefined Workspaces<a class="post-anchor" href="#predefined-workspaces" aria-label="Anchor link for: predefined-workspaces"><span aria-hidden="true">#</span></a> </h1> <p>The way I setup my environment is that I have ten workspaces and each of them gets assigned specific applications:</p> <ol> <li><a rel="external" href="https://freetubeapp.io/">FreeTube</a></li> <li>Web browsers (<a rel="external" href="https://librewolf.net/">Librewolf</a> / <a rel="external" href="https://github.com/ungoogled-software/ungoogled-chromium">Chromium</a>, <a rel="external" href="https://qutebrowser.org/">qutebrowser</a>)</li> <li>Terminal (<a rel="external" href="https://sw.kovidgoyal.net/kitty/">kitty</a> / <a rel="external" href="https://ghostty.org/">ghostty</a>)</li> <li>Email client</li> <li>Chat apps (Discord, Signal, Teams, etc.)</li> <li>Office (<a rel="external" href="https://www.onlyoffice.com/">OnlyOffice</a> / <a rel="external" href="https://www.libreoffice.org/">LibreOffice</a>)</li> <li>Video games & graphics (<a rel="external" href="https://www.gimp.org/">Gimp</a>)</li> <li>Remote desktop (<a rel="external" href="https://remmina.org/">Remmina</a>) & Virtual Machines</li> <li>Misc & Tools (<a rel="external" href="https://www.qbittorrent.org/">qBittorent</a>, Spotify, etc.)</li> <li>Random stuff <em>(I usually bind it to my second monitor)</em></li> </ol> <p>The great thing about this is that I don't have to think about where my windows are. Switching to a specific application is built into my muscle memory. If I want to search on the web, I press <kbd>SUPER+2</kbd>. Need to read an email? <kbd>SUPER+4</kbd>, etc. It's fast, there is no mental overhead, I love it.</p> <p>When you spend 8+ hours a day on a computer, the mental fatigue of having to <kbd>Alt+Tab</kbd> and manually search through your windows really builds up.</p> <p>The Workspace config is available on <a rel="external" href="https://github.com/coko7/.dotfiles/blob/main/.config/hypr/window_rules_workspaces.conf">GitHub</a>.</p> <h1 id="creating-custom-desktop-web-apps">Creating custom Desktop Web apps<a class="post-anchor" href="#creating-custom-desktop-web-apps" aria-label="Anchor link for: creating-custom-desktop-web-apps"><span aria-hidden="true">#</span></a> </h1> <p>OK, now you have a basic idea of what my workflow looks like. So why do I need desktop web apps? And by that, I mean: Web apps that I can launch like any other application.</p> <p>Well, as you know, I like to bind applications to workspaces. But sometimes, I have to use applications or services that are not available on desktop. I could simply stick to using them in my web browser, and, that's what I do for some of them. But, when I find myself using a web app a lot, I want to have it available on my desktop directly.</p> <p>To create the desktop web app, we need three things:</p> <ul> <li>a desktop entry</li> <li>an executable script</li> <li>some Hyprland rules</li> </ul> <p>In this article, I will walk you through the process of creating a desktop web app for Outlook.</p> <h2 id="desktop-entry">Desktop entry<a class="post-anchor" href="#desktop-entry" aria-label="Anchor link for: desktop-entry"><span aria-hidden="true">#</span></a> </h2> <p>First, we need to create a custom <a rel="external" href="https://wiki.archlinux.org/title/Desktop_entries">desktop entry</a> (<code>*.desktop</code> files):</p> <pre class="giallo" style="color: #CDD6F4; background-color: #1E1E2E;"><code data-lang="desktop"><span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #7F849C;"> 1</span><span>[Desktop Entry]</span></span> <span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #7F849C;"> 2</span><span style="color: #CBA6F7;">Version</span><span style="color: #94E2D5;">=</span><span>1.0</span></span> <span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #7F849C;"> 3</span><span style="color: #CBA6F7;">Name</span><span style="color: #94E2D5;">=</span><span>Outlook</span></span> <span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #7F849C;"> 4</span><span style="color: #CBA6F7;">Comment</span><span style="color: #94E2D5;">=</span><span>Read your emails</span></span> <span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #7F849C;"> 5</span><span style="color: #CBA6F7;">GenericName</span><span style="color: #94E2D5;">=</span><span>Work Email Client</span></span> <span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #7F849C;"> 6</span><span style="color: #CBA6F7;">Keywords</span><span style="color: #94E2D5;">=</span><span>Work;Email;Outlook</span></span> <span class="giallo-l" style="background-color: #CDD6F412;"><span aria-hidden="true" class="giallo-ln" style="color: #7F849C;"> 7</span><span style="color: #CBA6F7;">Exec</span><span style="color: #94E2D5;">=</span><span>/home/coko/.config/local/bin-sh/work/chromium-outlook.sh</span></span> <span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #7F849C;"> 8</span><span style="color: #CBA6F7;">Icon</span><span style="color: #94E2D5;">=</span><span>outlook</span></span> <span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #7F849C;"> 9</span><span style="color: #CBA6F7;">Terminal</span><span style="color: #94E2D5;">=</span><span>false</span></span> <span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #7F849C;">10</span><span style="color: #CBA6F7;">Type</span><span style="color: #94E2D5;">=</span><span>Application</span></span> <span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #7F849C;">11</span><span style="color: #CBA6F7;">StartupNotify</span><span style="color: #94E2D5;">=</span><span>true</span></span> <span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #7F849C;">12</span><span style="color: #CBA6F7;">Categories</span><span style="color: #94E2D5;">=</span><span style="color: #F38BA8;font-weight: bold;">Network</span><span>;Email;</span></span></code></pre> <p>The above snippet is a desktop file that I placed in my <code>~/.config/local/share/applications/</code> directory.</p> <p>When I press <kbd>SUPER+R</kbd>, it starts my <a rel="external" href="https://wiki.archlinux.org/title/Category:Application_launchers">application launcher</a> which automatically picks up this entry and makes it available to me. I use <a rel="external" href="https://github.com/davatorium/rofi">rofi</a> as my application launcher but if you use a different one, it should behave similarly.</p> <p>You can specify a lot of things in a desktop entry, but what we want to focus on is the following:</p> <pre class="giallo" style="color: #CDD6F4; background-color: #1E1E2E;"><code data-lang="shellscript"><span class="giallo-l"><span>Exec</span><span style="color: #94E2D5;">=</span><span style="color: #A6E3A1;">/home/coko/.config/local/bin-sh/work/chromium-outlook.sh</span></span></code></pre> <p>The <code>Exec</code> value is the action that will be triggered when you launch the application. In this case, it is a custom bash script named <code>chromium-outlook.sh</code>.</p> <p>Never heard of bash? <a rel="external" href="https://learnxinyminutes.com/bash/">Learn it in Y minutes!</a></p> <h2 id="executable-script">Executable script<a class="post-anchor" href="#executable-script" aria-label="Anchor link for: executable-script"><span aria-hidden="true">#</span></a> </h2> <p>Now, let's look into the bash script from the desktop entry:</p> <pre class="giallo" style="color: #CDD6F4; background-color: #1E1E2E;"><code data-lang="shellscript"><span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #7F849C;">1</span><span style="color: #F5C2E7;font-style: italic;">#!/usr/bin/env bash</span></span> <span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #7F849C;">2</span></span> <span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #7F849C;">3</span><span>DATA_DIR</span><span style="color: #94E2D5;">=</span><span style="color: #A6E3A1;">"</span><span>$XDG_CONFIG_HOME</span><span style="color: #A6E3A1;">/chromium-work-outlook"</span></span> <span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #7F849C;">4</span><span style="color: #89B4FA;font-style: italic;">chromium-nerd-app.sh</span><span style="color: #A6E3A1;"> "https://outlook.office.com" "</span><span>$DATA_DIR</span><span style="color: #A6E3A1;">"</span></span></code></pre> <p>It's tiny, only two lines without the <a rel="external" href="https://en.wikipedia.org/wiki/Shebang_(Unix)">Shebang</a>. First, I define the data directory for <a rel="external" href="https://github.com/ungoogled-software/ungoogled-chromium">Chromium</a>, which is the web browser I use for my custom desktop web apps. This is mostly for isolation purposes, the actual line we want to have a look at is <strong>line 4</strong>:</p> <pre class="giallo" style="color: #CDD6F4; background-color: #1E1E2E;"><code data-lang="shellscript"><span class="giallo-l"><span style="color: #89B4FA;font-style: italic;">chromium-nerd-app.sh</span><span style="color: #A6E3A1;"> "https://outlook.office.com" "</span><span>$DATA_DIR</span><span style="color: #A6E3A1;">"</span></span></code></pre> <p>It calls another script (<a rel="external" href="https://github.com/coko7/.dotfiles/blob/main/.config/local/bin-sh/global/chromium-nerd-app.sh"><code>chromium-nerd-app.sh</code></a>) with two arguments (a URL and the data dir we defined). Let's checkout this new bash script:</p> <pre class="giallo" style="color: #CDD6F4; background-color: #1E1E2E;"><code data-lang="shellscript"><span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #7F849C;"> 1</span><span style="color: #F5C2E7;font-style: italic;">#!/usr/bin/env bash</span></span> <span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #7F849C;"> 2</span></span> <span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #7F849C;"> 3</span><span>APP_URL</span><span style="color: #94E2D5;">=</span><span style="color: #A6E3A1;">"</span><span style="color: #EBA0AC;font-style: italic;">$1</span><span style="color: #A6E3A1;">"</span></span> <span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #7F849C;"> 4</span><span style="color: #9399B2;">[[</span><span style="color: #94E2D5;"> -z</span><span style="color: #A6E3A1;"> "</span><span>$APP_URL</span><span style="color: #A6E3A1;">"</span><span style="color: #9399B2;"> ]] &&</span><span style="color: #F38BA8;font-style: italic;"> echo</span><span style="color: #A6E3A1;"> "APP_NAME required!"</span><span style="color: #9399B2;"> &&</span><span style="color: #F38BA8;font-style: italic;"> exit</span><span style="color: #FAB387;"> 1</span></span> <span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #7F849C;"> 5</span></span> <span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #7F849C;"> 6</span><span>DATA_DIR</span><span style="color: #94E2D5;">=</span><span style="color: #A6E3A1;">"</span><span style="color: #EBA0AC;font-style: italic;">$2</span><span style="color: #A6E3A1;">"</span></span> <span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #7F849C;"> 7</span><span style="color: #9399B2;">[[</span><span style="color: #94E2D5;"> -z</span><span style="color: #A6E3A1;"> "</span><span>$DATA_DIR</span><span style="color: #A6E3A1;">"</span><span style="color: #9399B2;"> ]] &&</span><span style="color: #F38BA8;font-style: italic;"> echo</span><span style="color: #A6E3A1;"> "DATA_DIR required!"</span><span style="color: #9399B2;"> &&</span><span style="color: #F38BA8;font-style: italic;"> exit</span><span style="color: #FAB387;"> 1</span></span> <span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #7F849C;"> 8</span></span> <span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #7F849C;"> 9</span><span>VIMIUM_EXT_ID</span><span style="color: #94E2D5;">=</span><span style="color: #A6E3A1;">'dbepggeogbaibhgnhhndojpepiihcmeb'</span></span> <span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #7F849C;">10</span><span>VIMIUM_VERSION</span><span style="color: #94E2D5;">=</span><span style="color: #A6E3A1;">'2.3.1_0'</span></span> <span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #7F849C;">11</span><span>CHROMIUM_EXT_PATH</span><span style="color: #94E2D5;">=</span><span style="color: #A6E3A1;">"</span><span>$XDG_CONFIG_HOME</span><span style="color: #A6E3A1;">/chromium/Default/Extensions"</span></span> <span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #7F849C;">12</span><span>VIMIUM_EXT_PATH</span><span style="color: #94E2D5;">=</span><span style="color: #A6E3A1;">"</span><span>$CHROMIUM_EXT_PATH</span><span style="color: #A6E3A1;">/</span><span>$VIMIUM_EXT_ID</span><span style="color: #A6E3A1;">/</span><span>$VIMIUM_VERSION</span><span style="color: #A6E3A1;">"</span></span> <span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #7F849C;">13</span></span> <span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #7F849C;">14</span><span style="color: #89B4FA;font-style: italic;">/usr/bin/chromium</span><span style="color: #F5C2E7;"> \</span></span> <span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #7F849C;">15</span><span style="color: #A6E3A1;"> --app="</span><span>$APP_URL</span><span style="color: #A6E3A1;">"</span><span style="color: #F5C2E7;"> \</span></span> <span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #7F849C;">16</span><span style="color: #A6E3A1;"> --disable-features=WaylandWpColorManagerV1</span><span style="color: #F5C2E7;"> \</span></span> <span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #7F849C;">17</span><span style="color: #A6E3A1;"> --user-data-dir="</span><span>$DATA_DIR</span><span style="color: #A6E3A1;">"</span><span style="color: #F5C2E7;"> \</span></span> <span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #7F849C;">18</span><span style="color: #A6E3A1;"> --load-extension="</span><span>$VIMIUM_EXT_PATH</span><span style="color: #A6E3A1;">"</span></span></code></pre> <p>Okay, this one looks a little more daunting, but it's not that complicated actually.</p> <p>The first few lines simply ensure that the script is called with two arguments (the app URL and the data directory).</p> <p>Let's skip ahead to <strong>lines 9-12</strong>:</p> <pre class="giallo" style="color: #CDD6F4; background-color: #1E1E2E;"><code data-lang="shellscript"><span class="giallo-l"><span>VIMIUM_EXT_ID</span><span style="color: #94E2D5;">=</span><span style="color: #A6E3A1;">'dbepggeogbaibhgnhhndojpepiihcmeb'</span></span> <span class="giallo-l"><span>VIMIUM_VERSION</span><span style="color: #94E2D5;">=</span><span style="color: #A6E3A1;">'2.3.1_0'</span></span> <span class="giallo-l"><span>CHROMIUM_EXT_PATH</span><span style="color: #94E2D5;">=</span><span style="color: #A6E3A1;">"</span><span>$XDG_CONFIG_HOME</span><span style="color: #A6E3A1;">/chromium/Default/Extensions"</span></span> <span class="giallo-l"><span>VIMIUM_EXT_PATH</span><span style="color: #94E2D5;">=</span><span style="color: #A6E3A1;">"</span><span>$CHROMIUM_EXT_PATH</span><span style="color: #A6E3A1;">/</span><span>$VIMIUM_EXT_ID</span><span style="color: #A6E3A1;">/</span><span>$VIMIUM_VERSION</span><span style="color: #A6E3A1;">"</span></span></code></pre> <p>This part is optional <em><strong>but it's my favorite part</strong></em>. If you are familiar with <a rel="external" href="https://vimium.github.io/">Vimium</a>, you already know what's coming. But, basically: Vimium is a browser extension that brings vim keybindings in your web browser. Some think it's overkill, I cannot live without it.</p> <p>These four lines define the path to the Vimium extension on my system. The same could have been achieved with a single line but this is more readable.</p> <p>Then, finally, the heart of the script <em>(where the magic happens ✨)</em>:</p> <pre class="giallo" style="color: #CDD6F4; background-color: #1E1E2E;"><code data-lang="shellscript"><span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #7F849C;">1</span><span style="color: #89B4FA;font-style: italic;">/usr/bin/chromium</span><span style="color: #F5C2E7;"> \</span></span> <span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #7F849C;">2</span><span style="color: #A6E3A1;"> --app="</span><span>$APP_URL</span><span style="color: #A6E3A1;">"</span><span style="color: #F5C2E7;"> \</span></span> <span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #7F849C;">3</span><span style="color: #A6E3A1;"> --disable-features=WaylandWpColorManagerV1</span><span style="color: #F5C2E7;"> \</span></span> <span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #7F849C;">4</span><span style="color: #A6E3A1;"> --user-data-dir="</span><span>$DATA_DIR</span><span style="color: #A6E3A1;">"</span><span style="color: #F5C2E7;"> \</span></span> <span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #7F849C;">5</span><span style="color: #A6E3A1;"> --load-extension="</span><span>$VIMIUM_EXT_PATH</span><span style="color: #A6E3A1;">"</span></span></code></pre> <p>Let's break it down line by line:</p> <ol> <li>Launch the Chromium binary: <code>/usr/bin/chromium</code></li> <li><code>--app=<URL></code> tells Chromium to start in a <strong>application</strong> mode, it will hide menu bars, disable extensions, etc.</li> <li><code>--disable-features=WaylandWpColorManagerV1</code> is for fixing some color issues on Wayland (to be honest, I don't remember why it's there but there must be a reason)</li> <li><code>--user-data-dir="$DATA_DIR"</code> tells Chromium to use the data directory passed as second argument <code>$2</code></li> <li><code>--load-extension="$VIMIUM_EXT_PATH"</code> instructs Chromium to specifically load the Vimium extension</li> </ol> <p>And that's it!</p> <p>With this, whenever I launch Outlook from my app launcher, it will open a custom instance of Chromium with Outlook opened. It looks and feels like a desktop app but it is actually a disguised Chromium browser.</p> <p>We are almost done, but there is still one important thing left: <strong>binding the app to a Hyprland workspace</strong>.</p> <h2 id="hyprland-rules">Hyprland rules<a class="post-anchor" href="#hyprland-rules" aria-label="Anchor link for: hyprland-rules"><span aria-hidden="true">#</span></a> </h2> <p>If you remember my workspace setup, I want my email client to open on workspace 4. To do this, I need to define some <a rel="external" href="https://wiki.hypr.land/Configuring/Window-Rules/">window rules</a>.</p> <p>Since my config is quite big, I have decided to split it into multiple files and I keep workspace-related window rules in <a rel="external" href="https://github.com/coko7/.dotfiles/blob/main/.config/hypr/window_rules_workspaces.conf"><code>window_rules_workspace.conf</code></a>:</p> <pre class="giallo" style="color: #CDD6F4; background-color: #1E1E2E;"><code data-lang="ini"><span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #7F849C;">1</span><span style="color: #89B4FA;">windowrule</span><span style="color: #94E2D5;"> =</span><span> workspace 4, match:class ^(chrome-outlook.office.com__-Default)$</span></span> <span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #7F849C;">2</span><span style="color: #89B4FA;">windowrule</span><span style="color: #94E2D5;"> =</span><span> match:class ^(chrome-outlook.office.com__-Default)$, tile on</span></span></code></pre> <p>Hyprland configuration is rather easy to understand even if it's your first time seeing it:</p> <ol> <li>Assign Outlook to <strong>workspace 4</strong></li> <li>Force the Outlook window to be tiled instead of floating</li> </ol> <p>In this case, the <code>^(chrome-outlook.office.com__-Default)$</code> <a rel="external" href="https://en.wikipedia.org/wiki/Regular_expression">regex</a> matches the Outlook window. Okay, sure... But where did I find weird-looking class name?</p> <p>That's Hyprland's strongest suite in my opinion, it comes with a bunch of tools that expose metadata about desktop objects (windows, monitors, devices, etc.). Here, the command I use to get the class name for Outlook is the following:</p> <pre class="giallo" style="color: #CDD6F4; background-color: #1E1E2E;"><code data-lang="shellscript"><span class="giallo-l"><span style="color: #89B4FA;font-style: italic;">hyprctl</span><span style="color: #A6E3A1;"> clients -j</span><span style="color: #94E2D5;"> |</span><span style="color: #89B4FA;font-style: italic;"> jq</span><span style="color: #A6E3A1;"> '.[].class'</span></span></code></pre> <p><strong>More nonsense commands 😡 !!??</strong></p> <p>Calm down, I will explain everything:</p> <ul> <li><code>hyprctl clients -j</code>: <ul> <li><code>hyprctl</code> is the main Hyprland command line tool to query desktop objects</li> <li><code>clients</code> is a subcommand of <code>hyprctl</code> that uses the Hyprland API to find the list of clients (opened windows/applications)</li> <li><code>-j</code> tells Hyprland to format the output as <a rel="external" href="https://en.wikipedia.org/wiki/JSON">JSON</a> <em>(that's why I love Hyprland)</em></li> </ul> </li> <li><code>jq '.[].class'</code> relies on <a rel="external" href="https://github.com/jqlang/jq">jq</a> to process the JSON output from Hyprland and format it to only show individual class names.</li> </ul> <p>When I run this on my system, this is what I get:</p> <pre class="giallo" style="color: #CDD6F4; background-color: #1E1E2E;"><code data-lang="shellsession"><span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #7F849C;">1</span><span style="color: #9399B2;">$</span><span> hyprctl clients -j </span><span style="color: #94E2D5;">|</span><span style="color: #89B4FA;font-style: italic;"> jq</span><span style="color: #A6E3A1;"> '.[].class'</span></span> <span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #7F849C;">2</span><span>"librewolf"</span></span> <span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #7F849C;">3</span><span>"chrome-outlook.office.com__-Default"</span></span> <span class="giallo-l"><span aria-hidden="true" class="giallo-ln" style="color: #7F849C;">4</span><span>"kitty"</span></span></code></pre> <p>Spot anything familiar? I don't know about you but the second class <code>chrome-outlook.office.com__-Default</code> sure sounds like it could be our Outlook window.</p> <p>And that's it! Now when I launch Outlook, it will always be opened on workspace 4. Easy enough, right?</p> <h1 id="conclusion">Conclusion<a class="post-anchor" href="#conclusion" aria-label="Anchor link for: conclusion"><span aria-hidden="true">#</span></a> </h1> <p>It may seem like I have to do a lot of work to turn a simple website into a desktop application. But, in reality, all I have to do is create the desktop entry and the Hyprland rule. And creating these takes one or two minutes. Most of the heavy lifting is performed by the <code>chromium-nerd-app.sh</code> script.</p> <p>I hope you liked this article and learned some neat things. I had a lot of fun writing it! All the configuration and scripts shown here can be found on my <a rel="external" href="https://github.com/coko7/.dotfiles">GitHub</a>:</p> <ul> <li><a rel="external" href="https://github.com/coko7/.dotfiles/tree/main/.config/hypr">Hyprland files</a></li> <li><a rel="external" href="https://github.com/coko7/.dotfiles/blob/main/.config/local/bin-sh/global/chromium-nerd-app.sh">chromium-nerd-app.sh script</a></li> </ul> <p>If you have any question or feedback, feel free to email me at <a href="mailto:contact@coko7.fr">contact@coko7.fr</a>. Please consider sharing this around if you found it helpful <em>(or even if it was not helpful)</em>.</p> <p>Alright, I am done with my rambling. Bye bye 👋</p> <p><code>:wqa</code></p>